update 字典数据在表格中编辑

Web/src/components/yoTable/index.js

@@ -159,7 +159,18 @@ export default {
     onResetQuery() {
       this.$emit('resetQuery')
       this.$emit('reset-query')
-    }
+    },
+
+    onAddRow(row = {}) {
+      if (!this.data.find(p => !p.id))
+        this.data.push(row)
+    },
+
+    onDeleteRow(row) {
+      if (row && this.data.indexOf(row) > -1) {
+        this.data.splice(this.data.indexOf(row), 1)
+      }
+    },
   },
 
   render() {
@@ -171,7 +182,8 @@ export default {
       bordered: true,
       size: 'middle',
       rowKey: record => record.id || Math.random().toString(16).slice(2),
-      scroll: { x: 'max-content' }
+      scroll: { x: 'max-content' },
+      ...this.$attrs
     }
 
     const on = {

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

@@ -1,122 +0,0 @@
-<template>
-  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
-    <a-spin :spinning="loading">
-      <a-icon slot="indicator" spin type="loading" />
-      <div class="yo-form-group">
-        <!-- 表单控件 -->
-        <a-form-model-item label="文本" prop="value">
-          <a-input placeholder="请输入文本" v-model="form.value" />
-        </a-form-model-item>
-        <a-form-model-item label="字典值" prop="code">
-          <a-input placeholder="请输入字典值" v-model="form.code" />
-        </a-form-model-item>
-        <a-form-model-item label="排序" prop="sort">
-          <a-input-number class="w-100-p" placeholder="请输入排序" v-model="form.sort" />
-        </a-form-model-item>
-        <a-form-model-item label="备注" prop="remark">
-          <a-textarea placeholder="请输入备注" v-model="form.remark" />
-        </a-form-model-item>
-      </div>
-    </a-spin>
-  </a-form-model>
-</template>
-<script>
-const defaultForm = {
-  typeId: '',
-  sort: 100,
-};
-
-export default {
-  data() {
-    return {
-      /** 表单数据 */
-      form: {},
-      /** 验证格式 */
-      rules: {
-        value: [{ required: true, message: '请输入字典值' }],
-        code: [{ required: true, message: '请输入唯一编码' }],
-      },
-
-      /** 加载异步数据状态 */
-      loading: false,
-
-      /** 其他成员属性 */
-      /** ... */
-    };
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 在打开编辑页时允许填充数据
-     */
-    onFillData(params) {
-      /** 将默认数据覆盖到form */
-      this.form = this.$_.cloneDeep({
-        ...defaultForm,
-        ...params.record,
-        /** 在此处添加默认数据转换 */
-        /** ... */
-        typeId: params.typeId,
-      });
-    },
-
-    /**
-     * 必要方法
-     * 验证表单并获取表单数据
-     */
-    onGetData() {
-      return new Promise((reslove, reject) => {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            const record = this.$_.cloneDeep(this.form);
-
-            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
-            /** ... */
-
-            reslove(record);
-          } else {
-            reject();
-          }
-        });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 在外部窗口进行保存时调用表单验证
-     */
-    onValidate(callback) {
-      this.$refs.form.validate(callback);
-    },
-
-    /**
-     * 必要的方法
-     * 在外部窗口关闭或重置时对表单验证进行初始化
-     */
-    onResetFields() {
-      setTimeout(() => {
-        this.$refs.form.resetFields();
-
-        /** 在这里可以初始化当前组件中其他属性 */
-        /** ... */
-      }, 300);
-    },
-
-    /**
-     * 必要方法
-     * 加载当前表单中所需要的异步数据
-     */
-    async onInit() {
-      this.loading = true;
-      /** 可以在这里await获取一些异步数据 */
-      /** ...BEGIN */
-      /** ...END */
-      this.loading = false;
-    },
-
-    /** 当前组件的其他方法 */
-    /** ... */
-  },
-};
-</script>

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>