归档申请和审核添加逻辑。

src/api/apply/index.ts

@@ -45,3 +45,18 @@ export function getExcelData(formId: string) {
     method: "get",
   });
 }
+
+// 上传表格数据流
+export function uploadExcelBlob(blobData: Blob, formDataId: string) {
+  const formData = new FormData();
+  formData.append("file", blobData);
+  formData.append("formDataId", formDataId);
+  return request({
+    url: "/api/v1/base/uploadFormExcel",
+    method: "post",
+    data: formData,
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+}

src/components/ExcelView/export.js

@@ -46,6 +46,53 @@ function exportExcel(luckysheet, name, excelType) {
   return buffer;
 }
 
+function getExcelBlob(luckysheet, name, excelType) {
+  // 1.创建工作簿，可以为工作簿添加属性
+  const workbook = new Excel.Workbook();
+  // 2.创建表格，第二个参数可以配置创建什么样的工作表
+  luckysheet.forEach(function (table) {
+    // debugger
+    if (table.data.length === 0) return true;
+    const worksheet = workbook.addWorksheet(table.name);
+    const merge = (table.config && table.config.merge) || {}; //合并单元格
+    const borderInfo = (table.config && table.config.borderInfo) || {}; //边框
+    const columnWidth = (table.config && table.config.columnlen) || {}; //列宽
+    const rowHeight = (table.config && table.config.rowlen) || {}; //行高
+    const frozen = table.frozen || {}; //冻结
+    const rowhidden = (table.config && table.config.rowhidden) || {}; //行隐藏
+    const colhidden = (table.config && table.config.colhidden) || {}; //列隐藏
+    const filterSelect = table.filter_select || {}; //筛选
+    const hide = table.hide; //工作表 sheet 1隐藏
+    if (hide === 1) {
+      // 隐藏工作表
+      worksheet.state = "hidden";
+    }
+    setStyleAndValue(table.data, worksheet);
+    setMerge(merge, worksheet);
+    setBorder(borderInfo, worksheet);
+    setImages(table, worksheet, workbook);
+    setColumnWidth(columnWidth, worksheet);
+    //行高设置50导出后在ms-excel中打开显示25，在wps-excel中打开显示50这个bug不会修复
+    setRowHeight(rowHeight, worksheet, excelType);
+    setFrozen(frozen, worksheet);
+    setRowHidden(rowhidden, worksheet);
+    setColHidden(colhidden, worksheet);
+    setFilter(filterSelect, worksheet);
+    return true;
+  });
+  const buffer = workbook.xlsx.writeBuffer().then((data) => {
+    // console.log('data', data)
+    const blob = new Blob([data], {
+      type: "application/vnd.ms-excel;charset=utf-8",
+    });
+
+    return new Promise((resolve, reject) => {
+      resolve(blob);
+    });
+  });
+  return buffer;
+}
+
 /**
  * 列宽
  * @param columnWidth
@@ -850,4 +897,4 @@ function colorRGBtoHex(color) {
   var b = parseInt(rgb[2]);
   return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 }
-export { exportExcel };
+export { exportExcel, getExcelBlob };

src/components/ExcelView/index.vue

@@ -38,7 +38,7 @@
 
 <script setup>
 import { ref, onMounted, watch } from "vue";
-import { exportExcel } from "./export";
+import { exportExcel, getExcelBlob } from "./export";
 import LuckyExcel from "luckyexcel";
 import resData from "./resetData";
 const props = defineProps({
@@ -170,6 +170,16 @@ const leadingExcel = (item, fileList) => {
 const downloadExcel = () => {
   exportExcel(luckysheet.getAllSheets(), "导出表格");
 };
+
+const toGetExcelBlob = () => {
+  let promise = getExcelBlob(luckysheet.getAllSheets(), "导出表格");
+  return promise.then((blob) => {
+    return new Promise((resolve, reject) => {
+      resolve(blob);
+    });
+  });
+};
+
 //获取此时表格数据
 const confirm = () => emits("confirm", luckysheet.getAllSheets());
 //销毁
@@ -222,7 +232,7 @@ const setVerification = () => {
     }
   }
 };
-defineExpose({ confirm, reset, saveCellData, getRangeAxis });
+defineExpose({ confirm, reset, saveCellData, getRangeAxis, toGetExcelBlob });
 onMounted(() => {
   if (props.data == null) {
     inName.value = "表格模版";

src/views/base/apply/apply.vue

@@ -134,8 +134,9 @@
       title="详情"
       @close="excelShow = false"
       width="1600"
+      destroy-on-close
     >
-      <proWorkOrderExcel :data="ExDataObj" @close="excelShow = false" />
+      <ExcelDataBbox :data="ExDataObj" @close="excelShow = false" />
     </el-dialog>
   </div>
 </template>
@@ -148,6 +149,7 @@ import {
   getExcelData,
 } from "@/api/apply";
 import { getUserList } from "@/api/system/user";
+import ExcelDataBbox from "@/views/base/apply/excelDataBbox.vue";
 const props = defineProps({
   rowData: {
     type: Object,

src/views/base/apply/excelDataBbox.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="dialogBody">
+    <!-- 生产随工单 -->
+    <div class="exView" :key="excelKey1">
+      <ExcelView
+        ref="excelViewRef"
+        :option="options"
+        @confirm="confirm"
+        v-model:data="exceldata"
+        :checkStatus="true"
+        :verifications="setting"
+      />
+    </div>
+    <div class="btns" v-if="options.edit !== false">
+      <!-- <el-button class="btn" type="success" @click="submit">确 定 </el-button>
+      <el-button class="btn" type="info" @click="cancel">取 消 </el-button> -->
+    </div>
+    <div class="btns" v-else>
+      <el-button class="btn" type="info" @click="cancel">返 回 </el-button>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import { updateProExcel } from "@/api/excel/index.ts";
+import ExcelView from "@/components/ExcelView/index.vue";
+import { uploadExcelBlob } from "@/api/apply/index";
+const setting = ref([]);
+const props = defineProps({
+  data: {
+    type: Object,
+  },
+});
+const rowData = ref({});
+const emits = defineEmits(["update:modelValue", "close", "refresh"]);
+const excelKey1 = ref(false);
+const submit = async () => {
+  //@ts-ignore
+  excelViewRef.value.confirm();
+  const { data, code } = await updateProExcel({
+    excelData: JSON.stringify(exceldata.value),
+    id: rowData.value.id,
+  });
+  if (code == "200") {
+    ElMessage.success("修改成功！");
+    cancel();
+  }
+};
+const cancel = () => {
+  excelKey1.value = !excelKey1.value;
+  emits("close");
+};
+// 存放操作表格相关业务代码
+const useAddTemplateHook = () => {
+  //excelView 组件实例
+  const excelViewRef = ref(null);
+  //表格配置项
+  const options = ref({
+    //头部操作区域
+    opreaState: true,
+    //导入按钮展示
+    in: false,
+    //导出按钮展示
+    out: true,
+    print: true,
+    //编辑状态 false：为查看状态
+    edit: true,
+    //当前操作表格名称
+    inName: "",
+    opreaTitle: false,
+  });
+  //双向绑定表格data变量
+  const exceldata = ref(null);
+  //控制表格组件展示界面变量（包括表格展示页面和操作页面）
+  const excelStatus = ref(true);
+
+  //获取组件内实时数据赋值到外层
+  const confirm = (data) => {
+    exceldata.value = data;
+  };
+  return {
+    excelStatus,
+    options,
+    confirm,
+    exceldata,
+    excelViewRef,
+  };
+};
+const { options, confirm, exceldata, excelViewRef } = useAddTemplateHook();
+const useFormHook = () => {
+  //KEY告知组件刷新
+  const excelKey = ref(1);
+  //表单data
+  const formVlaue = reactive({ formType: null, formName: null, state: null });
+  //表单是否为编辑状态变量
+  const operaEditStatus = ref(false);
+  //选中的行id
+  const selectId = ref(null);
+  //表单ref实例
+  const formRef = ref(null);
+  //表单校验规则
+  const rules = reactive({
+    formName: [
+      {
+        required: true,
+        trigger: "blur",
+      },
+    ],
+    formType: [
+      {
+        required: true,
+        trigger: "blur",
+      },
+    ],
+    state: [
+      {
+        required: true,
+        trigger: "blur",
+      },
+    ],
+  });
+  //新增模版
+  const submitForm = async (formEl) => {
+    //@ts-ignore;
+    excelViewRef.value.confirm();
+    if (exceldata.value == null) return ElMessage.error("请提供表格数据！");
+    if (!formEl) return;
+    await formEl.validate(async (valid, fields) => {
+      if (valid) {
+        const { data, code } = await addExcel({
+          ...formVlaue,
+          excelData: exceldata.value,
+        });
+        if (code == "200") {
+          ElMessage.success("添加成功！");
+          resetData();
+          dataEditList();
+          editTep(data);
+        }
+      }
+    });
+  };
+  //更新行内信息
+  const updateExForm = async (formEl) => {
+    //@ts-ignore;
+    excelViewRef.value.saveCellData();
+    //@ts-ignore;
+    excelViewRef.value.confirm();
+    if (exceldata.value == null) return ElMessage.error("请提供表格数据！");
+    if (!formEl) return;
+    await formEl.validate(async (valid, fields) => {
+      if (valid) {
+        const { data, code } = await updateExcel({
+          ...formVlaue,
+          excelData: exceldata.value,
+          id: selectId.value,
+          settings: settings.value,
+        });
+        if (code == "200") {
+          ElMessage.success("修改成功！");
+          resetData();
+          dataEditList();
+        }
+      }
+    });
+  };
+  //表达数据重置
+  const resetForm = (formEl) => {
+    if (!formEl) return;
+    formEl.resetFields();
+  };
+  return {
+    formVlaue,
+    formRef,
+    rules,
+    selectId,
+    excelKey,
+    operaEditStatus,
+    submitForm,
+    resetForm,
+    updateExForm,
+  };
+};
+
+const {
+  formVlaue,
+  formRef,
+  rules,
+  selectId,
+  excelKey,
+  operaEditStatus,
+  submitForm,
+  resetForm,
+  updateExForm,
+} = useFormHook();
+//表格新增 分页
+const useAddFormHook = () => {
+  const formRef1 = ref(null);
+  const settings = ref([]);
+  const searchForm = ref({
+    pageNo: 1,
+    pageSize: 5,
+    totalPages: 0,
+  });
+  const addForm = ref({
+    paramName: "",
+    position: "",
+  });
+  const addPage = () => {
+    searchForm.value.pageNo = searchForm.value.pageNo + 1;
+    getSettingData();
+  };
+  const deletePage = () => {
+    searchForm.value.pageNo = searchForm.value.pageNo - 1;
+    getSettingData();
+  };
+  const getSettingData = async () => {
+    const { data } = await getSettingsData({
+      excelFormId: selectId.value,
+      ...searchForm.value,
+    });
+    settings.value = data.records;
+    if (settings.value.length == 0 && searchForm.value.pageNo > 1) {
+      deletePage();
+    }
+    searchForm.value.totalPages = data.totalPages;
+  };
+  const addSettings = async () => {
+    const { data, code } = await addSettingsData({
+      excelFormId: selectId.value,
+      ...addForm.value,
+    });
+    if (code == "200") {
+      ElMessage.success("添加成功");
+      resetAddForm();
+      getSettingData();
+    }
+  };
+  const deleteSettings = async (id) => {
+    const { data, code } = await deleteSettingsData({ id: id });
+    if (code == "200") {
+      ElMessage.success("删除成功");
+      getSettingData();
+    }
+  };
+
+  const resetAddForm = () => {
+    addForm.value = {
+      paramName: "",
+      position: "",
+    };
+    searchForm.value = {
+      pageNo: 1,
+      pageSize: 5,
+      totalPages: 0,
+    };
+    settings.value = [];
+  };
+  const creatAddForm = async () => {
+    await formRef1.value.validate(async (valid, fields) => {
+      if (valid) {
+        addSettings();
+      }
+    });
+  };
+  const addRules = reactive({
+    paramName: [
+      {
+        required: true,
+        trigger: "blur",
+      },
+    ],
+    position: [
+      {
+        required: true,
+        trigger: "blur",
+      },
+    ],
+  });
+  return {
+    formRef1,
+    addForm,
+    searchForm,
+    settings,
+    addRules,
+    creatAddForm,
+    resetAddForm,
+    getSettingData,
+    addSettings,
+    addPage,
+    deleteSettings,
+    deletePage,
+  };
+};
+
+const {
+  formRef1,
+  addForm,
+  searchForm,
+  settings,
+  addRules,
+  creatAddForm,
+  deletePage,
+  addPage,
+  resetAddForm,
+  getSettingData,
+  deleteSettings,
+} = useAddFormHook();
+watch(
+  () => props.data,
+  () => {
+    //@ts-ignore
+    rowData.value = props.data;
+    exceldata.value = JSON.parse(rowData.value.excelData);
+    excelKey1.value = !excelKey1.value;
+    if (rowData.value.lookStatus == true) {
+      options.value.edit = false;
+    }
+    setting.value = rowData.value.settings;
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  setTimeout(() => {
+    let blobPromese = excelViewRef.value.toGetExcelBlob();
+    blobPromese.then((res) => {
+      console.log("=========", res);
+      uploadExcelBlob(res, props.data.id);
+    });
+  }, 1000);
+});
+</script>
+<style lang="scss" scoped>
+.dialogBody {
+  width: 1560px;
+  height: 560px;
+  display: flex;
+  .exView {
+    width: 1330px;
+    height: 560px;
+    display: flex;
+    position: relative;
+  }
+  .btns {
+    width: 200px;
+    height: 560px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 40px 0 0 20px;
+    .btn {
+      width: 100%;
+      margin: 10px;
+    }
+  }
+}
+</style>

src/views/base/check/check.vue

@@ -154,7 +154,7 @@
       @close="excelShow = false"
       width="1600"
     >
-      <proWorkOrderExcel :data="ExDataObj" @close="excelShow = false" />
+      <ExcelDataBbox :data="ExDataObj" @close="excelShow = false" />
     </el-dialog>
   </div>
 </template>
@@ -167,6 +167,7 @@ import {
   toCheckRes,
 } from "@/api/apply";
 import { getUserList } from "@/api/system/user";
+import ExcelDataBbox from "@/views/base/apply/excelDataBbox.vue";
 const props = defineProps({
   rowData: {
     type: Object,

src/views/base/check/index.vue

@@ -75,7 +75,7 @@ const showApply = (row) => {
 };
 const dialog = ref({
   visible: false,
-  title: "归档申请",
+  title: "归档审核",
 });
 
 // 传入一个url，后面不带/