vue-insagent-pc/src/components/UserDetail/index.vue

<template>
  <div class="userdetail">
    <el-form :inline="true" label-width="110px" size="small">
      <el-row>
        <el-col :span="8">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name" :disabled="isDisabled"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="formDataDetail.sex" :disabled="isDisabled">
              <el-radio v-for="val in sexoptions" :key="val.id" :label="val.value">{{ val.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出生日期">
            <el-date-picker
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.birthday"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              popper-class="select-prop"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="民族" prop="nations">
            <el-select
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.nations"
              placeholder="请选择民族"
              popper-class="select-prop"
            >
              <el-option
                :label="national"
                :value="national"
                v-for="national in nationalList"
                :key="national"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="政治面貌" prop="politicsStatus">
            <el-radio-group v-model="formDataDetail.politicsStatus" :disabled="isDisabled" class="radio-four">
              <el-radio label="群众">群众</el-radio>
              <el-radio label="共青团员">共青团员</el-radio>
              <el-radio label="中共党员">中共党员</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="婚姻状况" prop="maritalStatus">
            <el-radio-group v-model="formDataDetail.maritalStatus" :disabled="isDisabled" class="radio-four">
              <el-radio label="未婚">未婚</el-radio>
              <el-radio label="已婚">已婚</el-radio>
              <el-radio label="离异">离异</el-radio>
              <el-radio label="再婚">再婚</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="户籍" prop="koseki">
            <el-input
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.koseki"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="血型" prop="bloodType">
            <el-radio-group v-model="formDataDetail.bloodType" :disabled="isDisabled" class="radio-four">
              <el-radio label="A型">A型</el-radio>
              <el-radio label="B型">B型</el-radio>
              <el-radio label="O型">O型</el-radio>
              <el-radio label="AB型">AB型</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="健康状况" prop="health">
            <el-radio-group v-model="formDataDetail.health" :disabled="isDisabled" class="radio-four">
              <el-radio label="健康">健康</el-radio>
              <el-radio label="亚健康">亚健康</el-radio>
              <el-radio label="疾病">疾病</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学历" prop="education">
            <el-select
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.education"
              placeholder="请选择"
              popper-class="select-prop"
            >
              <el-option label="小学" value="小学"></el-option>
              <el-option label="初中" value="初中"></el-option>
              <el-option label="高中" value="高中"></el-option>
              <el-option label="专科" value="专科"></el-option>
              <el-option label="本科" value="本科"></el-option>
              <el-option label="硕士" value="硕士"></el-option>
              <el-option label="博士" value="博士"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="毕业院校" prop="school">
            <el-input
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.school"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="毕业时间" prop="graduationTime">
            <el-date-picker
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.graduationTime"
              type="date"
              placeholder="选择日期"
              popper-class="select-prop"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="居住地址" prop="address">
            <el-input
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.address"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮政编码" prop="postalCode">
            <el-input
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.postalCode"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱">
            <el-input
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.email"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急联系人姓名" prop="emergencyContactName">
            <el-input
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.emergencyContactName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急联系人电话" prop="emergencyContactTel">
            <el-input
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.emergencyContactTel"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工资">
            <el-input
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.salary"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="薪资等级">
            <el-input
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.salaryLevel"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="绩效方案">
            <el-select
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.performance"
              placeholder="请选择"
              popper-class="select-prop"
            >
              <!-- <el-option label="博士" value="博士"></el-option> -->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户账号" prop="accountno">
            <el-input
              disabled
              style="width: 200px"
              v-model="formDataDetail.accountno"
              placeholder="登录系统绑卡后显示"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户行" prop="bankName">
            <el-input
              disabled
              style="width: 200px"
              v-model="formDataDetail.bankName"
              placeholder="登录系统绑卡后显示"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="原工作单位" prop="formerEmployer">
            <el-input
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.formerEmployer"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入司时间" prop="entryTime">
            <el-date-picker
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.entryTime"
              type="date"
              placeholder="选择日期"
              popper-class="select-prop"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="离职时间" prop="logoutTime">
            <el-date-picker
               :disabled="isDisabled"
              value-format="yyyy-MM-dd"
              style="width: 200px"
              v-model="formData.logoutTime"
              type="date"
              placeholder="选择日期"
              popper-class="select-prop"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="代理人资格证号" prop="agentQualificationCode">
            <el-input
               :disabled="isDisabled"
              style="width: 200px"
              v-model="formDataDetail.agentQualificationCode"
            ></el-input>
          </el-form-item>
        </el-col>
        <!--  v-show="isDisabled" -->
        <el-col :span="16">
          <el-form-item label="驳回信息">
            <el-input
               disabled
               v-model="formData.approvalOpinion"
               type="textarea"
               style="width: 30vw;"
               :autosize="{ minRows: 4, maxRows: 6 }"
               placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import mixa from "@/views/PeopleManage/mixin";
const mixin = new mixa({
  treeTypeNum: null,
});
export default {
  props: {
    // 基本信息
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 详细信息
    formDataDetail: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
  },
  mixins: [mixin],
  data() {
    return {

    }
  },
  created() {
    this.getDictItems("user_status");
  },
  methods: {
    // 新增或修改的弹出框Start
    getDictItems(typeName) {
      //--数据字典--
      this.$api.dict
        .findByLableName(typeName)
        .then((response) => {
          this[typeName + "options"] = response.data; // 把获取到的数据赋给this.data
        })
        .catch((error) => {
          this[typeName + "options"] = [];
        });
    },
  }
};
</script>

<style lang="scss">
.select-prop {
  .el-select-dropdown__item.selected,.el-date-table td.available:hover {
    color: #2D4D89;
  }
  .el-date-table td.current:not(.disabled) span  {
    background-color: #2D4D89;
  }
}
</style>

<style lang="scss" scoped>
>>> .el-radio__input.is-checked .el-radio__inner {
  background-color: #2D4D89 !important;
  border-color: #2D4D89 !important;
}
>>> .el-radio__input.is-checked + .el-radio__label {
  color: #2D4D89 !important;
}
>>> .radio-four {
  .el-radio {
    margin-right: 6px;
    line-height: 32px;
  }
  .el-radio__label {
    padding-left: 4px;
  }
}
>>> .el-input__inner:focus, >>> .el-select .el-input.is-focus .el-input__inner {
  border-color: #2D4D89;
}
</style>