parent
7394964cb5
commit
db5f1831fe
19 changed files with 1116 additions and 2701 deletions
@ -1,62 +0,0 @@ |
||||
<template> |
||||
<div class="page" style="padding: 0"> |
||||
<div class="tabs"> |
||||
<a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{ item }}</a> |
||||
</div> |
||||
|
||||
<staff v-if="active == 'staff'"></staff> |
||||
<role v-if="active == 'role'"></role> |
||||
<logo v-if="active == 'logo'"></logo> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapState } from 'vuex' |
||||
import Setting from '@/setting' |
||||
import staff from "./staff"; |
||||
import role from "./role"; |
||||
import logo from "./logo"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
active: "staff", |
||||
tabs: { |
||||
staff: "员工管理", |
||||
role: "角色权限", |
||||
logo: "系统logo设置", |
||||
} |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState('auth', [ |
||||
'btns' |
||||
]) |
||||
}, |
||||
components: { |
||||
staff, |
||||
role, |
||||
logo |
||||
}, |
||||
created() { |
||||
Setting.dynamicRoute && this.initTabs() |
||||
}, |
||||
methods: { |
||||
tabChange(index) { |
||||
this.active = index |
||||
}, |
||||
initTabs() { |
||||
const { btns } = this |
||||
const tab1 = btns.includes('/system/list:员工管理') |
||||
const tab2 = btns.includes('/system/list:角色权限') |
||||
const tab3 = btns.includes('/system/list:系统logo设置') |
||||
tab1 || delete this.tabs.staff |
||||
tab2 || delete this.tabs.role |
||||
tab3 || delete this.tabs.logo |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -1,190 +0,0 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<h6 class="p-title">系统logo设置</h6> |
||||
<el-form ref="form" label-width="100px"> |
||||
<el-form-item label="标题"> |
||||
<el-input v-model="form.title " ref="account" placeholder="请输入标题" style="width: 400px"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="图标"> |
||||
<el-upload |
||||
class="avatar-uploader" |
||||
accept=".jpg,.png,.jpeg" |
||||
:on-remove="handleRemove" |
||||
:on-error="uploadError" |
||||
:on-success="uploadSuccess" |
||||
:before-remove="beforeRemove" |
||||
:limit="1" |
||||
:on-exceed="handleExceed" |
||||
:action="this.api.fileupload" |
||||
:headers="headers" |
||||
name="file" |
||||
> |
||||
<img v-if="coverUrl" :src="coverUrl" class="avatar"> |
||||
<div class="uploader-default" v-else> |
||||
<i class="el-icon-plus"></i> |
||||
<p>上传图标</p> |
||||
</div> |
||||
|
||||
<div slot="tip" class="el-upload__tip"> |
||||
<p>只能上传jpg/png文件</p> |
||||
<p>图标将按1:1显示，最佳分辨率100*100</p> |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="save">{{ form.id ? "更新" : "创建" }}</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import Setting from "@/setting"; |
||||
import { mapActions, mapState } from "vuex"; |
||||
export default { |
||||
name: "logo", |
||||
data() { |
||||
return { |
||||
headers: { |
||||
token: util.local.get(Setting.tokenKey) |
||||
}, |
||||
coverUrl: "", |
||||
uploadList: [], |
||||
form: { |
||||
id: "", |
||||
title: "", |
||||
logoUrl: "" |
||||
} |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getSystemDetail(); |
||||
}, |
||||
methods: { |
||||
...mapActions("user", [ |
||||
"setTitle", "setLogoUrl" |
||||
]), |
||||
getSystemDetail () { |
||||
this.$get(this.api.logoDetail).then(res => { |
||||
if (res.data) { |
||||
this.form = res.data; |
||||
this.coverUrl = res.data.logoUrl; |
||||
this.uploadList.push({ |
||||
name: "logo.jpg", |
||||
url: this.coverUrl |
||||
}); |
||||
this.setTitle(res.data.title); |
||||
this.setLogoUrl(res.data.logoUrl); |
||||
} |
||||
}).catch(res => {}); |
||||
}, |
||||
handleExceed(files, fileList) { // 上传文件 |
||||
util.warningMsg("当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！"); |
||||
}, |
||||
uploadSuccess(res, file, fileList) { |
||||
this.coverUrl = res.data.filesResult.fileUrl; |
||||
}, |
||||
uploadError(err, file, fileList) { |
||||
this.$message({ |
||||
message: "上传出错，请重试！", |
||||
type: "error", |
||||
center: true |
||||
}); |
||||
}, |
||||
beforeRemove(file, fileList) { |
||||
return this.$confirm(`确定移除 ${file.name}？`); |
||||
}, |
||||
handleRemove(file, fileList) { |
||||
let fileName = this.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", ""); |
||||
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||
this.coverUrl = ""; |
||||
}).catch(res => { |
||||
}); |
||||
}, |
||||
save() { |
||||
this.form.logoUrl = this.coverUrl; |
||||
if (this.form.id) { |
||||
this.$post(this.api.logoUpdate, this.form).then(res => { |
||||
util.successMsg("更新成功"); |
||||
this.getSystemDetail(); |
||||
}).catch(res => {}); |
||||
} else { |
||||
this.$post(this.api.logoSave, this.form).then(res => { |
||||
util.successMsg("新增成功"); |
||||
this.getSystemDetail(); |
||||
}).catch(res => {}); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
$avatar-width: 104px; |
||||
/deep/ .avatar-uploader { |
||||
.el-upload { |
||||
position: relative; |
||||
width: $avatar-width; |
||||
border: 1px dashed #d9d9d9; |
||||
border-radius: 2px; |
||||
cursor: pointer; |
||||
overflow: hidden; |
||||
|
||||
&:hover { |
||||
border-color: #409EFF; |
||||
} |
||||
|
||||
.uploader-default { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
width: $avatar-width !important; |
||||
height: $avatar-width; |
||||
text-align: center; |
||||
background: rgba(0, 0, 0, 0.04); |
||||
|
||||
i { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: #8c939d; |
||||
} |
||||
|
||||
p { |
||||
margin-top: 10px; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
line-height: 1; |
||||
} |
||||
} |
||||
|
||||
.avatar { |
||||
width: $avatar-width; |
||||
height: $avatar-width; |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
.el-upload__tip { |
||||
margin-top: 0; |
||||
|
||||
p { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
line-height: 1; |
||||
|
||||
&:first-child { |
||||
margin-bottom: 5px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/deep/ .d-inline-block { |
||||
width: 216px; |
||||
|
||||
.el-select, .el-input { |
||||
width: 100%; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,271 +0,0 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<h6 class="p-title">筛选</h6> |
||||
<div class="tool"> |
||||
<ul class="filter"> |
||||
<li> |
||||
<el-input placeholder="请输入角色名称" prefix-icon="el-icon-search" v-model.trim="keyword" clearable></el-input> |
||||
</li> |
||||
</ul> |
||||
<div> |
||||
<el-button v-auth="'角色权限:新增角色'" type="info" round @click="addRole">新增角色</el-button> |
||||
<el-button v-auth="'角色权限:批量删除'" type="primary" round @click="delAllSelection">批量删除</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys"> |
||||
<el-table-column type="selection" width="55" align="center" :selectable="practiceSelectable" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||
<el-table-column prop="roleName" label="角色名称" align="center" min-width="250" show-overflow-tooltip></el-table-column> |
||||
<el-table-column label="角色描述" min-width="400" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-input placeholder="该角色用于管理全部功能权限" v-model="scope.row.remark" disabled></el-input> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="200"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'角色权限:查看'" type="text" @click="showRole(scope.row)">查看</el-button> |
||||
<el-button v-auth="'角色权限:编辑'" v-if="scope.row.roleName !== '超级管理员'" type="text" @click="editRole(scope.row)">编辑</el-button> |
||||
<el-button v-auth="'角色权限:删除'" v-if="scope.row.roleName !== '超级管理员' && scope.row.roleName !== '管理员'" type="text" @click="handleDelete(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 ? '查看角色' : (isAdd ? '新增角色' : '编辑角色')" :visible.sync="roleVisible" width="30%" @close="closeRole" class="dialog" :close-on-click-modal="false"> |
||||
<el-form ref="form" label-width="80px" :disabled="isDetail"> |
||||
<el-form-item label="角色名称"> |
||||
<el-input v-model="form.roleName" placeholder="请输入角色名称"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="角色描述"> |
||||
<el-input v-model="form.remark" placeholder="请输入角色描述" type="textarea" rows="5"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="role" label="角色权限"> |
||||
<div style="max-height: 300px; overflow: auto"> |
||||
<el-tree |
||||
ref="per" |
||||
:data="permissions" |
||||
show-checkbox |
||||
default-expand-all |
||||
node-key="id" |
||||
:default-expanded-keys="checkedIds" |
||||
:default-checked-keys="checkedIds" |
||||
:props="defaultProps"> |
||||
</el-tree> |
||||
</div> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer" v-if="!isDetail"> |
||||
<el-button @click="roleVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="saveData">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import Setting from "@/setting"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
keyword: "", |
||||
searchTimer: null, |
||||
isDetail: false, |
||||
form: { |
||||
id: "", |
||||
roleName: "", |
||||
remark: "" |
||||
}, |
||||
listData: [], |
||||
defaultProps: { |
||||
children: "children", |
||||
label: "name" |
||||
}, |
||||
page: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
multipleSelection: [], |
||||
isAdd: true, |
||||
roleVisible: false, |
||||
permissions: [], |
||||
checkedIds: [], |
||||
roleNameReapeat: false // 角色名称是否重复 |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.getData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getData(); |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.$get(`${this.api.roleList}?page=${this.page}&size=${this.pageSize}&name=${util.encodeStr(this.keyword)}&platformId=1&port=0`).then(res => { |
||||
this.listData = res.rolePage.records; |
||||
this.total = res.rolePage.total; |
||||
}).catch(res => {}); |
||||
}, |
||||
currentChange(val) { |
||||
this.page = val; |
||||
this.getData(); |
||||
}, |
||||
handleDelete(row) { |
||||
this.$confirm("确定要删除吗？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(`${this.api.batchRemove}?roleIds=${row.id}`).then(res => { |
||||
util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => {}); |
||||
}).catch(() => {}); |
||||
}, |
||||
getRowKeys(row) { |
||||
return row.id; |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
delAllSelection() { |
||||
if (this.multipleSelection.length) { |
||||
this.$confirm("确定要删除吗？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
let ids = this.multipleSelection.map(item => { |
||||
return item.id; |
||||
}); |
||||
this.$post(`${this.api.batchRemove}?roleIds=${ids.toString()}`).then(res => { |
||||
this.$refs.table.clearSelection(); |
||||
util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => {}); |
||||
if(this.multipleSelection.length === this.listData.length && this.page>1) { |
||||
this.handleCurrentChange(this.page - 1) |
||||
} |
||||
}).catch(() => {}); |
||||
} else { |
||||
util.errorMsg("请先选择数据！"); |
||||
} |
||||
}, |
||||
practiceSelectable(row, index){ |
||||
let boolean = true; |
||||
if(row.roleName == '超级管理员'){ |
||||
boolean = false |
||||
}else{ |
||||
boolean = true |
||||
} |
||||
return boolean; |
||||
}, |
||||
closeRole() { |
||||
this.isDetail = false; |
||||
this.form = { |
||||
id: "", |
||||
roleName: "", |
||||
remark: "" |
||||
}; |
||||
this.checkedIds = []; |
||||
this.permissions = []; |
||||
}, |
||||
// 获取权限菜单 |
||||
getPer(row) { |
||||
if (!this.permissions.length) { |
||||
this.$get(`${this.api.queryAllMenus}?platformId=${Setting.platformId}`).then(res => { |
||||
let data = res.children; |
||||
// 因为有些菜单是后来去掉的，但是数据库里要去掉的话就得全部重新加了，所以就在前端来手动把不需要了的菜单给去掉，下面同理 |
||||
let yw = data.findIndex(n => n.name == "业务后台"); |
||||
yw != -1 && data.splice(yw, 1); |
||||
try { |
||||
let system = data.findIndex(n => n.name == "系统设置"); |
||||
|
||||
if (system != -1) { |
||||
data[system].children[1].children.splice(4, 1); |
||||
data[system].children[1].children.splice(1, 1); |
||||
data[system].children[1].children.splice(0, 1); |
||||
} |
||||
} catch (error) { |
||||
} |
||||
this.permissions = data; |
||||
if (row) { |
||||
this.getDetail(row); |
||||
} |
||||
}).catch(res => { |
||||
}); |
||||
} |
||||
}, |
||||
addRole() { |
||||
this.isAdd = true; |
||||
this.getPer(); |
||||
this.checkedIds = []; |
||||
this.permissions.length && this.$refs.per.setCheckedNodes([]); |
||||
this.roleVisible = true; |
||||
}, |
||||
// 递归处理勾选的权限 |
||||
handleRolePer(data, permissions) { |
||||
let result = data; |
||||
if (permissions.length) { |
||||
permissions.map(e => { |
||||
if (result.includes(e.id) && e.children) { |
||||
// 如果该权限下的子权限不是每个都勾选了,就把该权限的id从已勾选的id集合里去除,因为如果不去除的话,这个权限就会勾选,同时会把该权限下的所有子权限都一起勾选 |
||||
e.children.every(n => result.includes(n)) || result.splice(result.indexOf(e.id), 1); |
||||
} |
||||
e.children && e.children.length && this.handleRolePer(data, e.children); |
||||
}); |
||||
} |
||||
return result; |
||||
}, |
||||
async getDetail(row) { // 查询详情 |
||||
let res = await this.$get(`${this.api.obtainDetails}?id=${row.id}`); |
||||
this.form = res.role; |
||||
this.form.id = row.id; |
||||
this.checkedIds = this.handleRolePer(res.permissionList, this.permissions); |
||||
this.$refs.per.setCheckedNodes(this.checkedIds); |
||||
}, |
||||
showRole(row) { |
||||
this.isDetail = true; |
||||
this.isAdd = false; |
||||
this.getPer(row); |
||||
this.roleVisible = true; |
||||
}, |
||||
editRole(row) { |
||||
this.isAdd = false; |
||||
this.getPer(row); |
||||
this.roleVisible = true; |
||||
}, |
||||
async saveData() { |
||||
if (!this.form.roleName) return util.warningMsg("请填写角色名称"); |
||||
if (!this.form.remark) return util.warningMsg("请填写角色描述"); |
||||
if (!this.$refs.per.getCheckedKeys().length) return util.warningMsg("请选择角色权限"); |
||||
// 获取已勾选的,和半勾选的(即子级没有全部勾选的节点),半勾选的一样要传给后端 |
||||
let permissionId = [...this.$refs.per.getHalfCheckedKeys(), ...this.$refs.per.getCheckedKeys()]; |
||||
let data = { |
||||
...this.form, |
||||
permissionId, |
||||
platformId:1, |
||||
}; |
||||
if (this.form.id) { |
||||
this.$post(this.api.saveOrUpdate, data).then(res => { |
||||
util.successMsg("修改成功"); |
||||
this.getData(); |
||||
this.roleVisible = false; |
||||
}).catch(res => {}); |
||||
} else { |
||||
this.$post(this.api.saveOrUpdate, data).then(res => { |
||||
util.successMsg("新增成功"); |
||||
this.getData(); |
||||
this.roleVisible = false; |
||||
}).catch(res => {}); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -1,585 +0,0 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="side"> |
||||
<org ref="org" @getSingle="getSingle" @getCheck="getCheck"></org> |
||||
</div> |
||||
|
||||
<div class="right"> |
||||
<h6 class="p-title">筛选</h6> |
||||
<div class="tool"> |
||||
<ul class="filter"> |
||||
<li> |
||||
<el-input placeholder="请输入员工姓名/工号" prefix-icon="el-icon-search" v-model.trim="keyword" clearable></el-input> |
||||
</li> |
||||
</ul> |
||||
<div> |
||||
<el-button v-auth="'员工管理:新增员工'" type="info" round @click="addTeacher">新增员工</el-button> |
||||
<el-button v-auth="'员工管理:批量导入'" type="primary" round @click="batchImport">批量导入</el-button> |
||||
<el-button v-auth="'员工管理:批量删除'" type="primary" round @click="delAllSelection">批量删除</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange"> |
||||
<el-table-column type="selection" width="55" align="center"></el-table-column> |
||||
<el-table-column type="index" label="序号" width="55" align="center"></el-table-column> |
||||
<el-table-column prop="userName" label="职工姓名" align="center"></el-table-column> |
||||
<el-table-column prop="workNumber" label="职工工号" align="center"></el-table-column> |
||||
<el-table-column prop="dept" label="部门" align="center"></el-table-column> |
||||
<el-table-column prop="roleName" label="账号角色" align="center"></el-table-column> |
||||
<el-table-column prop="logInNumber" label="登录次数" align="center"></el-table-column> |
||||
<el-table-column prop="lastLoginTime" label="上次登录时间" align="center"></el-table-column> |
||||
<el-table-column label="操作" width="200" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'员工管理:员工查看'" type="text" @click="showTeacher(scope.row)">查看</el-button> |
||||
<el-button v-auth="'员工管理:员工编辑'" type="text" @click="editTeacher(scope.row)">编辑</el-button> |
||||
<el-button v-auth="'员工管理:重置密码'" type="text" @click="resetPassword(scope.row)">重置密码</el-button> |
||||
<el-button v-auth="'员工管理:员工删除'" type="text" @click="delTeacher(scope.row)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :current-page="page" @current-change="handleCurrentChange" :total="total"></el-pagination> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-dialog :title="isDetail ? '查看员工' : (isAdd ? '新增员工' : '编辑员工')" :visible.sync="teacherVisible" |
||||
width="30%" @close="closeTeacher" class="dialog" :close-on-click-modal="false"> |
||||
<el-form ref="form" :model="form" :rules="rules" label-width="150px" :disabled="isDetail" style='margin-right: 80px;'> |
||||
<el-form-item prop="workNumber" label="工号"> |
||||
<el-input v-model.trim="form.workNumber" placeholder="请输入职工工号" @blur="workNumberChange"></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="roleValue" label="账号角色"> |
||||
<el-select v-model="form.roleValue" @change="roleChange" @remove-tag="roleRemove" multiple style="width: 100%;height: 32px"> |
||||
<el-option |
||||
v-for="item in roleList" |
||||
:key="item.id" |
||||
:label="item.roleName" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item prop="uniqueIdentification" label="唯一标识"> |
||||
<el-input disabled v-model.trim="form.uniqueIdentification" placeholder="请输入职工工号获取唯一标识"></el-input> |
||||
</el-form-item> |
||||
<el-form-item v-for="item in form.roleAndDeptList" :label="`${item.roleName}所属部门`" :rules="{ |
||||
required: true, message: '请选择', trigger: 'change' |
||||
}"> |
||||
<el-cascader |
||||
v-model="item.cascaderValue" |
||||
:options="orgList" |
||||
:props="casProps" |
||||
style="width: 100%" |
||||
></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> |
||||
<span slot="footer" class="dialog-footer" v-if="!isDetail"> |
||||
<el-button @click="closeTeacher">取 消</el-button> |
||||
<el-button type="primary" @click="saveSure('form')">确 定</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 @click="importVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="uploadSure">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Setting from "@/setting"; |
||||
import util from "@/libs/util"; |
||||
import org from "./staffSide" |
||||
import { mapState } from "vuex"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
exportCode: "", |
||||
headers: { |
||||
token: util.local.get(Setting.tokenKey) |
||||
}, |
||||
isDetail: false, |
||||
isAdd: false, |
||||
teacherVisible: false, |
||||
roleList: [], // 角色列表 |
||||
orgList: [], // 员工组织架构列表 |
||||
casProps: { |
||||
value: 'id' |
||||
}, |
||||
originForm: {}, |
||||
form: { |
||||
accountId: "", |
||||
account: "", |
||||
userName: "", |
||||
roleValue: [], |
||||
roleAndDeptList: [], |
||||
uniqueIdentification: "", |
||||
workNumber: "", |
||||
phone: "", |
||||
email: "" |
||||
}, |
||||
rules: { |
||||
userName: [ |
||||
{ required: true, message: "请输入用户姓名", trigger: "blur" } |
||||
], |
||||
roleValue: [ |
||||
{ required: true, message: "请选择账号角色", trigger: "change" } |
||||
], |
||||
workNumber: [ |
||||
{ required: true, message: "请输入工号", trigger: 'blur' }, |
||||
{ |
||||
pattern: /^[A-Za-z0-9]*$/, |
||||
message: "职工工号必须为数字或英文", |
||||
trigger: "blur" |
||||
} |
||||
], |
||||
uniqueIdentification: [ |
||||
// { required: true, message: '请输入唯一标识', trigger: 'blur' }, |
||||
], |
||||
phone: [ |
||||
{ pattern: /^1[3456789]\d{9}$/, message: "请输入正确的手机号", trigger: "blur"} |
||||
], |
||||
email: [ |
||||
{ |
||||
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, |
||||
message: "请输入正确的邮箱", |
||||
trigger: "blur" |
||||
} |
||||
], |
||||
}, |
||||
workNumberReapeat: false, |
||||
phoneRepeat: false, |
||||
emailRepeat: false, |
||||
|
||||
listData: [], // 员工列表数据 |
||||
keyword: "", |
||||
page: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
multipleSelection: [], // 多选 |
||||
|
||||
importVisible: false, // 批量导入对话框 |
||||
uploadList: [], // 上传文件列表 |
||||
uploadFaild: false, // 上传失败 |
||||
|
||||
gradeId: "", // 员工年级ID |
||||
staffArchitectureId: "", // 员工部门ID |
||||
submiting: false // 新增编辑员工防抖标识 |
||||
}; |
||||
}, |
||||
components: { |
||||
org |
||||
}, |
||||
computed: { |
||||
...mapState("user", [ |
||||
'schoolId' |
||||
]) |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.originForm = JSON.parse(JSON.stringify(this.form)) |
||||
this.getRoleData() |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getSingle(data) { |
||||
this.staffArchitectureId = data.gradeId ? '' : data.staffArchitectureId |
||||
this.gradeId = data.gradeId || '' |
||||
this.initData() |
||||
}, |
||||
getCheck(data) { |
||||
const marjorIds = [] |
||||
const depIds = [] |
||||
data.forEach(e => { |
||||
e.gradeId ? depIds.push(e.gradeId) : marjorIds.push(e.staffArchitectureId) |
||||
}); |
||||
this.staffArchitectureId = marjorIds.toString() |
||||
this.gradeId = depIds.toString() |
||||
this.initData() |
||||
}, |
||||
initData() { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
getData() { // 获取员工列表数据 |
||||
let data = { |
||||
keyWord: this.keyword, |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
staffArchitectureId: this.staffArchitectureId, |
||||
gradeId: this.gradeId |
||||
}; |
||||
this.$post(this.api.staffList, data).then(res => { |
||||
this.listData = res.page.records; |
||||
this.total = res.page.total; |
||||
}).catch(res => {}); |
||||
}, |
||||
getRoleData() { // 获取角色数据 |
||||
this.roleList =[]; |
||||
this.$get(`${this.api.roleList}?page=1&size=100&name=&platformId=1&port=0`).then(res => { |
||||
for(var i=0;i<res.rolePage.records.length;i++){ |
||||
if (res.rolePage.records[i].roleName == '超级管理员'){ |
||||
|
||||
}else{ |
||||
this.roleList.push(res.rolePage.records[i]) |
||||
} |
||||
} |
||||
// this.roleList = res.rolePage.records; |
||||
}).catch(res => {}); |
||||
}, |
||||
closeTeacher() { // 关闭新增/编辑员工对话框 |
||||
this.form = { |
||||
accountId: "", |
||||
account: "", |
||||
userName: "", |
||||
roleValue: [], |
||||
roleAndDeptList: [], |
||||
uniqueIdentification: "", |
||||
workNumber: "", |
||||
phone: "", |
||||
email: "" |
||||
}; |
||||
this.$refs.form.clearValidate(); |
||||
this.teacherVisible = false; |
||||
}, |
||||
addTeacher() { // 新增员工 |
||||
this.isDetail = false; |
||||
this.isAdd = true; |
||||
this.teacherVisible = true; |
||||
this.orgList = this.$refs.org.orgList; |
||||
}, |
||||
getStaffDetail(accountId) { // 获取员工详情 |
||||
this.$get(`${this.api.staffDetail}?accountId=${accountId}`).then(res => { |
||||
let { data } = res; |
||||
this.form = data; |
||||
this.form.roleValue = data.roleAndDeptList.map(i => i.roleId); |
||||
this.form.roleAndDeptList = data.roleAndDeptList.map(i => { |
||||
i.cascaderValue = [i.staffArchitectureId, i.gradeId] |
||||
return i; |
||||
}); |
||||
console.log(22, this.form) |
||||
}).catch(res => {}); |
||||
}, |
||||
resetPassword(row) { // 重置密码 |
||||
this.$confirm(`重置后的密码为：${Setting.initialPassword}，确定重置？`, "提示", { type: "warning" }).then(() => { |
||||
this.$get(`${this.api.resetPassword}?userId=${row.userId}&newPwd=111aaa`).then(res => { |
||||
util.successMsg("重置成功"); |
||||
}).catch(res => { |
||||
}); |
||||
}).catch(() => { |
||||
}); |
||||
}, |
||||
editTeacher(row) { // 处理编辑 |
||||
this.isDetail = false; |
||||
this.isAdd = false; |
||||
this.teacherVisible = true; |
||||
this.orgList = this.$refs.org.orgList; |
||||
this.getStaffDetail(row.accountId); |
||||
}, |
||||
showTeacher(row) { // 处理查看 |
||||
this.isDetail = true; |
||||
this.isAdd = false; |
||||
this.teacherVisible = true; |
||||
this.orgList = this.$refs.org.orgList; |
||||
this.getStaffDetail(row.accountId); |
||||
}, |
||||
// 组合账号 |
||||
renderAccount() { |
||||
const form = this.form |
||||
// 平台id-端id-schoolId-workNumber组成账号 |
||||
form.account = `${Setting.platformId}-0-${this.schoolId}-${form.workNumber}` |
||||
}, |
||||
workNumberChange() { // 切换工号 |
||||
const form = this.form |
||||
const { workNumber, accountId } = form |
||||
if (workNumber) { |
||||
this.$post(`${this.api.checkWorkNumOrAccount}?platformId=${Setting.platformId}&type=${Setting.platformType}${accountId ? `&accountId=${form.accountId}` : ''}&workNumber=${workNumber}&account=`).then(res => { |
||||
if (res.status === 200) { |
||||
this.workNumberReapeat = false |
||||
this.renderAccount() |
||||
} |
||||
}).catch( err => { |
||||
this.workNumberReapeat = true |
||||
}) |
||||
} else { |
||||
this.renderAccount() |
||||
} |
||||
}, |
||||
phoneChange() { // 切换手机号 |
||||
let regex = /^1[3456789]\d{9}$/; |
||||
if (regex.test(this.form.phone)) { |
||||
let url = ""; |
||||
if (this.isAdd) { |
||||
url = `${this.api.checkEmailOrPhone}?phone=${this.form.phone}&email=`; |
||||
} else { |
||||
url = `${this.api.checkEmailOrPhone}?accountId=${this.form.accountId}&phone=${this.form.phone}&email=`; |
||||
} |
||||
this.$post(url).then(res => { |
||||
if (res.status === 200) { |
||||
this.phoneRepeat = false; |
||||
} |
||||
}).catch( err => { |
||||
this.phoneRepeat = true; |
||||
}); |
||||
} |
||||
}, |
||||
emailChange() { // 切换邮箱 |
||||
let regex = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; |
||||
if (regex.test(this.form.email)) { |
||||
let url = ""; |
||||
if (this.isAdd) { |
||||
url = `${this.api.checkEmailOrPhone}?email=${this.form.email}&phone=`; |
||||
} else { |
||||
url = `${this.api.checkEmailOrPhone}?accountId=${this.form.accountId}&email=${this.form.email}&phone=`; |
||||
} |
||||
this.$post(url).then(res => { |
||||
if (res.status === 200) { |
||||
this.emailRepeat = false; |
||||
} |
||||
}).catch( err => { |
||||
this.emailRepeat = true; |
||||
}); |
||||
} |
||||
}, |
||||
roleChange(value) { // 处理切换角色 |
||||
console.log(this.form.roleValue) |
||||
if (value.length) { |
||||
let ids = this.form.roleAndDeptList.map(e => e.roleId); |
||||
this.roleList.forEach(i => { |
||||
let obj = { |
||||
roleId: "", |
||||
roleName: "", |
||||
cascaderValue: [] |
||||
}; |
||||
if (value.includes(i.id) && !ids.includes(i.id)) { |
||||
console.log(i) |
||||
obj.roleId = i.id; |
||||
obj.roleName = i.roleName; |
||||
this.form.roleAndDeptList.push(obj); |
||||
} |
||||
}); |
||||
} else { |
||||
this.form.roleAndDeptList.splice(0); |
||||
} |
||||
}, |
||||
roleRemove(value) { // 处理移除角色 |
||||
let list = []; |
||||
for(var i=0;i<this.form.roleAndDeptList.length;i++){ |
||||
if (this.form.roleAndDeptList[i].roleId == value){ |
||||
|
||||
}else{ |
||||
list.push(this.form.roleAndDeptList[i]) |
||||
} |
||||
} |
||||
this.form.roleAndDeptList = list |
||||
}, |
||||
async saveSure(form) { |
||||
this.$refs[form].validate((valid) => { |
||||
if (valid) { |
||||
if (this.submiting) return false |
||||
if (this.workNumberReapeat) return util.errorMsg('工号/学号已存在!'); |
||||
if (this.phoneRepeat) return util.errorMsg("该手机号已存在"); |
||||
if (this.emailRepeat) return util.errorMsg("该邮箱已存在"); |
||||
let data = { |
||||
accountId: this.form.accountId, |
||||
account: this.form.account, |
||||
userName: this.form.userName, |
||||
roleAndDeptList: [], |
||||
uniqueIdentification: this.form.uniqueIdentification ? this.form.uniqueIdentification : new Date().getTime(), |
||||
workNumber: this.form.workNumber, |
||||
phone: this.form.phone, |
||||
email: this.form.email |
||||
}; |
||||
if (this.form.roleAndDeptList.length){ |
||||
for (let i = 0; i < this.form.roleAndDeptList.length; i++) { |
||||
if (this.form.roleAndDeptList[i].cascaderValue.length < 2) { |
||||
util.warningMsg(`请选择${this.form.roleAndDeptList[i].roleName}所属部门`) |
||||
return; |
||||
} else { |
||||
let obj = { |
||||
roleId: this.form.roleAndDeptList[i].roleId, |
||||
staffArchitectureId: this.form.roleAndDeptList[i].cascaderValue[0], |
||||
gradeId: this.form.roleAndDeptList[i].cascaderValue[1] |
||||
}; |
||||
data.roleAndDeptList.push(obj); |
||||
} |
||||
} |
||||
} |
||||
this.submiting = true |
||||
if (this.form.accountId) { |
||||
this.$post(this.api.modifyStaff, data).then(res => { |
||||
util.successMsg("编辑成功"); |
||||
this.closeTeacher(); |
||||
this.getData(); |
||||
this.submiting = false |
||||
}).catch(res => { |
||||
this.submiting = false |
||||
}); |
||||
} else { |
||||
this.$post(this.api.saveStaff, data).then(res => { |
||||
util.successMsg("添加成功"); |
||||
this.closeTeacher(); |
||||
this.getData(); |
||||
this.submiting = false |
||||
}).catch(res => { |
||||
this.submiting = false |
||||
}); |
||||
} |
||||
} else { |
||||
return false; |
||||
} |
||||
}); |
||||
}, |
||||
delTeacher(row) { |
||||
this.$confirm("确定要删除吗？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(`${this.api.delStaff}?accountIds=${row.accountId}`).then(res => { |
||||
util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => {}); |
||||
}).catch(() => {}); |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
delAllSelection() { |
||||
if (this.multipleSelection.length) { |
||||
// 批量删除 |
||||
this.$confirm("确定要删除吗？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
let ids = this.multipleSelection.map(item => { |
||||
return item.accountId; |
||||
}); |
||||
this.$post(`${this.api.delStaff}?accountIds=${ids.toString()}`).then(res => { |
||||
this.multipleSelection = []; |
||||
this.$refs.table.clearSelection(); |
||||
util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
}).catch(() => { |
||||
}); |
||||
} else { |
||||
util.errorMsg("请先选择员工 ！"); |
||||
} |
||||
}, |
||||
batchImport() { |
||||
this.importVisible = true; |
||||
this.uploadList = []; |
||||
this.uploadFaild = false; |
||||
}, |
||||
searchTeacher() { |
||||
this.page = 1; |
||||
this.getData(); |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page = val; |
||||
this.getData(); |
||||
}, |
||||
downLoad() { |
||||
location.href = this.api.staffTemplate; |
||||
}, |
||||
showFaild() { |
||||
location.href = `${this.api.exportFailureStaff}?exportCode=${this.exportCode}`; |
||||
}, |
||||
// 上传文件 |
||||
handleExceed(files, fileList) { |
||||
util.warningMsg( |
||||
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||
); |
||||
}, |
||||
uploadSuccess(res, file, fileList) { |
||||
console.log(res); |
||||
this.uploadFaild = false; |
||||
if (res.status === 200) { |
||||
if (res.data.exportCode) { |
||||
this.exportCode = res.data.exportCode; |
||||
this.uploadFaild = true; |
||||
} |
||||
util.successMsg(`上传成功${res.data.successNum}，上传失败${res.data.failureNum}`); |
||||
} else { |
||||
res.message ? util.errorMsg(res.message) : 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.page = 1; |
||||
this.keyword = ""; |
||||
this.getData(); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
display: flex; |
||||
padding: 0 24px; |
||||
.side { |
||||
width: 300px; |
||||
padding: 24px 10px 24px 0; |
||||
margin-right: 24px; |
||||
border-right: 1px solid rgba(0, 0, 0, 0.06); |
||||
} |
||||
.right { |
||||
width: calc(100% - 374px); |
||||
padding: 24px; |
||||
} |
||||
} |
||||
.el-input__inner{ |
||||
height: 32px; |
||||
} |
||||
</style> |
||||
@ -1,391 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<div> |
||||
<div class="flex-between m-b-20"> |
||||
<h6 class="p-title" style="margin-bottom: 0">员工组织架构</h6> |
||||
<el-button type="text" @click="addMajor" v-auth="'员工管理:新增专业'">添加</el-button> |
||||
</div> |
||||
<org-tree |
||||
:data="orgList" |
||||
show-checkbox |
||||
default-expand-all |
||||
ref="orgTree" |
||||
node-key="id" |
||||
highlight-current |
||||
:expand-on-click-node="false" |
||||
@node-click="getSingle" |
||||
@check="getCheck" |
||||
:props="{children: 'children', label: 'label', isLeaf: 'leaf'}" |
||||
> |
||||
<span class="custom-tree-node" slot-scope="{ node, data }"> |
||||
<span style="display: inline-block; margin-right: 20px">{{ node.label }}</span> |
||||
<span> |
||||
<el-button |
||||
v-auth="'员工管理:新增专业'" |
||||
type="text" |
||||
icon="el-icon-edit-outline" |
||||
@click="() => handleEdit(node, data)"> |
||||
</el-button> |
||||
<el-button |
||||
v-auth="'员工管理:编辑专业'" |
||||
v-if="node.level === 1" |
||||
type="text" |
||||
icon="el-icon-circle-plus-outline" |
||||
@click="() => handleAdd(node, data)"> |
||||
</el-button> |
||||
<el-button |
||||
v-auth="'员工管理:删除专业'" |
||||
type="text" |
||||
icon="el-icon-delete" |
||||
@click="() => handleDel(node, data)"> |
||||
</el-button> |
||||
</span> |
||||
</span> |
||||
</org-tree> |
||||
</div> |
||||
|
||||
<el-dialog :title="Form.staffArchitectureId ? '编辑部门' : '新增部门'" :visible.sync="majorVisible" width="24%" center @close="closeAdd" :close-on-click-modal="false"> |
||||
<el-form ref="Form" :model="Form" :rules="rules"> |
||||
<el-form-item prop="staffArchitectureName"> |
||||
<el-input placeholder="请输入专业名称" v-model="Form.staffArchitectureName"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="majorVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="sure('Form')">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
<el-dialog :title="Form.gradeId ? '编辑部门' : '新增部门'" :visible.sync="depVisible" width="24%" center @close="closeAdd" :close-on-click-modal="false"> |
||||
<el-form ref="Form" :model="Form" :rules="rules"> |
||||
<el-form-item prop="gradeName"> |
||||
<el-input placeholder="请输入部门名称" v-model="Form.gradeName"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="depVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="sureDepartment('Form')">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import OrgTree from "@/components/org-tree/src/tree"; |
||||
export default { |
||||
props: ["Data"], |
||||
data() { |
||||
return { |
||||
orgList: [], |
||||
firactive: 0, |
||||
twoactive: 0, |
||||
majorVisible: false, |
||||
depVisible: false, |
||||
Form: { |
||||
staffArchitectureId: "", // 专业ID |
||||
staffArchitectureName: "", // // 专业名称 |
||||
gradeId: "", |
||||
gradeName: "" |
||||
}, |
||||
rules: { |
||||
staffArchitectureName: [ |
||||
{ required: true, message: "请输入专业名称", trigger: "blur" } |
||||
], |
||||
gradeName: [ |
||||
{ required: true, message: "请输入部门名称", trigger: "blur" } |
||||
] |
||||
}, |
||||
staffstateProfessId: "", |
||||
staffstateId: "", |
||||
}; |
||||
}, |
||||
components: { |
||||
OrgTree |
||||
}, |
||||
mounted() { |
||||
this.getStaff() |
||||
}, |
||||
methods: { |
||||
getStaff() { |
||||
this.$get(this.api.professionalList).then(res => { |
||||
if (res.data && res.data.length) { |
||||
res.data.map(e => { |
||||
(e.ifVisible = false), (e.ischeck = false), (e.label = e.staffArchitectureName), (e.id = e.staffArchitectureId); |
||||
let data = { |
||||
staffArchitectureId: e.staffArchitectureId |
||||
} |
||||
this.$get(this.api.staffGradeList, data).then(res => { |
||||
res.data.map(e => { |
||||
(e.ischeck = false), (e.label = e.gradeName), (e.id = e.gradeId) |
||||
}) |
||||
e.children = res.data |
||||
}).catch(res => {}) |
||||
}); |
||||
} |
||||
setTimeout(() => { |
||||
this.orgList = res.data; |
||||
}, 500) |
||||
}).catch(res => {}) |
||||
}, |
||||
closeAdd() { |
||||
this.$refs.Form.resetFields() |
||||
}, |
||||
getSingle(data) { |
||||
this.$emit('getSingle', data) |
||||
}, |
||||
getCheck(data, checked) { |
||||
this.$emit('getCheck', checked.checkedNodes) |
||||
}, |
||||
// 新增编辑专业 |
||||
addMajor() { |
||||
this.Form.staffArchitectureId = '' |
||||
this.Form.staffArchitectureName = '' |
||||
this.majorVisible = true |
||||
}, |
||||
sure(Form) { // 提交新增/修改专业 |
||||
this.$refs[Form].validate((valid) => { |
||||
if (valid) { |
||||
let data = { |
||||
staffArchitectureName: this.Form.staffArchitectureName, |
||||
staffArchitectureId: this.Form.staffArchitectureId, |
||||
isDel: 0 // 是否删除(0、未删除 1、已删除) |
||||
}; |
||||
if (this.Form.staffArchitectureId) { |
||||
this.$post(this.api.updateProfessional, data).then(res => { |
||||
util.successMsg("编辑成功"); |
||||
this.majorVisible = false; |
||||
this.orgList.map(e => { |
||||
if (e.staffArchitectureId == this.Form.staffArchitectureId) { |
||||
e.staffArchitectureName = this.Form.staffArchitectureName; |
||||
e.label = this.Form.staffArchitectureName; |
||||
} |
||||
}); |
||||
this.$emit("getData"); |
||||
}).catch(res => { |
||||
}); |
||||
} else { |
||||
this.$post(this.api.saveProfessional, data).then(res => { |
||||
util.successMsg("添加成功"); |
||||
this.majorVisible = false; |
||||
let newData = { |
||||
staffArchitectureId: res.staffArchitectureId, |
||||
staffArchitectureName: this.Form.staffArchitectureName, |
||||
label: this.Form.staffArchitectureName, |
||||
value: res.staffArchitectureId, |
||||
ifVisible: false, |
||||
ischeck: false, |
||||
children: [] |
||||
}; |
||||
this.orgList.push(newData); |
||||
}).catch(res => { |
||||
}); |
||||
} |
||||
} else { |
||||
return false; |
||||
} |
||||
}); |
||||
}, |
||||
handleAdd(node, data) { // 添加部门 |
||||
this.Form.gradeId = '' |
||||
this.Form.gradeName = '' |
||||
this.depVisible = true |
||||
this.Form.staffArchitectureId = data.staffArchitectureId |
||||
}, |
||||
handleEdit(node, data) { // 编辑部门 |
||||
if (node.level === 1) { |
||||
this.Form.staffArchitectureId = data.staffArchitectureId |
||||
this.Form.staffArchitectureName = data.staffArchitectureName |
||||
this.majorVisible = true |
||||
} else { |
||||
this.Form.gradeId = data.gradeId |
||||
this.Form.gradeName = data.gradeName |
||||
this.depVisible = true |
||||
} |
||||
for (let j = 0; j < this.orgList.length; j++) { |
||||
for (let k = 0; k < this.orgList[j].children.length; k++) { |
||||
if (this.orgList[j].children[k].gradeName == data.gradeName) { |
||||
this.Form.staffArchitectureId = this.orgList[j].staffArchitectureId; |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
sureDepartment(Form) { // 提交新增编辑部门 |
||||
this.$refs[Form].validate((valid) => { |
||||
if (valid) { |
||||
let data = { |
||||
gradeId: this.Form.gradeId, |
||||
gradeName: this.Form.gradeName, |
||||
staffArchitectureId: this.Form.staffArchitectureId |
||||
}; |
||||
if (this.Form.gradeId) { |
||||
this.$post(this.api.updateGrade, data).then(res => { |
||||
util.successMsg("编辑成功"); |
||||
this.depVisible = false; |
||||
this.orgList.map(e => { |
||||
e.children.map(r => { |
||||
if (r.gradeId == this.Form.gradeId) { |
||||
r.gradeName = this.Form.gradeName; |
||||
r.label = this.Form.gradeName; |
||||
} |
||||
}); |
||||
}); |
||||
}).catch(res => { |
||||
}); |
||||
} else { |
||||
this.$post(this.api.saveGrade, data).then(res => { |
||||
util.successMsg("添加成功"); |
||||
this.depVisible = false; |
||||
let newData = { |
||||
gradeId: res.gradeId, |
||||
gradeName: this.Form.gradeName, |
||||
label: this.Form.gradeName, |
||||
value: res.gradeId, |
||||
ifVisible: false, |
||||
ischeck: false |
||||
}; |
||||
this.orgList.map(e => { |
||||
if (e.staffArchitectureId == this.Form.staffArchitectureId) { |
||||
e.ifVisible = true; |
||||
e.children.push(newData); |
||||
} |
||||
}); |
||||
}).catch(res => { |
||||
}); |
||||
} |
||||
} else { |
||||
return false; |
||||
} |
||||
}); |
||||
}, |
||||
handleDel(node, data) { |
||||
node.level === 1 ? this.delMajor(data) : this.delDepartment(data) |
||||
}, |
||||
delMajor(item) { |
||||
this.$confirm("确定要删除该专业吗？该操作将会删除该组织下的用户账号。", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(`${this.api.deleteProfessional}?staffArchitectureId=${item.staffArchitectureId}`).then(res => { |
||||
util.successMsg("删除成功") |
||||
this.$emit("getData") |
||||
this.getStaff() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
}, |
||||
delDepartment(item) { |
||||
this.$confirm("确定要删除该部门吗？该操作将会删除该组织下的用户账号。", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(`${this.api.deleteGrade}?gradeId=${item.gradeId}`).then(res => { |
||||
util.successMsg("删除成功") |
||||
this.getStaff() |
||||
this.$emit("delDep", item, this.orgList) |
||||
this.$emit("getData") |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style scoped> |
||||
.side_view { |
||||
height: 800px; |
||||
padding: 40px 20px; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
.side_icon { |
||||
text-align: right; |
||||
} |
||||
|
||||
.side_icon i { |
||||
cursor: pointer; |
||||
font-size: 20px; |
||||
color: #9278FF; |
||||
} |
||||
|
||||
.side_tree { |
||||
width: 100%; |
||||
font-size: 14px; |
||||
color: #333; |
||||
} |
||||
|
||||
.side_tree i { |
||||
color: #9278FF; |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
.fir_back { |
||||
width: 100%; |
||||
padding: 15px 0; |
||||
background: rgba(255, 255, 255, 1); |
||||
/* box-shadow:1px 14px 29px 0px rgba(138,97,250,0.19); */ |
||||
border-radius: 10px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.fir_back:first-child { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.fir_back:hover { |
||||
box-shadow: 1px 14px 29px 0px rgba(138, 97, 250, 0.19); |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.fir_back span { |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
.two_active { |
||||
color: #9278FF; |
||||
} |
||||
|
||||
/* .two_active:hover{ |
||||
color: #9278FF; |
||||
cursor:pointer; |
||||
} */ |
||||
.two_back:hover { |
||||
cursor: pointer; |
||||
color: #9278FF; |
||||
} |
||||
|
||||
.mar_top { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
.back_active { |
||||
box-shadow: 1px 14px 29px 0px rgba(138, 97, 250, 0.19); |
||||
} |
||||
|
||||
.bor_lef { |
||||
padding: 20px 0 0 0; |
||||
margin-left: 40px; |
||||
} |
||||
|
||||
.three_lef { |
||||
margin-left: 60px; |
||||
padding: 20px 0; |
||||
} |
||||
|
||||
.three_text { |
||||
font-size: 14px; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.teacher_tab { |
||||
margin-left: 20px; |
||||
} |
||||
|
||||
.icon_select:before { |
||||
transform: rotate(180deg); |
||||
} |
||||
|
||||
.list-enter-active, .list-leave-active { |
||||
transition: all 1s; |
||||
} |
||||
|
||||
.list-enter, .list-leave-to { |
||||
opacity: 0; |
||||
transform: translateY(-30px); |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,131 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="tool"> |
||||
<div class="search-wrap"> |
||||
<el-input placeholder="请输入用户组名称" v-model.trim="keyword" clearable @keyup.enter.native="initData"></el-input> |
||||
<el-button type="primary" @click="initData">查询</el-button> |
||||
</div> |
||||
<div class="actions"> |
||||
<el-button type="primary" @click="add" >新增</el-button> |
||||
<el-button @click="batchDel">删除</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-table ref="table" :data="list" class="table" header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||
<el-table-column type="selection" width="50" :reserve-selection="true"></el-table-column> |
||||
<el-table-column prop="columnName" label="名称"></el-table-column> |
||||
<el-table-column prop="name" label="名称" align="center" min-width="250" show-overflow-tooltip></el-table-column> |
||||
<el-table-column prop="description" label="角色描述" min-width="400" align="center"></el-table-column> |
||||
<el-table-column label="操作" width="170"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="edit(scope.row, 'edit')">编辑</el-button> |
||||
<el-button type="text" @click="del(scope.row)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from '@/libs/util' |
||||
export default { |
||||
data() { |
||||
return { |
||||
keyword: '', |
||||
list: [], |
||||
multipleSelection: [], |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.$post(this.api.groupList, { |
||||
columnName: this.keyword, |
||||
templateId: '', |
||||
typeId : '', |
||||
}).then(({ data }) => { |
||||
this.list = data |
||||
}).catch(err => {}) |
||||
}, |
||||
initData() { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
add() { |
||||
this.$router.push('add') |
||||
}, |
||||
edit(row, type) { |
||||
this.$router.push(`add?id=${row.id}&level=${row.level + 1}&type=${type}`) |
||||
}, |
||||
del(row) { |
||||
this.$confirm("确定要删除吗？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(`${this.api.deleteColumn}?id=${row.id}`).then(res => { |
||||
util.successMsg("删除成功") |
||||
this.getData() |
||||
}).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('请先选择数据 ！') |
||||
} |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page = val |
||||
this.$router.push(`list?page=${val}`) |
||||
this.getData() |
||||
}, |
||||
// 更改排序 |
||||
sort() { |
||||
|
||||
}, |
||||
// 导航样式设置 |
||||
styleSet() { |
||||
this.styleVisible = true |
||||
}, |
||||
// 导航样式提交 |
||||
styleSubmit() { |
||||
|
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.styles { |
||||
display: inline-flex; |
||||
li { |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
&:hover .review { |
||||
border-color: #2962FF; |
||||
} |
||||
} |
||||
.review { |
||||
padding: 18px; |
||||
margin-bottom: 10px; |
||||
border: 1px solid #DCDEE0; |
||||
border-radius: 2px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,23 +0,0 @@ |
||||
import BasicLayout from "@/layouts/home"; |
||||
|
||||
const meta = {}; |
||||
|
||||
const pre = "system-"; |
||||
|
||||
export default { |
||||
path: "/system", |
||||
name: "system", |
||||
redirect: { |
||||
name: `${pre}list` |
||||
}, |
||||
meta, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
name: `${pre}list`, |
||||
path: `list`, |
||||
component: () => import("@/pages/system/list"), |
||||
meta: { title: "系统设置" } |
||||
} |
||||
] |
||||
}; |
||||
@ -0,0 +1,23 @@ |
||||
import BasicLayout from '@/layouts/home' |
||||
|
||||
const meta = {} |
||||
|
||||
const pre = 'userGroup-' |
||||
|
||||
export default { |
||||
path: '/userGroup', |
||||
name: 'userGroup', |
||||
redirect: { |
||||
name: `${pre}list` |
||||
}, |
||||
meta, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
name: `${pre}list`, |
||||
path: `list`, |
||||
component: () => import('@/pages/userGroup/list'), |
||||
meta: { title: '用户组管理' } |
||||
} |
||||
] |
||||
} |
||||
Loading…
Reference in new issue