refactor: 类型问题改造80%

components.d.ts

@@ -23,7 +23,6 @@ declare module 'vue' {
     TFormItem: typeof import('tdesign-vue-next')['FormItem']
     THeader: typeof import('tdesign-vue-next')['Header']
     TIcon: typeof import('tdesign-vue-next')['Icon']
-    TImage: typeof import('tdesign-vue-next')['Image']
     TImageViewer: typeof import('tdesign-vue-next')['ImageViewer']
     TInput: typeof import('tdesign-vue-next')['Input']
     TInputNumber: typeof import('tdesign-vue-next')['InputNumber']
@@ -33,7 +32,6 @@ declare module 'vue' {
     TPopconfirm: typeof import('tdesign-vue-next')['Popconfirm']
     TRadioButton: typeof import('tdesign-vue-next')['RadioButton']
     TRadioGroup: typeof import('tdesign-vue-next')['RadioGroup']
-    TSelectInput: typeof import('tdesign-vue-next')['SelectInput']
     TSpace: typeof import('tdesign-vue-next')['Space']
     TTable: typeof import('tdesign-vue-next')['Table']
     TTag: typeof import('tdesign-vue-next')['Tag']

src/api/carousal.ts

@@ -1,6 +1,12 @@
 import httpClient from './httpClient'
-import type { CarousalResult, CreateCarousalsRequest, SearchCarousalsFilter } from '@/model/carousals'
+import type {
+  CarousalResult,
+  CreateCarousalsRequest,
+  SearchCarousalsFilter,
+  UpdateCarousalsRequest
+} from '@/model/carousals'
 import type { PageResult } from '@/model/base'
+import type {UnwrapRef} from "vue";
 
 export const createCarousal = (createCarousalsRequest: CreateCarousalsRequest) => {
   return httpClient.post<PageResult<CarousalResult>>('/carousals', createCarousalsRequest)
@@ -13,7 +19,7 @@ export const getCarousalItem = (id:string) => {
   return httpClient.get<CarousalResult>(`/carousals/${id}`)
 }
 
-export const updateCarousalItem = (id:number,updateCarousalsRequest: CreateCarousalsRequest) => {
+export const updateCarousalItem = (id: UnwrapRef<UpdateCarousalsRequest["id"]> | undefined, updateCarousalsRequest: CreateCarousalsRequest) => {
   return httpClient.put<CarousalResult>(`/carousals/${id}`,updateCarousalsRequest)
 }
 

src/model/carousals.ts

@@ -1,11 +1,18 @@
-import type { BaseModel } from '@/model/base'
+import type {BaseModel, PageResult} from '@/model/base'
 
 export interface CreateCarousalsRequest {
-  imageUrl:string,
-  targetType:string,
-  targetUrl?:string,
+  imageUrl:string
+  targetType:string
+  targetUrl?:string
   targetId?:string
 }
+export interface UpdateCarousalsRequest extends CreateCarousalsRequest{
+  createBy?:null
+  createdTime?:string
+  id?:string
+  updateBy?:null
+  updateTime?:string
+}
 export interface SearchCarousalsFilter {
   page:number,
   size:number,
@@ -15,3 +22,4 @@ export interface SearchCarousalsFilter {
 export interface CarousalResult extends BaseModel,CreateCarousalsRequest{
   status:string
 }
+

src/pages/carousal/components/CarousalDialog.vue

@@ -27,14 +27,15 @@
 </template>
 <script lang="ts" setup>
 import { computed, ref, reactive, watch } from 'vue'
-import type { FormInstanceFunctions, FormProps } from 'tdesign-vue-next'
+import type { FormInstanceFunctions } from 'tdesign-vue-next'
 import ImageUpload from '@/components/ImageUpload.vue'
 import { createCarousal, updateCarousalItem } from '@/api/carousal'
+import type {CarousalResult, CreateCarousalsRequest, UpdateCarousalsRequest} from "@/model/carousals";
 // Todo: 改为ts方式
 const props = defineProps<{
   isEdit?: Boolean | null
   headerTitle?: String | null
-  carousal: {} | number
+  carousal: CarousalResult | null
 }>()
 const emit = defineEmits<{
   success: [void]
@@ -44,7 +45,7 @@ const headerText = computed(() => `${props.isEdit ? '编辑' : '创建'}${props.
 const confirmBtnText = computed(() => (props.isEdit ? '保存' : '确定'))
 const formType = computed(() => `${props.isEdit ? 'update' : 'add'}`)
 
-const carousalData = ref<FormProps['data']>({
+const carousalData = ref<UpdateCarousalsRequest>({
   imageUrl: '',
   targetType: 'article',
   targetId: '',
@@ -98,10 +99,9 @@ const handleFormTypeData = () => {
 
 watch(
   () => props.carousal,
-  (newClassify) => {
+  (newClassify: CarousalResult) => {
     carousalData.value = Object.assign({}, newClassify)
     const carousalObj = Object.assign({},newClassify)
-    // imgUrl.value.url = carousalObj.imageUrl || ''
     imgUrl.value = { url: carousalObj.imageUrl || '' }
   },
   {
@@ -113,39 +113,10 @@ const fetchSaveCarousalData = async () => {
   /* TODO: 保存分类数据 */
   if (formRef.value) {
     const valid = await formRef.value.validate()
-    // console.log(valid,'valid')
     if (valid && typeof valid === 'boolean') {
       /* TODO: 校验通过保存分类数据 */
       handleFormTypeData()
-      // console.log(formType.value,'formType')
-      formType.value === 'create' ? await createCarousalData() : await updateCarousalData()
-      // let res
-      //
-      // switch (formType.value){
-      //   case 'create':
-      //     res = await createCarousal(carousalData.value)
-      //     emit('success')
-      //     break;
-      //   case 'update':
-      //     const fieldsToKeep = ["imageUrl", "targetType", "targetUrl", "targetId"];
-      //     const requestObj = {};
-      //
-      //     for (const field of fieldsToKeep) {
-      //       if (carousalData.value[field]!== null && carousalData.value[field]!== undefined) {
-      //         requestObj[field] = carousalData.value[field];
-      //       }
-      //     }
-      //     handleFormTypeData()
-      //     res = await updateCarousalItem(carousalData.value.id,requestObj)
-      //     emit('success')
-      //     break;
-      //   default:
-      //     res = await createCarousal(carousalData.value)
-      //     emit('success')
-      //     break;
-      // }
-      // const createCarousalApi = createCarousal(carousalData.value)
-      // console.log(createCarousalApi,'createCarousalApi')
+      formType.value === 'add' ? await createCarousalData() : await updateCarousalData()
       return
     }
   }
@@ -155,15 +126,8 @@ const createCarousalData = async () => {
   emit('success')
 }
 const updateCarousalData = async () => {
-  const fieldsToKeep = ["imageUrl", "targetType", "targetUrl", "targetId"];
-  const requestObj = {};
-
-  for (const field of fieldsToKeep) {
-    if (carousalData.value[field] !== null && carousalData.value[field] !== undefined) {
-      requestObj[field] = carousalData.value[field];
-    }
-  }
   handleFormTypeData()
+  const requestObj: CreateCarousalsRequest = {imageUrl: carousalData.value.imageUrl,targetType:carousalData.value.targetType,targetUrl:carousalData.value.targetUrl,targetId:carousalData.value.targetId}
   await updateCarousalItem(carousalData.value.id, requestObj)
   emit('success')
 }

src/pages/carousal/index.vue

@@ -4,7 +4,11 @@ import { onMounted,  ref } from 'vue'
 import type { BaseTableColumns } from 'tdesign-vue-next'
 import CarousalDialog from '@/pages/carousal/components/CarousalDialog.vue'
 import { activeCarousal, deleteCarousal, searchCarousals, inactiveCarousal } from '@/api/carousal'
-import type { CarousalResult, SearchCarousalsFilter } from '@/model/carousals'
+import type {
+  CarousalResult,
+  CreateCarousalsRequest,
+  SearchCarousalsFilter
+} from '@/model/carousals'
 import ImagePreviewer from '@/components/ImagePreviewer.vue'
 import { useSearchable } from '@/composables/useSearchable'
 
@@ -31,16 +35,16 @@ const columns: BaseTableColumns = [
   }
 ]
 
-const { loading, data, pagination, fetchData, onPageChange } = useSearchable<CarousalResult, SearchCarousalsFilter>(searchCarousals)
+const { loading, data, pagination, fetchData, onPageChange } = useSearchable<CreateCarousalsRequest, SearchCarousalsFilter>(searchCarousals)
 onMounted(fetchData)
 
 
 const carousalDialogVisible = ref<boolean>(false)
 const isEdit = ref<boolean>(false)
-const currentTableData = ref<CarousalResult | null>(null)
+const currentTableData = ref<CreateCarousalsRequest | null>(null)
 
 
-const handleEdit = (row: object): void => {
+const handleEdit = (row: CarousalResult): void => {
   isEdit.value = true
   currentTableData.value = Object.assign({}, row)
   carousalDialogVisible.value = true
@@ -60,7 +64,12 @@ const handleDelete = async (row: CarousalResult): Promise<void> => {
 const handleCreateCarousal = (): void => {
   isEdit.value = false
   carousalDialogVisible.value = true
-  currentTableData.value = {}
+  currentTableData.value = {
+    imageUrl: '',
+    targetId: '',
+    targetType: '',
+    targetUrl: '',
+  }
 }
 const handleSuccessDialog = async (): Promise<void> => {
   await fetchData()

vite.config.ts

@@ -44,7 +44,7 @@ export default defineConfig(({ command, mode }) => {
         '/api': {
           target: env.VITE_PROXY_ENDPOINT,
           changeOrigin: true,
-          // rewrite: (path) => path.replace(/^\/api/, '')
+          rewrite: (path) => path.replace(/^\/api/, '')
         }
       }
     }