tenant-Platform/src/views/partnerManagement/modules/addPartner.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="grade" label="合伙人等级">
                  <el-select v-model="operationForm.gradeList" :disabled="editId" placeholder="请选择合伙人等级" multiple
                    @change="handleGradeChange">
                    <el-option v-for="item in userGradeList" :key="item.grade" :value="item.grade"
                      :label="item.gradeName"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="上级推荐人" :prop="mingrade == 1 ? '' : 'referrerId'">
                  <el-select v-model="operationForm.referrerId" filterable
                    :disabled="!operationForm.gradeList || operationForm.gradeList.includes('1') || editId" placeholder="请选择上级推荐人"
                    @focus="searchRecommend" @change="handleReferrerChange">
                    <el-option v-for="item in referrerList" :key="item.userId" :value="item.userId" :label="item.name">
                      <span>{{ item.name }}-</span>
                      <span> {{ item.mobile }}-</span>
                      <span class="typeAttrMap mr-1" v-for="typeAttritem in typeAttrMap(item.typeAttr)"
                        :key="typeAttritem">{{ typeAttritem }}</span>
                    </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="text" :maxlength="11" :disabled="editId" show-word-limit v-model="operationForm.mobile"
                    placeholder="请填写手机号" @input="mobileInput"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item prop="deptId" label="所属机构">
                  <el-cascader style="width: 100%" v-model="operationForm.deptId" :disabled="editId || disabledProperty"
                    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 recommendList" :key="index" :value="item.id"
                      :label="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="leaderId" label="管理人工号">
                  <el-input disabled v-model="operationForm.leaderId" 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="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" icon="Upload">上传</el-button>
              </el-upload>
              <div class="fileInfo" v-else>
                <div class="file-box">
                  <div class="btn-top">
                    <img class="image-close" @click="deleteImage(1)" src="@/assets/images/close.png" />
                    <!--                    <el-icon class="btn-icon"><Delete /></el-icon>-->
                  </div>
                  <img class="file-img" :src="IDCardFront" />
                  <div class="btn-bottom">
                    <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg"
                      @change="uploadImage($event, 1)"
                      style="display: flex; align-items: center; justify-content: center; color: white">
                      <el-icon>
                        <Upload />
                      </el-icon>重新上传
                    </el-upload>
                    <div class="width-50"
                      style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;"
                      @click="downloadImage(1)">
                      <el-icon>
                        <Download />
                      </el-icon>下载资料
                    </div>
                  </div>
                </div>
                <!--                <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" icon="Upload">上传</el-button>
              </el-upload>
              <div class="fileInfo" v-else>
                <div class="file-box">
                  <div class="btn-top">
                    <img class="image-close" @click="deleteImage(2)" src="@/assets/images/close.png" />
                    <!--                    <el-icon class="btn-icon"><Delete /></el-icon>-->
                  </div>
                  <img class="file-img" :src="IDCardBack" />
                  <div class="btn-bottom">
                    <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg"
                      @change="uploadImage($event, 2)"
                      style="display: flex; align-items: center; justify-content: center; color: white">
                      <el-icon>
                        <Upload />
                      </el-icon>重新上传
                    </el-upload>
                    <div class="width-50"
                      style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;"
                      @click="downloadImage(2)">
                      <el-icon>
                        <Download />
                      </el-icon>下载资料
                    </div>
                  </div>
                </div>
                <!--                <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" icon="Upload">上传</el-button>
              </el-upload>
              <div class="fileInfo" v-else>
                <div class="file-box">
                  <div class="btn-top">
                    <img class="image-close" @click="deleteImage(3)" src="@/assets/images/close.png" />
                    <!--                    <el-icon class="btn-icon"><Delete /></el-icon>-->
                  </div>
                  <img class="file-img" :src="certification" />
                  <div class="btn-bottom">
                    <el-upload class="width-50" :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg"
                      @change="uploadImage($event, 3)"
                      style="display: flex; align-items: center; justify-content: center; color: white">
                      <el-icon>
                        <Upload />
                      </el-icon>重新上传
                    </el-upload>
                    <div class="width-50"
                      style="display: flex; align-items: center; justify-content: center; color: white; cursor:pointer;"
                      @click="downloadImage(3)">
                      <el-icon>
                        <Download />
                      </el-icon>下载资料
                    </div>
                  </div>
                </div>
                <!--                <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, .pdf, .doc, .docx" @change="uploadImage($event, 4)">
                <el-button link type="primary" icon="Upload">上传</el-button>
              </el-upload>
              <div class="fileInfo" v-else>
                <img style="width: 40px; height: 40px"
                  :src="contractName.includes('.png') || contractName.includes('.jpg') || contractName.includes('.jpeg') ? image : contractName.includes('.pdf') ? pdf : contractName.includes('.doc') || contractName.includes('.docx') ? word : ''" />
                <div class="fileName">{{ contractName }}</div>
                <div class="fileBtn">
                  <el-upload :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
                    @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, .pdf, .doc, .docx" @change="uploadImage($event, 5)">
                <el-button link type="primary" icon="Upload">上传</el-button>
              </el-upload>
              <div class="fileInfo" v-else>
                <img style="width: 40px; height: 40px"
                  :src="applicantName.includes('.png') || applicantName.includes('.jpg') || applicantName.includes('.jpeg') ? image : applicantName.includes('.pdf') ? pdf : applicantName.includes('.doc') || applicantName.includes('.docx') ? word : ''" />
                <div class="fileName">{{ applicantName }}</div>
                <div class="fileBtn">
                  <el-upload :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
                    @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, .pdf, .doc, .docx" @change="uploadImage($event, 6)">
                <el-button link type="primary" icon="Upload">上传</el-button>
              </el-upload>
              <div class="fileInfo" v-else>
                <img style="width: 40px; height: 40px"
                  :src="decidePayName.includes('.png') || decidePayName.includes('.jpg') || decidePayName.includes('.jpeg') ? image : decidePayName.includes('.pdf') ? pdf : decidePayName.includes('.doc') || decidePayName.includes('.docx') ? word : ''" />
                <div class="fileName">{{ decidePayName }}</div>
                <div class="fileBtn">
                  <el-upload :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
                    @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, .pdf, .doc, .docx" @change="uploadImage($event, 7)">
                <el-button link type="primary" icon="Upload">上传</el-button>
              </el-upload>
              <div class="fileInfo" v-else>
                <img style="width: 40px; height: 40px"
                  :src="dimissionName.includes('.png') || dimissionName.includes('.jpg') || dimissionName.includes('.jpeg') ? image : dimissionName.includes('.pdf') ? pdf : dimissionName.includes('.doc') || dimissionName.includes('.docx') ? word : ''" />
                <div class="fileName">{{ dimissionName }}</div>
                <div class="fileBtn">
                  <el-upload :auto-upload="false" :show-file-list="false" accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
                    @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>-->
    <el-dialog title="图片预览" v-model="imageShow">
      <img class="image-view" :src="imageUrl" />
    </el-dialog>
    <el-dialog title="文件预览" v-model="fileShow">
      <vue-office-docx :src="fileUrl" style="height: 600px; margin: 0; padding: 0"></vue-office-docx>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, } from 'vue'
import type { FormRules, FormInstance } from "element-plus";
import VueOfficeDocx from "@vue-office/docx";
import api from "@/api";
import { ElMessage } from "element-plus";
import image from '@/assets/images/image.png'
import word from '@/assets/images/word.png'
import pdf from '@/assets/images/pdf.png'
// 计算属性：根据等级列表获取等级名称

// 获取人员等级列表
// 机构是否可选
const disabledProperty = ref(false);//机构是否可选
const mingrade = ref();//最小等级
const userGradeList = ref<any[]>([]);//用户等级列表
const referrerList = ref<any[]>([]);//上级推荐人列表
const getGradeOptions = () => {
  api.partnerApi.queryGradeName().then((res: any) => {
    if (res.code === 200) {
      userGradeList.value = res.data;
    }
  })
}
// 手机号查询上级推荐人
const searchRecommend = () => {
  api.partnerApi.selectByUserNameAndMobile(Number(mingrade.value - 1)).then((res: any) => {
    if (res.code === 200) {
      referrerList.value = res.data;
    } else {
      ElMessage.error(res.msg);
    }
  })
}
// 处理等级变化
const handleGradeChange = (val: any) => {
  mingrade.value = getMinValueFromStrArray(val)
  console.log(mingrade.value)
}

const typeAttrMap = (val: string): string => {
  // 定义类型映射表
  const map: any = {
    '6': '个代',
    '7': '渠道',
    '5': '团队',
    '8': '电销组',
    '3': '合伙人',
  };
  if (!val) return '';
  const typeCodes = val.split(',');
  const result = typeCodes.map((code: any) => {
    return map[code] || code;
  });
  return result as any;
};
// 处理上级推荐人变化
const handleReferrerChange = (val: any) => {
  let info = referrerList.value.find((item: any) => item.userId == val)
  operationForm.referrerName = info.name;
  operationForm.deptId = info.deptId;
  if (info.deptId) {
    disabledProperty.value = true;
  }
  getRecommend(info.deptId)//获取机构下管理人列表
}
const mobileInput = (val: any) => {
  if (val.length >= 11) {
    api.partnerApi.selectByMobile(val).then((res: any) => {
      if (res.code === 200) {
        console.log(operationForm)
        // 只合并res.data中存在且不为空的值
        if (res.data) {
          Object.keys(res.data).forEach(key => {
            const value = res.data[key];
            // 只合并非null、非undefined的值
            if (value !== null && value !== undefined) {
              operationForm[key] = value;
            }
          });
          operationForm.deptId = res.data.deptId;
          if (res.data.deptId) {
            disabledProperty.value = true;
          }
          getRecommend(res.data.deptId)
        }
      } else {
        ElMessage.error('未查询到该业务员信息');
      }
    })
  }
}































let emits = defineEmits(['closeDialog'])
const OperationFormRef = ref<FormInstance>()
// 添加/编辑业务员表单
let operationForm = reactive({
  gradeList: '',//合伙人等级列表
  typeAttr: '',
  deptId: '',
  name: '',
  mobile: '',
  identity: '',
  identityTimeStart: '',
  identityTimeEnd: '',
  leaderId: '',
  referrerId: '',
  referrerName: '',//上级推荐人姓名
  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: "请选择业务员类型" }
  ],
  name: [
    { required: true, trigger: "blur", message: "请填写姓名" }
  ],
  mobile: [
    { required: true, trigger: "blur", message: "请填写手机号" },
    {
      pattern: /^1[0-9]{10}$/,
      message: '请填写正确的手机号',
      trigger: 'blur'
    }
  ],
  deptId: [
    { 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: "请选择管理人" }
  ],

  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('')
// word
let fileShow = ref(false)


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

// 编辑时初始化数据
// 编辑的id
let editId = ref()
const initEditData = (id: any) => {
    editId.value = id
    api.operationApi.operationDetail(id).then((res: any) => {
      if (res?.code == 200) {
        let formData = res.data
        Object.assign(operationForm, formData)
        console.log(operationForm)
        mingrade.value = getMinValueFromStrArray(formData.gradeList)
        searchRecommend();//编辑回显查询上级推荐人列表
        operationForm.deptId = formData.deptId
        let address = [] as any
        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: any) => item.fileType == 'sfz1')
          let sfz2 = formData.fileList.find((item: any) => item.fileType == 'sfz2')
          let qualification = formData.fileList.find((item: any) => item.fileType == 'qualification')
          let contractImg = formData.fileList.find((item: any) => item.fileType == 'contract')
          let applicantImg = formData.fileList.find((item: any) => item.fileType == 'applicant')
          let salaryTable = formData.fileList.find((item: any) => item.fileType == 'salary')
          let leaveTable = formData.fileList.find((item: any) => item.fileType == 'leave')
          if (sfz1) {
            operationForm.sfz1 = sfz1.id
            IDCardFrontName.value = sfz1.fileName
            IDCardFront.value = sfz1.fileUrl
          }
          if (sfz2) {
            operationForm.sfz2 = sfz2.id
            IDCardBackName.value = sfz2.fileName
            IDCardBack.value = sfz2.fileUrl
          }
          if (qualification) {
            operationForm.qualification = qualification.id
            certificationName.value = qualification.fileName
            certification.value = qualification.fileUrl
          }
          if (contractImg) {
            operationForm.contract = contractImg.id
            contractName.value = contractImg.fileName
            contract.value = contractImg.fileUrl
          }
          if (applicantImg) {
            operationForm.applicant = applicantImg.id
            applicantName.value = applicantImg.fileName
            applicant.value = applicantImg.fileUrl
          }
          if (salaryTable) {
            operationForm.salaryTable = salaryTable.id
            decidePayName.value = salaryTable.fileName
            decidePay.value = salaryTable.fileUrl
          }
          if (leaveTable) {
            operationForm.leaveTable = leaveTable.id
            dimissionName.value = leaveTable.fileName
            dimission.value = leaveTable.fileUrl
          }
        }
        operationForm.address = address
        getUser(operationForm.deptId)
        getRecommend(operationForm.deptId)
      } else {
        ElMessage({
          message: res.msg,
          type: 'warning'
        })
      }
    })
}

// 新增数据初始化
const initAddData = () => {
  Object.assign(operationForm, {
    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: [],
  })
  IDCardFrontName.value = ''
  IDCardFront.value = ''
  IDCardBackName.value = ''
  IDCardBack.value = ''
  certificationName.value = ''
  certification.value = ''
  contractName.value = ''
  contract.value = ''
  applicantName.value = ''
  applicant.value = ''
  decidePayName.value = ''
  decidePay.value = ''
}

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

// 人事档案
let recordShow = ref(false)
let fileUrl = ref('')
// word预览
const filePreview = (file: any) => {
  nextTick(() => {
    fileUrl.value = file
  })
}

// 图片预览
const imageView = (type: any) => {
  switch (type) {
    case 1:
      imageShow.value = true
      imageUrl.value = IDCardFront.value
      break;
    case 2:
      imageShow.value = true
      imageUrl.value = IDCardBack.value
      break;
    case 3:
      imageShow.value = true
      imageUrl.value = certification.value
      break;
    case 4:
      imageUrl.value = contract.value
      nextTick(() => {
        // loadPdf(contract.value)
        if (contract.value.includes('.pdf')) {
          window.open(contract.value, '_blank')
        } else if (contract.value.includes('.doc') || contract.value.includes('.docx')) {
          fileShow.value = true
          nextTick(() => {
            filePreview(contract.value)
          })
        } else if (contract.value.includes('.jpg') || contract.value.includes('.jpeg') || contract.value.includes('.png')) {
          imageShow.value = true
        }
      })
      break;
    case 5:
      imageUrl.value = applicant.value
      nextTick(() => {
        // loadPdf(applicant.value)
        if (applicant.value.includes('.pdf')) {
          window.open(applicant.value, '_blank')
        } else if (applicant.value.includes('.doc') || applicant.value.includes('.docx')) {
          fileShow.value = true
          filePreview(applicant.value)
        } else if (applicant.value.includes('.jpg') || applicant.value.includes('.jpeg') || applicant.value.includes('.png')) {
          imageShow.value = true
        }
      })
      break;
    case 6:
      imageUrl.value = decidePay.value
      nextTick(() => {
        // loadPdf(decidePay.value)
        if (decidePay.value.includes('.pdf')) {
          window.open(decidePay.value, '_blank')
        } else if (decidePay.value.includes('.doc') || decidePay.value.includes('.docx')) {
          fileShow.value = true
          filePreview(decidePay.value)
        } else if (decidePay.value.includes('.jpg') || decidePay.value.includes('.jpeg') || decidePay.value.includes('.png')) {
          imageShow.value = true
        }
      })
      break;
    case 7:
      imageUrl.value = dimission.value
      nextTick(() => {
        // loadPdf(dimission.value)
        if (dimission.value.includes('.pdf')) {
          window.open(dimission.value, '_blank')
        } else if (dimission.value.includes('.doc') || dimission.value.includes('.docx')) {
          fileShow.value = true
          filePreview(dimission.value)
        } else if (dimission.value.includes('.jpg') || dimission.value.includes('.jpeg') || dimission.value.includes('.png')) {
          imageShow.value = true
        }
      })
      break;
  }
}



// 图片下载
const download = (url: any, name: any) => {
  let a_link = document.createElement('a') as any
  fetch(url).then((res: any) => res.blob())
    .then((blob: any) => {
      // 将链接地址字符内容转变成blob地址
      a_link.href = URL.createObjectURL(blob)
      console.log(a_link.href)
      a_link.download = name //下载的文件的名字
      document.body.appendChild(a_link)
      a_link.click()
    })
  // 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: any) => {
  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: any) => {
  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: any) => {
  api.operationApi.getUser({
    id: id
  }).then((res: any) => {
    if (res?.code == 200) {
      userList.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
// 推荐人
const getRecommend = (id: any) => {
  api.operationApi.getUser({
    id: id,
    typeAttr: 2
  }).then((res: any) => {
    if (res.code == 200) {
      recommendList.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}
// 确定
const onSubmit = async (OperationFormRef: any, type: any) => {
  console.log(operationForm)
  if (!OperationFormRef) {
    emits('closeDialog', '取消')
    recordShow.value = false
    OperationFormRef.resetFields()
    return
  }
  if (type) {
    await OperationFormRef.validate((valid: any, error: any) => {
      if (valid) {
        if (IDCardFront.value && IDCardBack.value) {
          let formData = { ...operationForm }
          // formData.organization = operationForm.value.organization[operationForm.value.organization.length - 1]
          formData.systemCode = localStorage.getItem('login_system') ? localStorage.getItem('login_system') : ''
          formData.province = operationForm.address ? operationForm.address[0] : ''
          formData.city = operationForm.address ? operationForm.address[1] ? operationForm.address[1] : '' : ''
          formData.district = operationForm.address ? operationForm.address[2] ? operationForm.address[2] : '' : ''
          if (editId.value) {
            api.operationApi.updateOperation(formData).then((res: any) => {
              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 {
            console.log(formData)
            api.partnerApi.saveByPartner({
              ...formData,
            }).then((res: any) => {
              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()
  }
}
const getMinValueFromStrArray = (strArray: string[]): number | null => {
  // 检查数组是否为空
  if (!strArray || strArray.length === 0) {
    console.warn('数组为空');
    return null;
  }

  try {
    // 将字符串转换为数字
    const numArray = strArray.map(str => {
      const num = Number(str);
      // 检查是否为有效数字
      if (isNaN(num)) {
        throw new Error(`字符串 "${str}" 无法转换为数字`);
      }
      return num;
    });

    // 获取最小值
    const minValue = Math.min(...numArray);
    return minValue;
  } catch (error) {
    console.error('获取最小值失败:', error);
    return null;
  }
};
// 初始化个人信息
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: any) => {
      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: any) => {
  const { code, data, msg }: any = await api.teamApi.teamList({
    attribute: e,
    param: ''
  })
  if (code == 200) {
    teamList.value = data
  } else {
    ElMessage({
      message: msg,
      type: 'warning'
    })
  }
}

let teamList = ref([])
// 机构切换
const deptIdChange = (e: any) => {
  if (e) {
    operationForm.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: any) => {
    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: any) => {
    if (res?.code == 200) {
      deptOption.value = res.data
    } else {
      ElMessage({
        message: res.msg,
        type: 'warning'
      })
    }
  })
}


onMounted(() => {
  initInfo()
  getArea()
  initBankCard()
  institutionList()
  getGradeOptions()//获取用户等级列表
})

defineExpose({
  initEditData,
  operationForm,
  initAddData
})


</script>

<style scoped lang="scss">
.typeAttrMap {
  padding: 2px 4px;
  box-sizing: border-box;
  background-color: #00a0f4;
  color: #fff;
  border-radius: 3px;
}

.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;
      }
    }
  }

  .file-box {
    position: relative;

    .btn-top {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      position: absolute;
      top: 0;
      left: 0;

      .image-close {
        display: block;
        width: 12px;
        height: 12px;
      }
    }

    .file-img {
      display: block;
      width: 208px;
      height: 130px;
      border-radius: 5px;
    }

    .btn-bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      height: 24px;
      width: 100%;
      background: url("@/assets/images/btn-bg.png") no-repeat;
      background-size: 100% 100%;

      .width-50 {
        width: 50%;
      }
    }
  }

}

.image-view {
  display: block;
  width: 400px;
  height: 260px;
  border-radius: 5px;
  margin: 0 auto;
}

: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;
}

:deep(.vue-office-docx-main) {
  height: 600px;
  overflow-y: auto;
}

:deep(.docx-wrapper) {
  background: white;
}
</style>