编写通用填报编辑表格

src/wcq-components/SheetPlus/SheetPlus.vue

@@ -8,12 +8,30 @@
           <sheet :edit-enable="editEnable" :sheet="sheet"></sheet>
         </el-tab-pane>
         <div class="my-2 flex">
-          <div class="ml-auto mx-4">
-            <span class="flex-c inline-flex mr-8">
+          <div class="ml-auto">
+            <span class="flex-c inline-flex mx-2">
               <span class="mr-2 opacity-80" style="font-size: 1rem">编辑</span>
                 <el-switch v-model="editEnable"></el-switch>
             </span>
-            <el-button size="small" type="primary">保存</el-button>
+            <el-button size="small" type="primary" class="mx-4">保存</el-button>
+            <div class="inline-flex ml-2">
+              <span class="ml-auto">数据状态</span>
+              <div style="font-size: 1rem" class="flex-c">
+                <el-icon
+                    v-if="dataState"
+                    class="mx-2"
+                    style="color: green"
+                >
+                  <Check
+                  />
+                </el-icon>
+                <el-icon v-else class="mx-2" style="color: red"
+                >
+                  <WarningFilled
+                  />
+                </el-icon>
+              </div>
+            </div>
           </div>
         </div>
       </el-tabs>
@@ -26,6 +44,7 @@
 import {onMounted, ref, watch} from "vue";
 import {WorkBook} from "./types";
 import Sheet from "./components/Sheet.vue";
+import {Check, WarningFilled} from "@element-plus/icons-vue";
 
 const active = ref('')
 const editEnable = ref(false)
@@ -33,6 +52,8 @@ const props = defineProps<{ workBook: WorkBook }>()
 onMounted(() => {
   active.value = props.workBook.sheets[0].name + '0'
 })
+
+const dataState = ref(true)
 </script>