<template>
|
<GlobalWindow
|
title="编辑门店"
|
:visible.sync="visible"
|
width="600px"
|
:confirm-working="isWorking.save"
|
@confirm="handleConfirm"
|
>
|
<el-form ref="form" :model="form" :rules="rules">
|
<div class="form-section">
|
<h4 class="section-title">账号信息</h4>
|
<el-form-item label="注册手机号" prop="telephone">
|
<el-input v-model="form.telephone" disabled></el-input>
|
</el-form-item>
|
<div class="password-tip">默认密码默认为：【手机号后六位+@123456"，如后六位为981923，默认密码：981923@123456</div>
|
</div>
|
|
<div class="form-section">
|
<h4 class="section-title">基本信息</h4>
|
<el-form-item label="门店名称" prop="name">
|
<el-input v-model="form.name" placeholder="请输入门店名称"></el-input>
|
</el-form-item>
|
<el-form-item label="门店类型" prop="companyType">
|
<el-radio-group v-model="form.companyType" disabled>
|
<el-radio :label="1">企业</el-radio>
|
<el-radio :label="0">个人</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="联系人" prop="linkName">
|
<el-input v-model="form.linkName" placeholder="请输入联系人"></el-input>
|
</el-form-item>
|
<el-form-item label="联系电话" prop="linkPhone">
|
<el-input v-model="form.linkPhone" placeholder="请输入联系电话"></el-input>
|
</el-form-item>
|
<el-form-item label="身份证号" prop="idcard">
|
<el-input v-model="form.idcard" placeholder="请输入身份证号"></el-input>
|
</el-form-item>
|
<el-form-item label="所在省市区" prop="areaCode">
|
<el-cascader v-model="form.areaCode" :options="areaOptions" placeholder="请选择省市区"></el-cascader>
|
</el-form-item>
|
<el-form-item label="门店地址" prop="address">
|
<el-input v-model="form.address" placeholder="请输入门店地址"></el-input>
|
</el-form-item>
|
<el-form-item label="经纬度" prop="longitude">
|
<div class="longitude-latitude">
|
<el-input v-model="form.longitude" placeholder="经度" style="width: 150px;"></el-input>
|
<span class="separator">-</span>
|
<el-input v-model="form.latitude" placeholder="纬度" style="width: 150px;"></el-input>
|
<el-button type="primary" @click="openMapSelector">选择</el-button>
|
</div>
|
</el-form-item>
|
<el-form-item label="位置标签" prop="locationTagIds">
|
<el-select v-model="form.locationTagIds" multiple placeholder="请选择位置标签" style="width: 100%;">
|
<el-option v-for="item in locationTagList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="门店配送范围" prop="deliveryRange">
|
<div class="delivery-range">
|
<el-input v-model.number="form.deliveryRange" placeholder="请输入配送范围" style="width: 150px;"></el-input>
|
<span class="unit">公里</span>
|
</div>
|
</el-form-item>
|
</div>
|
|
<div class="form-section">
|
<el-tabs v-model="qualificationTab">
|
<el-tab-pane v-if="form.companyType === 1" label="主体资质（企业）" name="enterprise">
|
<el-form-item label="法人姓名" prop="legalPersonName">
|
<el-input v-model="form.legalPersonName" placeholder="请输入法人姓名"></el-input>
|
</el-form-item>
|
<el-form-item label="法人手机号" prop="legalPersonPhone">
|
<el-input v-model="form.legalPersonPhone" placeholder="请输入法人手机号"></el-input>
|
</el-form-item>
|
<el-form-item label="法人身份证号" prop="legalPersonCard">
|
<el-input v-model="form.legalPersonCard" placeholder="请输入法人身份证号"></el-input>
|
</el-form-item>
|
<el-form-item label="法人身份证正面" prop="idcardImg">
|
<UploadImages
|
:fileList="form.idcardImg"
|
:uploadData="{ folder: 'shop' }"
|
@getFileList="e => form.idcardImg.push(e)"
|
@deleteRow="index => form.idcardImg.splice(index, 1)" />
|
</el-form-item>
|
<el-form-item label="法人身份证反面" prop="idcardImgBack">
|
<UploadImages
|
:fileList="form.idcardImgBack"
|
:uploadData="{ folder: 'shop' }"
|
@getFileList="e => form.idcardImgBack.push(e)"
|
@deleteRow="index => form.idcardImgBack.splice(index, 1)" />
|
</el-form-item>
|
<el-form-item label="营业执照" prop="businessImg">
|
<UploadImages
|
:fileList="form.businessImg"
|
:uploadData="{ folder: 'shop' }"
|
@getFileList="e => form.businessImg.push(e)"
|
@deleteRow="index => form.businessImg.splice(index, 1)" />
|
</el-form-item>
|
</el-tab-pane>
|
<el-tab-pane v-if="form.companyType === 0" label="主体资质（个人）" name="personal">
|
<el-form-item label="身份证正面" prop="idcardImg">
|
<UploadImages
|
:fileList="form.idcardImg"
|
:uploadData="{ folder: 'shop' }"
|
@getFileList="e => form.idcardImg.push(e)"
|
@deleteRow="index => form.idcardImg.splice(index, 1)" />
|
</el-form-item>
|
<el-form-item label="身份证反面" prop="idcardImgBack">
|
<UploadImages
|
:fileList="form.idcardImgBack"
|
:uploadData="{ folder: 'shop' }"
|
@getFileList="e => form.idcardImgBack.push(e)"
|
@deleteRow="index => form.idcardImgBack.splice(index, 1)" />
|
</el-form-item>
|
<el-form-item label="有效劳动合同" prop="laborContractImgs">
|
<UploadImages
|
:fileList="form.laborContractImgs"
|
:uploadData="{ folder: 'shop' }"
|
:maxCount="3"
|
@getFileList="e => form.laborContractImgs.push(e)"
|
@deleteRow="index => form.laborContractImgs.splice(index, 1)" />
|
</el-form-item>
|
<el-form-item label="社保缴纳证明" prop="socialSecurityImgs">
|
<UploadImages
|
:fileList="form.socialSecurityImgs"
|
:uploadData="{ folder: 'shop' }"
|
:maxCount="3"
|
@getFileList="e => form.socialSecurityImgs.push(e)"
|
@deleteRow="index => form.socialSecurityImgs.splice(index, 1)" />
|
</el-form-item>
|
</el-tab-pane>
|
<el-tab-pane label="门店照片及其他材料" name="photos">
|
<el-form-item label="门店门头照" prop="storeFrontImgs">
|
<UploadImages
|
:fileList="form.storeFrontImgs"
|
:uploadData="{ folder: 'shop' }"
|
:maxCount="3"
|
@getFileList="e => form.storeFrontImgs.push(e)"
|
@deleteRow="index => form.storeFrontImgs.splice(index, 1)" />
|
</el-form-item>
|
<el-form-item label="门店内部照片" prop="storeInteriorImgs">
|
<UploadImages
|
:fileList="form.storeInteriorImgs"
|
:uploadData="{ folder: 'shop' }"
|
:maxCount="3"
|
@getFileList="e => form.storeInteriorImgs.push(e)"
|
@deleteRow="index => form.storeInteriorImgs.splice(index, 1)" />
|
</el-form-item>
|
<el-form-item label="其它材料" prop="otherMaterialImgs">
|
<UploadImages
|
:fileList="form.otherMaterialImgs"
|
:uploadData="{ folder: 'shop' }"
|
:maxCount="3"
|
@getFileList="e => form.otherMaterialImgs.push(e)"
|
@deleteRow="index => form.otherMaterialImgs.splice(index, 1)" />
|
</el-form-item>
|
</el-tab-pane>
|
|
<el-tab-pane label="门店分成" name="profit">
|
<div class="profit-section">
|
<h4 class="section-title">就地寄存模式</h4>
|
<el-form-item label="在订单中作为寄件点时，分成比例为" label-suffix="：*">
|
<div class="profit-input">
|
<el-input v-model.number="form.localDeposit" placeholder="请输入分成比例" style="width: 150px;"></el-input>
|
<span class="unit">%</span>
|
</div>
|
</el-form-item>
|
</div>
|
|
<div class="profit-section">
|
<h4 class="section-title">同城寄送模式</h4>
|
<el-form-item label="在订单中作为寄件点时，分成比例为" label-suffix="：*">
|
<div class="profit-input">
|
<el-input v-model.number="form.remoteTake" placeholder="请输入分成比例" style="width: 150px;"></el-input>
|
<span class="unit">%</span>
|
</div>
|
</el-form-item>
|
<el-form-item label="在订单中作为收件点时，分成比例为" label-suffix="：*">
|
<div class="profit-input">
|
<el-input v-model.number="form.remoteDeposit" placeholder="请输入分成比例" style="width: 150px;"></el-input>
|
<span class="unit">%</span>
|
</div>
|
</el-form-item>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import UploadImages from '@/components/common/uploadImages'
|
import { detail, updateById } from '@/api/business/shopInfo'
|
import { listByParentId } from '@/api/business/areas'
|
import { fetchList } from '@/api/business/category'
|
export default {
|
name: 'OperaShopEditWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, UploadImages },
|
data () {
|
return {
|
form: {
|
id: null,
|
telephone: '',
|
name: '',
|
companyType: 1,
|
linkName: '',
|
linkPhone: '',
|
idcard: '',
|
areaCode: [],
|
provinceId: '',
|
cityId: '',
|
areaId: '',
|
address: '',
|
longitude: '',
|
latitude: '',
|
locationTagIds: [],
|
deliveryRange: '',
|
localDeposit: '',
|
remoteTake: '',
|
remoteDeposit: '',
|
legalPersonName: '',
|
legalPersonPhone: '',
|
legalPersonCard: '',
|
idcardImg: '',
|
idcardImgBack: '',
|
businessLicenseImg: '',
|
laborContractImgs: '',
|
socialSecurityImgs: '',
|
storeFrontImgs: '',
|
storeInteriorImgs: '',
|
otherMaterialImgs: ''
|
},
|
locationTagList: [],
|
rules: {
|
name: [{ required: true, message: '请输入门店名称', trigger: 'blur' }],
|
companyType: [{ required: true, message: '请选择门店类型', trigger: 'change' }],
|
linkName: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
|
linkPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
|
idcard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
|
areaCode: [{ required: true, message: '请选择省市区', trigger: 'change' }],
|
address: [{ required: true, message: '请输入门店地址', trigger: 'blur' }],
|
longitude: [{ required: true, message: '请选择经纬度', trigger: 'blur' }],
|
legalPersonName: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
|
legalPersonPhone: [{ required: true, message: '请输入法人手机号', trigger: 'blur' }],
|
legalPersonCard: [{ required: true, message: '请输入法人身份证号', trigger: 'blur' }],
|
businessImg: [{ required: true, message: '请输入营业执照', trigger: 'blur' }],
|
idcardImg: [{ required: true, message: '请输入身份证正面', trigger: 'blur' }],
|
idcardImgBack: [{ required: true, message: '请输入身份证反面', trigger: 'blur' }],
|
laborContractImgs: [{ required: true, message: '请输入有效劳动合同', trigger: 'blur' }],
|
socialSecurityImgs: [{ required: true, message: '请输入社保缴纳证明', trigger: 'blur' }],
|
storeFrontImgs: [{ required: true, message: '请输入门店门头照', trigger: 'blur' }],
|
storeInteriorImgs: [{ required: true, message: '请输入门店内部照片', trigger: 'blur' }]
|
// otherMaterialImgs: [{ required: true, message: '请输入其它材料', trigger: 'blur' }]
|
},
|
qualificationTab: 'enterprise',
|
areaOptions: [],
|
isWorking: {
|
save: false
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/shopInfo',
|
'field.id': 'id'
|
})
|
this.loadAreaOptions()
|
this.getLocationTagList()
|
},
|
methods: {
|
open (title, row) {
|
this.isWorking.save = false
|
detail(row.id)
|
.then(res => {
|
this.form = {
|
id: res.id,
|
telephone: res.telephone || '',
|
name: res.name || '',
|
companyType: res.companyType ?? 1,
|
linkName: res.linkName || '',
|
linkPhone: res.linkPhone || '',
|
idcard: res.idcard || '',
|
areaCode: res.provinceId ? [res.provinceId, res.cityId, res.areaId] : [],
|
provinceId: res.provinceId || '',
|
cityId: res.cityId || '',
|
areaId: res.areaId || '',
|
address: res.address || '',
|
longitude: res.longitude || '',
|
latitude: res.latitude || '',
|
locationTagIds: res.locationTagIds || [],
|
deliveryRange: res.deliveryRange || '',
|
localDeposit: res.localDeposit || '',
|
remoteTake: res.remoteTake || '',
|
remoteDeposit: res.remoteDeposit || '',
|
legalPersonName: res.legalPersonName || '',
|
legalPersonPhone: res.legalPersonPhone || '',
|
legalPersonCard: res.legalPersonCard || '',
|
businessImg: res.companyType === 1 ? [{ fileurl: res.businessImg, url: res.imgPrefix + res.businessImg }] : [],
|
idcardImg: [{ fileurl: res.idcardImg, url: res.imgPrefix + res.idcardImg }],
|
idcardImgBack: [{ fileurl: res.idcardImgBack, url: res.imgPrefix + res.idcardImgBack }],
|
laborContractImgs: res.laborContractImgs.map(item => ({ fileurl: item, url: res.imgPrefix + item })),
|
socialSecurityImgs: res.socialSecurityImgs.map(item => ({ fileurl: item, url: res.imgPrefix + item })),
|
storeFrontImgs: res.storeFrontImgs.map(item => ({ fileurl: item, url: res.imgPrefix + item })),
|
storeInteriorImgs: res.storeInteriorImgs.map(item => ({ fileurl: item, url: res.imgPrefix + item })),
|
otherMaterialImgs: res.otherMaterialImgs ? res.otherMaterialImgs.map(item => ({ fileurl: item, url: res.imgPrefix + item })) : []
|
}
|
// 处理位置标签（字符串转数组）
|
if (this.form.locationTagIds && typeof this.form.locationTagIds === 'string') {
|
this.form.locationTagIds = this.form.locationTagIds.split(',').map(Number)
|
}
|
this.qualificationTab = res.companyType === 1 ? 'enterprise' : 'personal'
|
this.title = title
|
this.visible = true
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
},
|
loadAreaOptions () {
|
listByParentId({ })
|
.then(data => {
|
this.areaOptions = this.formatAreaData(data)
|
console.log(this.areaOptions)
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
},
|
// 获取位置标签列表
|
async getLocationTagList() {
|
try {
|
const res = await fetchList({
|
capacity: 9999,
|
page: 1,
|
model: {}
|
})
|
this.locationTagList = res.records
|
} catch (e) {
|
this.$tip.apiFailed(e.message)
|
}
|
},
|
formatAreaData (data) {
|
const map = {}
|
const result = []
|
data.forEach(item => {
|
map[item.id] = { value: item.id, label: item.name, children: [] }
|
})
|
data.forEach(item => {
|
if (item.type === 0) {
|
result.push(map[item.id])
|
} else if (item.type === 1 && item.parentId && map[item.parentId]) {
|
map[item.parentId].children.push(map[item.id])
|
} else if (item.type === 2 && item.parentId && map[item.parentId]) {
|
map[item.parentId].children.push(map[item.id])
|
}
|
})
|
const clearEmptyChildren = (nodes) => {
|
nodes.forEach(node => {
|
if (node.children.length === 0) {
|
node.children = null
|
} else {
|
clearEmptyChildren(node.children)
|
}
|
})
|
}
|
clearEmptyChildren(result)
|
return result
|
},
|
openMapSelector () {
|
window.open('https://lbs.qq.com/getPoint/', '_blank')
|
},
|
async handleConfirm () {
|
try {
|
// 校验分成比例
|
if (!this.form.localDeposit) {
|
this.$message.error('请填写就地寄存模式的分成比例')
|
return
|
}
|
if (!this.form.remoteTake) {
|
this.$message.error('请填写同城寄送模式下作为寄件点的分成比例')
|
return
|
}
|
if (!this.form.remoteDeposit) {
|
this.$message.error('请填写同城寄送模式下作为收件点的分成比例')
|
return
|
}
|
|
const valid = await this.$refs.form.validate()
|
if (!valid) return
|
this.isWorking.save = true
|
const params = { ...this.form }
|
// 处理省市区编码
|
if (params.areaCode && params.areaCode.length === 3) {
|
params.provinceId = params.areaCode[0]
|
params.cityId = params.areaCode[1]
|
params.areaId = params.areaCode[2]
|
}
|
delete params.areaCode
|
// 处理位置标签（数组转逗号分隔字符串）
|
if (params.locationTagIds && Array.isArray(params.locationTagIds)) {
|
params.locationTagIds = params.locationTagIds.join(',')
|
}
|
// 处理图片数组
|
const imageFields = ['idcardImg', 'idcardImgBack', 'businessImg', 'laborContractImgs', 'socialSecurityImgs', 'storeFrontImgs', 'storeInteriorImgs', 'otherMaterialImgs']
|
imageFields.forEach(field => {
|
if (params[field] && Array.isArray(params[field])) {
|
// 身份证和营业执照图片需要传字符串（单个图片）
|
if (['idcardImg', 'idcardImgBack', 'businessImg'].includes(field)) {
|
params[field] = params[field].map(item => item.fileurl).join(',')
|
} else {
|
// 其他图片传数组
|
params[field] = params[field].map(item => item.fileurl)
|
}
|
}
|
})
|
// 个人门店不需要传businessImg
|
if (params.companyType === 0) {
|
delete params.businessImg
|
}
|
await updateById(params)
|
this.$tip.apiSuccess('保存成功')
|
this.visible = false
|
this.$emit('success')
|
} catch (e) {
|
this.$tip.apiFailed(e)
|
console.error('保存失败:', e)
|
} finally {
|
this.isWorking.save = false
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.form-section {
|
margin-bottom: 20px;
|
}
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 15px;
|
padding-left: 10px;
|
border-left: 4px solid #2E68EC;
|
}
|
.password-tip {
|
color: #909399;
|
font-size: 12px;
|
margin: -10px 0 15px 0;
|
}
|
.longitude-latitude {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
.longitude-latitude .separator {
|
color: #909399;
|
}
|
|
.delivery-range {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.unit {
|
color: #909399;
|
font-size: 14px;
|
}
|
|
.profit-section {
|
margin-bottom: 30px;
|
padding: 20px;
|
background: #f5f7fa;
|
border-radius: 4px;
|
}
|
|
.profit-section .section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 20px;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #e4e7ed;
|
}
|
|
.profit-input {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
.inline-form /deep/ .el-form-item {
|
display: block;
|
margin-right: 0;
|
}
|
</style>
|
