fix: 创建新商户

This commit is contained in:
lzhizhao 2025-09-12 00:49:14 +08:00
parent 66ba90718d
commit cb32ba47ef
2 changed files with 283 additions and 181 deletions

View File

@ -18,7 +18,7 @@ export function setMerchantPermissions(data) {
export function shopBaseConfig(query, data) {
return request({
url: '/shop/base_config',
url: '/merchant-api/shop/base_config',
method: 'put',
params: query,
data
@ -27,7 +27,7 @@ export function shopBaseConfig(query, data) {
export function listPlatformCategory(params) {
return request({
url: '/category/list',
url: '/merchant-api/category/list',
method: 'get',
params
})

View File

@ -8,8 +8,16 @@
:rules="rules"
style="max-width: 600px"
>
<el-form-item v-if="!marketId && markets.length > 0" label="选择市场" prop="selectedMarketId">
<el-select v-model="form.selectedMarketId" placeholder="请选择市场" style="width: 100%">
<el-form-item
v-if="!marketId && markets.length > 0"
label="选择市场"
prop="selectedMarketId"
>
<el-select
v-model="form.selectedMarketId"
placeholder="请选择市场"
style="width: 100%"
>
<el-option
v-for="market in markets"
:key="market.marketId"
@ -20,7 +28,11 @@
</el-form-item>
<el-form-item label="操作类型" prop="operationType">
<el-select v-model="form.operationType" placeholder="请选择操作类型" style="width: 100%">
<el-select
v-model="form.operationType"
placeholder="请选择操作类型"
style="width: 100%"
>
<el-option label="创建新商户" value="create"></el-option>
<el-option label="维护商户信息" value="update"></el-option>
</el-select>
@ -28,10 +40,17 @@
<template v-if="form.operationType === 'create'">
<el-form-item label="商户账号" prop="mobile">
<el-input v-model="form.mobile" placeholder="请输入商户账号"></el-input>
<el-input
v-model="form.mobile"
placeholder="请输入商户账号"
></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
<el-input
v-model="form.password"
type="password"
placeholder="请输入密码"
></el-input>
</el-form-item>
<h3>店铺基础信息</h3>
@ -39,7 +58,11 @@
<el-input v-model="form.name" placeholder="请输入摊位名称"></el-input>
</el-form-item>
<el-form-item label="主营类目" prop="categoryId">
<el-select v-model="form.categoryId" placeholder="请选择主营类目" style="width: 100%">
<el-select
v-model="form.categoryId"
placeholder="请选择主营类目"
style="width: 100%"
>
<el-option
v-for="item in categoryList"
:key="item.id"
@ -50,22 +73,27 @@
</el-form-item>
<el-form-item label="摊位背景图" prop="background">
<el-upload
class="avatar-uploader"
accept="image/*"
:action="uploadUrl"
list-type="picture-card"
:headers="uploadHeaders"
:show-file-list="false"
:on-success="handleBackgroundSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="form.background" :src="form.background" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<img v-if="form.background" :src="form.background" width="148px" height="148px" />
<i v-else class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="摊位联系电话" prop="contactPhone">
<el-input v-model="form.contactPhone" placeholder="请输入联系电话/手机号"></el-input>
<el-input
v-model="form.contactPhone"
placeholder="请输入联系电话/手机号"
></el-input>
</el-form-item>
<el-form-item label="摊位照片" prop="fileList">
<el-upload
accept="image/*"
:action="uploadUrl"
:headers="uploadHeaders"
list-type="picture-card"
@ -78,13 +106,20 @@
</el-upload>
</el-form-item>
<el-form-item label="摊位位置" prop="address">
<el-input v-model="form.address" placeholder="请输入摊位位置"></el-input>
<el-input
v-model="form.address"
placeholder="请输入摊位位置"
></el-input>
</el-form-item>
<el-form-item label="摊位详细地址" prop="detailAddress">
<el-input v-model="form.detailAddress" placeholder="请输入摊位详细地址"></el-input>
<el-input
v-model="form.detailAddress"
placeholder="请输入摊位详细地址"
></el-input>
</el-form-item>
<el-form-item label="许可证" prop="permits">
<el-upload
accept="image/*"
:action="uploadUrl"
:headers="uploadHeaders"
list-type="picture-card"
@ -106,30 +141,41 @@
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
placeholder="选择时间范围"
>
</el-time-picker>
</el-form-item>
<el-form-item label="顾客自提点位置" prop="pickName">
<el-input v-model="form.pickName" placeholder="请输入顾客自提点位置"></el-input>
<el-input
v-model="form.pickName"
placeholder="请输入顾客自提点位置"
></el-input>
</el-form-item>
<el-form-item label="自提点详细地址" prop="pickAddress">
<el-input v-model="form.pickAddress" placeholder="请输入自提点详细地址"></el-input>
<el-input
v-model="form.pickAddress"
placeholder="请输入自提点详细地址"
></el-input>
</el-form-item>
<el-form-item label="自提点位置示意图" prop="pickImg">
<el-upload
class="avatar-uploader"
accept="image/*"
:action="uploadUrl"
list-type="picture-card"
:headers="uploadHeaders"
:show-file-list="false"
:on-success="handlePickImgSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="form.pickImg" :src="form.pickImg" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<img v-if="form.pickImg" :src="form.pickImg" width="148px" height="148px" />
<i v-else class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item label="承诺送达自提点时间" prop="promisePickDeliveryTime">
<el-input v-model.number="form.promisePickDeliveryTime" placeholder="请输入小时数">
<el-input
v-model.number="form.promisePickDeliveryTime"
placeholder="请输入小时数"
>
<template slot="append">小时以内</template>
</el-input>
</el-form-item>
@ -137,7 +183,12 @@
<template v-if="form.operationType === 'update'">
<el-form-item label="选择商户账号" prop="merchantId">
<el-select v-model="form.merchantId" placeholder="请选择要更新的商户账号" @change="handleAccountChange" style="width: 100%">
<el-select
v-model="form.merchantId"
placeholder="请选择要更新的商户账号"
@change="handleAccountChange"
style="width: 100%"
>
<el-option
v-for="item in merchantAccountList"
:key="item.merchantId"
@ -147,10 +198,16 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button type="warning" @click="openResetPasswordDialog">重置密码</el-button>
<el-button type="warning" @click="openResetPasswordDialog"
>重置密码</el-button
>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="form.enable" active-text="启用" inactive-text="禁用"></el-switch>
<el-switch
v-model="form.enable"
active-text="启用"
inactive-text="禁用"
></el-switch>
</el-form-item>
</template>
@ -179,7 +236,11 @@
>
<el-form label-width="80px">
<el-form-item label="新密码">
<el-input v-model="newPassword" type="password" placeholder="请输入新密码"></el-input>
<el-input
v-model="newPassword"
type="password"
placeholder="请输入新密码"
></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
@ -193,9 +254,16 @@
<script>
import {
getAvailablePermissions,
checkUsername,
checkUsername
} from '@/api/modules/subaccount' // Assuming some APIs can be reused
import { inviteJoin, setMerchantPermissions, shopBaseConfig, listPlatformCategory, getMerchantList, updatePassword } from '@/api/modules/merchant' // New merchant API
import {
inviteJoin,
setMerchantPermissions,
shopBaseConfig,
listPlatformCategory,
getMerchantList,
updatePassword
} from '@/api/modules/merchant' // New merchant API
import { mer_admin } from '@/api/modules/mer_admin'
import routerConfig from '@/router/full-routers'
import { mapState } from 'vuex'
@ -204,52 +272,61 @@ import cookie from 'js-cookie'
// Function to filter the full menu tree based on available permissions
const filterTreeByPerms = (tree, availablePerms) => {
if (!Array.isArray(tree)) {
return [];
return []
}
return tree.reduce((acc, node) => {
const children = node.list && node.list.length > 0
const children =
node.list && node.list.length > 0
? filterTreeByPerms(node.list, availablePerms)
: [];
: []
if (availablePerms.includes(node.perms) || children.length > 0) {
acc.push({
...node,
list: children,
});
list: children
})
}
return acc
}, [])
}
return acc;
}, []);
};
// Function to map the filtered tree to the format required by el-tree
const mapTreeForElTree = (tree) => {
return tree.map((item) => ({
const mapTreeForElTree = tree => {
return tree.map(item => ({
id: item.perms,
label: item.name,
children: item.list && item.list.length > 0 ? mapTreeForElTree(item.list) : [],
}));
};
children:
item.list && item.list.length > 0 ? mapTreeForElTree(item.list) : []
}))
}
export default {
name: 'MerchantAccount',
data() {
const validateMobile = (rule, value, callback) => {
if (this.form.operationType !== 'create') {
return callback();
return callback()
}
if (!value) {
return callback(new Error('请输入商户账号'));
return callback(new Error('请输入商户账号'))
}
checkUsername(value, this.form.selectedMarketId || this.marketId).then(res => {
if (res && res.data && res.data.data && res.data.data.available === true) {
callback();
checkUsername(value, this.form.selectedMarketId || this.marketId)
.then(res => {
if (
res &&
res.data &&
res.data.data &&
res.data.data.available === true
) {
callback()
} else {
callback(new Error('商户账号已被占用'));
callback(new Error('商户账号已被占用'))
}
})
.catch(() => {
callback(new Error('商户账号校验失败'))
})
}
}).catch(() => {
callback(new Error('商户账号校验失败'));
});
};
return {
resetPasswordDialogVisible: false,
@ -281,9 +358,12 @@ export default {
pickAddress: '',
pickLat: '',
pickImg: '',
promisePickDeliveryTime: '',
promisePickDeliveryTime: ''
},
businessHours: [new Date(2016, 9, 10, 0, 0), new Date(2016, 9, 10, 23, 59)],
businessHours: [
new Date(2016, 9, 10, 0, 0),
new Date(2016, 9, 10, 23, 59)
],
categoryList: [],
merchantAccountList: [], // To be populated with merchant accounts
permissionList: [],
@ -293,180 +373,197 @@ export default {
},
rules: {
operationType: [
{ required: true, message: "请选择操作类型", trigger: "change" },
{ required: true, message: '请选择操作类型', trigger: 'change' }
],
mobile: [
{ required: true, validator: validateMobile, trigger: "blur" },
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
],
name: [
{ required: true, message: "请输入摊位名称", trigger: "blur" },
{ required: true, validator: validateMobile, trigger: 'blur' }
],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
name: [{ required: true, message: '请输入摊位名称', trigger: 'blur' }],
categoryId: [
{ required: true, message: "请选择主营类目", trigger: "change" },
{ required: true, message: '请选择主营类目', trigger: 'change' }
],
background: [
{ required: true, message: "请上传摊位背景图", trigger: "change" },
{ required: true, message: '请上传摊位背景图', trigger: 'change' }
],
fileList: [
{ required: true, message: "请上传摊位照片", trigger: "change" },
{ required: true, message: '请上传摊位照片', trigger: 'change' }
],
address: [
{ required: true, message: "请输入摊位位置", trigger: "blur" },
{ required: true, message: '请输入摊位位置', trigger: 'blur' }
],
detailAddress: [
{ required: true, message: "请输入摊位详细地址", trigger: "blur" },
{ required: true, message: '请输入摊位详细地址', trigger: 'blur' }
],
pickName: [
{ required: true, message: "请输入顾客自提点位置", trigger: "blur" },
{ required: true, message: '请输入顾客自提点位置', trigger: 'blur' }
],
pickAddress: [
{ required: true, message: "请输入自提点详细地址", trigger: "blur" },
{ required: true, message: '请输入自提点详细地址', trigger: 'blur' }
],
promisePickDeliveryTime: [
{ required: true, message: "请输入承诺送达自提点时间", trigger: "blur" },
{
required: true,
message: '请输入承诺送达自提点时间',
trigger: 'blur'
},
{ type: 'number', message: '必须为数字值' }
],
permissionCodes: [
{ required: true, message: "请选择菜单权限", trigger: "change", type: 'array' },
{
required: true,
message: '请选择菜单权限',
trigger: 'change',
type: 'array'
}
],
merchantId: [
{ required: true, message: "请选择要更新的商户账号", trigger: "change" },
],
},
};
{
required: true,
message: '请选择要更新的商户账号',
trigger: 'change'
}
]
}
}
},
computed: {
...mapState("userData", [
"isMerchant",
"marketList",
"storeList",
"marketId",
"shopId",
"markets"
...mapState('userData', [
'isMerchant',
'marketList',
'storeList',
'marketId',
'shopId',
'markets'
]),
uploadUrl() {
return mer_admin.uploadFile();
return mer_admin.uploadFile()
},
uploadHeaders() {
return {
token: cookie.get('token')
};
}
}
},
watch: {
'form.operationType'(newType) {
this.form.mobile = '';
this.form.password = '';
this.form.permissionCodes = [];
this.form.merchantId = null;
this.form.mobile = ''
this.form.password = ''
this.form.permissionCodes = []
this.form.merchantId = null
this.$nextTick(() => {
this.$refs.ruleFormRef.clearValidate();
});
this.$refs.ruleFormRef.clearValidate()
})
if (this.$refs.permissionTree) {
this.$refs.permissionTree.setCheckedKeys([]);
this.$refs.permissionTree.setCheckedKeys([])
}
if (newType === 'update') {
this.loadMerchantAccountList();
this.loadMerchantAccountList()
}
}
},
created() {
this.getPermissions();
this.getPlatformCategory();
this.getPermissions()
this.getPlatformCategory()
},
methods: {
getPlatformCategory() {
listPlatformCategory({ type: this.isCloudShop ? 1 : 0 }).then(res => {
this.categoryList = res.data.data;
});
this.categoryList = res.data.data
})
},
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);
});
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)
})
},
openResetPasswordDialog() {
if (!this.form.merchantId) {
this.$message.error('请先选择要更新的商户账号');
return;
this.$message.error('请先选择要更新的商户账号')
return
}
this.resetPasswordDialogVisible = true;
this.resetPasswordDialogVisible = true
},
handleResetPassword() {
if (!this.newPassword) {
this.$message.error('请输入新密码');
return;
this.$message.error('请输入新密码')
return
}
updatePassword({ password: this.newPassword }).then(() => {
this.$message.success('密码重置成功');
this.resetPasswordDialogVisible = false;
});
this.$message.success('密码重置成功')
this.resetPasswordDialogVisible = false
})
},
handleTreeCheck() {
this.form.permissionCodes = this.$refs.permissionTree.getCheckedKeys(true);
this.form.permissionCodes = this.$refs.permissionTree.getCheckedKeys(true)
},
handleBackgroundSuccess(res) {
this.form.background = res.data;
this.form.background = res.data
},
handleFileListSuccess(res, file, fileList) {
this.form.fileList = fileList;
this.form.fileList = fileList
},
handlePermitsSuccess(res, file, fileList) {
this.form.permits = fileList;
this.form.permits = fileList
},
handlePickImgSuccess(res) {
this.form.pickImg = res.data;
this.form.pickImg = res.data
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
const isImage = file.type.startsWith('image/')
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
if (!isImage) {
this.$message.error('上传文件只能是图片格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
this.$message.error('上传图片大小不能超过 2MB!')
}
return isJPG && isLt2M;
return isImage && isLt2M
},
handleRemove(file, fileList) {
this.form.fileList = fileList;
this.form.fileList = fileList
},
handlePermitsRemove(file, fileList) {
this.form.permits = fileList;
this.form.permits = fileList
},
loadMerchantAccountList() {
getMerchantList({ marketId: this.form.selectedMarketId || this.marketId }).then(res => {
this.merchantAccountList = res.data.data || [];
});
getMerchantList({
marketId: this.form.selectedMarketId || this.marketId
}).then(res => {
this.merchantAccountList = res.data.data || []
})
},
handleAccountChange(merchantId) {
if (!merchantId) return;
const accountDetails = this.merchantAccountList.find(item => item.merchantId === merchantId);
if (!merchantId) return
const accountDetails = this.merchantAccountList.find(
item => item.merchantId === merchantId
)
if (accountDetails) {
this.form.permissionCodes = accountDetails.permissionCodes || [];
this.form.enable = accountDetails.enabled;
this.form.permissionCodes = accountDetails.permissionCodes || []
this.form.enable = accountDetails.enabled
this.$nextTick(() => {
this.$refs.permissionTree.setCheckedKeys(this.form.permissionCodes);
});
this.$refs.permissionTree.setCheckedKeys(this.form.permissionCodes)
})
}
},
save() {
this.$refs.ruleFormRef.validate((valid) => {
this.$refs.ruleFormRef.validate(valid => {
if (valid) {
const marketId = this.form.selectedMarketId || this.marketId;
const marketId = this.form.selectedMarketId || this.marketId
if (!marketId) {
this.$message.error('请选择市场');
return;
this.$message.error('请选择市场')
return
}
if (this.form.operationType === 'create') {
@ -477,48 +574,52 @@ export default {
remark: '',
username: this.form.mobile,
password: this.form.password
};
inviteJoin(createData).then((res) => {
const merchantAccountId = res.data.data.merchantId; // Assuming this is the merchant ID
const shopId = res.data.data.shopId; // Assuming this is the shop ID
}
inviteJoin(createData).then(res => {
const merchantAccountId = res.data.data.merchantAccountId // Assuming this is the merchant ID
const shopId = res.data.data.shopId // Assuming this is the shop ID
const permissionsData = {
merchantAccountId,
permissionCodes: this.form.permissionCodes,
marketId
};
}
setMerchantPermissions(permissionsData).then(() => {
const shopData = {
...this.form,
imgs: this.form.fileList.map(f => f.url).join(','),
permits: this.form.permits.map(f => f.url).join(','),
startBusinessTime: this.businessHours[0].getHours() * 60 + this.businessHours[0].getMinutes(),
endBusinessTime: this.businessHours[1].getHours() * 60 + this.businessHours[1].getMinutes(),
};
startBusinessTime:
this.businessHours[0].getHours() * 60 +
this.businessHours[0].getMinutes(),
endBusinessTime:
this.businessHours[1].getHours() * 60 +
this.businessHours[1].getMinutes()
}
shopBaseConfig({ shopId }, shopData).then(() => {
this.$message.success('商户创建成功,权限及店铺信息已设置');
this.$refs.ruleFormRef.resetFields();
});
});
});
this.$message.success('商户创建成功,权限及店铺信息已设置')
this.$refs.ruleFormRef.resetFields()
})
})
})
} else if (this.form.operationType === 'update') {
if (!this.form.merchantId) {
this.$message.error('请先选择要更新的商户账号');
return;
this.$message.error('请先选择要更新的商户账号')
return
}
const permissionsData = {
merchantAccountId: this.form.merchantId,
permissionCodes: this.form.permissionCodes,
marketId
};
}
setMerchantPermissions(permissionsData).then(() => {
this.$message.success('商户信息更新成功');
this.$refs.ruleFormRef.resetFields();
});
this.$message.success('商户信息更新成功')
this.$refs.ruleFormRef.resetFields()
})
}
}
});
})
}
}
},
}
</script>
@ -534,7 +635,7 @@ export default {
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
@ -549,3 +650,4 @@ export default {
height: 178px;
display: block;
}
</style>