kashkool ver 1

src/pages/menuPages/pricing/components/PriceSyncDetailModal.vue

@@ -1,14 +1,14 @@
 <template>
   <BasicActionSheet
-    v-model:visible="visible"
+    v-model:visible="visibleProxy"
     title="جزئیات همگام‌سازی قیمت"
     modal-width="52rem"
     :showButton="false"
     :showCancel="true"
     :showOk="false"
     cancelText="بستن"
-    @cancel="visible = false"
-    @close="visible = false"
+    @cancel="close"
+    @close="close"
   >
     <a-spin :spinning="loading">
       <div v-if="log" class="flex flex-col gap-4">
@@ -37,14 +37,29 @@
 
 <script setup lang="ts">
 import type { TableColumnType } from 'ant-design-vue'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { getPriceSyncLogDetail } from '@/api/price'
 import type { PriceSyncLog } from '@/model/priceSyncLog'
 import BasicActionSheet from '@/components/BasicActionSheet.vue'
 import { usePrice } from '@core/utils/usePrice'
 
-const visible = defineModel<boolean>('visible', { default: false })
-const props = defineProps<{ logId?: number | null }>()
+const props = defineProps<{
+  visible: boolean
+  logId?: number | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+}>()
+
+const visibleProxy = computed({
+  get: () => props.visible,
+  set: (value: boolean) => emit('update:visible', value)
+})
+
+function close() {
+  emit('update:visible', false)
+}
 
 const loading = ref(false)
 const log = ref<PriceSyncLog | null>(null)
@@ -102,7 +117,7 @@ async function loadDetail(id: number) {
 }
 
 watch(
-  () => [visible.value, props.logId] as const,
+  () => [props.visible, props.logId] as const,
   ([open, id]) => {
     if (open && id) {
       void loadDetail(id)