epmet-work-pc/src/views/modules/base/smartExcel/cpts/share-excel.vue

<template>
    <div class='flex'>
      <div :class="['flex', 'flex-y', 'flex1', sheetTotal ? 'luckysheet-wrap' : 'luckysheet-wrap-all']">
        <div class="top_btn flex flex-end">
          <div>
            <el-button type="text" round @click="handelClickBack" 
              icon="el-icon-back">返回</el-button>
              <el-button type="warning"  @click="handleClickInspect">上传统计模板
                </el-button>
            <el-button type="success" @click="onClickUplond()"> 数据列表导出</el-button>
          </div>
          <div>
            <el-button type="danger"
              @click="handleClickCurrencyEvent('rejected')"> 取消</el-button>
            <el-button type="primary" 
              @click="handleClickCurrencyEvent('submit')"> 提交</el-button>
          </div>
        </div>
        <div id="luckysheet"></div>
      </div>
      <el-dialog title="数据列表导出" v-if="showUploadData" :visible.sync="showUploadData" width="60%"
        :close-on-click-modal="false">
        <excelUploadData @handleUploadDataHide="handleUploadDataHide" :currentTable="currentTable"
          :btnLoading="btnLoading">
        </excelUploadData>
      </el-dialog>
    </div>
  </template>
  <script>
  import excelUploadData from './excel-upload-data.vue';
  import LuckyExcel from 'luckyexcel';
  import options from "@/utils/luckysheetConfig.js";
  import { mapGetters } from 'vuex'
  import { requestPost, requestGet } from "@/js/dai/request";
  import nextTick from "dai-js/tools/nextTick";
  
  
  export default {
    data() {
      return {
        showUploadData: false,
        menuList: [],
        menuActive: 0,
        socket: null,
        currentTable: null,
        currentId: '',
        btnLoading: false,
      };
    },
    props: {
      workbookId: {
        type: String,
        default: ''
      },
      pageType: {
        type: String,
        default: ''
      },
      sheetTotal: {
        type: Boolean,
        default: false
      },
      infoObj: {
        type: Object,
        default: () => { }
      },
      mergeObj: {
        type: Object,
        default: () => { }
      },
      userId: {
        type: String,
        default: ''
      },
      taskStateName: {
        type: String,
        default: ""
      },
    },
    computed: {
      tableHeight() {
        return (this.clientHeight - 140) + 'px'
      },
      ...mapGetters(['clientHeight', 'resolution']),
    },
    async created() {
  
    },
    watch: {},
    async mounted() {
      console.log( "dskjlfsdklf");
      // if (this.sheetTotal) {
      //   this.currentId = this.workbookId;
      //   this.loadWorkBook()
      // } else {
      //   this.getTaskList()
      // }
      this.loadWorkBook()
    },
    methods: {
      handleClickCurrencyEvent(){
        var objsheet = luckysheet.getAllSheets()[0] // 得到表的数据
        console.log(objsheet,"打算离开房间四点零分");
        
        // this.options = objsheet // 将表的数据保存本地
        // this.postsheet()
      },
      // async postsheet() {
      //   var strsheet = await JSON.stringify(this.options)// 对象转化为字符串
      //   const sheetinfo = { id: 1, filename: strsheet }// 拼接成对象
      //   // await updata(sheetinfo)// 传递对象后台
      // },
  
      async handleClickInspect() {
        // 获取celldata并转换为list
        const list = luckysheet.getAllSheets()[0].celldata.map(item => ({
          r: item.r,
          c: item.c,
          v: item.v.v || ''
        }));
        // 发送请求获取异常数据
        let { data, code, msg } = await requestPost('/actual/base/intelligentImportData/checkData', list);
        if (code === 0) {
          if (data && data.length > 0) {
            for (const { r, c } of data) {
              luckysheet.setCellFormat(r, c, 'bg', '#f5504a');
            }
            const findArr = this.findUniqueElements(luckysheet.getAllSheets()[0].celldata, data);
            findArr.forEach(({ r, c, v }) => {
              if (v.bg === "#f5504a") {
                luckysheet.setCellFormat(r, c, 'bg', '#ffffff');
              }
            });
          } else {
            this.$message.success('没有找到异常');
          }
        }
      },
  
      findUniqueElements(A, B) {
        // 创建B中r和c组合的键集合
        const bCombinations = new Set(B.map(item => `${item.r},${item.c}`));
        // 过滤A中不存在于B的组合
        return A.filter(item => !bCombinations.has(`${item.r},${item.c}`));
      },
  
      onClickUplond() {
        this.showUploadData = true;
        let list = luckysheet.getAllSheets()
        this.currentTable = list.filter(item => item.status == '1')
  
      },
      async handleUploadDataHide(val) {
        this.showUploadData = false;
        luckysheet.insertRow(this.currentTable[0].data.length, 1)
        const findLastNonNullIndex = (arr) => {
          for (let i = arr.length - 1; i >= 0; i--) {
            const subArray = arr[i];
            // 判断：是数组，且至少有一个不为 null 的元素
            if (Array.isArray(subArray) && subArray.some(item => item !== null && item.v && item.v !== null && item.v !== '')) {
              return i;  // 返回下标
            }
          }
          return -1;  // 如果没有符合条件的，返回 -1
        };
        this.sheetR = findLastNonNullIndex(this.currentTable[0].data)
        console.log(this.currentTable[0].data.length, val.length);
        luckysheet.insertRow(this.currentTable[0].data.length, { number: val.length });
        await nextTick(2000)
        let newArray = val.map(obj => {
          return Object.keys(obj).map(key => {
            return { m: obj[key], "ct": { "fa": "General", "t": "g" }, v: obj[key] };
          });
        });
        console.log(newArray, '处理后数据');
        let bottomRightCorner = this.numberToLetter(Object.keys(val[0]).length)//选区右下角数字
        luckysheet.setRangeValue(newArray, {
          range: `A${this.sheetR + 2}:${bottomRightCorner}${this.sheetR + val.length}`,
        })
      },
      // 数字转换对应顺序英文
      numberToLetter(num) {
        let letter = '';
        while (num > 0) {
          num -= 1; // 调整为从 0 开始（即 1 -> 'A'，2 -> 'B'，...）
          letter = String.fromCharCode(num % 26 + 65) + letter; // 65 是 'A' 的 Unicode 编码
          num = Math.floor(num / 26);
        }
        return letter;
      },
      handleCellEditBefore(){
        console.log("sdfk;s.dkf");
        
      },
  
      loadWorkBook() {
        window.luckysheet.destroy();
        const { id } = this.$store.state.user;
        options.gridKey = this.currentId;
        options.allowUpdate = true;
        options.container = 'luckysheet'
        // options.loadUrl = `${process.env.VUE_APP_API_SERVER}/actual/base/luckySheet/workbook/load?workbookId=${this.currentId}`
        // options.updateUrl = `${process.env.VUE_APP_SOCKET_SERVER}/actual/base/ws/luckysheet/${this.currentId}/${id}`
        // options.loadSheetUrl = `${process.env.VUE_APP_API_SERVER}/actual/base/luckySheet/workbook/loadSheets`
        window.luckysheet.create({
          ...options,
          hook: {
            cellEditBefore: this.handleCellEditBefore,
            sheetCreateAfter: this.handleSheetCreateAfter,
          },
        });
      },
      handleSheetCreateAfter(e) {
        console.log('setsheet', e);
      },
      handelClickBack() {
        this.$emit('close')
      },
  
    },
    components: {
      excelUploadData
    },
    components: {
      excelUploadData
    },
    beforeDestroy() {
      this.$store.state.sidebarFold = false;
      if (this.socket) {
        this.socket.close();
      }
    },
  };
  </script>
  <style lang="scss" scoped>
  .el-card {
    margin: 10px auto;
    padding: 0 16px;
    box-sizing: border-box;
    width: calc(100% - 40px);
    border: none;
  }
  
  .luckysheet-wrap {
    margin: 10px;
    padding: 0px;
    z-index: 2;
    width: calc(100vw - 400px);
    height: calc(100vh - 250px);
  }
  
  .luckysheet-wrap-all {
    margin: 10px;
    padding: 0px;
    z-index: 2;
    width: calc(100vw - 100px);
    height: calc(100vh - 250px);
  }
  
  #luckysheet {
    width: 100%;
    padding: 0px;
    z-index: 2;
    height: calc(100% - 80px);
    margin: 10px;
  }
  
  .top_btn {
    height: 60px;
    width: 100%;
  }
  
  .upload-demo {
    position: absolute;
    z-index: 999999;
    margin: 20px 0 0 22px;
  }
  
  .right-slider {
    position: absolute;
    z-index: 999999;
    border: 1px solid #eeeeee;
    box-shadow: -5px 0px 5px 0px rgba(0, 0, 0, 0.2);
    background: #ffffff;
    margin: 10px 0 0 22px;
    right: 10px;
    width: 36%;
    height: calc(100% - 20px);
  }
  
  .el-header,
  .el-footer {
    text-align: left;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
  }
  
  .el-main {
    text-align: left;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
  }
  
  .el-container {
    display: flex;
    height: 100%;
    flex-direction: column;
  }
  
  .left_menu {
    width: 240px;
  
    .menu_item {
      cursor: pointer;
      padding: 10px 16px;
      box-sizing: border-box;
      margin-bottom: 5px;
      background-color: #f2f8fd;
      border-radius: 5px;
      font-size: 14px;
    }
  
    .active {
      color: #3989eb;
    }
  }
  </style>