update 用户管理使用新的种子

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

@@ -1,4 +1,10 @@
 <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" />
@@ -33,11 +39,17 @@
             </a-form-model-item>
             <a-form-model-item label="性别" prop="sex">
               <a-radio-group v-model="form.sex">
+                <a-radio-button :value="0">
+                  <a-icon class="mr-xxs" type="stop" />
+                  <span>保密</span>
+                </a-radio-button>
                 <a-radio-button :value="1">
-                  <a-icon :style="{ color: '#1890ff' }" type="man" />男
+                  <a-icon :style="{ color: '#1890ff' }" class="mr-xxs" type="man" />
+                  <span>男</span>
                 </a-radio-button>
                 <a-radio-button :value="2">
-                  <a-icon :style="{ color: '#eb2f96' }" type="woman" />女
+                  <a-icon :style="{ color: '#eb2f96' }" class="mr-xxs" type="woman" />
+                  <span>女</span>
                 </a-radio-button>
               </a-radio-group>
             </a-form-model-item>
@@ -52,7 +64,7 @@
             </a-form-model-item>
           </div>
         </a-col>
-        <a-col :span="14">
+        <a-col :span="14" v-if="form.sysEmpParam">
           <h3 class="h3">员工信息</h3>
           <div class="yo-form-group">
             <a-form-model-item label="所属组织机构" prop="sysEmpParam.orgId">
@@ -78,42 +90,44 @@
             </a-form-model-item>
           </div>
           <h4 class="h4">附加信息</h4>
-          <a-table
-            :columns="extColumns"
-            :data-source="form.sysEmpParam.extIds"
-            :pagination="false"
-            size="small"
-          >
-            <template slot="footer">
-              <a-button @click="onAddExtData" block icon="plus" type="dashed">新增一项</a-button>
-            </template>
-            <template slot="orgId" slot-scope="text, record">
-              <a-tree-select
-                :default-value="text"
-                :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
-                :tree-data="orgData"
-                @change="value => onChangeExtData(value, record, 'orgId')"
-                placeholder="请选择附加组织机构"
-                tree-default-expand-all
-              />
-            </template>
-            <template slot="posId" slot-scope="text, record">
-              <a-select
-                :default-value="text"
-                @change="value => onChangeExtData(value, record, 'posId')"
-                placeholder="请选择附加职位信息"
-              >
-                <a-select-option
-                  :key="i"
-                  :value="item.id"
-                  v-for="(item, i) in posData"
-                >{{ item.name }}</a-select-option>
-              </a-select>
-            </template>
-            <template slot="action" slot-scope="text, record">
-              <a-button @click="onRemoveExtData(record)" size="small" type="danger">删除</a-button>
-            </template>
-          </a-table>
+          <div class="pl-md pr-md">
+            <a-table
+              :columns="extColumns"
+              :data-source="form.sysEmpParam.extIds"
+              :pagination="false"
+              size="small"
+            >
+              <template slot="footer">
+                <a-button @click="onAddExtData" block icon="plus" type="dashed">新增一项</a-button>
+              </template>
+              <template slot="orgId" slot-scope="text, record">
+                <a-tree-select
+                  :default-value="text"
+                  :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
+                  :tree-data="orgData"
+                  @change="value => onChangeExtData(value, record, 'orgId')"
+                  placeholder="请选择附加组织机构"
+                  tree-default-expand-all
+                />
+              </template>
+              <template slot="posId" slot-scope="text, record">
+                <a-select
+                  :default-value="text"
+                  @change="value => onChangeExtData(value, record, 'posId')"
+                  placeholder="请选择附加职位信息"
+                >
+                  <a-select-option
+                    :key="i"
+                    :value="item.id"
+                    v-for="(item, i) in posData"
+                  >{{ item.name }}</a-select-option>
+                </a-select>
+              </template>
+              <template slot="action" slot-scope="text, record">
+                <a-button @click="onRemoveExtData(record)" size="small" type="danger">删除</a-button>
+              </template>
+            </a-table>
+          </div>
         </a-col>
       </a-row>
     </a-spin>
@@ -127,15 +141,28 @@ const compareToFirstPassword = (rule, value, callback) => {
   callback();
 };
 
+/* 表单内容默认值 */
+const defaultForm = {
+  /* ... */
+  sex: 0,
+  sysEmpParam: {},
+};
+
 export default {
-  props: ['mode'],
+  props: {
+    mode: {
+      type: String,
+      default: 'edit',
+    },
+  },
 
   data() {
     return {
-      form: {
-        sysEmpParam: {},
-      },
+      /** 表单数据 */
+      form: {},
+      /** 验证格式 */
       rules: {
+        /* ... */
         account: [{ required: true, min: 5, message: '请输入至少五个字符的账号', trigger: 'blur' }],
         name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
         password: [
@@ -146,7 +173,6 @@ export default {
           { required: true, message: '请确认密码', trigger: 'blur' },
           { validator: compareToFirstPassword, trigger: 'blur' },
         ],
-        sex: [{ required: true, message: '请选择性别' }],
         phone: [
           {
             pattern: /^((13[0-9])|(14[5,7])|(15[^4,\\D])|(17[0,1,3,6-8])|(18[0-9])|(19[8,9])|(166))[0-9]{8}$/,
@@ -161,8 +187,11 @@ export default {
         'sysEmpParam.posIdList': [{ required: true, message: '请选择职位信息' }],
       },
 
+      /** 加载异步数据状态 */
       loading: false,
 
+      /** 其他成员属性 */
+      /* ... */
       orgData: [],
       posData: [],
 
@@ -188,13 +217,14 @@ export default {
       ],
     };
   },
+
   methods: {
     /**
      * 必要的方法
      * 在打开编辑页时允许填充数据
      */
-    onFillData(record, orgId) {
-      const form = this.$_.cloneDeep(record || {});
+    onFillData(params) {
+      const form = this.$_.cloneDeep(params.record || {});
       // 日期特殊处理
       if (form.birthday) {
         form.birthday = this.$moment(form.birthday).format('YYYY-MM-DD');
@@ -223,10 +253,38 @@ export default {
         });
       }
 
-      if (orgId) {
+      if (params.orgId) {
         form.sysEmpParam.orgId = orgId;
       }
-      this.form = form;
+
+      /** 将默认数据覆盖到form */
+      this.form = this.$_.cloneDeep({
+        ...defaultForm,
+        ...form,
+        /** 在此处添加其他默认数据转换 */
+        /* ... */
+      });
+    },
+
+    /**
+     * 必要方法
+     * 验证表单并获取表单数据
+     */
+    onGetData() {
+      return new Promise((reslove, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            const record = this.$_.cloneDeep(this.form);
+
+            /** 验证通过后可以对数据进行转换得到想要提交的格式 */
+            /* ... */
+
+            reslove(record);
+          } else {
+            reject();
+          }
+        });
+      });
     },
 
     /**
@@ -243,20 +301,32 @@ export default {
      */
     onResetFields() {
       setTimeout(() => {
-        this.form = {
-          sysEmpParam: {},
-        };
         this.$refs.form.resetFields();
+
+        /** 在这里可以初始化当前组件中其他属性 */
+        /* ... */
+        this.form = {
+          ...defaultForm,
+        };
       }, 300);
     },
 
-    async onInit() {
+    /**
+     * 必要方法
+     * 加载当前表单中所需要的异步数据
+     */
+    async onInit(params) {
       this.loading = true;
+      /** 可以在这里await获取一些异步数据 */
+      /* ... */
       this.orgData = await this.onLoadOrgData();
       this.posData = await this.onLoadPosData();
       this.loading = false;
     },
 
+    /** 当前组件的其他方法 */
+    /* ... */
+
     onLoadOrgData() {
       return this.$api.getOrgTree().then(({ data }) => {
         return data;