优化订单模块功能和布局

- 移除不必要的编辑弹窗组件 - 集成采购设置功能到订单详情页面 - 优化分页和数据加载逻辑 - 调整订单明细展示方式 - 删除冗余代码和优化现有代码结构
2024-10-17 22:38:56 +08:00 · 2024-10-17 22:38:56 +08:00 · 68546accab
parent 8c54f9965e
commit 68546accab
4 changed files with 136 additions and 133 deletions
--- a/.env.development
+++ b/.env.development
@ -6,6 +6,6 @@ VITE_NOW_TYPE = 'dist'
 # VITE_APP_BASE_URL='http://192.168.1.10:8546'
 # VITE_APP_BASE_URL='https://test-multi-store.lihaink.cn'
 # VITE_APP_BASE_URL='https://multi-store.lihaink.cn'
-VITE_APP_BASE_URL='http://192.168.1.22:8545'
+VITE_APP_BASE_URL='http://192.168.1.5:8545'
 # VITE_APP_BASE_URL='https://ceshi-multi-store.lihaink.cn'

--- a/src/views/order/beforehand_order/component/editProduct.vue
+++ b/src/views/order/beforehand_order/component/editProduct.vue
--- a/src/views/order/beforehand_order/component/orderCartInfo.vue
+++ b/src/views/order/beforehand_order/component/orderCartInfo.vue
@ -92,22 +92,138 @@
        <div class="flex mt-4 justify-end" v-if="pager.lists.length < pager.count">
            <pagination v-model="pager" @change="getLists" />
        </div>
+        <el-dialog v-model="dialogBuyer" title="设置采购" width="600">
+            <el-form ref="formRef" :model="purchase_product_offer" label-width="90px">
+                <el-form-item label="采购人员">
+                    <el-select
+                        v-model="purchase_product_offer.buyer_id"
+                        placeholder="请选择采购人员"
+                        size="large"
+                        style="width: 240px"
+                    >
+                        <el-option
+                            v-for="item in delivery_list"
+                            :label="item.nickname"
+                            :value="item.uid"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="采购数量" prop="need_num">
+                    <el-input
+                        v-model="purchase_product_offer.need_num"
+                        clearable
+                        placeholder="请输入采购数量"
+                        :readonly="false"
+                    />
+                </el-form-item>
+                <el-form-item label="备注" prop="mark">
+                    <el-input
+                        v-model="purchase_product_offer.mark"
+                        clearable
+                        placeholder="请输入备注"
+                        :readonly="false"
+                    />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="dialogBuyer = false">取消</el-button>
+                    <el-button type="primary" @click="goodsOfferUpdate"> 确认 </el-button>
+                </div>
+            </template>
+        </el-dialog>
+        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
    </div>
 </template>

 <script lang="ts" setup name="subOrder">
 import { usePaging } from '@/hooks/usePaging'
-import { apiBeforehandOrderCartInfoLists } from '@/api/beforehand_order_cart_info'
-import { useDictData } from '@/hooks/useDictOptions'
+import {
+    apiBeforehandOrderCartInfoLists,
+    apiBeforehandOrderCartInfoDelete,
+    apiBeforehandOrderCartInfoProcurementStatus
+} from '@/api/beforehand_order_cart_info'
+import { apiDeliveryServiceLists } from '@/api/delivery_service'
+import feedback from '@/utils/feedback'
+import { apiPurchaseProductOfferAdd } from '@/api/purchase_product_offer'
+import EditPopup from './editProduct.vue'
 import { useRoute } from 'vue-router'
 const route = useRoute()

+const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+
+// 是否显示编辑框
+const showEdit = ref(false)
+const ids = ref()
+const dialogBuyer = ref(false)
+// 编辑
+const handleEdit = async (data: any) => {
+    showEdit.value = true
+    await nextTick()
+    editRef.value?.open('edit')
+    editRef.value?.setFormData(data)
+}
+// 删除
+const handleDeletes = async (id: number | any[]) => {
+    await feedback.confirm('确定要删除？')
+    await apiBeforehandOrderCartInfoDelete({ id })
+    getLists()
+}
+const formData = ref({
+    id: '',
+    top_cate: []
+})
 const queryParams = reactive({
-    bhoid: route.query.id,
+    bhoid: '',
    pay_type: '',
    top_cate: '',
    top_cate_value: ''
 })
+
+const purchase_product_offer = ref({
+    order_id: '',
+    product_id: '',
+    need_num: '',
+    unit: '',
+    is_buyer: '',
+    buyer_id: '',
+    mark: ''
+})
+const goodsOfferUpdate = () => {
+    apiPurchaseProductOfferAdd(purchase_product_offer.value).then((res) => {
+        getLists()
+        dialogBuyer.value = false
+    })
+}
+const delivery_list = ref([])
+const DeliveryService = () => {
+    apiDeliveryServiceLists({ type: 3 }).then((res) => {
+        delivery_list.value = res.lists
+    })
+}
+
+/**
+ * 是否需采购
+ * @param e
+ */
+const handleBuyer = (e, row) => {
+    if (e == 1) {
+        purchase_product_offer.value.order_id = row.bhoid
+        purchase_product_offer.value.product_id = row.product_id
+        purchase_product_offer.value.unit = row.unit
+        purchase_product_offer.value.need_num = row.cart_num
+        purchase_product_offer.value.mark = row.mark
+        purchase_product_offer.value.is_buyer = '1'
+        DeliveryService()
+        dialogBuyer.value = true
+    } else {
+        apiBeforehandOrderCartInfoProcurementStatus({
+            id: row.id
+        }).then(() => {
+            getLists()
+        })
+    }
+}
 // 分页相关
 const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiBeforehandOrderCartInfoLists,
@ -136,13 +252,17 @@ const beforehand_order_cart_info = () => {
    })
 }

-function getList(id) {
-    order_id.value.id = id
-    one_click_storage.value.bhoid = id
-    formData.value.bhoid = id
-    queryParams.order_id = id
+function getList(data: any) {
+    console.log(213213)
+    formData.value = data
+    queryParams.bhoid = data.id
    getLists()
 }
+
+onMounted(() => {
+    queryParams.bhoid = route.query.id
+    getLists()
+})
 defineExpose({
    getList
 })
--- a/src/views/order/beforehand_order/details.vue
+++ b/src/views/order/beforehand_order/details.vue
@ -56,7 +56,7 @@
            @tab-change="tabChange"
        >
            <el-tab-pane label="明细" name="second">
-                <orderCartInfo ref="orderCartInfo" />
+                <orderCartInfo ref="orderCartInfoRef" :id="formData.id" />
            </el-tab-pane>
            <el-tab-pane label="采购" name="offer">
                <goodsOffer ref="goodsOfferRef" :order_id="formData.id" />
@ -70,7 +70,7 @@
        </el-tabs>
    </el-card>
    <el-dialog v-model="dialogShop" title="追加商品" width="1200">
-        <el-form ref="formRef" :model="updateInfo" label-width="90px">
+        <el-form ref="formRef" label-width="90px">
            <div class="mb-2">
                <el-button type="primary" @click="showProduct = true">添加商品</el-button>
            </div>
@ -169,47 +169,7 @@
            :is_warehouse="is_warehouse"
        ></product-pop>
    </el-dialog>
-    <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
-    <el-dialog v-model="dialogBuyer" title="设置采购" width="600">
-        <el-form ref="formRef" :model="purchase_product_offer" label-width="90px">
-            <el-form-item label="采购人员">
-                <el-select
-                    v-model="purchase_product_offer.buyer_id"
-                    placeholder="请选择采购人员"
-                    size="large"
-                    style="width: 240px"
-                >
-                    <el-option
-                        v-for="item in delivery_list"
-                        :label="item.nickname"
-                        :value="item.uid"
-                    />
-                </el-select>
-            </el-form-item>
-            <el-form-item label="采购数量" prop="need_num">
-                <el-input
-                    v-model="purchase_product_offer.need_num"
-                    clearable
-                    placeholder="请输入采购数量"
-                    :readonly="false"
-                />
-            </el-form-item>
-            <el-form-item label="备注" prop="mark">
-                <el-input
-                    v-model="purchase_product_offer.mark"
-                    clearable
-                    placeholder="请输入备注"
-                    :readonly="false"
-                />
-            </el-form-item>
-        </el-form>
-        <template #footer>
-            <div class="dialog-footer">
-                <el-button @click="dialogBuyer = false">取消</el-button>
-                <el-button type="primary" @click="goodsOfferUpdate"> 确认 </el-button>
-            </div>
-        </template>
-    </el-dialog>
+
    <el-dialog v-model="generateOrderShow" title="生成支付订单设置" width="600">
        <el-form :model="generateOrderData" label-width="90px">
            <el-form-item label="用户">
@ -272,16 +232,9 @@

 <script lang="ts" setup name="storeOrderDETAILS">
 import { ElMessage, type FormInstance } from 'element-plus'
-import Popup from '@/components/popup/index.vue'
-import {
-    apiPurchaseProductOfferLists,
-    apiPurchaseProductOfferAdd
-} from '@/api/purchase_product_offer'
 import {
    apiBeforehandOrderCartInfoLists,
-    apiBeforehandOrderCartInfoDelete,
-    apiBeforehandOrderCartInfoAppendAdd,
-    apiBeforehandOrderCartInfoProcurementStatus
+    apiBeforehandOrderCartInfoAppendAdd
 } from '@/api/beforehand_order_cart_info'
 import {
    apiPurchaseOrderExport,
@ -291,9 +244,6 @@ import {
 import type { PropType } from 'vue'
 import { usePaging } from '@/hooks/usePaging'
 import { useRoute } from 'vue-router'
-import feedback from '@/utils/feedback'
-import EditPopup from './editProduct.vue'
-import { apiDeliveryServiceLists } from '@/api/delivery_service'
 import goodsOffer from './component/goodsOffer.vue'
 import orderCartInfo from './component/orderCartInfo.vue'
 import warehousing from './component/warehousing.vue'
@ -301,20 +251,16 @@ import outbound from './component/outbound.vue'
 import { apiUserLists } from '@/api/user'
 import { apiSystemStoreLists } from '@/api/system_store'

-const editRef = shallowRef<InstanceType<typeof EditPopup>>()
-// 是否显示编辑框
-const showEdit = ref(false)
-const dialogBuyer = ref(false)
 const generateOrderShow = ref(false)

 const goodsOfferRef = ref(null)
 const warehousingRef = ref(null)
 const outboundRef = ref(null)
-
+const orderCartInfoRef = ref(null)
 const route = useRoute()
 const tabChange = (type: any) => {
    if (type == 'second') {
-        orderCartInfo.value?.getList(formData.value)
+        orderCartInfoRef.value?.getList(formData.value)
    }
    if (type == 'offer') {
        goodsOfferRef.value?.getList(formData.value.id)
@ -359,21 +305,6 @@ const generateOrderData = ref({
    pay_type: '',
    store_id: ''
 })
-const purchase_product_offer = ref({
-    order_id: '',
-    product_id: '',
-    need_num: '',
-    unit: '',
-    is_buyer: '',
-    buyer_id: '',
-    mark: ''
-})
-const goodsOfferUpdate = () => {
-    apiPurchaseProductOfferAdd(purchase_product_offer.value).then((res) => {
-        getLists()
-        dialogBuyer.value = false
-    })
-}
 const appendAdd = () => {
    const product_arr = productList.value.map((item: any) => {
        return {
@ -390,9 +321,7 @@ const appendAdd = () => {
        id: queryParams.bhoid,
        product_arr: product_arr
    }).then((res) => {
-        console.log(res)
        dialogShop.value = false
-        getLists()
    })
 }
 const queryParams = reactive({
@ -413,7 +342,6 @@ const getDetail = () => {
            financial_pm.value = 1
        }
        productList.value = []
-        getLists()
    })
 }
 getDetail()
@ -444,56 +372,11 @@ const onBindProduct = (e: any[]) => {
 function handleChange(row) {
    row.total_price = row.num * row.purchases
 }
-const delivery_list = ref([])
-const DeliveryService = () => {
-    apiDeliveryServiceLists({ type: 3 }).then((res) => {
-        delivery_list.value = res.lists
-    })
-}
-/**
- * 是否需采购
- * @param e
- */
-const handleBuyer = (e, row) => {
-    if (e == 1) {
-        purchase_product_offer.value.order_id = row.bhoid
-        purchase_product_offer.value.product_id = row.product_id
-        purchase_product_offer.value.unit = row.unit
-        purchase_product_offer.value.need_num = row.cart_num
-        purchase_product_offer.value.mark = row.mark
-        purchase_product_offer.value.is_buyer = '1'
-        DeliveryService()
-        dialogBuyer.value = true
-    } else {
-        apiBeforehandOrderCartInfoProcurementStatus({
-            id: row.id
-        }).then(() => {
-            getLists()
-        })
-    }
-}
-// 编辑
-const handleEdit = async (data: any) => {
-    showEdit.value = true
-    await nextTick()
-    editRef.value?.open('edit')
-    editRef.value?.setFormData(data)
-}
-// 删除
-const handleDeletes = async (id: number | any[]) => {
-    await feedback.confirm('确定要删除？')
-    await apiBeforehandOrderCartInfoDelete({ id })
-    getLists()
-}
 //打开弹窗
 const open = () => {
    showDialog.value = true
 }
-// 分页相关
-const { pager, getLists, resetParams, resetPage } = usePaging({
-    fetchFun: apiBeforehandOrderCartInfoLists,
-    params: queryParams
-})
+
 const userloading = ref(false)
 const userList = ref([])
 const remoteMethodUser = (e = '') => {