我的服务页面优化

src/components/apass-dialog.vue

@@ -7,27 +7,35 @@
       top="25vh"
     >
       <h3 class="dialog_title" slot="title">
-        <span v-text="title"></span>
+        <span v-text="title || '提示'"></span>
       </h3>
 
-      <div v-if="$slots.content" class="dialog_content appas_table">
+      <div class="dialog_content appas_table" v-if="$slots.content">
         <slot name="content"></slot>
       </div>
-      <p v-else class="dialog_msg" v-text="msg"></p>
+      <p class="dialog_msg" v-html="msg" v-else></p>
 
       <div
-        v-if="$slots.action"
         slot="footer"
         class="dialog_action apass_button"
+        v-if="$slots.action"
       >
         <slot name="action"></slot>
       </div>
-      <div v-else slot="footer" class="dialog_action apass_button">
-        <el-button type="defalut" size="mini" @click="hide">
-          取消
+      <div slot="footer" class="dialog_action apass_button" v-else>
+        <el-button
+          type="defalut"
+          size="mini"
+          v-text="cancelText || '取消'"
+          @click="hide"
+        >
         </el-button>
-        <el-button type="primary" size="mini" @click="dialogSubmit">
-          确定
+        <el-button
+          type="primary"
+          size="mini"
+          v-text="sunbmitText || '确定'"
+          @click="dialogSubmit"
+        >
         </el-button>
       </div>
     </el-dialog>
@@ -40,16 +48,28 @@ export default {
   props: {
     width: {
       type: String,
-      default: () => "400px",
+      default: () => "420px",
     },
     title: {
       type: String,
-      default: () => "提示",
+      default: () => "",
     },
     msg: {
       type: String,
       default: () => "",
     },
+    cancelText: {
+      type: String,
+      default: () => "",
+    },
+    sunbmitText: {
+      type: String,
+      default: () => "",
+    },
+    submit: {
+      type: Function,
+      default: () => null,
+    },
   },
   data: () => ({
     showDialog: false,
@@ -62,7 +82,11 @@ export default {
       this.showDialog = false;
     },
     dialogSubmit() {
+      if (typeof this.submit === "function") {
+        this.submit();
+      } else {
         this.$emit("submit");
+      }
       this.hide();
     },
   },

src/components/apass-list.vue

@@ -6,6 +6,18 @@
     <div class="main-container">
       <div class="header-container" v-if="!hideHeader">
         <div class="header-left apass_button">
+          <el-button
+            v-if="listFilter.length"
+            @click="showListFilter = !showListFilter"
+          >
+            {{ showListFilter ? "收起" : "筛选" }}
+            <i
+              class="el-icon--right"
+              :class="
+                showListFilter ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
+              "
+            ></i>
+          </el-button>
           <slot name="header-left"></slot>
         </div>
         <div class="header-center">
@@ -13,7 +25,7 @@
         </div>
         <div class="header-right">
           <el-input
-            v-model="searchFilter"
+            v-model="searchValue"
             prefix-icon="el-icon-search"
             :placeholder="searchPlaceholder"
             style="width:240px;"
@@ -21,10 +33,28 @@
           ></el-input>
         </div>
       </div>
+
+      <list-filter
+        v-if="!hideHeader"
+        class="apass_filter"
+        :show="showListFilter"
+        :filter-list="listFilter"
+        @filter-change="filterChange"
+      ></list-filter>
+
       <div class="cross_line" v-if="!hideHeader"></div>
-      <div class="list-container appas_table">
+
+      <div class="list-container appas_table" v-if="$slots.content">
         <slot name="list"></slot>
       </div>
+      <div class="list-container appas_table" v-else>
+        <list-table
+          :header="listHeader"
+          :data="listData"
+          :padding-left="35"
+        ></list-table>
+      </div>
+
       <list-pagination
         :total="listTotal"
         :page-sizes="pageSizes"
@@ -38,28 +68,49 @@
 </template>
 
 <script>
+import listTable from "@/components/apass-table";
 import ListPagination from "@/components/comments-pagination";
+import ListFilter from "@/components/table-filter";
 
 export default {
   components: {
+    ListFilter,
+    listTable,
     ListPagination,
   },
   props: {
+    listFilter: {
+      type: Array,
+      default: () => [],
+    },
+    listHeader: {
+      type: Array,
+      default: () => [],
+    },
+    listData: {
+      type: Array,
+      default: () => [],
+    },
+    listPaddingLeft: {
+      type: [Number, String],
+    },
     listTotal: {
       type: Number,
-      default: 0,
+      default: () => 0,
     },
     hideHeader: {
       type: Boolean,
-      default: false,
+      default: () => false,
     },
     searchPlaceholder: {
       type: String,
-      default: "请输入关键字"
-    }
+      default: () => "请输入关键字",
+    },
   },
   data: () => ({
-    searchFilter: "",
+    showListFilter: false,
+    filter: {},
+    searchValue: "",
     pageSize: 10,
     currentPage: 1,
     timer: null,
@@ -69,6 +120,10 @@ export default {
     searchAction(value) {
       this.listAction();
     },
+    filterChange(filter) {
+      this.filter = filter;
+      this.listAction();
+    },
     changePageSize(value) {
       this.pageSize = value;
       this.currentPage = 1;
@@ -85,13 +140,17 @@ export default {
 
       this.timer = setTimeout(() => {
         this.$emit("list-action", {
-          filter: this.searchFilter,
-          pageSize: this.pageSize,
-          currentPage: this.currentPage,
+          ...this.filter,
+          keyword: this.searchValue,
+          size: this.pageSize,
+          page: this.currentPage,
         });
       }, 200);
     },
   },
+  mounted() {
+    this.listAction();
+  },
 };
 </script>
 
@@ -125,6 +184,9 @@ export default {
 .header-container .el-button + .el-button {
   margin-left: 25px;
 }
+.apass_filter {
+  margin-top: 10px;
+}
 .cross_line {
   border-top: 1px solid #e3e5ef;
   margin: 20px -20px 0;

src/components/apass-table.vue

+<template>
+  <div class="appas_table">
+    <el-table slot="list" :border="false" :data="data">
+      <el-table-column :width="paddingLeft - 10"></el-table-column>
+      <el-table-column
+        v-for="(item, index) in header"
+        :label="item.label"
+        :align="item.align || 'left'"
+        :width="item.width"
+        :key="'head_' + index"
+      >
+        <template slot-scope="scope">
+          <div v-if="item.type === 'buttons'" class="row_action">
+            <template v-for="(v, i) in item.actionList">
+              <a
+                class="btn"
+                :class="{ warn: v.label === '删除' }"
+                :key="'btn_' + index + '_' + i"
+                @click="v.callback && v.callback(scope.row)"
+                v-text="v.label"
+              >
+              </a>
+              <span
+                v-if="i < item.actionList.length - 1"
+                class="interval_line"
+                :key="'line_' + index + '_' + i"
+                >|</span
+              >
+            </template>
+          </div>
+          <div v-else-if="item.type === 'button'" class="row_action">
+            <a
+              class="btn"
+              v-text="scope.row[item.prop]"
+              @click="item.callback && item.callback(scope.row)"
+            ></a>
+          </div>
+          <span v-else v-text="scope.row[item.prop]"></span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    header: {
+      type: Array,
+      default: () => [],
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    paddingLeft: {
+      type: [Number, String],
+      default: () => 50,
+    },
+  },
+};
+</script>

src/store/index.js

@@ -7,7 +7,7 @@ const store = new Vuex.Store({
     role: 2, // 0：普通用户，1：组织管理员，2：超级管理员
     serviceShopMenu: "shopDataList", // 服务超市侧边栏
     fwglNav: [
-      ["注册发布的服务", "申请的服务", "审批的服务", "云资源服务"], // 普通用户
+      ["注册发布的服务", "申请的服务", "云资源服务"], // 普通用户
       ["组织服务管理", "服务审批管理", "云资源管理"], // 组织管理员
       ["平台服务管理", "服务审批管理", "云资源管理"], // 超级管理员
     ], // 服务管理列表，onlyRead