tenant-Platform/src/views/operationManagement/modules/addOperation.vue

<template>
  <div>
    <el-form
      :model="operationForm"
      ref="OperationFormRef"
      :rules="operationRules"
      label-width="120"
    >
      <el-descriptions title="基本信息">
        <el-descriptions-item>
          <template #default>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="typeAttr" label="业务员类型">
                  <el-select v-model="operationForm.typeAttr" placeholder="请选择业务员类型" @change="typeAttrChange">
                    <el-option key="1" value="6" label="个代"></el-option>
                    <el-option key="2" value="8" label="渠道"></el-option>
                    <el-option key="3" value="5" label="团队"></el-option>
                    <el-option key="4" value="7" label="电销组"></el-option>
                    <!--<el-option key="1" value="1" label="前线人员"></el-option>
                    <el-option key="2" value="2" label="后线人员"></el-option>
                    <el-option key="3" value="3" label="合伙人"></el-option>
                    <el-option key="4" value="4" label="工作室管理员"></el-option>
                    <el-option key="5" value="5" label="团队"></el-option>
                    <el-option key="6" value="6" label="个代"></el-option>
                    <el-option key="7" value="7" label="电销"></el-option>
                    <el-option key="8" value="8" label="渠道"></el-option>-->
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="organizationId" label="所属团队" v-if="operationForm.typeAttr!='6'">
                  <el-select v-model="operationForm.organizationId" placeholder="请选择所属团队" @change="deptChange">
                    <el-option v-for="item in teamList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="name" label="姓名">
                  <el-input v-model="operationForm.name" placeholder="请填写姓名" maxlength="20"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="mobile" label="手机号">
                  <el-input type="number" oninput="if(value.length>11)value=value.slice(0,11)" v-model="operationForm.mobile" placeholder="请填写手机号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="organization" label="所属机构">
                  <el-input v-if="operationForm.typeAttr!='6'" disabled v-model="operationForm.organization"></el-input>
                  <el-cascader v-else style="width: 100%" v-model="operationForm.organization" placeholder="请选择所属机构" :options="deptOption" :props="optionProps" @change="deptIdChange"></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="identity" label="证件号">
                  <el-input v-model="operationForm.identity" placeholder="请填写身份证号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="identityTimeStart" label="证件有效期始">
                  <el-date-picker
                    v-model="operationForm.identityTimeStart"
                    type="date"
                    placeholder="请选择"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :disabled-date="disabledDateStart"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="identityTimeEnd" label="证件有效期止">
                  <el-date-picker
                    v-model="operationForm.identityTimeEnd"
                    type="date"
                    placeholder="请选择"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :disabled-date="disabledDateEnd"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="其他信息">
        <el-descriptions-item>
          <template #default>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="leaderId" label="管理人">
                  <el-select v-model="operationForm.leaderId" filterable placeholder="请选择管理人" @change="(e) => {operationForm.leaderNumber = e}">
                    <el-option v-for="(item, index) in userList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="leaderNumber" label="管理人工号">
                  <el-input readonly v-model="operationForm.leaderNumber" placeholder="请填写管理人工号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="referrerId" label="推荐人">
                  <el-select v-model="operationForm.referrerId" filterable placeholder="请选择推荐人" @change="(e) => {operationForm.referrerNumber = e}">
                    <el-option v-for="(item, index) in recommendList" :key="item.id" :value="item.id" :label="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="referrerNumber" label="推荐人工号">
                  <el-input readonly v-model="operationForm.referrerNumber" placeholder="请填写推荐人工号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="资料附件">
        <el-descriptions-item>
          <template #default>
            <el-form-item prop="IDCardFront" label-width="150">
              <template #label>
                <span style="color: #f56c6c">*</span>身份证（人像面）
              </template>
              <el-upload action="" v-if="!IDCardFront" :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 1)">
                <el-button link type="primary">上传</el-button>
              </el-upload>
              <div class="fileInfo" v-else>
                <div class="fileName">{{ IDCardFrontName }}</div>
                <div class="fileBtn">
                  <el-upload :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 1)" style="display: flex; align-items: center">
                    <el-icon class="btn-icon"><Upload /></el-icon>
                  </el-upload>
                  <el-icon class="btn-icon" @click="imageView(1)"><View /></el-icon>
                  <el-icon class="btn-icon" @click="downloadImage(1)"><Download /></el-icon>
                  <el-icon class="btn-icon" @click="deleteImage(1)"><Delete /></el-icon>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="IDCardBack" label-width="150">
              <template #label>
                <span style="color: #f56c6c">*</span>身份证（国徽面）
              </template>
              <el-upload v-if="!IDCardBack" :auto-upload="false"  :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 2)">
                <el-button link type="primary">上传</el-button>
              </el-upload>
              <div class="fileInfo" v-else>
                <div class="fileName">{{ IDCardBackName }}</div>
                <div class="fileBtn">
                  <el-upload :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 2)" style="display: flex; align-items: center">
                    <el-icon class="btn-icon"><Upload /></el-icon>
                  </el-upload>
                  <el-icon class="btn-icon" @click="imageView(2)"><View /></el-icon>
                  <el-icon class="btn-icon" @click="downloadImage(2)"><Download /></el-icon>
                  <el-icon class="btn-icon" @click="deleteImage(2)"><Delete /></el-icon>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="" label="展业资格证" label-width="150">
              <el-upload :auto-upload="false" v-if="!certification"  :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 3)">
                <el-button link type="primary">上传</el-button>
              </el-upload>
              <div class="fileInfo" v-else>
                <div class="fileName">{{ certificationName }}</div>
                <div class="fileBtn">
                  <el-upload :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 3)" style="display: flex; align-items: center">
                    <el-icon class="btn-icon"><Upload /></el-icon>
                  </el-upload>
                  <el-icon class="btn-icon" @click="imageView(3)"><View /></el-icon>
                  <el-icon class="btn-icon" @click="downloadImage(3)"><Download /></el-icon>
                  <el-icon class="btn-icon" @click="deleteImage(3)"><Delete /></el-icon>
                </div>
              </div>
            </el-form-item>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <el-divider />
      <el-button v-if="!recordShow" link type="primary" icon="plus" @click="recordShow = !recordShow">填写人事档案（选填）</el-button>
      <el-button v-else link type="primary" icon="ArrowUp" @click="recordShow = !recordShow">收起人事档案（选填）</el-button>
      <br/><br/>
      <el-descriptions title="个人信息" v-show="recordShow">
        <el-descriptions-item>
          <template #default>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="sex" label="性别">
                  <el-select v-model="operationForm.sex" placeholder="请选择性别">
                    <el-option v-for="item in options[0]" :key="item.value" :value="item.value" :label="item.label"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="birthday" label="出生日期">
                  <el-date-picker
                    v-model="operationForm.birthday"
                    type="date"
                    placeholder="请选择"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="nations" label="民族">
                  <el-select v-model="operationForm.nations" placeholder="请选择业务员类型">
                    <el-option v-for="item in options[1]" :key="item.value" :value="item.value" :label="item.label"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="koseki" label="户籍">
                  <el-input v-model="operationForm.koseki" placeholder="请填写户籍"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="maritalStatus" label="婚姻状况">
                  <el-select v-model="operationForm.maritalStatus" placeholder="请选择婚姻状况">
                    <el-option v-for="item in options[2]" :key="item.value" :value="item.value" :label="item.label"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="politicsStatus" label="政治面貌">
                  <el-select v-model="operationForm.politicsStatus" placeholder="请选择政治面貌">
                    <el-option v-for="item in options[3]" :key="item.value" :value="item.value" :label="item.label"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="health" label="健康状况">
                  <el-select v-model="operationForm.health" placeholder="请选择健康状况">
                    <el-option v-for="item in options[4]" :key="item.value" :value="item.value" :label="item.label"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="address" label="居住地区">
                  <el-cascader
                    clearable
                    style="width: 100%"
                    v-model="operationForm.address"
                    :options="areaOptions"
                    :props="areaProps"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="liveAddress" label="详细地址">
                  <el-input v-model="operationForm.liveAddress" placeholder="请填写详细地址"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="postalCode" label="邮政编码">
                  <el-input v-model="operationForm.postalCode" placeholder="请填写邮政编码"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="学历信息" v-show="recordShow">
        <el-descriptions-item>
          <template #default>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="education" label="学历">
                  <el-select v-model="operationForm.education" placeholder="请选择学历">
                    <el-option v-for="item in options[5]" :key="item.value" :value="item.value" :label="item.label"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="graduationTime" label="毕业时间">
                  <el-date-picker
                    v-model="operationForm.graduationTime"
                    type="date"
                    placeholder="请选择"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="school" label="毕业院校">
                  <el-input v-model="operationForm.school" placeholder="请填写毕业院校"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="isComputer" label="是否计算机专业">
                  <el-select v-model="operationForm.isComputer" placeholder="请选择是否计算机专业">
                    <el-option key="1" value="1" label="是"></el-option>
                    <el-option key="0" value="0" label="否"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="紧急联系人信息" v-show="recordShow">
        <el-descriptions-item>
          <template #default>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="emergencyContactName" label="姓名">
                  <el-input v-model="operationForm.emergencyContactName" placeholder="请填写姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="emergencyContactTel" label="手机号">
                  <el-input v-model="operationForm.emergencyContactTel" placeholder="请填写手机号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="工资信息" v-show="recordShow">
        <el-descriptions-item>
          <template #default>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="salary" label="工资">
                  <el-input v-model="operationForm.salary" placeholder="请填写工资"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="salaryLevel" label="工资等级">
                  <el-input v-model="operationForm.salaryLevel" placeholder="请填写工资等级"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="bankCardId" label="银行卡号">
                  <el-input v-model="operationForm.bankCardId" placeholder="请填写银行卡号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="bankName" label="开户行">
                  <el-select v-model="operationForm.bankName" placeholder="请选择开户行">
                    <el-option v-for="item in bankOption" :key="item.id" :value="item.id" :label="item.label"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <el-divider v-show="recordShow" />
      <el-descriptions v-show="recordShow" title="其它附件">
        <el-descriptions-item>
          <template #default>
            <el-form-item prop="" label="劳动合同" label-width="150">
              <el-upload v-if="!contract" :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 4)">
                <el-button link type="primary">上传</el-button>
              </el-upload>
              <div class="fileInfo" v-else>
                <div class="fileName">{{ contractName }}</div>
                <div class="fileBtn">
                  <el-upload :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 4)" style="display: flex; align-items: center">
                    <el-icon class="btn-icon"><Upload /></el-icon>
                  </el-upload>
                  <el-icon class="btn-icon" @click="imageView(4)"><View /></el-icon>
                  <el-icon class="btn-icon" @click="downloadImage(4)"><Download /></el-icon>
                  <el-icon class="btn-icon" @click="deleteImage(4)"><Delete /></el-icon>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="" label="应聘表" label-width="150">
              <el-upload v-if="!applicant" :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 5)">
                <el-button link type="primary">上传</el-button>
              </el-upload>
              <div class="fileInfo" v-else>
                <div class="fileName">{{ applicantName }}</div>
                <div class="fileBtn">
                  <el-upload :auto-upload="false"  :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 5)" style="display: flex; align-items: center">
                    <el-icon class="btn-icon"><Upload /></el-icon>
                  </el-upload>
                  <el-icon class="btn-icon" @click="imageView(5)"><View /></el-icon>
                  <el-icon class="btn-icon" @click="downloadImage(5)"><Download /></el-icon>
                  <el-icon class="btn-icon" @click="deleteImage(5)"><Delete /></el-icon>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="" label="定薪表" label-width="150">
              <el-upload :auto-upload="false" v-if="!decidePay"  :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 6)">
                <el-button link type="primary">上传</el-button>
              </el-upload>
              <div class="fileInfo" v-else>
                <div class="fileName">{{ decidePayName }}</div>
                <div class="fileBtn">
                  <el-upload :auto-upload="false"  :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 6)" style="display: flex; align-items: center">
                    <el-icon class="btn-icon"><Upload /></el-icon>
                  </el-upload>
                  <el-icon class="btn-icon" @click="imageView(6)"><View /></el-icon>
                  <el-icon class="btn-icon" @click="downloadImage(6)"><Download /></el-icon>
                  <el-icon class="btn-icon" @click="deleteImage(6)"><Delete /></el-icon>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="" label="离职表" label-width="150">
              <el-upload :auto-upload="false" v-if="!dimission"  :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 7)">
                <el-button link type="primary">上传</el-button>
              </el-upload>
              <div class="fileInfo" v-else>
                <div class="fileName">{{ dimissionName }}</div>
                <div class="fileBtn">
                  <el-upload :auto-upload="false"  :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 7)" style="display: flex; align-items: center">
                    <el-icon class="btn-icon"><Upload /></el-icon>
                  </el-upload>
                  <el-icon class="btn-icon" @click="imageView(7)"><View /></el-icon>
                  <el-icon class="btn-icon" @click="downloadImage(7)"><Download /></el-icon>
                  <el-icon class="btn-icon" @click="deleteImage(7)"><Delete /></el-icon>
                </div>
              </div>
            </el-form-item>
          </template>
        </el-descriptions-item>
      </el-descriptions>
      <div style="display: flex; justify-content: flex-end">
        <el-button @click="onSubmit(OperationFormRef, 0)">取消</el-button>
        <el-button type="primary" @click="onSubmit(OperationFormRef, 1)">确定</el-button>
      </div>
    </el-form>
    <div class="image-view" v-if="imageShow" @click="imageShow = false">
      <img :src="imageUrl" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, onMounted } from 'vue'
import type { AddOperation } from '@/api/modules/operation.ts'
import type { FormRules, FormInstance } from "element-plus";
import { Plus } from '@element-plus/icons-vue'
import api from "@/api";
import { ElMessage } from "element-plus";

interface OperationFormProps extends AddOperation {
  organization: string
  organizationId: string,
  leaderNumber: string,
  referrerNumber: string,
  address?: string[],
  id?: string,
  // [key: string]: any;
}

let emits = defineEmits(['closeDialog'])
let option = ref([])
const OperationFormRef = ref<FormInstance>()
// 添加/编辑业务员表单
let operationForm = ref<OperationFormProps>({
  typeAttr: '',
  deptId: '',
  name: '',
  mobile: '',
  identity: '',
  identityTimeStart: '',
  identityTimeEnd: '',
  leaderId: '',
  referrerId: '',
  sex: '',
  birthday: '',
  nations: '',
  koseki: '',
  maritalStatus: '',
  politicsStatus: '',
  health: '',
  province: '',
  city: '',
  district: '',
  liveAddress: '',
  postalCode: '',
  education: '',
  graduationTime: '',
  school: '',
  isComputer: '',
  emergencyContactName: '',
  emergencyContactTel: '',
  salary: '',
  salaryLevel: '',
  bankCardId: '',
  bankName: '',
  sfz1: '',
  sfz2: '',
  qualification: '',
  contract: '',
  applicant: '',
  salaryTable: '',
  leaveTable: '',
  organizationId: '',
  organization: '',
  leaderNumber: '',
  referrerNumber: '',
  address: [],
})
// 机构数据渲染格式
const cascaderProps = {
  value: 'id',
  label: 'name',
  children: 'children'
}
// 添加/编辑业务员表单校验
const operationRules = ref<FormRules>({
  typeAttr: [
    { required: true, trigger: "change", message: "请选择业务员类型" }
  ],
  organizationId: [
    { required: true, trigger: "change", message: "请选择所属团队" }
  ],
  name: [
    { required: true, trigger: "blur", message: "请填写姓名" }
  ],
  mobile: [
    { required: true, trigger: "blur", message: "请填写手机号" },
    {
      pattern: /^1[0-9]{10}$/,
      message: '请填写正确的手机号',
      trigger: 'blur'
    }
  ],
  organization: [
    { required: true, trigger: "change", message: "请选择所属机构" }
  ],
  identity: [
    { required: true, trigger: "blur", message: "请填写证件号" },
    {
      pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/,
      message: '请填写正确的身份证号',
      trigger: 'blur'
    }
  ],
  identityTimeStart: [
    { required: true, trigger: "change", message: "请选择证件有效期始" }
  ],
  identityTimeEnd: [
    { required: true, trigger: "change", message: "请选择证件有效期止" }
  ],
  leaderId: [
    { required: true, trigger: "blur", message: "请选择管理人" }
  ],
  leaderNumber: [
    { required: true, trigger: "blur", message: "请填写管理人工号" }
  ],
  referrerId: [
    { required: true, trigger: "blur", message: "请选择推荐人" }
  ],
  referrerNumber: [
    { required: true, trigger: "blur", message: "请填写推荐人工号" }
  ],
  // IDCardFront: [
  //   { required: true, trigger: "change", message: "请上传身份（人像面）" }
  // ],
  // IDCardBack: [
  //   { required: true, trigger: "change", message: "请上传身份（国徽面）" }
  // ],
  bankCardId: [
    {
      pattern: /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/,
      message: '请填写正确的银行卡号',
      trigger: 'blur'
    }
  ],
  emergencyContactTel: [
    {
      pattern: /^1[34578][0-9]{9}$/,
      message: '请填写正确的手机号',
      trigger: 'blur'
    }
  ],
  postalCode: [
    {
      pattern: /^\d{6}$/,
      message: '请填写正确的邮政编码',
      trigger: 'blur'
    }
  ]
})
// 身份证人像面
let IDCardFrontName = ref('')
let IDCardFront = ref('')
// 身份证国徽面
let IDCardBackName = ref('')
let IDCardBack = ref('')
// 展业资格证
let certificationName = ref('')
let certification = ref('')
// 劳务合同
let contractName = ref('')
let contract = ref('')
// 应聘表
let applicantName = ref('')
let applicant = ref('')
// 定薪表
let decidePayName = ref('')
let decidePay = ref('')
// 离职表
let dimissionName = ref('')
let dimission = ref('')
// 图片预览地址
let imageShow = ref(false)
let imageUrl = ref('')

// 限制证件日期
const disabledDateStart = (time: Date) => {
  return time.getTime() > new Date()
}
const disabledDateEnd = (time: Date) => {
  return time.getTime() < new Date(operationForm.value.identityTimeStart)
}

// 编辑时初始化数据
// 编辑的id
let editId = ref('')
const initEditData = (id, ids) => {
  if(ids) {
    editId.value = id
    api.operationApi.operationDetail(ids).then(res => {
      if(res?.code == 200) {
        let formData = res.data
        initTeamData(formData?.typeAttr==='5'?'1':formData?.typeAttr==='8'?'2':formData?.typeAttr==='7'?'3':'')
        operationForm.value = formData
        operationForm.value.organization = formData.deptName
        operationForm.value.deptId = formData.deptId
        operationForm.value.leaderNumber = formData.leaderId
        operationForm.value.referrerNumber = formData.referrerId
        let address = []
        if(formData.province&&formData.city&&formData.district) {
          address = [formData.province, formData.city, formData.district]
        }
        if(formData.province&&!formData.city&&!formData.district) {
          address = [formData.province]
        }
        if(formData.fileList) {
          let sfz1 = formData.fileList.find(item => item.fileType == 'sfz1')
          let sfz2 = formData.fileList.find(item => item.fileType == 'sfz2')
          let qualification = formData.fileList.find(item => item.fileType == 'qualification')
          let contractImg = formData.fileList.find(item => item.fileType == 'contract')
          let applicantImg = formData.fileList.find(item => item.fileType == 'applicant')
          let salaryTable = formData.fileList.find(item => item.fileType == 'salary')
          let leaveTable = formData.fileList.find(item => item.fileType == 'leave')
          if(sfz1) {
            operationForm.value.sfz1 = sfz1.id
            IDCardFrontName.value = sfz1.fileName
            IDCardFront.value = sfz1.fileUrl
          }
          if(sfz2) {
            operationForm.value.sfz2 = sfz2.id
            IDCardBackName.value = sfz2.fileName
            IDCardBack.value = sfz2.fileUrl
          }
          if(qualification) {
            operationForm.value.qualification = qualification.id
            certificationName.value = qualification.fileName
            certification.value = qualification.fileUrl
          }
          if(contractImg) {
            operationForm.value.contract = contract.id
            contractName.value = contractImg.fileName
            contract.value = contractImg.fileUrl
          }
          if(applicantImg) {
            operationForm.value.applicant = applicant.id
            applicantName.value = applicantImg.fileName
            applicant.value = applicantImg.fileUrl
          }
          if(salaryTable) {
            operationForm.value.salaryTable = salaryTable.id
            decidePayName.value = salaryTable.fileName
            decidePay.value = salaryTable.fileUrl
          }
          if(leaveTable) {
            operationForm.value.leaveTable = leaveTable.id
            dimissionName.value = leaveTable.fileName
            dimission.value = leaveTable.fileUrl
          }
        }
        operationForm.value.address = address
        getUser(operationForm.value.deptId)
        getRecommend(operationForm.value.deptId)
      } else {
        ElMessage({
          message: res.msg,
          type: 'warning'
        })
      }
    })
  }
}

// 上传接口
let postUrl = ref(`${import.meta.env.VITE_APP_API_BASEURL}/file/upload`)
// 上传图片
const uploadImage = async (file, type) => {
  let files = file.raw
  const params = new FormData(); // 声明formData数据类型
  params.append("file", files);
  params.append("type", "image");
  const { code, data, msg } = await api.commonApi.fileUpload(params)
    if(code == 200) {
      let result = {...data}
      switch (type) {
        case 1:
          IDCardFrontName.value = result.fileName
          IDCardFront.value = result.downloadUrl
          operationForm.value.sfz1 = result.id
          break;
        case 2:
          IDCardBackName.value = result.fileName
          IDCardBack.value = result.downloadUrl
          operationForm.value.sfz2 = result.id
          break;
        case 3:
          certificationName.value = result.fileName
          certification.value = result.downloadUrl
          operationForm.value.qualification = result.id
          break;
        case 4:
          contractName.value = result.fileName
          contract.value = result.downloadUrl
          operationForm.value.contract = result.id
          break;
        case 5:
          applicantName.value = result.fileName
          applicant.value = result.downloadUrl
          operationForm.value.applicant = result.id
          break;
        case 6:
          decidePayName.value = result.fileName
          decidePay.value = result.downloadUrl
          operationForm.value.salaryTable = result.id
          break;
        case 7:
          dimissionName.value = result.fileName
          dimission.value = result.downloadUrl
          operationForm.value.leaveTable = result.id
          break;
      }
    } else {
      ElMessage({
        message: msg,
        type: 'error'
      })
    }
}

// 人事档案
let recordShow = ref(false)

// 图片预览
const imageView = (type) => {
  imageShow.value = true
  switch (type) {
    case 1:
      imageUrl.value = IDCardFront.value
      break;
    case 2:
      imageUrl.value = IDCardBack.value
      break;
    case 3:
      imageUrl.value = certification.value
      break;
    case 4:
      imageUrl.value = contract.value
      break;
    case 5:
      imageUrl.value = applicant.value
      break;
    case 6:
      imageUrl.value = decidePay.value
      break;
    case 7:
      imageUrl.value = dimission.value
      break;
  }
}

// 图片下载
const download = (url, name) => {
  let image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function () {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
    let a = document.createElement("a"); // 生成一个a元素
    let event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  }
  image.src = url
}
const downloadImage = (type) => {
  switch (type) {
    case 1:
      download(IDCardFront.value,IDCardFrontName.value)
      break;
    case 2:
      download(IDCardBack.value,IDCardBackName.value)
      break;
    case 3:
      download(certification.value,certificationName.value)
      break;
    case 4:
      download(contract.value,contractName.value)
      break;
    case 5:
      download(applicant.value,applicantName.value)
      break;
    case 6:
      download(decidePay.value,decidePayName.value)
      break;
    case 7:
      download(dimission.value,dimissionName.value)
      break;
  }
}
// 图片删除
const deleteImage = (type) => {
  switch (type) {
    case 1:
      IDCardFront.value = ''
      IDCardFrontName.value = ''
      break;
    case 2:
      IDCardBack.value = ''
      IDCardBackName.value = ''
      break;
    case 3:
      certification.value = ''
      certificationName.value = ''
      break;
    case 4:
      contract.value = ''
      contractName.value = ''
      break;
    case 5:
      applicant.value = ''
      applicantName.value = ''
      break;
    case 6:
      decidePay.value = ''
      decidePayName.value = ''
      break;
    case 7:
      dimission.value = ''
      dimissionName.value = ''
      break;
  }
}
// 管理人/推荐人
let userList = ref([])
let recommendList = ref([])
const getUser = (id) => {
  api.operationApi.getUser({
    id: id
  }).then(res => {
    if(res?.code == 200) {
      userList.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
const getRecommend = (id) => {
  api.operationApi.getUser({
    id: id,
    typeAttr: 2
  }).then(res => {
    if(res?.code == 200) {
      recommendList.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
// 确定
const onSubmit = async (OperationFormRef: FormInstance, type: number) => {
  if(!OperationFormRef) {
    emits('closeDialog', '取消')
    recordShow.value = false
    OperationFormRef.resetFields()
    return
  }
  if(type) {
    await OperationFormRef.validate((valid, error) => {
      if(valid) {
        if(IDCardFront.value&&IDCardBack.value) {
          let formData = {...operationForm.value}
          // formData.organization = operationForm.value.organization[operationForm.value.organization.length - 1]
          formData.systemCode = localStorage.getItem('login_system')?localStorage.getItem('login_system'):''
          formData.province = operationForm.value.address?operationForm.value.address[0]:''
          formData.city = operationForm.value.address?operationForm.value.address[1]?operationForm.value.address[1]:'':''
          formData.district = operationForm.value.address?operationForm.value.address[2]?operationForm.value.address[2]:'':''
          if(editId.value) {
            api.operationApi.updateOperation(formData).then(res => {
              if(res.code == 200) {
                ElMessage({
                  message: res.msg,
                  type: 'success'
                })
                emits('closeDialog', '确定')
              } else {
                ElMessage({
                  message: res.msg,
                  type: 'error'
                })
              }
              IDCardFrontName.value = ''
              IDCardFront.value = ''
              IDCardBackName.value = ''
              IDCardBack.value = ''
              certificationName.value = ''
              certification.value = ''
              contractName.value = ''
              contract.value = ''
              applicantName.value = ''
              applicant.value = ''
              decidePayName.value = ''
              decidePay.value = ''
              dimissionName.value = ''
              dimission.value = ''
              recordShow.value = false
              OperationFormRef.resetFields()
              emits('closeDialog', '取消')
            })
          } else {
            api.operationApi.addOperation(formData).then(res => {
              if(res.code == 200) {
                ElMessage({
                  message: res.msg,
                  type: 'success'
                })
                emits('closeDialog', '确定')
              } else {
                ElMessage({
                  message: res.msg,
                  type: 'error'
                })
              }
              IDCardFrontName.value = ''
              IDCardFront.value = ''
              IDCardBackName.value = ''
              IDCardBack.value = ''
              certificationName.value = ''
              certification.value = ''
              contractName.value = ''
              contract.value = ''
              applicantName.value = ''
              applicant.value = ''
              decidePayName.value = ''
              decidePay.value = ''
              dimissionName.value = ''
              dimission.value = ''
              recordShow.value = false
              OperationFormRef.resetFields()
              emits('closeDialog', '取消')
            })
          }
        } else {
          ElMessage({
            message: '请上传必传附件！',
            type: 'warning'
          })
        }
      } else {
        Object.keys(error).forEach((key,i)=>{
          if(i==0){
            const firstFiled = error[key][0].field
            OperationFormRef.scrollToField(firstFiled)
          }
        })
        ElMessage({
          message: '请正确填写相关信息！',
          type: 'warning'
        })
      }
    })
  } else {
    IDCardFrontName.value = ''
    IDCardFront.value = ''
    IDCardBackName.value = ''
    IDCardBack.value = ''
    certificationName.value = ''
    certification.value = ''
    contractName.value = ''
    contract.value = ''
    applicantName.value = ''
    applicant.value = ''
    decidePayName.value = ''
    decidePay.value = ''
    dimissionName.value = ''
    dimission.value = ''
    recordShow.value = false
    emits('closeDialog', '取消')
    OperationFormRef.resetFields()
  }
}

// 初始化个人信息
let options = ref([])
const initInfo = () => {
/*
* 性别        gender
  民族        nation
  婚姻状况        marriage
  政治面貌        political_status
  健康状况        health_status
  学历        educational
* */
  let infoList = ['gender', 'nation', 'marriage', 'political_status', 'health_status', 'educational', 'team']
  infoList.forEach((item: string, index: number) => {
    api.commonApi.personInfo(item).then((res) => {
      if(res?.code == 200) {
        options.value[index] = [...res.data]
      } else {
        ElMessage({
          message: res.msg,
          type: 'warning'
        })
      }
    })
  })
}
// 获取地区数据
const areaOptions = ref([]);
const areaProps = ref({
  value: "areaCode",
  label: "areaCname",
  children: "child",
});
const getArea = () => {
  api.areaApi.areaList({}).then((res) => {
    areaOptions.value = res.data;
  });
}

// 团队数据
const initTeamData = async (e) => {
  const { code, data, msg } = await api.teamApi.teamList({
    attribute: e,
    param: ''
  })
  if(code == 200) {
    teamList.value = data
  } else {
    ElMessage({
      message: msg,
      type: 'warning'
    })
  }
}

let teamList = ref([])
const typeAttrChange = async (e) => {
  operationForm.value.organization = ''
  operationForm.value.leaderId = ''
  operationForm.value.leaderNumber = ''
  operationForm.value.referrerId = ''
  operationForm.value.referrerNumber = ''
  operationForm.value.organizationId = ''
  if(e != '6') {
    initTeamData(e==='5'?'1':e==='8'?'2':e==='7'?'3':'')
  } else {
    institutionList();
  }
}

// 团队切换
const deptChange = (e) => {
  const obj = teamList.value.find(item => item.id == e)
  operationForm.value.organization = obj.deptName
  operationForm.value.deptId = obj.deptId
  getUser(obj.deptId)
  getRecommend(obj.deptId)
}
// 机构切换
const deptIdChange = (e) => {
  if(e) {
    operationForm.value.deptId = e[e.length - 1]
    getUser(e[e.length - 1])
    getRecommend(e[e.length - 1])
  }
}

// 初始化银行数据
let bankOption = ref([])
const initBankCard = () => {
  api.commonApi.personInfo('bank_info').then(res => {
    if(res.code == 200) {
      bankOption.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

let deptOption = ref([])
const optionProps = {
  value: 'id',
  label: 'name',
  children: 'children',
  checkStrictly: true,
}
// 获取机构数据
const institutionList = () => {
  api.institutionApi.institutionList({ name: '', system: '' }).then(res => {
    if(res?.code == 200) {
      deptOption.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}

onMounted(() => {
  initInfo()
  getArea()
  initBankCard()
})

defineExpose({
  initEditData,
  operationForm
})


</script>

<style scoped lang="scss">
.fileInfo{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2px 20px;
  border-radius: 5px;
  margin: 0 10px;
  &:hover{
    background: #ccc;
  }
  .fileName{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fileBtn{
    display: flex;
    align-items: center;
    .btn-icon{
      margin: 0 10px;
      font-size: 16px;
      cursor: pointer;
      &:hover{
        color: #00a0f4;
      }
    }
  }
}
.image-view{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  img{
    width: 800px;
    height: 800px;
    border-radius: 5px;
  }
}
:deep(.el-input__inner[type=number]::-webkit-outer-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}
:deep(.el-input__inner[type=number]::-webkit-inner-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}
:deep(.el-input__inner[type=number]) {
  -moz-appearance: textfield;
}

</style>