bonus-ui/src/views/face/faceData/customDialog.vue

<template>
  <div>
    <el-dialog :title="title" :visible.sync="isOpen" width="600px" append-to-body @close="cancel"
               :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" label-position="top" :rules="rules" label-width="80px">
        <div style="width: 100%; height: 350px; display: flex;">
          <div v-if="!faceId" style="width: 45%; height: 100%; padding: 5px">
            <div class="upload-box" @click="triggerFileInput">
              <!-- 加号和文字 -->
              <div v-if="!form.imageUrl" style="display: flex; flex-direction: column; align-items: center;">
                <i class="el-icon-plus" style="font-size: 32px; color: #909399;"></i>
              </div>
              <!-- 图片预览 -->
              <img v-if="form.imageUrl" :src="form.imageUrl" alt="图片预览"
                   style="width: 100%; height: 100%; object-fit: contain;"
              />
              <!-- 隐藏的文件输入框 -->
              <input
                ref="fileInput"
                type="file"
                accept="image/*"
                style="display: none;"
                @change="handleFileChange"
              />
            </div>
          </div>
          <div :style="{ width: faceId ? '100%' : '55%' }" style="height: 100%; padding: 5px">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" maxlength="30" minlength="1" placeholder="请输入名称"/>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="form.idCard" maxlength="18" minlength="15" placeholder="请输入身份证号"/>
            </el-form-item>
            <el-form-item label="其他信息" prop="otherInfo">
              <el-input v-model="form.otherInfo" type="textarea" maxlength="1000"
                        show-word-limit placeholder="请输入内容"
              />
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getData, addData, updateData } from '@/api/face/faceData'

export default {
  props: {
    open: {
      type: Boolean,
      default: false,
      required: true
    },
    groupCode: {
      type: [String, null],
      default: ''  // 如果没有传递值，默认为 0
    },
    getList: {
      type: Function,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    faceId: {
      type: [Number, null],
      default: 0  // 如果没有传递值，默认为 0
    }
  },
  computed: {
    isOpen: {
      get() {
        return this.open
      },
      set(value) {
        this.$emit('dialog-cancel') // 通知父组件
      }
    }
  },
  data() {
    return {
      // 表单参数
      form: {
        imageUrl: '' // 用于存储图片的预览路径
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '身份证号不能为空', trigger: 'blur' },
          { validator: this.validateIdCard, trigger: 'blur' } // 添加自定义校验
        ]
      },
      file: null  // 用于存储选中的文件
    }
  },
  watch: {
    isOpen(newVal, oldVal) {
      if (this.faceId && newVal) {
        getData(this.faceId).then(response => {
          this.form = response.data
        })
      }
    }
  },
  methods: {
    validateIdCard(rule, value, callback) {
      if (!value) {
        return callback(new Error('身份证号不能为空'))
      }
      const idCardPattern = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/
      if (!idCardPattern.test(value)) {
        return callback(new Error('身份证号格式不正确'))
      }
      // 验证最后一位校验码
      if (!this.checkIdCardCode(value)) {
        return callback(new Error('身份证校验码错误'))
      }
      callback() // 校验通过
    },
    checkIdCardCode(idCard) {
      const factors = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
      const parity = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
      const idCardArray = idCard.split('')
      const sum = idCardArray
        .slice(0, 17)
        .reduce((acc, cur, idx) => acc + cur * factors[idx], 0)
      const lastChar = idCardArray[17].toUpperCase() // 最后一位可能是小写 x
      return parity[sum % 11] === lastChar
    },
    triggerFileInput() {
      this.$refs.fileInput.click() // 触发文件选择框
    },
    handleFileChange(event) {
      const file = event.target.files[0]
      if (file) {
        // 校验文件类型
        if (!file.type.startsWith('image/')) {
          this.$modal.msgError('请选择图片文件')
          return
        }
        // 校验文件大小（例如 2MB）
        if (file.size > 5 * 1024 * 1024) {
          this.$modal.msgError('图片大小不能超过 5MB')
          return
        }
        this.file = file // 保存文件到 data 中
        this.form.imageUrl = URL.createObjectURL(file) // 使用临时路径显示图片预览
      }
    },
    /** 提交按钮 */
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          const formData = new FormData()
          // 添加表单数据
          formData.append('name', this.form.name)
          formData.append('idCard', this.form.idCard)
          formData.append('otherInfo', this.form.otherInfo || '')
          formData.append('groupCode', this.groupCode)

          // 根据是否是更新操作来调用不同的 API
          if (this.form.faceId != null) {
            formData.append('faceId', this.form.faceId)
            updateData(formData).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.isOpen = false
              this.getList()
            })
          } else {
            // 添加图片文件
            if (this.file) {
              formData.append('file', this.file)
            } else {
              this.$modal.msgWarning('请选择图片')
              return
            }
            addData(formData).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.isOpen = false
              this.getList()
            })
          }
        }
      })
    },
    // 取消按钮
    cancel() {
      this.isOpen = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        imageUrl: '',
        name: null,
        idCard: null,
        description: null
      }
      this.$refs['form'].resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.upload-box {
  width: 100%;
  height: 100%;
  border: 1px dashed #dfe4ed;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    border-color: #409eff;
    background-color: #f5f7fa;
  }
}
</style>