chongqing-web/src/views/system/user/components/UserInfoEdit.vue

<template>
  <div class="formWrap">
    <el-form :model="form" :rules="rules" ref="userRef" label-width="8em">
      <el-card header="基本身份信息" style="margin-bottom: 10px;">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptId">
              <el-tree-select v-model="form.deptId" :data="enabledDeptOptions"
                :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门"
                check-strictly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="cardNumber">
              <el-input v-model="form.cardNumber" placeholder="请输入身份证号码" maxlength="18" minlength="15" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="籍贯" prop="nativePlace">
              <el-input v-model="form.nativePlace" placeholder="请输入籍贯" maxlength="128"  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户性别" prop="sex">
              <el-select v-model="form.sex" placeholder="请选择用户性别">
                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族" prop="nation">
              <el-input v-model="form.nation" placeholder="请输入民族" maxlength="128"  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生肖" prop="zodiac">
              <el-select v-model="form.zodiac" placeholder="请选择生肖">
                <el-option v-for="item in sys_user_zodiac" :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="constellation">
              <el-select v-model="form.constellation" placeholder="请选择星座">
                <el-option v-for="item in sys_user_constellation" :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="blooGroup">
              <el-select v-model="form.blooGroup" placeholder="请选择血型">
                <el-option v-for="item in sys_user_blood_group" :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="roleIds">
              <el-select v-model="form.roleIds" multiple placeholder="请选择角色" @change="roleChange">
                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId"
                  :disabled="item.status == 1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标签" prop="tags">
              <el-input v-model="form.tags" placeholder="请输入标签" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card header="状态管理信息" style="margin-bottom: 10px;">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="账号状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">
                  {{ dict.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训合规状态" prop="trainingComplianceStatus">
              <el-radio-group v-model="form.trainingComplianceStatus">
                <el-radio v-for="dict in sys_user_training_compliance_status" :key="dict.value" :value="dict.value">
                  {{ dict.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card header="资质能力" style="margin-bottom: 10px;">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="资质等级" prop="qualificationLevel"
              :rules="(form.roleIds || []).includes(101) || (form.roleIds || []).includes(102) ? [{ required: true, message: '请选择资质等级', trigger: 'blur' }] : []">
              <el-select v-model="form.qualificationLevel" placeholder="请选择资质等级" @change="handleQualificationLevelChange">
                <el-option v-for="item in sys_user_qualification_level" :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="postIds"
              :rules="(form.roleIds || []).includes(101) || (form.roleIds || []).includes(102) ? [{ required: true, message: '请选择岗位类型', trigger: 'blur' }] : []">
              <el-cascader v-model="form.postIds" :options="filteredTreeData" :props="treeNodeProps" filterable
                style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否通过政审" prop="politicalReviewSituation">
              <el-radio-group v-model="form.politicalReviewSituation">
                <el-radio :value="'1'">是</el-radio>
                <el-radio :value="'0'">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="政治面貌" prop="politicalStatus">
              <el-select v-model="form.politicalStatus" placeholder="请选择政治面貌">
                <el-option v-for="item in sys_user_political_status" :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="schooling">
              <el-select v-model="form.schooling" placeholder="请选择学历">
                <el-option v-for="item in sys_user_schooling" :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="professional">
              <el-input v-model="form.professional" placeholder="请输入专业" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="行政处罚情况" prop="administrativeStatus">
              <el-input v-model="form.administrativeStatus" type="textarea" placeholder="请输入行政处罚情况"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="健康异常情况" prop="physicalHealthStatus">
              <el-input v-model="form.physicalHealthStatus" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card header="工作履历/经验" style="margin-bottom: 10px;">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="开始工作时间" prop="startWorkingDate">
              <el-date-picker v-model="form.startWorkingDate" type="date" placeholder="请选择开始工作时间"
                value-format="YYYY-MM-DD" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始安检工作时间" prop="securityCheckStartDate" label-width="140px">
              <el-date-picker v-model="form.securityCheckStartDate" type="date" placeholder="请选择开始安检工作时间"
                value-format="YYYY-MM-DD" style="width: 100%;" />
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="入职时间" prop="entryDate" label-width="140px">
              <el-date-picker v-model="form.entryDate" type="date" placeholder="请选择入职时间"
                value-format="YYYY-MM-DD" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="曾在安检工作中担任的最高职务" prop="securityInspectionPosition" label-width="220px">
              <el-select v-model="form.securityInspectionPosition" placeholder="请选择曾在安检工作中担任的最高职务">
                <el-option label="安检员" value="安检员" />
                <el-option label="班组长" value="班组长" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接受奖励次数" prop="workRewardsNumber">
              <el-input v-model="form.workRewardsNumber" type="number" placeholder="请输入接受奖励次数" min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接受处罚次数" prop="workPenaltiesNumber">
              <el-input v-model="form.workPenaltiesNumber" type="number" placeholder="请输入接受处罚次数" min="0" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card header="评价类指标" style="margin-bottom: 10px;">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="性格特征" prop="characterCharacteristics">
              <el-select v-model="form.characterCharacteristics" placeholder="请选择性格特征">
                <el-option v-for="item in sys_user_character_characteristics" :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="workingStyle">
              <el-select v-model="form.workingStyle" placeholder="请选择工作风格">
                <el-option v-for="item in sys_user_working_style" :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="teamCooperation">
              <UserSelect v-model="form.teamCooperation" :multiple="true" :max="3" :placeholder="'请选择团队配合人员（最多3人）'"
                width="100%" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="自我关键词评价" prop="selfKeywords">
              <el-row :gutter="8" style="width: 100%;">
                <el-col :span="6">
                  <el-select v-model="form.selfAssessmentPersonalityTrait" placeholder="请选择性格特质">
                    <el-option v-for="item in sys_user_personality_trait" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="form.selfAssessmentCapabilityPerformance" placeholder="请选择能力表现">
                    <el-option v-for="item in sys_user_capability_performance" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="form.selfAssessmentInterpersonalInteraction" placeholder="请选择人际互动">
                    <el-option v-for="item in sys_user_interpersonal_interaction" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="form.selfAssessmentGrowthPotential" placeholder="请选择成长潜力">
                    <el-option v-for="item in sys_user_growth_potential" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="同事关键词评价" prop="colleagueKeywords">
              <el-row :gutter="8" style="width: 100%;">
                <el-col :span="6">
                  <el-select v-model="form.colleagueCommentsPersonalityTrait" placeholder="请选择性格特质">
                    <el-option v-for="item in sys_user_personality_trait" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="form.colleagueCommentsCapabilityPerformance" placeholder="请选择能力表现">
                    <el-option v-for="item in sys_user_capability_performance" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="form.colleagueCommentsInterpersonalInteraction" placeholder="请选择人际互动">
                    <el-option v-for="item in sys_user_interpersonal_interaction" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="form.colleagueCommentsGrowthPotential" placeholder="请选择成长潜力">
                    <el-option v-for="item in sys_user_growth_potential" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上级关键词评价" prop="superiorKeywords">
              <el-row :gutter="8" style="width: 100%;">
                <el-col :span="6">
                  <el-select v-model="form.superiorEvaluationPersonalityTrait" placeholder="请选择性格特质">
                    <el-option v-for="item in sys_user_personality_trait" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="form.superiorEvaluationCapabilityPerformance" placeholder="请选择能力表现">
                    <el-option v-for="item in sys_user_capability_performance" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="form.superiorEvaluationInterpersonalInteraction" placeholder="请选择人际互动">
                    <el-option v-for="item in sys_user_interpersonal_interaction" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="form.superiorEvaluationGrowthPotential" placeholder="请选择成长潜力">
                    <el-option v-for="item in sys_user_growth_potential" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="下级关键词评价" prop="subordinateKeywords">
              <el-row :gutter="8" style="width: 100%;">
                <el-col :span="6">
                  <el-select v-model="form.subordinateEvaluationPersonalityTrait" placeholder="请选择性格特质">
                    <el-option v-for="item in sys_user_personality_trait" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="form.subordinateEvaluationCapabilityPerformance" placeholder="请选择能力表现">
                    <el-option v-for="item in sys_user_capability_performance" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="form.subordinateEvaluationInterpersonalInteraction" placeholder="请选择人际互动">
                    <el-option v-for="item in sys_user_interpersonal_interaction" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="form.subordinateEvaluationGrowthPotential" placeholder="请选择成长潜力">
                    <el-option v-for="item in sys_user_growth_potential" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card header="应急联络信息" style="margin-bottom: 10px;">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="紧急联系人姓名" prop="emergencyContactName">
              <el-input v-model="form.emergencyContactName" type="text" placeholder="请输入紧急联系人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急联系人电话" prop="emergencyContactPhone">
              <el-input v-model="form.emergencyContactPhone" type="text" placeholder="请输入紧急联系人电话"
                maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急联系人关系" prop="emergencyContactRelationship">
              <el-select v-model="form.emergencyContactRelationship" placeholder="请选择联系人关系">
                <el-option v-for="item in sys_user_emergency_contact_relationship" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card header="其他信息" style="margin-bottom: 10px;">
        <el-row :gutter="16">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
  </div>
</template>

<script setup>
import { onMounted, reactive, computed, watch, nextTick, ref } from 'vue';
import { useDict } from '@/utils/dict'
import { listAllTree } from '@/api/system/post'
import UserSelect from '@/components/UserSelect/index.vue'
// 重父页面迁移过来的代码 2处公用选择框数据 选择使用父组件传入
defineProps({
  sys_user_sex: {
    type: Array,
    default: []
  },
  enabledDeptOptions: {
    type: Array,
    default: []
  },
  sys_normal_disable: {
    type: Array,
    default: []
  },
  postOptions: {
    type: Array,
    default: []
  },
  roleOptions: {
    type: Array,
    default: []
  },
})
const userRef = ref(null)
const form = defineModel('form', ref({}))

// 政治面貌、资质等级、紧急联系人关系、生肖、星座、血型、是否通过政审、学历、性格特征、工作风格、团队配合、关键词、能力表现、人际互动、成长潜力
const {
  sys_user_political_status,
  sys_user_qualification_level,
  sys_user_emergency_contact_relationship,
  sys_user_training_compliance_status,
  sys_user_zodiac,
  sys_user_constellation,
  sys_user_blood_group,
  sys_user_personality_trait,
  sys_user_schooling,
  sys_user_character_characteristics,
  sys_user_working_style,
  sys_user_capability_performance,
  sys_user_interpersonal_interaction,
  sys_user_growth_potential
} = useDict('sys_user_personality_trait', 'sys_user_political_status', 'sys_user_qualification_level', 'sys_user_emergency_contact_relationship', 'sys_user_training_compliance_status', 'sys_user_zodiac', 'sys_user_constellation', 'sys_user_blood_group', 'sys_user_schooling', 'sys_user_character_characteristics', 'sys_user_working_style', 'sys_user_capability_performance', 'sys_user_interpersonal_interaction', 'sys_user_growth_potential')

const rules = computed(() => ({
  userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
  deptId: [{ required: true, message: '请选择归属部门', trigger: "blur" }],
  nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
  password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
  email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
  phonenumber: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
  emergencyContactPhone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
  roleIds: [{ required: true, message: '请选择角色', trigger: "blur" }],
  status: [{ required: true, message: '请选择账号状态', trigger: "blur" }]
}))

const treeNodeProps = { multiple: true, expandTrigger: 'hover', label: 'postName', value: 'postId', emitPath: false, checkOnClickNode: true }
const treeData = ref([])

// 过滤后的岗位类型选项
const filteredTreeData = computed(() => {
  if (!treeData.value || treeData.value.length === 0) {
    return []
  }

  // 如果资质等级为五级，过滤掉value为9或10的选项
  // 其他级别显示完整的选项列表
  if (form.value.qualificationLevel === 'LEVEL_FIVE') {
    return filterTreeData(JSON.parse(JSON.stringify(treeData.value)))
  }

  // 其他级别返回完整的选项列表
  return treeData.value
})

// 递归过滤树形数据
const filterTreeData = (data) => {
  return data.filter(item => {

    // 过滤掉value为9或10的选项
    if (item.postId == 9 || item.postId == 10) {

      return false
    }

    // 如果有子节点，递归过滤
    if (item.children && item.children.length > 0) {
      item.children = filterTreeData(item.children)
    }

    return true
  })
}

// 资质等级变化处理函数
const handleQualificationLevelChange = (newVal) => {
  console.log('资质等级变化', newVal)
  form.value.postIds = []
  // 触发验证
  nextTick(() => {
    userRef.value && userRef.value.validateField('postIds')
  })
}

onMounted(() => {
  listAllTree().then(res => {
    treeData.value = res.data || []
  })
})

const roleChange = () => {
  userRef.value && userRef.value.clearValidate('qualificationLevel')
  userRef.value && userRef.value.clearValidate('postIds')
}

defineExpose({
  submit: () => {
    return userRef.value.validate()
  },
  resetForm: () => {
    return userRef.value && userRef.value.resetFields()
  }
})

</script>

<style lang="less" scoped>
.formWrap {
  max-height: 75vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 15px;
  box-sizing: border-box;

  :deep(.el-card) {
    .el-card__header {
      font-weight: 600;
      font-size: 16px;
      color: #000;
    }
  }
}
</style>