This commit is contained in:
ky_sunl
2021-04-16 01:27:57 +00:00
parent 8b043c7131
commit 6d5d952892
31 changed files with 1267 additions and 87 deletions

View File

@@ -19,5 +19,7 @@
@import './lib/table.less';
@import './lib/form.less';
@import './lib/select.less';
@import './lib/dropdown.less';
@import './lib/tree-layout.less';
@import './theme/primary.less';
// @import './lib/font-weight.less';

View File

@@ -0,0 +1,6 @@
@import (reference) '~@/assets/style/extend.less';
.ant-dropdown-trigger {
.anticon-down {
transform: scaleY(.75);
}
}

View File

@@ -110,6 +110,11 @@
opacity: 1;
color: fade(darken(@primary-color, 38.2%), 61.8%);
}
.has-error {
.ant-form-explain {
color: @error-color;
}
}
// 上下布局
.yo-form--vertical {
display: block;

View File

@@ -76,7 +76,15 @@
}
.yo-table-actions {
display: inline-block;
>a {
color: darken(@primary-color, 20%);
vertical-align: middle;
&--inner {
display: flex;
align-items: center;
height: 18px;
>a {
color: darken(@primary-color, 20%);
}
}
}

View File

@@ -0,0 +1,24 @@
@import (reference) '~@/assets/style/extend.less';
.yo-tree-layout {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.ant-layout-sider {
background-color: @white;
.swiper-container {
position: absolute;
top: @layout-header-height - 20px;
left: 0;
bottom: 0;
width: 100%;
.swiper-slide {
height: auto;
min-height: 100%;
}
}
}
}

View File

@@ -203,59 +203,63 @@
}
}
}
.ant-layout-sider {
height: 100%;
background-color: @nav-background;
.ant-layout-sider-children {
display: flex;
flex-direction: column;
}
.logo {
font-size: @font-size-lg * 1.5;
font-weight: 500;
line-height: @layout-header-height + 10px;
z-index: 5;
display: flex;
overflow: hidden;
align-items: center;
flex: 0 0 @layout-header-height + 10px;
height: @layout-header-height + 10px;
padding: 0 @padding-md 0 @padding-lg;
color: @logo-color;
background-color: @nav-background;
box-shadow: @logo-box-shadow;
img {
max-height: 100%;
}
span {
margin-left: @padding-sm;
transition: @animation-duration-slow;
transition-property: opacity;
}
}
&.ant-layout-sider-collapsed {
.logo {
span {
opacity: 0;
}
}
}
.swiper-container {
flex: 1 1 100%;
width: 100%;
>section {
>.ant-layout-sider {
height: 100%;
box-shadow: 2px 0 8px @nav-box-shadow-color;
}
.swiper-slide {
height: auto;
background-color: @nav-background;
.ant-layout-sider-children {
display: flex;
flex-direction: column;
}
.logo {
font-size: @font-size-lg * 1.5;
font-weight: 500;
line-height: @layout-header-height + 10px;
z-index: 5;
display: flex;
overflow: hidden;
align-items: center;
flex: 0 0 @layout-header-height + 10px;
height: @layout-header-height + 10px;
padding: 0 @padding-md 0 @padding-lg;
color: @logo-color;
background-color: @nav-background;
box-shadow: @logo-box-shadow;
img {
max-height: 100%;
}
span {
margin-left: @padding-sm;
transition: @animation-duration-slow;
transition-property: opacity;
}
}
&.ant-layout-sider-collapsed {
.logo {
span {
opacity: 0;
}
}
}
.swiper-container {
z-index: 10;
flex: 1 1 100%;
width: 100%;
height: 100%;
box-shadow: 2px 0 8px @nav-box-shadow-color;
}
.swiper-slide {
height: auto;
}
}
}
}

View File

@@ -1,7 +0,0 @@
export default {
getAppPage: ['/sysApp/page', 'get'],
sysAppAdd: '/sysApp/add',
sysAppEdit: '/sysApp/edit',
sysAppDelete: '/sysApp/delete',
sysAppSetAsDefault: '/sysApp/setAsDefault'
}

View File

@@ -1,3 +0,0 @@
export default {
sysDictTypeDropDown: ['/sysDictType/dropDown', 'get'],
}

View File

@@ -11,15 +11,15 @@
* [url]必填,为接口地址,[method]选填,为请求方式(不区分大小写),默认为POST
*/
import loginManage from './loginManage'
import dictManage from './dictManage'
import appManage from './appManage'
import orgManage from './orgManage'
import roleManage from './roleManage'
import userManage from './userManage'
import menuManage from './menuManage'
import vislogManage from './vislogManage'
import posManage from './posManage'
import loginManage from './sys/loginManage'
import dictManage from './sys/dictManage'
import appManage from './sys/appManage'
import orgManage from './sys/orgManage'
import roleManage from './sys/roleManage'
import userManage from './sys/userManage'
import menuManage from './sys/menuManage'
import vislogManage from './sys/vislogManage'
import posManage from './sys/posManage'
export default {
...loginManage,

View File

@@ -1,5 +0,0 @@
export default {
login: '/login',
logout: ['/logout', 'get'],
getLoginUser: ['/getLoginUser', 'get'],
}

View File

@@ -0,0 +1,34 @@
export default {
/**
* 系统应用列表
*/
getAppPage: ['/sysApp/page', 'get'],
/**
* 系统应用列表
*/
getAppList: ['/sysApp/list', 'get'],
/**
* 新增系统应用
*/
sysAppAdd: ['/sysApp/add', 'post'],
/**
* 编辑系统应用
*
*/
sysAppEdit: ['/sysApp/edit', 'post'],
/**
* 删除系统应用
*/
sysAppDelete: ['/sysApp/delete', 'post'],
/**
* 设为默认应用
*/
sysAppSetAsDefault: ['/sysApp/setAsDefault', 'post'],
/**
* 修改应用状态
*/
sysAppChangeStatus: ['/sysApp/changeStatus', 'post'],
}

View File

@@ -0,0 +1,26 @@
export default {
/**
* 分页查询配置列表
*/
sysConfigPage: ['/sysConfig/page', 'get'],
/**
* 添加系统参数配置
*/
sysConfigAdd: ['/sysConfig/add', 'post'],
/**
* 编辑系统参数配置
*/
sysConfigEdit: ['/sysConfig/edit', 'post'],
/**
* 删除系统参数配置
*/
sysConfigDelete: ['/sysConfig/delete', 'post'],
/**
* 获取字典类型下所有字典,举例,返回格式为:[{code:"M",value:"男"},{code:"F",value:"女"}]
*/
sysDictTypeDropDown: ['/sysDictType/dropDown', 'get'],
/**
* 获取系统的所有任务列表
*/
sysTimersGetActionClasses: ['/sysTimers/getActionClasses', 'get'],
}

View File

@@ -0,0 +1,18 @@
export default {
/**
* 查询系统字典值
*/
sysDictDataPage: ['/sysDictData/page', 'get'],
/**
* 添加系统字典值
*/
sysDictDataAdd: ['/sysDictData/add', 'post'],
/**
* 编辑系统字典值
*/
sysDictDataEdit: ['/sysDictData/edit', 'post'],
/**
* 删除系统字典值
*/
sysDictDataDelete: ['/sysDictData/delete', 'post'],
}

View File

@@ -0,0 +1,26 @@
export default {
/**
* 分页查询系统字典类型
*/
sysDictTypePage: ['/sysDictType/page', 'get'],
/**
* 添加系统字典类型
*/
sysDictTypeAdd: ['/sysDictType/add', 'post'],
/**
* 编辑系统字典类型
*/
sysDictTypeEdit: ['/sysDictType/edit', 'post'],
/**
* 删除系统字典类型
*/
sysDictTypeDelete: ['/sysDictType/delete', 'post'],
/**
* 获取字典类型下所有字典,举例,返回格式为:[{code:"M",value:"男"},{code:"F",value:"女"}]
*/
sysDictTypeDropDown: ['/sysDictType/dropDown', 'get'],
/**
* 获取所有字典,启动时加入缓存使用
*/
sysDictTypeTree: ['/sysDictType/tree', 'get'],
}

View File

@@ -0,0 +1,10 @@
export default {
/**
* 发送邮件
*/
emailSendEmail: ['/email/sendEmail', 'post'],
/**
* 发送html邮件
*/
emailSendEmailHtml: ['/email/sendEmailHtml', 'post'],
}

View File

@@ -0,0 +1,32 @@
export default {
/**
* 分页查询文件信息表
*/
sysFileInfoPage: ['/sysFileInfo/page', 'get'],
/**
* 获取全部文件信息表
*/
sysFileInfoList: ['/sysFileInfo/list', 'get'],
/**
* 上传文件
*/
sysFileInfoUpload: ['/sysFileInfo/upload', 'post'],
/**
* 下载文件
*/
sysFileInfoDownload: ['/sysFileInfo/download', 'get'],
/**
* 查看图片
*/
sysFileInfoPreview: ['/sysFileInfo/preview', 'get'],
/**
* 查看详情文件信息表
*/
sysFileInfoDetail: ['/sysFileInfo/detail', 'get'],
/**
* 删除文件信息表
*/
sysFileInfoDelete: ['/sysFileInfo/delete', 'post'],
}

View File

@@ -0,0 +1,34 @@
export default {
/**
* 登录
*/
login: ['/login', 'post'],
/**
* 登出
*/
logout: ['/logout', 'get'],
/**
* 获取登录用户信息
*/
getLoginUser: ['/getLoginUser', 'get'],
/**
* 获取租户开关
*/
getTenantOpen: ['/getTenantOpen', 'get'],
/**
* 获取短信验证码
*/
getSmsCaptcha: ['/getSmsCaptcha', 'get'],
/**
* 获取验证码开关
*/
getCaptchaOpen: ['/getCaptchaOpen', 'get'],
/**
* 获取验证图片 以及token
*/
reqGet: ['/captcha/get', 'post'],
/**
* 滑动或者点选验证
*/
reqCheck: ['/captcha/check', 'post'],
}

View File

@@ -0,0 +1,40 @@
export default {
getUserPage: ['/sysUser/page', 'get'],
sysUserAdd: '/sysUser/add',
sysUserEdit: '/sysUser/edit',
sysUserDetail: '/sysUser/detail',
sysUserDelete: '/sysUser/delete',
sysUserOwnRole: ['/sysUser/ownRole', 'get'],
sysUserGrantRole: '/sysUser/grantRole',
sysUserOwnData: ['/sysUser/ownData', 'get'],
sysUserGrantData: '/sysUser/grantData',
sysUserChangeStatus: '/sysUser/changeStatus',
sysUserResetPwd: '/sysUser/resetPwd',
sysUserUpdatePwd: '/sysUser/updatePwd',
sysUserSelector: ['/sysUser/selector', 'get'],
sysUserUpdateAvatar: '/sysUser/updateAvatar',
sysUserUpdateInfo: '/sysUser/updateInfo',
}

View File

@@ -1,6 +0,0 @@
export default {
getUserPage: ['/sysUser/page', 'get'],
sysUserAdd: '/sysUser/add',
sysUserEdit: '/sysUser/edit',
sysUserDetail: '/sysUser/detail',
}

View File

@@ -14,7 +14,9 @@ export default {
return (
<div class="yo-table-actions">
{components}
<div class="yo-table-actions--inner">
{components}
</div>
</div>
)
}

View File

@@ -0,0 +1,178 @@
export default {
props: {
loadData: {
type: Function,
require: true,
},
defaultExpandedKeys: {
default: false,
type: Boolean
},
},
data() {
return {
loading: false,
data: [],
list: [],
searchValue: '',
expandedKeys: [],
autoExpandParent: true
}
},
created() {
this.onLoadData()
},
methods: {
onLoadData() {
this.loading = true
this.loadData().then((res) => {
const data = this.generateKey(res)
this.generateList(data)
if (this.defaultExpandedKeys) {
this.expandedKeys = this.list.map(p => p.key)
}
this.data = data
this.loading = false
})
},
onExpand(expandedKeys) {
this.expandedKeys = expandedKeys;
this.autoExpandParent = false;
},
onSearch(value) {
const expandedKeys = this.list
.map(p => {
if (p.title.indexOf(value) > -1) {
return this.getParentKey(p.key, this.data)
}
return null
})
.filter((p, i, self) => p && self.indexOf(p) === i)
this.searchValue = value
this.expandedKeys = expandedKeys
this.autoExpandParent = true
},
onSelect(selectedKeys) {
const selectedIds = []
selectedKeys.forEach(p => {
const data = this.list.find(m => m.key === p)
selectedIds.push(data.id)
})
this.$emit('select', selectedIds)
},
generateKey(data, level) {
const n = level || [0]
n.push(0)
data.forEach((p, i) => {
n[n.length - 1] = i
p.key = n.join('-')
if (p.children) {
this.generateKey(p.children, Object.assign([], n))
}
})
return data
},
generateList(data) {
// 这里获取不到Key
for (let i = 0; i < data.length; i++) {
const { key, id, title, children } = data[i]
this.list.push({ key, id, title });
if (children) {
this.generateList(children);
}
}
},
getParentKey(key, tree) {
let parentKey;
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.children) {
if (node.children.some(item => item.key === key)) {
parentKey = node.key;
} else if (this.getParentKey(key, node.children)) {
parentKey = this.getParentKey(key, node.children);
}
}
}
return parentKey;
},
},
render() {
const swiperOptions = {
direction: 'vertical',
slidesPerView: 'auto',
freeMode: true,
scrollbar: true,
mousewheel: true,
}
const slots = {
title: ({ title }) => {
return (
<div>
<span v-if={title.indexOf(this.searchValue) > -1}>
{title.replace(this.searchValue, <span style="color: #f50">{this.searchValue}</span>)}
</span>
<span v-else>{{ title }}</span>
</div>
);
}
}
return (
<a-layout class="yo-tree-layout">
<a-layout-sider width="240px">
<a-layout-header>
<div class="header-actions">
<a-input-search allowClear={true} placeholder="请输入检索关键字" onSearch={this.onSearch} />
</div>
</a-layout-header>
<swiper options={swiperOptions}>
<a-spin style={{ height: '100%' }} spinning={this.loading}>
<a-icon slot="indicator" type="loading" spin />
<swiper-slide>
<a-alert closable banner type="error">
<template slot="message">
<div>搜索无法高亮</div>
</template>
</a-alert>
<a-tree
{...{ slots }}
treeData={this.data}
expandedKeys={this.expandedKeys}
autoExpandParent={this.autoExpandParent}
onExpand={this.onExpand}
onSelect={this.onSelect}
/>
</swiper-slide>
</a-spin>
</swiper>
</a-layout-sider>
<a-layout-content>
{this.$scopedSlots.default()}
</a-layout-content>
</a-layout>
)
}
}

View File

@@ -30,8 +30,8 @@
<span slot="active" slot-scope="text, record">
{{ bindCodeValue(text, 'yes_or_no') }}
<Auth auth="sysApp:setAsDefault" v-if="record.active == 'N'">
<div class="yo-table-actions">
<a-divider type="vertical" />
<yo-table-actions>
<span></span>
<a-popconfirm
@confirm="onSetDefault(record)"
placement="topRight"
@@ -39,7 +39,7 @@
>
<a>设为默认</a>
</a-popconfirm>
</div>
</yo-table-actions>
</Auth>
</span>
<span slot="status" slot-scope="text">{{ bindCodeValue(text, 'common_status') }}</span>

View File

@@ -0,0 +1,86 @@
<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, message }) => {
this.confirmLoading = false;
if (success) {
this.$message.success('编辑成功');
this.onCancel();
this.$emit('ok');
} else {
this.$message.error(message);
}
});
}
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.formBody.onResetFields();
this.visible = false;
},
},
};
</script>

View File

@@ -0,0 +1,73 @@
<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, message }) => {
this.confirmLoading = false;
if (success) {
this.$message.success('编辑成功');
this.onCancel();
this.$emit('ok');
} else {
this.$message.error(message);
}
});
}
});
},
/**
* 必要的方法
* 关闭窗口时的操作
*/
onCancel() {
this.$refs['form-body'].onResetFields();
this.visible = false;
},
},
};
</script>

View File

@@ -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 placeholder="请输入密码" type="password" v-model="form.password" />
</a-form-model-item>
<a-form-model-item label="确认密码" prop="confirm">
<a-input placeholder="请确认密码" type="password" 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>

View File

@@ -0,0 +1,314 @@
<template>
<yo-tree-layout :load-data="loadTreeData" @select="onSelect" default-expanded-keys>
<container>
<br />
<a-alert banner closable type="error">
<template slot="message">后端bug:生日不填写,在保存时会默认写入0001-01-01</template>
</a-alert>
<br />
<a-alert banner 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-table :columns="columns" :load-data="loadData" ref="table">
<div class="yo-action-bar" slot="title">
<div class="yo-action-bar--actions">
<a-button @click="onOpen('add-form')" icon="plus">新增用户</a-button>
</div>
</div>
<span slot="sex" slot-scope="text">{{ bindCodeValue(text, 'sex') }}</span>
<span slot="status" slot-scope="text, record">
{{ bindCodeValue(text, 'common_status') }}
<Auth auth="sysUser:changeStatus">
<yo-table-actions>
<span></span>
<a-switch
:checked="!text"
:loading="record.statusChanging"
@change="checked => onSetUserStatus(record, checked)"
checked-children="启用"
un-checked-children="停用"
/>
</yo-table-actions>
</Auth>
</span>
<span slot="action" slot-scope="text, record">
<yo-table-actions>
<Auth auth="sysUser:edit">
<a @click="onOpen('edit-form', record)">编辑</a>
</Auth>
<Auth auth="sysUser:resetPwd">
<a-popconfirm
@confirm="onResetPassword(record)"
placement="topRight"
title="是否确认重置密码"
>
<a>重置密码</a>
</a-popconfirm>
</Auth>
<Auth auth="sysUser:delete">
<a-popconfirm @confirm="onDelete(record)" placement="topRight" title="是否确认删除">
<a>删除</a>
</a-popconfirm>
</Auth>
<Auth :ath="{ sysUser: [['grantRole'], ['grantData']] }">
<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>
</yo-table-actions>
</span>
</yo-table>
</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 AddForm from './addForm';
import EditForm from './editForm';
export default {
components: {
YoTreeLayout,
AddForm,
EditForm,
},
data() {
return {
query: {},
columns: [
{
title: '账号',
dataIndex: 'account',
},
{
title: '姓名',
dataIndex: 'name',
},
{
title: '性别',
dataIndex: 'sex',
scopedSlots: {
customRender: 'sex',
},
},
{
title: '手机',
dataIndex: 'phone',
},
{
title: '状态',
dataIndex: 'status',
scopedSlots: {
customRender: 'status',
},
},
{
title: '操作',
width: '240px',
dataIndex: 'action',
scopedSlots: {
customRender: 'action',
},
},
],
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.table.onReloadData(true);
},
onReset() {
Object.keys(this.query).forEach((p) => {
if (p !== 'sysEmpParam.orgId') {
this.query[p] = undefined;
}
});
this.onQuery();
},
/**
* 必要方法
* 重新列表数据
*/
onReloadData() {
this.$refs.table.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>