ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 用户管理使用新的种子

Browse Source
This commit is contained in:
自带大佬气场
2021-05-09 21:26:19 +08:00
parent 76a74dd63f
commit eecc20e4e3
8 changed files with 309 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Web/src/assets/style/lib/list.less
View File

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

6
Web/src/pages/system/account/setting/info.vue
View File

@@ -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>

84
Web/src/pages/system/user/addForm.vue
View File

@@ -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>

4
Web/src/pages/system/user/dataForm.vue
View File

@@ -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();
});

75
Web/src/pages/system/user/editForm.vue
View File

@@ -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>

174
Web/src/pages/system/user/form.vue
View File

@@ -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;

242
Web/src/pages/system/user/index.vue
View File

@@ -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-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
: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">
<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 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)"
/>
</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,
EditForm,
FormBody,
RoleForm,
DataForm,
},
data() {
return {
api,
name: '用户',
/* 查询条件 */
query: {},
codes: [
{
code: 'sex',
values: [],
},
{
code: 'common_status',
values: [],
},
],
/* 表格字段 */
columns: [],
/* 字典编码储存格式 */
codes: {
sex: [],
common_status: [],
},
};
},
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,14 +237,12 @@ export default {
* 传给yo-table以示意数据接口及其参数和返回的数据结构
*/
loadData(params) {
return this.$api
.getUserPage({
...params,
...this.query,
})
.then((res) => {
return res.data;
});
return this.$api[api.page]({
...params,
...this.query,
}).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.codes.find((p) => p.code === 'sex').values = sex.data;
this.codes.find((p) => p.code === 'common_status').values = commonStatus.data;
});
this.$api
.$queue([
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(record, this.query['sysEmpParam.orgId']);
} catch {
console.warn('component open method not found');
this.$refs[formName].onOpen({
record,
orgId: this.query['sysEmpParam.orgId'],
/* 按需添加其他参数 */
/* ... */
});
},
/**
* 必要方法
* 可以用做一系列操作的公共回调,此方法中会重新加载当前列表
*/
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>

4
Web/src/pages/system/user/roleForm.vue
View File

@@ -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();
});