自动保存

src/views/manage/app/make/index.vue

@@ -21,9 +21,14 @@
             class="flex h-14 w-full items-center gap-2.5 rounded-lg bg-[#ffffff] px-6"
           >
             <div class="text-2xl font-bold text-[#303133]">编排</div>
-            <div class="text-[#576275]">自动保存14:55:00</div>
+            <div class="text-[#576275]" v-if="state.autoSaveTimestamp">
+              自动保存{{ state.autoSaveTimestamp }}
+            </div>
             <div class="mx-auto" />
-            <div class="flex items-center text-[#FF5454]">
+            <div
+              class="flex items-center text-[#FF5454]"
+              v-if="state.autoSaveTimestamp"
+            >
               <SvgIcon name="czr_tip" color="#FF5454" class="mr-1" />
               有未发布的修改
             </div>
@@ -463,14 +468,15 @@ import {
   watch,
 } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
+import { ElLoading, ElMessage } from 'element-plus'
 import { useDictionaryStore } from '@/stores'
 import { Search } from '@element-plus/icons-vue'
 import knowledgeSelect from './knowledge-select.vue'
 import modelSelect from './model-select.vue'
-import { isValue } from '@/utils/czr-util'
+import { isValue, YMDHms } from '@/utils/czr-util'
 import Sortable from 'sortablejs'
 import CzrForm from '@/components/czr-ui/CzrForm.vue'
+import { debounce } from 'lodash'
 
 const DictionaryStore = useDictionaryStore()
 const route = useRoute()
@@ -480,7 +486,7 @@ const props = defineProps({})
 const { proxy }: any = getCurrentInstance()
 const state: any = reactive({
   ID: route.params.id,
-  autoSave: '',
+  autoSaveTimestamp: '',
   form: {
     tips: '',
     model: {},
@@ -666,6 +672,23 @@ const onPublish = () => {
       })
     })
 }
+watch(
+  () => state.form,
+  (n) => {
+    autoSave(n)
+  },
+  { deep: true },
+)
+const autoSave = debounce((v) => {
+  const loading = ElLoading.service({
+    text: '自动保存中……',
+    background: 'rgba(0, 0,0, 0.3)',
+  })
+  setTimeout(() => {
+    loading.close()
+    state.autoSaveTimestamp = YMDHms(new Date())
+  }, 1000)
+}, 3000)
 onMounted(() => {
   initDictionary()
   initDetail()