tenant-Platform/src/views/personnel/modules/memberMessage.vue

<template>
  <div class="message-info">
    <div class="error"></div>
    <div style=" box-sizing: border-box; padding: 15px;background-color: #fff;">
      <el-row :gutter="24">
        <el-col :span="20">
          <div style="display: flex; align-items: center;">
            <div class="img-title">
              {{ pinyin.getFullChars(operationForm.name).substring(0, 1) }}
            </div>
            <h4>{{ operationForm.name }}</h4>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="editMember">编辑</el-button>
          <el-dropdown style="margin-left: 15px;">
            <el-button type="primary"> 更多 </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-on:click="changeDept()"
                  >变更机构</el-dropdown-item
                >
                <el-dropdown-item v-on:click="resign()">操作离职</el-dropdown-item>
                <el-dropdown-item v-on:click="transfer()"
                  >资源转移</el-dropdown-item
                >
                <el-dropdown-item v-on:click="delUser()">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="18">
          <el-descriptions title="" class="info-list" :column="2">
            <el-descriptions-item label="工号:">{{
              operationForm.userId
            }}</el-descriptions-item>
            <el-descriptions-item label="手机号:">{{
              operationForm.mobile
            }}</el-descriptions-item>
            <el-descriptions-item label="所在机构:">
              {{ operationForm.deptName }}
            </el-descriptions-item>
            <el-descriptions-item label="角色:">
              {{ operationForm.deptName }}
            </el-descriptions-item>
            <el-descriptions-item label="创建人:">
              {{ operationForm.createBy }}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间:">
              {{ operationForm.createTime }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="6">
          <h2>
            {{
              statusList
                .map((item) => {
                  return item.value == operationForm.status ? item.label : "";
                })
                .join("")
            }}
          </h2>
          <p>状态</p>
        </el-col>
      </el-row>
    </div>
    <el-form
      :model="operationForm"
      ref="OperationFormRef"
      label-width="120"
      style=" box-sizing: border-box; padding: 20px;background-color: #fff;"
    >
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="基本信息" name="first">
          <el-descriptions title="个人信息">
            <el-descriptions-item>
              <template #default>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item prop="name" label="姓名:">
                      {{ operationForm.name }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="mobile" label="手机号:">
                      {{ operationForm.mobile }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item prop="deptId" label="所属机构:">
                      {{ operationForm.deptName || "--" }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="identity" label="证件号:">
                      {{ operationForm.identity }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item
                      prop="identityTimeStart"
                      label="证件有效期始:"
                    >
                      {{ operationForm.identityTimeStart }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="identityTimeEnd" label="证件有效期止:">
                      {{ operationForm.identityTimeEnd }}
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item prop="sex" label="性别:">
                      {{
                        genderList
                          .map((item) => {
                            return item.value == operationForm.sex
                              ? item.label
                              : "";
                          })
                          .join("")
                      }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="born" label="出生日期:">
                      {{ operationForm.birthday }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item prop="type" label="民族:">
                      {{
                        nation
                          .map((item) => {
                            return item.value == operationForm.nations
                              ? item.label
                              : "";
                          })
                          .join("")
                      }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="team" label="户籍:">
                      {{ operationForm.koseki }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item prop="type" label="婚姻状况:">
                      {{
                        marriage
                          .map((item) => {
                            return item.value == operationForm.maritalStatus
                              ? item.label
                              : "";
                          })
                          .join("")
                      }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="team" label="政治面貌:">
                      {{
                        political_status
                          .map((item) => {
                            return item.value == operationForm.politicsStatus
                              ? item.label
                              : "";
                          })
                          .join("")
                      }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item prop="type" label="健康状况:">
                      {{
                        health_status
                          .map((item) => {
                            return item.value == operationForm.health
                              ? item.label
                              : "";
                          })
                          .join("")
                      }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="team" label="居住地区:">
                      <!-- <el-select
                    v-model="operationForm.address"
                    placeholder="请选择居住地区"
                  >
                    <el-option key="1" value="团队1"></el-option>
                  </el-select> -->
                      {{ operationForm.region || "--" }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item prop="team" label="详细地址:">
                      {{ operationForm.liveAddress }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="team" label="邮政编码:">
                      {{ operationForm.postalCode }}
                    </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="24">
                  <el-col :span="12">
                    <el-form-item prop="sex" label="学历:">
                      {{
                        educational
                          .map((item) => {
                            return item.value == operationForm.education
                              ? item.label
                              : "";
                          })
                          .join("")
                      }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="born" label="毕业时间:">
                      {{ operationForm.graduationTime }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item prop="type" label="毕业院校:">
                      {{ operationForm.school }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="team" label="是否计算机专业:">
                      {{ operationForm.isComputer }}
                    </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="24">
                  <el-col :span="12">
                    <el-form-item prop="team" label="姓名:">
                      {{ operationForm.emergencyContactName }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="team" label="手机号:">
                      {{ operationForm.emergencyContactTel }}
                    </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="24">
                  <el-col :span="12">
                    <el-form-item prop="team" label="工资:">
                      {{ operationForm.salary }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="team" label="工资等级:">
                      {{ operationForm.salaryLevel }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item prop="team" label="银行卡号:">
                      {{ operationForm.bankCardId }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item prop="team" label="开户行:">
                      {{ operationForm.bankName }}
                    </el-form-item>
                  </el-col>
                </el-row>
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="资料附件" name="second">
          <el-descriptions v-show="recordShow" title="资料附件">
            <el-descriptions-item>
              <template #default>
                <el-form-item
                  prop=""
                  label="身份证（人像面）"
                  label-width="150"
                  label-position="left"
                >
                  <el-upload
                    :auto-upload="false"
                    v-if="!IDCardFront"
                    action="#"
                    :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
                        :auto-upload="false"
                        action="#"
                        :show-file-list="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"><Download /></el-icon>
                      <el-icon class="btn-icon"><Delete /></el-icon>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item
                  prop=""
                  label="身份证（国徽面）"
                  label-width="150"
                  label-position="left"
                >
                  <el-upload
                    :auto-upload="false"
                    v-if="!IDCardBack"
                    action="#"
                    :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"
                        action="#"
                        :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"><Download /></el-icon>
                      <el-icon class="btn-icon"><Delete /></el-icon>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item
                  prop=""
                  label="银行卡"
                  label-width="150"
                  label-position="left"
                >
                  <el-upload
                    :auto-upload="false"
                    v-if="!bankSize"
                    action="#"
                    :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">{{ bankName }}</div>
                    <div class="fileBtn">
                      <el-upload
                        :auto-upload="false"
                        action="#"
                        :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"><Download /></el-icon>
                      <el-icon class="btn-icon"><Delete /></el-icon>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item
                  prop=""
                  label="劳动合同"
                  label-width="150"
                  label-position="left"
                >
                  <el-upload
                    :auto-upload="false"
                    v-if="!contract"
                    action="#"
                    :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"
                        action="#"
                        :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"><Download /></el-icon>
                      <el-icon class="btn-icon"><Delete /></el-icon>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item
                  prop=""
                  label="应聘表"
                  label-width="150"
                  label-position="left"
                >
                  <el-upload
                    :auto-upload="false"
                    v-if="!applicant"
                    action="#"
                    :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"
                        action="#"
                        :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"><Download /></el-icon>
                      <el-icon class="btn-icon"><Delete /></el-icon>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item
                  prop=""
                  label="定薪表"
                  label-width="150"
                  label-position="left"
                >
                  <el-upload
                    :auto-upload="false"
                    v-if="!decidePay"
                    action="#"
                    :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"
                        action="#"
                        :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"><Download /></el-icon>
                      <el-icon class="btn-icon"><Delete /></el-icon>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item
                  prop=""
                  label="离职表"
                  label-width="150"
                  label-position="left"
                >
                  <el-upload
                    :auto-upload="false"
                    v-if="!dimission"
                    action="#"
                    :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"
                        action="#"
                        :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"><Download /></el-icon>
                      <el-icon class="btn-icon"><Delete /></el-icon>
                    </div>
                  </div>
                </el-form-item>
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>

      <!-- <div style="display: flex; justify-content: flex-end">
        <el-button @click="onSubmit(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
      v-model="dialogVisible"
      :title="leave?'操作离职':'资源转移'"
      width="800"
      draggable
      append-to-body
    >
      <el-row :gutter="24">
        <el-col :span="20">
          <div style="display: flex; align-items: center;">
            <div class="img-title">
              {{ pinyin.getFullChars(operationForm.name).substring(0, 1) }}
            </div>
            <h4>{{ operationForm.name }}</h4>
          </div>
        </el-col>
      </el-row>
      <p style="margin-left: 50px;">工号：{{ transferInfo.userId }}</p>
      <p style="margin-left: 50px;">所在机构：{{ transferInfo.deptName }}</p>
      <el-divider v-show="leave"/>
      <!-- 资源转移--->
      <p style="margin-left: 50px;" v-show="!leave">需要转移的资源</p>
      <el-table :data="[{}]" style="width: 100%;" v-show="!leave">
        <el-table-column prop="date" label="资源" width="120">
          <template #default> 业务员 </template>
        </el-table-column>
        <el-table-column prop="name" label="描述" width="180">
          <template #default> 转让该成员维护的业务员 </template>
        </el-table-column>
        <el-table-column prop="address" label="数量" width="80">
          <template #default> {{ transferInfo.count }}人 </template>
        </el-table-column>
        <el-table-column prop="address" label="资源接收人">
          <template #default>
            <el-input
              :value="receiveInfo?.name"
              @click="deptDialogVisible = true"
              placeholder="输入姓名，手机号，工号查找"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>

       <!-- 操作离职--->
      <!-- <el-radio-group v-model="radio1">
        <el-radio value="1" size="large">转移给其他成员</el-radio>
        <el-radio value="0" size="large">不转移</el-radio>
      </el-radio-group> -->

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmTransfer">
            确认{{ leave?'离职':'转移' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    <setDept
      :dialogVisible="deptDialogVisible"
      :dept-list="tableData"
      :dept-ids="[]"
      @close-dialog="confirmDialogInfo"
      title="选择交接人"
      @cancel-dialog="deptDialogVisible=false"
    ></setDept>
    <el-dialog
      v-model="changeDeptDialog"
      title="变更机构"
      width="600"
      append-to-body
      draggable
    >
      <div>
        <el-input
          v-model="filterText"
          style="width: 240px;"
          placeholder="请输入机构名称查找"
          :prefix-icon="Search"
        />
        <el-tree
          ref="treeRef"
          style="max-width: 600px;"
          class="filter-tree"
          :data="tableData"
          :props="tableProps"
          :default-expand-all="true"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          @node-click="treeClick"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span>
                <a style="color: #00a0f4;">
                  {{ node.label == deptItem.name ? "已选" : "" }}
                </a>
              </span>
            </span>
          </template>
        </el-tree>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="changeDeptDialog = false">取消</el-button>
          <el-button type="primary" @click="submitChangeDept"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, onMounted, watch } from "vue";
import { memberType } from "@/api/modules/user";
import type { FormRules, FormInstance, ElTree } from "element-plus";
import api from "@/api";
import { Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getDictItems } from "@/api/dict";
import { useRoute } from "vue-router";
import pinyin from "js-pinyin";
import { useRouter } from "vue-router";
import setDept from "@/components/DialogSetDeptLeader/index.vue";
interface dictType {
  value: string;
  id: string;
  label: string;

  [property: string]: any;
}

interface institutionData {
  name: string;
  system: string;
}
const info = ref<institutionData>({
  name: "",
  system: "",
});
//转移资源
const dialogVisible = ref(false);

//选择交接人
const deptDialogVisible = ref(false);
const route = useRoute();

const activeName = ref("first");
const statusList = ref<dictType[]>([]);
onMounted(async () => {
  genderList.value = await getDictItems({ dictCode: "gender" });
  nation.value = await getDictItems({ dictCode: "nation" });
  marriage.value = await getDictItems({ dictCode: "marriage" });
  political_status.value = await getDictItems({ dictCode: "political_status" });
  health_status.value = await getDictItems({ dictCode: "health_status" });
  educational.value = await getDictItems({ dictCode: "educational" });
  statusList.value = await getDictItems({ dictCode: "person_status" });
  getAreaList(); //省市区级联数据
  api.institutionApi.institutionList(info.value).then((res) => {
    tableData.value = [...res.data];
  });
  api.userApi
    .getUserInfo({
      id: route.query.id || "",
    })
    .then((res: any) => {
      console.log(res);
      if (res.code === 200) {
        operationForm.value = res.data;
        let formData = res.data

        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 == 'bankCard')
          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 == 'salaryTable')
          let leaveTable = formData.fileList.find(item => item.fileType == 'leaveTable')
          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
            bankName.value = qualification.fileName
            bankSize.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
          }
        }
      }
    });
});
const areaOptins = ref([]);

const getAreaList = () => {
  api.areaApi.areaList({}).then((res) => {
    areaOptins.value = res.data;
  });
};
//性别字典
const genderList = ref<dictType[]>([]);
//民族
const nation = ref<dictType[]>([]);
//婚姻状况
const marriage = ref<dictType[]>([]);
//政治面貌
const political_status = ref<dictType[]>([]);
//健康状况
const health_status = ref<dictType[]>([]);
//学历
const educational = ref<dictType[]>([]);

interface OperationFormProps extends memberType {
  deptId: string;
  leaderNumber: string;
  referrerNumber: string;
  address?: [];
  [key: string]: any;
}
// console.log(memberType,5555)

let emits = defineEmits(["closeDialog"]);

const OperationFormRef = ref<FormInstance>();
// 添加/编辑业务员表单
let operationForm = ref<OperationFormProps>({
  deptId: "",
  name: "",
  mobile: "",
  identity: "",
  identityTimeStart: "",
  identityTimeEnd: "",
  leaderId: "",
  leaderNumber: "",
  referrerId: "",
  referrerNumber: "",

  sex: "",
  birthday: "",
  nations: "",
  koseki: "",
  maritalStatus: "",
  politicsStatus: "",
  health: "",
  province: "",
  city: "",
  district: "",
  address: [],
  liveAddress: "",
  postalCode: "",
  education: "",
  graduationTime: "",
  school: "",
  isComputer: "",
  emergencyContactName: "",
  emergencyContactTel: "",
  salary: "",
  salaryLevel: "",
  bankCardId: "",
  bankName: "",
});
// 添加/编辑业务员表单校验
const operationRules = ref<FormRules>({
  name: [{ required: true, trigger: "blur", message: "请填写姓名" }],
  mobile: [
    { required: true, trigger: "blur", message: "请填写手机号" },
    {
      pattern: /^1[34578][0-9]{9}$/,
      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: "change", message: "请选择管理人" }],
  leaderNumber: [
    { required: true, trigger: "blur", message: "请填写管理人工号" },
  ],
  referrerId: [{ required: true, trigger: "change", message: "请选择推荐人" }],
  referrerNumber: [
    { required: true, trigger: "blur", message: "请填写推荐人工号" },
  ],
});
// 身份证人像面
let IDCardFrontName = ref("");
let IDCardFront = ref("");
let sfz1 = ref("");
// 身份证国徽面
let IDCardBackName = ref("");
let IDCardBack = ref("");
let sfz2 = ref("");
// 银行卡
let bankName = ref("");
let bankSize = ref("");
let bankCard = ref("");
// 劳务合同
let contractName = ref("");
let contract = ref("");
let contractId = ref("");
// 应聘表
let applicantName = ref("");
let applicant = ref("");
let applicantId = ref("");
// 定薪表
let decidePayName = ref("");
let decidePay = ref("");
let salaryTable = ref("");
// 离职表
let dimissionName = ref("");
let dimission = ref("");
let leaveTable = ref("");
// 图片预览地址
let imageShow = ref(false);
let imageUrl = ref("");

//机构列表
type tableType = {
  id: string;
  name: string;
};
const tableData = ref<tableType[]>([]);
const tableProps = ref({
  value: "id",
  label: "name",
  children: "children",
  checkStrictly: true,
});

//跳转编辑页面
const router = useRouter();
function editMember(e: any) {
  router.push({
    path: "/personnel/member/memberEdit",
    query: {
      id: operationForm.value.userId,
    },
  });
  // console.log(e)
  // if (e != undefined) {
  //   let deptId = e[e?.length - 1];
  //   operationForm.deptId = deptId;
  // } else {
  //   operationForm.deptId = "";
  // }
}

//数组去重

// 上传图片
const uploadImage = (file: any, type: number) => {
  let files = file.raw;
  console.log(files)
  let url = window.URL.createObjectURL(files); //转临时路径
  const params = new FormData(); // 声明formData数据类型
  params.append("file", files);

  // params.append("multipartFile", files);
  // params.append("type", "image");
  api.areaApi.fileUpload(params).then((res: any) => {

    if (res.code === 200) {
      switch (type) {
        case 1:
          IDCardFrontName.value = res.data.fileName;
          IDCardFront.value = res.data.downloadUrl;
          sfz1.value = res.data.id;
          break;
        case 2:
          IDCardBackName.value = res.data.fileName;
          IDCardBack.value = res.data.downloadUrl;
          sfz2.value = res.data.id;
          break;
        case 3:
          bankName.value = res.data.fileName;
          bankSize.value = res.data.downloadUrl;
          bankCard.value = res.data.id;
          break;
        case 4:
          contractName.value = res.data.fileName;
          contract.value = res.data.downloadUrl;
          contractId.value = res.data.id;

          break;
        case 5:
          applicantName.value = res.data.fileName;
          applicant.value = res.data.downloadUrl;
          applicantId.value = res.data.id;

          break;
        case 6:
          decidePayName.value = res.data.fileName;
          decidePay.value = res.data.downloadUrl;
          salaryTable.value = res.data.id;

          break;
        case 7:
          dimissionName.value = res.data.fileName;
          dimission.value = res.data.downloadUrl;
          leaveTable.value = res.data.id;
          break;
      }
    }
  });
};

// 人事档案
let recordShow = ref(true);

const imageView = (type: number) => {
  imageShow.value = true;
  switch (type) {
    case 1:
      imageUrl.value = IDCardFront.value;
      break;
    case 2:
      imageUrl.value = IDCardBack.value;
      break;
    case 3:
      imageUrl.value = bankSize.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 onSubmit = async (OperationFormRef: FormInstance, type: number) => {
  if (!OperationFormRef) {
    emits("closeDialog", false);
    return;
  }
  await OperationFormRef.validate((valid) => {
    if (valid) {
      api.operationApi
        .addOperation({
          ...operationForm.value,
          province: operationForm.value.address[0],
          city: operationForm.value.address[1],
          district: operationForm.value.address[2],
          deptId:
            operationForm.value.deptId[operationForm.value.deptId.length - 1],
          typeAttr: 2,
          sfz1: sfz1.value,
          sfz2: sfz2.value,
          bankCard: bankCard.value,
          contractId: contractId.value,
          applicantId: applicantId.value,
          salaryTable: salaryTable.value,
          leaveTable: leaveTable.value,
        })
        .then((res: any) => {
          // console.log(123, res);
          if (res.code === 200) {
            ElMessage.success(res.msg);
          }
        });
    } else {
      ElMessage({
        message: "请正确填写相关信息！",
        type: "warning",
      });
    }
  });
};
interface transfer {
  [key: string]: any;
}
//资源转移信息
const transferInfo = ref<transfer>({});
function transfer() {
  // console.log(123)
  leave.value=false
  api.userApi
    .getTransferInfo({
      userId: operationForm.value.userId,
    })
    .then((res: any) => {
      if (res.code === 200) {
        transferInfo.value = res.data;
        if (res.data.count < 1) {
          ElMessage.error("当前用户没有可转移的资源");
        } else {
          dialogVisible.value = true;
        }
      }
    });
}

//操作离职
const leave=ref(false)
function resign() {
  // console.log(123)
  leave.value=true
  api.userApi
    .getTransferInfo({
      userId: operationForm.value.userId,
    })
    .then((res: any) => {
      if (res.code === 200) {
        transferInfo.value = res.data;
        if (res.data.count < 1) {
          // ElMessage.error("当前用户没有可转移的资源");
          ElMessageBox.confirm(
          "离职后，账号将无法访问本企业，请确定是否离职？",
          `确定要将${operationForm.value.name}设置为离职吗?`,
          {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            api.userApi
              .userQuitApply({
                userId:operationForm.value.userId,
              })
              .then((res: any) => {
                if(res.code==200){
                  ElMessage.success(res.msg)
                  router.back()
                }
              });
            // console.log(123);
          })
          .catch(() => {
            ElMessage.warning("用户取消操作");
          });
        } else {
          ElMessage.warning("当前用户有资源未转移，请转移后执行离职操作");
          // dialogVisible.value = true;
        }
      }
    });
}

//确认弹框提交信息
const receiveInfo = ref<transfer>({});
function confirmDialogInfo(item: any) {
  deptDialogVisible.value = false;
  receiveInfo.value = item;
}

//资源转移确认
function confirmTransfer() {

    api.userApi
    .transfer({
      originalUserId: transferInfo.value.userId,
      transferUserId: receiveInfo.value.id,
    })
    .then((res: any) => {
      // console.log(res)
      if (res.code === 200) {
        ElMessage.success(res.msg);
        dialogVisible.value = false;
      }
    });

    // api.userApi
    // .userQuitApply({
    //   originalUserId: transferInfo.value.userId,
    //   transferUserId: receiveInfo.value.id,
    // })
    // .then((res: any) => {
    //   // console.log(res)
    //   if (res.code === 200) {
    //     ElMessage.success(res.msg);
    //     dialogVisible.value = false;
    //   }
    // });


}

//变更机构弹框
interface Tree {
  [key: string]: any;
}
const filterText = ref("");
const treeRef = ref<InstanceType<typeof ElTree>>();

watch(filterText, (val) => {
  treeRef.value!.filter(val);
});
const filterNode = (value: string, data: Tree) => {
  // console.log(data)
  if (!value) return true;
  return data.name.includes(value);
};
//判断当前机构是否可以进行变更
const changeDeptDialog = ref(false);
function changeDept() {
  // changeDeptDialog.value=true
  api.userApi
    .checkChangeDept({
      userId: operationForm.value.userId,
    })
    .then((res: any) => {
      if (res.code === 200) {
        // transferInfo.value=res.data

        changeDeptDialog.value = true;
      }
    });
}
//选择变更的机构
const deptItem = ref({});
function treeClick(node: any) {
  deptItem.value = node;
}

//提交变更机构信息

function submitChangeDept() {
  // changeDeptDialog.value=true
  api.userApi
    .changeDept({
      userId: operationForm.value.userId,
      deptId: deptItem.value.id,
    })
    .then((res: any) => {
      if (res.code === 200) {
        // transferInfo.value=res.data
        ElMessage.success(res.msg);
        changeDeptDialog.value = false;
      }
    });
}

//删除成员
function delUser() {
  api.userApi
    .checkChangeDept({
      userId: operationForm.value.userId,
    })
    .then((res: any) => {
      if (res.code === 200) {
        // transferInfo.value=res.data

        ElMessageBox.confirm(
          "账号删除后，该账号将无法使用访问本企业，请确定是否删除 ",
          "确认要删除账号吗?",
          {
            confirmButtonText: "确认删除",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            api.userApi
              .userDelete({
                id: [operationForm.value.id],

              })
              .then((res: any) => {
                if(res.code==200){
                  ElMessage.success(res.msg)
                  router.back()
                }
              });
            // console.log(123);
          })
          .catch(() => {
            ElMessage.warning("用户取消操作");
          });
      }
    });
}
</script>

<style scoped lang="scss">
.message-info {
  box-sizing: border-box;
  // background: #fff;
  padding: 15px;

  h4 {
    margin: 0;
  }
}

.img-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 20px;
  color: #fff;
  background: #00a0f4;
  border-radius: 50%;
}

.fileInfo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2px 20px;
  margin: 0 10px;
  border-radius: 5px;

  &: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;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 60%);

  img {
    width: 800px;
    height: 800px;
    border-radius: 5px;
  }
}

.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  font-size: 14px;
}
</style>