zhgdyun/src/views/projectFront/laborManage/personModule/temporary.vue

<template>
  <div class="temporary whiteBlock">
    <div class="placeholder"></div>
    <div class="content">
      <div class="title_wrap flex">
        <el-form :inline="true" class="demo-form-inline" size="medium">
          <el-form-item>
            <!-- icon="el-icon-plus" -->
            <el-button type="primary" @click="addTemporary">{{
              $t("message.laborMange.personnelEntry")
            }}</el-button>
            <el-button type="primary" v-if="false" icon="el-icon-upload"
              >{{$t("message.laborMange.export")}}</el-button
            >
          </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline" size="medium">
          <el-form-item :label='$t("message.laborMange.healthCodeStatus")' v-if="COMPANY == 'nanchang'">
            <el-select v-model="codeState" style="width: 120px">
              <el-option
                :label="$t('message.laborMange.all')"
                value
              ></el-option>
              <el-option :label="$t('message.laborMange.codeless')" value="0"></el-option>
              <el-option :label="$t('message.laborMange.redCode')" value="1"></el-option>
              <el-option :label="$t('message.laborMange.yellowCode')" value="2"></el-option>
              <el-option :label="$t('message.laborMange.greenCode')" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('message.laborMange.compellation')">
            <el-input :placeholder="$t('message.laborMange.placeholder2')" v-model="workerName"></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.laborMange.dateOfEntry')">
            <el-date-picker
              v-model="enterDate"
              type="date"
              :placeholder="$t('message.laborMange.pleaseChoose')"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getInfoList" plain>{{
              $t("message.laborMange.inquire")
            }}</el-button>
            <el-button
              type="warning"
              @click="
                workerName = '';
                enterDate = '';
                enterDate = '';
                codeState = '';
                getInfoList();
              "
              plain
              >{{ $t("message.laborMange.refresh") }}</el-button
            >
            <el-button type="primary" @click="exportFn">{{$t('message.laborMange.export')}}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <vue-scroll style="height: 86%">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: '#E2EBFF' }"
          :show-header="false"
        >
          <el-table-column prop="attendanceNumber" align="center">
            <template slot-scope="scope">
              <div class="flex3" style="padding-left: 20px">
                <img
                  :src="$store.state.FILEURL + scope.row.fieldAcquisitionUrl"
                  style="
                    width: 52px;
                    height: 72px;
                    margin: 0px 15px;
                    cursor: pointer;
                  "
                  @click="handlePreview(scope.row.fieldAcquisitionUrl)"
                />
                <div>
                  <div class="workerName" @click="showDetail(scope.row)">
                    {{ scope.row.workerName }}
                    <el-tag
                      v-if="COMPANY == 'nanchang'"
                      :type="parseCode(scope.row.codeState)[0]"
                      size="small"
                      style="margin-left: 10px"
                      >{{ parseCode(scope.row.codeState)[1] }}</el-tag
                    >
                  </div>
                  <div>
                    <span>{{
                      scope.row.sex == 1
                        ? $t("message.laborMange.man"):
                        scope.row.sex == 2?$t("message.laborMange.female"):''
                    }}</span>
                    <span>{{ scope.row.nation }}</span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="attendanceNumber" align="left">
            <template slot-scope="scope">
              <div>
                {{ $t("message.laborMange.attendanceNumber") }}：{{
                  scope.row.attendanceNumber
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="idCard" align="lfet">
            <template slot-scope="scope">
              <div>
                <div>
                  {{ $t("message.laborMange.IdNumber") }}：{{
                    scope.row.idCard
                  }}
                </div>
                <div>
                  {{ $t("message.laborMange.contactNumber") }}：{{
                    scope.row.phoneNumber
                  }}
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="sex" label="" align="center">
            <template slot-scope="scope">
              <div class="flex" style="width: 40%; margin: auto">
                <div
                  class="flex"
                  style="cursor: pointer"
                  @click="editStaffInfo(scope.row)"
                >
                  <img
                    src="@/assets/images/icon-edit.png"
                    style="margin-right: 8px"
                  />
                  <span>{{ $t("message.laborMange.edit") }}</span>
                </div>
                <div
                  class="flex"
                  style="cursor: pointer"
                  @click="deteleStaffInfo(scope.row)"
                >
                  <img
                    src="@/assets/images/icon-delete.png"
                    style="margin-right: 8px; margin-top: -2px"
                  />
                  <span>{{ $t("message.laborMange.delete") }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </vue-scroll>
      <el-pagination
        class="pagerBox"
        style="margin: 10px 20px 0; text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="Number(total)"
        background
      ></el-pagination>
    </div>

    <!-- 新增 || 编辑 弹框 -->
    <el-dialog
      :modal-append-to-body="false"
      class="temporaryDialog"
      :title="temporaryTitle"
      :visible.sync="temporaryDialog"
      width="1100px"
      :close-on-click-modal="false"
    >
      <div class="dialog_content">
        <el-form
          ref="addForm"
          :rules="rules"
          :model="addForm"
          size="small"
          label-width="100px"
        >
          <el-row :gutter="24">
            <div class="titleStyle flex">
              <span>{{ $t("message.laborMange.essential") }}</span>
            </div>
            <el-col :span="16">
              <el-row :gutter="24">
                <el-col :span="11">
                  <el-form-item
                    :label="$t('message.laborMange.compellation')"
                    prop="workerName"
                  >
                    <el-input
                      v-model="addForm.workerName"
                      style="width: 210px"
                      :disabled="operationType == 'detail'"
                      :placeholder="$t('message.laborMange.placeholder2')"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item
                    :label="$t('message.laborMange.sex')"
                    prop="sex"
                  >
                    <el-radio-group
                      v-model="addForm.sex"
                      :disabled="operationType == 'detail'"
                    >
                      <el-radio :label="1">{{
                        $t("message.laborMange.man")
                      }}</el-radio>
                      <el-radio :label="2">{{
                        $t("message.laborMange.female")
                      }}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="11">
                  <el-form-item
                    :label="$t('message.laborMange.dateOfBirth')"
                    prop="birthday"
                  >
                    <el-date-picker
                      :disabled="operationType == 'detail'"
                      v-model="addForm.birthday"
                      style="width: 210px"
                      type="date"
                      value-format="yyyy-MM-dd"
                      :placeholder="$t('message.laborMange.pleaseSelectADate')"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item
                    :label="$t('message.laborMange.IdNumber2')"
                    prop="idCard"
                  >
                    <el-input
                      :disabled="operationType == 'detail'"
                      v-model="addForm.idCard"
                      style="width: 210px"
                      :placeholder="$t('message.laborMange.placeholder2')"
                      maxlength="18"
                      @input="handleIdCardInput($event)"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="11">
                  <el-form-item
                    :label="$t('message.laborMange.nation')"
                    prop="nation"
                  >
                    <el-select
                      style="width: 210px"
                      v-model="addForm.nation"
                      :placeholder="$t('message.laborMange.pleaseChoose')"
                      :disabled="operationType == 'detail'"
                    >
                      <el-option
                        v-for="item in $t('message.laborMange.nationList')"
                        :key="item.name"
                        :label="item.name"
                        :value="item.name"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item
                    :label="$t('message.laborMange.nativePlace')"
                    prop="nativePlace"
                  >
                    <el-input
                      v-model="addForm.nativePlace"
                      :placeholder="$t('message.laborMange.placeholder2')"
                      style="width: 210px"
                      :disabled="operationType == 'detail'"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="11">
                  <el-form-item
                    :label="$t('message.laborMange.issuingAuthority')"
                    prop="issuingAuthorityForIdcard"
                  >
                    <el-input
                      v-model="addForm.issuingAuthorityForIdcard"
                      :placeholder="$t('message.laborMange.placeholder2')"
                      style="width: 210px"
                      :disabled="operationType == 'detail'"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item
                    :label="$t('message.laborMange.effectiveDate')"
                    prop="idCardEndDate"
                  >
                    <el-date-picker
                      v-model="addForm.idCardEndDate"
                      style="width: 210px"
                      type="date"
                      value-format="yyyy-MM-dd"
                      :placeholder="$t('message.laborMange.pleaseSelectADate')"
                      :disabled="operationType == 'detail'"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="11">
                  <el-form-item
                    :label="$t('message.laborMange.contactNumber')"
                    prop="phoneNumber"
                  >
                    <el-input
                      v-model="addForm.phoneNumber"
                      style="width: 210px"
                      :placeholder="$t('message.laborMange.placeholder2')"
                      oninput="if(value.length>11)value=value.slice(0,11)"
                      type="number"
                      :disabled="operationType == 'detail'"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <!-- <el-form-item label="进场日期" prop="enterDate">
                    <el-date-picker
                      v-model="addForm.enterDate"
                      style="width:210px"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择日期"
                    ></el-date-picker>
                  </el-form-item>-->
                  <el-col :span="12">

                    <!-- <el-form-item
                      :label="$t('message.laborMange.frontAndBackOfIdCard')"
                      prop="idCardUpPhotoUrl"
                    >
                      <div class="flex3" style="width: 160px">
                        <div>
                          <div
                            v-if="personForm.idCardUpPhotoUrl"
                            style="
                              position: relative;
                              width: 60px;
                              height: 38px;
                            "
                          >
                            <img
                              :src="fileUrl + personForm.idCardUpPhotoUrl"
                              style="width: 60px; height: 38px"
                              @click="
                                handlePreview(
                                  fileUrl + personForm.idCardUpPhotoUrl,
                                  0
                                )
                              "
                            />
                            <img
                              v-if="
                                personForm.idCardUpPhotoUrl &&
                                titleType != 'detail'
                              "
                              src="@/assets/images/shut_icon.png"
                              width="15px"
                              height="15px"
                              class="shut_icon"
                              @click="shutIconBtn(2)"
                            />
                          </div>
                          <el-upload
                            v-else
                            class="upload-demo identity_card"
                            :action="uploadUrl"
                            :on-remove="(file) => handleRemove(file, 8)"
                            :on-success="(file) => handleSuccess(file, 8)"
                            :on-error="(file) => handleError(file, 8)"
                            :on-preview="(file) => handlePreview(file, 8)"
                            :beforeUpload="
                              (file) => handleBeforeUpload(file, 8)
                            "
                            name="files"
                            :class="titleType == 'detail' ? 'margin_top35' : ''"
                            :file-list="idCardUpPhotoUrlFile"
                            :disabled="titleType == 'detail'"
                            :show-file-list="false"
                          >
                            <img src="@/assets/images/cockade.png" />
                          </el-upload>
                        </div>
                        <div>
                          <div
                            v-if="personForm.idCardDownPhotoUrl"
                            style="
                              position: relative;
                              width: 60px;
                              height: 38px;
                            "
                          >
                            <img
                              :src="fileUrl + personForm.idCardDownPhotoUrl"
                              style="width: 60px; height: 38px"
                              @click="
                                handlePreview(
                                  fileUrl + personForm.idCardDownPhotoUrl,
                                  0
                                )
                              "
                            />
                            <img
                              v-if="
                                personForm.idCardDownPhotoUrl &&
                                titleType != 'detail'
                              "
                              src="@/assets/images/shut_icon.png"
                              width="15px"
                              height="15px"
                              class="shut_icon"
                              @click="shutIconBtn(3)"
                            />
                          </div>
                          <el-upload
                            v-else
                            class="upload-demo identity_card"
                            :action="uploadUrl"
                            :on-remove="(file) => handleRemove(file, 9)"
                            :on-success="(file) => handleSuccess(file, 9)"
                            :on-error="(file) => handleError(file, 9)"
                            :on-preview="(file) => handlePreview(file, 9)"
                            :beforeUpload="
                              (file) => handleBeforeUpload(file, 9)
                            "
                            name="files"
                            :class="titleType == 'detail' ? 'margin_top35' : ''"
                            :file-list="idCardDownPhotoUrlFile"
                            :disabled="titleType == 'detail'"
                            :show-file-list="false"
                          >
                            <img src="@/assets/images/portrait.png" />
                          </el-upload>
                        </div>
                      </div>
                    </el-form-item> -->
                  </el-col>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8" style="margin: 15px 0 30px">
              <div
                style="text-align: center; margin: -20px 0 8px 0px"
                class="flex"
                v-if="operationType != 'detail'"
              >
                <el-button
                  type="primary"
                  size="medium"
                  @click="getIdCardInfo"
                  >{{ $t("message.laborMange.idCardInformation") }}</el-button
                >
                <el-button
                  type="primary"
                  size="medium"
                  @click="downloadPlugIn"
                  style="background: #09c2aa; border-color: #09c2aa"
                  >{{ $t("message.laborMange.highBeatDownload") }}</el-button
                >
              </div>
              <div class="flex5 uploadImage_wrap">
                <div class="position">
                  <img
                    :src="$store.state.FILEURL + addForm.idCardBigPhotoUrl"
                    v-if="addForm.idCardBigPhotoUrl != ''"
                    style="width: 100px; height: 119px; cursor: pointer"
                    @click="handlePreview(addForm.idCardBigPhotoUrl)"
                  />
                  <img
                    v-else
                    :src="defaultImg"
                    style="width: 100%; height: auto; cursor: pointer"
                  />
                  <img
                    src="@/assets/images/shut_icon.png"
                    style="width: 16px; height: auto"
                    class="shut_icon"
                    v-if="
                      addForm.idCardBigPhotoUrl != '' &&
                      operationType != 'detail'
                    "
                    @click.stop="addForm.idCardBigPhotoUrl = ''"
                  />
                </div>
                <!-- <div class="position">
                  <img
                    :src="$store.state.FILEURL+addForm.fieldAcquisitionUrl"
                    v-if="addForm.fieldAcquisitionUrl!=''"
                    style="width:82px; height:97.5px; cursor: pointer;"
                  />
                  <img v-else :src="defaultImg" style="width:82px; height:auto;cursor: pointer;" />
                  <img
                    src="@/assets/images/shut_icon.png"
                    style="width:15px; height:auto"
                    class="shut_icon"
                    v-if="addForm.fieldAcquisitionUrl!=''"
                    @click="addForm.fieldAcquisitionUrl=''"
                  />
                </div>-->
              </div>
              <div class="flex5" style="margin: 5px 0">
                <span>
                  <!-- <span class="required">*</span> -->
                  <div style="width: 100px;text-align: center;">
                    {{ $t("message.laborMange.IdCardHead") }}
                  </div>
                </span>
                <!-- <span>
                  <span class="required">*</span>现场采集人脸
                </span>-->
              </div>
              <div class="flex5" v-if="operationType != 'detail'">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="$store.state.UPLOADURL"
                  :before-upload="beforeUpload"
                  name="files"
                  :on-success="(file) => uploadSuccess(file, 1)"
                  :show-file-list="false"
                  :disabled="operationType == 'detail'"
                >
                  <el-button slot="trigger" size="medium" type="primary">{{
                    $t("message.laborMange.clickOnTheUpload")
                  }}</el-button>
                </el-upload>
                <!-- <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="$store.state.UPLOADURL"
                  name="files"
                  :before-upload="beforeUpload"
                  :on-success="(file)=>uploadSuccess(file,2)"
                  :show-file-list="false"
                >
                  <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
                </el-upload>-->
              </div>
            </el-col>
            <div class="titleStyle flex">
              <span>{{ $t("message.laborMange.attendanceInfo") }}</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="11">
                <el-form-item
                  :label="$t('message.laborMange.attendanceNumber')"
                  prop="attendanceNumber"
                >
                  <el-input
                    v-model="addForm.attendanceNumber"
                    :placeholder="$t('message.laborMange.placeholder2')"
                    style="width: 210px"
                    :disabled="operationType == 'detail'"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
        <!-- style="margin-left:120px" -->
        <div class="dialog-footer" v-if="operationType != 'detail'">
          <el-button
            size="medium"
            icon="el-icon-circle-close"
            @click="temporaryDialog = false"
            >{{ $t("message.laborMange.cancel") }}</el-button
          >
          <el-button
            icon="el-icon-circle-check"
            type="primary"
            size="medium"
            @click="submitForm('addForm')"
            >{{ $t("message.laborMange.confirm") }}</el-button
          >
        </div>
      </div>
    </el-dialog>

    <!-- 查看大图 -->
    <div
      v-if="bigImageDialog"
      class="bigImageDialog"
      @click="bigImageDialog = false"
    >
      <div class="bigImageContent">
        <img width="auto" height="auto" :src="bigImageUrl" alt />
      </div>
    </div>
  </div>
</template>
<script>
import scroll from "vue-seamless-scroll";
import {
  addWorkerInfo,
  editWorkerInfo,
  deleteWorkerInfo,
  getWorkerInfoList,
} from "@/assets/js/api/laborPerson";
import {
  IdentityCodeValid
} from '@/assets/js/util.js'
export default {
  name: "temporary",
  components: {
    scroll,
  },
  data() {
    return {
      COMPANY: COMPANY,
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      workerName: "",
      enterDate: "",
      codeState: "",
      temporaryDialog: false,
      temporaryTitle: this.$t("message.laborMange.personnelEntry"),
      operationType: "add",
      addForm: {
        personType: 3,
        workerName: "",
        sex: "",
        phoneNumber: "",
        attendanceNumber: "",
        nation: "",
        issuingAuthorityForIdcard: "",
        idCardBigPhotoUrl: "",
        // fieldAcquisitionUrl: "",
        idCardEndDate: "",
        nativePlace: "",
        birthday: "",
        idCard: "",
        // enterDate: "",
      },
      bigImageDialog: false,
      bigImageUrl: "",
      projectSn: "",
      defaultImg: require("../../../../assets/images/profile_photo.png"),
      rules: {
        workerName: [
          {
            required: true,
            message: this.$t("message.laborMange.pleaseInputYourName"),
            trigger: "blur",
          },
        ],
        // sex: [
        //   {
        //     required: true,
        //     message: "请选择性别",
        //     trigger: "submit",
        //   },
        // ],
        idCard: [
          {
            required: true,
            message: this.$t("message.laborMange.pleaseInputYourIdNumber"),
            trigger: "blur",
          },
        ],
        // attendanceNumber: [
        //   {
        //     required: true,
        //     message: this.$t(
        //       "message.laborMange.pleaseInputYourAttendanceNumber"
        //     ),
        //     trigger: "blur",
        //   },
        // ],
        // phoneNumber: [
        //   { required: true, message: "请输入联系电话", trigger: "blur" },
        // ],
        // enterDate: [
        //   { required: true, message: "请选择进场日期", trigger: "blur" },
        // ],
      },
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.getInfoList();
  },
  methods: {
    // 输入框输入后触发(输入身份证号码，自动产生出生日期)
    handleIdCardInput(idCard) {
      // console.log('身份证输入',idCard)
      // 自动产生出生日期
      if (idCard.length >= 14) {
        // const bornStr = idCard.substr(6, 4) + '-' + idCard.substr(10, 2) + '-' + idCard.substr(12, 2)
        // this.addForm.birthday = bornStr
        this.addForm.birthday = this.getBirth(idCard)
      }
  
      // 自动判定性别
      if (idCard.length >= 17) {
        // const sexStr = idCard.substr(16, 1)
        // const sexInt = parseInt(sexStr)
        // if (sexInt % 2 === 0) { // 女
        //   this.form.sex = 2
        // } else { // 男
        //   this.form.sex = 1
        // }
        
        this.addForm.sex = this.getSex(idCard)
      }
    },
    // 获取 出生日期
    getBirth(idCard) {
      var birthday = ''
      if (idCard != null && idCard != '') {
        if (idCard.length == 15) {
          birthday = '19' + idCard.slice(6, 12)
        } else if (idCard.length == 18) {
          birthday = idCard.slice(6, 14)
        }
        birthday = birthday.replace(/(.{4})(.{2})/, '$1-$2-')
        //通过正则表达式来指定输出格式为:1990-01-01
      }
      return birthday
    },
    //获取 性别 男女
    getSex(idCard) {
      var sexStr = ''
      if (parseInt(idCard.slice(-2, -1)) % 2 == 1) {
        sexStr = 1
      } else {
        sexStr = 2
      }
      return sexStr
    },

    parseCode(code) {
      if (code == 0) {
        return ["info", this.$t("message.laborMange.codeless")];
      } else if (code == 1) {
        return ["danger", this.$t("message.laborMange.redCode")];
      } else if (code == 2) {
        return ["warning", this.$t("message.laborMange.yellowCode")];
      } else if (code == 3) {
        return ["success", this.$t("message.laborMange.greenCode")];
      }
    },
    exportFn() {
      window.location.href =
        this.$http.defaults.baseURL +
        "xmgl/download/exporZipWorkerInfo?" +
        "projectSn=" +
        this.projectSn +
        "&workerName=" +
        this.workerName +
        "&personType=3" +
        "&enterDate=" +
        this.enterDate +
        "&codeState=" +
        this.codeState;
    },
    //获取列表信息
    getInfoList() {
      let data = {
        personType: 3,
        projectSn: this.projectSn,
        pageNo: this.page,
        pageSize: this.pageSize,
        workerName: this.workerName,
        enterDate: this.enterDate,
        userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
        codeState: this.codeState,
      };
      getWorkerInfoList(data).then((res) => {
        if (res.code == 200) {
          this.total = res.result.total;
          this.tableData = JSON.parse(JSON.stringify(res.result.records));
          console.log(' this.tableData', this.tableData);
        }
      });
    },

    //人员录入按钮
    addTemporary() {
      this.temporaryTitle = this.$t("message.laborMange.personnelEntry");
      (this.operationType = "add"), (this.temporaryDialog = true);
      this.addForm = {
        personType: 3,
        workerName: "",
        sex: "",
        phoneNumber: "",
        attendanceNumber: "",
        nation: "",
        issuingAuthorityForIdcard: "",
        idCardBigPhotoUrl: "",
        // fieldAcquisitionUrl: "",
        idCardEndDate: "",
        nativePlace: "",
        birthday: "",
        idCard: "",
        // enterDate: "",
      };
    },

    //人员录入   提交
    submitForm(formName) {
      // if (this.addForm.idCardBigPhotoUrl == "") {
      //   this.$message.error(
      //     this.$t("message.laborMange.pleaseUploadYourIDPhoto")
      //   );
      //   return;
      // }
      //身份证校验
      if (!IdentityCodeValid(this.addForm.idCard)) {
        this.$message.error(this.$t('message.laborMange.correctCellIdCard'))
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addForm.projectSn = this.projectSn;
          if (this.operationType == "add") {
            addWorkerInfo(this.addForm).then((res) => {
              if (res.code == 200) {
                this.resetForm(formName);
                this.temporaryDialog = false;
                this.addForm.idCardBigPhotoUrl = "";
                this.getInfoList();
              }
            });
          } else {
            delete this.addForm.addTime;
            editWorkerInfo(this.addForm).then((res) => {
              if (res.code == 200) {
                this.resetForm(formName);
                this.temporaryDialog = false;
                this.addForm.idCardBigPhotoUrl = "";
                this.getInfoList();
              }
            });
          }
        } else {
          return false;
        }
      });
    },

    //编辑人员信息
    editStaffInfo(value) {
      this.temporaryDialog = true;
      this.temporaryTitle = this.$t("message.laborMange.editCrewInfo");
      this.operationType = "edit";
      this.addForm = JSON.parse(JSON.stringify(value));
      console.log(this.addForm.idCardBigPhotoUrl);
    },

    //删除人员信息
    deteleStaffInfo(value) {
      this.$confirm(
        this.$t("message.laborMange.deleteHint"),
        this.$t("message.laborMange.hint"),
        {
          confirmButtonText: this.$t("message.laborMange.confirm"),
          cancelButtonText: this.$t("message.laborMange.cancel"),
          type: "warning",
        }
      )
        .then(() => {
          let data = {
            id: value.id,
          };
          deleteWorkerInfo(data).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: this.$t("message.laborMange.deleteSuccess"),
              });
              this.getInfoList();
            }
          });
        })
        .catch(() => {
          //   this.$message({
          //     type: "info",
          //     message: "已取消删除",
          //   });
        });
    },
    //查看详情
    showDetail(value) {
      this.addForm = {};
      this.addForm = JSON.parse(JSON.stringify(value));
      this.temporaryDialog = true;
      this.temporaryTitle = this.$t("message.laborMange.crewInfoDetail");
      this.operationType = "detail";
    },

    //查看图片
    handlePreview(file) {
      this.bigImageDialog = true;
      this.bigImageUrl = this.$store.state.FILEURL + file;
    },

    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //切换数量
    handleSizeChange(value) {
      this.pageSize = value;
      this.getInfoList();
    },
    handleCurrentChange(value) {
      this.page = value;
      this.getInfoList();
    },
    //上传前
    beforeUpload(file) {
      if (
        file.type != "image/jpeg" &&
        file.type != "image/png" &&
        file.type != "image/jpg" &&
        file.type != "image/bmp"
      ) {
        this.$message.error(this.$t("message.companyDiagram.uploadMsg")); //只能上传图片
        return false;
      } else {
        return true;
      }
    },
    //上传成功
    uploadSuccess(file, type) {
      if (type == 1) {
        this.addForm.idCardBigPhotoUrl = file.data[0].imageUrl;
      } else {
        //   this.addForm.fieldAcquisitionUrl = file.data[0].imageUrl;
      }
    },
    //下载高拍仪插件
    downloadPlugIn() {
      window.open("http://139.159.226.224:9000/itbgp/file/IDCamera1.0.rar");
    },

    //高拍仪获取身份证信息
    getIdCardInfo() {
      var ws = new WebSocket("ws://127.0.0.1:1818");
      this.webSocket = ws;
      ws.onopen = (event) => {
        this.onopen(event);
      };

      ws.onmessage = (event) => {
        this.onmessage(event);
      };

      ws.onerror = this.onerror;
    },
    //发送链接设备请求
    onopen(event) {
      // 识别身份证
      this.webSocket.send("ReadCard(1001,C:\\Doccamera\\)");
    },
    //接收服务器返回的信息
    onmessage(event) {
      //结束通讯
      if (
        event.data.indexOf("BeginbStopPlaytrueEndbStopPlay") >= 0 ||
        event.data.indexOf("BeginbStopPlayfalseEndbStopPlay") >= 0 ||
        event.data.indexOf("BeginbStartPlayfalseEndbStartPlay") >= 0 ||
        event.data.indexOf("BeginbStartPlay2falseEndbStartPlay2") >= 0 ||
        event.data.indexOf("BeginOpenFaceFrametrueEndOpenFaceFrame") >= 0
      ) {
        return;
      }

      if (event.data.indexOf("BeginReadCard") >= 0) {
        //获取身份证信息
        if (event.data == "BeginReadCardEndReadCard") {
          this.$message.error(
            this.$t("message.laborMange.failedToObtainIdentityInformation")
          );
          return;
        } else {
          // 截取掉 多余的字符
          let data = JSON.parse(
            event.data.replace("BeginReadCard", "").replace("EndReadCard", "")
          );
          console.log(data);
          //身份证 人脸照片
          this.uploadFile(data.FrontB64);
          this.addForm.sex = data.Sex == "男" ? 1 : 2;
          this.addForm.workerName = data.Name;
          this.addForm.nation = data.Folk + this.$t("message.laborMange.clan");
          this.addForm.issuingAuthorityForIdcard = data.Agency;
          this.addForm.birthday =
            data.BirthDate.substring(0, 4) +
            "-" +
            data.BirthDate.substring(4, 6) +
            "-" +
            data.BirthDate.substring(6, 8);
          //截取身份证有效日期
          let date = data.Valid.split("-");
          this.addForm.idCardEndDate = date[1] == "长期" ? "" : date[1];
          this.addForm.nativePlace = data.Address;
          this.addForm.idCard = data.IdNo;
        }
      }
    },
    onerror() {
      this.$message.error(this.$t("message.laborMange.failedToConnectDevice"));
    },

    //上传现场采集照片发到服务器
    uploadFile(url) {
      let param = new FormData(); //创建form对象
      param.append("base64Image", "data:image/jpeg;base64," + url); //通过append向form对象添加数据
      this.$http({
        url: "/upload/uploadBase64",
        method: "post",
        data: param,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      }).then((res) => {
        if ((res.status = "SUCCESS")) {
          this.addForm.idCardBigPhotoUrl = res.data.data.imageUrl;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex2 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.flex3 {
  display: flex;
  align-items: center;
}
.flex4 {
  display: flex;
  justify-content: space-between;
}
.flex5 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.temporary {
  // width: 100%;
  height: auto;
  .placeholder {
    width: 100%;
    height: 41px;
    border-bottom: 1px solid #e6e6e6;
  }
  .content {
    padding: 15px 0;
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 42px);
  }
  .title_wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    border-bottom: 2px solid @borderColor;
  }
  .titleStyle {
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    margin: -15px 0 30px;
    background: #ededed;
    padding: 10px 15px;
    box-sizing: border-box;
  }
  .el-button--small {
    height: 32px;
  }
  .uploadImage_wrap {
    margin: 10px 0 0 0;
    .position {
      position: relative;
    }
    .shut_icon {
      position: absolute;
      top: -11px;
      right: -11px;
      z-index: 100;
      margin: 5px;
      cursor: pointer;
    }
  }
  .required {
    color: #f56c6c;
  }
  .workerName {
    color: #5181f6;
    font-size: 18px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .bigImageDialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 1000000;
    overflow-y: auto;
    // padding-bottom: 50px;
    height: 100%;
    .bigImageContent {
      height: 100%;
      margin: 0 auto;
      text-align: center;
    }
    img {
      // margin-top: 10%;
      position: relative;
      top: 10%;
      max-height: 80%;
      max-width: 80%;
    }
  }
}
</style>