You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
849 lines
29 KiB
849 lines
29 KiB
<template> |
|
<div class="flex"> |
|
<div class="page" style="width: 218px;border-right: 1px solid #EBEDF0"> |
|
<div class="m-b-20"> |
|
<p class="page-name mb">后台员工账号</p> |
|
<el-radio-group v-model="staffType" @change="changeType"> |
|
<div class="m-b-20"> |
|
<el-radio :label="1">所有员工</el-radio> |
|
</div> |
|
<div> |
|
<el-radio :label="2">未加入部门的员工</el-radio> |
|
</div> |
|
</el-radio-group> |
|
</div> |
|
<el-divider></el-divider> |
|
<div> |
|
<div class="flex-between m-b-20"> |
|
<p class="page-name">组织管理</p> |
|
<el-button v-auth="'新增部门'" type="text" @click="addOrg">添加</el-button> |
|
</div> |
|
|
|
<div style="height: 504px;overflow: auto"> |
|
<el-tree class="org" ref="orgs" :data="orgs" :props="defaultProps" highlight-current :expand-on-click-node="false" default-expand-all node-key="id" @node-click="handleNodeClick"> |
|
<span class="node-wrap" slot-scope="{ node, data }"> |
|
<div class="left"> |
|
<img src="@/assets/img/node.png" alt=""> |
|
<span class="name">{{ node.label }}</span> |
|
</div> |
|
<el-dropdown :hide-on-click="false"> |
|
<img class="expand" src="@/assets/img/expand.png" alt=""> |
|
<el-dropdown-menu slot="dropdown"> |
|
<el-dropdown-item> |
|
<el-button v-auth class="org-btn" @click="() => editOrg(node, data)" type="text">编辑部门</el-button> |
|
</el-dropdown-item> |
|
<el-dropdown-item> |
|
<el-button v-auth="'新增部门'" class="org-btn add" @click="() => addOrg(node, data)" type="text">添加子部门</el-button> |
|
</el-dropdown-item> |
|
<el-dropdown-item> |
|
<el-button v-auth="'删除部门'" class="org-btn del" @click="() => delOrg(node, data)" type="text">删除</el-button> |
|
</el-dropdown-item> |
|
</el-dropdown-menu> |
|
</el-dropdown> |
|
</span> |
|
</el-tree> |
|
</div> |
|
</div> |
|
<el-dialog |
|
:title="orgForm.id ? '编辑' : '新增' + '部门'" |
|
:visible.sync="orgVisible" |
|
:close-on-click-modal="false" |
|
width="50%" |
|
> |
|
<el-form v-if="orgVisible" ref="orgForm" :model="orgForm" :rules="orgRules" label-width="100px"> |
|
<el-form-item label="部门名称" prop="name"> |
|
<el-input v-model.trim="orgForm.name" placeholder="请输入"></el-input> |
|
</el-form-item> |
|
<el-form-item label="上级部门"> |
|
<span v-if="orgForm.pidName">{{ orgForm.pidName }}</span> |
|
<el-cascader |
|
v-else |
|
:options="orgListDia" |
|
v-model="cascaderValue" |
|
:props="cascaderProps" |
|
clearable |
|
style="width: 100%" |
|
> |
|
</el-cascader> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="closeOrg">取 消</el-button> |
|
<el-button type="primary" @click="orgSubmit">确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
<div class="page list-wrap"> |
|
<div class="tool"> |
|
<el-input style="width: 250px;" placeholder="请输入员工姓名/账号/工号/手机号" v-model.trim="keyword" clearable></el-input> |
|
<div class="actions"> |
|
<el-dropdown class="setting" trigger="click" :hide-on-click="false"> |
|
<el-tooltip placement="top"> |
|
<img class="icon" src="@/assets/img/setting.png" alt=""> |
|
</el-tooltip> |
|
<el-dropdown-menu> |
|
<el-dropdown-item> |
|
<el-button @click="resetColumns" type="text">列重置</el-button> |
|
</el-dropdown-item> |
|
<el-dropdown-item v-for="(column, i) in settings" :key="i" :divided="i === 0"> |
|
<el-checkbox v-model="column.show">{{ column.name }}</el-checkbox> |
|
</el-dropdown-item> |
|
</el-dropdown-menu> |
|
</el-dropdown> |
|
<el-button v-auth type="primary" @click="addStaff">新增员工</el-button> |
|
<el-button v-auth @click="batchImport">批量导入</el-button> |
|
<el-button v-auth @click="batchDel">批量删除</el-button> |
|
</div> |
|
</div> |
|
|
|
<el-table :data="list" class="table" ref="table" @selection-change="handleSelectionChange" row-key="id"> |
|
<el-table-column v-if="settings[0].show" type="selection" width="55" :reserve-selection="true"></el-table-column> |
|
<el-table-column type="index" width="60" label="序号"></el-table-column> |
|
<el-table-column v-if="settings[1].show" prop="realName" label="员工姓名" min-width="100"></el-table-column> |
|
<el-table-column v-if="settings[2].show" prop="username" label="账号" min-width="100"></el-table-column> |
|
<el-table-column v-if="settings[3].show" prop="jobNumber" label="工号" min-width="100"></el-table-column> |
|
<el-table-column v-if="settings[4].show" prop="phone" label="手机号" min-width="100" show-overflow-tooltip></el-table-column> |
|
<el-table-column v-if="settings[5].show" prop="deptArchitectureName" label="所在部门" min-width="100"></el-table-column> |
|
<el-table-column v-if="settings[6].show" prop="createTime" label="创建日期" min-width="140"></el-table-column> |
|
<el-table-column v-if="settings[7].show" prop="roleName" label="授权角色" min-width="100"></el-table-column> |
|
<el-table-column v-if="settings[8].show" prop="groupName" label="用户组" min-width="100"></el-table-column> |
|
<el-table-column v-if="settings[9].show" prop="lastLoginTime" label="最后登录时间" min-width="140"></el-table-column> |
|
<el-table-column v-if="settings[10].show" label="操作" width="180"> |
|
<template slot-scope="scope"> |
|
<el-button v-auth type="text" @click="queryStaff(scope.row,true)">查看</el-button> |
|
<el-button v-auth type="text" @click="queryStaff(scope.row,false)">编辑</el-button> |
|
<el-button v-auth type="text" @click="resetPassword(scope.row)">重置密码</el-button> |
|
<el-button v-auth type="text" @click="delStaff(scope.row)">删除</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> |
|
</div> |
|
|
|
<el-dialog :title="isDetail ? '查看' : (form.id ? '编辑' : '新增') + '员工'" :visible.sync="staffVisible" width="500px" class="dialog" :close-on-click-modal="false" @close="closeStaff"> |
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="isDetail" style='margin-right: 60px;'> |
|
<el-form-item prop="jobNumber" label="工号"> |
|
<el-input v-model.trim="form.jobNumber" placeholder="请输入工号"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="realName" label="姓名"> |
|
<el-input v-model.trim="form.realName" placeholder="请输入姓名"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="username" label="账号"> |
|
<el-input v-model.trim="form.username" placeholder="请输入账号"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="roleIds" label="授权角色"> |
|
<el-select v-model="form.roleIds" multiple style="width: 100%"> |
|
<template v-for="item in roleIds"> |
|
<!-- 不显示超管 --> |
|
<el-option |
|
v-if="item.name !== '超级管理员'" |
|
:key="item.id" |
|
:label="item.name" |
|
:value="item.id"> |
|
</el-option> |
|
</template> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="所在部门"> |
|
<el-cascader |
|
style="width: 100%" |
|
v-model="form.deptArchitectureId" |
|
:options="orgs" |
|
:props="casProps" |
|
></el-cascader> |
|
</el-form-item> |
|
<el-form-item prop="phone" label="手机号"> |
|
<el-input v-model.trim="form.phone" placeholder="请输入手机号" maxlength="11"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="email" label="邮箱"> |
|
<el-input v-model.trim="form.email" placeholder="请输入邮箱"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="groupId" label="用户组"> |
|
<el-select v-model="form.groupId" style="width: 100%"> |
|
<template v-for="item in userGroups"> |
|
<el-option |
|
:key="item.id" |
|
:label="item.groupName" |
|
:value="item.id"> |
|
</el-option> |
|
</template> |
|
</el-select> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer" v-if="!isDetail"> |
|
<el-button @click="staffVisible = false">取消</el-button> |
|
<el-button type="primary" @click="submitStaff">确定</el-button> |
|
</span> |
|
</el-dialog> |
|
|
|
<el-dialog title="批量导入" :visible.sync="importVisible" width="24%" :close-on-click-modal="false"> |
|
<div style="text-align: center"> |
|
<div style="margin-bottom: 10px;"> |
|
<el-button type="primary" @click="download">模板下载<i class="el-icon-download el-icon--right"></i></el-button> |
|
</div> |
|
<el-upload |
|
name="file" |
|
accept=".xls,.xlsx" |
|
:on-remove="handleRemove" |
|
:on-error="uploadError" |
|
:on-success="uploadSuccess" |
|
:before-remove="beforeRemove" |
|
:limit="1" |
|
:on-exceed="handleExceed" |
|
:action="this.api.importStaff" |
|
:file-list="uploadList" |
|
:headers="headers" |
|
> |
|
<el-button type="primary" class="ml20">上传文件<i class="el-icon-upload2 el-icon--right"></i></el-button> |
|
</el-upload> |
|
<el-link v-if="uploadFaild" type="primary" @click="showFaild">部分数据导入失败，查看失败原因</el-link> |
|
</div> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button size="small" @click="importVisible = false">取 消</el-button> |
|
<el-button size="small" type="primary" @click="uploadSure">确 定</el-button> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import util from '@/libs/util' |
|
import Setting from '@/setting' |
|
import { mapState } from 'vuex' |
|
export default { |
|
data() { |
|
const accountPass = (rule, value, callback) => { |
|
if (value === '') { |
|
callback(new Error('请输入账号')) |
|
} else { |
|
const pattern = /^[A-Za-z0-9]*$/ |
|
if(pattern.test(value)){ |
|
this.accountChange() |
|
callback() |
|
}else{ |
|
callback(new Error('请输入正确账号格式')) |
|
} |
|
} |
|
} |
|
const workNumberPass = (rule, value, callback) => { |
|
if (value === '') { |
|
callback(new Error('请输入工号')) |
|
} else { |
|
const pattern = /^[A-Za-z0-9]*$/ |
|
if(pattern.test(value)){ |
|
this.worknumberChange() |
|
callback() |
|
}else{ |
|
callback(new Error('请输入正确工号格式')) |
|
} |
|
} |
|
} |
|
return { |
|
orgs: [], |
|
defaultProps: { |
|
label: 'name' |
|
}, |
|
orgListDia: [], |
|
staffType: 1, //类型:必填一个(1.所有员工 2.未加入班级员工) |
|
orgVisible: false, // 员工组织架对话框 |
|
orgForm: { |
|
id: '', |
|
name: '' |
|
}, |
|
cascaderValue: [], // 上级部门 |
|
cascaderProps: { |
|
checkStrictly: true, |
|
label: "name", |
|
value: "id" |
|
}, |
|
treeVisible: true, |
|
treeNode: {}, |
|
treeResolve: [], |
|
isDetail: false, |
|
keyword: '', |
|
searchTimer: null, |
|
originSettings: [], |
|
settings: [ |
|
{ |
|
name: '选择框', |
|
show: true |
|
}, |
|
{ |
|
name: '员工姓名', |
|
show: true |
|
}, |
|
{ |
|
name: '账号', |
|
show: true |
|
}, |
|
{ |
|
name: '工号', |
|
show: true |
|
}, |
|
{ |
|
name: '手机号', |
|
show: true |
|
}, |
|
{ |
|
name: '所在部门', |
|
show: true |
|
}, |
|
{ |
|
name: '创建日期', |
|
show: true |
|
}, |
|
{ |
|
name: '授权角色', |
|
show: true |
|
}, |
|
{ |
|
name: '用户组', |
|
show: true |
|
}, |
|
{ |
|
name: '最后登录时间', |
|
show: true |
|
}, |
|
{ |
|
name: '操作', |
|
show: true |
|
} |
|
], |
|
roleIds: [], |
|
userGroups: [], |
|
form: { |
|
id: '', |
|
realName: '', |
|
username: '', |
|
phone: '', |
|
jobNumber: '', |
|
email: '', |
|
groupId: 1, |
|
roleIds: [], |
|
deptArchitectureId: [] |
|
}, |
|
orgRules: { |
|
name: [ |
|
{ required: true, message: "请输入部门名称", trigger: "blur" } |
|
] |
|
}, |
|
rules: { |
|
username: [ |
|
{ required: true,validator: accountPass, trigger: 'blur' } |
|
], |
|
realName: [ |
|
{ required: true, message: "请输入姓名", trigger: "blur" } |
|
], |
|
jobNumber: [ |
|
{ required: true,validator: workNumberPass, trigger: 'blur' } |
|
], |
|
roleIds: [ |
|
{ required: true, message: "请选择授权角色", trigger: "change" } |
|
], |
|
groupId: [ |
|
{ required: true, message: "请选择用户组", trigger: "change" } |
|
] |
|
}, |
|
list: [], |
|
page: 1, |
|
pageSize: 10, |
|
total: 0, |
|
multipleSelection: [], |
|
|
|
staffVisible: false, |
|
accountReapeat: false, |
|
originAccount: '', |
|
workNumberReapeat: false, |
|
originWorkNumber: '', |
|
phoneRepeat: false, |
|
emailRepeat: false, |
|
casProps: { |
|
multiple: true, |
|
checkStrictly: true, |
|
label: 'name', |
|
value: 'id', |
|
isLeaf: 'leaf' |
|
}, |
|
archId: [], |
|
|
|
importVisible: false, |
|
uploadList: [], |
|
uploadFaild: false, |
|
exportCode: '', |
|
headers: { |
|
token: util.local.get(Setting.tokenKey) |
|
}, |
|
disableds:false, |
|
submiting: false // 新增编辑防抖标识 |
|
}; |
|
}, |
|
mounted() { |
|
this.$store.commit('user/setCrumbs', [ |
|
{ |
|
name: '用户管理' |
|
}, |
|
{ |
|
name: '组织与账号管理' |
|
} |
|
]) |
|
this.originSettings = JSON.parse(JSON.stringify(this.settings)) |
|
this.getOrg() |
|
this.getRole() |
|
this.getUserGroup() |
|
this.originForm = JSON.parse(JSON.stringify(this.form)) |
|
}, |
|
watch: { |
|
keyword: function(val) { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(() => { |
|
this.initData() |
|
}, 500) |
|
}, |
|
filterText(val) { |
|
this.$refs.classTree.filter(val); |
|
} |
|
}, |
|
methods: { |
|
// 获取组织树形 |
|
getOrg() { |
|
this.$get(this.api.depts).then(({ data }) => { |
|
const list = data[0].children |
|
this.orgs = list |
|
this.handleOrgId(list) |
|
this.$nextTick(() => { |
|
this.getStaff() |
|
}) |
|
}).catch(err => {}) |
|
}, |
|
// 每个层级加上父级id的集合 |
|
handleOrgId(list, ids) { |
|
list.forEach(e => { |
|
e.ids = ids ? [...ids, e.id] : [e.id] |
|
e.children.length ? this.handleOrgId(e.children, e.ids) : delete e.children |
|
}) |
|
}, |
|
// 组织类别筛选回调 |
|
changeType() { |
|
this.$refs.orgs.setCurrentKey(null) |
|
this.initData() |
|
}, |
|
// 添加部门 |
|
addOrg(node, data) { |
|
const list = JSON.parse(JSON.stringify(this.orgs)) |
|
this.handleOrg(list) |
|
this.orgListDia = list |
|
this.orgForm = { |
|
id: '', |
|
pid: data ? data.id : '0', |
|
pidName: data ? data.name : '', |
|
name: '' |
|
} |
|
this.orgVisible = true |
|
}, |
|
// 编辑部门 |
|
editOrg(node, data) { |
|
const list = JSON.parse(JSON.stringify(this.orgs)) |
|
this.handleOrg(list, data.id, 0) |
|
this.orgListDia = list |
|
this.orgForm = { |
|
id: data.id, |
|
name: data.name |
|
} |
|
this.orgVisible = true |
|
const ids = data.ids |
|
ids.splice(ids.length - 1, 1) |
|
this.cascaderValue = ids |
|
}, |
|
// 处理更换部门的禁选 |
|
handleOrg(list, id, disabled) { |
|
list.forEach(e => { |
|
// 如果是已经找到了要禁选的层级，则直接改变disabled，并递归 |
|
if (disabled) { |
|
e.disabled = true |
|
e.children && this.handleOrg(e.children, id, 1) |
|
} else { |
|
if (e.id === id) { |
|
e.disabled = true |
|
e.children && this.handleOrg(e.children, id, 1) |
|
} else { |
|
e.children && this.handleOrg(e.children, id, 0) |
|
} |
|
} |
|
}) |
|
}, |
|
// 删除部门 |
|
delOrg(node, data) { |
|
this.$confirm("确定要删除吗？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
this.$del(`${this.api.dept}/${data.id}`).then(res => { |
|
util.successMsg("删除成功") |
|
this.getOrg() |
|
}).catch(res => {}) |
|
}).catch(() => {}) |
|
}, |
|
// 提交组织架构新增/编辑 |
|
orgSubmit() { |
|
this.$refs.orgForm.validate((valid) => { |
|
if (valid) { |
|
const form = this.orgForm |
|
const cas = this.cascaderValue |
|
const len = cas.length |
|
if (cas && len) { |
|
this.orgForm.pid = cas[len - 1] |
|
} |
|
debugger |
|
if (!form.id) { |
|
// 添加 |
|
this.$post(this.api.dept, form).then(res => { |
|
util.successMsg("新增成功！") |
|
this.closeOrg() |
|
}).catch(err => {}) |
|
} else { |
|
// 编辑 |
|
this.$put(this.api.dept, form).then(res => { |
|
util.successMsg("编辑成功！") |
|
this.closeOrg() |
|
}).catch(err => {}) |
|
} |
|
} |
|
}) |
|
}, |
|
// 点击树节点查询列表数据 |
|
handleNodeClick(data) { |
|
this.$refs.table.clearSelection() |
|
this.staffType = null |
|
this.getStaff() |
|
}, |
|
// 关闭组织新增编辑弹框 |
|
closeOrg() { |
|
this.orgVisible = false |
|
this.cascaderValue = [] |
|
this.getOrg() |
|
}, |
|
// 重置栏位筛选 |
|
resetColumns() { |
|
this.settings = JSON.parse(JSON.stringify(this.originSettings)) |
|
}, |
|
// 员工列表 |
|
getStaff() { |
|
this.$post(this.api.users, { |
|
type: this.staffType || 1, |
|
deptArchitectureId: this.$refs.orgs.getCurrentKey() || '', |
|
keyWord: this.keyword, |
|
pageNum: this.page, |
|
pageSize: this.pageSize |
|
}).then(({ data }) => { |
|
this.list = data.records |
|
this.total = +data.total |
|
}).catch(err => {}) |
|
}, |
|
// 切换页码 |
|
currentChange(val) { |
|
this.page = val |
|
this.getStaff() |
|
}, |
|
handleSelectionChange(val) { // 多选 |
|
this.multipleSelection = val |
|
}, |
|
initData() { |
|
this.$refs.table.clearSelection() |
|
this.page = 1 |
|
this.getStaff() |
|
}, |
|
// 删除 |
|
delStaff(row) { |
|
this.$confirm("确定要删除吗？", "提示", { |
|
type: "warning" |
|
}).then(() => { |
|
this.$del(this.api.user, [row.id]).then(res => { |
|
util.successMsg("删除成功") |
|
this.getStaff() |
|
}).catch(res => {}) |
|
}).catch(() => {}) |
|
}, |
|
// 批量删除 |
|
batchDel() { |
|
const list = this.multipleSelection |
|
if (list.length) { |
|
this.$confirm('确定要删除吗？', '提示', { |
|
type: 'warning' |
|
}).then(() => { |
|
this.$del(`${this.api.user}`, list.map(e => e.id)).then(res => { |
|
this.$refs.table.clearSelection() |
|
util.successMsg('删除成功') |
|
this.getStaff() |
|
}).catch(res => {}) |
|
}).catch(() => {}) |
|
} else { |
|
util.errorMsg('请先选择数据 ！') |
|
} |
|
}, |
|
// 重置密码 |
|
resetPassword(row) { |
|
this.$confirm(`确定重置密码？重置后密码为111aaa。`, "提示", { type: "warning" }).then(() => { |
|
this.$get(`${this.api.resetPwd}?userId=${row.id}`).then(res => { |
|
util.successMsg("重置成功") |
|
}).catch(res => {}) |
|
}).catch(() => {}) |
|
}, |
|
// 添加员工 |
|
addStaff() { |
|
if (!this.staffType) { |
|
this.archId = [] |
|
this.handleArchId(this.orgs, [this.$refs.orgs.getCurrentKey()]) |
|
this.form.deptArchitectureId = this.archId |
|
} |
|
this.staffVisible = true |
|
this.$nextTick(() => { |
|
this.$refs.form.clearValidate() |
|
}) |
|
}, |
|
// 处理部门id |
|
handleArchId(list, ids, pid = []) { |
|
list.map(e => { |
|
// 把部门id分割成二维数组，[[1, 2], [3, 4]]，每个层级的id都要放进去，后端返回的是最后一级的id，无法回显 |
|
if (ids.includes(e.id)) { |
|
this.archId.push([...pid, e.id]) |
|
} else { |
|
e.children && this.handleArchId(e.children, ids, [...pid, e.id]) |
|
} |
|
}) |
|
}, |
|
// 编辑/查看 |
|
queryStaff(row, isDetail) { |
|
this.isDetail = isDetail |
|
this.staffVisible = true |
|
this.$get(`${this.api.user}/${row.id}`).then(({ data }) => { |
|
const { deptArchitectureId, roleId } = data |
|
if (roleId) { |
|
const ids = roleId.split(',') |
|
const list = this.roleIds |
|
if (ids.length) { |
|
let has = false // 是否在角色列表里有已选择的角色，全部都被删除了，则提示 |
|
for (const i in ids) { |
|
if (list.find(n => n.id === ids[i])) { |
|
has = true |
|
break |
|
} |
|
} |
|
if (!has) { |
|
util.warningMsg('角色被删请重新选择') |
|
data.roleIds = [] |
|
} else { |
|
data.roleIds = ids |
|
} |
|
} |
|
} |
|
if (deptArchitectureId) { |
|
this.archId = [] |
|
this.handleArchId(this.orgs, deptArchitectureId.split(',')) |
|
data.deptArchitectureId = this.archId |
|
} |
|
data.groupId = +data.groupId |
|
this.form = data |
|
this.originAccount = data.username |
|
this.originWorkNumber = data.jobNumber |
|
}).catch(res => {}) |
|
}, |
|
// 获取角色数据 |
|
getRole() { |
|
this.$post(this.api.roles, { |
|
page: 1, |
|
limit: 10000 |
|
}).then(({ data }) => { |
|
this.roleIds = data.records |
|
}).catch(res => {}) |
|
}, |
|
// 用户组 |
|
getUserGroup() { |
|
this.$post(this.api.groupList, { |
|
page: 1, |
|
limit : 10000 |
|
}).then(({ data }) => { |
|
this.userGroups = data.records |
|
}).catch(err => {}) |
|
}, |
|
// 账号判重 |
|
accountChange() { |
|
const { username } = this.form |
|
if (username === this.originAccount) { |
|
this.accountReapeat = false |
|
} else { |
|
this.$get(`${this.api.checkUsername}?userName=${username}`).then(res => { |
|
this.accountReapeat = false |
|
}).catch(err => { |
|
this.accountReapeat = true |
|
}) |
|
} |
|
}, |
|
// 工号判重 |
|
worknumberChange() { |
|
const { jobNumber } = this.form |
|
if (jobNumber === this.originWorkNumber) { |
|
this.workNumberReapeat = false |
|
} else { |
|
this.$get(`${this.api.checkJobNumber}?jobNumber=${jobNumber}`).then(res => { |
|
this.workNumberReapeat = false |
|
}).catch(err => { |
|
this.workNumberReapeat = true |
|
}) |
|
} |
|
}, |
|
// 提交新增/编辑员工 |
|
submitStaff() { |
|
this.$refs.form.validate((valid) => { |
|
if (valid) { |
|
if (this.submiting) return false |
|
if (this.accountReapeat) return util.warningMsg("该账号已存在") |
|
if (this.workNumberReapeat) return util.warningMsg("该工号已存在") |
|
if (this.phoneRepeat) return util.warningMsg("该手机号已存在") |
|
if (this.emailRepeat) return util.warningMsg("该邮箱已存在") |
|
this.submiting = true |
|
const form = JSON.parse(JSON.stringify(this.form)) |
|
const ids = form.deptArchitectureId |
|
if (ids) form.deptArchitectureId = ids.map(e => e[e.length - 1]) |
|
if (form.id) { |
|
this.$put(this.api.user, form).then(res => { |
|
util.successMsg("编辑成功！") |
|
this.staffVisible = false |
|
setTimeout(() => { |
|
this.submiting = false |
|
}, 2000) |
|
}).catch(res => { |
|
setTimeout(() => { |
|
this.submiting = false |
|
}, 2000) |
|
}) |
|
} else { |
|
this.$post(this.api.user, form).then(res => { |
|
util.successMsg("新增成功！") |
|
this.staffVisible = false |
|
setTimeout(() => { |
|
this.submiting = false |
|
}, 2000) |
|
}).catch(res => { |
|
setTimeout(() => { |
|
this.submiting = false |
|
}, 2000) |
|
}) |
|
} |
|
} |
|
}) |
|
}, |
|
// 关闭新增员工对话框 |
|
closeStaff() { |
|
this.form = { |
|
id: '', |
|
realName: '', |
|
username: '', |
|
phone: '', |
|
uniqueIdentification: '', |
|
jobNumber: '', |
|
email: '', |
|
deptArchitectureId: [], |
|
roleIds: [] |
|
} |
|
this.isDetail = false |
|
this.getStaff() |
|
}, |
|
// 批量导入 |
|
batchImport() { |
|
this.importVisible = true |
|
this.uploadList = [] |
|
this.uploadFaild = false |
|
}, |
|
// 模板下载 |
|
download() { |
|
util.downloadFile('用户导入模板.xlsx', this.api.staffTemplate) |
|
}, |
|
// 上传文件 |
|
handleExceed(files, fileList) { |
|
util.warningMsg( |
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
|
) |
|
}, |
|
// 下载失败文件 |
|
showFaild() { |
|
location.href = `${this.api.exportFailure}?exportCode=${this.exportCode}` |
|
}, |
|
uploadSuccess(res, file, fileList) { |
|
this.uploadFaild = false |
|
if (res.code === 200) { |
|
if (res.data.exportCode) { |
|
this.exportCode = res.data.exportCode |
|
this.uploadFaild = true |
|
util.errorMsg(`本次上传有${res.data.failureNum}个错误信息录入`) |
|
} |
|
} else { |
|
res.msg ? util.errorMsg(res.msg) : util.errorMsg("上传失败，请检查数据") |
|
} |
|
}, |
|
uploadError(err, file, fileList) { |
|
this.$message({ |
|
message: "上传出错，请重试！", |
|
type: "error", |
|
center: true |
|
}) |
|
}, |
|
beforeRemove(file, fileList) { |
|
return this.$confirm(`确定移除 ${file.name}？`) |
|
}, |
|
handleRemove(file, fileList) { |
|
this.uploadList = fileList |
|
this.uploadFaild = false |
|
}, |
|
uploadSure() { |
|
this.importVisible = false |
|
this.staffType = 1 |
|
this.keyword = '' |
|
this.$refs.orgs.setCurrentKey(null) |
|
this.getOrg() |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
/deep/.org { |
|
.el-tree-node__content { |
|
height: 40px; |
|
&:hover { |
|
background-color: #F0F4FF; |
|
} |
|
} |
|
} |
|
.node-wrap { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
width: 100%; |
|
.left { |
|
display: inline-flex; |
|
align-items: center; |
|
} |
|
.name { |
|
margin-left: 3px; |
|
font-size: 14px; |
|
color: #333; |
|
} |
|
.expand { |
|
padding: 0 15px; |
|
} |
|
} |
|
.org-btn { |
|
width: 100%; |
|
text-align: left; |
|
&.add { |
|
color: #666; |
|
} |
|
&.del { |
|
color: #D0021B; |
|
} |
|
} |
|
.list-wrap { |
|
width: calc(100% - 219px); |
|
} |
|
</style> |