|
@@ -1,38 +1,40 @@
|
|
|
<template>
|
|
|
<div class="doctor-edit">
|
|
|
- <el-form class="doctor-edit-form" label-width="130px" :model="formData" :rules="rules">
|
|
|
- <el-form-item label="医师姓名:" prop="name">
|
|
|
- <el-input v-model="formData.name" placeholder="请输入医师姓名" />
|
|
|
+ <el-form ref="submitForm" class="doctor-edit-form" label-width="140px" :model="formData" :rules="rules">
|
|
|
+ <el-form-item label="医师姓名:" prop="doctorName">
|
|
|
+ <el-input v-model="formData.doctorName" placeholder="请输入医师姓名" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="从业资格证编号:" prop="name">
|
|
|
- <el-input v-model="formData.name" placeholder="请输入从业资格证编号" />
|
|
|
+ <el-form-item label="从业资格证编号:" prop="certificateNo">
|
|
|
+ <el-input v-model="formData.certificateNo" placeholder="请输入从业资格证编号" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="所在机构:" prop="name">
|
|
|
- <el-input v-model="formData.name" placeholder="请输入机构名称" />
|
|
|
+ <el-form-item label="所在机构:" prop="clubName">
|
|
|
+ <el-input v-model="formData.clubName" placeholder="请输入机构名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="医师照片:" prop="doctorImage">
|
|
|
+ <el-input v-show="false" v-model="formData.doctorImage" />
|
|
|
+ <upload-image
|
|
|
+ tip="建议尺寸:200px * 200px"
|
|
|
+ :image-list="doctorImageList"
|
|
|
+ :before-upload="beforeDoctorImageUpload"
|
|
|
+ @success="uploadDoctorImageSuccess"
|
|
|
+ @remove="handleDoctorImageRemove"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="轮播图:" prop="banner">
|
|
|
<el-input v-show="false" v-model="formData.banner" />
|
|
|
- <el-upload
|
|
|
- ref="coverUploader"
|
|
|
- :class="{ 'el-upload-hidden': bannerList.length >= 2}"
|
|
|
- list-type="picture-card"
|
|
|
- :action="action"
|
|
|
- :headers="headers"
|
|
|
- :on-success="uploadBannerSuccess"
|
|
|
- :on-remove="handleBannerRemove"
|
|
|
+ <upload-image
|
|
|
+ tip="至少上传一张机构门店图,最多上传6张;建议尺寸:542px * 542px"
|
|
|
+ :image-list="bannerList"
|
|
|
+ :limit="6"
|
|
|
:before-upload="beforeBannerUpload"
|
|
|
- :limit="2"
|
|
|
- multiple
|
|
|
- accept=".jpg,.png,.gif"
|
|
|
- :file-list="bannerList"
|
|
|
- >
|
|
|
- <div slot="tip" class="el-upload__tip">至少上传一张机构门店图,最多上传6张;建议尺寸:542px * 542px</div>
|
|
|
- <i slot="default" class="el-icon-plus" />
|
|
|
- </el-upload>
|
|
|
+ @success="uploadBannerSuccess"
|
|
|
+ @remove="handleBannerRemove"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="具备操作资格设备:">
|
|
|
- <device-section @change="deviceListDataChange" />
|
|
|
+ <el-form-item label="具备操作资格设备:" prop="equipment">
|
|
|
+ <el-input v-show="false" v-model="formData.equipment" />
|
|
|
+ <device-section v-if="!isRequest" ref="subForm" :list="deviceList" @change="deviceListDataChange" />
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
@@ -44,74 +46,46 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { Promise } from 'jszip/lib/external'
|
|
|
import { mapGetters } from 'vuex'
|
|
|
import DeviceSection from '../components/deviceSection.vue'
|
|
|
+import UploadImage from '@/components/UploadImage'
|
|
|
+import { doctorSave, doctorFormData } from '@/api/doctor'
|
|
|
+
|
|
|
export default {
|
|
|
- components: { DeviceSection },
|
|
|
+ components: { DeviceSection, UploadImage },
|
|
|
data() {
|
|
|
return {
|
|
|
- dialogMapVisible: false,
|
|
|
+ isRequest: true,
|
|
|
+ doctorId: '',
|
|
|
point: {},
|
|
|
- value: [],
|
|
|
- options: [{
|
|
|
- value: 'zhinan',
|
|
|
- label: '指南',
|
|
|
- children: [{
|
|
|
- value: 'shejiyuanze',
|
|
|
- label: '设计原则',
|
|
|
- children: [{
|
|
|
- value: 'yizhi',
|
|
|
- label: '一致'
|
|
|
- }, {
|
|
|
- value: 'fankui',
|
|
|
- label: '反馈'
|
|
|
- }, {
|
|
|
- value: 'xiaolv',
|
|
|
- label: '效率'
|
|
|
- }, {
|
|
|
- value: 'kekong',
|
|
|
- label: '可控'
|
|
|
- }]
|
|
|
- }, {
|
|
|
- value: 'daohang',
|
|
|
- label: '导航',
|
|
|
- children: [{
|
|
|
- value: 'cexiangdaohang',
|
|
|
- label: '侧向导航'
|
|
|
- }, {
|
|
|
- value: 'dingbudaohang',
|
|
|
- label: '顶部导航'
|
|
|
- }]
|
|
|
- }]
|
|
|
- }],
|
|
|
disabled: false,
|
|
|
formData: {
|
|
|
- name: '',
|
|
|
- address: '',
|
|
|
- fullAddress: '',
|
|
|
- point: '',
|
|
|
- mobile: '',
|
|
|
- logoImage: '',
|
|
|
- banner: ''
|
|
|
+ doctorName: '',
|
|
|
+ certificateNo: '',
|
|
|
+ clubName: '',
|
|
|
+ banner: '',
|
|
|
+ doctorImage: '',
|
|
|
+ equipment: ''
|
|
|
},
|
|
|
rules: {
|
|
|
- name: [{ required: true, message: '机构名称不能为空', trigger: ['blur', 'change'] }],
|
|
|
- address: [{ required: true, message: '地址不能为空', trigger: 'change' }],
|
|
|
- fullAddress: [{ required: true, message: '详细不能为空', trigger: ['blur', 'change'] }],
|
|
|
- point: [{ required: true, message: '地址坐标不能为空', trigger: ['blur', 'change'] }],
|
|
|
- mobile: [{ required: true, message: '联系方式不能为空', trigger: ['blur', 'change'] }],
|
|
|
- logoImage: [{ required: true, message: '请上传机构logo', trigger: 'change' }],
|
|
|
- banner: [{ required: true, message: '请至少上传一张banner图片', trigger: 'change' }]
|
|
|
-
|
|
|
+ doctorName: [{ required: true, message: '医师姓名不能为空', trigger: ['blur', 'change'] }],
|
|
|
+ certificateNo: [{ required: true, message: '从业资格证编号不能为空', trigger: ['blur', 'change'] }],
|
|
|
+ clubName: [{ required: true, message: '所在机构不能为空', trigger: ['blur', 'change'] }],
|
|
|
+ doctorImage: [{ required: true, message: '请上传医师照片', trigger: 'change' }],
|
|
|
+ banner: [{ required: true, message: '请上传至少一张轮播图', trigger: 'change' }],
|
|
|
+ equipment: [{ required: true, message: '具备操作资格设备不能为空', trigger: 'change' }]
|
|
|
},
|
|
|
// logo图片列表
|
|
|
- logoList: [],
|
|
|
+ doctorImageList: [],
|
|
|
// banner图片列表
|
|
|
- bannerList: []
|
|
|
+ bannerList: [],
|
|
|
+ // 资格仪器列表
|
|
|
+ deviceList: []
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(['token']),
|
|
|
+ ...mapGetters(['token', 'authUserId', 'proxyInfo']),
|
|
|
// 图片上传
|
|
|
action() {
|
|
|
return process.env.VUE_APP_UPLOAD_API + '/upload/image'
|
|
@@ -123,45 +97,95 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
-
|
|
|
+ this.doctorId = parseInt(this.$route.query.id)
|
|
|
+ this.initFormData()
|
|
|
},
|
|
|
methods: {
|
|
|
// 具备操作资格设备列表数据变化
|
|
|
deviceListDataChange(list) {
|
|
|
- console.log(list)
|
|
|
+ this.deviceList = list
|
|
|
+ this.formData.equipment = list.length || ''
|
|
|
},
|
|
|
- handlePointChange(point) {
|
|
|
- console.log(point)
|
|
|
- this.formData.point = `${point.lat},${point.lng}`
|
|
|
+
|
|
|
+ // 表单数据回显
|
|
|
+ initFormData() {
|
|
|
+ doctorFormData({ doctorId: this.doctorId }).then(res => {
|
|
|
+ this.setFormData(res.data)
|
|
|
+ })
|
|
|
},
|
|
|
- submit() {},
|
|
|
- handleChange(e) {
|
|
|
- console.log(e)
|
|
|
+
|
|
|
+ // 设置表单数据
|
|
|
+ setFormData(data) {
|
|
|
+ this.formData.doctorName = data.doctorName
|
|
|
+ this.formData.certificateNo = data.certificateNo
|
|
|
+ this.formData.clubName = data.clubName
|
|
|
+ this.formData.doctorImage = data.doctorImage
|
|
|
+
|
|
|
+ this.formData.banner = data.bannerList.length
|
|
|
+ this.formData.equipmentList = data.equipmentList.length
|
|
|
+ this.doctorImageList.push({ url: data.doctorImage, name: 'doctor' })
|
|
|
+ this.bannerList = data.bannerList.map(item => ({ url: item, name: '' }))
|
|
|
+ this.deviceList = data.equipmentList
|
|
|
+
|
|
|
+ this.isRequest = false
|
|
|
},
|
|
|
- // logo上传
|
|
|
- uploadLogoSuccess(response, file, fileList) {
|
|
|
- this.logoList = fileList
|
|
|
- this.formData.logoImage = fileList[0].response.data
|
|
|
+
|
|
|
+ // 提交表单验证
|
|
|
+ submit() {
|
|
|
+ Promise.all([this.$refs.subForm.valideAllForm(), this.$refs.submitForm.validate()]).then(res => {
|
|
|
+ this.save()
|
|
|
+ })
|
|
|
},
|
|
|
- handleLogoRemove(file, fileList) {
|
|
|
- this.logoList = fileList
|
|
|
- this.formData.logoImage = ''
|
|
|
+
|
|
|
+ // 保存
|
|
|
+ save() {
|
|
|
+ const authUserId = this.proxyInfo?.authUserId || this.authUserId
|
|
|
+ const data = {
|
|
|
+ authUserId,
|
|
|
+ createBy: authUserId,
|
|
|
+ doctorId: this.doctorId,
|
|
|
+ doctorName: this.formData.doctorName,
|
|
|
+ certificateNo: this.formData.certificateNo,
|
|
|
+ clubName: this.formData.clubName,
|
|
|
+ doctorImage: this.formData.doctorImage
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(this.formData)
|
|
|
+
|
|
|
+ data.bannerList = this.bannerList.map(item => item.response ? item.response.data : item.url)
|
|
|
+ data.equipmentList = this.deviceList.map(item => ({ equipmentName: item.equipmentName, brand: item.brand, image: item.image }))
|
|
|
+ doctorSave(data).then(res => {
|
|
|
+ this.$message.success('保存成功')
|
|
|
+ this.$store.dispatch('tagsView/delView', this.$route)
|
|
|
+ this.$router.push('/doctor/list')
|
|
|
+ })
|
|
|
},
|
|
|
- beforeLogoUpload(file) {
|
|
|
- const flag = file.size / 1024 < 500
|
|
|
+
|
|
|
+ // 医师照片上传
|
|
|
+ uploadDoctorImageSuccess({ response, file, fileList }) {
|
|
|
+ this.doctorImageList = fileList
|
|
|
+ this.formData.doctorImage = response.data
|
|
|
+ },
|
|
|
+ handleDoctorImageRemove({ file, fileList }) {
|
|
|
+ this.doctorImageList = fileList
|
|
|
+ this.formData.doctorImage = ''
|
|
|
+ },
|
|
|
+ beforeDoctorImageUpload(file) {
|
|
|
+ const flag = file.size / 1024 / 1024 < 1
|
|
|
if (!flag) {
|
|
|
- this.$message.error('上传logo图片大小不能超过 500kb!')
|
|
|
+ this.$message.error('上传医师照片大小不能超过 1MB!')
|
|
|
}
|
|
|
return flag
|
|
|
},
|
|
|
|
|
|
// banner上传
|
|
|
- uploadBannerSuccess(response, file, fileList) {
|
|
|
+ uploadBannerSuccess({ response, file, fileList }) {
|
|
|
this.bannerList = fileList
|
|
|
- console.log(this.bannerList)
|
|
|
+ this.formData.banner = fileList.length || ''
|
|
|
},
|
|
|
- handleBannerRemove(file, fileList) {
|
|
|
+ handleBannerRemove({ file, fileList }) {
|
|
|
this.bannerList = fileList
|
|
|
+ this.formData.banner = fileList.length || ''
|
|
|
},
|
|
|
beforeBannerUpload(file) {
|
|
|
const flag = file.size / 1024 / 1024 < 1
|
|
@@ -180,7 +204,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.doctor-edit-form {
|
|
|
- width: 600px;
|
|
|
+ width: 650px;
|
|
|
margin: 0 auto;
|
|
|
margin-top: 80px;
|
|
|
}
|