<template>
|
<GlobalWindow
|
title="编辑门店"
|
:visible.sync="visible"
|
width="60%"
|
:confirm-working="isWorking.save"
|
@confirm="handleConfirm"
|
>
|
<el-form ref="form" :model="form" label-width="120px" :rules="rules" class="inline-form">
|
<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>
|
</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-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'
|
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: '',
|
legalPersonName: '',
|
legalPersonPhone: '',
|
legalPersonCard: '',
|
idcardImg: '',
|
idcardImgBack: '',
|
businessLicenseImg: '',
|
laborContractImgs: '',
|
socialSecurityImgs: '',
|
storeFrontImgs: '',
|
storeInteriorImgs: '',
|
otherMaterialImgs: ''
|
},
|
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()
|
},
|
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 || '',
|
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 })) : []
|
}
|
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)
|
})
|
},
|
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')
|
},
|
handleConfirm () {
|
this.$refs.form.validate(valid => {
|
if (!valid) return
|
this.isWorking.save = true
|
const imageFields = ['businessImg', 'idcardImg', 'idcardImgBack', 'laborContractImgs', 'socialSecurityImgs', 'storeFrontImgs', 'storeInteriorImgs', 'otherMaterialImgs']
|
const data = { ...this.form }
|
imageFields.forEach(field => {
|
if (data[field]) {
|
const list = Array.isArray(data[field]) ? data[field] : [data[field]]
|
data[field] = list.map(item => typeof item === 'object' ? item.fileurl : item).join(',')
|
}
|
})
|
data.provinceId = this.form.areaCode[0] || ''
|
data.cityId = this.form.areaCode[1] || ''
|
data.areaId = this.form.areaCode[2] || ''
|
delete data.areaCode
|
updateById(data)
|
.then(res => {
|
this.$tip.apiSuccess(res || '保存成功')
|
this.visible = false
|
this.$emit('success')
|
})
|
.catch(e => {
|
this.$tip.apiFailed(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 120px;
|
}
|
.longitude-latitude {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
.longitude-latitude .separator {
|
color: #606266;
|
}
|
.inline-form /deep/ .el-form-item {
|
display: block;
|
margin-right: 0;
|
}
|
</style>
|
