feature/在线表格样式修改

src/views/pro-steps/components/excel.vue

@@ -58,28 +58,31 @@
       </el-table-column>
     </el-table>
   </div>
-  <div class="excelView" v-else>
-    <div class="view">
-      <ExcelView
-        v-model:data="excelData"
-        :option="excelOptions"
-        ref="excelViewRef"
-        :checkStatus="true"
-        :verifications="setting"
-      />
-    </div>
-    <div class="opeara">
-      <div>
-        <el-button
-          v-if="excelOptions.edit"
-          type="primary"
-          class="btn"
-          @click="submitData"
-          >提交</el-button
-        >
-        <el-button class="btn" @click="resetData">{{
-          excelOptions.edit ? "取消" : "返回"
-        }}</el-button>
+  <div v-else class="fullScreen">
+    <div class="title">当前操作表格：{{ title }}</div>
+    <div class="excelView">
+      <div class="view">
+        <ExcelView
+          v-model:data="excelData"
+          :option="excelOptions"
+          ref="excelViewRef"
+          :checkStatus="true"
+          :verifications="setting"
+        />
+      </div>
+      <div class="opeara">
+        <div>
+          <el-button
+            v-if="excelOptions.edit"
+            type="primary"
+            class="btn"
+            @click="submitData"
+            >提交</el-button
+          >
+          <el-button class="btn" @click="resetData">{{
+            excelOptions.edit ? "取消" : "返回"
+          }}</el-button>
+        </div>
       </div>
     </div>
   </div>
@@ -92,6 +95,7 @@ import { getExcelData, setExcelData } from "@/api/prosteps/excel";
 import { useProcessStore } from "@/store";
 import { useDictionaryStore } from "@/store";
 const setting = ref([]);
+const title = ref("");
 const dictS = useDictionaryStore();
 const store = useProcessStore();
 const tableData = ref([]);
@@ -105,10 +109,10 @@ const useExcelHook = () => {
   const excelViewRef = ref(null);
   const excelSelectRow = ref(null);
   const excelOptions = ref({
-    opreaState: true,
-    in: true,
-    out: true,
-    print: true,
+    opreaState: false,
+    in: false,
+    out: false,
+    print: false,
     edit: true,
     inName: "",
   });
@@ -121,13 +125,14 @@ const useExcelHook = () => {
     excelData.value = null;
     excelSelectRow.value = null;
     excelOptions.value = {
-      opreaState: true,
-      in: true,
-      out: true,
-      print: true,
+      opreaState: false,
+      in: false,
+      out: false,
+      print: false,
       edit: true,
       inName: "",
     };
+    title.value = "";
   };
   const reset = async (row) => {
     excelData.value = "";
@@ -153,6 +158,7 @@ const useExcelHook = () => {
       excelData.value = JSON.parse(row.writeData);
     }
     excelOptions.value.inName = row.formName;
+    title.value = row.formName;
     excelViewStatus.value = true;
     setting.value = row.settings;
   };
@@ -208,14 +214,30 @@ onMounted(() => {
   dataList();
 });
 </script>
+
 <style lang="scss" scoped>
+.fullScreen {
+  position: fixed;
+  width: 100vw;
+  height: 100vw;
+  z-index: 88;
+  top: 0;
+  left: 0;
+  background-color: rgb(241, 243, 245);
+  .title {
+    height: 60px;
+    font-size: 25px;
+    line-height: 60px;
+    text-align: center;
+  }
+}
 .btnText {
   font-size: $f20;
   color: black;
 }
 .excelView {
   width: 100%;
-  height: calc(100vh - 260px);
+  height: calc(100vh - 60px);
   padding: 20px;
   display: flex;
   background-color: white;
@@ -223,7 +245,7 @@ onMounted(() => {
   .view {
     position: relative;
     flex: 1;
-    height: calc(100vh - 300px);
+    height: calc(100vh - 100px);
   }
   .opeara {
     width: 200px;