perf: 数据列表样式统一

nezha-fronted/src/components/page/config/dc.vue

@@ -1,127 +1,33 @@
 <template>
-  <div style="height: 100%">
+  <div>
     <nz-data-list
       ref="dataList"
-      :components="['searchInput', 'elementSet']"
+      :api="url"
+      :layout="['searchInput', 'elementSet']"
       :custom-table-title.sync="tools.customTableTitle"
       :from="fromRoute.dc"
-      :search-msg="searchMsg"
-      :table-id="tableId"
-      :table-title="tableTitle">
+      :search-msg="searchMsg">
       <template v-slot:top-tool-right>
-        <button id="dc-add" v-has="'dc_toAdd'" :title="$t('overall.createDatacenter')" class="top-tool-btn margin-l-20"
+        <button id="dc-add" v-has="'dc_add'" :title="$t('overall.createDatacenter')" class="top-tool-btn margin-r-10"
                 type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
         <delete-button id="account-list-batch-delete" v-has="'dc_delete'" :delete-objs="batchDeleteObjs" api="dc" @after="getTableData" @before="delFlag=true"></delete-button>
       </template>
       <template v-slot:default="slotProps">
-        <el-table
-          id="dc-list-table"
+        <dc-table
           ref="dataTable"
-          v-loading="tools.loading"
-          :data="tableData"
+          v-loading="slotProps.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
           :height="mainTableHeight"
-          :cell-class-name="assetStatClassName"
-          border
-          @header-dragend="dragend"
-          @sort-change="tableDataSort"
-          @selection-change="(selection)=>{batchDeleteObjs=selection}"
-        >
-          <el-table-column
-            :resizable="false"
-            align="center"
-            type="selection"
-            width="55">
-          </el-table-column>
-          <el-table-column
-            v-for="(item, index) in tools.customTableTitle"
-            v-if="item.show"
-            :key="`col-${index}`"
-            :fixed="item.fixed"
-            :label="item.label"
-            :prop="item.prop"
-            :resizable="true"
-            :sort-orders="['ascending', 'descending']"
-            :sortable="sortableShow(item.prop, fromRoute.dc)"
-            :width="`${item.width}`"
-            class="data-column"
-          >
-            <template slot="header">
-              <span>
-                <span>{{item.label}}</span>
-                <div class="col-resize-area"></div>
-              </span>
-            </template>
-            <template slot-scope="scope" :column="item">
-              <template v-if="item.prop === 'principal'">
-                <template v-if="scope.row.principal">
-                  <template v-for="item in userData">
-                    <template v-if="scope.row.principal == item.userId">{{item.username}}</template>
-                  </template>
-                </template>
-                <template v-else>-</template>
-              </template>
-              <template v-else-if="item.prop === 'state'">
-                <el-switch
-                  v-model="scope.row.state"
-                  :disabled="!hasButton('dc_toEdit') || !hasButton('dc_toEdit')"
-                  active-color="#ee9d3f"
-                  active-value="ON"
-                  inactive-value="OFF"
-                  @change="(val)=>{statusChange(scope.row)}"
-                />
-              </template>
-              <template v-else-if="item.prop === 'longitude'">
-                <template v-if="regNumTest(scope.row.longitude)">{{scope.row.longitude}}</template>
-                <template v-else>-</template>
-              </template>
-              <template v-else-if="item.prop === 'latitude'">
-                <template v-if="regNumTest(scope.row.latitude)">{{scope.row.latitude}}</template>
-                <template v-else>-</template>
-              </template>
-              <template v-else-if="item.prop === 'assetStat' && scope.row.assetStat">
-                <el-popover
-                  :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock + '，' + $t('asset.suspended') + '：' + scope.row.assetStat.suspended"
-                  placement="top"
-                  trigger="hover">
-                  <div slot="reference" class="dc-asset-states">
-                    <span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
-                    <span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
-                    <span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
-                    <span class="dc-asset-state dc-asset-state-suspended">{{scope.row.assetStat.suspended}}</span>
-                  </div>
-                </el-popover>
-
-              </template >
-              <template v-else-if="item.prop === 'cabinetNum'">
-                <span class="link" @click="$refs.dataList.showBottomBox('cabinet', scope.row)">{{scope.row[item.prop]}}</span>
-              </template>
-              <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-              <template v-else>-</template>
-            </template>
-          </el-table-column>
-          <el-table-column
-            :resizable="false"
-            :width="operationWidth"
-            fixed="right">
-            <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
-            <div slot-scope="scope" class="table-operation-items">
-              <button class="table-operation-item" @click="$refs.dataList.showBottomBox('operationLog', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
-              <el-dropdown size="medium" trigger="hover" @command="tableOperation">
-                <div class="table-operation-item table-operation-item--more">
-                  <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
-                </div>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item :command="['edit', scope.row]" :disabled="isBuildIn(scope.row)"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-                  <el-dropdown-item :command="['delete', scope.row, `dc?ids=${scope.row.id}`]" :disabled="isBuildIn(scope.row)"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </div>
-          </el-table-column>
-        </el-table>
-        <!-- 回到table顶部的按钮 -->
-        <button v-show="tools.showTopBtn && slotProps.mainResizeShow" id="dc-list-totop" :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" class="to-top" @click="toTop(scrollbarWrap)"><i class="nz-icon nz-icon-top"></i></button>
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></dc-table>
       </template>
       <!-- 分页组件 -->
       <template v-slot:pagination>
@@ -135,7 +41,6 @@
       <traffic-setting-box v-if="rightBox.trafficSetting.show" ref="trafficBox" :dc="object" @close="closeTrafficBox"></traffic-setting-box>
     </transition>
     <span v-if="dcDataRefresh" style="display: none"></span>
-
   </div>
 </template>
 <script>
@@ -144,21 +49,22 @@ import dcBox from '@/components/common/rightBox/dcBox' // dc弹框
 import trafficSettingBox from '@/components/common/rightBox/trafficSetting/trafficSettingBox'
 import deleteButton from '@/components/common/deleteButton'
 import nzDataList from '@/components/common/table/nzDataList'
-import tableMixin from '@/components/common/mixin/table'
-const regNum = /^[0-9]+.?[0-9]*/
+import dataListMixin from '@/components/common/mixin/dataList'
+import dcTable from '@/components/common/table/settings/dcTable'
 export default {
   name: 'dc',
   components: {
     trafficSettingBox,
     dcBox,
     deleteButton,
-    nzDataList
+    nzDataList,
+    dcTable
   },
-  mixins: [tableMixin],
+  mixins: [dataListMixin],
   data () {
     return {
+      url: 'dc',
       tableId: 'dcTable', // 需要分页的table的id，用于记录每页数量
-      object: {},
       blankObject: {
         id: '',
         name: '',
@@ -173,50 +79,6 @@ export default {
         dc: { show: false },
         trafficSetting: { show: false }
       },
-      tableTitle: [
-        {
-          label: 'ID',
-          prop: 'id',
-          show: true,
-          width: 80
-        }, {
-          label: this.$t('overall.name'),
-          prop: 'name',
-          show: true
-        }, {
-          label: this.$t('asset.location'),
-          prop: 'location',
-          show: true
-        }, {
-          label: this.$t('config.dc.cabinetNum'),
-          prop: 'cabinetNum',
-          show: true
-        }, {
-          label: this.$t('config.dc.assets'),
-          prop: 'assetStat',
-          show: true
-        }, {
-          label: this.$t('asset.tel'),
-          prop: 'tel',
-          show: true
-        }, {
-          label: this.$t('asset.principal'),
-          prop: 'principal',
-          show: true
-        }, {
-          label: this.$t('config.dc.longitude'),
-          prop: 'longitude',
-          show: false
-        }, {
-          label: this.$t('config.dc.latitude'),
-          prop: 'latitude',
-          show: false
-        }, {
-          label: this.$t('config.dc.state'),
-          prop: 'state',
-          show: true
-        }
-      ],
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
         searchLabelList: [{
@@ -227,8 +89,8 @@ export default {
           disabled: false
         }]
       },
+      regNum: /^[0-9]+.?[0-9]*/,
       tabShow: 1, // 控制显示一级页面和二级页面 1 dc 2cabinet
-      delFlag: false,
       userData: []
     }
   },
@@ -249,10 +111,10 @@ export default {
     },
     edit (u) {
       this.dc = JSON.parse(JSON.stringify(u))
-      if (!regNum.test(this.dc.longitude)) {
+      if (!this.regNum.test(this.dc.longitude)) {
         this.dc.longitude = undefined
       }
-      if (!regNum.test(this.dc.latitude)) {
+      if (!this.regNum.test(this.dc.latitude)) {
         this.dc.latitude = undefined
       }
       if (!this.dc.area) {
@@ -297,28 +159,6 @@ export default {
         this.getTableData()
       })
     },
-    getTableData () {
-      if (!this.hasButton('dc_view')) {
-        this.$message.error(this.$t('tip.noAccess'))
-        return
-      }
-      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
-      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
-      this.tools.loading = true
-      this.$get('dc', this.searchLabel).then(response => {
-        this.tools.loading = false
-        if (response.code === 200) {
-          this.tableData = response.data.list
-          this.pageObj.total = response.data.total
-          if (!this.scrollbarWrap) {
-            this.$nextTick(() => {
-              this.scrollbarWrap = this.$refs.dataTable.bodyWrapper
-              this.toTopBtnHandler(this.scrollbarWrap)
-            })
-          }
-        }
-      })
-    },
     getUserData () {
       return new Promise(resolve => {
         this.$get('sys/user', { pageSize: -1, pageNo: 1 }).then(response => {
@@ -330,7 +170,7 @@ export default {
       })
     },
     regNumTest (val) { // 校验是否是数字
-      return regNum.test(val)
+      return this.regNum.test(val)
     },
     initEvent () {
       bus.$on('dc-list-change', () => {