【update】标签管理、数据字典样式的修改

src/mixins/SimpleListMixin.js

@@ -258,6 +258,18 @@ export const SimpleListMixin = {
       this.$refs.modalForm.edit(record)
       this.$refs.modalForm.title = '详情'
       this.$refs.modalForm.disableSubmit = true
+    },
+    /**
+     * 循环操作按钮的操作
+     * @param operation
+     * @param record
+     */
+    operationClick (operation, record) {
+      if (operation.clickEvent === 'handleDelete') {
+        this.handleDelete(record.id)
+      } else {
+        this[operation.clickEvent](record)
+      }
     }
   }
 

src/views/system/DictItemList.vue

@@ -35,41 +35,42 @@
                 </a-form-item>
               </a-col>
               <a-col :md="7" :sm="24">
-              <span style="float: left;" class="table-page-search-submitButtons">
-                <a-button type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
-                <a-button type="primary" @click="searchReset" style="margin-left: 8px">{{ $t('reset') }}</a-button>
+              <span style="float: right;" class="table-page-search-submitButtons">
+                <a-button icon="search" type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
+                <a-button icon="reload" type="primary" ghost @click="searchReset" style="margin-left: 8px">{{ $t('reset') }}</a-button>
               </span>
               </a-col>
             </a-row>
             <a-row>
               <a-col :md="2" :sm="24">
-                <a-button style="margin-bottom: 10px" type="primary" @click="handleAdd" v-if="model.isReadOnly === IsReadOnlyEnums.configurable.value || model.isReadOnly === IsReadOnlyEnums.subConfigurable.value">{{ $t('newlyAdded') }}</a-button>
+                <a-button style="margin-bottom: 10px" icon="plus" type="primary" @click="handleAdd" v-if="model.isReadOnly === IsReadOnlyEnums.configurable.value || model.isReadOnly === IsReadOnlyEnums.subConfigurable.value">{{ $t('newlyAdded') }}</a-button>
               </a-col>
             </a-row>
           </a-form>
         </div>
         <div>
-          <a-table
+          <j-table
             ref="table"
-            rowKey="id"
+            can-drag
+            :class="{'tree-table': attributeType === TagsAttributeTypeEnums.TREE.value}"
+            :bordered="true"
             size="middle"
+            rowKey="id"
             :columns="columns"
             :dataSource="dataSource"
             :pagination="ipagination"
             :loading="loading"
+            :scroll="{x: '100%', y: yScrollHeight}"
+            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
             @change="handleTableChange"
             :rowClassName="getRowClassname"
           >
-
-          <span slot="action" slot-scope="text, record">
-            <a @click="handleEdit(record)" v-if="record.isReadOnly === IsReadOnlyEnums.subConfigurable.value || record.isReadOnly === IsReadOnlyEnums.configurable.value">{{ $t('edit') }}</a>
-            <a-divider type="vertical"/>
-            <a-popconfirm :title="$t('areYouSure')" @confirm="() => handleDelete(record.id)" v-if="record.isReadOnly === IsReadOnlyEnums.subConfigurable.value || record.isReadOnly === IsReadOnlyEnums.configurable.value">
-              <a>{{ $t('delete') }}</a>
-            </a-popconfirm>
-          </span>
-
-          </a-table>
+            <div slot="action" class="table-action" slot-scope="{text, record}">
+              <a class="action-edit" v-if="record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value" @click="handleEdit(record)" v-has="'sys:dict:operation'">{{ $t('edit') }}</a>
+              <a-divider type="vertical" v-if="record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value" @click="handleDelete(record.id)" v-has="'sys:dict:operation'"/>
+              <a class="table-del" v-if="record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value" @click="handleDelete(record.id)" v-has="'sys:dict:operation'">{{ $t('delete') }}</a>
+            </div>
+          </j-table>
         </div>
       </div>
     </a-drawer>
@@ -83,15 +84,17 @@ import { filterObj } from '@/utils/util'
 import DictItemModal from './modules/DictItemModal'
 import { JeroListMixin } from '@/mixins/JeroListMixin'
 import JInput from '@/components/jero/JInput'
-import { IsReadOnlyEnums } from '../../enums/commonEnums'
+import { IsReadOnlyEnums, TagsAttributeTypeEnums } from '../../enums/commonEnums'
+import JTable from '../../components/jero/JTable'
 
 export default {
   name: 'DictItemList',
   mixins: [JeroListMixin],
-  components: { DictItemModal, JInput },
+  components: { DictItemModal, JInput, JTable },
   data () {
     return {
       IsReadOnlyEnums,
+      TagsAttributeTypeEnums,
       columns: [
         {
           title: this.$t('name'),
@@ -129,7 +132,7 @@ export default {
       isReadOnly: IsReadOnlyEnums.configurable.value,
       title: this.$t('operation'),
       visible: false,
-      screenWidth: 1000,
+      screenWidth: 1200,
       model: {},
       dictId: '',
       status: 1,
@@ -150,7 +153,9 @@ export default {
         list: '/sys/dictItem/page',
         delete: '/sys/dictItem/delete',
         deleteBatch: '/sys/dictItem/deleteBatch'
-      }
+      },
+      // 标签类型
+      attributeType: undefined
     }
   },
   created () {
@@ -170,6 +175,7 @@ export default {
       this.queryParam = {}
       this.form.resetFields()
       this.model = Object.assign({}, record)
+      this.attributeType = Number(this.model.attributeType) // 标签类型，用于辨别是下拉框还是树形结构
       this.model.dictId = this.dictId
       this.model.status = this.status
       this.visible = true

src/views/system/DictList.vue

@@ -4,52 +4,60 @@
     <!-- 左侧面板 -->
     <div class="table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
-        <a-row :gutter="12">
-          <a-col :md="6" :sm="12">
+        <a-row :gutter="24">
+          <a-col :md="7" :sm="8">
             <a-form-item :label="$t('dict.dictionaryName')" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
-              <j-input :placeholder="$t('pleaseEnter')+$t('dict.dictionaryName')" v-model="queryParam.dictName"></j-input>
+              <j-input :placeholder="$t('pleaseEnter')+$t('dict.dictionaryName')"
+                       v-model="queryParam.dictName"></j-input>
             </a-form-item>
           </a-col>
-          <a-col :md="6" :sm="12">
+          <a-col :md="7" :sm="8">
             <a-form-item :label="$t('dict.dictionaryNumber')" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
-              <j-input :placeholder="$t('pleaseEnter')+$t('dict.dictionaryNumber')" v-model="queryParam.dictCode"></j-input>
+              <j-input :placeholder="$t('pleaseEnter')+$t('dict.dictionaryNumber')"
+                       v-model="queryParam.dictCode"></j-input>
             </a-form-item>
           </a-col>
-          <div style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
-            <a-button type="primary" @click="searchQuery" icon="search">{{ $t('query') }}</a-button>
-            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('reset') }}</a-button>
+          <div style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
+            <a-col :md="7" :sm="8">
+              <a-button type="primary" @click="searchQuery" icon="search">{{ $t('query') }}</a-button>
+              <a-button type="primary" @click="searchReset" ghost icon="reload" style="margin-left: 8px">{{ $t('reset')
+                }}
+              </a-button>
+            </a-col>
           </div>
         </a-row>
       </a-form>
-
-      <div class="table-operator" style="border-top: 5px">
-        <a-button @click="handleAdd" type="primary" icon="plus">{{ $t('add') }}</a-button>
-        <a-button type="primary" icon="download" @click="handleExportXls($t('dict.dictInfo'))">{{ $t('export') }}</a-button>
-        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
-          <a-button type="primary" icon="import">{{ $t('import') }}</a-button>
-        </a-upload>
-        <a-button type="primary" icon="sync" @click="refleshCache()">{{ $t('dict.refreshCache') }}</a-button>
-
-        <a-button type="primary" icon="hdd" @click="openDeleteList">{{ $t('recycleBin') }}</a-button>
-      </div>
-
-      <j-table
-        rowKey="id"
-        can-drag
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="ipagination"
-        :scroll="{x: '100%', y: yScrollHeight}"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        @change="handleTableChange"
-      >
-        <div slot="action" class="table-action" slot-scope="{text, record}">
-          <a class="action-dict" @click="editDictItem(record)">{{ $t('system.tag.dictionaryConfiguration') }}</a>
-          <a class="action-edit" v-if="canOpeFlag || record.isReadOnly === 0" @click="handleEdit(record)" v-has="'sys:dict:operation'">{{ $t('edit') }}</a>
-          <a class="action-delete" v-if="canOpeFlag || record.isReadOnly === 0" @click="handleDelete(record.id)" v-has="'sys:dict:operation'">{{ $t('delete') }}</a>
-        </div>
-      </j-table>
     </div>
+    <div class="table-operator" style="border-top: 5px">
+      <a-button @click="handleAdd" type="primary" icon="plus" v-has="'sys:dict:operation'">{{ $t('add') }}</a-button>
+      <a-button type="primary" icon="download" ghost @click="handleExportXls($t('dict.dictInfo'))"
+                v-has="'sys:dict:operation'">{{ $t('export') }}
+      </a-button>
+      <a-upload v-has="'sys:dict:operation'" name="file" :showUploadList="false" :multiple="false"
+                :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+        <a-button type="primary" icon="import" ghost>{{ $t('import') }}</a-button>
+      </a-upload>
+      <a-button type="primary" icon="sync" ghost v-has="'sys:dict:operation'" @click="refleshCache()">
+        {{ $t('dict.refreshCache') }}
+      </a-button>
+
+      <a-button type="primary" icon="hdd" ghost @click="openDeleteList">{{ $t('recycleBin') }}</a-button>
+    </div>
+
+    <j-table
+      rowKey="id"
+      can-drag
+      :columns="columns"
+      :dataSource="dataSource"
+      :pagination="ipagination"
+      :scroll="{x: '100%', y: yScrollHeight}"
+      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+      :operation-list="operationList"
+      @change="handleTableChange"
+      @operationClick="operationClick"
+    >
+    </j-table>
+
     <dict-modal ref="modalForm" @ok="modalFormOk"></dict-modal>  <!-- 字典类型 -->
     <dict-item-list v-show="false" ref="dictItemList"></dict-item-list>
     <dict-delete-list ref="dictDeleteList" @refresh="() =>loadData()"></dict-delete-list>
@@ -67,6 +75,7 @@ import { getAction } from '@/api/manage'
 import { UI_CACHE_DB_DICT_DATA } from '@/store/mutation-types'
 import Vue from 'vue'
 import JTable from '../../components/jero/JTable'
+import { IsReadOnlyEnums } from '../../enums/commonEnums'
 
 export default {
   name: 'DictList',
@@ -146,7 +155,32 @@ export default {
         importExcelUrl: 'sys/dict/importExcel',
         refleshCache: 'sys/dict/refleshCache',
         queryAllDictItems: 'sys/dict/queryAllDictItems'
-      }
+      },
+      operationList: [
+        // 字典配置
+        {
+          text: this.$t('system.tag.dictionaryConfiguration'),
+          clickEvent: 'editDictItem'
+        },
+        // 编辑
+        {
+          text: this.$t('edit'),
+          clickEvent: 'handleEdit',
+          has: 'sys:dict:operation',
+          show: (record) => {
+            return (this.canOpeFlag || record.isReadOnly === IsReadOnlyEnums.configurable.value)
+          }
+        },
+        // 删除
+        {
+          text: this.$t('delete'),
+          clickEvent: 'handleDelete',
+          has: 'sys:dict:operation',
+          show: (record) => {
+            return (this.canOpeFlag || record.isReadOnly === IsReadOnlyEnums.configurable.value)
+          }
+        }
+      ]
     }
   },
   computed: {

src/views/system/modules/DictModal.vue

@@ -128,13 +128,13 @@ export default {
           const formData = Object.assign({}, this.model)
           if (!this.model.id) {
             obj = addDict
+            // 设置为非固定字段--默认可以编辑
+            formData.isReadOnly = 0
           } else {
             obj = editDict
           }
           // 重要，设置为数据字典内容
           formData.isTagDict = 0
-          // 设置为非固定字段--默认可以编辑
-          formData.isReadOnly = 0
           obj(formData).then((res) => {
             if (res.success) {
               that.$message.success(res.message)

src/views/system/tags/modules/AreaModal.vue

@@ -14,14 +14,10 @@
     @cancel="handleCancel">
     <a-spin :spinning="confirmLoading">
       <div class="table-operator">
-        <div class="operator-text" @click="handleAdd" v-has="'area:add'">
-          <a-icon type="plus"  />
-          {{$t('add')}}
-        </div>
-        <div class="operator-text" @click="batchDel">
-          <a-icon type="delete" />
-          {{ $t('batchDelete') }}
-        </div>
+        <!--新增-->
+        <a-button icon="plus" type="primary" @click="handleAdd" v-has="'area:add'">{{ $t('add') }}</a-button>
+        <!--批量删除-->
+        <a-button type="primary" icon="delete" ghost @click="batchDel" v-has="'area:delete'">{{ $t('batchDelete') }}</a-button>
       </div>
 
       <j-table
@@ -36,13 +32,10 @@
         :loading="loading"
         :scroll="{x: '100%', y: yScrollHeight}"
         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        @change="handleTableChange">
-        <div slot="action" class="table-action"  slot-scope="{text, record}">
-          <a class="action-edit" @click="handleEdit(record)" v-has="'area:edit'"
-          >{{ $t('edit') }}</a>
-          <a class="table-del"  @click="handleDelete(record.id)"  v-has="'area:delete'"
-          >{{ $t('delete') }}</a>
-        </div>
+        :operation-list="operationList"
+        @change="handleTableChange"
+        @operationClick="operationClick"
+      >
       </j-table>
     </a-spin>
     <!--新增表单-->
@@ -129,6 +122,20 @@ export default {
         column: 'sort',
         order: 'ascend'
       },
+      operationList: [
+        // 编辑
+        {
+          text: this.$t('edit'),
+          clickEvent: 'handleEdit',
+          has: 'area:edit'
+        },
+        // 删除
+        {
+          text: this.$t('delete'),
+          clickEvent: 'handleDelete',
+          has: 'area:delete'
+        }
+      ],
       disableMixinCreated: true // 默认不加载数据
     }
   },

src/views/system/tags/modules/TagContentDictListDrawer.vue

@@ -22,23 +22,17 @@
               </a-form-item>
             </a-col>
             <div style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
-              <a-button class="box-button" @click="searchReset">{{ $t('reset') }}</a-button>
-              <a-button class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">
-                {{ $t('query') }}
-              </a-button>
+              <a-button icon="search" class="box-button" style="margin-left: 8px" type="primary" @click="searchQuery">{{ $t('query') }}</a-button>
+              <a-button icon="reload" class="box-button" @click="searchReset">{{ $t('reset') }}</a-button>
             </div>
           </a-row>
         </a-form>
       </div>
       <div class="table-operator">
-        <div class="operator-text" v-if="record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value" @click="handleAdd" v-has="'sys:dict:operation'">
-          <a-icon type="plus" />
-          {{ $t('newlyAdded') }}
-        </div>
-        <div class="operator-text" v-if="record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value" @click="batchDel" v-has="'sys:dict:operation'">
-          <a-icon type="delete" />
-          {{ $t('batchDelete') }}
-        </div>
+        <!--新增-->
+        <a-button icon="plus" type="primary"  v-if="record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value" @click="handleAdd" v-has="'sys:dict:operation'">{{ $t('newlyAdded') }}</a-button>
+        <!--批量删除-->
+        <a-button type="primary" icon="delete" ghost v-if="record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value" @click="batchDel" v-has="'sys:dict:operation'">{{ $t('batchDelete') }}</a-button>
       </div>
 
       <j-table
@@ -54,9 +48,11 @@
         :loading="loading"
         :scroll="{x: '100%', y: yScrollHeight}"
         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        @change="handleTableChange">
+        @change="handleTableChange"
+      >
         <div slot="action" class="table-action" slot-scope="{text, record}">
           <a class="action-edit" v-if="record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value" @click="handleEdit(record)" v-has="'sys:dict:operation'">{{ $t('edit') }}</a>
+          <a-divider type="vertical" v-if="record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value" @click="handleDelete(record.id)" v-has="'sys:dict:operation'"/>
           <a class="table-del" v-if="record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value" @click="handleDelete(record.id)" v-has="'sys:dict:operation'">{{ $t('delete') }}</a>
         </div>
       </j-table>

src/views/system/tags/pages/ClauseSplittingList.vue

@@ -19,14 +19,10 @@
     </a-form>
   </div>
   <div class="table-operator">
-    <div class="operator-text" @click="handleAdd" v-has="'tag:add'">
-      <a-icon type="plus" />
-      {{ $t('newlyAdded') }}
-    </div>
-    <div class="operator-text" @click="batchDel" v-has="'tag:logicDeleteBatch'">
-      <a-icon type="delete" />
-      {{ $t('batchDelete') }}
-    </div>
+    <!--新增-->
+    <a-button icon="plus" type="primary" @click="handleAdd" v-has="'tag:add'">{{ $t('newlyAdded') }}</a-button>
+    <!--批量删除-->
+    <a-button type="primary" icon="delete" ghost @click="batchDel" v-has="'tag:logicDeleteBatch'">{{ $t('batchDelete') }}</a-button>
   </div>
 
   <j-table
@@ -41,13 +37,10 @@
     :loading="loading"
     :scroll="{x: '100%', y: yScrollHeight}"
     :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-    @change="handleTableChange">
-    <div slot="action" class="table-action"  slot-scope="{text, record}">
-      <a class="action-edit" @click="handleEdit(record)" v-if="canOpeFlag || record.isReadOnly===0" v-has="'tag:edit'"
-      >{{ $t('edit') }}</a>
-      <a class="table-del"  @click="handleDelete(record.id)" v-has="'tag:logicDelete'" v-if="canOpeFlag || (record.isReadOnly===2 || record.isReadOnly===0)"
-      >{{ $t('delete') }}</a>
-    </div>
+    :operation-list="operationList"
+    @change="handleTableChange"
+    @operationClick="operationClick"
+  >
   </j-table>
   <clause-splitting-drawer ref="modalForm" v-bind="$props" @ok="modalFormOk"></clause-splitting-drawer>
 </div>
@@ -59,6 +52,7 @@ import '@assets/less/common.less'
 import ClauseSplittingDrawer from '../modules/ClauseSplittingDrawer'
 import { SimpleListMixin } from '../../../../mixins/SimpleListMixin'
 import JTable from '../../../../components/jero/JTable'
+import { IsReadOnlyEnums } from '../../../../enums/commonEnums'
 
 export default {
   name: 'ClauseSplittingList',
@@ -133,7 +127,27 @@ export default {
           width: 170
         }
       ],
-      canOpeFlag: process.env.VUE_APP_TAG_FLAG === '0' // 是否可以操作编辑和删除，开发环境可以
+      canOpeFlag: process.env.VUE_APP_TAG_FLAG === '0', // 是否可以操作编辑和删除，开发环境可以
+      operationList: [
+        // 编辑
+        {
+          text: this.$t('edit'),
+          clickEvent: 'handleEdit',
+          has: 'tag:edit',
+          show: (record) => {
+            return (this.canOpeFlag || record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value)
+          }
+        },
+        // 删除
+        {
+          text: this.$t('delete'),
+          clickEvent: 'handleDelete',
+          has: 'tag:logicDelete',
+          show: (record) => {
+            return (this.canOpeFlag || record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value)
+          }
+        }
+      ]
     }
   }
 }

src/views/system/tags/pages/StandardList.vue

@@ -15,7 +15,7 @@
             <a-form-item :label="$t('system.tag.showArea')" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
               <a-select class="box-input" v-model="queryParam.showArea"
                         :placeholder="$t('pleaseSelect') + $t('system.tag.showArea')">
-                <a-select-option :value="item.id" v-for="item in areasArr" :key="item">{{ item.showArea }}
+                <a-select-option :value="item.id" v-for="item in areasArr" :key="item.id">{{ item.showArea }}
                 </a-select-option>
               </a-select>
             </a-form-item>
@@ -30,19 +30,12 @@
       </a-form>
     </div>
     <div class="table-operator">
-      <div class="operator-text" @click="handleAdd" v-has="'tag:add'">
-        <a-icon type="plus" />
-        {{ $t('newlyAdded') }}
-      </div>
+      <!--新增-->
+      <a-button icon="plus" type="primary" @click="handleAdd" v-has="'tag:add'">{{ $t('newlyAdded') }}</a-button>
       <!--展示区域管理-->
-      <div class="operator-text" @click="handleShow" v-has="'tag:area:list'">
-        <a-icon type="unordered-list" />
-        {{ $t('system.tag.exhibitionAreaManagement') }}
-      </div>
-      <div class="operator-text" @click="batchDel" v-has="'tag:logicDeleteBatch'">
-        <a-icon type="delete" />
-        {{ $t('batchDelete') }}
-      </div>
+      <a-button icon="unordered-list" type="primary" ghost @click="handleShow" v-has="'tag:area:list'">{{ $t('system.tag.exhibitionAreaManagement') }}</a-button>
+      <!--批量删除-->
+      <a-button type="primary" icon="delete" ghost @click="batchDel" v-has="'tag:logicDeleteBatch'">{{ $t('batchDelete') }}</a-button>
     </div>
 
     <div>
@@ -55,15 +48,10 @@
         :pagination="ipagination"
         :scroll="{x: '100%', y: yScrollHeight}"
         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        :operation-list="operationList"
         @change="handleTableChange"
+        @operationClick="operationClick"
       >
-        <!--todo 需要查看下是否有这个字段，并且看一下判断是否必然-->
-        <div slot="action" class="table-action" slot-scope="{text, record}">
-          <a class="action-edit" @click="handleEdit(record)" v-if="canOpeFlag || record.isReadOnly===0" v-has="'tag:edit'"
-          >{{ $t('edit') }}</a>
-          <a class="table-del" v-if="canOpeFlag || (record.isReadOnly===2 || record.isReadOnly===0)" v-has="'tag:logicDelete'" @click="handleDelete(record.id)"
-          >{{ $t('delete') }}</a>
-        </div>
       </j-table>
     </div>
     <!--新增字段-->
@@ -81,6 +69,7 @@ import StandardDrawer from '../modules/StandardDrawer'
 import AreaModal from '../modules/AreaModal'
 import { SimpleListMixin } from '../../../../mixins/SimpleListMixin'
 import JTable from '../../../../components/jero/JTable'
+import { IsReadOnlyEnums } from '../../../../enums/commonEnums'
 
 export default {
   name: 'StandardList',
@@ -119,6 +108,7 @@ export default {
         column: 'orderNum',
         order: 'asc'
       },
+      canOpeFlag: process.env.VUE_APP_TAG_FLAG === '0', // 是否可以操作编辑和删除，开发环境可以
       columns: [
         {
           title: this.$t('system.tag.attributeName'),
@@ -164,7 +154,26 @@ export default {
           width: 150
         }
       ],
-      canOpeFlag: process.env.VUE_APP_TAG_FLAG === '0' // 是否可以操作编辑和删除，开发环境可以
+      operationList: [
+        // 编辑
+        {
+          text: this.$t('edit'),
+          clickEvent: 'handleEdit',
+          has: 'tag:edit',
+          show: (record) => {
+            return (this.canOpeFlag || record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value)
+          }
+        },
+        // 删除
+        {
+          text: this.$t('delete'),
+          clickEvent: 'handleDelete',
+          has: 'tag:logicDelete',
+          show: (record) => {
+            return (this.canOpeFlag || record.isReadOnly === IsReadOnlyEnums.configurable.value || record.isReadOnly === IsReadOnlyEnums.subConfigurable.value)
+          }
+        }
+      ]
     }
   },
   methods: {

src/views/system/tags/pages/TagContent.vue

@@ -25,21 +25,12 @@
       </a-form>
     </div>
     <div class="table-operator">
-      <!--v-has="'dict:add'"-->
-      <div class="operator-text" @click="handleAdd" v-has="'sys:dict:operation'">
-        <a-icon type="plus" />
-        {{ $t('newlyAdded') }}
-      </div>
+      <!--新增-->
+      <a-button icon="plus" type="primary" @click="handleAdd" v-has="'sys:dict:operation'">{{ $t('newlyAdded') }}</a-button>
       <!--刷新缓存-->
-      <div class="operator-text" @click="refreshCache" v-has="'sys:dict:operation'">
-        <a-icon type="sync" />
-        {{ $t('dict.refreshCache') }}
-      </div>
-      <!--v-has="'dict:logicDeleteBatch'"-->
-      <div class="operator-text" @click="batchDel" v-has="'sys:dict:operation'">
-        <a-icon type="delete" />
-        {{ $t('batchDelete') }}
-      </div>
+      <a-button icon="sync" type="primary" ghost @click="refreshCache" v-has="'sys:dict:operation'">{{ $t('dict.refreshCache') }}</a-button>
+      <!--批量删除-->
+      <a-button type="primary" icon="delete" ghost @click="batchDel" v-has="'sys:dict:operation'">{{ $t('batchDelete') }}</a-button>
     </div>
 
     <j-table
@@ -52,13 +43,10 @@
       :columns="columns"
       :scroll="{x: '100%', y: yScrollHeight}"
       :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+      :operation-list="operationList"
       @change="handleTableChange"
+      @operationClick="operationClick"
     >
-      <div slot="action" class="table-action"  slot-scope="{text, record}">
-        <a class="action-dict" @click="editDictItem(record)">{{ $t('system.tag.dictionaryConfiguration') }}</a>
-        <a class="action-edit" v-if="canOpeFlag || record.isReadOnly === IsReadOnlyEnums.configurable.value" @click="handleEdit(record)" v-has="'sys:dict:operation'">{{ $t('edit') }}</a>
-        <a class="action-delete" v-if="canOpeFlag || record.isReadOnly === IsReadOnlyEnums.configurable.value" @click="handleDelete(record.id)" v-has="'sys:dict:operation'">{{ $t('delete') }}</a>
-      </div>
     </j-table>
 
     <!-- 新增、编辑 -->
@@ -129,7 +117,7 @@ export default {
           title: this.$t('operation'),
           scopedSlots: { customRender: 'action' },
           align: 'center',
-          width: 170
+          width: 100
         }
       ],
       canOpeFlag: process.env.VUE_APP_TAG_FLAG === '0', // 是否可以操作编辑和删除，开发环境可以
@@ -149,7 +137,32 @@ export default {
       // 增加其他的查询条件
       filters: {
         isTagDict: 1 // 是否为标签内容（1是 0否）
-      }
+      },
+      operationList: [
+        // 字典配置
+        {
+          text: this.$t('system.tag.dictionaryConfiguration'),
+          clickEvent: 'editDictItem'
+        },
+        // 编辑
+        {
+          text: this.$t('edit'),
+          clickEvent: 'handleEdit',
+          has: 'sys:dict:operation',
+          show: (record) => {
+            return (this.canOpeFlag || record.isReadOnly === IsReadOnlyEnums.configurable.value)
+          }
+        },
+        // 删除
+        {
+          text: this.$t('delete'),
+          clickEvent: 'handleDelete',
+          has: 'sys:dict:operation',
+          show: (record) => {
+            return (this.canOpeFlag || record.isReadOnly === IsReadOnlyEnums.configurable.value)
+          }
+        }
+      ]
     }
   },
   methods: {