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>
    <br /><br />
    <div id="printContent">
      <div style="text-align: center">
        <el-text size="large">生产经营单位新入职从业人员登记表</el-text>
      </div>
      <el-descriptions :column="2">
        <el-descriptions-item label="生产经营单位名称(盖章):">
          {{ CORP_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="档案编号:">
          <!-- todo 原项目是空的 -->
        </el-descriptions-item>
      </el-descriptions>
      <el-row>
        <el-col :span="20">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="姓名">
              {{ data.userInfo.NAME }}
            </el-descriptions-item>
            <el-descriptions-item label="性别">
              {{ data.userInfo.SEX_NAME }}
            </el-descriptions-item>
            <el-descriptions-item label="民族">
              {{ data.userInfo.NATION_NAME }}
            </el-descriptions-item>
            <el-descriptions-item label="政治面貌">
              {{ data.userInfo.POLITICAL_OUTLOOK_NAME }}
            </el-descriptions-item>
            <el-descriptions-item label="文化程度">
              {{ data.userInfo.DEGREE_OF_EDUCATION_NAME }}
            </el-descriptions-item>
            <el-descriptions-item label="健康状况">
              <!-- todo 原项目是空的 -->
            </el-descriptions-item>
            <el-descriptions-item label="出生年月">
              {{ data.userInfo.DATE_OF_BIRTH }}
            </el-descriptions-item>
            <el-descriptions-item label="身份证号">
              {{ 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="毕业院校及专业">
          <!-- todo 原项目是空的 -->
        </el-descriptions-item>
        <el-descriptions-item label="职务/职称">
          {{ data.userInfo.DUTIES_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="户籍所在地">
          <!-- todo 原项目是空的 -->
        </el-descriptions-item>
        <el-descriptions-item label="参加工作时间">
          {{ data.userInfo.WORKING_DATE }}
        </el-descriptions-item>
        <el-descriptions-item label="进入本单位时间">
          {{ data.userInfo.ENTRY_DATE }}
        </el-descriptions-item>
        <el-descriptions-item label="入职部门">
          {{ data.userInfo.DEPARTMENT_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="岗位名称">
          {{ data.userInfo.POST_NAME }}
        </el-descriptions-item>
        <el-descriptions-item label="之前从事本岗位时间">
          <!-- todo 原项目是空的 -->
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="主要工作经历">
          <!-- todo 原项目是空的 -->
        </el-descriptions-item>
        <el-descriptions-item
          label="入职前接受安全培训和考核以及取得安全培训有关的岗位证书等情况"
        >
          <!-- todo 原项目是空的 -->
        </el-descriptions-item>
        <el-descriptions-item
          label="入职前受过何种有关安全生产的处罚以及是否受到刑事处罚"
        >
          <!-- todo 原项目是空的 -->
        </el-descriptions-item>
        <el-descriptions-item label="入职统计表相关信息核定情况">
          <div>
            <p>
              入职人承诺:以上信息已经本人核实，信息真实、有效、完整，如有虚假或欺骗等行为，自愿承担相应的法律责任.
            </p>
            <div class="flex">
              <p>入职人(签字并按指纹)：</p>
              <p>
                承诺日期：<span style="padding-left: 40px">年</span
                ><span style="padding-left: 20px">月</span
                ><span style="padding-left: 20px">日</span>
              </p>
            </div>
          </div>
          <div>
            <p>生产经营单位核查意见：</p>
            <div class="flex">
              <p>核查人员(签字)：</p>
              <p>
                核查日期：<span style="padding-left: 40px">年</span
                ><span style="padding-left: 20px">月</span
                ><span style="padding-left: 20px">日</span>
              </p>
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <el-button @click="fnClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
// import LayoutPrintTablePackage from "@/components/print_table_package/index.vue";
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"></style>