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"
   >
+    <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,8 +21,10 @@ 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 () => {
+  loading.value = true
+  try {
     containerList.value = await getContainerList()
     solutionList.value = (await getSolsList()).list
     colorList.value = (await getcolorList()).list
@@ -36,6 +38,11 @@ onMounted(async () => {
         }
       })
     }
+    loading.value = false
+  }
+  catch (error) {
+    loading.value = false
+  }
 })
 
 const form = ref({
@@ -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>