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

@@ -0,0 +1,88 @@
+<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({
+          sysEmpParam: {
+            orgId: 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/editForm.vue

@@ -0,0 +1,75 @@
+<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

@@ -0,0 +1,279 @@
+<template>
+  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+    <a-spin :spinning="loading">
+      <a-icon slot="indicator" spin type="loading" />
+      <a-row :gutter="16">
+        <a-col :span="10">
+          <h3>基本信息</h3>
+          <div class="yo-form-group">
+            <a-form-model-item label="账号" prop="account">
+              <a-input placeholder="请输入账号" v-model="form.account" />
+            </a-form-model-item>
+            <a-form-model-item label="姓名" prop="name">
+              <a-input placeholder="请输入姓名" v-model="form.name" />
+            </a-form-model-item>
+            <template v-if="mode == 'add'">
+              <a-form-model-item label="密码" prop="password">
+                <a-input-password placeholder="请输入密码" v-model="form.password" />
+              </a-form-model-item>
+              <a-form-model-item label="确认密码" prop="confirm">
+                <a-input-password placeholder="请确认密码" v-model="form.confirm" />
+              </a-form-model-item>
+            </template>
+            <a-form-model-item label="昵称">
+              <a-input placeholder="请输入昵称" v-model="form.nickName" />
+            </a-form-model-item>
+            <a-form-model-item label="生日">
+              <a-date-picker
+                @change="(date) => form.birthday = date ? moment(date).format('YYYY-MM-DD') : undefined"
+                class="w-100-p"
+                placeholder="请选择生日"
+                v-model="form.birthday"
+              />
+            </a-form-model-item>
+            <a-form-model-item label="性别" prop="sex">
+              <a-radio-group v-model="form.sex">
+                <a-radio-button :value="1">
+                  <a-icon :style="{ color: '#1890ff' }" type="man" />男
+                </a-radio-button>
+                <a-radio-button :value="2">
+                  <a-icon :style="{ color: '#eb2f96' }" type="woman" />女
+                </a-radio-button>
+              </a-radio-group>
+            </a-form-model-item>
+            <a-form-model-item label="邮箱" prop="email">
+              <a-input placeholder="请输入邮箱" v-model="form.email" />
+            </a-form-model-item>
+            <a-form-model-item label="手机号" prop="phone">
+              <a-input placeholder="请输入手机号" v-model="form.phone" />
+            </a-form-model-item>
+            <a-form-model-item label="电话" prop="tel">
+              <a-input placeholder="请输入电话" v-model="form.tel" />
+            </a-form-model-item>
+          </div>
+        </a-col>
+        <a-col :span="14">
+          <h3>员工信息</h3>
+          <div class="yo-form-group">
+            <a-form-model-item label="所属组织机构" prop="sysEmpParam.orgId">
+              <a-tree-select
+                :tree-data="orgData"
+                placeholder="请选择所属组织机构"
+                treeDefaultExpandAll
+                v-model="form.sysEmpParam.orgId"
+              />
+            </a-form-model-item>
+            <a-form-model-item label="工号">
+              <a-input placeholder="请输入工号" v-model="form.sysEmpParam.jobNum" />
+            </a-form-model-item>
+            <a-form-model-item label="职位信息" prop="sysEmpParam.posIdList">
+              <a-select mode="multiple" placeholder="请选择职位信息" v-model="form.sysEmpParam.posIdList">
+                <a-select-option
+                  :key="i"
+                  :value="item.id"
+                  v-for="(item, i) in posData"
+                >{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </div>
+          <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"
+                :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>
+        </a-col>
+      </a-row>
+    </a-spin>
+  </a-form-model>
+</template>
+<script>
+import moment from 'moment';
+
+const validateToNextPassword = (rule, value, callback) => {
+  callback();
+};
+const compareToFirstPassword = (rule, value, callback) => {
+  callback();
+};
+
+export default {
+  props: ['mode'],
+
+  data() {
+    return {
+      form: {
+        sysEmpParam: {},
+      },
+      rules: {
+        account: [{ required: true, min: 5, message: '请输入至少五个字符的账号' }],
+        name: [{ required: true, message: '请输入姓名' }],
+        password: [
+          { required: true, min: 5, message: '请输入至少五个字符的密码' },
+          { validator: validateToNextPassword },
+        ],
+        confirm: [{ required: true, message: '请确认密码' }, { validator: compareToFirstPassword }],
+        sex: [{ required: true, message: '请选择性别' }],
+        phone: [{ required: true, message: '请输入手机号' }],
+        'sysEmpParam.orgId': [{ required: true, message: '请选择所属组织机构' }],
+        'sysEmpParam.posIdList': [{ required: true, message: '请选择职位信息' }],
+      },
+
+      loading: false,
+
+      orgData: [],
+      posData: [],
+
+      extColumns: [
+        {
+          title: '附属机构',
+          dataIndex: 'orgId',
+          width: '45%',
+          scopedSlots: { customRender: 'orgId' },
+        },
+        {
+          title: '附属岗位',
+          dataIndex: 'posId',
+          width: '45%',
+          scopedSlots: { customRender: 'posId' },
+        },
+        {
+          title: '操作',
+          key: 'action',
+          width: '70px',
+          scopedSlots: { customRender: 'action' },
+        },
+      ],
+    };
+  },
+  methods: {
+    moment,
+
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      const form = this.$_.cloneDeep(record);
+      // 日期特殊处理
+      if (form.birthday) {
+        form.birthday = moment(form.birthday).format('YYYY-MM-DD');
+      }
+      // 提交的时候是"param",而获取下来却是"info",在这里转换一下
+      if (form.sysEmpInfo) {
+        form.sysEmpParam = form.sysEmpInfo;
+        delete form.sysEmpInfo;
+      } else if (!form.sysEmpParam) {
+        form.sysEmpParam = {
+          extIds: [],
+        };
+      }
+      // 转换职位信息列表
+      if (form.sysEmpParam.positions) {
+        form.sysEmpParam.posIdList = form.sysEmpParam.positions.map((p) => p.posId);
+      }
+      // 附加信息
+      if (form.sysEmpParam.extOrgPos) {
+        form.sysEmpParam.extIds = form.sysEmpParam.extOrgPos.map((p, i) => {
+          return {
+            key: i,
+            orgId: p.orgId,
+            posId: p.posId,
+          };
+        });
+      }
+      this.form = form;
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.form = {
+          sysEmpParam: {},
+        };
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+
+    async onInit() {
+      this.loading = true;
+      this.orgData = await this.onLoadOrgData();
+      this.posData = await this.onLoadPosData();
+      this.loading = false;
+    },
+
+    onLoadOrgData() {
+      return this.$api.getOrgTree().then(({ data }) => {
+        return data;
+      });
+    },
+
+    onLoadPosData() {
+      return this.$api.sysPosList().then(({ data }) => {
+        return data;
+      });
+    },
+
+    onAddExtData() {
+      this.form.sysEmpParam.extIds.push({
+        key: this.form.sysEmpParam.extIds.length,
+        orgId: undefined,
+        posId: undefined,
+      });
+    },
+
+    onRemoveExtData(record) {
+      const ext = this.form.sysEmpParam.extIds,
+        remove = ext.find((p) => p.key === record.key),
+        index = ext.indexOf(remove);
+
+      ext.splice(index, 1);
+    },
+
+    onChangeExtData(value, record, type) {
+      record[type] = value;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,280 @@
+<template>
+  <yo-tree-layout :load-data="loadTreeData" @select="onSelect" default-expanded-keys>
+    <container>
+      <br />
+      <a-alert closable type="error">
+        <template slot="message">
+          后端bug:生日不填写,在保存时会默认写入0001-01-01
+          <br />权限问题,在这里需要用到组织架构以及职位的数据接口,所以必须配置该两项的菜单
+        </template>
+      </a-alert>
+      <br />
+      <a-alert closable type="warning">
+        <template slot="message">缺授权的两块功能</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-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-option
+                    :key="i"
+                    :value="item.code"
+                    v-for="(item, i) in codes.find(p => p.code === 'common_status').values"
+                  >{{ 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="onReset">重置</a-button>
+                </a-button-group>
+              </a-form-model-item>
+            </a-form-model>
+          </div>
+        </Auth>
+
+        <yo-list :load-data="loadData" item-layout="horizontal" ref="list" size="large">
+          <Auth auth="sysUser:add" slot="operator">
+            <a-button @click="onOpen('add-form')" icon="plus">新增用户</a-button>
+          </Auth>
+          <a-list-item key="record.id" slot="renderItem" slot-scope="record">
+            <Auth auth="sysUser:edit" slot="actions">
+              <a @click="onOpen('edit-form', record)">编辑</a>
+            </Auth>
+            <Auth auth="sysUser:delete" slot="actions">
+              <a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
+                <a>删除</a>
+              </a-popconfirm>
+            </Auth>
+            <Auth :auth="{ sysUser: [['grantRole'], ['grantData']] }" slot="actions">
+              <a-dropdown placement="bottomRight">
+                <a class="ant-dropdown-link">
+                  授权
+                  <a-icon type="down" />
+                </a>
+                <a-menu slot="overlay">
+                  <Auth auth="sysUser:grantRole">
+                    <a-menu-item>
+                      <a @click="onOpen('role-form', record)">授权角色</a>
+                    </a-menu-item>
+                  </Auth>
+                  <Auth auth="sysUser:grantData">
+                    <a-menu-item>
+                      <a @click="onOpen('org-form', record)">授权数据</a>
+                    </a-menu-item>
+                  </Auth>
+                </a-menu>
+              </a-dropdown>
+            </Auth>
+            <a-list-item-meta>
+              <div slot="title">{{ record.nickName || record.name }}</div>
+              <div slot="description">{{ record.account }}</div>
+              <a-avatar :size="48" :src="record.avatar" icon="user" shape="square" slot="avatar" />
+            </a-list-item-meta>
+            <div class="yo-list-content--h">
+              <div class="yo-list-content--h--item">
+                <span>性别</span>
+                <p>{{ bindCodeValue(record.sex, 'sex') }}</p>
+              </div>
+              <div class="yo-list-content--h--item">
+                <span>手机</span>
+                <p>{{ record.phone }}</p>
+              </div>
+              <Auth auth="sysUser:changeStatus">
+                <div class="yo-list-content--h--item">
+                  <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>
+          </a-list-item>
+        </yo-list>
+      </a-card>
+    </container>
+    <add-form @ok="onReloadData" ref="add-form" />
+    <edit-form @ok="onReloadData" ref="edit-form" />
+  </yo-tree-layout>
+</template>
+<script>
+import YoTreeLayout from '@/components/yoTreeLayout';
+import YoList from '@/components/yoList';
+
+import AddForm from './addForm';
+import EditForm from './editForm';
+
+export default {
+  components: {
+    YoTreeLayout,
+    YoList,
+    AddForm,
+    EditForm,
+  },
+
+  data() {
+    return {
+      query: {},
+      codes: [
+        {
+          code: 'sex',
+          values: [],
+        },
+        {
+          code: 'common_status',
+          values: [],
+        },
+      ],
+    };
+  },
+
+  created() {
+    this.onLoadCodes();
+  },
+
+  methods: {
+    /**
+     * 树形选择界面必要的方法
+     * 传给yo-table-layout以示意数据接口
+     */
+    loadTreeData() {
+      return this.$api.getOrgTree().then((res) => {
+        return res.data;
+      });
+    },
+
+    onSelect([id]) {
+      this.query = {
+        'sysEmpParam.orgId': id,
+      };
+      this.onQuery();
+    },
+
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .getUserPage({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.list.onReloadData(true);
+    },
+
+    onReset() {
+      Object.keys(this.query).forEach((p) => {
+        if (p !== 'sysEmpParam.orgId') {
+          this.query[p] = undefined;
+        }
+      });
+      this.onQuery();
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.list.onReloadData();
+    },
+
+    /**
+     * 加载字典数据时的必要方法
+     */
+    onLoadCodes() {
+      this.$api
+        .$queue([
+          this.$api.sysDictTypeDropDownWait({ code: 'sex' }),
+          this.$api.sysDictTypeDropDownWait({ code: 'common_status' }),
+        ])
+        .then(([sex, commonStatus]) => {
+          this.codes.find((p) => p.code === 'sex').values = sex.data;
+          this.codes.find((p) => p.code === 'common_status').values = commonStatus.data;
+        });
+    },
+    bindCodeValue(code, name) {
+      const c = this.codes.find((p) => p.code == name).values.find((p) => p.code == code);
+      if (c) {
+        return c.value;
+      }
+      return null;
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    onOpen(formName, record) {
+      this.$refs[formName].onOpen(record, this.query['sysEmpParam.orgId']);
+    },
+
+    onSetUserStatus(record, checked) {
+      this.$set(record, 'statusChanging', true);
+      this.$api
+        .sysUserChangeStatus({
+          id: record.id,
+          status: +!checked,
+        })
+        .then(({ success, message }) => {
+          if (success) {
+            this.$message.success('操作成功');
+            this.onReloadData();
+          } else {
+            this.$message.error(message);
+          }
+        });
+    },
+
+    onResetPassword(record) {
+      this.$api
+        .sysUserResetPwd({
+          id: record.id,
+        })
+        .then(({ success, message }) => {
+          if (success) {
+            this.$message.success('重置成功');
+          } else {
+            this.$message.error(message);
+          }
+        });
+    },
+
+    onDelete(record) {
+      this.$api.sysUserDelete(record).then(({ success, message }) => {
+        if (success) {
+          this.$message.success('删除成功');
+          this.onReloadData();
+        } else {
+          this.$message.error(message);
+        }
+      });
+    },
+  },
+};
+</script>