feature/在线表格模版操作页面

src/components/ExcelView/index.vue

@@ -1,14 +1,7 @@
 <template>
   <div class="oprea" v-if="option.opreaState">
     <div class="header">
-      <div>
-        <el-button
-          type="primary"
-          class="btn"
-          v-if="option.confirm"
-          @click="confirm"
-          >保存</el-button
-        >
+      <div style="display: flex">
         <el-button
           type="primary"
           class="btn"
@@ -53,30 +46,33 @@ import { exportExcel } 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: true,
       in: true,
       out: true,
-      confirm: true,
       print: true,
       edit: true,
+      inName: "",
     }),
   },
 });
+//update:data ： v-model表格data ，confirm : 获取此时表格data
 const emits = defineEmits(["update:data", "confirm"]);
-const exceldata = ref(null);
+//新增默认表格data
 const resetdata = JSON.parse(resData);
+//展示名称
 const inName = ref("");
+//loading 变量
 const isMaskShow = ref(false);
-const selected = ref("");
-const confirm = () => emits("confirm", luckysheet.getAllSheets());
-let sheets = null;
 //表格初始化默认值
 const resetOb = ref({
   container: "luckysheet", // 设定DOM容器的id
@@ -86,10 +82,7 @@ const resetOb = ref({
   enableAddBackTop: true, //返回头部按钮
   userInfo: false, // 右上角的用户信息展示样式
   showinfobar: false, // 是否显示顶部信息栏
-  enableAddRow: false, // 是否允许添加行
-  enableAddBackTop: false, // 允许回到顶部
   showConfigWindowResize: true, // 自动缩进界面
-  // showtoolbar:false, // 工具栏
   column: 30,
   row: 30,
   showsheetbar: false, // 是否显示底部sheet页按钮
@@ -98,45 +91,7 @@ const resetOb = ref({
     menu: false, //sheet管理菜单
     sheet: false, //sheet页显示
   },
-  data: props.exceldata,
-  showtoolbarConfig: {
-    undoRedo: true, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
-    paintFormat: false, //格式刷
-    currencyFormat: false, //货币格式
-    percentageFormat: false, //百分比格式
-    numberDecrease: false, // '减少小数位数'
-    numberIncrease: false, // '增加小数位数
-    moreFormats: true, // '更多格式'
-    font: true, // '字体'
-    fontSize: true, // '字号大小'
-    bold: true, // '粗体 (Ctrl+B)'
-    italic: true, // '斜体 (Ctrl+I)'
-    strikethrough: true, // '删除线 (Alt+Shift+5)'
-    underline: true, // '下划线 (Alt+Shift+6)'
-    textColor: true, // '文本颜色'
-    fillColor: true, // '单元格颜色'
-    border: true, // '边框'
-    mergeCell: true, // '合并单元格'
-    horizontalAlignMode: true, // '水平对齐方式'
-    verticalAlignMode: true, // '垂直对齐方式'
-    textWrapMode: false, // '换行方式'
-    textRotateMode: false, // '文本旋转方式'
-    image: true, // '插入图片'
-    link: true, // '插入链接'
-    chart: false, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
-    postil: false, //'批注'
-    pivotTable: false, //'数据透视表'
-    function: false, // '公式'
-    frozenMode: false, // '冻结方式'
-    sortAndFilter: false, // '排序和筛选'
-    conditionalFormat: false, // '条件格式'
-    dataVerification: false, // '数据验证'
-    splitColumn: false, // '分列'
-    screenshot: false, // '截图'
-    findAndReplace: true, // '查找替换'
-    protection: false, // '工作表保护'
-    print: true, // '打印'
-  },
+  data: null,
 });
 //设置第一个sheet
 const getActiveSheet = (sheets = []) => {
@@ -176,12 +131,8 @@ const leadingExcel = (item, fileList) => {
     window.luckysheet.destroy();
     const data = getActiveSheet(exportJson.sheets);
     resetOb.value.data = data;
-    console.log(data, "data");
-    console.log("exportJson", exportJson);
     emits("update:data", data);
-    exceldata.value = data;
     inName.value = file.name;
-    console.log(exceldata.value, "22212312313");
     window.luckysheet.create(resetOb.value);
   });
 };
@@ -189,17 +140,43 @@ const leadingExcel = (item, fileList) => {
 const downloadExcel = () => {
   exportExcel(luckysheet.getAllSheets(), "TDM-excel");
 };
+//获取此时表格数据
+const confirm = () => emits("confirm", luckysheet.getAllSheets());
+//销毁
 const reset = () => {
   luckysheet.destroy();
 };
-defineExpose({ confirm, reset });
+//保存当次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();
+};
+defineExpose({ confirm, reset, saveCellData });
 onMounted(() => {
   if (props.data == null) {
-    exceldata.value = resetdata;
-    console.log(exceldata.value, "1");
+    inName.value = "表格模版";
+    resetOb.value.data = resetdata;
   } else {
-    console.log(props.data, "22");
-    exceldata.value = props.data;
+    inName.value = props.option.inName;
+    resetOb.value.data = props.data;
+  }
+  if (props.option.edit == false) {
+    resetOb.value.allowEdit = false;
   }
   luckysheet.create(resetOb.value);
 });
@@ -216,6 +193,7 @@ onMounted(() => {
     justify-content: space-between;
     .in {
       display: inline-block;
+      margin-top: 1px;
     }
     .btn {
       width: 80px;

src/store/modules/dictionary.ts

@@ -29,6 +29,8 @@ export const useDictionaryStore = defineStore("dictionaryStore", () => {
     "defect_mana",
     "disposal_measures_type",
     "process_check_result",
+    "excel_type",
+    "excel_states",
   ];
   const dicts = ref<{ [key: string]: any[] }>({});
 

src/views/base/excel/template/index.vue

@@ -32,10 +32,10 @@
             <el-button @click="lookTep(row)" text type="primary"
               >查看</el-button
             >
-            <el-button @click="editTep(row, index, done)" text type="primary"
+            <el-button @click="editTep(row)" text type="primary"
               >编辑</el-button
             >
-            <el-button @click="deleteTep(row, index, done)" text type="primary"
+            <el-button @click="deleteTep(row)" text type="primary"
               >删除</el-button
             >
           </template>
@@ -51,7 +51,7 @@
           />
         </div>
         <div class="form" v-if="options.edit">
-          <div class="title">新建模版</div>
+          <div class="title">{{ !operaEditStatus ? "新建" : "编辑" }}模版</div>
           <el-form
             ref="formRef"
             :model="formVlaue"
@@ -63,29 +63,54 @@
               <el-input v-model="formVlaue.formName" />
             </el-form-item>
             <el-form-item label="表格类型" prop="formType">
-              <el-input v-model="formVlaue.formType" :disabled="true" />
+              <el-select
+                v-model="formVlaue.formType"
+                placeholder="请选择表格类型"
+              >
+                <el-option
+                  v-for="(item, index) in dicts.excel_type"
+                  :key="index"
+                  :label="item.dictLabel"
+                  :value="item.dictValue"
+                />
+              </el-select>
             </el-form-item>
             <el-form-item label="启用状态" prop="state">
               <el-select v-model="formVlaue.state" placeholder="请选择状态">
-                <el-option label="禁用" :value="0" />
-                <el-option label="启用" :value="1" />
+                <el-option
+                  v-for="(item, index) in dicts.excel_states"
+                  :key="index"
+                  :label="item.dictLabel"
+                  :value="item.dictValue"
+                />
               </el-select>
             </el-form-item>
             <el-form-item>
               <div class="btns">
-                <el-button type="primary" @click="submitForm(formRef)">
+                <el-button
+                  v-if="!operaEditStatus"
+                  type="primary"
+                  @click="submitForm(formRef)"
+                >
                   创 建
                 </el-button>
-                <el-button @click="resetForm(formRef)">重 置</el-button>
+                <el-button
+                  v-if="operaEditStatus"
+                  type="primary"
+                  @click="updateExForm(formRef)"
+                >
+                  更 新
+                </el-button>
+                <el-button v-if="!operaEditStatus" @click="resetForm(formRef)"
+                  >重 置</el-button
+                >
                 <el-button type="primary" @click="resetData"> 取 消 </el-button>
               </div>
             </el-form-item>
           </el-form>
         </div>
         <div class="form" v-else>
-          <el-button type="primary" @click="excelStatus = false">
-            返 回
-          </el-button>
+          <el-button type="primary" @click="resetData"> 返 回 </el-button>
         </div>
       </div>
     </div>
@@ -101,24 +126,29 @@ import {
   getInfo,
   updateExcel,
 } from "@/api/excel";
-import dictDataUtil from "@/common/configs/dictDataUtil";
 import ExcelView from "@/components/ExcelView/index.vue";
+import { useDictionaryStore } from "@/store";
+const { dicts } = useDictionaryStore();
 //初始化页面数据
 const resetData = () => {
+  excelViewRef.value.saveCellData();
   excelViewRef.value.reset();
   excelKey.value = excelKey.value + 1;
   options.value = {
     opreaState: true,
     in: true,
     out: true,
-    confirm: false,
     print: true,
-    //编辑状态 false：为查看状态
     edit: true,
   };
   exceldata.value = null;
-  excelStatus.value = false;
+  selectId.value = null;
+  operaEditStatus.value = false;
   resetForm(formRef.value);
+  formVlaue.formType = null;
+  formVlaue.formName = null;
+  formVlaue.state = null;
+  excelStatus.value = false;
 };
 // 数据字典相关
 
@@ -139,7 +169,6 @@ const {
 const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
 
 const crudRef = ref(null); //crudRef.value 获取avue-crud对象
-const router = useRouter?.();
 
 // 设置表格列或者其他自定义的option
 option.value = Object.assign(option.value, {
@@ -153,7 +182,8 @@ option.value = Object.assign(option.value, {
     {
       label: "表格名称",
       prop: "formName",
-
+      headerAlign: "center",
+      align: "center",
       search: true,
       overHidden: true,
       rules: [
@@ -167,54 +197,88 @@ option.value = Object.assign(option.value, {
     {
       label: "表格类型",
       slot: true,
+      search: true,
       headerAlign: "center",
+      align: "center",
       prop: "formType",
-
       addDisplay: false,
+      dicData: dicts.excel_type,
+      props: { label: "dictLabel", value: "dictValue" },
     },
     {
       label: "表格状态",
       slot: true,
+      search: true,
       headerAlign: "center",
+      align: "center",
       prop: "state",
       addDisplay: false,
+      dicData: dicts.excel_states,
+      props: { label: "dictLabel", value: "dictValue" },
     },
     {
       label: "修改时间",
       slot: true,
       headerAlign: "center",
+      align: "center",
       prop: "updated",
-
       addDisplay: false,
     },
   ],
 });
+// 存放操作表格相关业务代码
 const useAddTemplateHook = () => {
+  //excelView 组件实例
   const excelViewRef = ref(null);
+  //表格配置项
   const options = ref({
+    //头部操作区域
     opreaState: true,
+    //导入按钮展示
     in: true,
+    //导出按钮展示
     out: true,
-    confirm: false,
     print: true,
     //编辑状态 false：为查看状态
     edit: true,
+    //当前操作表格名称
+    inName: "",
   });
+  //双向绑定表格data变量
   const exceldata = ref(null);
+  //控制表格组件展示界面变量（包括表格展示页面和操作页面）
   const excelStatus = ref(false);
   //新增模版
   const addTemplate = () => {
     excelStatus.value = true;
   };
   //查看
-  const lookTep = (row:any) => {
+  const lookTep = (row: any) => {
+    options.value.edit = false;
     exceldata.value = JSON.parse(row.excelData);
     excelStatus.value = true;
   };
   //编辑
-  const editTep = () => {};
+  const editTep = (row: any) => {
+    options.value.inName = row.formName;
+    exceldata.value = JSON.parse(row.excelData);
+    formVlaue.formType = row.formType;
+    formVlaue.formName = row.formName;
+    formVlaue.state = row.state;
+    selectId.value = row.id;
+    operaEditStatus.value = true;
+    excelStatus.value = true;
+  };
   //删除
-  const deleteTep = () => {};
+  const deleteTep = async (row: any) => {
+    const { data, code } = await delExcel({
+      id: row.id,
+    });
+    if (code == "200") {
+      ElMessage.success("删除成功！");
+      dataEditList();
+    }
+  };
 
   //获取组件内实时数据赋值到外层
   const confirm = (data: any) => {
@@ -244,9 +308,17 @@ const {
   deleteTep,
 } = useAddTemplateHook();
 const useFormHook = () => {
+  //KEY告知组件刷新
   const excelKey = ref(1);
-  const formVlaue = reactive({ formType: "普通", formName: "", state: 0 });
+  //表单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: [
       {
@@ -267,6 +339,7 @@ const useFormHook = () => {
       },
     ],
   });
+  //新增模版
   const submitForm = async (formEl: any) => {
     //@ts-ignore;
     excelViewRef.value.confirm();
@@ -280,23 +353,64 @@ const useFormHook = () => {
         });
         if (code == "200") {
           ElMessage.success("添加成功！");
-          exceldata.value = null;
-          excelStatus.value = false;
+          resetData();
           dataEditList();
         }
       }
     });
   };
-
+  //更新行内信息
+  const updateExForm = async (formEl: any) => {
+    //@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: any, fields: any) => {
+      if (valid) {
+        const { data, code } = await updateExcel({
+          ...formVlaue,
+          excelData: exceldata.value,
+          id: selectId.value,
+        });
+        if (code == "200") {
+          ElMessage.success("修改成功！");
+          resetData();
+          dataEditList();
+        }
+      }
+    });
+  };
+  //表达数据重置
   const resetForm = (formEl: any) => {
     if (!formEl) return;
     formEl.resetFields();
   };
-  return { formVlaue, formRef, rules, excelKey, submitForm, resetForm };
+  return {
+    formVlaue,
+    formRef,
+    rules,
+    selectId,
+    excelKey,
+    operaEditStatus,
+    submitForm,
+    resetForm,
+    updateExForm,
+  };
 };
 
-const { formVlaue, formRef, rules, excelKey, submitForm, resetForm } =
-  useFormHook();
+const {
+  formVlaue,
+  formRef,
+  rules,
+  selectId,
+  excelKey,
+  operaEditStatus,
+  submitForm,
+  resetForm,
+  updateExForm,
+} = useFormHook();
 
 onMounted?.(() => {
   dataEditList();