crm_front_v3/src/views/contract_manage/components/ServiceDialog.vue

<script setup>
import html2canvas from "html2canvas";
import { contractInterface } from "@/api/api.js";
import { ref,reactive,watch } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  serviceCon: null,
  serviceShow: {
    type: Boolean,
    default: false,
  },
  contractType:''
});

const emits=defineEmits(['serviceSave','serviceClose'])

const showOpt=ref(false)//选择权限弹窗
const optionLists=ref([]) //权限列表数据
const tableHeadData=ref([]) //表头数据
const tableData=ref([]) //表格数据
const roleType=ref(localStorage.getItem("Role"))
const tableSelectList=reactive({
  商品复盘: [
    { id: 2, name: "能化专栏《化里化外》", select: false },
    { id: 4, name: "黑色专栏《知白守黑》", select: false },
    { id: 5, name: "有色专栏《有声有色》", select: false },
    // { id: 1, name: "《每日宏观商品复盘》", select: false },
    { id: 3, name: "《股债日评》", select: false },
  ],
  深度月报:[
    { id: 6, name: "宏观经济", select: false },
    { id: 7, name: "草根调研", select: false },
    // { id: 8, name: "PVC月报", select: false },
  ]
}) //表格中自带选择的数据
const tableSelectCheck=reactive({
  商品复盘: [],
}) //表格中自带选择的数据选中项

const position=reactive({
  top: 0,
  left: 0,
}) //鼠标右击时的位置
const showRightClickMenu=ref(false) //显示右键菜单
const rightClickCon=ref([
  { type: "selectRow", name: "选择该行" },
  { type: "insertColumn", name: "插入一列" },
  { type: "insertRow", name: "插入一行" },
  { type: "deleteColumn", name: "删除该列" },
  { type: "deleteRow", name: "删除该行" },
]) //右键菜单内容

const showInputHead=ref(false) //显示填写表头
const form=reactive({
  title: "",
}) //插入一列填写的表头数据

const formRule=reactive({
  title: [{ required: true, message: "请填写名称", trigger: "blur" }],
})

const selectIndex=reactive({
  rindex: 0, //行序号
  cindex: 0, //列序号
})
const selectRowIndex=ref(null) //选择该行的序列

// 初始化表格数据
watch(()=>props.serviceCon,()=>{
  initData();
},{
  // 开启深度监听，监听到‘补充协议’与其他合同类型切换时，对象里面客观经济的选中变化
  deep:true
})

//选择上面选项更新表格数据
// optionLists: {
//   handler(nval, oval) {
//     if (this.selectRowIndex === null) return;
//     let arr = [];
//     let arrId = [];

//     let count = 0;
//     nval.forEach((item) => {
//       if (item.CheckAll) {
//         count++;
//       }
//     });
//     //全选
//     if (count === nval.length) {
//       arr = ["全品种"];
//       nval.forEach((item) => {
//         arrId = [...arrId, ...item.CheckList];
//       });
//     } else {
//       nval.forEach((item) => {
//         item.Items.forEach((item2) => {
//           let flag = item.CheckList.indexOf(item2.ChartPermissionId);
//           if (flag != -1) {
//             arr.push(item2.PermissionName);
//             arrId.push(item2.ChartPermissionId);
//           }
//         });
//       });
//     }

//     // console.log(arr);
//     this.tableData[this.selectRowIndex].forEach((item) => {
//       if (item.HeadName === "品种") {
//         item.Value = arr.join("、");
//         item.ValueId = arrId;
//       }
//     });
//   },
//   deep: true,
// },

// 如果没有选择任何行则重置顶部选项数据
watch(selectRowIndex,(nval, oval)=>{
  if (nval === null) {
    optionLists.value.forEach((item) => {
      item.CheckList = [];
    });
  }
})

const initData=()=>{
  console.log("初始化");
  if (!props.serviceCon.Detail) return;
  let temarr = props.serviceCon.Detail.map((rowItem) => {
    let rowArr = [];
    for (let key in rowItem) {
      if (key.substr(0, 3) === "Col" && rowItem[key] !== "") {
        rowArr.push(JSON.parse(rowItem[key]));
      }
    }
    return rowArr;
  });

  tableHeadData.value = temarr[0];
  tableData.value = temarr.slice(1);
  // 回显表格内部选择的
  tableData.value.forEach((item) => {
    item.forEach((e) => {
      if (e.Type === "select") {
        let key = e.Value;
        item.forEach((e2) => {
          if (e2.HeadName === "品种") {
            if(e2.Value){
              tableSelectCheck[key] = e2.ValueId;
            }else{
              tableSelectCheck[key] = [];
            }
          }
        });
      }
    });
  });
}

//点击保存选择的权限数据
const handleSaveOpt=()=>{
  if (selectRowIndex.value === null) return;
  let arr=[]
  let arrId=[]
  let count = 0
  optionLists.value.forEach((item) => {
    if (item.CheckAll) {
      count++;
    }
  });
  // 全选
  if(count===optionLists.value.length){
    arr = ["全品种"];
    optionLists.value.forEach((item) => {
      arrId = [...arrId, ...item.CheckList];
    });
  }else{
    optionLists.value.forEach((item) => {
      item.Items.forEach((item2) => {
        let flag = item.CheckList.indexOf(item2.ChartPermissionId);
        if (flag != -1) {
          arr.push(item2.PermissionName);
          arrId.push(item2.ChartPermissionId);
        }
      });
    });
  }

  // 找出和该行关联的行 同时修改品种栏数据
  let rowIndexarr=[]
  if(!tableData.value[selectRowIndex.value][0].RowName){
    rowIndexarr.push(selectRowIndex.value)
  }else{
    tableData.value.forEach((item,index)=>{
      if(item[0].RowName==tableData.value[selectRowIndex.value][0].RowName){
        rowIndexarr.push(index)
      }
    })
  }
  
  console.log(rowIndexarr);

  rowIndexarr.forEach(index=>{
    tableData.value[index].forEach((item) => {
      if (item.HeadName === "品种") {
        item.Value = arr.join("、");
        item.ValueId = arrId;
      }
    });
  })

  // this.tableData[this.selectRowIndex].forEach((item) => {
  //   if (item.HeadName === "品种") {
  //     item.Value = arr.join("、");
  //     item.ValueId = arrId;
  //   }
  // });
  showOpt.value=false
}

// 点击关闭选择权限弹窗
const closeOpt=()=>{
  showOpt.value=false
  selectRowIndex.value=null
}

// 左键选择行
const handleSelectRow=(rindex,data)=>{
  // 如果选择的行存在 选项数据则不允许选择 或者 该行不可选择 即RowDisable=true
  if(data.HeadName!='品种') return
  let tag = false;
  tableData.value[rindex].forEach((item) => {
    if (item.Type === "select"||item.RowDisable) {
      tag = true;
    }
  });
  if (tag) return;
  selectRowIndex.value = rindex;
  formatOptionList();
  showOpt.value=true
}

//获取顶部权限选项
const getPermissionOpt=()=>{
  let CompanyType = localStorage.getItem("Role") === "ficc_seller" ? "ficc" : "权益";
  contractInterface.getPermissionList({ CompanyType }).then((res) => {
    if (res.Ret === 200) {
      let arr = res.Data.List;
      arr.forEach((item) => {
        item.CheckList = [];
        item.CheckAll = false;
        item.indeterminate = false;
      });
      optionLists.value = arr;
    }
  });
}

//每次选中一行时格式化顶部选择数据
const formatOptionList=()=> {
  let valueId = [];
  tableData.value[selectRowIndex.value].forEach((item) => {
    if (item.HeadName === "品种") {
      valueId = item.ValueId;
    }
  });

  optionLists.value.forEach((item) => {
    item.CheckList = [];
    item.Items.forEach((e) => {
      let flag = valueId.indexOf(e.ChartPermissionId);
      if (flag != -1) {
        item.CheckList.push(e.ChartPermissionId);
      }
    });
    if (item.CheckList.length === item.Items.length) {
      item.CheckAll = true;
    } else {
      item.CheckAll = false;
    }
  });
}

//全选
const handleCheckAllChange=(e)=>{
  let arr = e.Items.map((item) => {
    return item.ChartPermissionId;
  });
  e.CheckList = e.CheckAll ? arr : [];
  e.indeterminate = false;
  // 需求更改，合同类型为补充协议时不默认勾选宏观经济
  if(e.ClassifyName==='宏观经济'&&props.contractType!=='补充协议'){
    e.CheckList.push(1)
  }
}

//选择单个
const handleCheckChange=(e)=>{
  e.CheckAll = e.CheckList.length === e.Items.length;
  e.indeterminate = e.CheckList.length > 0 && e.CheckList.length < e.Items.length;
}

//点击表格中选项数据
const handleTableSelectChange=(title, rindex)=>{
  let arr = tableSelectCheck[title];
  let arr2 = [];
  tableSelectList[title].forEach((item) => {
    arr.forEach((e) => {
      if (e == item.id) {
        arr2.push(item.name);
      }
    });
  });
  tableData.value[rindex].forEach((item) => {
    if (item.HeadName === "品种") {
      item.Value = arr2.join("、");
      item.ValueId = arr;
    }
  });
}

//鼠标右键
const rightClick=(rindex, cindex, event)=>{
  selectIndex.rindex = Number(rindex);
  selectIndex.cindex = Number(cindex);
  formatRightClickCon(rindex, cindex);
  showRightClickMenu.value = true;
  position.top = event.clientY + "px";
  position.left = event.clientX + "px";
}

//格式化鼠标右击显示内容
const formatRightClickCon=(rindex, cindex)=>{
  let arr = [
    { type: "insertColumn", name: "向后插入一列", show: true },
    { type: "insertRow", name: "向后插入一行", show: true },
    { type: "deleteColumn", name: "删除该列", show: true },
    { type: "deleteRow", name: "删除该行", show: true },
  ];

  // 品种一列不允许删除
  if (tableHeadData.value[cindex].Tag === "品种"||tableHeadData.value[cindex].Tag === "FICC小套餐服务内容") {
    arr[2].show = false;
  }
  //删除列 不能少于两列
  if (tableHeadData.value.length <= 2) {
    arr[2].show = false;
  }

  //删除行 不能少于两行 并且商品复盘、周报、双周报、数据点评、月报必须有一个存在
  if (tableData.value.length <= 2) {
    arr[3].show = false;
  }

  let temarr=[]
  tableData.value.forEach(item=>{
    item.forEach(item2=>{
      if(item2.HeadName==='FICC小套餐服务内容'){
        if(item2.Value==='数据点评'||
        item2.Value==='FICC周报'||
        item2.Value==='商品双周报+线上电话会讨论会<br/>（由弘则的研究员主持线上讨论）'){
          temarr.push(item2.Value)
        }
      }
    })
  })
  if(temarr.length<2){
    tableData.value[selectIndex.rindex].forEach(item=>{
      if(item.Value==='数据点评'||
        item.Value==='FICC周报'||
        item.Value==='商品双周报+线上电话会讨论会<br/>（由弘则的研究员主持线上讨论）'){
          arr[3].show = false;
      }
    })
  }

  //新增列 不能超过6列
  if (tableHeadData.value.length >= 6) {
    arr[0].show = false;
  }

  rightClickCon.value = arr.filter((item) => {
    return item.show;
  });
}

// 点击 新增/删除 行/列  选择该行
const handleUpdateTable=(type)=>{
  //删除行
  if (type === "deleteRow") {
    selectRowIndex.value = null;
    tableData.value.splice(selectIndex.rindex, 1);
  }

  //新增行
  if (type === "insertRow") {
    selectRowIndex.value = null;
    let arr = tableHeadData.value.map((item) => {
      let obj = { CanEdit: true, Type: "text", Value: "", ValueId: [], HeadName: item.Tag,RowDisable:false,RowName:''};
      if (item.Tag === "品种") {
        obj.CanEdit = false;
      }
      return obj;
    });

    tableData.value.splice(selectIndex.rindex + 1, 0, arr);
  }

  //删除列
  if (type === "deleteColumn") {
    selectRowIndex.value = null;
    tableHeadData.value.splice(selectIndex.cindex, 1);
    tableData.value = tableData.value.map((item) => {
      item.splice(selectIndex.cindex, 1);
      return item;
    });
  }

  //新增列
  if (type === "insertColumn") {
    selectRowIndex.value = null;
    showInputHead.value = true;
  }

  showRightClickMenu.value = false;
}

const headTitleForm=ref(null)

//点击确定新增表头内容
const handleConfirmHead=()=>{
  headTitleForm.value.validate((valid) => {
    if (!valid) return;
    tableHeadData.value.splice(selectIndex.cindex + 1, 0, { CanEdit: false, Type: "text", Value: form.title, Tag: form.title });
    tableData.value = tableData.value.map((item) => {
      item.splice(selectIndex.cindex + 1, 0, { CanEdit: true, Type: "text", Value: "", HeadName: form.title,RowDisable:false,RowName:'' });
      return item;
    });
    showInputHead.value = false;
    form.title = "";
  });
}


//点击取消填写新增列头弹窗
const handleCancelHead=()=>{
  headTitleForm.value.resetFields();
  showInputHead.value = false;
}

//点击保存
const handleSave=()=>{
  let flag = validateData();
  if (!flag) return;

  // 生成表格图片
  html2canvas(document.getElementById("table-png"), {
    backgroundColor: "#ffffff",
    useCORS: true, // 允许图片跨域
    allowTaint: true, // 在渲染前测试图片
    imageTimeout: 0, // 加载延时
    scale:3,
  }).then((res) => {
    let img = res.toDataURL("image/png");
    emits("serviceSave", {
      Value: img,
      ServiceTemplateId: props.serviceCon.ServiceTemplateId,
      tableData: tableData.value,
      tableHeadData: tableHeadData.value,
    });
    handleServiceClose();
  });
}

//点击取消
const handleCancel=()=>{
  initData()
  handleServiceClose();
}

//校验数据
const validateData=()=>{
  //判断品种列是否有值
  let arr = [];
  tableData.value.forEach((item) => {
    item.forEach((item2) => {
      if (item2.HeadName === "品种") {
        arr.push(...item2.ValueId);
      }
    });
  });
  // 判断行是否有值
  let arr2 = [];
  tableData.value.forEach((item, index) => {
    let arr = item.filter((item2) => {
      if (!item2.Value) return item2;
    });
    if (arr.length === tableHeadData.value.length) {
      arr2.push(index);
    }
  });

  // 商品复盘、周报、双周报、数据点评、月报 品种必须有一个选择了
  let arr3=[]
  tableData.value.forEach(item=>{
    item.forEach(item2=>{
      if(item2.Value==='数据点评'||
        item2.Value==='FICC周报'||
        item2.Value==='商品双周报+线上电话会讨论会<br/>（由弘则的研究员主持线上讨论）'){
          item.forEach(item3=>{
            if (item3.HeadName === "品种") {
              arr3.push(...item3.ValueId);
            }
          })
      }
    })
  })

  let constractType=props.contractType
  console.log(constractType);
  if (!arr.length&&constractType!=='补充协议') {
    ElMessage.warning("至少选择一个品种");
    return false;
  }

  if (arr2.length) {
    ElMessage.warning("行内至少填一项");
    return false;
  }

  if(!arr3.length&&constractType!=='补充协议'){
    ElMessage.warning("周报、双周报、数据点评至少选择一个品种");
    return false;
  }

  return true;
}

//关闭弹窗
const handleServiceClose=()=>{
  showRightClickMenu.value = false;
  selectRowIndex.value = null;
  emits("serviceClose");
}

defineExpose({
  tableHeadData,tableData
})

getPermissionOpt();
</script>

<template>
  <div class="service-content-wrap">
    <!-- 大套餐或其他等直接查看图片类型的 -->
    <el-dialog v-dialogDrag top="5vh" :model-value="props.serviceShow" class="self-dialog-c" :modal-append-to-body="false" @close="handleServiceClose" :show-close="false" v-if="!serviceCon.Detail">
      <!-- <h2 class="title">{{ serviceCon.Title }}</h2> -->
      <template #header>
        <!-- 权益合同和ficc合同有别 -->
        {{roleType}}
        <h2 class="title">{{roleType == 'ficc_seller'?serviceCon.Title:serviceCon.showTitle }}</h2>
      </template>
      <img class="img" style="width: 100%; display: block; margin: 0 auto 20px auto" 
      :src="roleType == 'ficc_seller'?serviceCon.Value:serviceCon.showValue" />
      <div style="text-align: center; margin-bottom: 30px">
        <el-button type="primary" @click="handleServiceClose">知道了</el-button>
      </div>
    </el-dialog>

    <!-- 小套餐 -->
    <el-dialog v-dialogDrag title="提示" width="65%" top="5vh"  :model-value="props.serviceShow" :modal-append-to-body="false" @close="handleCancel"  v-else>
      <template #header>
        <img width="20" src="../../../assets/img/constract/select.png"  style="vertical-align: middle;margin-right: 4px" />
        <span style="vertical-align: middle">选择品种</span>
      </template>

      <!-- 选择种类部分  -->
      <!-- <div class="type-select-wrap">
        <h2>权限设置</h2>
        <div class="type-select-box">
          <div class="item flex" v-for="item in optionLists" :key="item.ClassifyName" style="margin-bottom: 20px">
            <el-checkbox
              :disabled="selectRowIndex === null"
              :indeterminate="item.CheckList.length > 0 && item.CheckList.length < item.Items.length"
              v-model="item.CheckAll"
              @change="handleCheckAllChange(item)"
              >{{ item.ClassifyName }}：</el-checkbox
            >
            <el-checkbox-group :disabled="selectRowIndex === null" v-model="item.CheckList" @change="handleCheckChange(item)">
              <el-checkbox :label="tag.ChartPermissionId" v-for="tag in item.Items" :key="tag.ChartPermissionId">{{ tag.PermissionName }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div> -->

      <!-- 表格部分 -->
      <div style="max-height: 70vh; overflow-y: auto; padding: 10px 0">
        <table id="table" ref="table" class="table-wrap" @click="showRightClickMenu = false">
          <thead>
            <tr style="background: #f0f2f5">
              <th class="table-item" v-for="item in tableHeadData" :key="item.Value">{{ item.Value }}</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="(row, rindex) in tableData" :key="rindex" :class="rindex === selectRowIndex ? 'row-dark' : null" >
              <td 
                class="table-item" 
                v-for="(item, cindex) in row" 
                :key="item" 
                @click="handleSelectRow(rindex,item)" 
                @contextmenu.prevent="rightClick(rindex, cindex, $event)" 
                :data-rindex="rindex" 
                :data-cindex="cindex"
              >
                <div v-if="item.Type === 'text'">
                  <img 
                    class="choose-icon" 
                    width="14" 
                    src="../../../assets/img/constract/icon-1.png" 
                    alt="" 
                    v-if="item.HeadName=='品种'&&!item.RowDisable"
                  />
                  <span 
                    v-if="!item.CanEdit" 
                    v-html="item.Value" 
                    :style="{paddingLeft:item.HeadName=='品种'&&!item.RowDisable?'15px':null,display:'inline-block'}"
                  ></span>
                  <el-input v-else type="textarea" placeholder="请输入" v-model="item.Value"></el-input>
                </div>
                <div v-if="item.Type === 'select'">
                  <div style="margin-bottom: 10px;font-size:15px">{{ item.Value }}</div>
                  <div style="text-align: left">
                    <el-checkbox-group v-model="tableSelectCheck[item.Value]">
                      <el-checkbox style="font-size:14px;height: 19px" :label="opt.id" 
                      v-for="opt in tableSelectList[item.Value]" :key="opt.id" @change="handleTableSelectChange(item.Value, rindex, cindex)">{{ opt.name }}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div style="margin: 40px 0; text-align: center">
        <el-button type="primary" style="margin-right: 44px" @click="handleSave" size="large">保存</el-button>
        <el-button type="primary" plain @click="handleCancel" size="large">取消</el-button>
      </div>
    </el-dialog>

    <!-- 权限选择弹窗 -->
    <el-dialog v-model="showOpt" :modal-append-to-body="false" @close="closeOpt" v-dialogDrag>
      <template #header>
        <img style="vertical-align: middle;margin-right: 4px;" width="20" src="../../../assets/img/icons/add_icon.png" alt="" />
        <span style="vertical-align: middle">选择品种</span>
      </template>
      <div class="type-select-wrap">
        <div class="type-select-box">
          <div class="item flex" v-for="item in optionLists" :key="item.ClassifyName" style="margin-bottom: 30px">
            <el-checkbox
              :disabled="selectRowIndex === null"
              :indeterminate="item.CheckList.length > 0 && item.CheckList.length < item.Items.length"
              v-model="item.CheckAll"
              @change="handleCheckAllChange(item)"
              >{{ item.ClassifyName }}：</el-checkbox
            >
            <el-checkbox-group :disabled="selectRowIndex === null" v-model="item.CheckList" @change="handleCheckChange(item)">
              <el-checkbox :disabled="contractType!=='补充协议'&&tag.PermissionName==='宏观经济'" :label="tag.ChartPermissionId" v-for="tag in item.Items" :key="tag.ChartPermissionId">{{ tag.PermissionName }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div style="text-align:center">
          <el-button type="primary" @click="handleSaveOpt" size="large">保存</el-button>
          <el-button type="primary" plain @click="closeOpt" size="large">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 新增列填写表头弹窗 -->
    <el-dialog v-model="showInputHead" :modal-append-to-body="false" width="560px" top="20vh" v-dialogDrag>
      <template #header>
        <img style="vertical-align: middle" width="20" src="../../../assets/img/icons/add_icon.png" alt="" />
        <span style="vertical-align: middle">添加列</span>
      </template>
      <el-form :model="form" ref="headTitleForm" :rules="formRule" label-width="100px" @submit.native.prevent>
        <el-form-item label="表格名称" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <div style="text-align: center; margin-top: 70px; margin-bottom: 30px">
          <el-button type="primary" @click="handleConfirmHead" size="large">保存</el-button>
          <el-button type="primary" plain @click="handleCancelHead" size="large">取消</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 右键选项弹框 -->
    <div class="right-click-wrap" :style="position" v-show="showRightClickMenu">
      <div @click="handleUpdateTable(item.type)" v-for="item in rightClickCon" :key="item.type">{{ item.name }}</div>
    </div>

    <!-- 生成表格图片dom -->
    <table id="table-png" class="table-wrap">
      <thead>
        <tr style="background: #f0f2f5">
          <th class="table-item" v-for="item in tableHeadData" :key="item.Value" style="color: #333;font-size:15px">{{ item.Value }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rindex) in tableData" :key="rindex">
          <td class="table-item" v-for="item in row" :key="item" style="max-width: 300px">
            <div v-html="item.Value" style="color: #333;font-size:14px"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style>
.self-dialog-c .el-dialog__header {
  background-color: #fff;
  padding: 15px 20px 0 20px !important;
}
.self-dialog-c{
  width: 60%;
}

/* .el-checkbox{
  margin-bottom: 20px;
} */
.table-item .el-checkbox__label {
  font-size: 14px !important;
}
.type-select-wrap .el-checkbox{
  margin-bottom: 10px;
}
.type-select-wrap .el-checkbox__label {
  font-size: 14px !important;
}
</style>

<style lang="scss" scoped>
.img{
  image-rendering: -moz-crisp-edges; 
  image-rendering: -o-crisp-edges; 
  image-rendering: -webkit-optimize-contrast; 
  image-rendering: crisp-edges; 
  -ms-interpolation-mode: nearest-neighbor;
}


.self-dialog-c .title {
  text-align: center;
  font-size: 18px;
  color: #333;
}
.flex {
  display: flex;
}
.table-wrap {
  position: relative;
  width: 100%;
  text-align: center;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  .row-dark {
    background-color: #deedff;
  }
  .table-item {
    padding: 20px 10px;
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    min-width: 160px;
    position: relative;
    .table-item-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0);
      z-index: 1000;
    }
    .choose-icon{
      position: absolute;
      top: 50%;
      left: 10px;
      transform:translateY(-50%);
    }
  }
}
.right-click-wrap {
  border-radius: 4px;
  background-color: #fff;
  padding: 10px 0;
  position: fixed;
  z-index: 5000;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  line-height: 2;
  div {
    cursor: pointer;
    padding: 0 20px;
    &:hover {
      background-color: #ebeef5;
    }
  }
}

.type-select-wrap {
  margin-bottom: 30px;
  .type-select-box {
    // margin-top: 20px;
    padding: 20px 30px 0 30px;
    border: 1px dashed #aab4cc;
    border-radius: 4px;
    margin-bottom: 20px;
  }
}


#table-png {
  position: absolute;
  z-index: -10;
  top: -100%;
  left: 0;
  width: 1000px;
}
</style>