update 用户管理使用新的种子

Web/src/assets/style/lib/list.less

@@ -8,7 +8,7 @@
     display: flex;
     align-items: center;
     &--item {
-      min-width: 100px;
+      min-width: 120px;
       margin-left: @padding-xl;
       >span {
         line-height: 20px;

Web/src/pages/system/account/setting/info.vue

@@ -79,15 +79,15 @@
         <a-form-model-item label="性别" prop="sex">
           <a-radio-group v-model="form.sex">
             <a-radio-button :value="0">
-              <a-icon type="stop" />
+              <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>

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

@@ -1,84 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    :width="1024"
-    @cancel="onCancel"
-    @ok="onOk"
-    title="新增应用"
-  >
-    <FormBody mode="add" 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, id) {
-      this.visible = true;
-      this.$nextTick(async () => {
-        await this.formBody.onInit();
-
-        // 获取外部选中的部门id
-        this.formBody.onFillData(record, id);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.formBody.onValidate((valid) => {
-        if (valid) {
-          this.confirmLoading = true;
-          this.$api
-            .sysUserAdd(this.formBody.form)
-            .then(({ success }) => {
-              if (success) {
-                this.$message.success('新增成功');
-                this.onCancel();
-                this.$emit('ok');
-              }
-            })
-            .finally(() => {
-              this.confirmLoading = false;
-            });
-        }
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.formBody.onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

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

@@ -65,9 +65,9 @@ export default {
      * 必要的方法
      * 从外部调用打开本窗口
      */
-    async onOpen(record) {
+    async onOpen(params) {
       this.visible = true;
-      this.id = record.id;
+      this.id = params.record.id;
       this.$nextTick(() => {
         this.onInit();
       });

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

@@ -1,75 +0,0 @@
-<template>
-  <a-modal
-    :confirmLoading="confirmLoading"
-    :visible="visible"
-    :width="1024"
-    @cancel="onCancel"
-    @ok="onOk"
-    title="编辑用户"
-  >
-    <FormBody mode="eidt" ref="form-body" />
-  </a-modal>
-</template>
-<script>
-import FormBody from './form';
-
-export default {
-  components: {
-    FormBody,
-  },
-  data() {
-    return {
-      visible: false,
-
-      confirmLoading: false,
-    };
-  },
-
-  methods: {
-    /**
-     * 必要的方法
-     * 从外部调用打开本窗口,并填充外部传入的数据
-     */
-    onOpen(record) {
-      this.visible = true;
-      this.$nextTick(async () => {
-        await this.$refs['form-body'].onInit();
-        this.$refs['form-body'].onFillData(record);
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 点击保存时的操作
-     */
-    onOk() {
-      this.$refs['form-body'].onValidate((valid) => {
-        if (valid) {
-          this.confirmLoading = true;
-          this.$api
-            .sysUserEdit(this.$refs['form-body'].form)
-            .then(({ success }) => {
-              if (success) {
-                this.$message.success('编辑成功');
-                this.onCancel();
-                this.$emit('ok');
-              }
-            })
-            .finally(() => {
-              this.confirmLoading = false;
-            });
-        }
-      });
-    },
-
-    /**
-     * 必要的方法
-     * 关闭窗口时的操作
-     */
-    onCancel() {
-      this.$refs['form-body'].onResetFields();
-      this.visible = false;
-    },
-  },
-};
-</script>

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,6 +90,7 @@
             </a-form-model-item>
           </div>
           <h4 class="h4">附加信息</h4>
+          <div class="pl-md pr-md">
             <a-table
               :columns="extColumns"
               :data-source="form.sysEmpParam.extIds"
@@ -114,6 +127,7 @@
                 <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) {
+    onFillData(params) {
-      const form = this.$_.cloneDeep(record || {});
+      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;

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

@@ -1,28 +1,41 @@
 <template>
-  <yo-tree-layout :load-data="loadTreeData" @select="onSelect" default-expanded-keys>
+  <!-- 
+    普通树查询表格
+    v 1.2
+    2021-04-30
+    Lufthafen
+  -->
+  <yo-tree-layout
+    :load-data="loadTreeData"
+    @select="onSelect"
+    default-expanded-keys
+    ref="tree-layout"
+  >
     <container>
-      <a-alert closable type="error">
-        <template slot="message">
-          后端bug:生日不填写,在保存时会默认写入0001-01-01
-          <br />权限问题,在这里需要用到组织架构以及职位的数据接口,所以必须配置该两项的菜单
-        </template>
-      </a-alert>
-      <br />
       <a-card :bordered="false">
         <Auth auth="sysUser:page">
           <div class="yo-query-bar">
-            <a-form-model :model="query" layout="inline">
+            <a-form-model :model="query" @submit.native.prevent layout="inline">
               <a-form-model-item label="关键词">
                 <a-input allow-clear placeholder="请输入姓名、账号、手机号" v-model="query.searchValue" />
               </a-form-model-item>
               <a-form-model-item label="状态">
-                <a-select :style="{ width: '170px' }" allow-clear placeholder="请选择状态" v-model="query.searchStatus">
+                <a-select
-                  <a-select-option :key="i" :value="item.code" v-for="(item, i) in codes.find((p) => p.code === 'common_status').values">{{ item.value }}</a-select-option>
+                  :style="{ width: '170px' }"
+                  allow-clear
+                  placeholder="请选择状态"
+                  v-model="query.searchStatus"
+                >
+                  <a-select-option
+                    :key="i"
+                    :value="item.code"
+                    v-for="(item, i) in codes.common_status"
+                  >{{ item.value }}</a-select-option>
                 </a-select>
               </a-form-model-item>
               <a-form-model-item>
                 <a-button-group>
-                  <a-button @click="onQuery" type="primary">查询</a-button>
+                  <a-button @click="onQuery" html-type="submit" type="primary">查询</a-button>
                   <a-button @click="onReset">重置</a-button>
                 </a-button-group>
               </a-form-model-item>
@@ -66,7 +79,14 @@
             <a-list-item-meta>
               <div slot="title">{{ record.nickName || record.name }}</div>
               <div slot="description">{{ record.account }}</div>
-              <yo-image :id="record.avatar" :size="48" icon="user" shape="square" slot="avatar" type="avatar" />
+              <yo-image
+                :id="record.avatar"
+                :size="48"
+                icon="user"
+                shape="square"
+                slot="avatar"
+                type="avatar"
+              />
             </a-list-item-meta>
             <div class="yo-list-content--h">
               <div class="yo-list-content--h--item">
@@ -75,11 +95,21 @@
               </div>
               <div class="yo-list-content--h--item">
                 <span>手机</span>
-                <p>{{ record.phone }}</p>
+                <p>{{ record.phone || '未设置' }}</p>
+              </div>
+              <div class="yo-list-content--h--item">
+                <span>邮箱</span>
+                <p>{{ record.email || '未设置' }}</p>
               </div>
               <Auth auth="sysUser:changeStatus">
-                <div class="yo-list-content--h--item">
+                <div class="yo-list-content--h--item text-center">
-                  <a-switch :checked="!record.status" :checked-children="bindCodeValue(0, 'common_status')" :loading="record.statusChanging" :un-checked-children="bindCodeValue(1, 'common_status')" @change="(checked) => onSetUserStatus(record, checked)" />
+                  <a-switch
+                    :checked="!record.status"
+                    :checked-children="bindCodeValue(0, 'common_status')"
+                    :loading="record.statusChanging"
+                    :un-checked-children="bindCodeValue(1, 'common_status')"
+                    @change="(checked) => onSetUserStatus(record, checked)"
+                  />
                 </div>
               </Auth>
             </div>
@@ -87,49 +117,96 @@
         </yo-list>
       </a-card>
     </container>
-    <add-form @ok="onReloadData" ref="add-form" />
+
-    <edit-form @ok="onReloadData" ref="edit-form" />
+    <!-- 新增表单 -->
+    <yo-modal-form
+      :action="$api[api.add]"
+      :title="'新增' + name"
+      :width="1024"
+      @ok="onReloadData"
+      ref="add-form"
+    >
+      <form-body mode="add" />
+    </yo-modal-form>
+
+    <!-- 编辑表单 -->
+    <yo-modal-form
+      :action="$api[api.edit]"
+      :title="'编辑' + name"
+      :width="1024"
+      @ok="onReloadData"
+      ref="edit-form"
+    >
+      <form-body mode="edit" />
+    </yo-modal-form>
+
     <role-form @ok="onReloadData" ref="role-form" />
     <data-form @ok="onReloadData" ref="data-form" />
   </yo-tree-layout>
 </template>
 <script>
+/* 需要引用YoTreeLayout组件 */
 import YoTreeLayout from '@/components/yoTreeLayout';
 import YoList from '@/components/yoList';
+import FormBody from './form';
 
-import AddForm from './addForm';
-import EditForm from './editForm';
 import RoleForm from './roleForm';
 import DataForm from './dataForm';
 
+/* 在此管理整个页面需要的接口名称 */
+const api = {
+  tree: 'getOrgTree',
+  page: 'getUserPage',
+  add: 'sysUserAdd',
+  edit: 'sysUserEdit',
+  delete: 'sysUserDelete',
+  /* ... */
+};
+
 export default {
   components: {
     YoTreeLayout,
     YoList,
-    AddForm,
+    FormBody,
-    EditForm,
     RoleForm,
     DataForm,
   },
 
   data() {
     return {
+      api,
+
+      name: '用户',
+
+      /* 查询条件 */
       query: {},
-      codes: [
+
-        {
+      /* 表格字段 */
-          code: 'sex',
+      columns: [],
-          values: [],
+
+      /* 字典编码储存格式 */
+      codes: {
+        sex: [],
+        common_status: [],
       },
-        {
-          code: 'common_status',
-          values: [],
-        },
-      ],
     };
   },
 
   created() {
     this.onLoadCodes();
+
+    /** 根据权限添加操作列 */
+    const flag = this.$auth({
+      sysUser: [['edit'], ['delete'], ['grantRole'], ['grantData']],
+    });
+    if (flag) {
+      this.columns.push({
+        title: '操作',
+        width: '150px',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' },
+      });
+    }
   },
 
   methods: {
@@ -138,12 +215,17 @@ export default {
      * 传给yo-table-layout以示意数据接口
      */
     loadTreeData() {
-      return this.$api.getOrgTree().then((res) => {
+      return this.$api[api.tree]().then((res) => {
         return res.data;
       });
     },
 
+    /**
+     * 树形选择界面必要的方法
+     * 选择树节点事件
+     */
     onSelect([id]) {
+      /** 在选择事件中可以对右侧表格添加父节点id的查询条件 */
       this.query = {
         'sysEmpParam.orgId': id,
       };
@@ -155,12 +237,10 @@ export default {
      * 传给yo-table以示意数据接口及其参数和返回的数据结构
      */
     loadData(params) {
-      return this.$api
+      return this.$api[api.page]({
-        .getUserPage({
         ...params,
         ...this.query,
-        })
+      }).then((res) => {
-        .then((res) => {
         return res.data;
       });
     },
@@ -173,9 +253,14 @@ export default {
       this.$refs.list.onReloadData(true);
     },
 
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
     onReset() {
+      /* 与普通查询页不同的是,这里的父节点参数不应该在重置后被清空 */
       Object.keys(this.query).forEach((p) => {
-        if (p !== 'sysEmpParam.orgId') {
+        if (p !== 'pid') {
           this.query[p] = undefined;
         }
       });
@@ -188,19 +273,34 @@ export default {
      */
     onReloadData() {
       this.$refs.list.onReloadData();
+      this.$refs['tree-layout'].onReloadData();
     },
 
     /**
-     * 加载字典数据时的必要方法
+     * 必要方法
+     * 加载字典数据
+     * 如果不需要获取相应的字典数据,此方法内容可空
      */
     onLoadCodes() {
-      this.$api.$queue([this.$api.sysDictTypeDropDownAwait({ code: 'sex' }), this.$api.sysDictTypeDropDownAwait({ code: 'common_status' })]).then(([sex, commonStatus]) => {
+      this.$api
-        this.codes.find((p) => p.code === 'sex').values = sex.data;
+        .$queue([
-        this.codes.find((p) => p.code === 'common_status').values = commonStatus.data;
+          this.$api.sysDictTypeDropDownAwait({ code: 'sex' }),
+          this.$api.sysDictTypeDropDownAwait({ code: 'common_status' }),
+          /* ... */
+        ])
+        .then(([code1, code2]) => {
+          this.codes.sex = code1.data;
+          this.codes.common_status = code2.data;
+          /* ... */
         });
     },
+
+    /**
+     * 必要方法
+     * 绑定数据字典值
+     */
     bindCodeValue(code, name) {
-      const c = this.codes.find((p) => p.code == name).values.find((p) => p.code == code);
+      const c = this.codes[name].find((p) => p.code == code);
       if (c) {
         return c.value;
       }
@@ -212,13 +312,40 @@ export default {
      * 从列表页调用窗口的打开方法
      */
     onOpen(formName, record) {
-      try {
+      this.$refs[formName].onOpen({
-        this.$refs[formName].onOpen(record, this.query['sysEmpParam.orgId']);
+        record,
-      } catch {
+        orgId: this.query['sysEmpParam.orgId'],
-        console.warn('component open method not found');
+        /* 按需添加其他参数 */
+        /* ... */
+      });
+    },
+
+    /**
+     * 必要方法
+     * 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
+     */
+    onResult(success, successMessage) {
+      if (success) {
+        this.$message.success(successMessage);
+        this.onReloadData();
       }
     },
 
+    /**
+     * 必要方法
+     * 删除时调用
+     */
+    onDelete(record) {
+      this.$refs.list.onLoading();
+      this.$api[api.delete](record)
+        .then(({ success }) => {
+          this.onResult(success, '删除成功');
+        })
+        .finally(() => {
+          this.$refs.list.onLoaded();
+        });
+    },
+
     onSetUserStatus(record, checked) {
       this.$set(record, 'statusChanging', true);
       this.$api
@@ -252,17 +379,6 @@ export default {
           }
         });
     },
-
-    onDelete(record) {
-      this.$api.sysUserDelete(record).then(({ success, message }) => {
-        if (success) {
-          this.$message.success('删除成功');
-          this.onReloadData();
-        } else {
-          this.$message.error(message);
-        }
-      });
-    },
   },
 };
 </script>

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

@@ -45,9 +45,9 @@ export default {
      * 必要的方法
      * 从外部调用打开本窗口
      */
-    async onOpen(record) {
+    async onOpen(params) {
       this.visible = true;
-      this.id = record.id;
+      this.id = params.record.id;
       this.$nextTick(() => {
         this.onInit();
       });