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="请选择业务员类型">
                    <el-option key="1" value="0" label="个代"></el-option>
                    <el-option key="2" value="1" label="渠道"></el-option>
                    <el-option key="3" value="2" label="团队"></el-option>
                    <el-option key="4" value="3" 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="deptId" label="所属团队">
                  <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="请填写姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="mobile" label="手机号">
                  <el-input 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 disabled v-model="operationForm.organization"></el-input>
<!--                  <el-cascader style="width: 100%" v-model="operationForm.organization" placeholder="请选择所属机构" :options="option" :props="cascaderProps"></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"
                    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"
                    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 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="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="" label="身份证（人像面）" label-width="150">
              <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="" label="身份证（国徽面）" label-width="150">
              <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 api from "@/api";
import { ElMessage } from "element-plus";

interface OperationFormProps extends AddOperation {
  organization: string
  leaderNumber: string,
  referrerNumber: string,
  address?: string[],
  id?: string
}

let emits = defineEmits(['closeDialog'])
let option = ref([])
const OperationFormRef = ref<FormInstance>()
// 添加/编辑业务员表单
let operationForm = ref<OperationFormProps>({
  typeAttr: '',
  deptId: '',
  organizationId: '',
  name: '',
  mobile: '',
  identity: '',
  identityTimeStart: '',
  identityTimeEnd: '',
  leaderId: '',
  leaderNumber: '',
  referrerId: '',
  referrerNumber: '',

  sex: null,
  birthday: null,
  nations: null,
  koseki: null,
  maritalStatus: null,
  politicsStatus: null,
  health: null,
  province: null,
  city: null,
  district: null,
  address: [],
  liveAddress: null,
  postalCode: null,
  education: null,
  graduationTime: null,
  school: null,
  isComputer: null,
  emergencyContactName: null,
  emergencyContactTel: null,
  salary: null,
  salaryLevel: null,
  bankCardId: null,
  bankName: null,

  sfz1: null,
  sfz2: null,
  qualification: null,
  contract: null,
  applicant: null,
  salaryTable: null,
  leaveTable: null
})
// 机构数据渲染格式
const cascaderProps = {
  value: 'id',
  label: 'name',
  children: 'children'
}
// 添加/编辑业务员表单校验
const operationRules = ref<FormRules>({
  typeAttr: [
    { required: true, trigger: "change", message: "请选择业务员类型" }
  ],
  deptId: [
    { required: true, trigger: "change", message: "请选择所属团队" }
  ],
  name: [
    { required: true, trigger: "blur", message: "请填写姓名" }
  ],
  mobile: [
    { required: true, trigger: "blur", message: "请填写手机号" },
    {
      pattern: /^1[345678][0-9]{9}$/,
      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: "change", message: "请选择管理人" }
  ],
  leaderNumber: [
    { required: true, trigger: "blur", message: "请填写管理人工号" }
  ],
  referrerId: [
    { required: true, trigger: "change", message: "请选择推荐人" }
  ],
  referrerNumber: [
    { required: true, trigger: "blur", 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('')

// 编辑时初始化数据
// 编辑的id
let editId = ref('')
const initEditData = (id) => {
  if(id) {
    editId.value = id
    api.operationApi.operationDetail(id).then(res => {
      if(res?.code == 200) {
        let formData = res.data
        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)
      } 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([])
const getUser = (id) => {
  api.operationApi.getUser(id).then(res => {
    if(res?.code == 200) {
      userList.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) {
        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 {
        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']
  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;
  });
}

// 团队数据
let teamList = ref([])
const getTeamList = async () => {
  const { code, data, msg } = await api.teamApi.teamList({})
  if(code == 200) {
    teamList.value = data
  } else {
    ElMessage({
      message: msg,
      type: 'warning'
    })
  }
}
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)
}

// 初始化银行数据
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'
      })
    }
  })
}

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

defineExpose({
  initEditData
})


</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;
  }
}
</style>