parent
200dd525bf
commit
82c791bc2d
10 changed files with 929 additions and 2 deletions
@ -0,0 +1,32 @@ |
|||||||
|
import Vue from 'vue' |
||||||
|
import Clipboard from 'clipboard' |
||||||
|
|
||||||
|
function clipboardSuccess(message = 'Copy successfully') { |
||||||
|
Vue.prototype.$message({ |
||||||
|
message, |
||||||
|
type: 'success', |
||||||
|
duration: 1500 |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
function clipboardError() { |
||||||
|
Vue.prototype.$message({ |
||||||
|
message: 'Copy failed', |
||||||
|
type: 'error' |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
export default function handleClipboard(text, event, message) { |
||||||
|
const clipboard = new Clipboard(event.target, { |
||||||
|
text: () => text |
||||||
|
}) |
||||||
|
clipboard.on('success', () => { |
||||||
|
clipboardSuccess(message) |
||||||
|
clipboard.destroy() |
||||||
|
}) |
||||||
|
clipboard.on('error', () => { |
||||||
|
clipboardError() |
||||||
|
clipboard.destroy() |
||||||
|
}) |
||||||
|
clipboard.onClick(event) |
||||||
|
} |
||||||
@ -0,0 +1,58 @@ |
|||||||
|
<template> |
||||||
|
<div class="page system" 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> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Setting from "@/setting"; |
||||||
|
import staff from "./staff"; |
||||||
|
import role from "./role"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
active: this.$route.query.type || 'staff', |
||||||
|
tabs: { |
||||||
|
staff: "账号管理", |
||||||
|
role: "角色权限" |
||||||
|
} |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
|
||||||
|
}, |
||||||
|
components: { |
||||||
|
staff, |
||||||
|
role |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// Setting.dynamicRoute && this.initTabs(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
tabChange(index) { |
||||||
|
this.active = index |
||||||
|
}, |
||||||
|
initTabs() { |
||||||
|
const btns = this.$store.state.btns |
||||||
|
const tab1 = btns.includes('/system:账号管理') |
||||||
|
const tab2 = btns.includes('/system:角色权限') |
||||||
|
|
||||||
|
tab1 || delete this.tabs.staff |
||||||
|
const type = this.$route.query.type |
||||||
|
const keys = Object.keys(this.tabs) |
||||||
|
this.active = keys.includes(type) ? type : keys[0] |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.system { |
||||||
|
min-height: calc(100vh - 170px); |
||||||
|
} |
||||||
|
</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" v-auth="'/system:角色权限:新增角色'">新增角色</el-button> |
||||||
|
<el-button type="primary" round @click="delAllSelection" v-auth="'/system:角色权限:批量删除'">批量删除</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)" v-auth="'/system:角色权限:查看'">查看</el-button> |
||||||
|
<el-button v-if="scope.row.roleName !== '超级管理员'" type="text" @click="editRole(scope.row)" v-auth="'/system:角色权限:编辑'">编辑</el-button> |
||||||
|
<el-button v-if="scope.row.roleName !== '超级管理员' && scope.row.roleName !== '管理员'" type="text" @click="handleDelete(scope.row)" v-auth="'/system:角色权限:删除'">删除</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=${Setting.platformId}`).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: Setting.platformId, |
||||||
|
}; |
||||||
|
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,524 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrap"> |
||||||
|
<!-- 左边的组织 --> |
||||||
|
<div class="side"> |
||||||
|
<div> |
||||||
|
<div class="flex-between"> |
||||||
|
<h6 class="p-title" style="margin-bottom: 0">或然城市合伙人</h6> |
||||||
|
<el-button type="text" @click="addOrg">添加分类</el-button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div style="height: 504px; max-height: 504px; overflow: auto"> |
||||||
|
<el-tree |
||||||
|
:data="orgList" |
||||||
|
default-expand-all |
||||||
|
ref="orgTree" |
||||||
|
node-key="id" |
||||||
|
highlight-current |
||||||
|
:expand-on-click-node="false" |
||||||
|
@node-click="handleNodeClick" |
||||||
|
:props="{children: 'children', label: 'organizationName', isLeaf: 'leaf'}" |
||||||
|
> |
||||||
|
<span class="custom-tree-node" slot-scope="{ node, data }"> |
||||||
|
<span class="org-name">{{ node.label }}</span> |
||||||
|
<span> |
||||||
|
<el-button |
||||||
|
v-auth="'/system:后台账号:新增部门'" |
||||||
|
type="text" |
||||||
|
icon="el-icon-circle-plus-outline" |
||||||
|
@click="() => addOrg(node, data)"> |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
v-auth="'/system:后台账号:编辑部门'" |
||||||
|
type="text" |
||||||
|
icon="el-icon-edit-outline" |
||||||
|
@click="() => editOrg(node, data)"> |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
v-auth="'/system:后台账号:删除部门'" |
||||||
|
type="text" |
||||||
|
icon="el-icon-delete" |
||||||
|
@click="() => delOrg(node, data)"> |
||||||
|
</el-button> |
||||||
|
</span> |
||||||
|
</span> |
||||||
|
</el-tree> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-dialog |
||||||
|
:title="orgForm.id ? '编辑' : '新增' + '分类'" |
||||||
|
:visible.sync="orgVisible" |
||||||
|
:close-on-click-modal="false" |
||||||
|
width="50%" |
||||||
|
> |
||||||
|
<el-form v-if="orgVisible" ref="orgForm" :model="orgForm" :rules="orgRules" label-width="100px"> |
||||||
|
<el-form-item label="分类名称" prop="organizationName"> |
||||||
|
<el-input v-model.trim="orgForm.organizationName" placeholder="请输入"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="上级部门"> |
||||||
|
<span v-if="orgForm.parentName">{{ orgForm.parentName }}</span> |
||||||
|
<el-cascader |
||||||
|
v-else |
||||||
|
:options="orgListDia" |
||||||
|
v-model="cascaderValue" |
||||||
|
:props="cascaderProps" |
||||||
|
clearable |
||||||
|
style="width: 100%" |
||||||
|
> |
||||||
|
</el-cascader> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="closeOrg">取 消</el-button> |
||||||
|
<el-button type="primary" @click="orgSubmit">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
<!-- 右边的员工 --> |
||||||
|
<div class="right"> |
||||||
|
<h6 class="p-title">筛选</h6> |
||||||
|
<div class="tool"> |
||||||
|
<ul class="filter"> |
||||||
|
<li> |
||||||
|
<el-input style="width: 250px;" placeholder="请输入员工姓名/手机号" prefix-icon="el-icon-search" v-model="keyWord" clearable></el-input> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<div> |
||||||
|
<el-button type="primary" @click="add" v-auth="'/system:后台账号:新增员工'">添加城市合伙人</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="accountId"> |
||||||
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||||
|
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||||
|
<el-table-column prop="userName" label="姓名" align="center" min-width="100"></el-table-column> |
||||||
|
<el-table-column prop="phone" label="手机号" align="center" width="120"></el-table-column> |
||||||
|
<el-table-column prop="staffArchitectureName" label="团队名称" align="center" min-width="200" show-overflow-tooltip></el-table-column> |
||||||
|
<el-table-column prop="roleName" label="授权角色" align="center" min-width="200" show-overflow-tooltip></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="添加城市合伙人" :visible.sync="parnerVisible" width="580px" custom-class="add-dia" :close-on-click-modal="false"> |
||||||
|
<p class="tips">链接/二维码失效日期：2022-11-11</p> |
||||||
|
<p class="title">城市合伙人 <em>邀请链接</em></p> |
||||||
|
<p class="des">加盟商、合作伙伴可以通过这个链接加入 <em>城市合伙人计划</em></p> |
||||||
|
<div class="link-wrap"> |
||||||
|
<div class="link">https://modao.cc/app/0023f7e0e933f5fc4f01a1a7c138dbfc47448580#screen=sl2soyh8c61vnmp</div> |
||||||
|
<el-button type="primary" size="small" @click="copy">复制链接</el-button> |
||||||
|
</div> |
||||||
|
<p class="title">城市合伙人 <em>邀请二维码</em></p> |
||||||
|
<p class="des">加盟商、合作伙伴可以通过这个二维码加入 <em>城市合伙人计划</em></p> |
||||||
|
<img width="200" src="https://pic.baike.soso.com/p/20130307/20130307133645-1010261466.jpg" alt=""> |
||||||
|
</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 |
||||||
|
ref="importStaff" |
||||||
|
name="file" |
||||||
|
accept=".xls,.xlsx" |
||||||
|
:on-remove="handleRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:action="this.api.importStaff" |
||||||
|
:file-list="uploadList" |
||||||
|
:headers="headers" |
||||||
|
> |
||||||
|
<el-button type="primary" class="ml20">上传文件<i class="el-icon-upload2 el-icon--right"></i></el-button> |
||||||
|
</el-upload> |
||||||
|
<el-link v-if="uploadFaild" type="primary" @click="showFaild">部分数据导入失败，查看失败原因</el-link> |
||||||
|
</div> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button size="small" @click="importVisible = false">取 消</el-button> |
||||||
|
<el-button size="small" type="primary" @click="uploadSure">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import util from "@/libs/util"; |
||||||
|
import Setting from "@/setting"; |
||||||
|
import OrgTree from "@/components/org-tree/src/tree"; |
||||||
|
import clipboard from '@/libs/clipboard' |
||||||
|
export default { |
||||||
|
components: { OrgTree }, |
||||||
|
data() { |
||||||
|
const accountPass = (rule, value, callback) => { |
||||||
|
if (value === '') { |
||||||
|
callback(new Error('请输入账号')) |
||||||
|
} else { |
||||||
|
const pattern = /^[A-Za-z0-9]*$/ |
||||||
|
if(pattern.test(value)){ |
||||||
|
this.accountChange() |
||||||
|
callback() |
||||||
|
}else{ |
||||||
|
callback(new Error('请输入正确账号格式')) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
const workNumberPass = (rule, value, callback) => { |
||||||
|
if (value === '') { |
||||||
|
callback(new Error('请输入工号')) |
||||||
|
} else { |
||||||
|
const pattern = /^[A-Za-z0-9]*$/ |
||||||
|
if(pattern.test(value)){ |
||||||
|
this.worknumberChange() |
||||||
|
callback() |
||||||
|
}else{ |
||||||
|
callback(new Error('请输入正确工号格式')) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
const phonePass = (rule, value, callback) => { |
||||||
|
if (value) { |
||||||
|
const pattern = /^1[3456789]\d{9}$/ |
||||||
|
if(pattern.test(value)){ |
||||||
|
// this.phoneChange() |
||||||
|
callback() |
||||||
|
}else{ |
||||||
|
callback(new Error('请输入正确手机号格式')) |
||||||
|
} |
||||||
|
} else { |
||||||
|
callback() |
||||||
|
} |
||||||
|
} |
||||||
|
const emailPass = (rule, value, callback) => { |
||||||
|
if (value) { |
||||||
|
const pattern = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/ |
||||||
|
if(pattern.test(value)){ |
||||||
|
// this.emailChange() |
||||||
|
callback() |
||||||
|
}else{ |
||||||
|
callback(new Error('请输入正确邮箱格式')) |
||||||
|
} |
||||||
|
} else { |
||||||
|
callback() |
||||||
|
} |
||||||
|
} |
||||||
|
return { |
||||||
|
orgList: [], |
||||||
|
orgListDia: [], |
||||||
|
studentType: 1, //类型:必填一个(1.所有员工 2.未加入班级员工) |
||||||
|
orgVisible: false, // 员工组织架对话框 |
||||||
|
orgForm: { |
||||||
|
id: '', |
||||||
|
organizationName: '' |
||||||
|
}, |
||||||
|
cascaderValue: [], // 上级部门 |
||||||
|
cascaderProps: { |
||||||
|
checkStrictly: true, |
||||||
|
label: "organizationName", |
||||||
|
value: "id" |
||||||
|
}, |
||||||
|
treeVisible: true, |
||||||
|
treeNode: {}, |
||||||
|
treeResolve: [], |
||||||
|
isDetail: false, |
||||||
|
keyWord: '', |
||||||
|
roleList: [], |
||||||
|
form: { |
||||||
|
accountId: '', |
||||||
|
userName: '', |
||||||
|
phone: '', |
||||||
|
roleList: [], |
||||||
|
uniqueIdentification: '', |
||||||
|
workNumber: '', |
||||||
|
email: '', |
||||||
|
account: '', |
||||||
|
staffArchitectureId: [] |
||||||
|
}, |
||||||
|
orgRules: { |
||||||
|
organizationName: [ |
||||||
|
{ required: true, message: "请输入部门名称", trigger: "blur" } |
||||||
|
] |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
account: [ |
||||||
|
{ required: true,validator: accountPass, trigger: 'blur' } |
||||||
|
], |
||||||
|
userName: [ |
||||||
|
{ required: true, message: "请输入姓名", trigger: "blur" } |
||||||
|
], |
||||||
|
workNumber: [ |
||||||
|
{ required: true,validator: workNumberPass, trigger: 'blur' } |
||||||
|
], |
||||||
|
roleList: [ |
||||||
|
{ required: true, message: "请选择授权角色", trigger: "change" } |
||||||
|
], |
||||||
|
phone: [ |
||||||
|
{ validator: phonePass, trigger: 'blur' } |
||||||
|
], |
||||||
|
email: [ |
||||||
|
{ validator: emailPass, trigger: 'blur' } |
||||||
|
] |
||||||
|
}, |
||||||
|
listData: [], |
||||||
|
page: 1, |
||||||
|
pageSize: 10, |
||||||
|
total: 0, |
||||||
|
multipleSelection: [], |
||||||
|
|
||||||
|
parnerVisible: false, |
||||||
|
accountReapeat: false, |
||||||
|
originAccount: '', |
||||||
|
workNumberReapeat: false, |
||||||
|
originWorkNumber: '', |
||||||
|
phoneRepeat: false, |
||||||
|
emailRepeat: false, |
||||||
|
casProps: { |
||||||
|
multiple: true, |
||||||
|
checkStrictly: true, |
||||||
|
label: 'organizationName', |
||||||
|
value: 'id', |
||||||
|
isLeaf: 'leaf' |
||||||
|
}, |
||||||
|
|
||||||
|
importVisible: false, |
||||||
|
uploadList: [], |
||||||
|
uploadFaild: false, |
||||||
|
exportCode: '', |
||||||
|
headers: { |
||||||
|
token: util.local.get(Setting.tokenKey) |
||||||
|
}, |
||||||
|
disableds:false, |
||||||
|
submiting: false // 新增编辑防抖标识 |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
keyWord: function(val) { |
||||||
|
clearTimeout(this.searchTimer); |
||||||
|
this.searchTimer = setTimeout(this.getStaff, 500); |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getOrg() |
||||||
|
this.getRole() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取组织 |
||||||
|
async getOrg() { |
||||||
|
const res = await this.$post(this.api.treeListArch) |
||||||
|
const list = res.treeList |
||||||
|
// 没有子级，删除children属性 |
||||||
|
const handleLeaf = list => { |
||||||
|
list.map(e => { |
||||||
|
if (e.children.length) { |
||||||
|
handleLeaf(e.children) |
||||||
|
} else { |
||||||
|
delete e.children |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
handleLeaf(list) |
||||||
|
this.orgList = list |
||||||
|
this.handleOrgId(list) |
||||||
|
this.getStaff() |
||||||
|
}, |
||||||
|
// 每个层级加上父级id的集合 |
||||||
|
handleOrgId(list, ids) { |
||||||
|
list.forEach(e => { |
||||||
|
e.ids = ids ? [...ids, e.id] : [e.id] |
||||||
|
e.children && this.handleOrgId(e.children, e.ids) |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 组织类别筛选回调 |
||||||
|
changeType() { |
||||||
|
this.$refs.orgTree.setCurrentKey(null) |
||||||
|
this.initData() |
||||||
|
}, |
||||||
|
// 添加部门 |
||||||
|
addOrg(node, data) { |
||||||
|
this.orgForm = { |
||||||
|
id: '', |
||||||
|
parentId: data ? data.id : 1, |
||||||
|
level: data ? data.level + 1 : 1, |
||||||
|
parentName: data ? data.organizationName : '', |
||||||
|
organizationName: '' |
||||||
|
} |
||||||
|
this.orgListDia = this.orgList |
||||||
|
this.orgVisible = true |
||||||
|
}, |
||||||
|
// 编辑部门 |
||||||
|
editOrg(node, data) { |
||||||
|
const list = JSON.parse(JSON.stringify(this.orgList)) |
||||||
|
this.handleOrg(list, data.id, 0) |
||||||
|
this.orgListDia = list |
||||||
|
this.orgForm = { |
||||||
|
id: data.id, |
||||||
|
organizationName: data.organizationName |
||||||
|
} |
||||||
|
this.orgVisible = true |
||||||
|
const ids = data.ids |
||||||
|
ids.splice(ids.length - 1, 1) |
||||||
|
this.cascaderValue = ids |
||||||
|
}, |
||||||
|
// 处理更换部门的禁选 |
||||||
|
handleOrg(list, id, disabled) { |
||||||
|
list.forEach(e => { |
||||||
|
// 如果是已经找到了要禁选的层级，则直接改变disabled，并递归 |
||||||
|
if (disabled) { |
||||||
|
e.disabled = true |
||||||
|
e.children && this.handleOrg(e.children, id, 1) |
||||||
|
} else { |
||||||
|
if (e.id === id) { |
||||||
|
e.disabled = true |
||||||
|
e.children && this.handleOrg(e.children, id, 1) |
||||||
|
} else { |
||||||
|
e.children && this.handleOrg(e.children, id, 0) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 删除部门 |
||||||
|
delOrg(node, data) { |
||||||
|
this.$confirm("确定要删除吗？", "提示", { |
||||||
|
type: "warning" |
||||||
|
}).then(() => { |
||||||
|
this.$post(`${this.api.deleteArch}?id=${data.id}`).then(res => { |
||||||
|
util.successMsg("删除成功") |
||||||
|
this.getOrg() |
||||||
|
}).catch(res => {}) |
||||||
|
}).catch(() => {}) |
||||||
|
}, |
||||||
|
// 提交组织架构新增/编辑 |
||||||
|
orgSubmit() { |
||||||
|
this.$refs.orgForm.validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
const form = this.orgForm |
||||||
|
const cas = this.cascaderValue |
||||||
|
const len = cas.length |
||||||
|
if (cas && len) { |
||||||
|
this.orgForm.parentId = cas[len - 1] |
||||||
|
this.orgForm.level = len + 1 |
||||||
|
} |
||||||
|
if (!form.id) { |
||||||
|
// 添加 |
||||||
|
this.$post(this.api.saveArch, form).then(res => { |
||||||
|
util.successMsg("新增成功！") |
||||||
|
this.closeOrg() |
||||||
|
}).catch(err => {}) |
||||||
|
} else { |
||||||
|
// 编辑 |
||||||
|
this.$post(this.api.updateArch, form).then(res => { |
||||||
|
util.successMsg("编辑成功！") |
||||||
|
this.closeOrg() |
||||||
|
}).catch(err => {}) |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 点击树节点查询列表数据 |
||||||
|
handleNodeClick(data) { |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
this.studentType = null |
||||||
|
this.getStaff() |
||||||
|
}, |
||||||
|
// 关闭组织新增编辑弹框 |
||||||
|
closeOrg() { |
||||||
|
this.orgVisible = false |
||||||
|
this.cascaderValue = [] |
||||||
|
this.getOrg() |
||||||
|
}, |
||||||
|
// 员工列表 |
||||||
|
getStaff() { |
||||||
|
this.$post(this.api.staffList, { |
||||||
|
type: this.studentType || 1, |
||||||
|
staffArchitectureId: this.$refs.orgTree.getCurrentKey() || '', |
||||||
|
keyWord: this.keyWord, |
||||||
|
pageNum: this.page, |
||||||
|
pageSize: this.pageSize |
||||||
|
}).then(res => { |
||||||
|
this.listData = res.page.records |
||||||
|
this.total = res.page.total |
||||||
|
}).catch(err => {}) |
||||||
|
}, |
||||||
|
// 切换页码 |
||||||
|
currentChange(val) { |
||||||
|
this.page = val |
||||||
|
this.getStaff() |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { // 多选 |
||||||
|
this.multipleSelection = val |
||||||
|
}, |
||||||
|
initData() { |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
this.page = 1 |
||||||
|
this.getStaff() |
||||||
|
}, |
||||||
|
// 添加 |
||||||
|
add() { |
||||||
|
this.parnerVisible = true |
||||||
|
}, |
||||||
|
// 复制链接 |
||||||
|
copy(e) { |
||||||
|
clipboard('测试地址', e, '文件路径已复制！') |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.m-b-20 { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
.org-name { |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
.w-100 { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.wrap { |
||||||
|
display: flex; |
||||||
|
height: calc(100vh - 223px); |
||||||
|
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 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.add-dia { |
||||||
|
.tips { |
||||||
|
font-size: 12px; |
||||||
|
color: #f00; |
||||||
|
} |
||||||
|
.title { |
||||||
|
margin: 10px 0; |
||||||
|
font-size: 14px; |
||||||
|
em { |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
|
} |
||||||
|
.des { |
||||||
|
font-size: 13px; |
||||||
|
color: #7a7a7a; |
||||||
|
} |
||||||
|
.link-wrap { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin: 10px 0 20px; |
||||||
|
} |
||||||
|
.link { |
||||||
|
padding: 10px; |
||||||
|
margin-right: 15px; |
||||||
|
background-color: #e7f5ff; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue