integrated_traffic_vue/src/views/archives/user/components/personal.vue

<template>
  <el-dialog v-model="visible" title="人员登记表" :before-close="fnClose">
    <el-button type="primary" v-print="'#printContent'">打印</el-button>
    <div id="printContent" class="mt-20">
      <div class="tc">
        <h3>生产经营单位新入职从业人员登记表</h3>
      </div>
      <div
        class="mt-20"
        style="display: flex; justify-content: space-between; width: 80%"
      >
        <span>生产经营单位名称(盖章):{{ CORP_NAME }}</span>
        <span>档案编号:</span>
      </div>
      <el-row class="mt-10">
        <el-col :span="20">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="姓名" label-align="center">
              {{ data.userInfo.NAME }}
            </el-descriptions-item>
            <el-descriptions-item label="性别" label-align="center">
              {{ data.userInfo.SEX_NAME }}
            </el-descriptions-item>
            <el-descriptions-item label="民族" label-align="center">
              {{ data.userInfo.NATION_NAME }}
            </el-descriptions-item>
            <el-descriptions-item label="政治面貌" label-align="center">
              {{ data.userInfo.POLITICAL_OUTLOOK_NAME }}
            </el-descriptions-item>
            <el-descriptions-item label="文化程度" label-align="center">
              {{ data.userInfo.DEGREE_OF_EDUCATION_NAME }}
            </el-descriptions-item>
            <el-descriptions-item label="健康状况" label-align="center">
            </el-descriptions-item>
            <el-descriptions-item label="出生年月" label-align="center">
              {{ data.userInfo.DATE_OF_BIRTH }}
            </el-descriptions-item>
            <el-descriptions-item label="身份证号" label-align="center">
              {{ data.userInfo.USER_ID_CARD }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="4">
          <div style="width: 152px; height: 160px">
            <img
              v-if="data.userInfo.USERAVATARURL_CONVERT"
              :src="
                data.userInfo.USERAVATARPREFIX +
                data.userInfo.USERAVATARURL_CONVERT
              "
              alt="头像"
              style="width: 100%; height: 100%"
            />
          </div>
        </el-col>
      </el-row>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="毕业院校及专业" label-align="center">
        </el-descriptions-item>
        <el-descriptions-item label="职务/职称" label-align="center">
          {{ data.userInfo.DUTIES_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="户籍所在地" label-align="center">
        </el-descriptions-item>
        <el-descriptions-item label="参加工作时间" label-align="center">
          {{ data.userInfo.WORKING_DATE }}
        </el-descriptions-item>
        <el-descriptions-item label="进入本单位时间" label-align="center">
          {{ data.userInfo.ENTRY_DATE }}
        </el-descriptions-item>
        <el-descriptions-item label="入职部门" label-align="center">
          {{ data.userInfo.DEPARTMENT_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="岗位名称" label-align="center">
          {{ data.userInfo.POST_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="之前从事本岗位时间" label-align="center">
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="主要工作经历" label-align="center">
          <div class="large-content"></div>
        </el-descriptions-item>
        <el-descriptions-item
          label="入职前接受安全培训和考核以及取得安全培训有关的岗位证书等情况"
          label-align="center"
        >
          <div class="large-content"></div>
        </el-descriptions-item>
        <el-descriptions-item
          label="入职前受过何种有关安全生产的处罚以及是否受到刑事处罚"
        >
          <div class="large-content"></div>
        </el-descriptions-item>
        <el-descriptions-item label="入职统计表相关信息核定情况">
          <div>
            <p class="mtb-20">
              入职人承诺:以上信息已经本人核实，信息真实、有效、完整，如有虚假或欺骗等行为，自愿承担相应的法律责任.
            </p>
            <div
              class="mt-20"
              style="display: flex; justify-content: space-between; width: 80%"
            >
              <span>入职人(签字并按指纹)：</span>
              <span>
                承诺日期：
                <span class="pl-40">年</span>
                <span class="pl-20">月</span>
                <span class="pl-20">日</span>
              </span>
            </div>
            <p class="mt-20">生产经营单位核查意见：</p>
            <div
              class="mtb-20"
              style="display: flex; justify-content: space-between; width: 80%"
            >
              <span>核查人员(签字)：</span>
              <span>
                核查日期：
                <span class="pl-40">年</span>
                <span class="pl-20">月</span>
                <span class="pl-20">日</span>
              </span>
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <el-button @click="fnClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useVModels } from "@vueuse/core";
import { getUserInfo } from "@/request/archives.js";
import { reactive } from "vue";
import { useUserStore } from "@/pinia/user";

const userStore = useUserStore();
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  userId: {
    type: String,
    required: true,
    default: "",
  },
});
const emits = defineEmits(["update:visible"]);
const { visible, userId } = useVModels(props, emits);
const CORP_NAME = userStore.getUserInfo.CORP_NAME;

const data = reactive({
  userInfo: {},
});

const fnClose = () => {
  data.userInfo = {};
  emits("update:visible", false);
};

const fnGetUserInfo = async () => {
  const respData = await getUserInfo({ USER_ID: userId.value });
  if (respData && respData.pd) {
    data.userInfo = respData.pd;
  }
};
await fnGetUserInfo();
</script>

<style scoped lang="scss">
.large-content {
  height: 127px;
}
</style>