hxgksystemapp/src/views/hr/archives/archivescont.vue

<!--
@ 作者: 秦东
@ 时间: 2023-06-15 13:01:11
@ 备注: 员工档案
-->
<script lang="ts" setup>
/**
 * 引入页面
 */
import UserContent from "@/views/hr/archives/basicinformation/content.vue";
import EditUserContent from "@/views/hr/archives/basicinformation/editcontent.vue";
import OrgNexus from "@/views/hr/archives/basicinformation/orgnexus.vue";
import EmergencyContactPage from "@/views/hr/archives/basicinformation/emergencycontact.vue";
import WorkingCouplePage from "@/views/hr/archives/basicinformation/workingcouple.vue";
import FamilyMembers from "@/views/hr/archives/basicinformation/familymembers.vue";
import EducationalExperience from "@/views/hr/archives/basicinformation/educationalexperience.vue";
import InnerWork from "@/views/hr/archives/basicinformation/innerwork.vue";
import OutsideWork from "@/views/hr/archives/basicinformation/outsideWork.vue";
import Editpwd from "@/views/hr/archives/basicinformation/editpwd.vue";
import EditOrg from "@/views/hr/archives/basicinformation/editorg.vue";
import CharacterColor from "@/views/hr/archives/basicinformation/charactercolor.vue";
import Rewardsandpunishments from "@/views/hr/archives/basicinformation/rewardsandpunishments.vue";
import Appraisalrecord from "@/views/hr/archives/basicinformation/appraisalrecord.vue";
import Talentinventory from "@/views/hr/archives/basicinformation/talentinventory.vue";
import Employmentrelations from "@/views/hr/archives/basicinformation/employmentrelations.vue";
import Jobtitle from "@/views/hr/archives/basicinformation/jobtitle.vue";
import Certificates from "@/views/hr/archives/basicinformation/certificates.vue";

import { archivesCont } from "@/api/hr/people/type";

import SvgIcon from "@/components/SvgIcon/index.vue";
import UserRole from "@/assets/icons/user.svg";

import { myinfostruct } from "@/api/hr/people/type";
import { getMyInfoing, editMyInfoIcon } from "@/api/hr/people/index";
import type { UploadProps } from "element-plus";

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
  archivesdata: {
    type: Object,
    default() {
      return {};
    },
  },
});
const emits = defineEmits([
  "update:isShow",
  "updatemyconting",
  "getarchivespageclick",
]); //操作父级数据
const boxTitle = ref<string>(); //弹出框标题
const userIcon = ref<string>(); //人员内容
const activeName = ref("1");
const editMyCont = ref(false);
// const userConting = ref<myinfostruct>();
const userConting = reactive<myinfostruct>({
  entrydatetime: "",
  probationperiod: 1,
});
const rowLoading = ref(false);
const imgUploadApiUrl = import.meta.env.VITE_APP_BASE_API + "/api/upordown";
const editMyOrgCont = ref(false);
/**
 * 弹窗显示控制
 */
const boxShow = computed({
  get: () => props.isShow,
  set: (val) => {
    emits("update:isShow", val);
  },
});
/**
 * 获取人员数据
 */
function getjtcyList() {
  rowLoading.value = true;
  getMyInfoing({ id: props.archivesdata.id, idstr: props.archivesdata.idstr })
    .then((data) => {
      // userConting.value = data.data
      userConting.id = data.data.id;
      userConting.number = data.data.number; //"300450",
      userConting.name = data.data.name; //"秦东",
      userConting.icon = data.data.icon; //
      userConting.hireclass = data.data.hireclass; //1,
      userConting.emptype = data.data.emptype; //8,
      userConting.company = data.data.company; //309,
      userConting.maindeparment = data.data.maindeparment; //102,
      userConting.sunmaindeparment = data.data.sunmaindeparment; //272,
      userConting.deparment = data.data.deparment; //"",
      userConting.adminorg = data.data.adminorg; //272,
      userConting.teamid = data.data.teamid; //1,
      userConting.position = data.data.position; //2184,
      userConting.jobclass = data.data.jobclass; //5,
      userConting.jobid = data.data.jobid; //36,
      userConting.jobleve = data.data.jobleve; //3,
      userConting.time = data.data.time; //1656984567,
      userConting.eitetime = data.data.eitetime; //1671160648,
      userConting.wechat = data.data.wechat; //"",
      userConting.workwechat = data.data.workwechat; //"KaiXinGuo",
      userConting.state = data.data.state; //1,
      userConting.key = data.data.key; //15993815826844528,
      userConting.isadmin = data.data.isadmin; //4,
      userConting.password = data.data.password; //"ecffe8715d2d3c2743bab6abc90e1331",
      userConting.role = data.data.role; //"1",
      userConting.idcardno = data.data.idcardno; //"370921198810151515",
      userConting.passportno = data.data.passportno; //"",
      userConting.globalroaming = data.data.globalroaming; //"",
      userConting.mobilephone = data.data.mobilephone; //"15069130853",
      userConting.email = data.data.email; //"",
      userConting.gender = data.data.gender; //1,
      userConting.birthday = data.data.birthday; //592848000,
      userConting.myfolk = data.data.myfolk; //"汉族",
      userConting.nativeplace = data.data.nativeplace; //"山东省宁阳县华丰镇白土厂村15号",
      userConting.idcardstartdate = data.data.idcardstartdate; //0,
      userConting.idcardenddate = data.data.idcardenddate; //0,
      userConting.idcardaddress = data.data.idcardaddress; //"",
      userConting.idcardIssued = data.data.idcardIssued; //"",
      userConting.health = data.data.health; //2,
      userConting.maritalstatus = data.data.maritalstatus; //2,
      userConting.internaltelephone = data.data.internaltelephone; //"",
      userConting.currentresidence = data.data.currentresidence; //"山东省宁阳县华丰镇矿区花园小区1号楼1单元302室",
      userConting.constellationing = data.data.constellationing; //1,
      userConting.isdoubleworker = data.data.isdoubleworker; //2,
      userConting.isveterans = data.data.isveterans; //2,
      userConting.veteransnumber = data.data.veteransnumber; //"",
      userConting.jobstartdate = data.data.jobstartdate; //0,
      userConting.entrydate = data.data.entrydate; //0,
      userConting.probationperiod = data.data.probationperiod; //0,
      userConting.planformaldate = data.data.planformaldate; //0,
      userConting.politicaloutlook = data.data.politicaloutlook; //1,
      userConting.nameusedbefore = data.data.nameusedbefore; //"",
      userConting.iconphoto = data.data.iconphoto; //"
      userConting.responsibledepartment = data.data.responsibledepartment; //"",
      userConting.responsibledepartmentjson = data.data.responsibledepartmentjson; //"",
      userConting.birthdaytime = data.data.birthdaytime; //"1988-10-15",
      userConting.idcardstarttimedata = data.data.idcardstarttimedata; //"",
      userConting.idcardendtimedata = data.data.idcardendtimedata; //"",
      userConting.entrydatetime = data.data.entrydatetime; //"",
      userConting.planformaldatetime = data.data.planformaldatetime; //"",
      userConting.doubleworkerlist = data.data.doubleworkerlist; //null,
      userConting.educationalexperience = data.data.educationalexperience; //null,
      userConting.emergencycontact = data.data.emergencycontact; //null,
      userConting.memberoffamily = data.data.memberoffamily; //null,
      userConting.workhistorylist = data.data.workhistorylist; //null,
      userConting.groupworkhistorylist = data.data.groupworkhistorylist; //null,
      userConting.idstr = data.data.idstr; //"78",
      userConting.companyname = data.data.companyname; //"山东恒信高科能源有限公司",
      userConting.maindeparmentname = data.data.maindeparmentname; //"企管部",
      userConting.adminorgname = data.data.adminorgname; //"",
      userConting.positionname = data.data.positionname; //"开发主管",
      userConting.jobclassname = data.data.jobclassname; //"基层管理",
      userConting.jobidname = data.data.jobidname; //"主管",
      userConting.politicaloutlookname = data.data.politicaloutlookname; //"群众",
      userConting.jobstartdatestr = data.data.jobstartdatestr; //"",
      userConting.entrydatestr = data.data.entrydatestr; //"",
      userConting.personincharge = data.data.personincharge; //2,
      userConting.sunmaindeparmentname = data.data.sunmaindeparmentname; //"企管",
      userConting.workpostname = data.data.workpostname; //"",
      userConting.teamname = data.data.teamname; //"长白班",
      userConting.allorglist = data.data.allorglist; //[309,102,272],
      userConting.ruleid = data.data.ruleid; //"0",
      userConting.rulename = data.data.rulename; //"",
      userConting.orgreslist = data.data.orgreslist; //null
      userConting.keystr = data.data.keystr; //
      userConting.interests = data.data.interests;
      userConting.bloodtype = data.data.bloodtype;
      userConting.natureofAccount = data.data.natureofAccount;

    })
    .finally(() => {
      rowLoading.value = false;
    });
}
/**
 * 关闭弹窗
 */
function closeArchivesBox() {
  emits("update:isShow", false);
  activeName.value = "1";
  editMyCont.value = false;
}
/**
 * 选项卡翻页
 */
const handleClickUser = (tab: any, event: Event) => {
  //   console.log(tab, event)
};
/**
 * 监听数据
 */
watch(
  () => props.isShow,
  () => {
    // console.log("监听数据",props.archivesdata )
    if (props.isShow) {
      getjtcyList();
      boxTitle.value =
        "查看  " +
        props.archivesdata.name +
        "(工号：" +
        props.archivesdata.number +
        ")" +
        "  详情";
      if (props.archivesdata.icon != "") {
        userIcon.value = props.archivesdata.icon;
      } else if (props.archivesdata.iconphoto != "") {
        userIcon.value = props.archivesdata.iconphoto;
      } else {
        userIcon.value = UserRole;
      }
    }
  }
);

/**
 * 刷新编辑页面
 */
function refreshContPage(cont: archivesCont) {
  emits("updatemyconting", cont);
  getjtcyList();
  // console.log("刷新编辑页面",cont)
  // userConting.value = cont
  // userConting.value.id = cont.id //78,
  // userConting.id = cont.id
  // userConting.number =  cont.number //"300450",
  // userConting.name =  cont.name //"秦东",
  // userConting.icon =  cont.icon //
  // userConting.hireclass =  cont.hireclass //1,
  // userConting.emptype =  cont.emptype //8,
  // userConting.company =  cont.company //309,
  // userConting.maindeparment =  cont.maindeparment //102,
  // userConting.sunmaindeparment =  cont.sunmaindeparment //272,
  // userConting.deparment =  cont.deparment //"",
  // userConting.adminorg =  cont.adminorg //272,
  // userConting.teamid =  cont.teamid //1,
  // userConting.position =  cont.position //2184,
  // userConting.jobclass =  cont.jobclass //5,
  // userConting.jobid =  cont.jobid //36,
  // userConting.jobleve =  cont.jobleve //3,
  // userConting.time =  cont.time //1656984567,
  // userConting.eitetime =  cont.eitetime //1671160648,
  // userConting.wechat =  cont.wechat //"",
  // userConting.workwechat =  cont.workwechat //"KaiXinGuo",
  // userConting.state =  cont.state //1,
  // userConting.key =  cont.key //15993815826844528,
  // userConting.isadmin =  cont.isadmin //4,
  // userConting.password =  cont.password //"ecffe8715d2d3c2743bab6abc90e1331",
  // userConting.role =  cont.role //"1",
  // userConting.idcardno =  cont.idcardno //"370921198810151515",
  // userConting.passportno =  cont.passportno //"",
  // userConting.globalroaming =  cont.globalroaming //"",
  // userConting.mobilephone =  cont.mobilephone //"15069130853",
  // userConting.email =  cont.email //"",
  // userConting.gender =  cont.gender //1,
  // userConting.birthday =  cont.birthday //592848000,
  // userConting.myfolk =  cont.myfolk //"汉族",
  // userConting.nativeplace =  cont.nativeplace //"山东省宁阳县华丰镇白土厂村15号",
  // userConting.idcardstartdate =  cont.idcardstartdate //0,
  // userConting.idcardenddate =  cont.idcardenddate //0,
  // userConting.idcardaddress =  cont.idcardaddress //"",
  // userConting.idcardIssued =  cont.idcardIssued //"",
  // userConting.health =  cont.health //2,
  // userConting.maritalstatus =  cont.maritalstatus //2,
  // userConting.internaltelephone =  cont.internaltelephone //"",
  // userConting.currentresidence =  cont.currentresidence //"山东省宁阳县华丰镇矿区花园小区1号楼1单元302室",
  // userConting.constellationing =  cont.constellationing //1,
  // userConting.isdoubleworker =  cont.isdoubleworker //2,
  // userConting.isveterans =  cont.isveterans //2,
  // userConting.veteransnumber =  cont.veteransnumber //"",
  // userConting.jobstartdate =  cont.jobstartdate //0,
  // userConting.entrydate =  cont.entrydate //0,
  // userConting.probationperiod =  cont.probationperiod //0,
  // userConting.planformaldate =  cont.planformaldate //0,
  // userConting.politicaloutlook =  cont.politicaloutlook //1,
  // userConting.nameusedbefore =  cont.nameusedbefore //"",
  // userConting.iconphoto =  cont.iconphoto //"
  // userConting.responsibledepartment =  cont.responsibledepartment //"",
  // userConting.responsibledepartmentjson =  cont.responsibledepartmentjson //"",
  // // userConting.birthdaytime =  cont.birthdaytime //"1988-10-15",
  // // userConting.idcardstarttimedata =  cont.idcardstarttimedata //"",
  // // userConting.idcardendtimedata =  cont.idcardendtimedata //"",
  // // userConting.entrydatetime =  cont.entrydatetime //"",
  // // userConting.planformaldatetime =  cont.planformaldatetime //"",
  // // userConting.doubleworkerlist  =  cont.doubleworkerlist  //null,
  // // userConting.educationalexperience  =  cont.educationalexperience  //null,
  // // userConting.emergencycontact  =  cont.emergencycontact  //null,
  // // userConting.memberoffamily  =  cont.memberoffamily  //null,
  // // userConting.workhistorylist  =  cont.workhistorylist  //null,
  // // userConting.groupworkhistorylist  =  cont.groupworkhistorylist  //null,
  // userConting.idstr =  cont.id?.toString() //"78",
  // userConting.companyname =  cont.companyname //"山东恒信高科能源有限公司",
  // userConting.maindeparmentname =  cont.maindeparmentname //"企管部",
  // // userConting.adminorgname =  cont.adminorgname //"",
  // userConting.positionname =  cont.positionname //"开发主管",
  // // userConting.jobclassname =  cont.jobclassname //"基层管理",
  // // userConting.jobidname =  cont.jobidname //"主管",
  // //userConting.politicaloutlookname =  cont.politicaloutlookname //"群众",
  // //userConting.jobstartdatestr =  cont.jobstartdatestr //"",
  // //userConting.entrydatestr =  cont.entrydatestr //"",
  // userConting.personincharge =  cont.personincharge //2,
  // userConting.sunmaindeparmentname =  cont.sunmaindeparmentname //"企管",
  // userConting.workpostname =  cont.workpostname //"",
  // userConting.teamname =  cont.teamname //"长白班",
  // //userConting.allorglist =  cont.allorglist //[309,102,272],
  // //userConting.ruleid =  cont.ruleid //"0",
  // //userConting.rulename =  cont.rulename //"",
  // //userConting.orgreslist =  cont.orgreslist //null
  // userConting.keystr =  cont.keystr //
  getjtcyList();
}
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile,
  uploadFiles
) => {
  userIcon.value = URL.createObjectURL(uploadFile.raw!);
  // console.log("上传后数据---1--->",response)
  // console.log("上传后数据---2--->",uploadFile)
  // console.log("上传后数据----3-->",uploadFiles)
  editMyInfoIcon({
    id: props.archivesdata.id,
    iconpath: response.data.url,
  }).then((data) => {
    // userConting.value = data.data
    ElMessage.success("编辑成功");
    emits("getarchivespageclick");
  });
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  // console.log("上传前判断------>",rawFile)
};
function editmvorg() {
  editMyOrgCont.value = true;
}
</script>
<template>
  <el-dialog
    v-model="boxShow"
    custom-class="dialog_box"
    :title="boxTitle"
    top="50px"
    :before-close="closeArchivesBox"
    width="80%"
  >
    <el-row v-loading="rowLoading" :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
        <el-card shadow="always" class="box-card-left">
          <el-row>
            <el-col :span="24">
              <el-upload
                class="avatar-uploader"
                :action="imgUploadApiUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <el-avatar :size="180" :src="userIcon" />
              </el-upload>
            </el-col>
            <el-col :span="24"
              ><el-text class="mx-1 username">{{
                userConting.name
              }}</el-text></el-col
            >
            <el-col :span="24"
              ><el-text class="mx-1 usernumber"
                >NO.{{ userConting.number }}</el-text
              ></el-col
            >
            <el-col :span="24">
              <el-row class="user_cont">
                <el-col :span="24" class="col_box">
                  <el-text class="cont_size">
                    <svg-icon icon-class="gender" class="svg_box"></svg-icon>
                    <span v-if="userConting.gender == 1">男</span>
                    <span v-else>女</span>
                  </el-text>
                </el-col>
                <el-col :span="24" class="col_box">
                  <el-text class="cont_size">
                    <svg-icon
                      icon-class="marriageregistration"
                      class="svg_box"
                    ></svg-icon>
                    <span v-if="userConting.maritalstatus == 2">已婚</span>
                    <span v-else-if="userConting.maritalstatus == 3">丧偶</span>
                    <span v-else-if="userConting.maritalstatus == 4">离异</span>
                    <span v-else>未婚</span>
                  </el-text>
                </el-col>
                <el-col :span="24" class="col_box">
                  <el-text class="cont_size">
                    <svg-icon icon-class="qxsp" class="svg_box"></svg-icon>
                    {{ userConting.myfolk }}
                  </el-text>
                </el-col>
                <el-col :span="24" class="col_box">
                  <el-text class="cont_size">
                    <svg-icon
                      icon-class="healthcondition"
                      class="svg_box"
                    ></svg-icon>
                    <span v-if="userConting.health == 2">良好</span>
                    <span v-else-if="userConting.health == 3">较弱</span>
                    <span v-else-if="userConting.health == 4">有生理缺陷</span>
                    <span v-else-if="userConting.health == 5">残废</span>
                    <span v-else>一般</span>
                  </el-text>
                </el-col>
                <el-col :span="24" class="col_box">
                  <el-text class="cont_size">
                    <svg-icon icon-class="phone" class="svg_box"></svg-icon>
                    {{ userConting.mobilephone }}
                  </el-text>
                </el-col>
                <el-col :span="24" class="col_box">
                  <el-text class="cont_size">
                    <svg-icon icon-class="address" class="svg_box"></svg-icon>
                    {{ userConting.currentresidence }}
                  </el-text>
                </el-col>

                <el-col :span="24" class="col_box">
                  <el-text class="cont_size">
                    <svg-icon icon-class="zhiye" class="svg_box"></svg-icon>
                    {{ userConting.companyname }} /
                    {{ userConting.maindeparmentname }}
                  </el-text>
                </el-col>
                <el-col :span="24" class="col_box">
                  <el-text class="cont_size">
                    <svg-icon
                      icon-class="iconfont-mingpian"
                      class="svg_box"
                    ></svg-icon>
                    {{ userConting.positionname }}
                  </el-text>
                </el-col>
              </el-row>
            </el-col>
            <el-col>
              <el-button
                type="primary"
                style="margin-top: 15px"
                @click="editmvorg"
                >编辑主行政组织</el-button
              >
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
        <el-card shadow="always" class="box-card">
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClickUser"
          >
            <el-tab-pane label="基本信息" name="1">
              <UserContent
                v-if="!editMyCont && activeName == '1'"
                v-model:editShow="editMyCont"
                :usercont="userConting"
                :tabsid="activeName"
              />
              <EditUserContent
                v-if="editMyCont"
                v-model:editShow="editMyCont"
                :usercont="userConting"
                :tabsid="activeName"
                @refreshcontdata="refreshContPage"
              />
            </el-tab-pane>
            <el-tab-pane label="性格色彩" name="2">
              <CharacterColor :usercont="userConting" :tabsid="activeName" />
            </el-tab-pane>
            <el-tab-pane label="行政组织关系" name="3">
              <OrgNexus :usercont="userConting" :tabsid="activeName" />
            </el-tab-pane>
            <el-tab-pane label="紧急联系人" name="4">
              <EmergencyContactPage
                :usercont="userConting"
                :tabsid="activeName"
              />
            </el-tab-pane>
            <el-tab-pane label="双职工" name="5">
              <WorkingCouplePage :usercont="userConting" :tabsid="activeName" />
            </el-tab-pane>
            <el-tab-pane label="家庭成员" name="6">
              <FamilyMembers :usercont="userConting" :tabsid="activeName" />
            </el-tab-pane>
            <el-tab-pane label="教育经历" name="7">
              <EducationalExperience
                :usercont="userConting"
                :tabsid="activeName"
              />
            </el-tab-pane>
            <el-tab-pane label="集团内部工作履历" name="8">
              <InnerWork :usercont="userConting" :tabsid="activeName" />
            </el-tab-pane>
            <el-tab-pane label="集团外部工作履历" name="9">
              <OutsideWork :usercont="userConting" :tabsid="activeName" />
            </el-tab-pane>
            <el-tab-pane label="奖惩记录" name="10">
              <Rewardsandpunishments
                :usercont="userConting"
                :tabsid="activeName"
              />
            </el-tab-pane>
            <el-tab-pane label="考评记录" name="11">
              <Appraisalrecord :usercont="userConting" :tabsid="activeName" />
            </el-tab-pane>
            <el-tab-pane label="人才盘点" name="12">
              <Talentinventory :usercont="userConting" :tabsid="activeName" />
            </el-tab-pane>
            <el-tab-pane label="员工用工关系" name="13">
              <Employmentrelations :usercont="userConting" :tabsid="activeName" />
            </el-tab-pane>
            <el-tab-pane label="职称信息" name="14">
              <Jobtitle :usercont="userConting" :tabsid="activeName" />
            </el-tab-pane>
            <el-tab-pane label="证书信息" name="15">
              <Certificates :usercont="userConting" :tabsid="activeName" />
            </el-tab-pane>
            <el-tab-pane label="修改登陆密码" name="16">
              <Editpwd :usercont="userConting" :tabsid="activeName" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <EditOrg
      v-model:editShow="editMyOrgCont"
      :usercont="userConting"
      :tabsid="activeName"
      @refreshcontdata="refreshContPage"
    />
  </el-dialog>
</template>
<style lang="scss" scoped>
.bjg {
  background-color: aqua;
  height: 50px;
}
.box-card-left {
  text-align: center;
  .username {
    margin-top: 20px;
    font-size: 35px;
  }
  .usernumber {
    margin-top: 10px;
    font-size: 25px;
  }
  .user_cont {
    width: 90%;
    margin: auto;
    text-align: left;
    .col_box {
      margin-top: 10px;
      .cont_size {
        font-size: 16px;
        .svg_box {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>