parent
27adac2ec4
commit
b332158556
15 changed files with 781 additions and 159 deletions
|
After Width: | Height: | Size: 331 B |
@ -0,0 +1,193 @@ |
||||
<template> |
||||
<div class="join"> |
||||
<el-form class="form" ref="form" :model="form" :rules="rules"> |
||||
<el-form-item prop="userName" label="姓名"> |
||||
<el-input v-model.trim="form.userName" placeholder="请输入姓名"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="account" label="账号"> |
||||
<el-input v-model.trim="form.account" placeholder="请输入账号"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="phone" label="手机号"> |
||||
<el-input v-model.trim="form.phone" placeholder="请输入手机号" maxlength="11"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="email" label="邮箱"> |
||||
<el-input v-model.trim="form.email" placeholder="请输入邮箱"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="btn-wrap"> |
||||
<el-button type="primary" @click="submit">提交</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util" |
||||
import Setting from "@/setting" |
||||
export default { |
||||
data() { |
||||
const accountPass = (rule, value, callback) => { |
||||
if (value === '') { |
||||
callback(new Error('请输入账号')) |
||||
} else { |
||||
const pattern = /^[A-Za-z0-9]*$/ |
||||
if(pattern.test(value)){ |
||||
this.accountChange() |
||||
callback() |
||||
}else{ |
||||
callback(new Error('请输入正确账号格式')) |
||||
} |
||||
} |
||||
} |
||||
const 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(new Error('请输入手机号')) |
||||
} |
||||
} |
||||
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 { |
||||
token: window.atob(decodeURI(this.$route.query.token)), |
||||
form: { |
||||
partnerClassificationId: this.$route.query.id, |
||||
isTeam: 0, |
||||
account: '', |
||||
email: '', |
||||
phone: '', |
||||
userName: '' |
||||
}, |
||||
rules: { |
||||
account: [ |
||||
{ required: true, validator: accountPass, trigger: 'blur' } |
||||
], |
||||
userName: [ |
||||
{ required: true, message: "请输入姓名", trigger: "blur" } |
||||
], |
||||
phone: [ |
||||
{ required: true, validator: phonePass, trigger: 'blur' } |
||||
], |
||||
email: [ |
||||
{ validator: emailPass, trigger: 'blur' } |
||||
] |
||||
}, |
||||
submiting: false // 新增编辑防抖标识 |
||||
}; |
||||
}, |
||||
mounted() { |
||||
sessionStorage.setItem('token', this.token) |
||||
this.form.token = this.token |
||||
}, |
||||
methods: { |
||||
// 账号判重 |
||||
accountChange() { |
||||
const form = this.form |
||||
const { account } = form |
||||
if (account === this.originAccount) { |
||||
this.accountReapeat = false |
||||
} else { |
||||
const { accountId } = form |
||||
this.$post(`${this.api.checkWorkNumOrAccount}?platformId=${Setting.platformId}&type=2&account=${account}${accountId ? `&accountId=${accountId}` : ''}`).then(res => { |
||||
this.accountReapeat = false |
||||
}).catch(err => { |
||||
this.accountReapeat = true |
||||
}) |
||||
} |
||||
}, |
||||
// 手机号判重 |
||||
phoneChange() { |
||||
const form = this.form |
||||
const { phone } = form |
||||
if (phone) { |
||||
const { accountId } = form |
||||
this.$post(`${this.api.checkEmailOrPhone}?phone=${phone}${accountId ? `&accountId=${accountId}` : ''}`).then(res => { |
||||
this.phoneRepeat = false |
||||
}).catch(err => { |
||||
this.phoneRepeat = true |
||||
}) |
||||
} |
||||
}, |
||||
// 邮箱判重 |
||||
emailChange() { |
||||
const form = this.form |
||||
const { email } = form |
||||
if (email) { |
||||
const { accountId } = form |
||||
this.$post(`${this.api.checkEmailOrPhone}?email=${email}${accountId ? `&accountId=${accountId}` : ''}`).then(res => { |
||||
this.emailRepeat = false |
||||
}).catch(err => { |
||||
this.emailRepeat = true |
||||
}) |
||||
} |
||||
}, |
||||
// 提交 |
||||
submit() { |
||||
this.$refs.form.validate((valid) => { |
||||
if (valid) { |
||||
if (this.submiting) return false |
||||
if (this.accountReapeat) return util.warningMsg("该账号已存在") |
||||
if (this.phoneRepeat) return util.warningMsg("该手机号已存在") |
||||
if (this.emailRepeat) return util.warningMsg("该邮箱已存在") |
||||
const { form } = this |
||||
form.uniqueIdentification = Date.now() |
||||
this.submiting = true |
||||
this.$post(this.api.savePartnerAccount, form).then(res => { |
||||
util.successMsg('加入成功！') |
||||
setTimeout(location.reload, 1000) |
||||
}).catch(res => { |
||||
this.submiting = false |
||||
}) |
||||
} |
||||
}) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.join { |
||||
.form{ |
||||
width: 436px; |
||||
padding: 38px 38px 60px; |
||||
margin: 0 auto 0; |
||||
border-radius: 6px; |
||||
background-color: #fff; |
||||
.title{ |
||||
margin-bottom: 25px; |
||||
font-size: 26px; |
||||
color: #0B1D30; |
||||
letter-spacing: 4px; |
||||
} |
||||
} |
||||
/deep/.el-form-item{ |
||||
margin-bottom: 20px; |
||||
} |
||||
/deep/.el-input__inner{ |
||||
position: relative; |
||||
height: 52px; |
||||
padding: 0 20px 0 34px; |
||||
line-height: 50px; |
||||
background-color: #FBFBFB; |
||||
border: 1px solid #E1E6F2; |
||||
border-radius: 4px !important; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,273 @@ |
||||
<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 { |
||||
platformId: 4, |
||||
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() { |
||||
// platformId 合伙人为4，具体看setting.js；port: pc端为0、小程序端为1 |
||||
this.$get(`${this.api.roleList}?page=${this.page}&size=${this.pageSize}&name=${this.keyword}&platformId=${this.platformId}&port=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=${this.platformId}&port=1`).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: this.platformId, |
||||
port: 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> |
||||
Loading…
Reference in new issue