tenant-Platform/src/views/representative/detail.vue

<template>
  <div class="message-info">
    <div class="error"></div>
    <div style="background-color: #fff; padding: 15px; box-sizing: border-box">
      <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" v-show="operationForm.status=='4'">
          <el-button type="primary" @click="toExamine(operationForm, 'success')">审核通过</el-button>

            <el-button type="primary" @click="toExamine(operationForm, 'error')"> 审核驳回 </el-button>


        </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="background-color: #fff; padding: 20px; box-sizing: border-box"
    >
      <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" >
                    <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" >
                    <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" >
                    <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" >
                    <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" >
                    <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" >
                    <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" >
                    <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>
    <el-image-viewer v-if="imageShow" :url-list="[imageUrl]" @close="imageShow = false" />
    <el-dialog :close-on-click-modal="false" v-model="dialogVisible" title="审核不通过" width="500" draggable>
      <el-input
        type="textarea"
        placeholder="请输入审核不通过原因"
        v-model="textValue"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button class="border-[#0083FF] color-[#0083FF]" plain @click="cancel()">取 消</el-button>
          <el-button type="primary" @click="confirm()"> 保 存 </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";

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 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;
      }
    });
});
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: "",
});


// 身份证人像面
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 router = useRouter();
const userInfoId=ref('')
const toExamine = (item: any, type: string) => {
  if (type == "success") {
    ElMessageBox.confirm(`确定审核通过${item.name}账号吗?`, "审核通过", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
      center: true,
    })
      .then(() => {
        api.representativeApi
          .salesmanAuthSuccess({
            userInfoId: item.id,
          })
          .then((res: any) => {
            if (res.code == 200) {
              ElMessage.success("操作成功");

            } else {
              ElMessage.error(res.msg);

            }
          });
      })
      .catch(() => {
        ElMessage.warning("用户取消操作");
      });
  } else {
    dialogVisible.value = true;
    userInfoId.value = item.id;
    // ElMessageBox.confirm(`<textarea placeholder='请输入审核不通过原因' oninput='handleText()' style="width:300px"></textarea>`, "审核不通过", {
    //   confirmButtonText: "确认",
    //   cancelButtonText: "取消",
    //   dangerouslyUseHTMLString: true ,
    //   type: "warning",
    //   center: true,

    // })
    //   .then(() => {
    //     api.representativeApi.salesmanAuthFailed({}).then((res: any) => {
    //       if (res.code == 200) {
    //         ElMessage.success("操作成功");
    //         salesmanAuth(); //业务员列表
    //       } else {
    //         ElMessage.error(res.msg);
    //         // salesmanAuth(); //业务员列表
    //       }
    //     });
    //   })
    //   .catch(() => {
    //     ElMessage.warning("用户取消操作");
    //   });
  }
};

function cancel() {
  ElMessage.warning("用户取消操作");
  dialogVisible.value = false;
}
const textValue = ref("");
//审核不通过
function confirm() {
  api.representativeApi
    .salesmanAuthFailed({
      userInfoId: userInfoId.value,
      approvalOpinion: textValue.value,
    })
    .then((res: any) => {
      if (res.code == 200) {
        ElMessage.success("操作成功");

        dialogVisible.value = false;
      }
    });
}













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

watch(filterText, (val) => {
  treeRef.value!.filter(val);
});






</script>

<style scoped lang="scss">
.message-info {
  // background: #fff;
  padding: 15px;
  box-sizing: border-box;
  h4 {
    margin: 0;
  }
}
.img-title {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  color: #fff;
  background: #00a0f4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}
.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;
      }
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>