feat: 弹窗增加loading

src/components/common/FTDialog/index.vue

@@ -18,6 +18,10 @@ const props = defineProps({
     type: Function,
     default: () => {},
   },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emits = defineEmits(['update:visible', 'ok', 'cancel'])
 
@@ -54,7 +58,9 @@ watch(
     :width="width"
     :before-close="cancel"
   >
-    <slot />
+    <div v-loading="loading">
+      <slot />
+    </div>
     <template #footer>
       <div v-if="$slots.footer" class="dialog-footer">
         <slot name="footer" />

src/components/craft/AddCraft/index.vue

@@ -21,20 +21,27 @@ const emits = defineEmits(['ok', 'cancel'])
 const containerList = ref<Container.ContainerItem[]>([])
 const solutionList = ref<Solution.SolutionItem[]>([])
 const colorList = ref<Color.ColorItem[]>([])
-
+const loading = ref(false)
 onMounted(async () => {
-  containerList.value = await getContainerList()
-  solutionList.value = (await getSolsList()).list
-  colorList.value = (await getcolorList()).list
-  if (props.sourceData) {
-    form.value = { ...props.sourceData, stepList: JSON.parse(props.sourceData.steps || '[]') }
-    form.value.stepList.forEach((step: any) => {
-      if (step.params.time) {
-        step.params.hours = Math.floor(step.params.time / 3600)
-        step.params.minutes = Math.floor(step.params.time / 60)
-        step.params.seconds = step.params.time % 60
-      }
-    })
+  loading.value = true
+  try {
+    containerList.value = await getContainerList()
+    solutionList.value = (await getSolsList()).list
+    colorList.value = (await getcolorList()).list
+    if (props.sourceData) {
+      form.value = { ...props.sourceData, stepList: JSON.parse(props.sourceData.steps || '[]') }
+      form.value.stepList.forEach((step: any) => {
+        if (step.params.time) {
+          step.params.hours = Math.floor(step.params.time / 3600)
+          step.params.minutes = Math.floor(step.params.time / 60)
+          step.params.seconds = step.params.time % 60
+        }
+      })
+    }
+    loading.value = false
+  }
+  catch (error) {
+    loading.value = false
   }
 })
 
@@ -152,7 +159,7 @@ const addStep = (data: any) => {
 </script>
 
 <template lang="pug">
-  FtDialog(visible :title="form.id ? '编辑工艺' : '新增工艺'" width="80%" :ok-handle="okHandle" @cancel="cancel")
+  FtDialog(visible :title="form.id ? '编辑工艺' : '新增工艺'" width="80%" :ok-handle="okHandle" @cancel="cancel" :loading="loading")
     el-form(ref="formRef" label-width="auto" :model="form" :rules="rules" class="form-box" label-position="left")
       el-row(:gutter="30")
         el-col(:span="10")

src/views/craft/index.vue

@@ -82,7 +82,7 @@ const add = () => {
 }
 const okHandle = () => {
   addVisible.value = false
-  tableRef?.initData()
+  tableRef.value?.initData()
 }
 </script>