feat: 企业中台服务清单

src/api/comCenterServeListNew.js

+import { get, post, download } from "@/utils/http";
+import {
+  EADC_ARRCHITECTURE,
+  EADC_KNOWLEDGE_POOL,
+  EADC_SHARED_ABILITY,
+} from "@/config/micromodule";
+
+export function getServiceList(data) {
+  return post(EADC_ARRCHITECTURE + "/arc-aby-iy/qryListPage", data);
+}

src/mixins/tableMixin.js

+/**
+ * @param {*} options string|| undefined
+ */
+export default function tableMixin(options) {
+  const name = options || "";
+  let changePageName = `${name}handlerCurrentChange`;
+  let changeSizeName = `${name}handlerSizeChange`;
+  let methodsName = `${name}getList`;
+  let pagerName = `${name}pager`;
+  let dataName = `${name}data`;
+  return {
+    data() {
+      return {
+        [dataName]: [],
+      };
+    },
+    mounted() {},
+    methods: {
+      [changePageName](page) {
+        this[pagerName].page = page;
+        this[methodsName]();
+      },
+      [changeSizeName](size) {
+        this[pagerName].size = size;
+        this[methodsName]();
+      },
+    },
+  };
+}

src/newComponents/ETable/functional.vue

+<script>
+export default {
+  functional: true,
+  props: {
+    row: {
+      type: Object,
+      required: true,
+    },
+    item: {
+      type: Object,
+      required: true,
+    },
+  },
+  render(h, ctx) {
+    // 
+    return ctx.props.item.render(h, ctx.props.row)
+  },
+};
+</script>
\ No newline at end of file

src/newComponents/ETable/index.vue

+<template>
+  <div class="eTableWrapper" :key="tableKey">
+    <div class="tableHeaderWrapper">
+      <slot name="header"></slot>
+    </div>
+    <div class="controlWrapper">
+      <div class="title" v-if="title">
+        <div>{{ title }}</div>
+      </div>
+      <div class="operate">
+        <template v-if="operateList.length">
+          <el-button v-for="(item, index) in operateList" :key="index" v-bind="filterBtns(item)"
+            :disabled="checkDisabled(item)" @click="item.click">{{ item.label }}</el-button>
+        </template>
+      </div>
+    </div>
+    <div class="mainTable">
+      <el-table ref="mainTableRef" v-bind="$attrs" v-on="$listeners" stripe border>
+        <el-table-column v-if="selectionList" type="selection" fixed="left" width="55" align="center"
+          :selectable="selectable"></el-table-column>
+        <el-table-column v-if="indexMethod !== null" type="index" :index="computedOrder" fixed="left" label="序号"
+          width="80" align="center"></el-table-column>
+        <template v-for="(item, index) in columns">
+          <el-table-column v-if="item.label !== '操作'" :key="index" :label="item.label" v-bind="fiterMethods(item)">
+            <template slot-scope="scope">
+              <tableColumnSlot :row="scope.row" :item="item" :index="scope.$index" />
+            </template>
+          </el-table-column>
+          <el-table-column v-else :key="index" fixed="right" :label="item.label" v-bind="fiterMethods(item)">
+            <template slot-scope="scope">
+              <el-button v-for="(item, index) in item.tableBtnList" :key="index" v-bind="filterBtns(item)"
+                :disabled="checkDisabled(item, scope.row, scope.$index)" @click="item.click(scope.row, scope.$index)">{{
+    item.label }}</el-button>
+            </template>
+          </el-table-column>
+        </template>
+        <slot name="end"></slot>
+      </el-table>
+    </div>
+    <div class="paginations" v-if="pager && pager.current">
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-page="pager.current" :page-sizes="pager.sizes" :page-size="pager.size"
+        layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import tableColumnSlot from "./tableColumnSlot.vue";
+export default {
+  name: "ETable",
+  components: { tableColumnSlot },
+  props: {
+    title: {
+      // tableName
+      type: String,
+      default: "",
+    },
+    tableKey: {
+      // single page deffer key
+      type: String,
+      default: "",
+    },
+    selectionList: {
+      // mutiple select
+      type: Array,
+    },
+    indexMethod: {
+      type: Boolean | null, //true 123| false 11,12,13| null
+      default: null,
+    },
+    selectable: {
+      type: Function | null, //
+      default: null,
+    },
+    operateList: {
+      //operate
+      type: Array,
+      default: () => {
+        return [
+          // demo
+          // {
+          //   label: "新增",
+          //   class:'btns',
+          //   icon:'fa-search',
+          //   size:'small',
+          //   click: () => {
+          //
+          //   }
+          // }
+        ];
+      },
+    },
+    columns: {
+      // table row props
+      type: Array,
+      default: () => [
+        // {
+        //   label: '建设类型', // label文字
+        //   prop: 'buildType', // 字段名
+        //   collectionType: true,
+        //   width: '120px',
+        //   showOverflowTooltip: true,
+        //   align: 'center',
+        //   className: 'btns',
+        //   selectable: () => { },
+        //   fixed: 'left',
+        //   minWidth: 100,
+        // },
+      ],
+    },
+    pager: {
+      type: Object,
+    },
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.$emit("update:tableRef", this.$refs.mainTableRef);
+  },
+  methods: {
+    computedOrder(index) {
+      if (this.indexMethod === true) {
+        return index + 1;
+      } else {
+        return (this.pager.current - 1) * this.pager.size + index + 1;
+      }
+    },
+    // 按钮是否禁用
+    checkDisabled(item, row, index) {
+      if (typeof item.disabled === "boolean") {
+        return item.disabled;
+      } else if (
+        Object.prototype.toString.call(item.disabled) === "[object Function]"
+      ) {
+        return row ? item.disabled(row, index) : item.disabled();
+      }
+    },
+    // 格式错乱主动调用解决
+    doLayout() {
+      this.$refs.mainTableRef.doLayout();
+    },
+    filterBtns(item) {
+      const { click, ...others } = item;
+      return { ...others };
+    },
+    // TODO: 是否需要筛选不需要处理的字段
+    fiterMethods(item) {
+      const { click, ...others } = item;
+      return { ...others };
+    },
+    handleSizeChange(size) {
+      this.$emit("sizeChange", size);
+    },
+    handleCurrentChange(page) {
+      this.$emit("currentChange", page);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
+
+.eTableWrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 0 12px;
+  flex-direction: column;
+
+  .tableHeaderWrapper {
+    width: 100%;
+  }
+
+  .controlWrapper {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .title {
+      font-size: 22px;
+      padding-bottom: 8px;
+      position: relative;
+      text-indent: 6px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      &::before {
+        display: block;
+        content: "";
+        width: 4px;
+        border-radius: 6px;
+        background-color: #0d867f;
+        height: 20px;
+      }
+    }
+
+    .operate {
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+      padding-bottom: 8px;
+      align-items: center;
+    }
+  }
+
+  .mainTable {
+    width: 100%;
+
+    /deep/.el-table__fixed {
+      height: 100% !important;
+    }
+  }
+
+  .paginations {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: 20px;
+    margin-bottom: 12px;
+  }
+}
+</style>

src/newComponents/ETable/tableColumnSlot.vue

+<template>
+  <div class="tableCloumnSlotWrapper">
+    <span v-if="!item.T && !item.render">{{ row[item.prop] || '--' }}</span>
+    <div :class="row[item.prop] ? 'defaultLink' : ''" v-else-if="item.T == 'a'" :style="item.style"
+      @click="handlerClick(item.click, row)">{{
+      row[item.prop] ||
+      '--' }}</div>
+    <FuncCom v-else-if="item.render" :item="item" :row="row" />
+    <el-switch v-else-if="item.T === 'switch'" :value="row[item.prop]" :active-color="item.activeColor || '#13ce66'"
+      :active-value="item.active" :inactive-value="item.inactive" :inactive-color="item.inactiveColor || '#13ce66'"
+      @change="item.click(row, index)"></el-switch>
+    <el-image v-else-if="item.T === 'image'" style="width: 60px; height: 60px" :src="row[item.prop]"
+      :preview-src-list="[row[item.prop]]">
+    </el-image>
+    <el-button v-else-if="item.T === 'button'" :class="item.class || ''" :size="item.size || 'small'"
+      @click="item.click(row, index)">{{ item.buttonName }}</el-button>
+    <span v-else :class="item.class || ''" :style="item.style || {}">{{ row[item.prop] || '--' }}</span>
+  </div>
+</template>
+
+<script>
+import FuncCom from './functional.vue'
+export default {
+  components: { FuncCom },
+  props: {
+    row: {
+      type: Object,
+      required: true
+    },
+    item: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  },
+  methods: {
+    handlerClick(click, row) {
+      if (click) {
+        click(row)
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.defaultLink {
+  text-decoration: underline;
+}
+</style>
\ No newline at end of file

src/router/index.js

-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Main from '@/views/Main'
+import Vue from "vue";
+import VueRouter from "vue-router";
+import Main from "@/views/Main";
 
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
 
 // 解决elementUI导航栏中的vue-router在3.0版本以上重复点击菜单报错的问题 ###
 // 解决elementUI导航栏中的vue-router在3.0版本以上重复点击菜单报错的问题 ###
-const originalPush = VueRouter.prototype.push
+const originalPush = VueRouter.prototype.push;
 VueRouter.prototype.push = function push(location) {
 VueRouter.prototype.push = function push(location) {
-  return originalPush.call(this, location).catch((err) => err)
-}
+  return originalPush.call(this, location).catch((err) => err);
+};
 /**
 /**
  * meta: {
  * meta: {
  *   title: 'xxx', tag标签名称
  *   title: 'xxx', tag标签名称
@@ -19,71 +19,71 @@ VueRouter.prototype.push = function push(location) {
  */
  */
 export const routes = [
 export const routes = [
   {
   {
-    path: '/',
-    name: 'home',
-    redirect: '/main',
+    path: "/",
+    name: "home",
+    redirect: "/main",
     // component: Home
     // component: Home
   },
   },
   {
   {
-    path: '/redirect',
+    path: "/redirect",
     component: Main,
     component: Main,
     children: [
     children: [
       {
       {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect/index')
-      }
-    ]
+        path: "/redirect/:path(.*)",
+        component: () => import("@/views/redirect/index"),
+      },
+    ],
   },
   },
   {
   {
-    path: '/main',
-    name: 'main',
+    path: "/main",
+    name: "main",
     // route level code-splitting
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     // which is lazy-loaded when the route is visited.
     component: Main,
     component: Main,
-    meta : {
-      title: '首页'
+    meta: {
+      title: "首页",
     },
     },
     children: [
     children: [
       {
       {
-        path: '/main/archiEleList', //架构元素管理
-        name: 'archiEleList',
-        component: () => import('@/views/archi-ele-list/index.vue'),
+        path: "/main/archiEleList", //架构元素管理
+        name: "archiEleList",
+        component: () => import("@/views/archi-ele-list/index.vue"),
         meta: {
         meta: {
-          title: '架构元素管理',
+          title: "架构元素管理",
         },
         },
       },
       },
       {
       {
-        path: '/main/archi-ele-rela', //架构元素关系管理
-        name: 'archi-ele-rela',
-        component: () => import('@/views/archiEleRela/index.vue'),
+        path: "/main/archi-ele-rela", //架构元素关系管理
+        name: "archi-ele-rela",
+        component: () => import("@/views/archiEleRela/index.vue"),
         meta: {
         meta: {
-          title: '架构元素关系管理',
+          title: "架构元素关系管理",
         },
         },
       },
       },
       {
       {
-        path: '/main/archi-view-config', //架构视图配置
-        name: 'archi-view-config',
-        component: () => import('@/views/archiViewConfig/index.vue'),
+        path: "/main/archi-view-config", //架构视图配置
+        name: "archi-view-config",
+        component: () => import("@/views/archiViewConfig/index.vue"),
         meta: {
         meta: {
-          title: '架构视图配置',
+          title: "架构视图配置",
         },
         },
       },
       },
       {
       {
-        path: '/main/meta-model-dic', //元模型字典管理
-        name: 'meta-model-dic',
-        component: () => import('@/views/metaModelDic/index.vue'),
+        path: "/main/meta-model-dic", //元模型字典管理
+        name: "meta-model-dic",
+        component: () => import("@/views/metaModelDic/index.vue"),
         meta: {
         meta: {
-          title: '元模型字典管理',
+          title: "元模型字典管理",
         },
         },
       },
       },
       {
       {
-        path: '/main/busiAssetslist', //业务架构资产管理
-        name: 'busiAssetslist',
-        component: () => import('@/views/busi-assets-list/index.vue'),
+        path: "/main/busiAssetslist", //业务架构资产管理
+        name: "busiAssetslist",
+        component: () => import("@/views/busi-assets-list/index.vue"),
         meta: {
         meta: {
-          title: '总体架构资产管理',
-          keepAlive: true
+          title: "总体架构资产管理",
+          keepAlive: true,
         },
         },
       },
       },
       // {
       // {
@@ -92,79 +92,79 @@ export const routes = [
       // 	component: () => import('@/views/YuanMoXingGuanLi/YuanMoXingGuanLiCanvas/index.vue'),
       // 	component: () => import('@/views/YuanMoXingGuanLi/YuanMoXingGuanLiCanvas/index.vue'),
       // },
       // },
       {
       {
-        path: '/main/doc-demo', //在线文档编制
-        name: 'doc-demo',
-        component: () => import('@/views/docDemo/index.vue'),
+        path: "/main/doc-demo", //在线文档编制
+        name: "doc-demo",
+        component: () => import("@/views/docDemo/index.vue"),
         meta: {
         meta: {
-          title: 'demo',
+          title: "demo",
         },
         },
       },
       },
       {
       {
-        path: '/main/metaModelList', //元模型管理
-        name: 'metaModelList',
-        component: () => import('@/views/meta-model-list/index.vue'),
+        path: "/main/metaModelList", //元模型管理
+        name: "metaModelList",
+        component: () => import("@/views/meta-model-list/index.vue"),
         meta: {
         meta: {
-          title: '元模型管理',
-          keepAlive: true
+          title: "元模型管理",
+          keepAlive: true,
         },
         },
       },
       },
       {
       {
-        path: '/main/metaModelListDetails', //元模型管理详情
-        name: 'metaModelListDetails',
+        path: "/main/metaModelListDetails", //元模型管理详情
+        name: "metaModelListDetails",
         meta: {
         meta: {
           showGoBack: true,
           showGoBack: true,
-          title: '元模型管理详情',
+          title: "元模型管理详情",
         },
         },
-        component: () => import('@/views/meta-model-list/details.vue'),
+        component: () => import("@/views/meta-model-list/details.vue"),
       },
       },
       {
       {
-        path: '/main/techPoliticsFabric', //技术政策结构化
-        name: 'techPoliticsFabric',
-        component: () => import('@/views/tech-politics-fabric/index.vue'),
+        path: "/main/techPoliticsFabric", //技术政策结构化
+        name: "techPoliticsFabric",
+        component: () => import("@/views/tech-politics-fabric/index.vue"),
         meta: {
         meta: {
-          title: '技术政策结构化',
+          title: "技术政策结构化",
         },
         },
       },
       },
       {
       {
-        path: '/main/techPoliticsRelativeUse', //技术政策库关联使用
-        name: 'techPoliticsRelativeUse',
-        component: () => import('@/views/tech-politics-relative-use/index.vue'),
+        path: "/main/techPoliticsRelativeUse", //技术政策库关联使用
+        name: "techPoliticsRelativeUse",
+        component: () => import("@/views/tech-politics-relative-use/index.vue"),
         meta: {
         meta: {
-          title: '技术政策库关联使用',
+          title: "技术政策库关联使用",
         },
         },
       },
       },
       {
       {
-        path: '/main/reportTemplateFabric', //报告模板结构化
-        name: 'reportTemplateFabric',
-        component: () => import('@/views/report-template-fabric/index.vue'),
+        path: "/main/reportTemplateFabric", //报告模板结构化
+        name: "reportTemplateFabric",
+        component: () => import("@/views/report-template-fabric/index.vue"),
         meta: {
         meta: {
-          title: '报告模板结构化',
+          title: "报告模板结构化",
         },
         },
       },
       },
       {
       {
-        path: '/main/typicalExampleManage', //典型案例库管理
-        name: 'typicalExampleManage',
-        component: () => import('@/views/typical-example-manage/index.vue'),
+        path: "/main/typicalExampleManage", //典型案例库管理
+        name: "typicalExampleManage",
+        component: () => import("@/views/typical-example-manage/index.vue"),
         meta: {
         meta: {
-          title: '典型案例库管理',
+          title: "典型案例库管理",
         },
         },
       },
       },
       {
       {
-        path: '/main/typicalExampleRelativeUse', //典型案例库关联使用
-        name: 'typicalExampleRelativeUse',
+        path: "/main/typicalExampleRelativeUse", //典型案例库关联使用
+        name: "typicalExampleRelativeUse",
         component: () =>
         component: () =>
-          import('@/views/typical-example-relative-use/index.vue'),
+          import("@/views/typical-example-relative-use/index.vue"),
         meta: {
         meta: {
-          title: '典型案例库关联使用',
+          title: "典型案例库关联使用",
         },
         },
       },
       },
       {
       {
-        path: '/main/totalArchiPropertyDocument', //总体架构资产文档库
-        name: 'totalArchiPropertyDocument',
+        path: "/main/totalArchiPropertyDocument", //总体架构资产文档库
+        name: "totalArchiPropertyDocument",
         component: () =>
         component: () =>
-          import('@/views/total-archi-property-document/index.vue'),
+          import("@/views/total-archi-property-document/index.vue"),
         meta: {
         meta: {
-          title: '总体架构资产文档库',
+          title: "总体架构资产文档库",
         },
         },
       },
       },
       // {
       // {
@@ -173,401 +173,401 @@ export const routes = [
       // 	component: () => import('@/views/YuanMoXingGuanLi/YuanMoXingGuanLiTable/index.vue'),
       // 	component: () => import('@/views/YuanMoXingGuanLi/YuanMoXingGuanLiTable/index.vue'),
       // },
       // },
       {
       {
-        path: '/main/etp-Manage', //专家人才库
-        name: 'etp-Manage',
-        component: () => import('@/views/etpManage/index.vue'),
+        path: "/main/etp-Manage", //专家人才库
+        name: "etp-Manage",
+        component: () => import("@/views/etpManage/index.vue"),
         meta: {
         meta: {
-          title: '专家人才库',
+          title: "专家人才库",
         },
         },
       },
       },
       {
       {
-        path: '/main/reportTemplateRelativeUse', //报告模板关联使用
-        name: 'reportTemplateRelativeUse',
+        path: "/main/reportTemplateRelativeUse", //报告模板关联使用
+        name: "reportTemplateRelativeUse",
         component: () =>
         component: () =>
-          import('@/views/report-template-relative-use/index.vue'),
+          import("@/views/report-template-relative-use/index.vue"),
         meta: {
         meta: {
-          title: '报告模板关联使用',
+          title: "报告模板关联使用",
         },
         },
       },
       },
       {
       {
-        path: '/main/archiViewManage', //架构视图管理
-        name: 'archiViewManage',
-        component: () => import('@/views/archi-view-manage/index.vue'),
+        path: "/main/archiViewManage", //架构视图管理
+        name: "archiViewManage",
+        component: () => import("@/views/archi-view-manage/index.vue"),
         meta: {
         meta: {
-          title: '架构视图管理',
-          keepAlive: true
+          title: "架构视图管理",
+          keepAlive: true,
         },
         },
       },
       },
       {
       {
-        path: '/main/archiViewManageDetails', //架构视图管理详情
-        name: 'archiViewManageDetails',
+        path: "/main/archiViewManageDetails", //架构视图管理详情
+        name: "archiViewManageDetails",
         meta: {
         meta: {
           showGoBack: true,
           showGoBack: true,
-          title: '架构视图管理详情',
+          title: "架构视图管理详情",
         },
         },
-        component: () => import('@/views/archi-view-manage/details.vue'),
+        component: () => import("@/views/archi-view-manage/details.vue"),
       },
       },
       {
       {
-        path: '/main/archiAssetManage/', //总体架构资产管理
-        name: 'archiAssetManage',
-        component: () => import('@/views/archi-asset-manage/index.vue'),
+        path: "/main/archiAssetManage/", //总体架构资产管理
+        name: "archiAssetManage",
+        component: () => import("@/views/archi-asset-manage/index.vue"),
         meta: {
         meta: {
-          title: '系统架构资产管理',
+          title: "系统架构资产管理",
         },
         },
       },
       },
       {
       {
-        path: '/main/comCenterServeList/', //企业中台服务清单
-        name: 'comCenterServeList',
-        component: () => import('@/views/comCenterServeList/index.vue'),
+        path: "/main/comCenterServeList/", //企业中台服务清单
+        name: "comCenterServeList",
+        component: () => import("@/views/comCenterServeListNew/index.vue"),
         meta: {
         meta: {
-          title: '企业中台服务清单',
+          title: "企业中台服务清单",
         },
         },
       },
       },
       {
       {
-        path: '/main/currentAssetsList', //现状架构资产管理
-        name: 'currentAssetsList',
+        path: "/main/currentAssetsList", //现状架构资产管理
+        name: "currentAssetsList",
         // component: () => import('@/views/current-assets-list/index.vue'),
         // component: () => import('@/views/current-assets-list/index.vue'),
-        component: () => import('@/views/busi-assets-list/index.vue'),
+        component: () => import("@/views/busi-assets-list/index.vue"),
         meta: {
         meta: {
-          title: '现状架构资产管理',
+          title: "现状架构资产管理",
         },
         },
       },
       },
       {
       {
-        path: '/main/logManage', //日志管理
-        name: 'logManage',
-        component: () => import('@/views/log-manage/index.vue'),
+        path: "/main/logManage", //日志管理
+        name: "logManage",
+        component: () => import("@/views/log-manage/index.vue"),
         meta: {
         meta: {
-          title: '日志管理',
+          title: "日志管理",
         },
         },
       },
       },
       {
       {
-        path: '/main/archiEvoluteLine', //架构演进路线资产管理
-        name: 'archiEvoluteLine',
-        component: () => import('@/views/archi-evolute-line/index.vue'),
+        path: "/main/archiEvoluteLine", //架构演进路线资产管理
+        name: "archiEvoluteLine",
+        component: () => import("@/views/archi-evolute-line/index.vue"),
         meta: {
         meta: {
-          title: '架构演进路线资产管理',
+          title: "架构演进路线资产管理",
         },
         },
       },
       },
       {
       {
-        path: '/main/archiIntelligenceSearch', //总体架构资产智能搜索
-        name: 'archiIntelligenceSearch',
-        component: () => import('@/views/archi-intelligence-search/index.vue'),
+        path: "/main/archiIntelligenceSearch", //总体架构资产智能搜索
+        name: "archiIntelligenceSearch",
+        component: () => import("@/views/archi-intelligence-search/index.vue"),
         meta: {
         meta: {
-          title: '总体架构资产智能搜索',
+          title: "总体架构资产智能搜索",
         },
         },
       },
       },
       {
       {
-        path: '/main/archiAssetVisualShow', //总体架构资产可视化展示
-        name: 'archiAssetVisualShow',
-        component: () => import('@/views/archiAssetVisualShow/index.vue'),
+        path: "/main/archiAssetVisualShow", //总体架构资产可视化展示
+        name: "archiAssetVisualShow",
+        component: () => import("@/views/archiAssetVisualShow/index.vue"),
         meta: {
         meta: {
-          title: '总体架构资产可视化展示',
+          title: "总体架构资产可视化展示",
         },
         },
       },
       },
       {
       {
-        path: '/main/systemInfoManage', //系统信息管理
-        name: 'systemInfoManage',
-        component: () => import('@/views/systemInfoManage/index.vue'),
+        path: "/main/systemInfoManage", //系统信息管理
+        name: "systemInfoManage",
+        component: () => import("@/views/systemInfoManage/index.vue"),
         meta: {
         meta: {
-          title: '系统信息管理',
+          title: "系统信息管理",
         },
         },
       },
       },
       {
       {
-        path: '/main/projectInfoManage', //项目信息管理
-        name: 'projectInfoManage',
-        component: () => import('@/views/projectInfoManage/index.vue'),
+        path: "/main/projectInfoManage", //项目信息管理
+        name: "projectInfoManage",
+        component: () => import("@/views/projectInfoManage/index.vue"),
         meta: {
         meta: {
-          title: '项目信息管理',
+          title: "项目信息管理",
         },
         },
       },
       },
       {
       {
-        path: '/main/systemArchiViewDesign', //系统架构视图设计
-        name: 'systemArchiViewDesign',
-        component: () => import('@/views/systemArchiViewDesign/index.vue'),
+        path: "/main/systemArchiViewDesign", //系统架构视图设计
+        name: "systemArchiViewDesign",
+        component: () => import("@/views/systemArchiViewDesign/index.vue"),
         meta: {
         meta: {
-          title: '系统架构视图设计',
+          title: "系统架构视图设计",
         },
         },
       },
       },
       {
       {
-        path: '/main/systemArchiViewDesignDetails', //系统架构视图设计详情
-        name: 'systemArchiViewDesignDetails',
+        path: "/main/systemArchiViewDesignDetails", //系统架构视图设计详情
+        name: "systemArchiViewDesignDetails",
         meta: {
         meta: {
           showGoBack: true,
           showGoBack: true,
-          title: '系统架构视图设计详情',
+          title: "系统架构视图设计详情",
         },
         },
-        component: () => import('@/views/systemArchiViewDesign/details.vue'),
+        component: () => import("@/views/systemArchiViewDesign/details.vue"),
       },
       },
       {
       {
-        path: '/main/documentEdit', //文档编辑
-        name: 'documentEdit',
+        path: "/main/documentEdit", //文档编辑
+        name: "documentEdit",
         meta: {
         meta: {
           showGoBack: true,
           showGoBack: true,
-          title: '文档编辑',
+          title: "文档编辑",
         },
         },
-        component: () => import('@/views/documentEdit/index.vue'),
+        component: () => import("@/views/documentEdit/index.vue"),
       },
       },
       {
       {
-        path: '/main/summaryArchiDesign', //概设阶段视图设计
-        name: 'summaryArchiDesign',
-        component: () => import('@/views/summaryArchiDesign/index.vue'),
+        path: "/main/summaryArchiDesign", //概设阶段视图设计
+        name: "summaryArchiDesign",
+        component: () => import("@/views/summaryArchiDesign/index.vue"),
         meta: {
         meta: {
-          title: '概设阶段视图设计',
+          title: "概设阶段视图设计",
         },
         },
       },
       },
       {
       {
-        path: '/main/summaryArchiDesignDetails', //概设阶段视图设计详情
-        name: 'summaryArchiDesignDetails',
+        path: "/main/summaryArchiDesignDetails", //概设阶段视图设计详情
+        name: "summaryArchiDesignDetails",
         meta: {
         meta: {
           showGoBack: true,
           showGoBack: true,
-          title: '概设阶段视图设计详情',
+          title: "概设阶段视图设计详情",
         },
         },
-        component: () => import('@/views/summaryArchiDesign/details.vue'),
+        component: () => import("@/views/summaryArchiDesign/details.vue"),
       },
       },
       {
       {
-        path: '/main/otherArchiDesign', //其他视图设计
-        name: 'otherArchiDesign',
-        component: () => import('@/views/otherArchiDesign/index.vue'),
+        path: "/main/otherArchiDesign", //其他视图设计
+        name: "otherArchiDesign",
+        component: () => import("@/views/otherArchiDesign/index.vue"),
         meta: {
         meta: {
-          title: '其他视图设计',
+          title: "其他视图设计",
         },
         },
       },
       },
       {
       {
-        path: '/main/otherArchiDesignDetails', //其他视图设计详情
-        name: 'otherArchiDesignDetails',
+        path: "/main/otherArchiDesignDetails", //其他视图设计详情
+        name: "otherArchiDesignDetails",
         meta: {
         meta: {
           showGoBack: true,
           showGoBack: true,
-          title: '其他视图设计详情',
+          title: "其他视图设计详情",
         },
         },
-        component: () => import('@/views/otherArchiDesign/details.vue'),
+        component: () => import("@/views/otherArchiDesign/details.vue"),
       },
       },
       {
       {
-        path: '/main/reviewSituation', //评审情况(概要设计)
-        name: 'reviewSituation',
-        component: () => import('@/views/reviewSituation/index.vue'),
+        path: "/main/reviewSituation", //评审情况(概要设计)
+        name: "reviewSituation",
+        component: () => import("@/views/reviewSituation/index.vue"),
         meta: {
         meta: {
-          title: '评审情况(概要设计)',
+          title: "评审情况(概要设计)",
         },
         },
       },
       },
       {
       {
-        path: '/main/reviewSituationDetails', //评审情况(概要设计)，详情
-        name: 'reviewSituationDetails',
+        path: "/main/reviewSituationDetails", //评审情况(概要设计)，详情
+        name: "reviewSituationDetails",
         meta: {
         meta: {
           showGoBack: true,
           showGoBack: true,
-          title: '评审情况(概要设计)详情',
+          title: "评审情况(概要设计)详情",
         },
         },
-        component: () => import('@/views/reviewSituation/details.vue'),
+        component: () => import("@/views/reviewSituation/details.vue"),
       },
       },
       {
       {
-        path: '/main/reviewArchiFollowCheck', //概设架构遵从审查
-        name: 'reviewArchiFollowCheck',
-        component: () => import('@/views/reviewArchiFollowCheck/index.vue'),
+        path: "/main/reviewArchiFollowCheck", //概设架构遵从审查
+        name: "reviewArchiFollowCheck",
+        component: () => import("@/views/reviewArchiFollowCheck/index.vue"),
         meta: {
         meta: {
-          title: '概设架构遵从审查',
+          title: "概设架构遵从审查",
         },
         },
       },
       },
       {
       {
-        path: '/main/reviewArchiFollowCheckDetails', //概设架构遵从审查，详情
-        name: 'reviewArchiFollowCheckDetails',
+        path: "/main/reviewArchiFollowCheckDetails", //概设架构遵从审查，详情
+        name: "reviewArchiFollowCheckDetails",
         meta: {
         meta: {
           showGoBack: true,
           showGoBack: true,
-          title: '概设架构遵从审查详情',
+          title: "概设架构遵从审查详情",
         },
         },
-        component: () => import('@/views/reviewArchiFollowCheck/details.vue'),
+        component: () => import("@/views/reviewArchiFollowCheck/details.vue"),
       },
       },
       {
       {
-        path: '/main/reviewArchiPoliticeCheck', //概设架构政策审查
-        name: 'reviewArchiPoliticeCheck',
-        component: () => import('@/views/reviewArchiPoliticeCheck/index.vue'),
+        path: "/main/reviewArchiPoliticeCheck", //概设架构政策审查
+        name: "reviewArchiPoliticeCheck",
+        component: () => import("@/views/reviewArchiPoliticeCheck/index.vue"),
         meta: {
         meta: {
-          title: '概设架构政策审查',
+          title: "概设架构政策审查",
         },
         },
       },
       },
       {
       {
-        path: '/main/reviewArchiPoliticeCheckDetails', //概设架构政策审查，详情
-        name: 'reviewArchiPoliticeCheckDetails',
+        path: "/main/reviewArchiPoliticeCheckDetails", //概设架构政策审查，详情
+        name: "reviewArchiPoliticeCheckDetails",
         meta: {
         meta: {
           showGoBack: true,
           showGoBack: true,
-          title: '概设架构政策审查详情',
+          title: "概设架构政策审查详情",
         },
         },
-        component: () => import('@/views/reviewArchiPoliticeCheck/details.vue'),
+        component: () => import("@/views/reviewArchiPoliticeCheck/details.vue"),
       },
       },
       {
       {
-        path: '/main/batchPlanManagement', //批次计划管理
-        name: 'batchPlanManagement',
-        component: () => import('@/views/batchPlanManagement/index.vue'),
+        path: "/main/batchPlanManagement", //批次计划管理
+        name: "batchPlanManagement",
+        component: () => import("@/views/batchPlanManagement/index.vue"),
         meta: {
         meta: {
-          title: '批次计划管理',
-          keepAlive: true
+          title: "批次计划管理",
+          keepAlive: true,
         },
         },
       },
       },
       {
       {
-        path: '/main/conceptualReview', // 概设材料审查列表
-        name: 'conceptualReview',
-        component: () => import('@/views/conceptualReview/index.vue'),
+        path: "/main/conceptualReview", // 概设材料审查列表
+        name: "conceptualReview",
+        component: () => import("@/views/conceptualReview/index.vue"),
         meta: {
         meta: {
-          title: '概设材料审查',
+          title: "概设材料审查",
         },
         },
       },
       },
       {
       {
-        path: '/main/conceptualExamine', // 概设材料审查页面
-        name: 'conceptualExamine',
+        path: "/main/conceptualExamine", // 概设材料审查页面
+        name: "conceptualExamine",
         meta: {
         meta: {
           showGoBack: true,
           showGoBack: true,
-          title: '概设材料审查详情',
+          title: "概设材料审查详情",
         },
         },
-        component: () => import('@/views/conceptualReview/Examine.vue'),
+        component: () => import("@/views/conceptualReview/Examine.vue"),
       },
       },
       {
       {
-        path: '/main/demandManagement', // 需求管理列表页
-        name: 'demandManagement',
-        component: () => import('@/views/demandManagement/index.vue'),
+        path: "/main/demandManagement", // 需求管理列表页
+        name: "demandManagement",
+        component: () => import("@/views/demandManagement/index.vue"),
         meta: {
         meta: {
-          title: '需求管理',
-          keepAlive: true
+          title: "需求管理",
+          keepAlive: true,
         },
         },
       },
       },
       {
       {
-        path: '/main/conceptualViewOrg', // 概设材料意见编制
-        name: 'conceptualViewOrg',
-        component: () => import('@/views/conceptualViewOrg/index.vue'),
+        path: "/main/conceptualViewOrg", // 概设材料意见编制
+        name: "conceptualViewOrg",
+        component: () => import("@/views/conceptualViewOrg/index.vue"),
         meta: {
         meta: {
-          title: '概设材料意见编制',
+          title: "概设材料意见编制",
         },
         },
       },
       },
       {
       {
-        path: '/main/conceptualBaseManagement', // 概设评审基础管理
-        name: 'conceptualBaseManagement',
-        component: () => import('@/views/conceptualBaseManagement/index.vue'),
+        path: "/main/conceptualBaseManagement", // 概设评审基础管理
+        name: "conceptualBaseManagement",
+        component: () => import("@/views/conceptualBaseManagement/index.vue"),
         meta: {
         meta: {
-          title: '概设评审基础管理',
+          title: "概设评审基础管理",
         },
         },
       },
       },
       {
       {
-        path: '/main/onlineReview', // 评审意见编制- 在线辅助审核
-        name: 'onlineReview',
+        path: "/main/onlineReview", // 评审意见编制- 在线辅助审核
+        name: "onlineReview",
         meta: {
         meta: {
           showGoBack: true,
           showGoBack: true,
-          title: '在线辅助审核',
+          title: "在线辅助审核",
         },
         },
-        component: () => import('@/views/conceptualViewOrg/OnlineReview.vue'),
+        component: () => import("@/views/conceptualViewOrg/OnlineReview.vue"),
       },
       },
       {
       {
-        path: '/main/conceptualRelated', // 概设关联业务管理
-        name: 'conceptualRelated',
-        component: () => import('@/views/conceptualRelated/index.vue'),
+        path: "/main/conceptualRelated", // 概设关联业务管理
+        name: "conceptualRelated",
+        component: () => import("@/views/conceptualRelated/index.vue"),
         meta: {
         meta: {
-          title: '概设关联业务管理',
+          title: "概设关联业务管理",
         },
         },
       },
       },
       {
       {
-        path: '/main/supervisionNotifyManagement', // 架构督查督查通报管理
-        name: 'supervisionNotifyManagement',
+        path: "/main/supervisionNotifyManagement", // 架构督查督查通报管理
+        name: "supervisionNotifyManagement",
         component: () =>
         component: () =>
-          import('@/views/supervisionNotifyManagement/index.vue'),
+          import("@/views/supervisionNotifyManagement/index.vue"),
         meta: {
         meta: {
-          title: '督查通报管理',
+          title: "督查通报管理",
         },
         },
       },
       },
       {
       {
-        path: '/main/supervisionProblemEdit', // 架构督查督查问题整改
-        name: 'supervisionProblemEdit',
-        component: () => import('@/views/supervisionProblemEdit/index.vue'),
+        path: "/main/supervisionProblemEdit", // 架构督查督查问题整改
+        name: "supervisionProblemEdit",
+        component: () => import("@/views/supervisionProblemEdit/index.vue"),
         meta: {
         meta: {
-          title: '督查问题整改',
+          title: "督查问题整改",
         },
         },
       },
       },
       {
       {
-        path: '/main/architectureFollowExamine', // 架构督查架构遵从检查
-        name: 'architectureFollowExamine',
-        component: () => import('@/views/architectureFollowExamine/index.vue'),
+        path: "/main/architectureFollowExamine", // 架构督查架构遵从检查
+        name: "architectureFollowExamine",
+        component: () => import("@/views/architectureFollowExamine/index.vue"),
         meta: {
         meta: {
-          title: '架构遵从检查',
+          title: "架构遵从检查",
         },
         },
       },
       },
       {
       {
-        path: '/main/architectureFollowExamineDetails', // 架构督查 - 架构遵从检查-详情
-        name: 'architectureFollowExamineDetails',
+        path: "/main/architectureFollowExamineDetails", // 架构督查 - 架构遵从检查-详情
+        name: "architectureFollowExamineDetails",
         meta: {
         meta: {
           showGoBack: true,
           showGoBack: true,
-          title: '架构遵从检查详情',
+          title: "架构遵从检查详情",
         },
         },
         component: () =>
         component: () =>
-          import('@/views/architectureFollowExamine/details.vue'),
+          import("@/views/architectureFollowExamine/details.vue"),
       },
       },
       {
       {
-        path: '/main/artPolicyExamine', // 架构督查-技术政策审查
-        name: 'artPolicyExamine',
-        component: () => import('@/views/artPolicyExamine/index.vue'),
+        path: "/main/artPolicyExamine", // 架构督查-技术政策审查
+        name: "artPolicyExamine",
+        component: () => import("@/views/artPolicyExamine/index.vue"),
         meta: {
         meta: {
-          title: '技术政策审查',
+          title: "技术政策审查",
         },
         },
       },
       },
 
 
       {
       {
-        path: '/main/collectDataConfiguration', // 架构督查 - 收集资料配置
-        name: 'collectDataConfiguration',
-        component: () => import('@/views/collectDataConfiguration/index.vue'),
+        path: "/main/collectDataConfiguration", // 架构督查 - 收集资料配置
+        name: "collectDataConfiguration",
+        component: () => import("@/views/collectDataConfiguration/index.vue"),
         meta: {
         meta: {
-          title: '收集资料配置',
+          title: "收集资料配置",
         },
         },
       },
       },
       {
       {
-        path: '/main/supervisionDataCollection', // 架构督查 - 督查资料收集
-        name: 'supervisionDataCollection',
-        component: () => import('@/views/supervisionDataCollection/index.vue'),
+        path: "/main/supervisionDataCollection", // 架构督查 - 督查资料收集
+        name: "supervisionDataCollection",
+        component: () => import("@/views/supervisionDataCollection/index.vue"),
         meta: {
         meta: {
-          title: '督查资料收集',
+          title: "督查资料收集",
         },
         },
       },
       },
       {
       {
-        path: '/main/architectureInspectionAnalysis', // 架构督查 - 架构督查分析
-        name: 'architectureInspectionAnalysis',
+        path: "/main/architectureInspectionAnalysis", // 架构督查 - 架构督查分析
+        name: "architectureInspectionAnalysis",
         component: () =>
         component: () =>
-          import('@/views/architectureInspectionAnalysis/index.vue'),
+          import("@/views/architectureInspectionAnalysis/index.vue"),
         meta: {
         meta: {
-          title: '架构督查分析',
+          title: "架构督查分析",
         },
         },
       },
       },
       {
       {
-        path: '/main/examine', // 架构督查 - 架构督查分析
-        name: 'examine',
-        component: () => import('@/views/artPolicyExamine/Examine.vue'),
+        path: "/main/examine", // 架构督查 - 架构督查分析
+        name: "examine",
+        component: () => import("@/views/artPolicyExamine/Examine.vue"),
         meta: {
         meta: {
-          title: '架构督查分析',
+          title: "架构督查分析",
         },
         },
       },
       },
       {
       {
-        path: '/main/dictionaryManagement', // 系统管理 - 字典管理
-        name: 'dictionaryManagement',
-        component: () => import('@/views/dictionaryManagement/index.vue'),
+        path: "/main/dictionaryManagement", // 系统管理 - 字典管理
+        name: "dictionaryManagement",
+        component: () => import("@/views/dictionaryManagement/index.vue"),
         meta: {
         meta: {
-          title: '字典管理',
+          title: "字典管理",
         },
         },
       },
       },
       {
       {
-        path: '/main/organizationManagement', // 系统管理 - 组织机构管理
-        name: 'organizationManagement',
-        component: () => import('@/views/organizationManagement/index.vue'),
+        path: "/main/organizationManagement", // 系统管理 - 组织机构管理
+        name: "organizationManagement",
+        component: () => import("@/views/organizationManagement/index.vue"),
         meta: {
         meta: {
-          title: '组织机构管理',
-          keepAlive: true
+          title: "组织机构管理",
+          keepAlive: true,
         },
         },
       },
       },
       {
       {
-        path: '/main/dataMapping', // 数据成图
-        name: 'dataMapping',
-        component: () => import('@/views/dataMapping/index.vue'),
+        path: "/main/dataMapping", // 数据成图
+        name: "dataMapping",
+        component: () => import("@/views/dataMapping/index.vue"),
         meta: {
         meta: {
-          title: '数据成图',
-          keepAlive: true
+          title: "数据成图",
+          keepAlive: true,
         },
         },
       },
       },
     ],
     ],
   },
   },
-]
+];
 
 
 const router = new VueRouter({
 const router = new VueRouter({
   routes,
   routes,
-})
+});
 
 
-export default router
+export default router;

src/styles/common.scss

@@ -125,3 +125,20 @@ $color-primary: #0d867f;
   overflow: hidden;
   overflow: hidden;
   text-overflow: ellipsis;
   text-overflow: ellipsis;
 }
 }
+
+
+.comDialog {
+  .el-dialog__header {
+    background-color: #0d867f;
+    text-align: left;
+  }
+
+  .el-dialog__title {
+    color: #fff;
+  }
+
+  .el-dialog__close {
+    color: #fff;
+  }
+
+}
\ No newline at end of file

src/views/comCenterServeListNew/components/businessMsg.vue

+<template>
+  <div class="businessMsgWrapper">
+    <ETable ref="ETableRef" title="业务信息列表" :tableRef.sync="tableRef" :height="430" tableKey="businessMsg" :data="data"
+      :columns="columns" :indexMethod="true" v-loading="loading" :operateList="operateList" :tableBtnList="tableBtnList"
+      @sizeChange="handlerSizeChange" @currentChange="handlerCurrentChange" :pager="pager">
+      <SearchForm slot="header" :formOptions="formOptions" @onSearch="getList" @onReset="reset"></SearchForm>
+    </ETable>
+  </div>
+</template>
+<script>
+import SearchForm from "@/components/SearchForm.vue";
+import ETable from "@/newComponents/ETable/index.vue";
+import tableMixin from "@/mixins/tableMixin";
+
+export default {
+  name: "businessMsg",
+  components: { SearchForm, ETable },
+  mixins: [tableMixin()],
+  data() {
+    return {
+      loading: false,
+      tableRef: null,
+      form: {
+        name: '',
+        date: '',
+        typeName: '',
+        type: ''
+      },
+      selectionList: [],
+      formOptions: [
+        {
+          label: "中台服务名称",
+          prop: "name",
+          element: "el-input",
+          placeholder: "服务名称",
+        },
+        {
+          label: "统计日期",
+          prop: "buildType",
+          element: "el-date-picker",
+          type: 'date',
+          valueFormat: 'yyyy-MM-dd',
+          element: 'el-date-picker',
+          initValue: new Date().format('yyyy-MM-dd'),
+          placeholder: '统计日期',
+        },
+        {
+          label: "业务活动名称",
+          prop: "buildType",
+          element: "el-select",
+          dictType: "build_type",
+          placeholder: "业务活动名称",
+        },
+      ],
+      operateList: [
+        {
+          label: "新增",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-plus",
+          disabled: true,
+          click: () => {
+            console.log("add");
+          },
+        },
+        {
+          label: "下载模板",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-download",
+          disabled: false,
+          click: () => {
+            console.log("测试");
+          },
+        },
+        {
+          label: "导入",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-upload",
+          disabled: false,
+          click: () => {
+            console.log("测试");
+          },
+        },
+      ],
+      pager: {
+        current: 2,
+        size: 10,
+        total: 100,
+        sizes: [10, 20, 50, 100],
+      },
+      columns: [
+        {
+          label: "中台服务编码",
+          prop: "buildType",
+          showOverflowTooltip: true,
+          align: "center",
+          fixed: "left",
+          minWidth: 140
+        },
+        {
+          label: "中台服务名称",
+          prop: "buildType2",
+          minWidth: 140,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "业务活动名称",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "业务活动编码",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "业务流程名称",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "业务职能",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "业务域",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "关联的业务对象数量",
+          T: 'a',
+          prop: "buildType2",
+          minWidth: 120,
+          align: "center",
+          style: { color: '#0b8680', cursor: 'pointer' },
+          click: (row) => {
+            this.$emit('dialog', '关联的业务对象数量', row)
+          },
+        },
+        {
+          label: "关联的应用服务数量",
+          T: 'a',
+          prop: "buildType2",
+          minWidth: 120,
+          align: "center",
+          style: { color: '#0b8680', cursor: 'pointer' },
+          click: (row) => {
+            this.$emit('dialog', '关联的应用服务数量', row)
+          },
+        },
+      ],
+      tableBtnList: [
+        {
+          label: "编辑",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-circle-plus-outline",
+          click: (row, index) => {
+            console.log("编辑", row);
+          },
+        },
+      ],
+      data: [{ buildType2: 11 }],
+    };
+  },
+  mounted() { },
+  methods: {
+    doLayout() {
+      this.tableRef.doLayout()
+    },
+    getList() {
+      console.log("getList");
+    },
+    reset() { },
+    handleSelectionChange(val) {
+      this.selectionList = val;
+    },
+    showClick(val) {
+      console.log("showClick", val);
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.businessMsgWrapper {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/views/comCenterServeListNew/components/comDialog.vue

+<template>
+  <el-dialog :title="tableConfig.subTitle + ' - ' + tableConfig.title" custom-class="comDialog" :visible.sync="show"
+    :center="false" :close-on-click-modal="false" width="80%" @close="close">
+    <div class="comDialogTable">
+      <ETable ref="ETableRef" :height="430" :data="data" :columns="tableConfig.columns" :indexMethod="true"
+        v-loading="loading" @sizeChange="handlerSizeChange" @currentChange="handlerCurrentChange" :pager="pager">
+      </ETable>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import ETable from "@/newComponents/ETable/index.vue";
+import tableMixin from "@/mixins/tableMixin";
+export default {
+  components: {
+    ETable
+  },
+  mixins: [tableMixin()],
+  data() {
+    return {
+      loading: false,
+      show: false,
+      pager: {
+        current: 1,
+        size: 10,
+        total: 100,
+        sizes: [10, 20, 50, 100],
+      },
+      defaultTableColumns: [
+        // 中台清单
+        {
+          title: '服务调用频率',
+          subTitle: '检修计划编制服务',
+          columns: [
+            {
+              label: "中台服务编码",
+              prop: "buildType",
+              showOverflowTooltip: true,
+              align: "center",
+              fixed: "left",
+              minWidth: 140
+            },
+            {
+              label: "主调服务编码",
+              prop: "buildType2",
+              minWidth: 140,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "主调服务名称",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "服务类型",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "模块",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "响应时长（S）",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "系统应用",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "调用时间",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "服务状态",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "操作",
+              prop: "action",
+              minWidth: 120,
+              align: "center",
+              tableBtnList: [
+                {
+                  label: "链路跟踪",
+                  type: "primary",
+                  size: "mini",
+                  icon: "el-icon-circle-plus-outline",
+                  click: (row, index) => {
+                    console.log("链路跟踪", row);
+                  },
+                },
+              ]
+            },
+          ],
+          getList() {
+
+          },
+        },
+        {
+          title: '服务调用方数量',
+          subTitle: '检修计划编制服务',
+          columns: [
+            {
+              label: "中台服务编码",
+              prop: "buildType",
+              showOverflowTooltip: true,
+              align: "center",
+              fixed: "left",
+              minWidth: 140
+            },
+            {
+              label: "中台服务名称",
+              prop: "buildType2",
+              minWidth: 140,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "系统应用",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+          ],
+          tableBtnList: [],
+          getList() {
+
+          },
+        },
+        {
+          title: '操作实体数量',
+          subTitle: '检修计划编制服务',
+          columns: [
+            {
+              label: "中台服务编码",
+              prop: "buildType",
+              showOverflowTooltip: true,
+              align: "center",
+              fixed: "left",
+              minWidth: 140
+            },
+            {
+              label: "物理实体名称",
+              prop: "buildType2",
+              minWidth: 140,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "物理实体编码",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "物理实体记录数量",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "响应时间（S）",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "物理实体当前大小",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "逻辑实体",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "概念实体",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "实体发布时间",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+          ],
+          getList() {
+
+          },
+        },
+        {
+          title: '支撑技术组件数量',
+          subTitle: '查询检修计划',
+          columns: [
+            {
+              label: "中台服务编码",
+              prop: "buildType",
+              showOverflowTooltip: true,
+              align: "center",
+              fixed: "left",
+              minWidth: 140
+            },
+            {
+              label: "中台服务名称",
+              prop: "buildType2",
+              minWidth: 140,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "基础组件名称",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "基础组件编码",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "技术平台",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+          ],
+          getList() {
+
+          },
+        },
+        // 业务信息
+        {
+          title: '关联的业务对象数量',
+          subTitle: '查询检修计划',
+          columns: [
+            {
+              label: "中台服务编码",
+              prop: "buildType",
+              showOverflowTooltip: true,
+              align: "center",
+              fixed: "left",
+              minWidth: 140
+            },
+            {
+              label: "中台服务名称",
+              prop: "buildType2",
+              minWidth: 140,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "业务对象名称",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "业务对象编码",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "业务流程名称",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "业务职能",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "业务域",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+          ],
+          getList() {
+
+          },
+        },
+        {
+          title: '关联的应用服务数量',
+          subTitle: '查询检修计划',
+          columns: [
+            {
+              label: "中台服务编码",
+              prop: "buildType",
+              showOverflowTooltip: true,
+              align: "center",
+              fixed: "left",
+              minWidth: 140
+            },
+            {
+              label: "中台服务名称",
+              prop: "buildType2",
+              minWidth: 140,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "应用服务名称",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "应用服务编码",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "功能模块",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "系统应用",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+          ],
+          getList() {
+
+          },
+        },
+        //应用服务信息
+        // 关联的业务对象数量 同业务信息1
+        {
+          title: '关联的业务活动数量',
+          subTitle: '查询检修计划',
+          columns: [
+            {
+              label: "中台服务编码",
+              prop: "buildType",
+              showOverflowTooltip: true,
+              align: "center",
+              fixed: "left",
+              minWidth: 140
+            },
+            {
+              label: "中台服务名称",
+              prop: "buildType2",
+              minWidth: 140,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "业务活动名称",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "业务活动编码",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "业务职能",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "业务流程名称",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+          ],
+          getList() {
+
+          },
+        },
+        {
+          title: '关联的物理实体数量',
+          subTitle: '查询检修计划',
+          columns: [
+            {
+              label: "中台服务编码",
+              prop: "buildType",
+              showOverflowTooltip: true,
+              align: "center",
+              fixed: "left",
+              minWidth: 140
+            },
+            {
+              label: "中台服务名称",
+              prop: "buildType2",
+              minWidth: 140,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "物理实体名称",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "物理实体英文名称",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "物理实体编码",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "逻辑实体",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "概念实体",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+          ],
+          getList() {
+
+          },
+        },
+        {
+          title: '关联的技术组件数量',
+          subTitle: '查询检修计划',
+          columns: [
+            {
+              label: "中台服务编码",
+              prop: "buildType",
+              showOverflowTooltip: true,
+              align: "center",
+              fixed: "left",
+              minWidth: 140
+            },
+            {
+              label: "中台服务名称",
+              prop: "buildType2",
+              minWidth: 140,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "基础组件名称",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "基础组件编码",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "技术平台",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+          ],
+          getList() {
+
+          },
+        },
+        // 技术组件信息
+        {
+          title: '支撑的系统数量',
+          subTitle: '检修计划编制服务',
+          columns: [
+            {
+              label: "中台服务编码",
+              prop: "buildType",
+              showOverflowTooltip: true,
+              align: "center",
+              fixed: "left",
+              minWidth: 140
+            },
+            {
+              label: "中台服务名称",
+              prop: "buildType2",
+              minWidth: 140,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "基础组件名称",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "基础组件编码",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "系统应用",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+          ],
+          getList() {
+
+          },
+        },
+        {
+          title: '支撑的数据服务数量',
+          subTitle: '检修计划编制服务',
+          columns: [
+            {
+              label: "中台服务编码",
+              prop: "buildType",
+              showOverflowTooltip: true,
+              align: "center",
+              fixed: "left",
+              minWidth: 140
+            },
+            {
+              label: "数据服务名称",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+            {
+              label: "数据服务编码",
+              prop: "buildType2",
+              minWidth: 120,
+              showOverflowTooltip: true,
+              align: "center",
+            },
+          ],
+          getList() {
+
+          },
+        },
+      ],
+      tableConfig: {},
+      data: [],
+    }
+  },
+  methods: {
+    open(params) {
+      const { title, ...others } = params
+      let arr = this.defaultTableColumns.filter(i => i.title == title)
+      if (!arr.length) {
+        throw ('参数有误,请检查...')
+      }
+      this.show = true;
+      this.tableConfig = arr[0]
+      this.tableConfig.getList()
+    },
+    close() {
+      this.show = false;
+    },
+    reset() {
+      this.tableConfig = {}
+      this.data = []
+      this.pager = {
+        current: 1,
+        size: 10,
+        total: 100,
+        sizes: [10, 20, 50, 100],
+      }
+    }
+  },
+}
+</script>
\ No newline at end of file

src/views/comCenterServeListNew/components/dataEntity.vue

+<template>
+  <div class="dataEntityWrapper">
+    <ETable ref="ETableRef" title="数据实体信息列表" :tableRef.sync="tableRef" :height="430" tableKey="dataEntity" :data="data"
+      :columns="columns" :indexMethod="true" v-loading="loading" :operateList="operateList" :tableBtnList="tableBtnList"
+      @sizeChange="handlerSizeChange" @currentChange="handlerCurrentChange" :pager="pager">
+      <SearchForm slot="header" :formOptions="formOptions" @onSearch="getList" @onReset="reset"></SearchForm>
+    </ETable>
+  </div>
+</template>
+<script>
+import SearchForm from "@/components/SearchForm.vue";
+import ETable from "@/newComponents/ETable/index.vue";
+import tableMixin from "@/mixins/tableMixin";
+
+export default {
+  name: "dataEntity",
+  components: { SearchForm, ETable },
+  mixins: [tableMixin()],
+  data() {
+    return {
+      loading: false,
+      tableRef: null,
+      form: {
+        name: '',
+        date: '',
+        typeName: '',
+        type: ''
+      },
+      selectionList: [],
+      formOptions: [
+        {
+          label: "服务名称",
+          prop: "name",
+          element: "el-input",
+          placeholder: "服务名称",
+        },
+        {
+          label: "统计日期",
+          prop: "buildType",
+          element: "el-date-picker",
+          type: 'date',
+          valueFormat: 'yyyy-MM-dd',
+          element: 'el-date-picker',
+          initValue: new Date().format('yyyy-MM-dd'),
+          placeholder: '统计日期',
+        },
+        {
+          label: "中台类型",
+          prop: "buildType",
+          element: "el-select",
+          dictType: "build_type",
+          placeholder: "中台类型",
+        },
+        {
+          label: "中台名称",
+          prop: "buildType",
+          element: "el-select",
+          dictType: "build_type",
+          placeholder: "中台名称",
+        },
+      ],
+      operateList: [
+        {
+          label: "新增",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-plus",
+          disabled: true,
+          click: () => {
+            console.log("add");
+          },
+        },
+        {
+          label: "下载模板",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-download",
+          disabled: false,
+          click: () => {
+            console.log("测试");
+          },
+        },
+        {
+          label: "导入",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-upload",
+          disabled: false,
+          click: () => {
+            console.log("测试");
+          },
+        },
+      ],
+      pager: {
+        current: 2,
+        size: 10,
+        total: 100,
+        sizes: [10, 20, 50, 100],
+      },
+      columns: [
+        {
+          label: "中台服务编码",
+          prop: "buildType",
+          showOverflowTooltip: true,
+          align: "center",
+          fixed: "left",
+          minWidth: 140
+        },
+        {
+          label: "中台服务名称",
+          prop: "buildType2",
+          minWidth: 140,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "物理实体名称",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "物理实体英文名称",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "物理实体编码",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "逻辑实体",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "概念实体",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+      ],
+      tableBtnList: [
+        {
+          label: "编辑",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-circle-plus-outline",
+          click: (row, index) => {
+            console.log("编辑", row);
+          },
+        },
+      ],
+      data: [{ buildType2: 11 }],
+    };
+  },
+  mounted() { },
+  methods: {
+    doLayout() {
+      this.tableRef.doLayout()
+    },
+    getList() {
+      console.log("getList");
+    },
+    reset() { },
+    handleSelectionChange(val) {
+      this.selectionList = val;
+    },
+    showClick(val) {
+      console.log("showClick", val);
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.dataEntityWrapper {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/views/comCenterServeListNew/components/editService.vue

+<template>
+  <el-dialog :title="title" custom-class="comDialog" :visible.sync="show" :center="false" :close-on-click-modal="false"
+    width="80%" @close="close">
+    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="中台服务名称" prop="abilityName">
+            <el-input class="w180" type="text" placeholder="中台服务名称" v-model="form.abilityName"
+              maxlength="50"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="中台服务编码" prop="abilityCode">
+            <el-input class="w180" type="text" placeholder="中台服务编码" v-model="form.abilityCode"
+              maxlength="50"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="服务类型" prop="serveType">
+            <el-select class="w180" v-model="form.serveType" placeholder="请选择">
+              <el-option v-for="item in serverTypeOptions" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="模块" prop="module">
+            <el-input class="w180" type="text" placeholder="模块" v-model="form.module" maxlength="50"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="中台类型" prop="content">
+            <el-select class="w180" v-model="value" placeholder="请选择">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="中台名称" prop="content">
+            <el-input class="w180" type="textarea" :rows="3" maxlength="200" show-word-limit placeholder="请输入内容"
+              v-model="form.content"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <span slot="footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="submit">保 存</el-button>
+      <el-button type="primary" @click="submit">发 布</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { serverTypeOptions, abilitySourceOptions, midGroundNameOptions, midGroundTypeOptions } from '../options.js'
+export default {
+  data() {
+    return {
+      serverTypeOptions,
+      abilitySourceOptions,
+      midGroundNameOptions,
+      midGroundTypeOptions,
+      show: false,
+      title: "新增",
+      form: {
+        abilityCode: undefined, //  	中台服务编码		false	
+        abilityName: undefined, //  	中台服务名称		false	
+
+      },
+      rules: {},
+    };
+  },
+  methods: {
+    close() {
+      this.show = false;
+    },
+    open(row) {
+      row ? (this.form = { ...row }) : "";
+      this.show = true;
+    },
+    submit() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.$emit("submit");
+          this.close();
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.w180 {
+  width: 180px;
+}
+</style>

src/views/comCenterServeListNew/components/serviceList.vue

+<template>
+  <div class="serviceListWrapper">
+    <ETable ref="ETableRef" title="中台服务清单列表" :tableRef.sync="tableRef" :height="500" tableKey="serviceList"
+      :selectionList="selectionList" @selection-change="handleSelectionChange" :data="data" :columns="columns"
+      :indexMethod="true" v-loading="loading" :operateList="operateList" @sizeChange="handlerSizeChange"
+      @currentChange="handlerCurrentChange" :pager="pager">
+      <el-form class="search" :model="form" slot="header">
+        <el-row>
+          <el-col :span="4">
+            <el-form-item label="中台服务名称">
+              <el-input class="w180" size="mini" type="text" placeholder="中台服务名称" v-model="form.abilityName"
+                maxlength="50"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="资源类型">
+              <el-select class="w180" size="mini" v-model="form.abilitySource" placeholder="资源类型">
+                <el-option v-for="item in abilitySourceOptions" :key="item.value" :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="中台类型">
+              <el-select class="w180" size="mini" v-model="form.midGroundType" placeholder="中台类型">
+                <el-option v-for="item in midGroundTypeOptions" :key="item.value" :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="中台名称">
+              <el-select class="w180" size="mini" v-model="form.midGroundName" placeholder="中台名称">
+                <el-option v-for="item in midGroundNameOptions" :key="item.value" :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="发布时间">
+              <el-date-picker class="w180" size="mini" v-model="form.startTime" value-format="yyyy-MM-dd" type="date"
+                placeholder="发布时间">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <div class="btn-box">
+              <el-button size="mini" type="primary" class="btn-search" icon="el-icon-search" @click="search"
+                v-preventReClick>查询</el-button>
+              <el-button size="mini" type="default" class="btn-reset" icon="el-icon-refresh"
+                @click="reset">重置</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+      <el-table-column slot="end" fixed="right" label="操作" align="center" :width="120">
+        <template slot-scope="scope">
+          <div class="btns">
+            <img src="@/assets/btn1.jpg" style="cursor: pointer" width="26" height="26"
+              @click="concatService(scope.row)" alt="">
+          </div>
+        </template>
+      </el-table-column>
+    </ETable>
+
+    <!-- 关联 -->
+    <el-dialog :title="title" custom-class="comDialog" :visible.sync="show" :center="false"
+      :close-on-click-modal="false" width="80%" @close="close">
+      <el-row class="comDialogContent">
+        <el-col :span="12">
+          <el-tree :data="treeData" show-checkbox node-key="id" default-expand-all :props="treeProps"
+            @check-change="checkChange">
+          </el-tree>
+        </el-col>
+        <el-col :span="12">
+          <ETable title="选中列表" :max-height="630" :height="400" tableKey="serviceListDialog" :data="dialogData"
+            :columns="dialogColumns" :indexMethod="true">
+          </ETable>
+        </el-col>
+      </el-row>
+      <span slot="footer">
+        <el-button @click="show = false">取 消</el-button>
+        <el-button type="primary" @click="show = false">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- edit -->
+    <!-- <EditService ref="EditServiceRef" @submit="getList" /> -->
+  </div>
+</template>
+<script>
+import { serverTypeOptions, abilitySourceOptions, midGroundNameOptions, midGroundTypeOptions } from '../options.js'
+import { getServiceList } from '@/api/comCenterServeListNew'
+import EditService from './editService.vue'
+import ETable from "@/newComponents/ETable/index.vue";
+import tableMixin from "@/mixins/tableMixin";
+
+export default {
+  name: "serviceList",
+  components: { ETable, EditService },
+  mixins: [tableMixin()],
+  data() {
+    return {
+      abilitySourceOptions, midGroundNameOptions, midGroundTypeOptions,
+      title: '',
+      show: false,
+      dialogRow: {},
+      dialogData: [],
+      dialogSelectData: [],
+      loading: false,
+      tableRef: null,
+      form: {
+        abilityName: '',//	中台服务名称		false
+        abilitySource: '',//	资源类型 1 中台服务清单 2 业务信息 3 应用服务信息 4 数据实体信息 5 技术组件信息		false	
+        midGroundName: '',//	中台名称		false	
+        midGroundType: '',//	中台类型		false	
+        statTime: '',//	统计时间		false	
+      },
+      selectionList: [],
+      operateList: [
+        {
+          label: "新增",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-plus",
+          disabled: false,
+          click: () => {
+            this.$refs.EditServiceRef.open()
+            console.log("add");
+          },
+        },
+        {
+          label: "发布",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-upload2",
+          disabled: false,
+          click: () => {
+            console.log("测试");
+          },
+        },
+        {
+          label: "取消发布",
+          type: "primary",
+          size: "mini",
+          style: { 'background': '#ff5722', 'border-color': '#ff5722' },
+          icon: "el-icon-sold-out",
+          disabled: false,
+          click: () => {
+            console.log("测试");
+          },
+        },
+        {
+          label: "下载模板",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-download",
+          disabled: false,
+          click: () => {
+            console.log("测试");
+          },
+        },
+
+        {
+          label: "导入",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-upload",
+          disabled: false,
+          click: () => {
+            console.log("测试");
+          },
+        },
+      ],
+      pager: {
+        current: 2,
+        size: 10,
+        total: 100,
+        sizes: [10, 20, 50, 100],
+      },
+      columns: [
+        {
+          label: "中台服务编码",
+          prop: "abilityCode",
+          showOverflowTooltip: true,
+          align: "center",
+          fixed: "left",
+          minWidth: 140
+        },
+        {
+          label: "中台服务名称",
+          prop: "abilityName",
+          minWidth: 140,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "服务类型",
+          prop: "serveType",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+          render: (h, params) => {
+            return h("span", {}, params.serveType ? serverTypeOptions[params.serveType - 1].label : '--');
+          },
+        },
+        {
+          label: "模块",
+          prop: "module",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "中台类型",
+          prop: "midGroundType",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+          render: (h, params) => {
+            console.log('midGroundNameOptions', midGroundNameOptions)
+            return h("span", {}, params.midGroundType ? midGroundNameOptions[params.midGroundType - 1].label : '--');
+          },
+        },
+        {
+          label: "中台名称",
+          prop: "midGroundName",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+          render: (h, params) => {
+            return h("span", {}, params.midGroundName ? midGroundTypeOptions[params.midGroundName - 1].label : '--');
+          },
+        },
+        // {
+        //   label: "服务调用频率",
+        //   T: 'a',
+        //   prop: "buildType2",
+        //   minWidth: 120,
+        //   align: "center",
+        //   style: { color: '#0b8680', cursor: 'pointer' },
+        //   click: (row) => {
+        //     this.$emit('dialog', '服务调用频率', row)
+        //   },
+        // },
+        {
+          label: "服务调用方数量",
+          T: 'a',
+          prop: "serviceInvNum",
+          minWidth: 120,
+          align: "center",
+          style: { color: '#0b8680', cursor: 'pointer' },
+          click: (row) => {
+            this.$emit('dialog', '服务调用方数量', row)
+          },
+        },
+        {
+          label: "操作实体数量",
+          T: 'a',
+          prop: "oprEntityNum",
+          minWidth: 120,
+          align: "center",
+          style: { color: '#0b8680', cursor: 'pointer' },
+          click: (row) => {
+            this.$emit('dialog', '操作实体数量', row)
+          },
+        },
+        {
+          label: "支撑技术组件数量",
+          T: 'a',
+          prop: "supportTecModNum",
+          minWidth: 140,
+          align: "center",
+          style: { color: '#0b8680', cursor: 'pointer' },
+          click: (row) => {
+            this.$emit('dialog', '支撑技术组件数量', row)
+          },
+        },
+        {
+          label: "服务发布时间",
+          prop: "publishTime",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "支撑的业务活动",
+          prop: "suppportBusActNum",
+          minWidth: 120,
+          align: "center",
+        },
+        {
+          label: "关联的中台服务",
+          prop: "relMidServiceNum",
+          minWidth: 120,
+          align: "center",
+        },
+        {
+          label: "服务状态",
+          prop: "state",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        // {
+        //   label: "操作",
+        //   prop: "action",
+        //   minWidth: 360,
+        //   align: "center",
+        //   tableBtnList: [
+        //     {
+        //       label: "业务",
+        //       type: "primary",
+        //       size: "mini",
+        //       icon: "el-icon-circle-plus-outline",
+        //       click: (row, index) => {
+        //         this.dialogRow = { ...row }
+        //         console.log("编辑", row);
+        //         this.title = '关联业务'
+        //         this.show = true;
+        //       },
+        //     },
+        //     {
+        //       label: "应用",
+        //       type: "primary",
+        //       size: "mini",
+        //       icon: "el-icon-circle-plus-outline",
+        //       click: (row, index) => {
+        //         console.log("编辑", row);
+        //       },
+        //     },
+        //     {
+        //       label: "实体",
+        //       type: "primary",
+        //       size: "mini",
+        //       icon: "el-icon-circle-plus-outline",
+        //       click: (row, index) => {
+        //         console.log("编辑", row);
+        //       },
+        //     },
+        //     {
+        //       label: "组件",
+        //       type: "primary",
+        //       size: "mini",
+        //       icon: "el-icon-circle-plus-outline",
+        //       click: (row, index) => {
+        //         console.log("编辑", row);
+        //       },
+        //     },
+        //   ],
+        // },
+      ],
+      data: [],
+      treeProps: {
+        children: 'children',
+        label: 'label'
+      },
+      treeData: [{
+        id: 1,
+        label: '一级 1',
+        children: [{
+          id: 4,
+          label: '二级 1-1',
+          children: [{
+            id: 9,
+            label: '三级 1-1-1'
+          }, {
+            id: 10,
+            label: '三级 1-1-2'
+          }]
+        }]
+      }],
+      dialogColumns: [
+        {
+          label: "资产名称",
+          prop: "buildType",
+          showOverflowTooltip: true,
+          align: "center",
+          fixed: "left",
+          minWidth: 140
+        },
+        {
+          label: "资产编号",
+          prop: "buildType",
+          showOverflowTooltip: true,
+          align: "center",
+          fixed: "left",
+          minWidth: 140
+        },
+        {
+          label: "所属元素",
+          prop: "buildType",
+          showOverflowTooltip: true,
+          align: "center",
+          fixed: "left",
+          minWidth: 140
+        },
+      ],
+      dialogData: []
+    };
+  },
+  mounted() {
+    this.disabledTreeNode(this.treeData)
+    this.getList()
+  },
+  methods: {
+    concatService(row) {
+      this.dialogRow = { ...row }
+      console.log("编辑", row);
+      this.title = '关联业务'
+      this.show = true;
+    },
+    disabledTreeNode(data) {
+      if (Object.prototype.toString.call(data) === '[object Array]') {
+        data.forEach((item, index) => {
+          if (item.children && item.children.length) {
+            item.disabled = true
+            this.disabledTreeNode(item.children)
+          }
+        })
+      } else {
+        throw ('Method disabledTreeNode params data must be an Array.')
+      }
+    },
+    checkChange(node, checked) {
+      console.log('checkChange', node, checked);
+    },
+    close() {
+
+    },
+    doLayout() {
+      this.tableRef.doLayout()
+    },
+    async getList() {
+      let params = { ...this.form, pageSize: this.pager.size, current: this.pager.current }
+      this.loading = true
+      const res = await getServiceList(params).catch(() => {
+        this.pager.total = 0
+        this.loading = false
+      })
+      this.loading = false
+      console.log('getList', res)
+      if (res.code == 200) {
+        this.data = res.data.records
+        this.pager.total = res.data.total
+      }
+
+    },
+    search() {
+      this.pager.current = 1
+      this.getList()
+    },
+    reset() {
+      this.form = {
+        abilityName: '',//	中台服务名称		false
+        abilitySource: '',//	资源类型 1 中台服务清单 2 业务信息 3 应用服务信息 4 数据实体信息 5 技术组件信息		false	
+        midGroundName: '',//	中台名称		false	
+        midGroundType: '',//	中台类型		false	
+        statTime: '',//	统计时间		false	
+      }
+      this.getList()
+    },
+    handleSelectionChange(val) {
+      this.selectionList = val;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.serviceListWrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.search {
+  /deep/.el-form-item {
+    margin-bottom: 0 !important;
+  }
+}
+
+.w180 {
+  width: 180px;
+}
+
+.btn-box {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 38px;
+}
+
+.btns {
+  height: 33px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    margin: 0 6px;
+  }
+}
+
+.comDialog {
+  .el-dialog__header {
+    background-color: #0d867f;
+    text-align: left;
+  }
+
+  .el-dialog__title {
+    color: #fff;
+  }
+
+  .el-dialog__close {
+    color: #fff;
+  }
+
+  .comDialogContent {
+    min-height: 400px;
+  }
+
+  .el-tree {
+    /deep/ .is-leaf {
+      background-color: transparent !important;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/comCenterServeListNew/components/technicalCom.vue

+<template>
+  <div class="technicalComWrapper">
+    <ETable ref="ETableRef" title="技术组件信息列表" :tableRef.sync="tableRef" :height="430" tableKey="technicalCom"
+      :data="data" :columns="columns" :indexMethod="true" v-loading="loading" :operateList="operateList"
+      :tableBtnList="tableBtnList" @sizeChange="handlerSizeChange" @currentChange="handlerCurrentChange" :pager="pager">
+      <SearchForm slot="header" :formOptions="formOptions" @onSearch="getList" @onReset="reset"></SearchForm>
+    </ETable>
+  </div>
+</template>
+<script>
+import SearchForm from "@/components/SearchForm.vue";
+import ETable from "@/newComponents/ETable/index.vue";
+import tableMixin from "@/mixins/tableMixin";
+
+export default {
+  name: "technicalCom",
+  components: { SearchForm, ETable },
+  mixins: [tableMixin()],
+  data() {
+    return {
+      loading: false,
+      tableRef: null,
+      form: {
+        name: '',
+        date: '',
+        typeName: '',
+        type: ''
+      },
+      selectionList: [],
+      formOptions: [
+        {
+          label: "服务名称",
+          prop: "name",
+          element: "el-input",
+          placeholder: "服务名称",
+        },
+        {
+          label: "统计日期",
+          prop: "buildType",
+          element: "el-date-picker",
+          type: 'date',
+          valueFormat: 'yyyy-MM-dd',
+          element: 'el-date-picker',
+          initValue: new Date().format('yyyy-MM-dd'),
+          placeholder: '统计日期',
+        },
+        {
+          label: "基础组件名称",
+          prop: "buildType",
+          element: "el-select",
+          dictType: "build_type",
+          placeholder: "基础组件名称",
+        },
+      ],
+      operateList: [
+        {
+          label: "新增",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-plus",
+          disabled: true,
+          click: () => {
+            console.log("add");
+          },
+        },
+        {
+          label: "下载模板",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-download",
+          disabled: false,
+          click: () => {
+            console.log("测试");
+          },
+        },
+        {
+          label: "导入",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-upload",
+          disabled: false,
+          click: () => {
+            console.log("测试");
+          },
+        },
+      ],
+      pager: {
+        current: 2,
+        size: 10,
+        total: 100,
+        sizes: [10, 20, 50, 100],
+      },
+      columns: [
+        {
+          label: "中台服务编码",
+          prop: "buildType",
+          showOverflowTooltip: true,
+          align: "center",
+          fixed: "left",
+          minWidth: 140
+        },
+        {
+          label: "中台服务名称",
+          prop: "buildType2",
+          minWidth: 140,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "基础组件名称",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "基础组件编码",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "技术平台",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "支撑的系统数量",
+          T: 'a',
+          prop: "buildType2",
+          minWidth: 140,
+          align: "center",
+          style: { color: '#0b8680', cursor: 'pointer' },
+          click: (row) => {
+            this.$emit('dialog', '支撑的系统数量', row)
+          },
+        },
+        {
+          label: "支撑的数据服务数量",
+          T: 'a',
+          prop: "buildType2",
+          minWidth: 140,
+          align: "center",
+          style: { color: '#0b8680', cursor: 'pointer' },
+          click: (row) => {
+            this.$emit('dialog', '支撑的数据服务数量', row)
+          },
+        },
+      ],
+      tableBtnList: [
+        {
+          label: "编辑",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-circle-plus-outline",
+          click: (row, index) => {
+            console.log("编辑", row);
+          },
+        },
+      ],
+      data: [{ buildType2: 11 }],
+    };
+  },
+  mounted() { },
+  methods: {
+    doLayout() {
+      this.tableRef.doLayout()
+    },
+    getList() {
+      console.log("getList");
+    },
+    reset() { },
+    handleSelectionChange(val) {
+      this.selectionList = val;
+    },
+    showClick(val) {
+      console.log("showClick", val);
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.technicalComWrapper {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/views/comCenterServeListNew/components/usiingService.vue

+<template>
+  <div class="usiingServiceWrapper">
+    <ETable ref="ETableRef" title="应用服务列表" :tableRef.sync="tableRef" :height="430" tableKey="usiingService" :data="data"
+      :columns="columns" :indexMethod="true" v-loading="loading" :operateList="operateList" :tableBtnList="tableBtnList"
+      @sizeChange="handlerSizeChange" @currentChange="handlerCurrentChange" :pager="pager">
+      <SearchForm slot="header" :formOptions="formOptions" @onSearch="getList" @onReset="reset"></SearchForm>
+    </ETable>
+  </div>
+</template>
+<script>
+import SearchForm from "@/components/SearchForm.vue";
+import ETable from "@/newComponents/ETable/index.vue";
+import tableMixin from "@/mixins/tableMixin";
+
+export default {
+  name: "usiingService",
+  components: { SearchForm, ETable },
+  mixins: [tableMixin()],
+  data() {
+    return {
+      loading: false,
+      tableRef: null,
+      form: {
+        name: '',
+        date: '',
+        typeName: '',
+        type: ''
+      },
+      selectionList: [],
+      formOptions: [
+        {
+          label: "中台服务名称",
+          prop: "name",
+          element: "el-input",
+          placeholder: "中台服务名称",
+        },
+        {
+          label: "统计日期",
+          prop: "buildType",
+          element: "el-date-picker",
+          type: 'date',
+          valueFormat: 'yyyy-MM-dd',
+          element: 'el-date-picker',
+          initValue: new Date().format('yyyy-MM-dd'),
+          placeholder: '统计日期',
+        },
+        {
+          label: "业务服务名称",
+          prop: "buildType",
+          element: "el-select",
+          dictType: "build_type",
+          placeholder: "业务服务名称",
+        },
+        {
+          label: "应用服务名称",
+          prop: "buildType",
+          element: "el-select",
+          dictType: "build_type",
+          placeholder: "应用服务名称",
+        },
+      ],
+      operateList: [
+        {
+          label: "新增",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-plus",
+          disabled: true,
+          click: () => {
+            console.log("add");
+          },
+        },
+        {
+          label: "下载模板",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-download",
+          disabled: false,
+          click: () => {
+            console.log("测试");
+          },
+        },
+        {
+          label: "导入",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-upload",
+          disabled: false,
+          click: () => {
+            console.log("测试");
+          },
+        },
+      ],
+      pager: {
+        current: 2,
+        size: 10,
+        total: 100,
+        sizes: [10, 20, 50, 100],
+      },
+      columns: [
+        {
+          label: "中台服务编码",
+          prop: "buildType",
+          showOverflowTooltip: true,
+          align: "center",
+          fixed: "left",
+          minWidth: 140
+        },
+        {
+          label: "中台服务名称",
+          prop: "buildType2",
+          minWidth: 140,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "应用活动名称",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "应用活动编码",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "功能模块",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "系统应用",
+          prop: "buildType2",
+          minWidth: 120,
+          showOverflowTooltip: true,
+          align: "center",
+        },
+        {
+          label: "关联的业务对象数量",
+          T: 'a',
+          prop: "buildType2",
+          minWidth: 140,
+          align: "center",
+          style: { color: '#0b8680', cursor: 'pointer' },
+          click: (row) => {
+            this.$emit('dialog', '关联的业务对象数量', row)
+          },
+        },
+        {
+          label: "关联的业务活动数量",
+          T: 'a',
+          prop: "buildType2",
+          minWidth: 140,
+          align: "center",
+          style: { color: '#0b8680', cursor: 'pointer' },
+          click: (row) => {
+            this.$emit('dialog', '关联的业务活动数量', row)
+          },
+        },
+        {
+          label: "关联的物理实体数量",
+          T: 'a',
+          prop: "buildType2",
+          minWidth: 140,
+          align: "center",
+          style: { color: '#0b8680', cursor: 'pointer' },
+          click: (row) => {
+            this.$emit('dialog', '关联的物理实体数量', row)
+          },
+        },
+        {
+          label: "关联的技术组件数量",
+          T: 'a',
+          prop: "buildType2",
+          minWidth: 140,
+          align: "center",
+          style: { color: '#0b8680', cursor: 'pointer' },
+          click: (row) => {
+            this.$emit('dialog', '关联的技术组件数量', row)
+          },
+        },
+      ],
+      tableBtnList: [
+        {
+          label: "编辑",
+          type: "primary",
+          size: "mini",
+          icon: "el-icon-circle-plus-outline",
+          click: (row, index) => {
+            console.log("编辑", row);
+          },
+        },
+      ],
+      data: [{ buildType2: 11 }],
+    };
+  },
+  mounted() { },
+  methods: {
+    doLayout() {
+      this.tableRef.doLayout()
+    },
+    getList() {
+      console.log("getList");
+    },
+    reset() { },
+    handleSelectionChange(val) {
+      this.selectionList = val;
+    },
+    showClick(val) {
+      console.log("showClick", val);
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.usiingServiceWrapper {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file

src/views/comCenterServeListNew/index.vue

+<template>
+	<div class="comCenterServeList">
+		<div class="table_container">
+			<el-tabs v-model="active" @tab-click="handleClick">
+				<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name">
+					<component :ref="`${item.name}ref`" :is="item.name" @dialog="openDialog"></component>
+				</el-tab-pane>
+			</el-tabs>
+		</div>
+		<ComDialog ref="ComDialogRef" />
+	</div>
+</template>
+
+<script>
+import ServiceList from './components/serviceList.vue';
+import BusinessMsg from './components/businessMsg.vue';
+import UsiingService from './components/usiingService.vue';
+import DataEntity from './components/dataEntity.vue';
+import TechnicalCom from './components/technicalCom.vue';
+import ComDialog from './components/comDialog.vue';
+export default {
+	name: 'comCenterServeList',
+	components: {
+		ServiceList,
+		BusinessMsg,
+		UsiingService,
+		DataEntity,
+		TechnicalCom,
+		ComDialog
+	},
+	data() {
+		return {
+			tabList: [
+				{
+					label: '中台服务清单',
+					name: 'ServiceList',
+				},
+				{
+					label: '业务信息',
+					name: 'BusinessMsg',
+				},
+				{
+					label: '应用服务信息',
+					name: 'UsiingService',
+				},
+				{
+					label: '数据实体信息',
+					name: 'DataEntity',
+				},
+				{
+					label: '技术组件信息',
+					name: 'TechnicalCom',
+				}
+
+			],
+			active: "ServiceList",
+		};
+	},
+	mounted() {
+
+	},
+	methods: {
+		openDialog(title, row) {
+			console.log(title, row)
+			let params = { title, row }
+			this.$refs.ComDialogRef.open(params)
+		},
+		handleClick(tab) {
+			this.active = tab.name;
+			// 解决列表fixed样式错乱
+			this.$nextTick(() => {
+				this.$refs[`${tab.name}ref`][0].doLayout()
+			})
+		},
+	}
+}
+</script>
+<style scoped>
+.form_item_container {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.el-form-item {
+	display: flex;
+	width: 33%;
+}
+
+.cross1 {
+	width: 100%;
+}
+
+/deep/ .cross1>.el-form-item__content {
+	width: 86.4% !important;
+}
+
+.comCenterServeList {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: center;
+}
+
+.dialog_content_1 {
+	display: flex;
+	justify-content: space-between;
+}
+
+.el-button--primary {
+	background: rgba(13, 134, 127, 0.1);
+	color: #0D867F;
+	border: 0;
+}
+
+.add_select_item_icon_container {
+	margin-top: 10px;
+	text-align: center;
+	cursor: pointer;
+}
+
+/deep/ .el-dialog__header {
+	background-color: #0D867F;
+	text-align: left;
+}
+
+/deep/ .el-input-group__append {
+	background-color: #0D867F;
+	color: #fff;
+	cursor: pointer;
+}
+
+/deep/ .el-dialog__title {
+	color: #fff;
+}
+
+/deep/ .el-dialog__close {
+	color: #fff;
+}
+
+.search_menu {
+	display: flex;
+	justify-content: space-between;
+}
+
+.search_menu_item_container {
+	display: flex;
+	align-items: center;
+}
+
+.search_menu_btn_container {
+	display: flex;
+	align-items: center;
+}
+
+.search_menu_item {
+	display: flex;
+	align-items: center;
+	width: 344px;
+}
+
+.search_title {
+	/* width: 20%; */
+	flex-shrink: 0;
+	margin-right: 15px;
+}
+
+.search_item {
+	width: 60%;
+}
+
+.search_btn {
+	width: 100%;
+	display: flex;
+	margin-top: 50px;
+	margin-bottom: 20px;
+}
+
+.el-button--default {
+	border: 0;
+}
+
+.shanChu_btn {
+	color: #DD6A15;
+	background-color: #F8EBE2;
+}
+
+.tingYong_btn {
+	color: #DEA82A;
+	background-color: #FDF6E6;
+}
+
+.el-button.is-disabled {
+	color: #C0C4CC !important;
+	background-color: #fff !important;
+}
+
+.add_btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 76px;
+	height: 32px;
+	background: rgba(13, 134, 127, 0.1);
+	border-radius: 6px 6px 6px 6px;
+	border: 1px solid #0D867F;
+	font-size: 14px;
+	color: #0D867F;
+	cursor: pointer;
+}
+
+.version_btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 104px;
+	height: 32px;
+	background: rgba(13, 134, 127, 0.1);
+	border-radius: 6px 6px 6px 6px;
+	border: 1px solid #0D867F;
+	font-size: 14px;
+	color: #0D867F;
+	cursor: pointer;
+	margin-left: 15px;
+}
+
+.query_btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 76px;
+	height: 32px;
+	background: rgba(13, 134, 127, 1);
+	border-radius: 6px 6px 6px 6px;
+	border: 1px solid #0D867F;
+	font-size: 14px;
+	color: #fff;
+	margin-right: 10px;
+	cursor: pointer;
+
+}
+
+.reset_btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 76px;
+	height: 32px;
+	background: rgba(244, 244, 244, 1);
+	border-radius: 6px 6px 6px 6px;
+	border: 1px solid #ccc;
+	font-size: 14px;
+	color: #666;
+	cursor: pointer;
+
+}
+
+.btn_icon {
+	margin-right: 10px;
+}
+
+.table_container {
+	width: 97%;
+	height: calc(100% - 40px);
+	margin-top: 20px;
+}
+
+.el-pagination {
+	margin-top: 30px;
+}
+
+/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+	background-color: #0D867F;
+}
+
+.greenButton {
+	background-color: #0D867F;
+	color: #fff;
+}
+</style>
\ No newline at end of file

src/views/comCenterServeListNew/options.js

+export const serverTypeOptions = [
+  {
+    label: "聚合服务",
+    value: 1,
+  },
+  {
+    label: "规则服务",
+    value: 2,
+  },
+  {
+    label: "数据服务",
+    value: 3,
+  },
+  {
+    label: "原子服务",
+    value: 4,
+  },
+];
+
+export const archiTypeOptions = [
+  {
+    label: "业务架构",
+    value: 1,
+  },
+  {
+    label: "应用架构",
+    value: 2,
+  },
+  {
+    label: "数据架构",
+    value: 3,
+  },
+  {
+    label: "技术架构",
+    value: 4,
+  },
+  {
+    label: "安全架构",
+    value: 5,
+  },
+];
+
+export const abilitySourceOptions = [
+  {
+    label: "中台服务清单",
+    value: 1,
+  },
+  {
+    label: "业务信息",
+    value: 2,
+  },
+  {
+    label: "应用服务信息",
+    value: 3,
+  },
+  {
+    label: "数据实体信息",
+    value: 4,
+  },
+  {
+    label: "技术组件信息",
+    value: 5,
+  },
+];
+
+export const midGroundNameOptions = [
+  {
+    label: "项目管理业务中台",
+    value: "项目管理业务中台",
+  },
+  {
+    label: "电网资源业务中台",
+    value: "电网资源业务中台",
+  },
+  {
+    label: "客户服务业务中台",
+    value: "客户服务业务中台",
+  },
+  {
+    label: "财务管理业务中台",
+    value: "财务管理业务中台",
+  },
+];
+
+export const midGroundTypeOptions = [
+  {
+    label: "业务中台",
+    value: "业务中台",
+  },
+  {
+    label: "数据中台",
+    value: "数据中台",
+  },
+  {
+    label: "技术中台",
+    value: "技术中台",
+  },
+];