perf: settings列表改版（细节未调整）

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

@@ -1,126 +1,103 @@
 <template>
-  <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': bottomBox.showSubList}">
-    <!--工具组-->
-    <div class="top-tools" v-show="bottomBox.mainResizeShow">
-      <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
-        <div class="top-tool-search margin-r-20">
-          <search-input :searchMsg="searchMsg" @search="search"
-                        :inTransform="bottomBox.inTransform" :single="true"></search-input>
-        </div>
+  <div style="height: 100%">
+    <nz-data-list
+      ref="dataList"
+      :components="['searchInput', 'elementSet']"
+      :custom-table-title.sync="tools.customTableTitle"
+      :from="fromRoute.expressionTemplate"
+      :search-msg="searchMsg"
+      :table-id="tableId"
+      :table-title="tableTitle">
+      <template v-slot:top-tool-right>
         <export-excel
-          id="asset-list"
-          export-file-name="asset"
+          id="expression-template-list"
+          class="top-tool-export margin-l-20"
           export-url="expression/tmpl/export"
           import-url="expression/tmpl/import"
+          export-file-name="expression-template"
           :params="searchLabel"
           :permissions="{import: 'asset_import', export: 'asset_export'}"
-          @afterImport="afterTableListChange"
+          @afterImport="getTableData"
           v-has="'expr_temp_save'"
         >
           <template slot="optionZone">
-            <button :title="$t('overall.exportExcelLower')" @click="addTemp" type="button" v-has="'expr_temp_save'"
-                    class="nz-btn nz-btn-size-normal nz-btn-style-light" id="alert-list-export">
+            <button id="expr-tmpl-list-export" v-has="'expr_temp_save'" :title="$t('overall.createTemplate')" class="top-tool-btn"
+                    type="button" @click="add">
               <i class="nz-icon nz-icon-create-square"></i>
             </button>
           </template>
         </export-excel>
 
-        <delete-button :delete-objs="batchDeleteObjs" @after="getexprTemp"
+        <delete-button :delete-objs="batchDeleteObjs" @after="getTableData"
                        :api="'expression/tmpl'" v-has="'expr_temp_delete'" id="alert-msg-batch-delete"></delete-button>
-      </div>
-      <div class="pagination-top pagination-top-hide display-none"></div>
-    </div>
-    <!--表格开始-->
-    <transition name="el-zoom-in-top">
-      <element-set
-        id="alert-rule-element-set"
-        v-if="tools.showCustomTableTitle"
-        @close="tools.showCustomTableTitle = false"
-        :custom-table-title.sync="tools.customTableTitle"
-        :original-table-title="tableTitle"
-        ref="customTableTitle"
-      ></element-set>
-    </transition>
-    <el-table
-      id="alert-rule-table"
-      class="nz-table"
-      :data="tableData"
-      border
-      v-show="bottomBox.mainResizeShow"
-      ref="exprTempTable"
-      tooltip-effect="light"
-      :height="mainTableHeight"
-      v-loading="tools.loading"
-      style="width: 100%;"
-      @sort-change="tableDataSort"
-      @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
-    >
-      <el-table-column
-        :resizable="false"
-        type="selection"
-        width="40"
-        align="center">
-      </el-table-column>
-
-      <el-table-column
-        :resizable="true"
-        v-for="(item, index) in tools.customTableTitle"
-        v-if="item.show"
-        :key="`col-${index}`"
-        :label="item.label"
-        :show-overflow-tooltip="item.prop!=='matchers'"
-        :sort-orders="['ascending', 'descending']"
-        :sortable="$tableSet.sortableShow(item.prop,'exprTemp')"
-        :prop="$tableSet.propTitle(item.prop,'exprTemp')"
-        :width="item.width"
-      >
-        <template slot-scope="scope" :column="item">
-          <div v-if="item.prop == 'option'" class="content-right-options">
-            <span :id="'alert-edit-'+scope.row.id" :title="$t('overall.edit')" @click.stop="edit(scope.row)"
-                  class="content-right-option" v-has="'expr_temp_update'" v-if="scope.row.buildIn !== 1">
-              <i class="nz-icon nz-icon-edit"></i>
-            </span>
-            <span
-              :id="'alert-del-'+scope.row.id"
-              :title="$t('overall.delete')"
-              @click="del(scope.row)"
-              class="content-right-option"
-              v-has="'expr_temp_delete'"
-              v-if="scope.row.buildIn !== 1">
-              <i  class="nz-icon nz-icon-delete"></i>
-            </span>
-            <span
-              :id="'alert-copy-'+scope.row.id"
-              :title="$t('overall.copy')"
-              @click="copyRow(scope.row,'exprTemp')"
-              class="content-right-option"
-              v-has="'expr_temp_save'">
-              <i  class="nz-icon nz-icon-override"></i>
-            </span>
-          </div>
-          <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
-          <template v-else>-</template>
-        </template>
-      </el-table-column>
-
-      <el-table-column width="28" :resizable="false">
-        <template slot="header">
-          <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)"
-                class="nz-table-gear">
-            <i class="nz-icon nz-icon-gear"></i>
-          </span>
-        </template>
-      </el-table-column>
-    </el-table>
-    <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}"
-            @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"
-            id="alert-rule-toTop"><i class="nz-icon nz-icon-top"></i></button>
-    <!--表格结束-->
-    <!--分页部分-->
-    <div class="pagination-bottom" v-show="!bottomBox.showSubList">
-      <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize'
-                  ref="Pagination"></Pagination>
-    </div>
+      </template>
+      <template v-slot:default="slotProps">
+        <el-table
+          id="role-list-table"
+          ref="dataTable"
+          v-loading="tools.loading"
+          :data="tableData"
+          :height="mainTableHeight"
+          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']"
+            :width="`${item.width}`"
+            class="data-column"
+          >
+            <template slot="header">
+              <span>{{item.label}}</span>
+              <div class="col-resize-area"></div>
+            </template>
+            <template slot-scope="scope" :column="item">
+              <span v-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
+              <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="['copy', scope.row]" :disabled="isBuildIn(scope.row)"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('config.exprTemp.copy')}}</span></el-dropdown-item>
+                  <el-dropdown-item :command="['delete', scope.row, `sys/role?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="role-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>
+      </template>
+      <!-- 分页组件 -->
+      <template v-slot:pagination>
+        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+      </template>
+    </nz-data-list>
     <!--导出-->
     <div class="export-xlsx">
       <el-dialog :visible.sync="importBox.show" :title="importBox.title" :modal-append-to-body='false'
@@ -137,56 +114,33 @@
     </div>
     <!--侧滑-->
     <transition name="right-box">
-      <exprTempBox v-if="rightBox.show" :exprTemp="exprTemp" @close="closeRightBox"
-                         ref="exprTempBox"></exprTempBox>
+      <exprTempBox v-if="rightBox.show" ref="exprTempBox" :exprTemp="object"
+                   @close="closeRightBox"></exprTempBox>
     </transition>
   </div>
 </template>
 
 <script>
-import bus from '../../../libs/bus'
-import exportXLSX from '../../common/exportXLSX'
-import deleteButton from '../../common/deleteButton'
-import exprTempBox from '../../common/rightBox/exprTempBox'
-import { calcDurationByStringTimeB } from '../../common/js/tools'
+import bus from '@/libs/bus'
+import exportXLSX from '@/components/common/exportXLSX'
+import exprTempBox from '@/components/common/rightBox/exprTempBox'
+import { calcDurationByStringTimeB } from '@/components/common/js/tools'
+import deleteButton from '@/components/common/deleteButton'
+import nzDataList from '@/components/common/table/nzDataList'
+import tableMixin from '@/components/common/mixin/table'
+
 export default {
   name: 'exprTemp',
   components: {
     deleteButton,
     exprTempBox,
+    nzDataList,
     'export-excel': exportXLSX
   },
+  mixins: [tableMixin],
   data () {
     return {
       tableId: 'exprTemp',
-      // 侧滑
-      rightBox: {
-        show: false
-      },
-      /* 二级列表相关 */
-      mainTableHeight: this.$tableHeight.normal, // 主列表table高度
-      /* 二级页面相关 */
-      bottomBox: {
-        tabList: [], // 二级列表的标签
-        tabDetailList: [], // 多个详情
-        mainResizeShow: true, // dom高度改变时是否展示|隐藏
-        subResizeShow: true,
-        isFullScreen: false, // 全屏状态
-        showSubList: false, // 是否显示二级列表
-        targetTab: '', // 显示二级列表中的哪个页签
-        inTransform: false // 搜索框相关，搜索条件下拉框是否在transform里
-      },
-      /* 工具参数 */
-      tools: {
-        loading: false, // 是否显示table加载动画
-        toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性
-        tableHover: false, // 控制滚动条和top按钮同时出现
-        showTopBtn: false, // 显示To top按钮
-        showCustomTableTitle: false, // 自定义列弹框是否显示
-        customTableTitle: [] // 自定义列工具的数据
-      },
-      /* 批量删除相关 */
-      batchDeleteObjs: [],
       /* 搜素相关 */
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
@@ -212,12 +166,6 @@ export default {
           }
         ]
       },
-      searchLabel: {}, // 搜索参数
-      pageObj: {
-        pageNo: 1,
-        pageSize: this.$CONSTANTS.defaultPageSize,
-        total: 0
-      },
       /* 表格相关 */
       tableTitle: [
         {
@@ -241,26 +189,19 @@ export default {
           label: this.$t('config.exprTemp.remark'),
           prop: 'remark',
           show: true
-        }, {
-          label: this.$t('alert.config.option'),
-          prop: 'option',
-          show: true,
-          width: 120
         }
       ],
-      tableData: [],
       // 导出相关
       importBox: { show: false, title: this.$t('overall.exportExcel') },
       deleteBox: { show: false, ids: '', remark: '', state: 2 },
       // 创建修改相关
-      blackExprTemp: {
+      blankObject: {
         id: '',
         name: '',
         gname: '',
         expression: '',
         remark: ''
       },
-      exprTemp: {},
       nowTime: ''
     }
   },
@@ -273,32 +214,23 @@ export default {
         return calcDurationByStringTimeB(record.startAt, this.nowTime)
       }
     }
-  },
-  created () {
-
   },
   mounted () {
-    // 初始化表头
-    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
-      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
-      : this.tableTitle
-    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
     this.initEvent()
-    this.getexprTemp()
   },
   methods: {
     initEvent () {
       bus.$on('alert-rule-list-change', () => {
-        this.getexprTemp()
+        this.getTableData()
       })
       bus.$on('dc-list-change', () => {
-        this.getexprTemp()
+        this.getTableData()
       })
       bus.$on('alert-message-change', () => {
-        this.getexprTemp()
+        this.getTableData()
       })
     },
-    getexprTemp () {
+    getTableData () {
       if (!this.hasButton('rule_view')) {
         this.$message.error(this.$t('tip.noAccess'))
         return
@@ -314,55 +246,13 @@ export default {
           this.nowTime = this.utcTimeToTimezoneStr(response.time)
           if (!this.scrollbarWrap) {
             this.$nextTick(() => {
-              this.scrollbarWrap = this.$refs.exprTempTable.bodyWrapper
+              this.scrollbarWrap = this.$refs.dataTable.bodyWrapper
               this.toTopBtnHandler(this.scrollbarWrap)
             })
           }
         }
       })
     },
-    pageNo (val) {
-      this.pageObj.pageNo = val
-      this.getexprTemp()
-    },
-    pageSize (val) {
-      this.pageObj.pageSize = val
-      localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
-      this.getexprTemp()
-    },
-    search (searchObj) {
-      let orderBy = ''
-      if (this.searchLabel.orderBy) {
-        orderBy = this.searchLabel.orderBy
-      }
-      this.searchLabel = {}
-      this.pageObj.pageNo = 1
-      for (const item in searchObj) {
-        if (searchObj[item]) {
-          this.$set(this.searchLabel, item, searchObj[item])
-        }
-      }
-      if (orderBy) {
-        this.$set(this.searchLabel, 'orderBy', orderBy)
-      }
-      this.$refs.exprTempTable.bodyWrapper.scrollTop = 0
-      this.getexprTemp()
-    },
-    // 数据排序
-    tableDataSort (item) {
-      let orderBy = ''
-      if (item.order === 'ascending') {
-        orderBy = item.prop
-      }
-      if (item.order === 'descending') {
-        orderBy = '-' + item.prop
-      }
-      this.$set(this.searchLabel, 'orderBy', orderBy)
-      this.getexprTemp()
-    },
-    openDelMessageBox () {
-      // if (this.batchDeleteObjs.length < 1) return
-    },
     showExportDialog () {
       this.importBox.show = true
     },
@@ -383,48 +273,10 @@ export default {
       this.exportExcel(temp)
       this.closeDialog()
     },
-    afterTableListChange () {
-      this.getexprTemp()
-    },
-    addTemp () {
-      this.exprTemp = JSON.parse(JSON.stringify(this.blackExprTemp))
-      this.rightBox.show = true
-    },
-    edit (row) {
-      this.$get('expression/tmpl/' + row.id).then(res => {
-        this.exprTemp = { ...res.data }
-        this.rightBox.show = true
-      })
-    },
-    del (row) {
-      if (this.prevent_opt.save) {
-        return
-      }
-      ;
-      this.prevent_opt.save = true
-      this.$confirm(this.$t('tip.confirmDelete'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.$delete('expression/tmpl?ids=' + row.id).then(response => {
-          this.prevent_opt.save = false
-          if (response.code === 200) {
-            this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
-            this.getexprTemp()
-          } else {
-            this.$message.error(response.msg)
-          }
-        })
-      }).catch(() => {
-        this.prevent_opt.save = false
-      })
-    },
     overtime (row) {
       if (this.prevent_opt.save) {
         return
       }
-      ;
       this.prevent_opt.save = true
       this.$confirm(this.$t('tip.confirmOvertime'), {
         confirmButtonText: this.$t('tip.yes'),
@@ -435,7 +287,7 @@ export default {
           this.prevent_opt.save = false
           if (response.code === 200) {
             this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
-            this.getexprTemp()
+            this.getTableData()
           } else {
             this.$message.error(response.msg)
           }
@@ -443,18 +295,7 @@ export default {
       }).catch(() => {
         this.prevent_opt.save = false
       })
-    },
-    closeRightBox (refresh) {
-      this.rightBox.show = false
-      if (refresh) {
-        this.delFlag = true
-        this.getexprTemp()
-      }
     }
   }
 }
 </script>
-
-<style scoped lang="scss">
-
-</style>