Bläddra i källkod

fix:修复dialog无法关闭的问题

zlong 1 år sedan
förälder
incheckning
a859521682
3 ändrade filer med 20 tillägg och 27 borttagningar
  1. 2 2
      components.d.ts
  2. 7 9
      src/pages/carousal/components/CarousalDialog.vue
  3. 11 16
      src/pages/carousal/index.vue

+ 2 - 2
components.d.ts

@@ -16,7 +16,6 @@ declare module 'vue' {
     TAvatar: typeof import('tdesign-vue-next')['Avatar']
     TButton: typeof import('tdesign-vue-next')['Button']
     TCard: typeof import('tdesign-vue-next')['Card']
-    TCheckbox: typeof import('tdesign-vue-next')['Checkbox']
     TDialog: typeof import('tdesign-vue-next')['Dialog']
     TDropdown: typeof import('tdesign-vue-next')['Dropdown']
     TForm: typeof import('tdesign-vue-next')['Form']
@@ -25,10 +24,11 @@ declare module 'vue' {
     TIcon: typeof import('tdesign-vue-next')['Icon']
     TImageViewer: typeof import('tdesign-vue-next')['ImageViewer']
     TInput: typeof import('tdesign-vue-next')['Input']
+    TInputNumber: typeof import('tdesign-vue-next')['InputNumber']
     TLayout: typeof import('tdesign-vue-next')['Layout']
-    TLink: typeof import('tdesign-vue-next')['Link']
     TMenu: typeof import('tdesign-vue-next')['Menu']
     TMenuItem: typeof import('tdesign-vue-next')['MenuItem']
+    TPopconfirm: typeof import('tdesign-vue-next')['Popconfirm']
     TRadioButton: typeof import('tdesign-vue-next')['RadioButton']
     TRadioGroup: typeof import('tdesign-vue-next')['RadioGroup']
     TSpace: typeof import('tdesign-vue-next')['Space']

+ 7 - 9
src/pages/carousal/components/CarousalDialog.vue

@@ -1,12 +1,11 @@
 <template>
   <t-dialog
     width="70%"
-    v-model:visible="visible"
     :header="header"
     :confirmBtn="confirmBtn"
     :closeOnOverlayClick="false"
     @close="handleCloseDialog"
-    @confirm="fetchSaveClassifyData"
+    @confirm="fetchSaveCarousalData"
   >
     <t-space direction="vertical" style="width: 100%">
       <TForm ref="form" :data="carousalData" :rules="rules" resetType="initial" label-width="100">
@@ -29,7 +28,6 @@
   </t-dialog>
 </template>
 <script lang="ts" setup>
-import type { Classify } from '@/model/classify'
 import { computed, ref, reactive, watch } from 'vue'
 import type { FormInstanceFunctions, FormProps } from 'tdesign-vue-next'
 import ImageUpload from '@/components/ImageUpload.vue'
@@ -37,7 +35,7 @@ import { createCarousal, updateCarousalItem } from '@/api/carousal'
 const props = defineProps<{
   isEdit?: Boolean | null
   headerTitle?: String | null
-  classify: Classify | {} | number
+  carousal: {} | number
 }>()
 const emit = defineEmits(['success'])
 const form = ref<FormInstanceFunctions | null>(null)
@@ -46,7 +44,6 @@ const formType = computed(() => `${props.isEdit ? 'update' : 'add'}`)
 const confirmBtn = computed(() => (props.isEdit ? '保存' : '确定'))
 const carousalData: FormProps['data'] = ref({})
 const imgUrl = ref({})
-const visible = ref(false)
 const rules = computed(() => {
   const commonRules = {
     imageUrl: [
@@ -93,7 +90,7 @@ const handleFormTypeData = () => {
 }
 
 watch(
-  () => props.classify,
+  () => props.carousal,
   (newClassify) => {
     carousalData.value = Object.assign({}, newClassify)
     const carousalObj = Object.assign({},newClassify)
@@ -105,7 +102,7 @@ watch(
     immediate: true
   },
 )
-const fetchSaveClassifyData = async () => {
+const fetchSaveCarousalData = async () => {
   /* TODO: 保存分类数据 */
   if (form.value) {
     const valid = await form.value.validate()
@@ -118,7 +115,7 @@ const fetchSaveClassifyData = async () => {
       switch (formType.value){
         case 'create':
           res = await createCarousal(carousalData.value)
-          emit('success', true)
+          emit('success')
           break;
         case 'update':
           const fieldsToKeep = ["imageUrl", "targetType", "targetUrl", "targetId"];
@@ -131,10 +128,11 @@ const fetchSaveClassifyData = async () => {
           }
           handleFormTypeData()
           res = await updateCarousalItem(carousalData.value.id,requestObj)
-          emit('success', res)
+          emit('success')
           break;
         default:
           res = await createCarousal(carousalData.value)
+          emit('success')
           break;
       }
       // const createCarousalApi = createCarousal(carousalData.value)

+ 11 - 16
src/pages/carousal/index.vue

@@ -2,11 +2,9 @@
 import RegularPage from '@/components/RegularPage.vue'
 import { onMounted, ref, reactive } from 'vue'
 import type { BaseTableColumns } from 'tdesign-vue-next'
-import type { Classify } from '@/model/classify'
-import ClassifyDialog from '@/pages/carousal/components/CarousalDialog.vue'
+import CarousalDialog from '@/pages/carousal/components/CarousalDialog.vue'
 import { activeCarousal, deleteCarousal, getCarousalList, inactiveCarousal } from '@/api/carousal'
 import { BrowseIcon } from 'tdesign-icons-vue-next'
-import { aS } from 'vitest/dist/reporters-yx5ZTtEV'
 
 const columns: BaseTableColumns = [
   {
@@ -44,7 +42,7 @@ const query = reactive({
 const carousalDialogVisible = ref(false)
 const isEdit = ref(false)
 const currentTableData = ref<{}>({})
-const fetchClassifyTableData = async () => {
+const fetchSaveCarousalData = async () => {
   /* TODO: 获取轮播图表格数据 */
   query.page = pagination.page
   query.size = pagination.size
@@ -52,7 +50,7 @@ const fetchClassifyTableData = async () => {
   data.value = getCarousalListApi.data
   pagination.total = getCarousalListApi.pagination.total
 }
-onMounted(fetchClassifyTableData)
+onMounted(fetchSaveCarousalData)
 const editClick = (row:object) => {
   isEdit.value = true
   currentTableData.value = Object.assign({}, row)
@@ -64,12 +62,12 @@ const showClick = async (res:object) => {
   } else {
     await activeCarousal(res.id)
   }
-  await fetchClassifyTableData()
+  await fetchSaveCarousalData()
 }
 const delClick = async (row:object) => {
   console.log(row,'删除')
   await deleteCarousal(row.id)
-  await fetchClassifyTableData()
+  await fetchSaveCarousalData()
 }
 const handleCreateCarousal = () => {
   isEdit.value = false
@@ -79,12 +77,9 @@ const handleCreateCarousal = () => {
 const onPageChange = () => {
   /* TODO: 分页切换 */
 }
-const handleSuccessDialog = async (res) => {
-  console.log(res,'res')
-  if (res){
-    console.log(123)
-    await fetchClassifyTableData()
-  }
+const handleSuccessDialog = async () => {
+  await fetchSaveCarousalData()
+  carousalDialogVisible.value = false
 }
 </script>
 
@@ -142,13 +137,13 @@ const handleSuccessDialog = async (res) => {
         <TButton variant="text" size="small" theme="danger" @click="delClick(row)">删除</TButton>
       </template>
     </TTable>
-    <ClassifyDialog
-      :classify="currentTableData"
+    <CarousalDialog
+      :carousal="currentTableData"
       v-model:visible="carousalDialogVisible"
       :isEdit="isEdit"
       @success="handleSuccessDialog"
       headerTitle="轮播图"
-    ></ClassifyDialog>
+    ></CarousalDialog>
   </RegularPage>
 </template>