refactor: 轮播图模态框

src/components/ImageUpload.vue

@@ -39,13 +39,13 @@ const props = defineProps({
 
 const emits = defineEmits(['on-success'])
 watch(() => props.imageUrl,(newVal) => {
-  if(newVal){
-    if(newVal.url !== ''){
-      file1.value = [{ ...newVal }]
-    }else{
-      file1.value = []
-    }
+  if (!newVal) return
+  if (newVal.url !== '') {
+    file1.value = [{...newVal}]
+  } else {
+    file1.value = []
   }
+
 },{
   deep:true,
   immediate:true
@@ -86,4 +86,4 @@ watch(() => props.imageUrl,(newVal) => {
 
 <style scoped>
 
-</style>
+</style>

src/pages/article/components/ArticleDialog.vue

@@ -60,9 +60,9 @@ const props = defineProps<{
   article?: Article | {}
   categoryList: Category[] | []
 }>()
-const form = ref<FormInstanceFunctions | null>(null)
-const header = computed(() => `${props.isEdit ? '编辑' : '创建'}${props.headerTitle || ''}`)
-const confirmBtn = computed(() => (props.isEdit ? '保存' : '确定'))
+const formRef = ref<FormInstanceFunctions | null>(null)
+const headerText = computed(() => `${props.isEdit ? '编辑' : '创建'}${props.headerTitle || ''}`)
+const confirmBtnText = computed(() => (props.isEdit ? '保存' : '确定'))
 const articleData: FormProps['data'] = reactive({ categoryName: '' })
 
 const popupVisible = ref(false)

src/pages/carousal/components/CarousalDialog.vue

@@ -1,14 +1,13 @@
 <template>
-  <t-dialog
-    width="70%"
-    :header="header"
-    :confirmBtn="confirmBtn"
+  <TDialog
+    width="980px"
+    :header="headerText"
+    :confirmBtn="confirmBtnText"
     :closeOnOverlayClick="false"
     @close="handleCloseDialog"
     @confirm="fetchSaveCarousalData"
   >
-    <t-space direction="vertical" style="width: 100%">
-      <TForm ref="form" :data="carousalData" :rules="rules" resetType="initial" label-width="100">
+    <TForm v-if="carousalData" ref="formRef" :data="carousalData" :rules="rules" resetType="initial" label-width="100">
         <TFormItem label="轮播图：" name="imageUrl">
           <ImageUpload @on-success="handleSuccessImg" :image-url="imgUrl"/>
         </TFormItem>
@@ -24,25 +23,33 @@
           <t-input v-model.trim="carousalData.targetUrl" clearable placeholder="请输入网址路径" />
         </TFormItem>
       </TForm>
-    </t-space>
-  </t-dialog>
+  </TDialog>
 </template>
 <script lang="ts" setup>
 import { computed, ref, reactive, watch } from 'vue'
 import type { FormInstanceFunctions, FormProps } from 'tdesign-vue-next'
 import ImageUpload from '@/components/ImageUpload.vue'
 import { createCarousal, updateCarousalItem } from '@/api/carousal'
+// Todo: 改为ts方式
 const props = defineProps<{
   isEdit?: Boolean | null
   headerTitle?: String | null
   carousal: {} | number
 }>()
-const emit = defineEmits(['success'])
-const form = ref<FormInstanceFunctions | null>(null)
-const header = computed(() => `${props.isEdit ? '编辑' : '创建'}${props.headerTitle || ''}`)
+const emit = defineEmits<{
+  success: [string]
+}>()
+const formRef = ref<FormInstanceFunctions | null>(null)
+const headerText = computed(() => `${props.isEdit ? '编辑' : '创建'}${props.headerTitle || ''}`)
+const confirmBtnText = computed(() => (props.isEdit ? '保存' : '确定'))
 const formType = computed(() => `${props.isEdit ? 'update' : 'add'}`)
-const confirmBtn = computed(() => (props.isEdit ? '保存' : '确定'))
-const carousalData: FormProps['data'] = ref({})
+
+const carousalData = ref<FormProps['data']>({
+  imageUrl: '',
+  targetType: 'article',
+  targetId: '',
+  targetUrl: '',
+})
 const imgUrl = ref({})
 const rules = computed(() => {
   const commonRules = {
@@ -104,14 +111,15 @@ watch(
 )
 const fetchSaveCarousalData = async () => {
   /* TODO: 保存分类数据 */
-  if (form.value) {
-    const valid = await form.value.validate()
+  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')
       let res
+
       switch (formType.value){
         case 'create':
           res = await createCarousal(carousalData.value)
@@ -143,9 +151,9 @@ const fetchSaveCarousalData = async () => {
 }
 const handleCloseDialog = () => {
   // 数据&&规则校验结果重置
-  if (form.value) {
-    form.value.reset()
-    form.value.clearValidate()
+  if (formRef.value) {
+    formRef.value.reset()
+    formRef.value.clearValidate()
   }
 }
 </script>

src/pages/carousal/index.vue

@@ -40,12 +40,12 @@ const isEdit = ref<boolean>(false)
 const currentTableData = ref<CarousalResult | null>(null)
 
 
-const editClick = (row: object): void => {
+const handleEdit = (row: object): void => {
   isEdit.value = true
   currentTableData.value = Object.assign({}, row)
   carousalDialogVisible.value = true
 }
-const showClick = async (res: CarousalResult): Promise<void> => {
+const handleShow = async (res: CarousalResult): Promise<void> => {
   if (res.status === 'active') {
     await inactiveCarousal(res.id)
   } else {
@@ -53,7 +53,7 @@ const showClick = async (res: CarousalResult): Promise<void> => {
   }
   await fetchData()
 }
-const delClick = async (row: CarousalResult): Promise<void> => {
+const handleDelete = async (row: CarousalResult): Promise<void> => {
   await deleteCarousal(row.id)
   await fetchData()
 }
@@ -62,7 +62,6 @@ const handleCreateCarousal = (): void => {
   carousalDialogVisible.value = true
   currentTableData.value = {}
 }
-
 const handleSuccessDialog = async (): Promise<void> => {
   await fetchData()
   carousalDialogVisible.value = false
@@ -109,11 +108,11 @@ const handleSuccessDialog = async (): Promise<void> => {
         </TSpace>
       </template>
       <template #operation="{ row }">
-        <TButton variant="text" size="small" theme="primary" @click="editClick(row)">编辑</TButton>
-        <TButton variant="text" size="small" theme="primary" @click="showClick(row)">{{
+        <TButton variant="text" size="small" theme="primary" @click="handleEdit(row)">编辑</TButton>
+        <TButton variant="text" size="small" theme="primary" @click="handleShow(row)">{{
           row.status === 'active' ? '关闭显示' : '开启显示'
         }}</TButton>
-        <TButton variant="text" size="small" theme="danger" @click="delClick(row)">删除</TButton>
+        <TButton variant="text" size="small" theme="danger" @click="handleDelete(row)">删除</TButton>
       </template>
     </TTable>
     <CarousalDialog

src/pages/category/components/CategoryDialog.vue

@@ -39,9 +39,9 @@ const props = defineProps<{
   headerTitle?: string
   category: Category | null
 }>()
-const form = ref<FormInstanceFunctions | null>(null)
-const header = computed(() => `${props.category ? '编辑' : '创建'}${props.headerTitle || ''}`)
-const confirmBtn = computed(() => (props.category ? '保存' : '确定'))
+const formRef = ref<FormInstanceFunctions | null>(null)
+const headerText = computed(() => `${props.category ? '编辑' : '创建'}${props.headerTitle || ''}`)
+const confirmBtnText = computed(() => (props.category ? '保存' : '确定'))
 const categoryData: FormProps['data'] = reactive({ name: '', order: 1 })
 const rules: FormProps['rules'] = {
   name: [