update 字典结构更改. 扩展值可编辑为json

Web/src/pages/system/dict/dictdata/index.vue

@@ -4,6 +4,7 @@
       :bordered="false"
       :columns="columns"
       :load-data="loadData"
+      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: (e) => selectedRowKeys = e  }"
       @query="onQuery"
       @resetQuery="onResetQuery"
       ref="table"
@@ -18,6 +19,16 @@
           <a-input placeholder="请输入字典值" v-model="query.code" />
         </a-form-model-item>
       </Auth>
+      <Auth auth="sysDictData:delete" slot="operator">
+        <a-popconfirm
+          :disabled="!selectedRowKeys.length"
+          @confirm="onDeleteBatch"
+          placement="bottomLeft"
+          title="是否确认删除"
+        >
+          <a-button :disabled="!selectedRowKeys.length">批量删除</a-button>
+        </a-popconfirm>
+      </Auth>
       <Auth auth="sysDictData:add" slot="footer">
         <a-button @click="onAddRow" block icon="plus">新增字典数据</a-button>
       </Auth>
@@ -29,7 +40,7 @@
         <a-input placeholder="请输入字典值" v-model="record.code" />
       </Auth>
       <Auth auth="sysDictData:edit" slot="extCode" slot-scope="text, record">
-        <a-input placeholder="请输入扩展值" v-model="record.extCode" />
+        <a @click="onOpen('ext-code-form', record)">编辑</a>
       </Auth>
       <Auth auth="sysDictData:edit" slot="sort" slot-scope="text, record">
         <a-input-number
@@ -68,20 +79,31 @@
         </yo-table-actions>
       </span>
     </yo-table>
+
+    <yo-modal-form :title="'编辑'" @ok="onSaveExtCode" ref="ext-code-form">
+      <form-body />
+    </yo-modal-form>
   </a-card>
 </template>
 <style scoped>
-.ant-card >>> .ant-table-footer {
-  background-color: transparent;
+.ant-card>>>.ant-table-footer {
   border-width: 1px 0 0 !important;
+  background-color: transparent;
 }
-.ant-card >>> .yo-table .ant-table-content .ant-table-body > table > .ant-table-thead > tr > th:last-child,
-.ant-card >>> .yo-table .ant-table-content .ant-table-body > table > .ant-table-tbody > tr > td:last-child {
+.ant-card>>>.yo-table .ant-table-content .ant-table-body>table>.ant-table-thead>tr>th:last-child,
+.ant-card>>>.yo-table .ant-table-content .ant-table-body>table>.ant-table-tbody>tr>td:last-child {
   border-right-width: 0 !important;
 }
+
 </style>
 <script>
+import FormBody from './form';
+
 export default {
+  components: {
+    FormBody,
+  },
+
   props: {
     type: {
       type: Object,
@@ -114,9 +136,9 @@ export default {
         {
           title: '扩展值',
           dataIndex: 'extCode',
-          sorter: true,
           scopedSlots: { customRender: 'extCode' },
-          width: '15%',
+          width: 100,
+          align: 'center',
         },
         {
           title: '排序',
@@ -139,6 +161,8 @@ export default {
           width: 80,
         },
       ],
+
+      selectedRowKeys: [],
     };
   },
   created() {
@@ -260,6 +284,13 @@ export default {
         });
     },
 
+    onDeleteBatch() {
+      this.$refs.table.onLoading();
+      this.$api.sysDictDataDeleteBatch(this.selectedRowKeys).then(({ success }) => {
+        this.onResult(success, '删除成功');
+      });
+    },
+
     onAddRow() {
       this.$refs.table.onAddRow({
         value: '',
@@ -305,6 +336,11 @@ export default {
         });
       }
     },
+
+    onSaveExtCode(record) {
+      const data = this.$refs.table.getData().find((p) => p.id === record.id);
+      data.extCode = record.extCode;
+    },
   },
 };
 </script>