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,
|
open: null,
|
||||||
list: []
|
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(),
|
// menuId: getUUID(),
|
||||||
// parentId: 0,
|
// 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(),
|
menuId: getUUID(),
|
||||||
parentId: 0,
|
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