<template> <el-dialog :title="title" :visible.sync="modal" width="80%" :close-on-click-modal="false" @close=" res => { $emit('cancel'); } " > <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item label="机构名称" prop="name" ><el-input v-model="form.name" placeholder="请输入机构名称" /> </el-form-item> <el-form-item label="机构类型" prop="type"> <el-radio-group v-model="form.type"> <el-radio v-for="(item, index) in TypeOptions" :key="index" :label="item.value" > {{ item.label }} </el-radio> </el-radio-group> </el-form-item> <el-form-item label="所在地区"> <!-- TODO 联动select --> <AddressSelect v-model="form.addressArr" /> </el-form-item> <el-form-item label="详细地址" prop="type"> <el-input v-model="form.address" placeholder="请输入详细地址" /> </el-form-item> <el-form-item label="机构logo"> <upload v-model="form.logo" params="prefix=/kindergarten" /> </el-form-item> <el-form-item label="机构预览logo"> <upload v-model="form.previewLogo" params="prefix=/kindergarten" /> </el-form-item> <el-form-item label="门店图片"> <upload v-model="form.frontDoor" params="prefix=/kindergarten" /> </el-form-item> <el-form-item label="营业执照"> <upload v-model="form.businessLicense" params="prefix=/kindergarten" /> </el-form-item> <el-form-item label="证照号码" prop="idCardNumber"> <el-input v-model="form.idCardNumber" placeholder="请输入证照号码" /> </el-form-item> <el-form-item label="办公电话" prop="phonenumber"> <el-input v-model="form.phonenumber" placeholder="请输入办公电话" /> </el-form-item> <el-form-item label="场景介绍" prop="brief"> <el-input v-model="form.brief" type="textarea" :rows="2" placeholder="请输入场景介绍" /> </el-form-item> <el-form-item label="申请人姓名" prop="realName"> <el-input v-model="form.realName" placeholder="请输入申请人姓名" /> </el-form-item> <el-form-item label="手机号" prop="personPhonenumber"> <el-input v-model="form.personPhonenumber" placeholder="请输入手机号" /> </el-form-item> <el-form-item label="半身照"> <upload v-model="form.bodyPhoto" :uploadUrl="$upload('/yxl-back-end/framework/oss/minio/upload')" /> </el-form-item> <el-form-item label="证件正面"> <upload v-model="form.idCardFront" :uploadUrl="$upload('/yxl-back-end/framework/oss/minio/upload')" /> </el-form-item> <el-form-item label="证件背面"> <upload v-model="form.idCardBack" :uploadUrl="$upload('/yxl-back-end/framework/oss/minio/upload')" /> </el-form-item> <el-form-item label="状态" prop="isShow"> <el-radio-group v-model="form.isShow"> <el-radio :label="true">显示</el-radio> <el-radio :label="false">隐藏</el-radio> </el-radio-group> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="modal = false">取消</el-button> <el-button type="primary" @click="handleConfirm">确定</el-button> </span> </el-dialog> </template> <script> import SCENETYPE from '@/const/sceneType'; import { getItem, saveItem } from '@/api/scene'; export default { name: 'SceneItemModal', props: { id: { type: String, default: '' } }, data() { return { title: '场景详情', modal: true, TypeOptions: SCENETYPE, form: { name: '', address: '', idCardNumber: '', phonenumber: '', brief: '', realName: '', personPhonenumber: '', type: '', // TODO 未对接接口字段 province: '广东', city: '中山', area: '大涌', logo: [], previewLogo: [], frontDoor: [], businessLicense: [], bodyPhoto: [], idCardFront: [], idCardBack: [], addressArr: [], isShow: false }, rules: { name: [ { required: true, message: '请输入机构名称', trigger: 'change' } ], address: [ { required: true, message: '请输入详细地址', trigger: 'change' } ], idCardNumber: [ { required: true, message: '请输入证照号码', trigger: 'change' } ], phonenumber: [ { required: true, message: '请输入办公电话', trigger: 'change' } ], brief: [ { required: true, message: '请输入场景介绍', trigger: 'change' } ], realName: [ { required: true, message: '请输入申请人姓名', trigger: 'change' } ], personPhonenumber: [ { required: true, message: '请输入手机号', trigger: 'change' } ], type: [ { required: true, message: '请输入机构类型', trigger: 'change' } ], logo: [ { type: 'array', required: true, message: '请上传图片', trigger: 'change' } ], previewLogo: [ { type: 'array', required: true, message: '请上传图片', trigger: 'change' } ], frontDoor: [ { type: 'array', required: true, message: '请上传图片', trigger: 'change' } ], businessLicense: [ { type: 'array', required: true, message: '请上传图片', trigger: 'change' } ], bodyPhoto: [ { type: 'array', required: true, message: '请上传图片', trigger: 'change' } ], idCardFront: [ { type: 'array', required: true, message: '请上传图片', trigger: 'change' } ], idCardBack: [ { type: 'array', required: true, message: '请上传图片', trigger: 'change' } ], addressArr: [ { type: 'array', required: true, message: '请选择地址', trigger: 'change' } ] } }; }, watch: { id: { handler(id) { id && this.loadData(); }, immediate: true } }, mounted() {}, methods: { async loadData() { const { success, data, msg } = await getItem({ id: this.id }); if (success) { let result = data; result.logo = [ { url: data.logo } ]; result.previewLogo = [ { url: data.previewLogo } ]; result.frontDoor = [ { url: data.frontDoor } ]; result.businessLicense = [ { url: data.businessLicense } ]; result.bodyPhoto = [ { url: data.bodyPhoto } ]; result.idCardFront = [ { url: data.idCardFront } ]; result.idCardBack = [ { url: data.idCardBack } ]; result.addressArr = [data.province, data.city, data.area]; this.form = result; } }, handleConfirm() { this.$refs.form.validate(async valid => { if (valid) { let params = Object.assign({}, this.form); params.logo = this.form.logo[0].url; params.previewLogo = this.form.previewLogo[0].url; params.frontDoor = this.form.frontDoor[0].url; params.businessLicense = this.form.businessLicense[0].url; params.bodyPhoto = this.form.bodyPhoto[0].url; params.idCardFront = this.form.idCardFront[0].url; params.idCardBack = this.form.idCardBack[0].url; params.province = this.form.addressArr[0]; params.city = this.form.addressArr[1]; params.area = this.form.addressArr[2]; if (this.id) params.id = this.id; const { success, msg } = await saveItem(params); if (success) { this.$success('保存成功!'); this.modal = false; this.$g_emit('scene_reload'); } } }); } } }; </script> <style lang="scss" scoped> .pre-img { height: 80px; } </style>