update 区域管理使用新种子

2021-05-06 13:25:34 +08:00
parent e519f1344e
commit 5bfc9f3f3f
4 changed files with 121 additions and 211 deletions
--- a/Web/src/pages/system/area/addForm.vue
+++ b/Web/src/pages/system/area/addForm.vue
@@ -1,72 +0,0 @@
-<template>
-  <a-modal :confirmLoading="confirmLoading" :visible="visible" @cancel="onCancel" @ok="onOk" class="yo-modal-form" title="新增区域编码">
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口
-     */
-    async onOpen() {
-      this.visible = true;
-      this.$nextTick(() => {
-        this.formBody.onInit();
-       
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .sysAreaAdd(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('新增成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>
--- a/Web/src/pages/system/area/editForm.vue
+++ b/Web/src/pages/system/area/editForm.vue
@@ -1,73 +0,0 @@
-<template>
-  <a-modal :confirmLoading="confirmLoading" :visible="visible" @cancel="onCancel" @ok="onOk" class="yo-modal-form" title="编辑区域编码">
-    <FormBody ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-      confirmLoading: false,
-      
-    };
-  },
-
-  computed: {
-    formBody() {
-      return this.$refs['form-body'];
-    },
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口,并填充外部传入的数据
-     */
-    onOpen(record) {
-      this.visible = true;
-      this.$nextTick(async () => {
-        await this.formBody.onInit();
-        this.formBody.onFillData(record);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onGetData().then((data) => {
-        this.confirmLoading = true;
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .sysAreaEdit(data)
-          .then(({ success }) => {
-            if (success) {
-              this.$message.success('编辑成功');
-              this.onCancel();
-              this.$emit('ok');
-            }
-          })
-          .finally(() => {
-            this.confirmLoading = false;
-          });
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>
--- a/Web/src/pages/system/area/form.vue
+++ b/Web/src/pages/system/area/form.vue
@@ -1,53 +1,78 @@
 <template>
+  <!-- 
+    普通编辑窗体
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
  <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 :disabled="editDisabled" placeholder="请选择参数类型" v-model="form.levelType">
+            <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="请输入参数编码" :disabled="exist" v-model="form.code" />
+        <a-form-model-item label="编码" prop="code">
+          <a-input :disabled="exist" placeholder="请输入参数编码" v-model="form.code" />
        </a-form-model-item>
        <a-form-model-item label="区域编码" prop="adCode">
          <a-input placeholder="请输入显示编码" v-model="form.adCode" />
        </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-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-textarea :rows="4" placeholder="请输入备注" v-model="form.note"></a-textarea>
        </a-form-model-item>
      </div>
    </a-spin>
  </a-form-model>
 </template>
 <script>
+/* 表单内容默认值 */
+const defaultForm = {
+  /* ... */
+};
+
 export default {
  data() {
    return {
      /** 表单数据 */
      form: {},
-      exist:false,
      /** 验证格式 */
      rules: {
+        /* ... */
        levelType: [{ required: true, message: '请选择参数类型' }],
        name: [{ required: true, message: '请输入参数名称' }],
        adCode: [{ required: true, message: '请输入参数编码' }],
        code: [{ required: true, message: '请输入显示编码' }],
      },
+
      /** 加载异步数据状态 */
      loading: false,
+
      /** 其他成员属性 */
+      /* ... */
+      exist: false,
      levelType: [],
      editDisabled: false,
-      /** ... */
    };
  },

@@ -56,14 +81,14 @@ export default {
     * 必要的方法
     * 在打开编辑页时允许填充数据
     */
-    onFillData(record) {
-      this.exist  = true;
+    onFillData(params) {
      /** 将默认数据覆盖到form */
      this.form = this.$_.cloneDeep({
-        ...record,
-        /** 在此处添加默认数据转换 */
-        /** ... */
-        levelType: record.levelType.toString(),
+        ...defaultForm,
+        ...params.record,
+        /** 在此处添加其他默认数据转换 */
+        /* ... */
+        levelType: params.record && params.record.levelType.toString(),
      });
    },

@@ -78,7 +103,7 @@ export default {
            const record = this.$_.cloneDeep(this.form);

            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
-            /** ... */
+            /* ... */

            reslove(record);
          } else {
@@ -105,7 +130,7 @@ export default {
        this.$refs.form.resetFields();

        /** 在这里可以初始化当前组件中其他属性 */
-        /** ... */
+        /* ... */
      }, 300);
    },

@@ -113,22 +138,21 @@ export default {
     * 必要方法
     * 加载当前表单中所需要的异步数据
     */
-    async onInit() {
+    async onInit(params) {
      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>
--- a/Web/src/pages/system/area/index.vue
+++ b/Web/src/pages/system/area/index.vue
@@ -1,32 +1,35 @@
 <template>
+  <!-- 
+    普通查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
  <container>
    <br />
    <a-card :bordered="false">
-      <Auth auth="sysArea:page">
-        <div class="yo-query-bar">
-          <a-form-model :model="query" layout="inline">
-            <!-- 此处添加查询表单控件 -->
-            <a-form-model-item label="参数名称">
-              <a-input placeholder="请输入参数名称" v-model="query.name" />
-            </a-form-model-item>
-            <a-form-model-item label="参数编码">
-              <a-input placeholder="请输入参数编码" v-model="query.code" />
-            </a-form-model-item>
-            <a-form-model-item>
-              <a-button-group>
-                <a-button @click="onQuery" type="primary">查询</a-button>
-                <a-button @click="onResetQuery">重置</a-button>
-              </a-button-group>
-            </a-form-model-item>
-          </a-form-model>
-        </div>
-      </Auth>
-
-      <yo-table :columns="columns" :load-data="loadData" ref="table">
+      <yo-table
+        :columns="columns"
+        :load-data="loadData"
+        @query="onQuery"
+        @resetQuery="onResetQuery"
+        ref="table"
+      >
+        <Auth auth="sysArea:page" slot="query">
+          <!-- 此处添加查询表单控件 -->
+          <!-- ... -->
+          <a-form-model-item label="参数名称">
+            <a-input placeholder="请输入参数名称" v-model="query.name" />
+          </a-form-model-item>
+          <a-form-model-item label="参数编码">
+            <a-input placeholder="请输入参数编码" v-model="query.code" />
+          </a-form-model-item>
+        </Auth>
        <Auth auth="sysArea:add" slot="operator">
          <a-button @click="onOpen('add-form')" icon="plus">新增区域编码</a-button>
        </Auth>
        <!-- 格式化字段内容 -->
+        <!-- ... -->
        <span slot="levelType" slot-scope="text">{{ bindCodeValue(text, 'levelType') }}</span>
        <!-- 添加操作控件 -->
        <span slot="action" slot-scope="text, record">
@@ -40,27 +43,49 @@
              </a-popconfirm>
            </Auth>
            <!-- 可在此处添加其他操作控件 -->
+            <!-- ... -->
          </yo-table-actions>
        </span>
      </yo-table>
    </a-card>
-    <br />
-    <add-form @ok="onReloadData" ref="add-form" />
-    <edit-form @ok="onReloadData" ref="edit-form" />
+
+    <!-- 新增表单 -->
+    <yo-modal-form :action="$api[api.add]" :title="'新增' + name" @ok="onReloadData" ref="add-form">
+      <form-body />
+    </yo-modal-form>
+
+    <!-- 编辑表单 -->
+    <yo-modal-form :action="$api[api.edit]" :title="'编辑' + name" @ok="onReloadData" ref="edit-form">
+      <form-body />
+    </yo-modal-form>
  </container>
 </template>
 <script>
-import AddForm from './addForm';
-import EditForm from './editForm';
+import FormBody from './form';
+
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  page: 'sysAreaPage',
+  add: 'sysAreaAdd',
+  edit: 'sysAreaEdit',
+  delete: 'sysAreaDelete',
+  /* ... */
+};

 export default {
  components: {
-    AddForm,
-    EditForm,
+    FormBody,
  },
  data() {
    return {
+      api,
+
+      name: '区域编码',
+
+      /* 查询条件 */
      query: {},
+
+      /* 表格字段 */
      columns: [
        {
          title: '参数类型',
@@ -94,12 +119,15 @@ export default {
          sorter: true,
        },
      ],
+
+      /* 字典编码储存格式 */
      codes: {
        levelType: [],
      },
    };
  },
  created() {
+    /** 按需加载字典编码 */
    this.onLoadCodes();

    /** 根据权限添加操作列 */
@@ -119,17 +147,12 @@ export default {
     * 传给yo-table以示意数据接口及其参数和返回的数据结构
     */
    loadData(params) {
-      return (
-        this.$api
-          /** !!此处必须修改调用的接口方法 */
-          .sysAreaPage({
-            ...params,
-            ...this.query,
-          })
-          .then((res) => {
-            return res.data;
-          })
-      );
+      return this.$api[api.page]({
+        ...params,
+        ...this.query,
+      }).then((res) => {
+        return res.data;
+      });
    },

    /**
@@ -164,9 +187,15 @@ export default {
     * 如果不需要获取相应的字典数据,此方法内容可空
     */
    onLoadCodes() {
-      this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'dic_areacode_type' })]).then(([dic_areacode_type]) => {
-        this.codes.levelType = dic_areacode_type.data;
-      });
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownAwait({ code: 'dic_areacode_type' }),
+          /* ... */
+        ])
+        .then(([code1]) => {
+          this.codes.levelType = code1.data;
+          /* ... */
+        });
    },

    /**
@@ -186,7 +215,11 @@ export default {
     * 从列表页调用窗口的打开方法
     */
    onOpen(formName, record) {
-      this.$refs[formName].onOpen(record);
+      this.$refs[formName].onOpen({
+        record,
+        /* 按需添加其他参数 */
+        /* ... */
+      });
    },

    /**
@@ -206,9 +239,7 @@ export default {
     */
    onDelete(record) {
      this.$refs.table.onLoading();
-      this.$api
-        /** !!此处必须修改调用的接口方法 */
-        .sysAreaDelete(record)
+      this.$api[api.delete](record)
        .then(({ success }) => {
          this.onResult(success, '删除成功');
        })