保安基本信息样式和打印功能

guanqb

2024-01-02 2e011ae9b681fd78a47b2c2ed070cde733dc52ec

保安基本信息样式和打印功能

 src/views/securityGuard/securityGuard.vue

Diff too large

 src/views/securityGuard/securityGuardDetail.vue

@@ -1,7 +1,7 @@
<template>
    <div class="dispatch">
        <avue-tabs :option="optionTABS" @change="handleChangeTABS"></avue-tabs>
        <span v-if="typeTABS.prop === 'tab1'">
        <span v-if="typeTABS.prop === 'tab1'" class="a-f-box">
            <avue-form ref="form" v-model="obj0" :option="option0"> </avue-form>
        </span>
        <span v-else-if="typeTABS.prop === 'tab2'">
@@ -142,10 +142,294 @@
            },
            option0: {
                emptyBtn: false,
                editBtn: false,
                submitBtn: false,
                labelWidth: "110",
                gutter: 30,
                column: securityBaseInfoColumn,
                group: [
                    {
                        label: "基础信息",
                        labelWidth: "110",
                        prop: "baseInfo",
                        icon: "el-icon-user-solid",
                        column: [
                            {
                                label: "企业名称",
                                prop: "deptId",
                                type: "tree",
                                disabled: true,
                                dicUrl: "/api/blade-system/dept/security_lazy-tree?parentId=1413470343230877697",
                                props: {
                                    label: "title",
                                    value: "id"
                                },
                                labelWidth: 120,

                            },
                            {
                                label: "姓名",
                                prop: "realName",
                                disabled: true,
                                labelWidth: 120,

                            }
                        ]
                    },
                    {
                        label: "详细信息",
                        prop: "detailInfo",
                        labelWidth: "110",
                        icon: "el-icon-s-order",
                        column: [
                            {
                                label: "身份证号",
                                prop: "cardid",
                                hide: true,
                                overHidden: true,
                                disabled: true,
                                labelWidth: 120,

                            },
                            {
                                label: "手机号码",
                                prop: "phone",
                                overHidden: true,
                                disabled: true,
                                labelWidth: 120,

                            },
                            {
                                label: "个人照片",
                                type: "upload",
                                listType: "picture-img",
                                labelWidth: 120,
                                disabled: true,
                                propsHttp: {
                                    res: "data",
                                    url: "url"
                                },
                                canvasOption: {
                                    text: " ",
                                    ratio: 1.0
                                },
                                action: "/api/blade-resource/oss/endpoint/put-files",
                                tip:
                                    "上传近期一寸彩色正面免冠图象， (358像素(宽) × 441像素(高)、分辨率350dpi)且不小于30kb,不超过500kb",
                                span: 12,
                                prop: "avatar"
                            },
                            {
                                label: "是否持证",
                                prop: "hold",
                                type: "select",
                                disabled: true,
                                dicData: [
                                    {
                                        label: "是",
                                        value: "1"
                                    },
                                    {
                                        label: "否",
                                        value: "2"
                                    },
                                    {
                                        label: "已吊销",
                                        value: "3"
                                    }
                                ],

                            },
                            {
                                label: "保安员证编号",
                                prop: "securitynumber",
                                hide: true,
                                disabled: true,
                                display: true,

                            },
                            {
                                label: "民族",
                                disabled: true,
                                prop: "nation"
                            },
                            {
                                label: "最高学历",
                                prop: "education1",
                                disabled: true,
                                type: "select",
                                dicUrl:
                                    "/api/blade-system/dict-biz/dictionary?code=educationType",
                                props: {
                                    label: "dictValue",
                                    value: "dictKey"
                                },
                                dataType: "number",
                                slot: true
                            },
                            {
                                label: "政治面貌",
                                disabled: true,
                                prop: "politicaloutlook"
                            },
                            {
                                label: "所属辖区",
                                prop: "jurisdiction",
                                // multiple: true,
                                type: "tree",
                                disabled: true,
                                dicUrl: "/api/jurisdiction/lazy-tree",
                                props: {
                                    label: "title",
                                    value: "id"
                                },
                                checkStrictly: true,
                                slot: true,

                            },
                            {
                                label: "从业单位",
                                disabled: true,
                                prop: "unitName",

                            },
                            {
                                label: "性别",
                                prop: "sex",
                                type: "select",
                                disabled: true,
                                slot: true,
                                dicData: [
                                    {
                                        label: "男",
                                        value: 1
                                    },
                                    {
                                        label: "女",
                                        value: 2
                                    }
                                ],

                            },
                            {
                                label: "婚姻状态",
                                prop: "marriageStatus",
                                type: "select",
                                disabled: true,
                                dicUrl:
                                    "/api/blade-system/dict-biz/dictionary?code=marriageStatusType",
                                props: {
                                    label: "dictValue",
                                    value: "dictKey"
                                },
                                dataType: "number",
                                hide: true,
                            },
                            {
                                label: "户籍地址",
                                prop: "permanentResidenceAddress",
                                hide: true,
                                disabled: true,
                            },
                            {
                                label: "报考等级",
                                prop: "signLevel",
                                type: "select",
                                dicUrl:
                                    "/api/blade-system/dict-biz/dictionary?code=signLevelType",
                                props: {
                                    label: "dictValue",
                                    value: "dictKey"
                                },
                                dataType: "number",
                                disabled: true,
                                hide: true,
                            },
                            {
                                label: "家庭主要成员及联系方式",
                                prop: "memberOfFamily",
                                type: "textarea",
                                span: 24,
                                hide: true,
                                disabled: true,
                            },
                            {
                                label: "教育经历",
                                prop: "educationExperience",
                                type: "textarea",
                                span: 24,
                                hide: true,
                                disabled: true,
                            },
                            {
                                label: "工作经历",
                                prop: "workExperience",
                                type: "textarea",
                                span: 24,
                                hide: true,
                                disabled: true,
                            },
                            {
                                label: "受理机关",
                                prop: "acceptancePoliceUnit",
                                hide: true,
                                disabled: true,
                            },
                            {
                                label: "受理人",
                                prop: "acceptancePerson",
                                hide: true,
                                disabled: true,
                            },
                            {
                                label: "受理时间",
                                prop: "acceptanceTime",
                                type: "date",
                                format: "yyyy-MM-dd",
                                valueFormat: "yyyy-MM-dd",
                                span: 12,
                                row: true,
                                hide: true,
                                disabled: true,
                            },
                            {
                                label: "健康状况图片(健康证)",
                                prop: "healthCertificateUrl",
                                type: "upload",
                                disabled: true,
                                listType: "picture-img",
                                propsHttp: {
                                    res: "data",
                                    url: "url"
                                },
                                canvasOption: {
                                    text: " ",
                                    ratio: 1.0
                                },
                                action: "/api/blade-resource/oss/endpoint/put-files",
                                span: 12,
                                hide: true,
                                labelWidth: 120,
                            },
                            {
                                label: "无犯罪记录图片",
                                prop: "noCriminalRecordProveUrl",
                                type: "upload",
                                disabled: true,
                                listType: "picture-img",
                                propsHttp: {
                                    res: "data",
                                    url: "url"
                                },
                                canvasOption: {
                                    text: " ",
                                    ratio: 1.0
                                },
                                action: "/api/blade-resource/oss/endpoint/put-files",
                                span: 12,
                                hide: true,
                                labelWidth: 120,
                            }
                        ]
                    }
                ]
            },
            loading1: true,
            loading2: true,
@@ -450,12 +734,21 @@
}
</script>

<style lang="scss">
<style lang="scss" scoped>
.dispatch {
    width: 100%;
    height: 100%;
    //   border: 1px solid #000;
    box-sizing: border-box;

    .a-f-box {
        display: block;
        width: 1100px;
        margin: 0 auto;
        padding: 0 20px;
        background: #fff;
        position: relative;
    }
}

// .el-card__body {

 src/views/securityMan/index.vue

@@ -1,563 +1,886 @@
<template>
  <div class="dispatch">
    <!-- <avue-tabs :option="optionTABS" @change="handleChangeTABS"></avue-tabs>
    <div class="dispatch">
        <!-- <avue-tabs :option="optionTABS" @change="handleChangeTABS"></avue-tabs>
    <span v-if="typeTABS.prop === 'tab1'"> -->
    <avue-form ref="form" v-model="obj0" :option="option0" @submit="submit">
    </avue-form>
    <!-- </span>
    <span v-else-if="typeTABS.prop === 'tab2'">
      <avue-crud
        :option="option1"
        :data="data1"
        :page.sync="page1"
        :table-loading="loading1"
        @row-save="rowSave1"
        @row-update="rowUpdate1"
        @row-del="rowDel1"
        @refresh-change="refreshChange1"
      >
      </avue-crud>
    </span>
    <span v-else-if="typeTABS.prop === 'tab3'">
      <avue-crud
        :option="option2"
        :data="data2"
        :page.sync="page2"
        @row-save="rowSave2"
        @row-update="rowUpdate2"
        @row-del="rowDel2"
        :table-loading="loading2"
        @refresh-change="refreshChange2"
      >
      </avue-crud>
    </span>
    <span v-else-if="typeTABS.prop === 'tab4' && isSecurity">
      <div class="baoanzheng" id="baoanzheng">
        <div class="baz-main">
          <div class="baz-m-body" ref="baoanzheng">
            <div class="bmb-heard">保安员证</div>
            <div class="img">
              <div v-if="!obj0.myPicture">暂无照片</div>
              <img :src="obj0.myPicture" alt="" v-else />
        <div class="avue-page" id="avuePageEle" style="width: 800px;margin: 0 auto;padding: 0 20px;position: relative;">
            <avue-form ref="form" v-model="form" :option="option0" :before-open="beforeOpen">
                <template slot="menuLeft">
                    <el-button type="primary" size="small" plain icon="el-icon-s-check" @click="printBA">打印
                    </el-button>
                </template>
            </avue-form>
            <div class="printBtn">
                <el-button type="primary" @click="printBAInfo">打印</el-button>
            </div>
            <div class="imgs">
              <div v-if="erweima == ''">暂无二维码</div>
              <img :src="erweima" alt="" v-else />
            </div>

            <div class="bmb-b">
              姓名：<span class="bmb-b-s">{{ obj0.realName }}</span>
            </div>
            <div class="bmb-b">
              性别：<span class="bmb-b-s">{{ obj0.$sex }}</span>
            </div>
            <div class="bmb-b">
              编号：<span class="bmb-b-s">{{ obj0.securitynumber }}</span>
            </div>
            <div class="bmb-b">
              发证机关：<span class="bmb-b-s">晋城市公安局</span>
            </div>
            <div class="bmb-b">
              发证日期：<span class="bmb-b-s">{{
                obj0.paperTime.slice(0, 10)
              }}</span>
            </div>
          </div>
          <span slot="footer" class="dialog-footer no-print PrintBut">
            <el-button type="primary" @click="Print">打 印</el-button>
          </span>
        </div>
      </div>
    </span> -->
  </div>
    </div>
</template> 

<script>
import {
  securityBaseInfoColumn,
  practitionersColumn,
  trackRecordColumn,
} from "./data";
    practitionersColumn,
    trackRecordColumn,
} from "./data"
import {
  addExperience,
  updateExperience,
  getUserDetails,
  experienceRemove,
  getExperienceList,
} from "@/api/experience/experience";
    addExperience,
    updateExperience,
    getUserDetails,
    experienceRemove,
    getExperienceList,
} from "@/api/experience/experience"

import {
  getPerformanceInfo,
  add,
  update,
  page,
  remove,
  getER,
} from "@/api/performance/performance";
    add,
    update,
    page,
    remove,
    getER,
} from "@/api/performance/performance"

import { update as updateUserInfo } from "@/api/system/user";
import { getUser, getUserPractitionersInfo, update as updateUserInfo } from "@/api/system/user"

import { mapState } from "vuex";
import { mapState } from "vuex"

export default {
  data() {
    return {
      typeTABS: {}, //标签页
      row: {}, //数据
      isSecurity: false,
      optionTABS: {
        column: [
          {
            // icon: "el-icon-info",
            label: "保安员基本信息",
            prop: "tab1",
          },
          {
            // icon: "el-icon-info",
            label: "从业记录",
            prop: "tab2",
          },
          {
            // icon: "el-icon-info",
            label: "现实表现记录",
            prop: "tab3",
          },
          // {
          //   // icon: "el-icon-info",
          //   label: "保安员证",
          //   prop: "tab4",
          // },
        ],
      },
      current: 1,
      size: 10,
      cardid: "",
      name: "",
      dispatcherCompany: "",
      id: "",
      obj0: {
        title: "",
      },
      option0: {
        emptyBtn: false,
        submitBtn: false,
        labelWidth: "110",
        gutter: 30,
        column: securityBaseInfoColumn,
      },
      loading1: true,
      loading2: true,
      selectionList1: [],
      page1: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        ...this.$store.state.control.changePageSize,
      },
      page2: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        ...this.$store.state.control.changePageSize,
      },
      query1: {},
      query2: {},
      data1: [],
      data2: [],
      option1: {
        card: true,
        menu: true,
        height: "auto",
        widtd: "auto",
        calcHeight: 54,
        border: true, //liu
        stripe: true,
        tip: false,
        index: true,
        dialogClickModal: false,
        headerAlign: "center",
        align: "center",
        column: practitionersColumn,
      },
      option2: {
        card: true,
        menu: false,
        addBtn: false,
        height: "auto",
        widtd: "auto",
        calcHeight: 54,
        border: true, //liu
        stripe: true,
        tip: false,
        index: true,
        dialogClickModal: false,
        headerAlign: "center",
        align: "center",
        column: trackRecordColumn,
      },
      erweima: "",
    };
  },
  // components: {
  //   vueQr,
  // },
  computed: {
    ids1() {
      let ids1 = [];
      this.selectionList1.forEach((ele) => {
        ids1.push(ele.id);
      });
      return ids1.join(",");
    data () {
        return {
            typeTABS: {}, //标签页
            row: {}, //数据
            isSecurity: false,
            optionTABS: {
                column: [
                    {
                        // icon: "el-icon-info",
                        label: "保安员基本信息",
                        prop: "tab1",
                    },
                    {
                        // icon: "el-icon-info",
                        label: "从业记录",
                        prop: "tab2",
                    },
                    {
                        // icon: "el-icon-info",
                        label: "现实表现记录",
                        prop: "tab3",
                    },
                    // {
                    //   // icon: "el-icon-info",
                    //   label: "保安员证",
                    //   prop: "tab4",
                    // },
                ],
            },
            current: 1,
            size: 10,
            cardid: "",
            name: "",
            dispatcherCompany: "",
            id: "",
            form: {
                title: "",
            },
            option0: {
                emptyBtn: false,
                editBtn: false,
                submitBtn: false,
                group: [
                    {
                        label: "基础信息",
                        labelWidth: "110",
                        prop: "baseInfo",
                        icon: "el-icon-user-solid",
                        column: [
                            {
                                label: "企业名称",
                                prop: "deptId",
                                type: "tree",
                                disabled: true,
                                props: {
                                    label: "title",
                                    value: "id"
                                },
                                dicUrl: "/api/blade-system/dept/security_lazy-tree?parentId=1413470343230877697",
                                labelWidth: 120,

                            },
                            {
                                label: "姓名",
                                prop: "realName",
                                disabled: true,
                                labelWidth: 120,

                            }
                        ]
                    },
                    {
                        label: "详细信息",
                        prop: "detailInfo",
                        labelWidth: "110",
                        icon: "el-icon-s-order",
                        column: [
                            {
                                label: "身份证号",
                                prop: "cardid",
                                hide: true,
                                overHidden: true,
                                disabled: true,
                                labelWidth: 120,

                            },
                            {
                                label: "手机号码",
                                prop: "phone",
                                overHidden: true,
                                disabled: true,
                                labelWidth: 120,

                            },
                            {
                                label: "个人照片",
                                type: "upload",
                                listType: "picture-img",
                                labelWidth: 120,
                                disabled: true,
                                propsHttp: {
                                    res: "data",
                                    url: "url"
                                },
                                canvasOption: {
                                    text: " ",
                                    ratio: 1.0
                                },
                                action: "/api/blade-resource/oss/endpoint/put-files",
                                tip:
                                    "上传近期一寸彩色正面免冠图象， (358像素(宽) × 441像素(高)、分辨率350dpi)且不小于30kb,不超过500kb",
                                span: 12,
                                prop: "avatar"
                            },
                            {
                                label: "是否持证",
                                prop: "hold",
                                type: "select",
                                disabled: true,
                                dicData: [
                                    {
                                        label: "是",
                                        value: "1"
                                    },
                                    {
                                        label: "否",
                                        value: "2"
                                    },
                                    {
                                        label: "已吊销",
                                        value: "3"
                                    }
                                ],

                            },
                            {
                                label: "保安员证编号",
                                prop: "securitynumber",
                                hide: true,
                                disabled: true,
                                display: true,

                            },
                            {
                                label: "民族",
                                disabled: true,
                                prop: "nation"
                            },
                            {
                                label: "最高学历",
                                prop: "education1",
                                disabled: true,
                                type: "select",
                                dicUrl:
                                    "/api/blade-system/dict-biz/dictionary?code=educationType",
                                props: {
                                    label: "dictValue",
                                    value: "dictKey"
                                },
                                dataType: "number",
                                slot: true
                            },
                            {
                                label: "政治面貌",
                                disabled: true,
                                prop: "politicaloutlook"
                            },
                            {
                                label: "所属辖区",
                                prop: "jurisdiction",
                                // multiple: true,
                                type: "tree",
                                disabled: true,
                                dicUrl: "/api/jurisdiction/lazy-tree",
                                props: {
                                    label: "title",
                                    value: "id"
                                },
                                checkStrictly: true,
                                slot: true,

                            },
                            {
                                label: "从业单位",
                                disabled: true,
                                prop: "unitName",

                            },
                            {
                                label: "性别",
                                prop: "sex",
                                type: "select",
                                disabled: true,
                                slot: true,
                                dicData: [
                                    {
                                        label: "男",
                                        value: 1
                                    },
                                    {
                                        label: "女",
                                        value: 2
                                    }
                                ],

                            },
                            {
                                label: "婚姻状态",
                                prop: "marriageStatus",
                                type: "select",
                                disabled: true,
                                dicUrl:
                                    "/api/blade-system/dict-biz/dictionary?code=marriageStatusType",
                                props: {
                                    label: "dictValue",
                                    value: "dictKey"
                                },
                                dataType: "number",
                                hide: true,
                            },
                            {
                                label: "户籍地址",
                                prop: "permanentResidenceAddress",
                                hide: true,
                                disabled: true,
                            },
                            {
                                label: "报考等级",
                                prop: "signLevel",
                                type: "select",
                                dicUrl:
                                    "/api/blade-system/dict-biz/dictionary?code=signLevelType",
                                props: {
                                    label: "dictValue",
                                    value: "dictKey"
                                },
                                dataType: "number",
                                disabled: true,
                                hide: true,
                            },
                            {
                                label: "家庭主要成员及联系方式",
                                prop: "memberOfFamily",
                                type: "textarea",
                                span: 24,
                                hide: true,
                                disabled: true,
                            },
                            {
                                label: "教育经历",
                                prop: "educationExperience",
                                type: "textarea",
                                span: 24,
                                hide: true,
                                disabled: true,
                            },
                            {
                                label: "工作经历",
                                prop: "workExperience",
                                type: "textarea",
                                span: 24,
                                hide: true,
                                disabled: true,
                            },
                            {
                                label: "受理机关",
                                prop: "acceptancePoliceUnit",
                                hide: true,
                                disabled: true,
                            },
                            {
                                label: "受理人",
                                prop: "acceptancePerson",
                                hide: true,
                                disabled: true,
                            },
                            {
                                label: "受理时间",
                                prop: "acceptanceTime",
                                type: "date",
                                format: "yyyy-MM-dd",
                                valueFormat: "yyyy-MM-dd",
                                span: 12,
                                row: true,
                                hide: true,
                                disabled: true,
                            },
                            {
                                label: "健康状况图片(健康证)",
                                prop: "healthCertificateUrl",
                                type: "upload",
                                disabled: true,
                                listType: "picture-img",
                                propsHttp: {
                                    res: "data",
                                    url: "url"
                                },
                                canvasOption: {
                                    text: " ",
                                    ratio: 1.0
                                },
                                action: "/api/blade-resource/oss/endpoint/put-files",
                                span: 12,
                                hide: true,
                                labelWidth: 120,
                            },
                            {
                                label: "无犯罪记录图片",
                                prop: "noCriminalRecordProveUrl",
                                type: "upload",
                                disabled: true,
                                listType: "picture-img",
                                propsHttp: {
                                    res: "data",
                                    url: "url"
                                },
                                canvasOption: {
                                    text: " ",
                                    ratio: 1.0
                                },
                                action: "/api/blade-resource/oss/endpoint/put-files",
                                span: 12,
                                hide: true,
                                labelWidth: 120,
                            }
                        ]
                    }
                ]
            },
            loading1: true,
            loading2: true,
            selectionList1: [],
            page1: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
                ...this.$store.state.control.changePageSize,
            },
            page2: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
                ...this.$store.state.control.changePageSize,
            },
            query1: {},
            query2: {},
            data1: [],
            data2: [],
            option1: {
                card: true,
                menu: true,
                height: "auto",
                widtd: "auto",
                calcHeight: 54,
                border: true, //liu
                stripe: true,
                tip: false,
                index: true,
                dialogClickModal: false,
                headerAlign: "center",
                align: "center",
                column: practitionersColumn,
            },
            option2: {
                card: true,
                menu: false,
                addBtn: false,
                height: "auto",
                widtd: "auto",
                calcHeight: 54,
                border: true, //liu
                stripe: true,
                tip: false,
                index: true,
                dialogClickModal: false,
                headerAlign: "center",
                align: "center",
                column: trackRecordColumn,
            },
            erweima: "",
        }
    },
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {
    Print() {
      var printDom = document.getElementById("baoanzheng");
      printDom.style.position = "fixed";
      printDom.style.left = "-10%";
      printDom.style.width = "120%";
      printDom.style.height = "100%";
      this.$Print(this.$refs.baoanzheng);
      printDom.style.position = "relative";
      printDom.style.left = "0";
      printDom.style.width = "100%";
      printDom.style.height = "calc(100% - 100px)";
   
    created () {
    },
    handleChangeTABS(column) {
      this.typeTABS = column;
      if (column.prop == "tab1") {
        this.loading1 = false;
      } else if (column.prop == "tab2") {

    computed: {
        ids1 () {
            let ids1 = []
            this.selectionList1.forEach((ele) => {
                ids1.push(ele.id)
            })
            return ids1.join(",")
        },
        ...mapState({
            userInfo: (state) => state.user.userInfo,
        }),
    },
    methods: {
        beforeOpen () {
            getUser(this.userInfo.Id).then(res => {
                console.log('getUser', res)
                let userData = res.data.data
                if (this.obj0) {
                    // this.obj0.userDetailId = userData.id
                    this.obj0.education1 = userData.education1
                    this.obj0.marriageStatus = userData.marriageStatus
                    this.obj0.signLevel = userData.signLevel
                    this.obj0.permanentResidenceAddress = userData.permanentResidenceAddress
                    this.obj0.dwellAddress = userData.dwellAddress
                    this.obj0.memberOfFamily = userData.memberOfFamily
                    this.obj0.educationExperience = userData.educationExperience
                    this.obj0.workExperience = userData.workExperience
                    this.obj0.healthCertificateUrl = userData.healthCertificateUrl
                    this.obj0.noCriminalRecordProveUrl = userData.noCriminalRecordProveUrl
                    this.obj0.acceptancePoliceUnit = userData.acceptancePoliceUnit
                    this.obj0.acceptancePerson = userData.acceptancePerson
                    this.obj0.acceptanceTime = userData.acceptanceTime
                    this.obj0.unitName = userData.unitName
                }
                //获取用户从业信息
                getUserPractitionersInfo(userInfo.id).then(res1 => {
                    userData.UserPractitionersInfo = res1.data.data
                    console.log('res1', res1)
                })
            })
        },

        // 打印保安信息
        printBAInfo () {
            var printDom = document.getElementById("avuePageEle")
            this.$print("#avuePageEle", {
                noPrint: ".noPrint",
                onStart: () => {
                    // console.log('打印开始', Date.parse(new Date()));
                },
                onEnd: () => {
                    // console.log('打印完成', Date.parse(new Date()));
                }
            })
        },

        Print () {
            var printDom = document.getElementById("baoanzheng")
            printDom.style.position = "fixed"
            printDom.style.left = "-10%"
            printDom.style.width = "120%"
            printDom.style.height = "100%"
            this.$Print(this.$refs.baoanzheng)
            printDom.style.position = "relative"
            printDom.style.left = "0"
            printDom.style.width = "100%"
            printDom.style.height = "calc(100% - 100px)"
        },
        handleChangeTABS (column) {
            this.typeTABS = column
            if (column.prop == "tab1") {
                this.loading1 = false
            } else if (column.prop == "tab2") {
                //查询当前保安员的从业记录信息
                this.getPractitionersPageInfo()
                this.loading1 = false
            } else if (column.prop == "tab3") {
                //查询当前保安员的现实表现记录
                this.getPerformancePageInfo()
                this.loading2 = false
            } else if (column.prop == "tab4") {
                getER(this.obj0.securitynumber).then((res) => {
                    this.erweima = res.data
                    // console.log(res.data);
                })
            }
        },
        //查询当前保安员的从业记录信息
        this.getPractitionersPageInfo();
        this.loading1 = false;
      } else if (column.prop == "tab3") {
        //查询当前保安员的现实表现记录
        this.getPerformancePageInfo();
        this.loading2 = false;
      } else if (column.prop == "tab4") {
        getER(this.obj0.securitynumber).then((res) => {
          this.erweima = res.data;
          // console.log(res.data);
        });
      }
    },
    //查询当前保安员的从业记录信息
    getPractitionersPageInfo() {
      var param = {
        securityid: this.id,
      };
      //获取用户从业信息
      getExperienceList(this.current, this.size, param).then((res1) => {
        const data = res1.data.data;
        this.page1.total = data.total;
        this.data1 = data.records;
        this.loading1 = false;
      });
    },
    //查询当前保安员的现实表现记录信息
    getPerformancePageInfo() {
      //获取现实表现信息
      var param = {
        securityid: this.id,
      };
      page(this.current, this.size, param).then((res2) => {
        const data = res2.data.data;
        this.page2.total = data.total;
        this.data2 = data.records;
        console.log(this.data2, 1);
        this.loading2 = false;
      });
    },
        getPractitionersPageInfo () {
            var param = {
                securityid: this.id,
            }
            //获取用户从业信息
            getExperienceList(this.current, this.size, param).then((res1) => {
                const data = res1.data.data
                this.page1.total = data.total
                this.data1 = data.records
                this.loading1 = false
            })
        },
        //查询当前保安员的现实表现记录信息
        getPerformancePageInfo () {
            //获取现实表现信息
            var param = {
                securityid: this.id,
            }
            page(this.current, this.size, param).then((res2) => {
                const data = res2.data.data
                this.page2.total = data.total
                this.data2 = data.records
                console.log(this.data2, 1)
                this.loading2 = false
            })
        },

    rowSave2(form, done, loading) {
      form.securityid = this.id;
      add(form).then(
        (res) => {
          this.getPerformancePageInfo(this.page2);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        rowSave2 (form, done, loading) {
            form.securityid = this.id
            add(form).then(
                (res) => {
                    this.getPerformancePageInfo(this.page2)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    window.console.log(error)
                    loading()
                }
            )
            // }
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
      // }
    },
    //从业记录新增
    rowSave1(form, done, loading) {
      form.securityid = this.id;
      addExperience(form).then(
        (res) => {
          this.getPractitionersPageInfo(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        //从业记录新增
        rowSave1 (form, done, loading) {
            form.securityid = this.id
            addExperience(form).then(
                (res) => {
                    this.getPractitionersPageInfo(this.page1)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    window.console.log(error)
                    loading()
                }
            )
            // }
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
      // }
    },
    rowUpdate2(row, index, done, loading) {
      row.securityid = this.id;
      update(row).then(
        () => {
          this.getPerformancePageInfo(this.page2);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        rowUpdate2 (row, index, done, loading) {
            row.securityid = this.id
            update(row).then(
                () => {
                    this.getPerformancePageInfo(this.page2)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    window.console.log(error)
                    loading()
                }
            )
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowUpdate1(row, index, done, loading) {
      row.securityid = this.id;
      updateExperience(row).then(
        () => {
          this.getPractitionersPageInfo(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        rowUpdate1 (row, index, done, loading) {
            row.securityid = this.id
            updateExperience(row).then(
                () => {
                    this.getPractitionersPageInfo(this.page1)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                    done()
                },
                (error) => {
                    window.console.log(error)
                    loading()
                }
            )
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
        rowDel2 (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(row.id)
                })
                .then(() => {
                    this.getPerformancePageInfo(this.page2)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                })
        },
        rowDel1 (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return experienceRemove(row.id)
                })
                .then(() => {
                    this.getPractitionersPageInfo(this.page1)
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    })
                })
        },
        //信息修改
        submit () {
            updateUserInfo(this.obj0).then(() => {
                this.$message({
                    type: "success",
                    message: "操作成功!",
                })
            })
        },
    },
    rowDel2(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
    mounted () {
        this.typeTABS = this.optionTABS.column[0]
        // var data = JSON.parse(this.$route.query.row);
        //查询保安员信息
        console.log(this.userInfo, 456)
        this.id = this.userInfo.Id
        // this.beforeOpen()
        var roleName = this.userInfo.role_name
        // debugger;
        //如果保安，才能看保安证
        if (roleName == "保安") {
            this.isSecurity = true
            this.optionTABS.column = [
                {
                    // icon: "el-icon-info",
                    label: "保安员基本信息",
                    prop: "tab1",
                },
                {
                    // icon: "el-icon-info",
                    label: "从业记录",
                    prop: "tab2",
                },
                {
                    // icon: "el-icon-info",
                    label: "现实表现记录",
                    prop: "tab3",
                },
                {
                    // icon: "el-icon-info",
                    label: "保安员证",
                    prop: "tab4",
                },
            ]
        }
        getUser(this.userInfo.Id).then(res => {
            this.form = res.data.data
            var d = {
                education1: res.data.data.education
            }
            this.form = {
                ...this.form,
                ...d
            }
            if (this.form.userDetail) {
                this.form.userDetailId = this.form.userDetail.id
                this.form.marriageStatus = this.form.userDetail.marriageStatus
                this.form.signLevel = this.form.userDetail.signLevel
                this.form.permanentResidenceAddress = this.form.userDetail.permanentResidenceAddress
                this.form.dwellAddress = this.form.userDetail.dwellAddress
                this.form.memberOfFamily = this.form.userDetail.memberOfFamily
                this.form.educationExperience = this.form.userDetail.educationExperience
                this.form.workExperience = this.form.userDetail.workExperience
                this.form.healthCertificateUrl = this.form.userDetail.healthCertificateUrl
                this.form.noCriminalRecordProveUrl = this.form.userDetail.noCriminalRecordProveUrl
                this.form.acceptancePoliceUnit = this.form.userDetail.acceptancePoliceUnit
                this.form.acceptancePerson = this.form.userDetail.acceptancePerson
                this.form.acceptanceTime = this.form.userDetail.acceptanceTime
                this.form.unitName = this.form.userDetail.unitName
            }
            // this.from["education1"] = res.data.data.education;
            if (this.form.hasOwnProperty("deptId")) {
                this.form.deptId = this.form.deptId
            }
            if (this.form.hasOwnProperty("roleId")) {
                this.form.roleId = this.form.roleId.split(",")
            }
            // if (this.form.hasOwnProperty("postId")) {
            //   this.form.postId = this.form.postId.split(",");
            // }
            var userInfo = res.data.data
            //获取用户从业信息
            getUserPractitionersInfo(userInfo.id).then(res1 => {
                this.form.UserPractitionersInfo = res1.data.data
            })
        })
        .then(() => {
          this.getPerformancePageInfo(this.page2);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    rowDel1(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return experienceRemove(row.id);
        })
        .then(() => {
          this.getPractitionersPageInfo(this.page1);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    //信息修改
    submit() {
      updateUserInfo(this.obj0).then(() => {
        this.$message({
          type: "success",
          message: "操作成功!",
        });
      });
    },
  },
  mounted() {
    this.typeTABS = this.optionTABS.column[0];
    // var data = JSON.parse(this.$route.query.row);
    //查询保安员信息
    console.log(this.userInfo, 456);
    this.id = this.userInfo.Id;
    var roleName = this.userInfo.role_name;
    // debugger;
    //如果保安，才能看保安证
    if (roleName == "保安") {
      this.isSecurity = true;
      this.optionTABS.column = [
        {
          // icon: "el-icon-info",
          label: "保安员基本信息",
          prop: "tab1",
        },
        {
          // icon: "el-icon-info",
          label: "从业记录",
          prop: "tab2",
        },
        {
          // icon: "el-icon-info",
          label: "现实表现记录",
          prop: "tab3",
        },
        {
          // icon: "el-icon-info",
          label: "保安员证",
          prop: "tab4",
        },
      ];
    }
    getUserDetails(this.id).then((res) => {
      console.log(res.data.data, 123);
      var data = res.data.data;
      this.obj0 = data;
    });

    var flag = false,
      i = 0,
      ind = null;
    this.$store.state.tags.tagList.forEach((item, index) => {
      if (item.label == "保安员详情") {
        if (flag == false) {
          ind = index;
          flag = true;
        var flag = false,
            i = 0,
            ind = null
        this.$store.state.tags.tagList.forEach((item, index) => {
            if (item.label == "保安员详情") {
                if (flag == false) {
                    ind = index
                    flag = true
                }
                i++
            }
        })
        if (i > 1) {
            this.$store.state.tags.tagList.splice(ind, 1)
        }
        i++;
      }
    });
    if (i > 1) {
      this.$store.state.tags.tagList.splice(ind, 1);
    }
  },
};
    },
}
</script>

<style lang="scss">
<style lang="scss" scoped>
.dispatch {
  width: 100%;
  height: 100%;
  //   border: 1px solid #000;
  box-sizing: border-box;
    width: 100%;
    height: 100%;
    //   border: 1px solid #000;
    box-sizing: border-box;
}
// .el-card__body {
//   padding-bottom: 5px !important;
// }
// .avue-crud__tip,
// .el-tag,
// .el-tag--light {
//   padding: 0 !important;
// }

.avue-page {
    width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    background: #fff;
    position: relative;

    .printBtn {
        position: absolute;
        bottom: 36px;
        right: -88px;
    }
}

.baoanzheng {
  // position: fixed;
  position: relative;
  // top: 0;
  top: 0;
  // left: -10%;
  left: 0;
  // height: 0;
  width: 100%;
  height: calc(100% - 100px);
  // background-color: rgba(0, 0, 0, 0.5);
  background-color: #fff;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.baz-main {
  position: relative;
  top: 15px;
  // width: 441px;
  // height: 358px;
  width: 750px;
  height: 550px;
  // background-color: #004ca7;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.baz-m-body {
  width: 750px;
  height: 550px;
  background-image: url("/img/register/bazbj.png");
  background-size: 100% 100%;
  .bmb-heard {
    font-size: 4rem;
    width: 100%;
    text-align: center;
    letter-spacing: 1.4rem;
    margin-bottom: 40px;
    padding-left: 10px;
    // position: fixed;
    position: relative;
    top: 20px;
  }
  .img {
    width: calc(358px / 2.3);
    height: calc(441px / 2.3);
    border-radius: 10px;
    position: absolute;
    // border: 1px solid rgba($color: #888888, $alpha: 0.5);
    top: 110px;
    right: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .imgs {
    width: 110px;
    height: 110px;
    border-radius: 10px;
    position: absolute;
    // border: 1px solid rgba($color: #888888, $alpha: 0.5);
    top: 330px;
    right: 103px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .bmb-b {
    padding-left: 20px;
    box-sizing: border-box;
    height: 3.9rem;
    margin-left: 3rem;
    // top: 0;
    top: 0;
    // left: -10%;
    left: 0;
    // height: 0;
    width: 100%;
    font-size: 2rem;
    font-weight: 300;
    .bmb-b-s {
      display: inline-block;
      width: 20rem;
      font-size: 2rem;
      font-weight: 300;
    }
  }
    height: calc(100% - 100px);
    // background-color: rgba(0, 0, 0, 0.5);
    background-color: #fff;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.baz-main {
    position: relative;
    top: 15px;
    // width: 441px;
    // height: 358px;
    width: 750px;
    height: 550px;
    // background-color: #004ca7;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.baz-m-body {
    width: 750px;
    height: 550px;
    background-image: url("/img/register/bazbj.png");
    background-size: 100% 100%;

    .bmb-heard {
        font-size: 4rem;
        width: 100%;
        text-align: center;
        letter-spacing: 1.4rem;
        margin-bottom: 40px;
        padding-left: 10px;
        position: relative;
        top: 20px;
    }

    .img {
        width: calc(358px / 2.3);
        height: calc(441px / 2.3);
        border-radius: 10px;
        position: absolute;
        // border: 1px solid rgba($color: #888888, $alpha: 0.5);
        top: 110px;
        right: 80px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .imgs {
        width: 110px;
        height: 110px;
        border-radius: 10px;
        position: absolute;
        // border: 1px solid rgba($color: #888888, $alpha: 0.5);
        top: 330px;
        right: 103px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .bmb-b {
        padding-left: 20px;
        box-sizing: border-box;
        height: 3.9rem;
        margin-left: 3rem;
        width: 100%;
        font-size: 2rem;
        font-weight: 300;

        .bmb-b-s {
            display: inline-block;
            width: 20rem;
            font-size: 2rem;
            font-weight: 300;
        }
    }
}

.PrintBut {
  margin-top: 15px;
    margin-top: 15px;
}
</style>