update 区域管理

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

@@ -0,0 +1,133 @@
+<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="levelType">
+          <a-select placeholder="请选择参数类型" v-model="form.levelType" :disabled="editDisabled">
+            <a-select-option :key="i" :value="item.code" v-for="(item, i) in levelType">{{ item.value }}</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <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">
+          <a-input placeholder="请输入参数编码" v-model="form.code" />
+        </a-form-model-item>
+        <a-form-model-item label="显示编码" prop="showCode">
+          <a-input placeholder="请输入显示编码" v-model="form.showCode" />
+        </a-form-model-item>
+        <a-form-model-item label="排序" prop="sort">
+          <a-input-number :max="1000" :min="0" class="w-100-p" placeholder="请输入排序" v-model="form.sort" />
+        </a-form-model-item>
+        <a-form-model-item label="备注" prop="note">
+          <a-textarea v-model="form.note" :rows="4" placeholder="请输入备注"></a-textarea>
+        </a-form-model-item>
+      </div>
+    </a-spin>
+  </a-form-model>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      /** 表单数据 */
+      form: {},
+      /** 验证格式 */
+      rules: {
+        levelType: [{ required: true, message: '请选择参数类型' }],
+        name: [{ required: true, message: '请输入参数名称' }],
+        code: [{ required: true, message: '请输入参数编码' }],
+        showCode: [{ required: true, message: '请输入显示编码' }],
+      },
+
+      /** 加载异步数据状态 */
+      loading: false,
+      /** 其他成员属性 */
+      levelType: [],
+      editDisabled: false,
+      /** ... */
+    };
+  },
+
+  methods: {
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...record,
+        /** 在此处添加默认数据转换 */
+        /** ... */
+        levelType: record.levelType.toString(),
+      });
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    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 */
+      this.levelType = await this.onLoadlevelTypeData();
+      /** ...END */
+      this.loading = false;
+    },
+
+    /** 当前组件的其他方法 */
+    onLoadlevelTypeData() {
+      return this.$api.sysDictTypeDropDown({ code: 'dic_areacode_type' }).then(({ data }) => {
+        return data;
+      });
+    },
+    /** ... */
+  },
+};
+</script>