parent
d9b4ec85b8
commit
47404574f7
12 changed files with 2198 additions and 39 deletions
@ -0,0 +1,270 @@ |
||||
<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 type="primary" round @click="addRole">新增角色</el-button> |
||||
<el-button 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 type="text" @click="showRole(scope.row)">查看</el-button> |
||||
<el-button v-if="scope.row.roleName !== '超级管理员'" type="text" @click="editRole(scope.row)">编辑</el-button> |
||||
<el-button 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 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=${this.keyword}&platformId=1`).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 => { |
||||
this.$message.success("删除成功"); |
||||
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(); |
||||
this.$message.success("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => {}); |
||||
if(this.multipleSelection.length === this.listData.length && this.page>1) { |
||||
this.handleCurrentChange(this.page - 1) |
||||
} |
||||
}).catch(() => {}); |
||||
} else { |
||||
this.$message.error("请先选择数据！"); |
||||
} |
||||
}, |
||||
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 this.$message.warning("请填写角色名称"); |
||||
if (!this.form.remark) return this.$message.warning("请填写角色描述"); |
||||
if (!this.$refs.per.getCheckedKeys().length) return this.$message.warning("请选择角色权限"); |
||||
// 获取已勾选的,和半勾选的(即子级没有全部勾选的节点),半勾选的一样要传给后端 |
||||
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 => { |
||||
this.$message.success("修改成功"); |
||||
this.getData(); |
||||
this.roleVisible = false; |
||||
}).catch(res => {}); |
||||
} else { |
||||
this.$post(this.api.saveOrUpdate, data).then(res => { |
||||
this.$message.success("新增成功"); |
||||
this.getData(); |
||||
this.roleVisible = false; |
||||
}).catch(res => {}); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,69 @@ |
||||
<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> |
||||
<dic v-if="active == 'dic'"></dic> |
||||
<log v-if="active == 'log'"></log> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from "@/setting"; |
||||
import staff from "./staff"; |
||||
import role from "./role"; |
||||
import dic from "./dic"; |
||||
import log from "./log"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
active: "staff", |
||||
tabs: { |
||||
staff: "后台账号", |
||||
role: "角色权限", |
||||
dic: "数据字典", |
||||
log: "日志更新" |
||||
} |
||||
}; |
||||
}, |
||||
computed: { |
||||
|
||||
}, |
||||
components: { |
||||
staff, |
||||
role, |
||||
dic, |
||||
log |
||||
}, |
||||
created() { |
||||
Setting.dynamicRoute && this.initTabs(); |
||||
}, |
||||
methods: { |
||||
tabChange(index) { |
||||
this.active = index; |
||||
}, |
||||
initTabs() { |
||||
let tab1 = this.auth("员工管理"); |
||||
let tab2 = this.auth("角色权限"); |
||||
let tab3 = this.auth("系统logo设置"); |
||||
|
||||
if (!tab1) { |
||||
delete this.tabs.staff; |
||||
} |
||||
if (!tab2) { |
||||
delete this.tabs.role; |
||||
} |
||||
if (!tab3) { |
||||
delete this.tabs.logo; |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,263 @@ |
||||
<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-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 prop="roleName" label="最新版本名称" align="center"></el-table-column> |
||||
<el-table-column prop="roleName" label="最新版本状态" align="center"></el-table-column> |
||||
<el-table-column prop="roleName" label="最近编辑" align="center"></el-table-column> |
||||
<el-table-column prop="roleName" label="版本数" align="center"></el-table-column> |
||||
<el-table-column label="操作" align="center" width="200"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="showRole(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 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=${this.keyword}&platformId=1`).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 => { |
||||
this.$message.success("删除成功"); |
||||
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(); |
||||
this.$message.success("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => {}); |
||||
if(this.multipleSelection.length === this.listData.length && this.page>1) { |
||||
this.handleCurrentChange(this.page - 1) |
||||
} |
||||
}).catch(() => {}); |
||||
} else { |
||||
this.$message.error("请先选择数据！"); |
||||
} |
||||
}, |
||||
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 this.$message.warning("请填写角色名称"); |
||||
if (!this.form.remark) return this.$message.warning("请填写角色描述"); |
||||
if (!this.$refs.per.getCheckedKeys().length) return this.$message.warning("请选择角色权限"); |
||||
// 获取已勾选的,和半勾选的(即子级没有全部勾选的节点),半勾选的一样要传给后端 |
||||
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 => { |
||||
this.$message.success("修改成功"); |
||||
this.getData(); |
||||
this.roleVisible = false; |
||||
}).catch(res => {}); |
||||
} else { |
||||
this.$post(this.api.saveOrUpdate, data).then(res => { |
||||
this.$message.success("新增成功"); |
||||
this.getData(); |
||||
this.roleVisible = false; |
||||
}).catch(res => {}); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,263 @@ |
||||
<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-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 prop="roleName" label="最新版本名称" align="center"></el-table-column> |
||||
<el-table-column prop="roleName" label="最新版本状态" align="center"></el-table-column> |
||||
<el-table-column prop="roleName" label="最近编辑" align="center"></el-table-column> |
||||
<el-table-column prop="roleName" label="版本数" align="center"></el-table-column> |
||||
<el-table-column label="操作" align="center" width="200"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="showRole(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 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=${this.keyword}&platformId=1`).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 => { |
||||
this.$message.success("删除成功"); |
||||
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(); |
||||
this.$message.success("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => {}); |
||||
if(this.multipleSelection.length === this.listData.length && this.page>1) { |
||||
this.handleCurrentChange(this.page - 1) |
||||
} |
||||
}).catch(() => {}); |
||||
} else { |
||||
this.$message.error("请先选择数据！"); |
||||
} |
||||
}, |
||||
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 this.$message.warning("请填写角色名称"); |
||||
if (!this.form.remark) return this.$message.warning("请填写角色描述"); |
||||
if (!this.$refs.per.getCheckedKeys().length) return this.$message.warning("请选择角色权限"); |
||||
// 获取已勾选的,和半勾选的(即子级没有全部勾选的节点),半勾选的一样要传给后端 |
||||
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 => { |
||||
this.$message.success("修改成功"); |
||||
this.getData(); |
||||
this.roleVisible = false; |
||||
}).catch(res => {}); |
||||
} else { |
||||
this.$post(this.api.saveOrUpdate, data).then(res => { |
||||
this.$message.success("新增成功"); |
||||
this.getData(); |
||||
this.roleVisible = false; |
||||
}).catch(res => {}); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,270 @@ |
||||
<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 type="primary" round @click="addRole">新增角色</el-button> |
||||
<el-button 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 type="text" @click="showRole(scope.row)">查看</el-button> |
||||
<el-button v-if="scope.row.roleName !== '超级管理员'" type="text" @click="editRole(scope.row)">编辑</el-button> |
||||
<el-button 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 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=${this.keyword}&platformId=1`).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 => { |
||||
this.$message.success("删除成功"); |
||||
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(); |
||||
this.$message.success("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => {}); |
||||
if(this.multipleSelection.length === this.listData.length && this.page>1) { |
||||
this.handleCurrentChange(this.page - 1) |
||||
} |
||||
}).catch(() => {}); |
||||
} else { |
||||
this.$message.error("请先选择数据！"); |
||||
} |
||||
}, |
||||
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 this.$message.warning("请填写角色名称"); |
||||
if (!this.form.remark) return this.$message.warning("请填写角色描述"); |
||||
if (!this.$refs.per.getCheckedKeys().length) return this.$message.warning("请选择角色权限"); |
||||
// 获取已勾选的,和半勾选的(即子级没有全部勾选的节点),半勾选的一样要传给后端 |
||||
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 => { |
||||
this.$message.success("修改成功"); |
||||
this.getData(); |
||||
this.roleVisible = false; |
||||
}).catch(res => {}); |
||||
} else { |
||||
this.$post(this.api.saveOrUpdate, data).then(res => { |
||||
this.$message.success("新增成功"); |
||||
this.getData(); |
||||
this.roleVisible = false; |
||||
}).catch(res => {}); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,620 @@ |
||||
<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 type="primary" round @click="addTeacher">新增员工</el-button> |
||||
<el-button type="primary" round @click="batchImport">批量导入</el-button> |
||||
<el-button 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="account" 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 type="text" @click="showTeacher(scope.row)">查看</el-button> |
||||
<el-button type="text" @click="editTeacher(scope.row)">编辑</el-button> |
||||
<el-button type="text" @click="resetPassword(scope.row)">重置密码</el-button> |
||||
<el-button 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="teacherForm" :model="teacherForm" :rules="rules" label-width="150px" :disabled="isDetail" style='margin-right: 80px;'> |
||||
<el-form-item prop="account" label="账号"> |
||||
<el-input v-model.trim="teacherForm.account" placeholder="请输入职工账号"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="userName" label="用户姓名"> |
||||
<el-input v-model.trim="teacherForm.userName" placeholder="请输入员工姓名"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="roleValue" label="账号角色"> |
||||
<el-select v-model="teacherForm.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="teacherForm.uniqueIdentification" placeholder="请输入职工工号获取唯一标识"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="workNumber" label="工号"> |
||||
<el-input v-model.trim="teacherForm.workNumber" placeholder="请输入职工工号"></el-input> |
||||
</el-form-item> |
||||
<el-form-item v-for="item in teacherForm.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="teacherForm.phone" placeholder="请输入手机号" maxlength="11" @blur="phoneChange"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="email" label="邮箱"> |
||||
<el-input v-model.trim="teacherForm.email" placeholder="请输入邮箱" @blur="emailChange"></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('teacherForm')">确 定</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 org from "./staffSide" |
||||
export default { |
||||
data() { |
||||
var accountPass = (rule, value, callback) => { |
||||
if (value === '') { |
||||
callback(new Error('请输入账号')); |
||||
} else { |
||||
var pattern = /^[A-Za-z0-9]*$/; |
||||
if(pattern.test(value)){ |
||||
this.accountChange(); |
||||
callback(); |
||||
}else{ |
||||
callback(new Error('请输入正确账号格式')); |
||||
} |
||||
} |
||||
}; |
||||
var workNumberPass = (rule, value, callback) => { |
||||
if (value === '') { |
||||
callback(new Error('请输入职工工号')); |
||||
} else { |
||||
var pattern = /^[a-zA-Z0-9]*$/; |
||||
if(pattern.test(value)){ |
||||
this.workNumberChange(); |
||||
callback(); |
||||
}else{ |
||||
callback(new Error('职工工号必须为数字或英文')); |
||||
} |
||||
} |
||||
}; |
||||
return { |
||||
exportCode: "", |
||||
headers: { |
||||
// token: util.local.get(Setting.tokenKey) |
||||
}, |
||||
isDetail: false, |
||||
isAdd: false, |
||||
teacherVisible: false, |
||||
roleList: [], // 角色列表 |
||||
orgList: [], // 员工组织架构列表 |
||||
casProps: { |
||||
value: 'id' |
||||
}, |
||||
teacherForm: { |
||||
accountId: "", |
||||
account: "", |
||||
userName: "", |
||||
roleValue: [], |
||||
roleAndDeptList: [], |
||||
uniqueIdentification: "", |
||||
workNumber: "", |
||||
phone: "", |
||||
email: "" |
||||
}, |
||||
rules: { |
||||
account: [ |
||||
{ required: true, validator: accountPass, trigger: 'blur' } |
||||
], |
||||
userName: [ |
||||
{ required: true, message: "请输入用户姓名", trigger: "blur" } |
||||
], |
||||
roleValue: [ |
||||
{ required: true, message: "请选择账号角色", trigger: "change" } |
||||
], |
||||
workNumber: [ |
||||
{ required: true, validator: workNumberPass , trigger: 'blur' } |
||||
], |
||||
uniqueIdentification: [ |
||||
// { required: true, message: '请输入唯一标识', trigger: 'blur' }, |
||||
], |
||||
phone: [ |
||||
// { required: true, message: '请输入职工手机号', trigger: 'blur' }, |
||||
{ pattern: /^1[3456789]\d{9}$/, message: "请输入正确的手机号", trigger: "blur"} |
||||
], |
||||
email: [ |
||||
// { required: true, message: '请输入邮箱', trigger: 'blur' }, |
||||
{ |
||||
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, |
||||
message: "请输入正确的邮箱", |
||||
trigger: "blur" |
||||
} |
||||
], |
||||
}, |
||||
accountReapeat: false, |
||||
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 |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted() { |
||||
// 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`).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.teacherForm = { |
||||
accountId: "", |
||||
account: "", |
||||
userName: "", |
||||
roleValue: [], |
||||
roleAndDeptList: [], |
||||
uniqueIdentification: "", |
||||
workNumber: "", |
||||
phone: "", |
||||
email: "" |
||||
}; |
||||
this.$refs.teacherForm.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.teacherForm = data; |
||||
this.teacherForm.roleValue = data.roleAndDeptList.map(i => i.roleId); |
||||
this.teacherForm.roleAndDeptList = data.roleAndDeptList.map(i => { |
||||
i.cascaderValue = [i.staffArchitectureId, i.gradeId] |
||||
return i; |
||||
}); |
||||
console.log(22, this.teacherForm) |
||||
}).catch(res => {}); |
||||
}, |
||||
resetPassword(row) { // 重置密码 |
||||
this.$confirm(`重置后的密码为：${Setting.initialPassword}，确定重置？`, "提示", { type: "warning" }).then(() => { |
||||
this.$get(`${this.api.resetPassword}?userId=${row.userId}&newPwd=111aaa`).then(res => { |
||||
this.$message.success("重置成功"); |
||||
}).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); |
||||
}, |
||||
accountChange() { // 切换账号 |
||||
if (this.teacherForm.account) { |
||||
let url = ""; |
||||
if (this.isAdd) { |
||||
url = `${this.api.checkWorkNumOrAccount}?platformId=${Setting.platformId}&type=${Setting.platformType}&account=${this.teacherForm.account}&workNumber=`; |
||||
} else { |
||||
url = `${this.api.checkWorkNumOrAccount}?platformId=${Setting.platformId}&type=${Setting.platformType}&accountId=${this.teacherForm.accountId}&account=${this.teacherForm.account}&workNumber=`; |
||||
} |
||||
this.$post(url).then(res => { |
||||
if (res.status === 200) { |
||||
this.accountReapeat = false; |
||||
} |
||||
}).catch( err => { |
||||
this.accountReapeat = true; |
||||
}); |
||||
} |
||||
}, |
||||
workNumberChange() { // 切换工号 |
||||
if (this.teacherForm.workNumber) { |
||||
let url = ""; |
||||
if (this.isAdd) { |
||||
url = `${this.api.checkWorkNumOrAccount}?platformId=${Setting.platformId}&type=${Setting.platformType}&workNumber=${this.teacherForm.workNumber}&account=`; |
||||
} else { |
||||
url = `${this.api.checkWorkNumOrAccount}?platformId=${Setting.platformId}&type=${Setting.platformType}&accountId=${this.teacherForm.accountId}&workNumber=${this.teacherForm.workNumber}&account=`; |
||||
} |
||||
this.$post(url).then(res => { |
||||
if (res.status === 200) { |
||||
this.workNumberReapeat = false; |
||||
} |
||||
}).catch( err => { |
||||
this.workNumberReapeat = true; |
||||
}); |
||||
} |
||||
}, |
||||
phoneChange() { // 切换手机号 |
||||
let regex = /^1[3456789]\d{9}$/; |
||||
if (regex.test(this.teacherForm.phone)) { |
||||
let url = ""; |
||||
if (this.isAdd) { |
||||
url = `${this.api.checkEmailOrPhone}?phone=${this.teacherForm.phone}&email=`; |
||||
} else { |
||||
url = `${this.api.checkEmailOrPhone}?accountId=${this.teacherForm.accountId}&phone=${this.teacherForm.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.teacherForm.email)) { |
||||
let url = ""; |
||||
if (this.isAdd) { |
||||
url = `${this.api.checkEmailOrPhone}?email=${this.teacherForm.email}&phone=`; |
||||
} else { |
||||
url = `${this.api.checkEmailOrPhone}?accountId=${this.teacherForm.accountId}&email=${this.teacherForm.email}&phone=`; |
||||
} |
||||
this.$post(url).then(res => { |
||||
if (res.status === 200) { |
||||
this.emailRepeat = false; |
||||
} |
||||
}).catch( err => { |
||||
this.emailRepeat = true; |
||||
}); |
||||
} |
||||
}, |
||||
roleChange(value) { // 处理切换角色 |
||||
console.log(this.teacherForm.roleValue) |
||||
if (value.length) { |
||||
let ids = this.teacherForm.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.teacherForm.roleAndDeptList.push(obj); |
||||
} |
||||
}); |
||||
} else { |
||||
this.teacherForm.roleAndDeptList.splice(0); |
||||
} |
||||
}, |
||||
roleRemove(value) { // 处理移除角色 |
||||
let list = []; |
||||
for(var i=0;i<this.teacherForm.roleAndDeptList.length;i++){ |
||||
if (this.teacherForm.roleAndDeptList[i].roleId == value){ |
||||
|
||||
}else{ |
||||
list.push(this.teacherForm.roleAndDeptList[i]) |
||||
} |
||||
} |
||||
this.teacherForm.roleAndDeptList = list |
||||
}, |
||||
async saveSure(teacherForm) { |
||||
this.$refs[teacherForm].validate((valid) => { |
||||
if (valid) { |
||||
if (this.submiting) return false |
||||
if (this.accountReapeat) return this.$message.warning("该账号已存在"); |
||||
if (this.workNumberReapeat) return this.$message.warning("该员工工号已存在"); |
||||
if (this.phoneRepeat) return this.$message.warning("该手机号已存在"); |
||||
if (this.emailRepeat) return this.$message.warning("该邮箱已存在"); |
||||
let data = { |
||||
accountId: this.teacherForm.accountId, |
||||
account: this.teacherForm.account, |
||||
userName: this.teacherForm.userName, |
||||
roleAndDeptList: [], |
||||
uniqueIdentification: this.teacherForm.uniqueIdentification ? this.teacherForm.uniqueIdentification : new Date().getTime(), |
||||
workNumber: this.teacherForm.workNumber, |
||||
phone: this.teacherForm.phone, |
||||
email: this.teacherForm.email |
||||
}; |
||||
if (this.teacherForm.roleAndDeptList.length){ |
||||
for (let i = 0; i < this.teacherForm.roleAndDeptList.length; i++) { |
||||
if (this.teacherForm.roleAndDeptList[i].cascaderValue.length < 2) { |
||||
this.$message.warning(`请选择${this.teacherForm.roleAndDeptList[i].roleName}所属部门`) |
||||
return; |
||||
} else { |
||||
let obj = { |
||||
roleId: this.teacherForm.roleAndDeptList[i].roleId, |
||||
staffArchitectureId: this.teacherForm.roleAndDeptList[i].cascaderValue[0], |
||||
gradeId: this.teacherForm.roleAndDeptList[i].cascaderValue[1] |
||||
}; |
||||
data.roleAndDeptList.push(obj); |
||||
} |
||||
} |
||||
} |
||||
this.submiting = true |
||||
if (this.teacherForm.accountId) { |
||||
this.$post(this.api.modifyStaff, data).then(res => { |
||||
this.$message.success("编辑成功"); |
||||
this.closeTeacher(); |
||||
this.getData(); |
||||
this.submiting = false |
||||
}).catch(res => { |
||||
this.submiting = false |
||||
}); |
||||
} else { |
||||
this.$post(this.api.saveStaff, data).then(res => { |
||||
this.$message.success("添加成功"); |
||||
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 => { |
||||
this.$message.success("删除成功"); |
||||
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(); |
||||
this.$message.success("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
}).catch(() => { |
||||
}); |
||||
} else { |
||||
this.$message.error("请先选择员工 ！"); |
||||
} |
||||
}, |
||||
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) { |
||||
this.$message.warning( |
||||
`当前限制选择 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; |
||||
} |
||||
this.$message.success(`上传成功${res.data.successNum}，上传失败${res.data.failureNum}`); |
||||
} else { |
||||
res.message ? this.$message.error(res.message) : this.$message.error("上传失败，请检查数据"); |
||||
} |
||||
}, |
||||
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> |
||||
@ -0,0 +1,387 @@ |
||||
<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">添加</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 |
||||
type="text" |
||||
icon="el-icon-edit-outline" |
||||
@click="() => handleEdit(node, data)"> |
||||
</el-button> |
||||
<el-button |
||||
v-if="node.level === 1" |
||||
type="text" |
||||
icon="el-icon-circle-plus-outline" |
||||
@click="() => handleAdd(node, data)"> |
||||
</el-button> |
||||
<el-button |
||||
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 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 => { |
||||
this.$message.success("编辑成功"); |
||||
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 => { |
||||
this.$message.success("添加成功"); |
||||
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 => { |
||||
this.$message.success("编辑成功"); |
||||
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 => { |
||||
this.$message.success("添加成功"); |
||||
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 => { |
||||
this.$message.success("删除成功") |
||||
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 => { |
||||
this.$message.success("删除成功") |
||||
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> |
||||
Loading…
Reference in new issue