From ac05c908e7053520944bdc97f194bf6294ff54aa Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Fri, 29 May 2020 16:29:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E6=9C=8D=E5=8A=A1=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/apass-dialog.vue       |  48 +-
 src/components/apass-list.vue         |  82 ++-
 src/components/apass-table.vue        |  62 ++
 src/pages/workbench/fwgl/fwglList.vue | 776 +++++++++++++++++---------
 src/store/index.js                    |   2 +-
 5 files changed, 691 insertions(+), 279 deletions(-)
 create mode 100644 src/components/apass-table.vue

diff --git a/src/components/apass-dialog.vue b/src/components/apass-dialog.vue
index cc4efd9..b3d9191 100644
--- a/src/components/apass-dialog.vue
+++ b/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() {
-      this.$emit("submit");
+      if (typeof this.submit === "function") {
+        this.submit();
+      } else {
+        this.$emit("submit");
+      }
       this.hide();
     },
   },
diff --git a/src/components/apass-list.vue b/src/components/apass-list.vue
index 6c73ecd..c7ad310 100644
--- a/src/components/apass-list.vue
+++ b/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;
diff --git a/src/components/apass-table.vue b/src/components/apass-table.vue
new file mode 100644
index 0000000..8e09813
--- /dev/null
+++ b/src/components/apass-table.vue
@@ -0,0 +1,62 @@
+<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>
diff --git a/src/pages/workbench/fwgl/fwglList.vue b/src/pages/workbench/fwgl/fwglList.vue
index 4428d30..a7bac7b 100644
--- a/src/pages/workbench/fwgl/fwglList.vue
+++ b/src/pages/workbench/fwgl/fwglList.vue
@@ -1,73 +1,142 @@
 <template>
-  <div class="list_container">
-    <div class="apass_breadcrumb">
-      <el-breadcrumb separator="/">
-        <el-breadcrumb-item>我的服务</el-breadcrumb-item>
+  <div class="service_management_list">
+    <apass-list
+      search-placeholder="请输入关键字"
+      :list-total="listTotal"
+      :list-filter="filterList"
+      :list-header="listHeader"
+      :list-data="listData"
+      :list-padding-left="35"
+      @list-action="initDatas"
+    >
+      <el-breadcrumb separator="/" slot="breadcrumb">
+        <el-breadcrumb-item :to="`/fwgl/${level}`">我的服务</el-breadcrumb-item>
         <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
       </el-breadcrumb>
-    </div>
-    <div class="main_container">
-      <ces-table
-        class="r_yhgl_table"
-        size="mini"
-        :detailsUrl="detailsUrl"
-        :border="false"
-        :headers="headers"
-        :datas="datas"
-        :searchShow="true"
-        :autoAdd="false"
-        :emptyText="emptyText"
-        :stripe="true"
-        :pageSizeShow="true"
-        :filterList="filterList"
-        :isIndex="false"
-        @action-delete="deleteItem"
-        @action-edit="editItem"
-        @action-sold-out="soldOutItem"
-        @action-sold-out-2="soldOutItem2"
-        @action-cancel="cancelItem"
-        @action-approval="approvalItem"
-        @action-detail="detailItem"
-        @action-allot="allotItem"
-        style="margin-top: 50px;"
-      ></ces-table>
-    </div>
-    <dialog-action
-      ref="myConfirm"
-      :confirm-options="confirmOptions"
-    ></dialog-action>
+    </apass-list>
+
+    <apass-dialog
+      ref="dialog"
+      :title="dialogInfo.title"
+      :msg="dialogInfo.msg"
+      :submit="dialogInfo.submit"
+    ></apass-dialog>
   </div>
 </template>
 
 <script>
-import cesTable from "@/components/table-um";
-import dialogAction from "@/components/dialog-action";
 import { mapState } from "vuex";
+import apassList from "@/components/apass-list";
+import apassDialog from "@/components/apass-dialog";
 
 export default {
+  components: { apassList, apassDialog },
   data: () => ({
     level: 0, // 用户等级
     type: 0, // 访问的页面
-    headers: [],
-    datas: [],
-    url: "",
-    confirmOptions: {
-      title: "",
-      message: "",
-      btnCancelText: "",
-      btnSubmitText: "",
-      item: null,
-    },
-    emptyText: "暂时没数据",
+    listTotal: 0,
+    listHeader: [],
+    listData: [
+      {
+        id: 1000001,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "贵阳市公安局",
+        system_count: 6,
+        organization_manager: 3,
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000002,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "语音识别",
+        system_count: 6,
+        organization_manager: 3,
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000003,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        system_count: 6,
+        organization_manager: 3,
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000004,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        system_count: 6,
+        organization_manager: 3,
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000005,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        system_count: 6,
+        organization_manager: 3,
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000006,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        system_count: 6,
+        organization_manager: 3,
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000007,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        system_count: 6,
+        organization_manager: 3,
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 100000,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        system_count: 6,
+        organization_manager: 3,
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000009,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        system_count: 6,
+        organization_manager: 3,
+        time: "2019-04-11 12:50:30",
+      },
+      {
+        id: 1000010,
+        img:
+          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        name: "轨迹绘制",
+        system_count: 6,
+        organization_manager: 3,
+        time: "2019-04-11 12:50:30",
+      },
+    ],
     filterList: [
       {
         name: "服务类型",
-        prop: "fwlx",
+        prop: "data_service_type",
         data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
       },
       {
         name: "服务领域",
-        prop: "fwly",
+        prop: "sectors",
         data: [
           "数据服务",
           "时空服务",
@@ -85,15 +154,20 @@ export default {
       },
       {
         name: "开放程度",
-        prop: "kfcd",
+        prop: "openness",
         data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
       },
       {
         name: "服务状态",
-        prop: "fwzt",
+        prop: "state",
         data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
       },
     ],
+    dialogInfo: {
+      title: "",
+      msg: "",
+      submit: null,
+    },
   }),
   computed: {
     ...mapState({
@@ -114,10 +188,6 @@ export default {
       return url;
     },
   },
-  components: {
-    cesTable,
-    dialogAction,
-  },
   methods: {
     initFilter() {
       /* this.$http
@@ -131,35 +201,19 @@ export default {
           console.log(error);
         }); */
     },
-    initDatas() {
-      this.$http
-        .get("/apaas/service/v3/service/manager/list", {
-          params: {
-            data_service_type: 0,
-            sectors: 0,
-            openness: 0,
-            state: "",
-            keyword: "",
-            page: 1,
-            size: 20,
-          },
-        })
-        .then(({ data }) => {
-          this.datas = data.data.data;
-          // console.log(this.datas);
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
     initHeader() {
       let level = this.level;
       let type = this.type;
 
       // 普通用户 --- 注册发布的服务
       if (level == 0 && type == 0) {
-        this.headers = [
-          { label: "服务名称", prop: "name", type: "href", align: "left" },
+        this.listHeader = [
+          {
+            label: "服务名称",
+            prop: "name",
+            type: "button",
+            callback: this.detailItem,
+          },
           {
             label: "服务领域",
             prop: "sectors_name",
@@ -172,7 +226,10 @@ export default {
             type: "",
             align: "center",
           },
-          { label: "服务描述", prop: "descript", type: "", align: "left" },
+          {
+            label: "服务描述",
+            prop: "descript",
+          },
           {
             label: "注册发布时间",
             prop: "create_time",
@@ -187,23 +244,21 @@ export default {
           },
           {
             label: "操作",
-            type: "Button",
+            type: "buttons",
             align: "center",
             width: 240,
-            btnList: [
+            actionList: [
               {
-                type: "action-edit",
                 label: "编辑",
-                line: "|",
+                callback: this.editItem,
               },
               {
-                type: "action-sold-out",
                 label: "申请下架",
-                line: "|",
+                callback: this.applyForSoldOutItem,
               },
               {
-                type: "action-delete",
                 label: "删除",
+                callback: this.deleteItem,
               },
             ],
           },
@@ -211,77 +266,106 @@ export default {
       }
       // 普通用户 --- 申请的服务
       else if (level == 0 && type == 1) {
-        this.headers = [
-          { label: "服务名称", prop: "name", type: "href", align: "left" },
-          { label: "服务领域", prop: "date", type: "", align: "center" },
-          { label: "开放程度", prop: "address", type: "", align: "center" },
-          { label: "服务描述", prop: "address", type: "", align: "left" },
-          { label: "申请时间", prop: "address", type: "", align: "center" },
-          { label: "服务类型", prop: "address", type: "", align: "center" },
-          { label: "申请状态", prop: "address", type: "", align: "center" },
+        this.listHeader = [
           {
-            label: "操作",
-            type: "Button",
+            label: "服务名称",
+            prop: "name",
+            type: "button",
+            callback: this.detailItem,
+          },
+          {
+            label: "服务领域",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "开放程度",
+            prop: "address",
+            align: "center",
+          },
+          {
+            label: "服务描述",
+            prop: "address",
+          },
+          {
+            label: "申请时间",
+            prop: "address",
+            align: "center",
+          },
+          {
+            label: "服务类型",
+            prop: "address",
+            align: "center",
+          },
+          {
+            label: "申请状态",
+            prop: "address",
             align: "center",
-            btnList: [
-              {
-                type: "action-delete",
-                label: "删除",
-              },
-            ],
           },
-        ];
-      }
-      // 普通用户 --- 审批的服务
-      else if (level == 0 && type == 2) {
-        this.headers = [
-          { label: "服务名称", prop: "name", type: "", align: "left" },
-          { label: "服务领域", prop: "address", type: "", align: "center" },
-          { label: "开放程度", prop: "address", type: "", align: "center" },
-          { label: "请求方式", prop: "address", type: "", align: "center" },
-          { label: "服务描述", prop: "address", type: "", align: "left" },
-          { label: "审批时间", prop: "address", type: "", align: "center" },
-          { label: "服务类型", prop: "address", type: "", align: "center" },
-          { label: "审批状态", prop: "address", type: "", align: "center" },
           {
             label: "操作",
-            type: "Button",
+            type: "buttons",
             align: "center",
-            width: 160,
-            btnList: [
+            actionList: [
               {
-                type: "action-approval",
-                label: "审批",
-                line: "|",
-              },
-              {
-                type: "action-delete",
                 label: "删除",
+                callback: this.deleteItem,
               },
             ],
           },
         ];
       }
       // 普通用户 --- 云资源服务
-      else if (level == 0 && type == 3) {
-        this.headers = [
-          { label: "工作区域", prop: "name", type: "", align: "center" },
-          { label: "网络环境", prop: "name", type: "", align: "center" },
-          { label: "CPU（核）", prop: "name", type: "", align: "center" },
-          { label: "内存（GB）", prop: "name", type: "", align: "center" },
-          { label: "资源总量（GB）", prop: "name", type: "", align: "center" },
-          { label: "实例数（个）", prop: "name", type: "", align: "center" },
-          { label: "申请时间", prop: "name", type: "", align: "center" },
-          { label: "申请状态", prop: "name", type: "", align: "center" },
+      else if (level == 0 && type == 2) {
+        this.listHeader = [
+          {
+            label: "工作区域",
+            prop: "name",
+          },
+          {
+            label: "网络环境",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "CPU（核）",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "内存（GB）",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "资源总量（GB）",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "实例数（个）",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "申请时间",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "申请状态",
+            prop: "name",
+            align: "center",
+          },
           {
             label: "操作",
-            type: "Button",
+            type: "buttons",
             align: "center",
             width: 160,
-            btnList: [
+            actionList: [
               {
-                type: "action-detail",
                 label: "查看详情",
+                callback: this.detailItem,
               },
             ],
           },
@@ -290,42 +374,103 @@ export default {
 
       // 组织管理员 --- 组织服务管理
       else if (level == 1 && type == 0) {
-        this.headers = [
-          { label: "服务名称", prop: "name", type: "href", align: "left" },
-          { label: "服务领域", prop: "date", type: "", align: "center" },
-          { label: "开放程度", prop: "date", type: "", align: "center" },
-          { label: "请求方式", prop: "date", type: "", align: "center" },
-          { label: "服务描述", prop: "date", type: "", align: "left" },
-          { label: "注册发布时间", prop: "date", type: "", align: "center" },
-          { label: "服务类型", prop: "date", type: "", align: "center" },
-          { label: "服务状态", prop: "date", type: "", align: "center" },
+        this.listHeader = [
+          {
+            label: "服务名称",
+            prop: "name",
+            type: "button",
+            callback: this.detailItem,
+          },
+          {
+            label: "服务领域",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "开放程度",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "请求方式",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "服务描述",
+            prop: "date",
+          },
+          {
+            label: "注册发布时间",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "服务类型",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "服务状态",
+            prop: "date",
+            align: "center",
+          },
         ];
       }
       // 组织管理员 --- 服务审批管理
       else if (level == 1 && type == 1) {
-        this.headers = [
-          { label: "服务名称", prop: "name", type: "", align: "left" },
-          { label: "服务领域", prop: "date", type: "", align: "center" },
-          { label: "开放程度", prop: "date", type: "", align: "center" },
-          { label: "请求方式", prop: "date", type: "", align: "center" },
-          { label: "服务描述", prop: "date", type: "", align: "left" },
-          { label: "审批时间", prop: "date", type: "", align: "center" },
-          { label: "服务类型", prop: "date", type: "", align: "center" },
-          { label: "审批状态", prop: "date", type: "", align: "center" },
+        this.listHeader = [
+          {
+            label: "服务名称",
+            prop: "name",
+          },
+          {
+            label: "服务领域",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "开放程度",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "请求方式",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "服务描述",
+            prop: "date",
+          },
+          {
+            label: "审批时间",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "服务类型",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "审批状态",
+            prop: "date",
+            align: "center",
+          },
           {
             label: "操作",
-            type: "Button",
+            type: "buttons",
             align: "center",
             width: 160,
-            btnList: [
+            actionList: [
               {
-                type: "action-approval",
                 label: "审批",
-                line: "|",
+                callback: this.approvalItem,
               },
               {
-                type: "action-delete",
                 label: "删除",
+                callback: this.deleteItem,
               },
             ],
           },
@@ -333,24 +478,55 @@ export default {
       }
       // 组织管理员 --- 云资源管理
       else if (level == 1 && type == 2) {
-        this.headers = [
-          { label: "工作区域", prop: "name", type: "", align: "center" },
-          { label: "网络环境", prop: "name", type: "", align: "center" },
-          { label: "CPU（核）", prop: "name", type: "", align: "center" },
-          { label: "内存（GB）", prop: "name", type: "", align: "center" },
-          { label: "资源总量（GB）", prop: "name", type: "", align: "center" },
-          { label: "实例数（个）", prop: "name", type: "", align: "center" },
-          { label: "使用用户", prop: "name", type: "", align: "center" },
-          { label: "用户申请时间", prop: "name", type: "", align: "center" },
+        this.listHeader = [
+          {
+            label: "工作区域",
+            prop: "name",
+          },
+          {
+            label: "网络环境",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "CPU（核）",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "内存（GB）",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "资源总量（GB）",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "实例数（个）",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "使用用户",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "用户申请时间",
+            prop: "name",
+            align: "center",
+          },
           {
             label: "操作",
-            type: "Button",
+            type: "buttons",
             align: "center",
             width: 160,
-            btnList: [
+            actionList: [
               {
-                type: "action-allot",
                 label: "分配",
+                callback: this.allotItem,
               },
             ],
           },
@@ -359,33 +535,59 @@ export default {
 
       // 超级管理员 --- 组织服务管理
       else if (level == 2 && type == 0) {
-        this.headers = [
-          { label: "服务名称", prop: "name", type: "href", align: "left" },
-          { label: "服务领域", prop: "date", type: "", align: "center" },
-          { label: "开放程度", prop: "date", type: "", align: "center" },
-          { label: "请求方式", prop: "date", type: "", align: "center" },
-          { label: "服务描述", prop: "date", type: "", align: "left" },
-          { label: "注册发布时间", prop: "date", type: "", align: "center" },
-          { label: "服务类型", prop: "date", type: "", align: "center" },
+        this.listHeader = [
+          {
+            label: "服务名称",
+            prop: "name",
+            type: "button",
+            callback: this.detailItem,
+          },
+          {
+            label: "服务领域",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "开放程度",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "请求方式",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "服务描述",
+            prop: "date",
+          },
+          {
+            label: "注册发布时间",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "服务类型",
+            prop: "date",
+            align: "center",
+          },
           {
             label: "操作",
-            type: "Button",
+            type: "buttons",
             align: "center",
             width: 240,
-            btnList: [
+            actionList: [
               {
-                type: "action-edit",
                 label: "编辑",
-                line: "|",
+                callback: this.editItem,
               },
               {
-                type: "action-sold-out-2",
                 label: "下架",
-                line: "|",
+                callback: this.soldOutItem,
               },
               {
-                type: "action-delete",
                 label: "删除",
+                callback: this.deleteItem,
               },
             ],
           },
@@ -393,29 +595,58 @@ export default {
       }
       // 超级管理员 --- 服务审批管理
       else if (level == 2 && type == 1) {
-        this.headers = [
-          { label: "服务名称", prop: "name", type: "", align: "left" },
-          { label: "服务领域", prop: "date", type: "", align: "center" },
-          { label: "开放程度", prop: "date", type: "", align: "center" },
-          { label: "请求方式", prop: "date", type: "", align: "center" },
-          { label: "服务描述", prop: "date", type: "", align: "left" },
-          { label: "审批时间", prop: "date", type: "", align: "center" },
-          { label: "服务类型", prop: "date", type: "", align: "center" },
-          { label: "审批状态", prop: "date", type: "", align: "center" },
+        this.listHeader = [
+          {
+            label: "服务名称",
+            prop: "name",
+          },
+          {
+            label: "服务领域",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "开放程度",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "请求方式",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "服务描述",
+            prop: "date",
+          },
+          {
+            label: "审批时间",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "服务类型",
+            prop: "date",
+            align: "center",
+          },
+          {
+            label: "审批状态",
+            prop: "date",
+            align: "center",
+          },
           {
             label: "操作",
-            type: "Button",
+            type: "buttons",
             align: "center",
             width: 160,
-            btnList: [
+            actionList: [
               {
-                type: "action-approval",
                 label: "审批",
-                line: "|",
+                callback: this.approvalItem,
               },
               {
-                type: "action-delete",
                 label: "删除",
+                callback: this.deleteItem,
               },
             ],
           },
@@ -423,20 +654,39 @@ export default {
       }
       // 超级管理员 --- 云资源管理
       else if (level == 2 && type == 2) {
-        this.headers = [
-          { label: "所属组织", prop: "name", type: "", align: "center" },
-          { label: "CPU使用量", prop: "name", type: "", align: "center" },
-          { label: "内存使用量", prop: "name", type: "", align: "center" },
-          { label: "工作区域数量", prop: "name", type: "", align: "center" },
-          { label: "创建时间", prop: "name", type: "", align: "center" },
+        this.listHeader = [
+          {
+            label: "所属组织",
+            prop: "name",
+          },
+          {
+            label: "CPU使用量",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "内存使用量",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "工作区域数量",
+            prop: "name",
+            align: "center",
+          },
+          {
+            label: "创建时间",
+            prop: "name",
+            align: "center",
+          },
           {
             label: "操作",
-            type: "Button",
+            type: "buttons",
             align: "center",
-            btnList: [
+            actionList: [
               {
-                type: "action-delete",
                 label: "删除",
+                callback: this.deleteItem,
               },
             ],
           },
@@ -448,61 +698,83 @@ export default {
         throw Error("The page doesn't exist");
       }
     },
-    deleteItem(item) {
-      this.confirmOptions.title = "";
-      this.confirmOptions.message = "是否删除该条服务？";
-      this.confirmOptions.btnCancelText = "";
-      this.confirmOptions.btnSubmitText = "";
-      this.confirmOptions.confirmSubmit = () => {
-        console.log("deleteItem - " + item.name);
-        this.$refs.myConfirm.hideModel();
-      };
-      this.$refs.myConfirm.showModel();
+    initDatas(filter) {
+      // console.log(filter);
+
+      this.$http
+        .get("/apaas/service/v3/service/manager/list", {
+          params: {
+            data_service_type: 0,
+            sectors: 0,
+            openness: 0,
+            state: "",
+            keyword: filter.keyword,
+            page: filter.page,
+            size: filter.size,
+          },
+        })
+        .then(({ data }) => {
+          // console.log(data);
+          this.listTotal = data.data.total;
+          this.listData = data.data.data;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    showDialog() {
+      this.$refs.dialog.show();
     },
     editItem(item) {
       this.$router.push(
         `/fwgl/${this.level}/${this.type}/serviceedit/${item.id}`
       );
     },
-    soldOutItem(item) {
-      this.confirmOptions.title = "提示";
-      this.confirmOptions.message =
+    applyForSoldOutItem(item) {
+      this.dialogInfo.title = "是否确定下架服务";
+      this.dialogInfo.msg =
         "下架此服务会导致用户被迫暂停对服务的调用，下架前需向超级管理员发送通知，超级管理员通过后此服务将会从服务超市中下架。";
-      this.confirmOptions.btnCancelText = "";
-      this.confirmOptions.btnSubmitText = "发送通知";
-      this.confirmOptions.confirmSubmit = () => {
-        console.log("soldOutItem - " + item.name);
-        this.$refs.myConfirm.hideModel();
+      this.dialogInfo.cancelText = "取消";
+      this.dialogInfo.sunbmitText = "发送通知";
+      this.dialogInfo.submit = () => {
+        console.log("applyForSoldOutItem - " + item.name);
       };
-      this.$refs.myConfirm.showModel();
+      this.showDialog();
     },
-    soldOutItem2(item) {
-      this.confirmOptions.title = "提示";
-      this.confirmOptions.message = "下架此服务会导致用户被迫暂停对服务的调用";
-      this.confirmOptions.btnCancelText = "";
-      this.confirmOptions.btnSubmitText = "确定";
-      this.confirmOptions.confirmSubmit = () => {
-        console.log("soldOutItem2 - " + item.name);
-        this.$refs.myConfirm.hideModel();
+    deleteItem(item) {
+      this.dialogInfo.title = "";
+      this.dialogInfo.msg = "是否删除该条服务？";
+      this.dialogInfo.cancelText = "";
+      this.dialogInfo.sunbmitText = "";
+      this.dialogInfo.submit = () => {
+        console.log("deleteItem - " + item.name);
       };
-      this.$refs.myConfirm.showModel();
+      this.showDialog();
     },
-    cancelItem(item) {
-      console.log("cancelItem - " + item.name);
+    detailItem(item) {
+      this.$router.push(`${this.detailsUrl + item.id}`);
     },
     approvalItem(item) {
       this.$router.push(
         `/fwgl/${this.level}/${this.type}/approvalserviceedit/${item.id}`
       );
     },
-    detailItem(item) {
-      console.log("detailItem - " + item.name);
-    },
     allotItem(item) {
       console.log("allotItem - " + item.name);
     },
-    confirmSubmit(item) {
-      console.log(item.name);
+    soldOutItem(item) {
+      this.dialogInfo.title = "提示";
+      this.dialogInfo.msg =
+        "下架此服务会导致调用该服务的<br />用户被迫暂停对服务的调用";
+      this.dialogInfo.cancelText = "";
+      this.dialogInfo.sunbmitText = "确定";
+      this.dialogInfo.confirmSubmit = () => {
+        console.log("submit - " + item.name);
+      };
+      this.showDialog();
+    },
+    dialogSubmit() {
+      console.log("dialog submit");
     },
   },
   created() {
@@ -510,20 +782,12 @@ export default {
     this.type = parseInt(this.$route.params.type);
     this.initFilter();
     this.initHeader();
-    this.initDatas();
   },
 };
 </script>
 
 <style scoped>
-.list_container {
-  padding: 0 20px;
-}
-.main_container {
-  height: calc(100% - 75px);
-  padding: 15px 20px;
-  border-radius: 10px;
-  overflow: hidden;
-  background-color: #fff;
+.service_management_list {
+  height: 100%;
 }
 </style>
diff --git a/src/store/index.js b/src/store/index.js
index cf5d245..1cea098 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -7,7 +7,7 @@ const store = new Vuex.Store({
     role: 2, // 0：普通用户，1：组织管理员，2：超级管理员
     serviceShopMenu: "shopDataList", // 服务超市侧边栏
     fwglNav: [
-      ["注册发布的服务", "申请的服务", "审批的服务", "云资源服务"], // 普通用户
+      ["注册发布的服务", "申请的服务", "云资源服务"], // 普通用户
       ["组织服务管理", "服务审批管理", "云资源管理"], // 组织管理员
       ["平台服务管理", "服务审批管理", "云资源管理"], // 超级管理员
     ], // 服务管理列表，onlyRead
-- 
2.26.0