Update机构和系统配置代码

Web/src/pages/system/config/form.vue

@@ -1,7 +1,17 @@
 <template>
+  <!-- 
+    普通编辑窗体
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
   <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
-    <div class="yo-form-group">
-      <a-form-model-item label="角色名" prop="name">
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <div class="yo-form-group">
+        <!-- 表单控件 -->
+        <!-- ... -->
+              <a-form-model-item label="角色名" prop="name">
         <a-input placeholder="请输入角色名" v-model="form.name" />
       </a-form-model-item>
       <a-form-model-item label="唯一编码" prop="code" :disabled="editDisabled">
@@ -33,35 +43,56 @@
       <a-form-model-item label="备注" prop="remark">
         <a-input placeholder="请输入备注" v-model="form.remark" />
       </a-form-model-item>
-    </div>
+      </div>
+    </a-spin>
   </a-form-model>
 </template>
 <script>
+/* 表单内容默认值 */
+const defaultForm = {
+  // editDisabled:false,
+  /* ... */
+};
+
 export default {
   data() {
     return {
-        editDisabled:false,
-    groupCode:[],
-      form: {
-        active: "N",
-      },
+      /** 表单数据 */
+      form: {},
+      /** 验证格式 */
       rules: {
         name: [{ required: true, message: "请输入应用名称" }],
         code: [{ required: true, message: "请输入唯一编码" }],
         sysFlag: [{ required: true, message: "请选择参数类型" }],
         groupCode: [{ required: true, message: "请选择所属分类" }],
         value: [{ required: true, message: "请输入参数值" }],
+        /* ... */
       },
+
+      /** 加载异步数据状态 */
+      loading: false,
+      editDisabled:false,
+      groupCode:[],
+      /** 其他成员属性 */
+      /* ... */
     };
   },
+
   methods: {
     /**
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record) {
-      this.form = this.$_.cloneDeep(record);
-      if(record.sysFlag == 'Y')
+    onFillData(params) {
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...defaultForm,
+        ...params.record,
+        /** 在此处添加其他默认数据转换 */
+        /* ... */
+      });
+     
+        if(this.form.sysFlag == 'Y')
       {
           this.editDisabled = true
       }else
@@ -70,12 +101,26 @@ export default {
       }
     },
 
-    async onInit() {
-      this.loading = true;
-      this.groupCode = await this.onLoadgroupCodeData();
-      this.loading = false;
-    },
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
 
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /* ... */
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
+    },
 
     /**
      * 必要的方法
@@ -84,17 +129,6 @@ export default {
     onValidate(callback) {
       this.$refs.form.validate(callback);
     },
-    
-    /**
-     * 
-     * 获取所属分类字典表的内容
-     */
-    
-    onLoadgroupCodeData() {
-      return this.$api.sysDictTypeDropDown({ code: 'consts_type' }).then(({ data }) => {
-        return data;
-      });
-    },
 
     /**
      * 必要的方法
@@ -102,11 +136,36 @@ export default {
      */
     onResetFields() {
       setTimeout(() => {
-        this.form = {};
         this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /* ... */
       }, 300);
     },
 
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit(params) {
+      this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      this.groupCode = await this.onLoadgroupCodeData();
+      /* ... */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    /* ... */
+    /**
+     * 
+     * 获取所属分类字典表的内容
+     */ 
+    onLoadgroupCodeData() {
+      return this.$api.sysDictTypeDropDown({ code: 'consts_type' }).then(({ data }) => {
+        return data;
+      });
+    },
   },
 };
 </script>