fix: 优化表单项

src/api/index.ts

@@ -130,7 +130,9 @@ class RequestHttp {
      *  服务器换返回信息 -> [拦截统一处理] -> 客户端JS获取到信息
      */
     this.service.interceptors.response.use(
-      (response: AxiosResponse) => {
+      (response: AxiosResponse & { config: CustomAxiosRequestConfig }) => {
+        const { config } = response
+        axiosCanceler.removePending(config)
         // 加密后的 AES 秘钥
         const keyStr = response.headers[encryptHeader]
         // 加密
@@ -145,8 +147,7 @@ class RequestHttp {
           // 将结果 (得到的是 JSON 字符串) 转为 JSON
           response.data = JSON.parse(decryptData)
         }
-        const { data, config, request } = response
-        axiosCanceler.removePending(config)
+        const { data, request } = response
         tryHideFullScreenLoading()
         if (request.responseType === 'blob' || request.responseType === 'arraybuffer') {
           return data
@@ -176,7 +177,7 @@ class RequestHttp {
         // 全局错误信息拦截（防止下载文件的时候返回数据流，没有 code 直接报错）
         if (data.code && data.code == ResultEnum.ERROR) {
           ElMessage.error(data.msg)
-          return Promise.reject(data)
+          return Promise.reject(new Error(data.msg))
         }
         // 成功请求（在页面上除非特殊情况，否则不用处理失败逻辑）
         return data

src/components/ProForm/components/Item.vue

@@ -2,7 +2,7 @@
   <component
     :is="elTagNameValue"
     v-bind="item.compOptions"
-    v-model.trim="_formModel[handleProp(item.prop)]"
+    v-model.trim="_model"
     :data="['tree-select'].includes(item.compOptions.elTagName!) ? itemEnum : []"
     :options="['cascader', 'select-v2'].includes(item.compOptions.elTagName!) ? itemEnum : []"
   >
@@ -42,13 +42,13 @@
 </template>
 
 <script setup lang="ts" name="Item">
-import { handleProp } from '@/utils'
 interface FormItem {
   item: ProForm.ItemsOptions
-  formModel: Record<string, any>
+  model: any
 }
 const props = defineProps<FormItem>()
-const _formModel = computed(() => props.formModel)
+const _model = computed(() => props.model)
+
 const elTagNameValue = computed(() => {
   const val = props.item.compOptions.elTagName
   if ('radio-button' == val) return `el-radio-group`

src/components/ProForm/index.vue

@@ -22,21 +22,21 @@
             <slot name="default" :form-model="formModel"></slot>
             <!-- </template> -->
             <template v-if="item.compOptions.elTagName === 'icon'">
-              <SelectIcon v-model:icon-value="formModel[item.prop]" />
+              <SelectIcon v-model:icon-value="formModel[handleProp(item.prop)]" />
             </template>
             <template v-else-if="item.compOptions.elTagName === 'file-upload'">
-              <FileUpload v-model:model-value="formModel[item.prop]" />
+              <FileUpload v-model:model-value="formModel[handleProp(item.prop)]" />
             </template>
             <template v-else-if="item.compOptions.elTagName === 'img-upload'">
-              <Imgs v-model="formModel[item.prop]" v-bind="$attrs" />
+              <Imgs v-model="formModel[handleProp(item.prop)]" v-bind="$attrs" />
             </template>
             <template v-else-if="item.compOptions.elTagName === 'file-upload-s3'">
-              <FileUploadS3 v-model:model-value="formModel[item.prop]" />
+              <FileUploadS3 v-model:model-value="formModel[handleProp(item.prop)]" />
             </template>
             <template v-else-if="item.compOptions.elTagName === 'img-upload-s3'">
-              <ImgsS3 v-model="formModel[item.prop]" v-bind="$attrs" />
+              <ImgsS3 v-model="formModel[handleProp(item.prop)]" v-bind="$attrs" />
             </template>
-            <Item v-else :item="item" :form-model="formModel" />
+            <Item v-else :item="item" :model="formModel[handleProp(item.prop)]" />
           </component>
         </el-col>
       </template>
@@ -63,7 +63,7 @@ import FileUpload from '@/components/Upload/File.vue'
 import Imgs from '@/components/Upload/Imgs.vue'
 import FileUploadS3 from '@/components/Upload/FileS3.vue'
 import ImgsS3 from '@/components/Upload/ImgsS3.vue'
-// import { handleProp } from '@/utils'
+import { handleProp } from '@/utils'
 // 表单整体配置项
 export interface ProFormProps {
   formOptions?: ProForm.FormOptions
@@ -151,11 +151,20 @@ watch(props, () => {
 watch(
   () => props.model,
   () => {
-    props.itemsOptions.map((item: ProForm.ItemsOptions) => {
+    props.itemsOptions.forEach((item: ProForm.ItemsOptions) => {
+      // const defaultValue = item.compOptions?.value
+      // if (defaultValue !== undefined && defaultValue !== null) {
+      //   props.model[item.prop] ? (props.model[item.prop] = defaultValue) : false
+      // }
+      console.log(item.compOptions.value === 0 ? 0 : item.compOptions.value)
+
       // 如果类型为checkbox，默认值需要设置一个空数组
       let value = ['checkbox', 'transfer'].includes(item.compOptions.elTagName!) ? [] : props.model[item.prop]
-      props.model[item.prop] ? (formModel.value = props.model) : (formModel.value[item.prop] = item.compOptions.value || value)
+      props.model[item.prop]
+        ? (formModel.value = props.model)
+        : (formModel.value[item.prop] = item.compOptions.value === 0 ? 0 : item.compOptions.value || value)
     })
+    console.log(formModel.value)
   },
   { immediate: true }
 )

src/utils/dict.ts

@@ -16,12 +16,11 @@ export const useDict = (...args: string[]): { [key: string]: DictDataOption[] }
       if (dicts) {
         res.value[dictType] = dicts
       } else {
-        await getDictsApi(dictType).then(resp => {
-          res.value[dictType] = resp.data.map(
-            (p): DictDataOption => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass })
-          )
-          useDictStore().setDict(dictType, res.value[dictType])
-        })
+        const resp = await getDictsApi(dictType)
+        res.value[dictType] = resp.data.map(
+          (p): DictDataOption => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass })
+        )
+        useDictStore().setDict(dictType, res.value[dictType])
       }
     })
     return res.value