JG-CLIENT-TEMP/src/components/ExcelView/index.vue

<template>
  <div v-if="option.opreaState" class="oprea">
    <div class="header">
      <div style="display: flex">
        <span v-if="option.out" class="btn" @click="downloadExcel">导出</span>
        <!-- <el-button
          type="primary"
          class="btn"
          v-if="option.out"
          @click="print"
          v-print="'#print_html'"
          >打印</el-button
        > -->
        <el-upload
          v-if="option.in"
          ref="upload"
          :auto-upload="false"
          :on-change="leadingExcel"
          :show-file-list="false"
          accept=".xlsx"
          class="in"
        >
          <!--          <template #trigger>
            <span class="btn">导入</span>
          </template>-->
        </el-upload>
        <span class="btn" v-if="option.set" @click="toHardware">开始测试</span>
      </div>
      <div class="info">当前操作表格：{{ inName == "" ? "-" : inName }}</div>
    </div>
  </div>
  <div
    id="luckysheet"
    :style="{
      top:
        option.opreaState == false ||
        option.edit == false ||
        (option.in == false && option.out == false && option.confirm == false)
          ? 0
          : 60,
    }"
  ></div>
  <div v-show="isMaskShow" id="tip">Downloading</div>
  <div id="print_html" style="text-align: center"></div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { exportExcel } from "./export";
import { getExcelData } from "@/api/excel";
import LuckyExcel from "luckyexcel";
import resData from "./resetData";

const props = defineProps({
  //双向绑定的data
  data: {
    type: [Object, null],
    default: null,
  },
  //配置项
  option: {
    type: Object,
    default: () => ({
      //控制上部分展示
      opreaState: true,
      set: false,
      in: true,
      out: true,
      print: true,
      edit: true,
      inName: "",
    }),
  },
  //校验区域
  verifications: {
    type: Array,
    default: () => [],
  },
  //校验状态
  checkStatus: {
    type: Boolean,
    default: false,
  },
});

const toHardware = async () => {
  const { data, code } = await getExcelData();
  if (code == "200") {
    ElMessage.success("硬件调取成功！");
  }
};

//update:data ： v-model表格data ，confirm : 获取此时表格data
const emits = defineEmits(["update:data", "confirm"]);
//新增默认表格data
const resetdata = JSON.parse(resData);
//展示名称
const inName = ref("");
//loading 变量
const isMaskShow = ref(false);
//表格初始化默认值
const resetOb = ref({
  container: "luckysheet", // 设定DOM容器的id
  title: "Luckysheet Demo", // 设定表格名称
  lang: "zh", // 设定表格语言
  enableAddBackTop: true, //返回头部按钮
  userInfo: false, // 右上角的用户信息展示样式
  showinfobar: false, // 是否显示顶部信息栏
  showConfigWindowResize: true, // 自动缩进界面
  column: 30,
  row: 30,
  showsheetbar: false, // 是否显示底部sheet页按钮
  showsheetbarConfig: {
    add: false, //新增sheet
    menu: false, //sheet管理菜单
    sheet: false, //sheet页显示
    print: false,
  },
  cellRightClickConfig: {
    //右键单元格菜单设置
    copy: true, // 复制
    copyAs: true, // 复制为
    paste: true, // 粘贴
    insertRow: true, // 插入行
    insertColumn: true, // 插入列
    deleteRow: true, // 删除选中行
    deleteColumn: true, // 删除选中列
    deleteCell: true, // 删除单元格
    hideRow: true, // 隐藏选中行和显示选中行
    hideColumn: true, // 隐藏选中列和显示选中列
    rowHeight: true, // 行高
    columnWidth: true, // 列宽
    clear: true, // 清除内容
    matrix: true, // 矩阵操作选区
    sort: true, // 排序选区
    filter: true, // 筛选选区
    chart: true, // 图表生成
    image: true, // 插入图片
    link: true, // 插入链接
    data: true, // 数据验证
    cellFormat: true, // 设置单元格格式
  },
  data: null,
});
//print
const print = () => {
  console.log(luckysheet);
  $("#luckysheet-left-top").click();
  // 2. 生成选区的截图
  let src = luckysheet.getScreenshot();
  let $img = `<img src=${src} style="max-width: 90%;" />`;
  nextTick(() => {
    document.querySelector("#print_html").innerHTML = $img;
  });
};
//设置第一个sheet
const getActiveSheet = (sheets = []) => {
  let data = [];
  // 取激活项
  sheets.some((item) => {
    if (item.status === "1") {
      data.push(item);
      return true;
    }
  });
  // 没有激活项，取第一项
  if (data.length === 0) {
    data.push(sheets[0]);
  }
  return data;
};
//导入
const leadingExcel = (item, fileList) => {
  const file = item.raw;
  if (file == null || file.name == "") {
    return;
  }
  let name = file.name;
  let suffixArr = name.split("."),
    suffix = suffixArr[suffixArr.length - 1];
  if (suffix != "xlsx") {
    ElMessage.error("请导入xlsx格式的文件");
    return;
  }
  LuckyExcel.transformExcelToLucky(file, function (exportJson, luckysheetfile) {
    if (exportJson.sheets == null || exportJson.sheets.length == 0) {
      ElMessage.error("请导入xlsx格式的文件");
      return;
    }
    window.luckysheet.destroy();
    const data = getActiveSheet(exportJson.sheets);
    resetOb.value.data = data;
    emits("update:data", data);
    inName.value = file.name;
    window.luckysheet.create(resetOb.value);
  });
};
//导出
const downloadExcel = () => {
  exportExcel(luckysheet.getAllSheets(), "导出表格");
};
//获取此时表格数据
const confirm = () => emits("confirm", luckysheet.getAllSheets());
const getData = () => luckysheet.getAllSheets();
//销毁
const reset = () => {
  luckysheet.destroy();
};
//保存当次cell数据
const saveCellData = () => {
  const enter = () => {
    let event = new KeyboardEvent("keydown", {
      key: "Enter",
      code: "Enter",
      keyCode: 13,
      which: 13,
      shiftKey: false,
      ctrlKey: false,
      altKey: false,
      metaKey: false,
      bubbles: true,
      cancelable: true,
    });
    // 分发事件到document
    document.dispatchEvent(event);
  };
  enter();
};
//配置单元格校验
const setVerification = () => {
  for (let i = 0; i < props.verifications.length; i++) {
    if (
      !props.verifications[i].checkStr ||
      props.verifications[i].checkStr === ""
    ) {
    } else {
      let option = {
        type: "number",
        type2: "bw",
        value1: JSON.parse(props.verifications[i].checkStr).down,
        value2: JSON.parse(props.verifications[i].checkStr).up,
        hintShow: true,
        hintText: `请输入${JSON.parse(props.verifications[i].checkStr).down}-${JSON.parse(props.verifications[i].checkStr).up}的数字`,
      };
      luckysheet.setDataVerification(
        { ...option },
        { range: props.verifications[i].position }
      );
    }
  }
};
const setVal = (obj) => {
  Object.keys(obj).forEach((key) => {
    let val = obj[key];
    const { row, col } = getRowCol(key);
    luckysheet.setCellValue(row, col, val);
  });
};
const getRowCol = (str) => {
  const [letterPart, numberPart] = str.match(/([A-Z]+)(\d+)/).slice(1);
  let col = 0;
  for (let i = 0; i < letterPart.length; i++) {
    col = col * 26 + (letterPart.charCodeAt(i) - "A".charCodeAt(0));
  }
  const row = parseInt(numberPart, 10) - 1;
  console.log(row, col);
  return { row, col };
};
defineExpose({ confirm, reset, saveCellData, getData });
onMounted(() => {
  if (props.data == null) {
    inName.value = "表格模版";
    resetOb.value.data = resetdata;
  } else {
    inName.value = props.option.inName;
    resetOb.value.data = props.data;
  }
  if (props.option.edit == false) {
    resetOb.value.allowEdit = false;
  }
  luckysheet.create(resetOb.value);
});
watch(
  () => props.verifications,
  () => {
    nextTick(() => {
      if (props.checkStatus == true && props.verifications.length > 0) {
        setVerification();
      }
      window.luckysheet.setVal = setVal;
    });
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.oprea {
  padding: 0 20px;
  width: 100%;
  height: 60px;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .in {
      display: inline-block;
      margin-top: 1px;
    }

    .btn {
      border-radius: 16px;
      height: 40px;
      font-size: 20px;
      margin: 0 10px;
      border: 2px dashed #000;
      font-weight: 500;
      @include flex;
    }

    .info {
      width: 260px;
    }
  }
}

#luckysheet {
  margin: 0px;
  padding: 0px;
  position: absolute;
  width: 100%;
  left: 0px;
  top: 50px;
  bottom: 0px;
}

#uploadBtn {
  font-size: 16px;
}

#tip {
  position: absolute;
  z-index: 1000000;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
}
</style>