update 字典数据在表格中编辑

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

@@ -1,11 +1,13 @@
 <template>
   <a-card>
     <yo-table
+      :bordered="false"
       :columns="columns"
       :load-data="loadData"
       @query="onQuery"
       @resetQuery="onResetQuery"
       ref="table"
+      size="small"
     >
       <Auth auth="sysDictData:page" slot="query">
         <!-- 此处添加查询表单控件 -->
@@ -16,16 +18,35 @@
           <a-input placeholder="请输入字典值" v-model="query.code" />
         </a-form-model-item>
       </Auth>
-      <Auth auth="sysDictData:add" slot="operator">
-        <a-button @click="onOpen('add-form')" icon="plus">新增字典数据</a-button>
+      <Auth auth="sysDictData:add" slot="footer">
+        <a-button @click="onAddRow" block icon="plus">新增字典数据</a-button>
       </Auth>
       <!-- 格式化字段内容 -->
+      <Auth auth="sysDictData:edit" slot="value" slot-scope="text, record">
+        <a-input placeholder="请输入文本" v-model="record.value" />
+      </Auth>
+      <Auth auth="sysDictData:edit" slot="code" slot-scope="text, record">
+        <a-input placeholder="请输入字典值" v-model="record.code" />
+      </Auth>
+      <Auth auth="sysDictData:edit" slot="sort" slot-scope="text, record">
+        <a-input-number
+          :min="0"
+          :step="1"
+          class="w-100-p"
+          placeholder="请输入排序"
+          v-model="record.sort"
+        />
+      </Auth>
+      <Auth auth="sysDictData:edit" slot="remark" slot-scope="text, record">
+        <a-input placeholder="请输入备注" v-model="record.remark" />
+      </Auth>
+
       <span slot="status" slot-scope="text">{{ bindCodeValue(text, 'commonStatus') }}</span>
       <!-- 添加操作控件 -->
       <span slot="action" slot-scope="text, record">
-        <yo-table-actions>
+        <yo-table-actions v-if="record.id">
           <Auth auth="sysDictData:edit">
-            <a @click="onOpen('edit-form', record)">编辑</a>
+            <a @click="onSaveEdit(record)">保存编辑</a>
           </Auth>
           <Auth auth="sysDictData:delete">
             <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
@@ -34,25 +55,30 @@
           </Auth>
           <!-- 可在此处添加其他操作控件 -->
         </yo-table-actions>
+        <yo-table-actions v-else>
+          <Auth auth="sysDictData:add">
+            <a @click="onSaveAdd(record)">保存</a>
+          </Auth>
+          <Auth auth="sysDictData:add">
+            <a @click="onDeleteRow(record)">取消</a>
+          </Auth>
+        </yo-table-actions>
       </span>
     </yo-table>
-
-    <yo-modal-form :action="$api.sysDictDataAdd" @ok="onReloadData" ref="add-form" title="新增字典数据">
-      <form-body />
-    </yo-modal-form>
-
-    <yo-modal-form :action="$api.sysDictDataEdit" @ok="onReloadData" ref="edit-form" title="编辑字典数据">
-      <form-body />
-    </yo-modal-form>
   </a-card>
 </template>
+<style scoped>
+.ant-card >>> .ant-table-footer {
+  background-color: transparent;
+  border-width: 1px 0 0 !important;
+}
+.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,
@@ -72,28 +98,35 @@ export default {
           title: '文本',
           dataIndex: 'value',
           sorter: true,
+          scopedSlots: { customRender: 'value' },
+          width: '20%',
         },
         {
           title: '字典值',
           dataIndex: 'code',
           sorter: true,
+          scopedSlots: { customRender: 'code' },
+          width: '15%',
         },
         {
           title: '排序',
           dataIndex: 'sort',
           sorter: true,
+          scopedSlots: { customRender: 'sort' },
+          width: '15%',
         },
         {
           title: '备注',
           dataIndex: 'remark',
-          width: 200,
           sorter: true,
+          scopedSlots: { customRender: 'remark' },
         },
         {
           title: '状态',
           dataIndex: 'status',
           scopedSlots: { customRender: 'status' },
           sorter: true,
+          width: 80,
         },
       ],
     };
@@ -216,6 +249,52 @@ export default {
           this.onResult(success, '删除成功');
         });
     },
+
+    onAddRow() {
+      this.$refs.table.onAddRow({
+        value: '',
+        code: '',
+        sort: 100,
+        typeId: this.query.typeId,
+        remark: '',
+      });
+    },
+
+    onDeleteRow(record) {
+      this.$refs.table.onDeleteRow(record);
+    },
+
+    onValidate(record) {
+      if (!record.value) {
+        this.$message.error('请输入字典文本');
+        return false;
+      }
+
+      if (!record.code) {
+        this.$message.error('请输入字典值');
+        return false;
+      }
+
+      return true;
+    },
+
+    onSaveAdd(record) {
+      if (this.onValidate(record)) {
+        this.$refs.table.onLoading();
+        this.$api.sysDictDataAdd(record).then(({ success }) => {
+          this.onResult(success, '保存成功');
+        });
+      }
+    },
+
+    onSaveEdit(record) {
+      if (this.onValidate(record)) {
+        this.$refs.table.onLoading();
+        this.$api.sysDictDataEdit(record).then(({ success }) => {
+          this.onResult(success, '保存成功');
+        });
+      }
+    },
   },
 };
 </script>