SafetyAlertSystem-ui/src/views/base/person/components/form-person.vue

<template>
    <!-- 工程管理 新增、编辑 表单组件 -->
    <div>
        <el-form
            label-width="100px"
            size="medium"
            ref="projectParamsRef"
            :model="projectParams"
            :rules="projectParamsRules"
        >
          <el-row type="flex" justify="space-between" :gutter="24">
            <el-col :span="12">
              <el-form-item label="姓名" prop="relName">
                <el-input :maxlength="50" v-model="projectParams.relName" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="projectParams.idCard" :maxlength="18" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between" :gutter="24">
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-select
                  v-model="projectParams.sex"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in sexRange"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="relPhone">
                <el-input v-model="projectParams.relPhone" :maxlength="11" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between" :gutter="24">
            <el-col :span="12">
              <el-form-item label="岗位工种" prop="postCode">
                <el-select
                  v-model="projectParams.postCode"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in jobRange"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
              <el-button type="success" @click="onSubmit">确认</el-button>
              <el-button
                  @click="
                      () => {
                          this.$emit('closeDialog')
                      }
                  "
                  >取消</el-button
              >
          </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {
  addPersonApi,
  editPersonApi,
  queryInfoApi
} from '@/api/base/person'
import { call } from 'runjs/lib/script'
export default {
    name: 'FormPerson',
    props: {
        editParams: {
            type: Object,
            default: () => null,
        },
    },
    components: {  },
    created() {

    },
    mounted() {
        console.log(this.editParams, 'edit')
        if (this.editParams) {
            Object.assign(this.projectParams, this.editParams)
            // 查询未脱敏数据
            /* queryInfoApi(this.editParams.id).then(res => {
              this.projectParams.idCard = res.data.idCard
              this.projectParams.relPhone = res.data.relPhone
            }).catch(err => {}) */
            this.subSort = 2
        } else {
            this.subSort = 1
        }
    },
    data() {
        return {
            subSort: '', // 提交类型：新增 1 / 修改 2
            projectParams: {
              relName: undefined, //姓名
              idCard: undefined, //身份证号
              sex: undefined, // 性别
              relPhone: undefined, // 手机号
              postCode: undefined, //岗位工种
            },
            // 校验规则
            projectParamsRules: {
              relName: [
                  {
                      required: true,
                      message: '请输入姓名',
                      trigger: 'blur',
                  },
              ],
              idCard: [
                 { required: true, message: "身份证号不能为空", trigger: "blur" },
                {
                  message: '身份证号格式不正确',
                  validator: this.validateIdCard,
                  trigger: 'blur',
                },
              ],
              sex: [
                {
                  required: true,
                  message: '请选择性别',
                  trigger: 'blur',
                },
              ],
              relPhone: [
                 { required: true, message: "手机号不能为空", trigger: "blur" },
                {
                  message: '手机号格式不正确',
                  validator: this.validatePhone,
                  trigger: 'blur',
                },
              ],
              postCode: [
                {
                  required: true,
                  message: '请选择岗位工种',
                  trigger: 'blur',
                },
              ],
            },
            // 各类下拉
            sexRange: [
              { label: '男', value: 1 },
              { label: '女', value: 0 },
            ],
            jobRange: [
              { label: '班组负责人', value: '0900101' },
              { label: '班组安全员', value: '0900102' },
              { label: '班组技术员', value: '0900103' },
              { label: '一般作业人员', value: '0900104' },
              { label: '特种作业人员', value: '0900106' },
            ],
            // 正则
            phoneReg: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            idCardReg: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/
        }
    },
    methods: {
        /** 获取各类下拉框 */
        async getRanges() {
          // 获取省份下拉选
          let provinceRes = await queryProvincesApi()
          this.provinceRange = provinceRes.data.map(item => {
            return {
              label: item.areaName,
              value: item.areaId
            }
          })
        },
        /** 校验手机号 */
        validatePhone(rule, value, callback) {
          if(!this.phoneReg.test(value)) {
            callback(new Error('手机号格式不正确'))
          } else {
            callback()
          }
        },
        /** 校验身份证 */
        validateIdCard(rule, value, callback) {
          if(!this.idCardReg.test(value)) {
            callback(new Error('身份证号格式不正确'))
          } else {
            callback()
          }
        },
        /** 改变树结构 */
        changeTree(leaf) {
          leaf.map(item => {
            item.value = item.id
            if(item.children) {
              this.changeTree(item.children)
            }
          })
          return leaf
        },
        /** 级联选择器改变 */
        handleCas(e) {
          this.projectParams.impUnit = e[e.length - 1]
        },
        /** 确认按钮 */
        onSubmit() {
            this.$refs.projectParamsRef.validate(valid => {
                if (valid) {
                    /* if(this.projectParams.relPhone !== undefined && this.projectParams.relPhone !== "" && this.projectParams.relPhone !== null) {
                      if(!this.phoneReg.test(this.projectParams.headUserPhone)) {
                        this.$modal.msgError('请填写正确的联系方式')
                        return false
                      }
                    } */
                    console.log('校验通过', this.projectParams, this.subSort)
                    // 1. 表单校验通过后调后台 Api
                    if(this.subSort === 1) {
                      addPersonApi(this.projectParams).then(res => {
                        this.$modal.msgSuccess('操作成功')
                        // 2. 成功之后通知父组件关闭弹框
                        this.$emit('closeDialog', true)
                      }).catch(err => {
                        console.log(err)
                      })
                    } else if(this.subSort === 2) {
                      editPersonApi(this.projectParams).then(res => {
                        this.$modal.msgSuccess('操作成功')
                        // 2. 成功之后通知父组件关闭弹框
                        this.$emit('closeDialog', true)
                      }).catch(err => {
                        console.log(err)
                      })
                    }
                }
            })
        },
    },
}
</script>

<style scoped>
::v-deep .el-select {
    width: 100%;
}
::v-deep .el-form-item__label{
  font-weight: normal;
}
</style>