feat: 子经营者账号
This commit is contained in:
parent
e3ea3d9c28
commit
f48f8da512
|
|
@ -0,0 +1,52 @@
|
|||
import httpRequest from '@/utils/httpRequest'
|
||||
|
||||
// 获取可分配的权限树
|
||||
export function getAvailablePermissions () {
|
||||
return httpRequest({
|
||||
url: httpRequest.adornUrl('/merchant-api/subaccount/available-permissions'),
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 创建子账号
|
||||
export function createSubAccount (data) {
|
||||
return httpRequest({
|
||||
url: httpRequest.adornUrl('/merchant-api/subaccount/create'),
|
||||
method: 'post',
|
||||
data: httpRequest.adornData(data)
|
||||
})
|
||||
}
|
||||
|
||||
// 获取子账号列表
|
||||
export function getSubAccountList () {
|
||||
return httpRequest({
|
||||
url: httpRequest.adornUrl('/merchant-api/subaccount/list'),
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取子账号详情
|
||||
export function getSubAccountDetail (id) {
|
||||
return httpRequest({
|
||||
url: httpRequest.adornUrl(`/merchant-api/subaccount/${id}`),
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 更新子账号
|
||||
export function updateSubAccount (data) {
|
||||
return httpRequest({
|
||||
url: httpRequest.adornUrl('/merchant-api/subaccount/update'),
|
||||
method: 'put',
|
||||
data: httpRequest.adornData(data)
|
||||
})
|
||||
}
|
||||
|
||||
// 检查用户名是否可用
|
||||
export function checkUsername (username) {
|
||||
return httpRequest({
|
||||
url: httpRequest.adornUrl('/merchant-api/subaccount/check-username'),
|
||||
method: 'get',
|
||||
params: { username }
|
||||
})
|
||||
}
|
||||
|
|
@ -195,6 +195,46 @@ export default {
|
|||
open: null,
|
||||
list: []
|
||||
},
|
||||
{
|
||||
menuId: getUUID(),
|
||||
parentId: 0,
|
||||
parentName: null,
|
||||
name: "权限管理",
|
||||
url: "operation-management/permission",
|
||||
perms: "operation-management:permission",
|
||||
type: 0,
|
||||
elIcon: "el-icon-lock",
|
||||
orderNum: 0,
|
||||
open: null,
|
||||
list: [
|
||||
{
|
||||
menuId: getUUID(),
|
||||
parentId: 0,
|
||||
parentName: null,
|
||||
name: "子经营者管理",
|
||||
url: "operation-management/permission/sub-operator/index",
|
||||
perms: "operation-management:permission:sub-operator:index",
|
||||
type: 1,
|
||||
elIcon: "el-icon-user",
|
||||
orderNum: 0,
|
||||
open: null,
|
||||
list: []
|
||||
},
|
||||
{
|
||||
menuId: getUUID(),
|
||||
parentId: 0,
|
||||
parentName: null,
|
||||
name: "商户账号管理",
|
||||
url: "operation-management/permission/merchant-account/index",
|
||||
perms: "operation-management:permission:merchant-account:index",
|
||||
type: 1,
|
||||
elIcon: "el-icon-user-solid",
|
||||
orderNum: 0,
|
||||
open: null,
|
||||
list: []
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// menuId: getUUID(),
|
||||
// parentId: 0,
|
||||
|
|
@ -223,6 +263,46 @@ export default {
|
|||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
menuId: getUUID(),
|
||||
parentId: 0,
|
||||
parentName: null,
|
||||
name: "权限管理",
|
||||
url: "operation-management/permission",
|
||||
perms: "operation-management:permission",
|
||||
type: 0,
|
||||
elIcon: "el-icon-lock",
|
||||
orderNum: 0,
|
||||
open: null,
|
||||
list: [
|
||||
{
|
||||
menuId: getUUID(),
|
||||
parentId: 0,
|
||||
parentName: null,
|
||||
name: "子经营者管理",
|
||||
url: "operation-management/permission/sub-operator/index",
|
||||
perms: "operation-management:permission:sub-operator:index",
|
||||
type: 1,
|
||||
elIcon: "el-icon-user",
|
||||
orderNum: 0,
|
||||
open: null,
|
||||
list: []
|
||||
},
|
||||
{
|
||||
menuId: getUUID(),
|
||||
parentId: 0,
|
||||
parentName: null,
|
||||
name: "商户账号管理",
|
||||
url: "operation-management/permission/merchant-account/index",
|
||||
perms: "operation-management:permission:merchant-account:index",
|
||||
type: 1,
|
||||
elIcon: "el-icon-user-solid",
|
||||
orderNum: 0,
|
||||
open: null,
|
||||
list: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
menuId: getUUID(),
|
||||
parentId: 0,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<div>商户账号管理</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MerchantAccount'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="form"
|
||||
label-position="left"
|
||||
label-width="auto"
|
||||
:rules="rules"
|
||||
style="max-width: 600px"
|
||||
>
|
||||
<el-form-item label="操作类型" prop="operationType">
|
||||
<el-select v-model="form.operationType" placeholder="请选择操作类型">
|
||||
<el-option label="创建新账号" value="create"></el-option>
|
||||
<el-option label="更新旧账号" value="update"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<template v-if="form.operationType === 'create'">
|
||||
<el-form-item label="账号" prop="username">
|
||||
<el-input v-model="form.username" placeholder="请输入账号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-if="form.operationType === 'update'">
|
||||
<el-form-item label="选择账号" prop="accountId">
|
||||
<el-select v-model="form.accountId" placeholder="请选择要更新的账号" @change="handleAccountChange">
|
||||
<el-option
|
||||
v-for="item in subAccountList"
|
||||
:key="item.accountId"
|
||||
:label="item.name"
|
||||
:value="item.accountId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="mobile">
|
||||
<el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="权限分配" prop="permissionCodes">
|
||||
<el-tree
|
||||
ref="permissionTree"
|
||||
:data="permissionList"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:props="defaultProps"
|
||||
@check="handleTreeCheck"
|
||||
>
|
||||
</el-tree>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="save">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getAvailablePermissions,
|
||||
createSubAccount,
|
||||
getSubAccountList,
|
||||
getSubAccountDetail,
|
||||
updateSubAccount,
|
||||
checkUsername
|
||||
} from '@/api/modules/subaccount'
|
||||
import routerConfig from '@/router/full-routers'
|
||||
|
||||
// Function to filter the full menu tree based on available permissions
|
||||
const filterTreeByPerms = (tree, availablePerms) => {
|
||||
if (!Array.isArray(tree)) {
|
||||
return []; // Return empty array if tree is not an array
|
||||
}
|
||||
return tree.reduce((acc, node) => {
|
||||
// Recursively filter children
|
||||
const children = node.list && node.list.length > 0
|
||||
? filterTreeByPerms(node.list, availablePerms)
|
||||
: [];
|
||||
|
||||
// A node is kept if its permission is in the available list,
|
||||
// or if it has children that are kept.
|
||||
if (availablePerms.includes(node.perms) || children.length > 0) {
|
||||
acc.push({
|
||||
...node,
|
||||
list: children, // Use the filtered list of children
|
||||
});
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
};
|
||||
|
||||
// Function to map the filtered tree to the format required by el-tree
|
||||
const mapTreeForElTree = (tree) => {
|
||||
return tree.map((item) => ({
|
||||
id: item.perms, // Use perms as the id
|
||||
label: item.name,
|
||||
children: item.list && item.list.length > 0 ? mapTreeForElTree(item.list) : [],
|
||||
}));
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'SubOperator',
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (this.form.operationType !== 'create') {
|
||||
return callback();
|
||||
}
|
||||
if (!value) {
|
||||
return callback(new Error('请输入账号'));
|
||||
}
|
||||
checkUsername(value).then(res => {
|
||||
if (res && res.data && res.data.data && res.data.data.available === true) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error('账号已被占用'));
|
||||
}
|
||||
}).catch(() => {
|
||||
callback(new Error('账号校验失败'));
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
form: {
|
||||
operationType: 'create',
|
||||
username: '',
|
||||
password: '',
|
||||
name: '',
|
||||
mobile: '',
|
||||
permissionCodes: [],
|
||||
remark: '',
|
||||
accountId: null
|
||||
},
|
||||
subAccountList: [],
|
||||
permissionList: [],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
rules: {
|
||||
operationType: [
|
||||
{ required: true, message: "请选择操作类型", trigger: "change" },
|
||||
],
|
||||
username: [
|
||||
{ required: true, validator: validateUsername, trigger: "blur" },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: "请输入姓名", trigger: "blur" },
|
||||
],
|
||||
mobile: [
|
||||
{ required: true, message: "请输入手机号", trigger: "blur" },
|
||||
],
|
||||
permissionCodes: [
|
||||
{ required: true, message: "请选择菜单权限", trigger: "change", type: 'array' },
|
||||
],
|
||||
accountId: [
|
||||
{ required: true, message: "请选择要更新的账号", trigger: "change" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'form.operationType'(newType) {
|
||||
// Manually reset form fields to avoid resetting the operationType
|
||||
this.form.username = '';
|
||||
this.form.password = '';
|
||||
this.form.name = '';
|
||||
this.form.mobile = '';
|
||||
this.form.permissionCodes = [];
|
||||
this.form.remark = '';
|
||||
this.form.accountId = null;
|
||||
|
||||
// Clear validation messages after the DOM has updated
|
||||
this.$nextTick(() => {
|
||||
this.$refs.ruleFormRef.clearValidate();
|
||||
});
|
||||
|
||||
// Reset the tree's visual state
|
||||
if (this.$refs.permissionTree) {
|
||||
this.$refs.permissionTree.setCheckedKeys([]);
|
||||
}
|
||||
|
||||
if (newType === 'update') {
|
||||
this.loadSubAccountList();
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getPermissions();
|
||||
},
|
||||
methods: {
|
||||
getPermissions() {
|
||||
getAvailablePermissions().then((res) => {
|
||||
const availablePerms = (res && res.data && Array.isArray(res.data.data)) ? res.data.data : [];
|
||||
const menuList = (routerConfig && Array.isArray(routerConfig.menuList)) ? routerConfig.menuList : [];
|
||||
const filteredTree = filterTreeByPerms(menuList, availablePerms);
|
||||
this.permissionList = mapTreeForElTree(filteredTree);
|
||||
});
|
||||
},
|
||||
handleTreeCheck() {
|
||||
// getCheckedKeys(true) will return an array of keys of the currently checked leaf nodes.
|
||||
this.form.permissionCodes = this.$refs.permissionTree.getCheckedKeys(true);
|
||||
},
|
||||
loadSubAccountList() {
|
||||
getSubAccountList().then(res => {
|
||||
this.subAccountList = res.data.data || [];
|
||||
});
|
||||
},
|
||||
handleAccountChange(accountId) {
|
||||
if (!accountId) return;
|
||||
getSubAccountDetail(accountId).then(res => {
|
||||
const accountDetails = res.data.data;
|
||||
this.form.name = accountDetails.name;
|
||||
this.form.mobile = accountDetails.mobile;
|
||||
this.form.remark = accountDetails.remark;
|
||||
this.form.permissionCodes = accountDetails.permissionCodes || [];
|
||||
this.$nextTick(() => {
|
||||
this.$refs.permissionTree.setCheckedKeys(this.form.permissionCodes);
|
||||
});
|
||||
});
|
||||
},
|
||||
save() {
|
||||
this.$refs.ruleFormRef.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.operationType === 'create') {
|
||||
const createData = { ...this.form };
|
||||
if (createData.accountId === null) {
|
||||
delete createData.accountId;
|
||||
}
|
||||
createSubAccount(createData).then(() => {
|
||||
this.$message.success('创建成功');
|
||||
this.$refs.ruleFormRef.resetFields();
|
||||
});
|
||||
} else if (this.form.operationType === 'update') {
|
||||
if (!this.form.accountId) {
|
||||
this.$message.error('请先选择要更新的账号');
|
||||
return;
|
||||
}
|
||||
const updateData = {
|
||||
subAccountId: this.form.accountId,
|
||||
name: this.form.name,
|
||||
mobile: this.form.mobile,
|
||||
permissionCodes: this.form.permissionCodes,
|
||||
remark: this.form.remark,
|
||||
enabled: true // 根据示例，默认为 true
|
||||
};
|
||||
updateSubAccount(updateData).then(() => {
|
||||
this.$message.success('更新成功');
|
||||
this.$refs.ruleFormRef.resetFields();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue