fix: 备货单打开弹框修改

src/views/supply/stockingOrder/AddStockingOrderDialog.vue

@@ -259,12 +259,13 @@
 </template>
 
 <script setup lang="tsx">
-import { ref, computed, watch } from 'vue'
+import { ref, computed } from 'vue'
 import type { ElFormItem, FormInstance, FormRules } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import type {
   AddStockingOrderForm,
   StockingOrderProduct,
+  TableData,
 } from '@/types/api/supply/stockingOrder'
 import type { CurrencyCodeData, SupplierItem, WarehouseListData } from '@/types'
 import type { userData } from '@/types/api/user'
@@ -286,25 +287,19 @@ const calcRowTotalPrice = (row: StockingOrderProduct): string => {
 }
 
 const props = defineProps<{
-  modelValue: boolean
   supplierList: SupplierItem[]
   stockKeeperList: userData[]
   warehouseList: WarehouseListData[]
   currencyList: CurrencyCodeData[]
-  editId: number | undefined
-  editOrderType: string
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
   (e: 'refresh'): void
 }>()
 
-const visible = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-})
-
+const visible = ref(false)
+const editOrderType = ref<string>('add')
+const editId = ref<number | undefined>(undefined)
 const formRef = ref<FormInstance>()
 const formData = ref<AddStockingOrderForm>({
   stockingUpManageNo: '',
@@ -560,9 +555,9 @@ const handleSave = async (isSubmit: boolean = false) => {
     (item) => item.id === stockingUpUserId,
   )?.account
   const url =
-    props.editOrderType === 'add'
+    editOrderType.value === 'add'
       ? 'factory/supply/stockingUpManage/add'
-      : props.editOrderType === 'edit'
+      : editOrderType.value === 'edit'
       ? `factory/supply/stockingUpManage/update`
       : `factory/supply/stockingUpManage/examine`
   const loading = ElLoading.service({
@@ -573,12 +568,12 @@ const handleSave = async (isSubmit: boolean = false) => {
   try {
     const res = await addStockingOrderApi(url, {
       ...formData.value,
-      id: props.editId,
+      id: editId.value,
       supplierName,
       warehouseName,
       stockingUpUserName,
       totalPrice: totalAmount.value,
-      submission: props.editOrderType === 'audit' ? undefined : isSubmit,
+      submission: editOrderType.value === 'audit' ? undefined : isSubmit,
     })
     if (res.code !== 200) {
       ElMessage.warning(res.message)
@@ -599,7 +594,7 @@ const handleSaveAndSubmit = async () => {
 }
 
 const handleReject = async () => {
-  if (!props.editId) return
+  if (!editId.value) return
   try {
     const { value: rejectReason } = await ElMessageBox.prompt(
       '请输入驳回原因',
@@ -626,7 +621,7 @@ const handleReject = async () => {
 
     try {
       const res = await rejectedStockingOrderApi({
-        id: props.editId,
+        id: editId.value,
         turnDownReason: rejectReason.trim(),
       })
       if (res.code !== 200) return
@@ -658,6 +653,8 @@ const resetForm = () => {
   productSku.value = ''
   productList.value = []
   popoverVisible.value = false
+  editId.value = undefined
+  editOrderType.value = 'add'
 }
 const handleSupplierChange = () => {
   formData.value.currencyCode = ''
@@ -676,21 +673,24 @@ const getStockingOrderDetailById = async (id: number) => {
       return
     }
     formData.value = res.data
+    visible.value = true
   } catch (error) {
     console.error(error)
   } finally {
     loading.close()
   }
 }
-watch(visible, (val) => {
-  if (val) {
-    if (!props.editId) {
-      resetForm()
-    } else {
-      getStockingOrderDetailById(props.editId)
-    }
+const open = (row: TableData | null, type: string) => {
+  if (row) {
+    editId.value = row.id
+    editOrderType.value = type
+    getStockingOrderDetailById(row.id)
+  } else {
+    visible.value = true
+    resetForm()
   }
-})
+}
+defineExpose({ open })
 </script>
 
 <style lang="scss" scoped>

src/views/supply/stockingOrder/SupplierDispatchOrderDialog.vue

@@ -3,7 +3,7 @@
     v-model="visible"
     title="供应商发货"
     width="1400px"
-    top="10vh"
+    top="15vh"
     :close-on-click-modal="false"
     destroy-on-close
   >
@@ -113,7 +113,7 @@
 </template>
 
 <script setup lang="tsx">
-import { ref, computed, watch } from 'vue'
+import { ref } from 'vue'
 import type { FormInstance } from 'element-plus'
 import type {
   TableData,
@@ -129,21 +129,16 @@ import ImageView from '@/components/ImageView.vue'
 import TableView from '@/components/TableView.vue'
 import { BigNumber } from 'bignumber.js'
 
-const props = defineProps<{
-  visible: boolean
-  selectedRow: TableData | null
+defineProps<{
   warehouseList: WarehouseListData[]
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:visible', value: boolean): void
   (e: 'refresh'): void
 }>()
 
-const visible = computed({
-  get: () => props.visible,
-  set: (val) => emit('update:visible', val),
-})
+const visible = ref(false)
+const currentRow = ref<TableData | null>(null)
 
 const formRef = ref<FormInstance>()
 const formData = ref<AddStockingOrderForm>({
@@ -300,7 +295,7 @@ const handleDispatch = async () => {
   })
   try {
     const res = await supplierDispatchApi({
-      manageId: props.selectedRow?.id as number,
+      manageId: currentRow.value?.id as number,
       manageNo: formData.value.stockingUpManageNo as string,
       warehouseId: formData.value.warehouseId as number,
       warehouseName: formData.value.warehouseName as string,
@@ -324,8 +319,8 @@ const handleDispatch = async () => {
   }
 }
 
-const loadProductList = async () => {
-  if (!props.selectedRow?.id) return
+const open = async (row: TableData) => {
+  if (!row?.id) return
 
   const loading = ElLoading.service({
     lock: true,
@@ -334,7 +329,7 @@ const loadProductList = async () => {
   })
 
   try {
-    const res = await getStockingOrderDetailByIdApi(props.selectedRow.id)
+    const res = await getStockingOrderDetailByIdApi(row.id)
     if (res.code !== 200) {
       ElMessage.warning(res.message)
       return
@@ -353,17 +348,16 @@ const loadProductList = async () => {
         currentShipQuantity: undefined,
       })),
     }
+    currentRow.value = row
+    visible.value = true
   } catch (error) {
     console.error(error)
   } finally {
     loading.close()
   }
 }
-watch(visible, (val) => {
-  if (val && props.selectedRow) {
-    loadProductList()
-  }
-})
+
+defineExpose({ open })
 </script>
 
 <style lang="scss" scoped>

src/views/supply/stockingOrder/index.vue

@@ -210,18 +210,15 @@
       </div>
     </div>
     <AddStockingOrderDialog
-      v-model="addDialogVisible"
+      ref="addStockingOrderDialogRef"
       :supplier-list="supplierList"
       :stock-keeper-list="stockKeeperList"
       :warehouse-list="warehouseList"
       :currency-list="currencyList"
-      :edit-order-type="editOrderType"
-      :edit-id="selectedRow?.id"
       @refresh="onRefresh"
     />
     <SupplierDispatchOrderDialog
-      v-model:visible="supplierDispatchOrderVisible"
-      :selected-row="selectedRow"
+      ref="supplierDispatchOrderDialogRef"
       :warehouse-list="warehouseList"
       @refresh="onRefresh"
     />
@@ -456,13 +453,13 @@ const deliveryStatusList = ref([
   { label: '部分发货', value: 'partial' },
   { label: '全部发货', value: 'completed' },
 ])
-const editOrderType = ref<string>('add')
 const selection = ref<TableData[]>([])
 const rangeTime = ref<string[]>([])
 const [searchForm, resetSearchForm] = useValue<SearchForm>({} as SearchForm)
 const treeRef = ref()
 const tableRef = ref()
-const supplierDispatchOrderVisible = ref(false)
+const supplierDispatchOrderDialogRef = ref()
+const addStockingOrderDialogRef = ref()
 const loadWarehouseList = async () => {
   try {
     const res = await loadWarehouseListApi()
@@ -563,13 +560,10 @@ const handleRowClick = (row: TableData) => {
 }
 
 const handleOrder = (row: TableData, type: string) => {
-  selectedRow.value = row
-  editOrderType.value = type
-  addDialogVisible.value = true
+  addStockingOrderDialogRef.value.open(row, type)
 }
 const handleSupplierDispatchOrder = (row: TableData) => {
-  selectedRow.value = row
-  supplierDispatchOrderVisible.value = true
+  supplierDispatchOrderDialogRef.value.open(row)
 }
 const stockingComplete = async (row: TableData) => {
   try {
@@ -585,6 +579,11 @@ const stockingComplete = async (row: TableData) => {
   } catch {
     return
   }
+  const loading = ElLoading.service({
+    fullscreen: true,
+    text: '操作中...',
+    background: 'rgba(0, 0, 0, 0.3)',
+  })
   try {
     const res = await stockingCompleteApi(row.id)
     if (res.code !== 200) return
@@ -593,14 +592,12 @@ const stockingComplete = async (row: TableData) => {
     loadTreeData()
   } catch (e) {
     console.error(e)
+  } finally {
+    loading.close()
   }
 }
-// 新增备货单弹窗
-const addDialogVisible = ref(false)
 const handleAddOrder = () => {
-  selectedRow.value = null
-  editOrderType.value = 'add'
-  addDialogVisible.value = true
+  addStockingOrderDialogRef.value.open(null, 'add')
 }
 
 const handleSubmitAudit = async () => {