update

重新封装了表单窗体,支持关闭时变更检测;
优化模版代码及内部注释,更快速开发;
开发文档中的代码片段可以复制成用户片段模版

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

@@ -8,6 +8,7 @@
       ref="table"
     >
       <Auth auth="sysDictData:page" slot="query">
+        <!-- 此处添加查询表单控件 -->
         <a-form-model-item label="文本">
           <a-input placeholder="请输入文本" v-model="query.value" />
         </a-form-model-item>
@@ -36,18 +37,21 @@
       </span>
     </yo-table>
 
-    <add-form @ok="onReloadData" ref="add-form" />
-    <edit-form @ok="onReloadData" ref="edit-form" />
+    <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>
 <script>
-import AddForm from './addForm';
-import EditForm from './editForm';
+import FormBody from './form';
 
 export default {
   components: {
-    AddForm,
-    EditForm,
+    FormBody,
   },
   props: {
     type: {
@@ -181,7 +185,10 @@ export default {
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      this.$refs[formName].onOpen(record, this.type.id);
+      this.$refs[formName].onOpen({
+        typeId: this.type.id,
+        record,
+      });
     },
 
     /**