caimei-authentic-manager/src/views/authentic/doctor/edit.vue

<template>
  <div class="doctor-edit">
    <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" type="text" placeholder="请输入医师姓名" :maxlength="30" />
      </el-form-item>
      <el-form-item label="从业资格证编号:" prop="certificateNo">
        <el-input v-model="formData.certificateNo" placeholder="请输入从业资格证编号" />
      </el-form-item>
      <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" />
        <upload-image
          tip="至少上传一张机构门店图，最多上传6张；建议尺寸：542px * 542px"
          :image-list="bannerList"
          :limit="6"
          :before-upload="beforeBannerUpload"
          @success="uploadBannerSuccess"
          @remove="handleBannerRemove"
        />
      </el-form-item>

      <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>
    <div class="submit-btn">
      <el-button type="primary" @click="submit">保存</el-button>
      <el-button type="warning" @click="$_back()">返回</el-button>
    </div>
  </div>
</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, UploadImage },
  data() {
    var validateCertificateNo = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('从业资格证编号不能为空'))
      } else {
        if (/^[a-z|A-Z|0-9]{1,}$/.test(value)) {
          this.$refs.ruleForm.validateField('point')
        } else {
          callback('从业资格证编号格式不正确')
        }
        callback()
      }
    }

    return {
      isRequest: true,
      doctorId: '',
      point: {},
      disabled: false,
      formData: {
        doctorName: '',
        certificateNo: '',
        clubName: '',
        banner: '',
        doctorImage: '',
        equipment: ''
      },
      rules: {
        doctorName: [
          { required: true, message: '医师姓名不能为空', trigger: ['blur', 'change'] },
          { maxlength: 30, message: '最大长度为30个字符', trigger: ['blur', 'change'] }
        ],
        certificateNo: [{ required: true, validator: validateCertificateNo, 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图片列表
      doctorImageList: [],
      // banner图片列表
      bannerList: [],
      // 资格仪器列表
      deviceList: []
    }
  },
  computed: {
    ...mapGetters(['token', 'authUserId', 'proxyInfo']),
    // 图片上传
    action() {
      return process.env.VUE_APP_UPLOAD_API + '/upload/image'
    },
    headers() {
      return {
        'X-Token': this.token
      }
    }
  },
  created() {
    this.doctorId = parseInt(this.$route.query.id)
    this.initFormData()
  },
  methods: {
    // 具备操作资格设备列表数据变化
    deviceListDataChange(list) {
      this.deviceList = list
      this.formData.equipment = list.length || ''
    },

    // 表单数据回显
    initFormData() {
      doctorFormData({ doctorId: this.doctorId }).then(res => {
        this.setFormData(res.data)
      })
    },

    // 设置表单数据
    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
    },

    // 提交表单验证
    submit() {
      Promise.all([this.$refs.subForm.valideAllForm(), this.$refs.submitForm.validate()]).then(res => {
        this.save()
      })
    },

    // 保存
    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')
      })
    },

    // 医师照片上传
    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('上传医师照片大小不能超过 1MB!')
      }
      return flag
    },

    // banner上传
    uploadBannerSuccess({ response, file, fileList }) {
      this.bannerList = fileList
      this.formData.banner = fileList.length || ''
    },
    handleBannerRemove({ file, fileList }) {
      this.bannerList = fileList
      this.formData.banner = fileList.length || ''
    },
    beforeBannerUpload(file) {
      const flag = file.size / 1024 / 1024 < 1
      if (!flag) {
        this.$message.error('上传banner图片大小不能超过 1MB!')
      }
      return flag
    }
  }
}
</script>

<style lang="scss" scoped>
.doctor-edit{
  margin-bottom: 80px;
}

.doctor-edit-form {
  width: 650px;
  margin: 0 auto;
  margin-top: 80px;
}
.submit-btn {
  text-align: center;
  .el-button {
    width: 140px;
  }
}

</style>