chengfei-test-system/src/components/ExcelView/index.vue

<template>
  <!-- <div class="oprea" v-if="option.opreaState">
    <div class="header">
      <div style="display: flex">
        <span class="btn" v-if="option.out" @click="downloadExcel">导 出</span>
        <el-upload
          accept=".xlsx"
          ref="upload"
          :on-change="leadingExcel"
          :auto-upload="false"
          :show-file-list="false"
          class="in"
          v-if="option.in"
        >
          <template #trigger>
            <span class="btn">导 入</span>
          </template>
        </el-upload>
      </div>
      <div class="info" v-if="option.opreaTitle">
        当前操作表格：{{ inName == "" ? "-" : inName }}
      </div>
    </div>
  </div> -->
  <div style="display: none">
    <el-upload
      accept=".xlsx"
      ref="upload"
      :on-change="leadingExcel"
      :auto-upload="false"
      :show-file-list="false"
      class="in"
      id="excelImport"
    >
      <template #trigger>
        <span class="btn">导 入</span>
      </template>
    </el-upload>
  </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>
</template>

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

const props = defineProps({
  //双向绑定的data
  data: {
    type: [Object, null],
    default: null,
  },
  //配置项
  option: {
    type: Object,
    default: () => ({
      //控制上部分展示
      opreaState: false,
      in: true,
      out: true,
      print: true,
      edit: true,
      inName: "",
      opreaTitle: true,
    }),
  },
  //校验区域
  verifications: {
    type: Array,
    default: () => [],
  },
  //校验状态
  checkStatus: {
    type: Boolean,
    default: false,
  },
});
const selectCellValue = ref("");
//update:data ： v-model表格data ，confirm : 获取此时表格data downloadExcel:导出表格
const emits = defineEmits(["update:data", "confirm"]);
//新增默认表格data
const resetdata = JSON.parse(resData);
//展示名称
const inName = ref("");
//loading 变量
const isMaskShow = ref(false);
//坐标
const positionVal = ref({ x: 0, y: 0 });
//表格初始化默认值
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页显示
  },
  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,
  hook: {
    cellMousedown: function (cell, position, sheetIndex) {
      positionVal.value.x = position.c;
      positionVal.value.y = position.r;
      // console.log(positionVal.value, "222");
      selectCellValue.value = window.luckysheet.getCellValue(
        position.c,
        position.r,
        {
          type: "m",
        }
      );
    },
  },
});
//设置第一个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;
  console.log("file", file);
  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 importExcel = () => {
  var element = document.getElementById("excelImport");
  element.firstElementChild.click();
};
//导出
const downloadExcel = (name = "导出表格") => {
  exportExcel(luckysheet.getAllSheets(), name);
};

const toGetExcelBlob = () => {
  let promise = getExcelBlob(luckysheet.getAllSheets(), "导出表格");
  return promise.then((blob) => {
    return new Promise((resolve, reject) => {
      resolve(blob);
    });
  });
};
//设置单元格值
const setCellValue = (val) => {
  setTimeout(() => {
    luckysheet.setCellValue(positionVal.value.y, positionVal.value.x, val);
  }, 0);
};
//获取此时表格数据
const confirm = () => emits("confirm", luckysheet.getAllSheets());
//获取此时表格数据
const getExcelData = () => {
  return luckysheet.getAllSheets();
};
//销毁
const reset = () => {
  luckysheet.destroy();
};
const getRangeAxis = () => {
  return luckysheet.getRangeAxis();
};
//保存当次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 }
      );
    }
  }
};
defineExpose({
  confirm,
  reset,
  saveCellData,
  getRangeAxis,
  toGetExcelBlob,
  downloadExcel,
  importExcel,
  getExcelData,
  selectCellValue,
  setCellValue,
});
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();
//       }
//     });
//   },
//   { 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 {
      width: 80px;
      border-radius: 16px;
      height: 40px;
      font-size: 20px;
      margin: 0 10px;
      border: 2px dashed #000;
      font-weight: 500;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .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>