lihaiMiddleOfficeAdminWeb/src/views/warehouse_order/details.vue

<template>
    <el-drawer v-model="showDialog" title="订单详情" :size="1200">
        <div class="flex items-center justify-between m-4">
            <div class="flex flex-col">
                <div style="color: gray">仓库：</div>
                <div style="color: black">{{ formData.warehouse_name }}</div>
            </div>
            <div class="flex flex-col" v-if="formData.financial_pm == 1">
                <div style="color: gray">供应商：</div>
                <div style="color: black">{{ formData.supplier_name }}</div>
            </div>
            <div class="flex flex-col" v-else>
                <div style="color: gray">门店：</div>
                <div style="color: black">{{ formData.system_store }}</div>
            </div>
            <div class="flex flex-col">
                <div style="color: gray">单号：</div>
                <div style="color: black">{{ formData.code }}</div>
            </div>
        </div>
        <div class="flex items-center justify-between m-4">
            <div class="flex flex-col">
                <div style="color: gray">总价</div>
                <div style="color: black">￥{{ formData.total_price }}</div>
            </div>
            <div class="flex flex-col flex-2">
                <div style="color: gray">时间</div>
                <div style="color: black">{{ formData.create_time }}</div>
            </div>
            <el-button @click="xlsx(formData.id)"> 打印 </el-button>
        </div>
        <el-tabs v-model="activeName" class="demo-tabs" type="border-card">
            <el-tab-pane label="明细" name="second">
                <div>
                    <div>
                        <el-table :data="pager.lists" v-loading="pager.loading">
                            <el-table-column
                                label="商品信息"
                                prop="store_name"
                                show-overflow-tooltip
                            >
                                <template #default="{ row }">
                                    <div class="flex items-center">
                                        <el-image
                                            :src="row.image"
                                            class="w-16 h-16 mr-2"
                                            :preview-teleported="true"
                                        ></el-image>
                                        <div>{{ row.store_name }}</div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="数量" prop="nums" show-overflow-tooltip />
                            <el-table-column label="采购价" prop="purchase" show-overflow-tooltip />
                            <el-table-column
                                label="合计"
                                prop="total_price"
                                show-overflow-tooltip
                            />
                        </el-table>
                    </div>
                    <div class="flex mt-4 justify-end" v-if="pager.lists.length < pager.count">
                        <pagination v-model="pager" @change="getLists" />
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </el-drawer>
</template>

<script lang="ts" setup name="storeOrderDETAILS">
import { ElMessage, type FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { apiWarehouseProductLists } from '@/api/warehouse_product'
import { apiWarehouseOrderRentryExport, apiWarehouseOrderExport } from '@/api/warehouse_order'
import type { PropType } from 'vue'
import { usePaging } from '@/hooks/usePaging'
import { useRoute } from 'vue-router'
const route = useRoute()

defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})

const emit = defineEmits(['success', 'close'])
const showDialog = ref(false)
const activeName = ref('second')

// 表单数据
const formData = ref({
    id: '',
    code: '',
    total_price: '',
    supplier_name: '',
    warehouse_name: '',
    system_store: '',
    financial_pm: ''
})
const queryParams = reactive({
    oid: '',
    pay_type: ''
})
// 获取详情
const setFormData = async (data: Record<any, any>) => {
    formData.value = { ...data }
}

const getDetail = async (row: Record<string, any>) => {
    formData.value = { ...row }
    queryParams.oid = row.id
    // setFormData(data)
    getLists()
}
const xlsx = (id) => {
    if (formData.value.financial_pm == 1) {
        apiWarehouseOrderRentryExport({
            id: id
        }).then((res) => {
            window.open(res.url, '_blank')
            ElMessage.success('导出成功')
        })
    } else {
        apiWarehouseOrderExport({
            id: id
        }).then((res) => {
            window.open(res.url, '_blank')
            ElMessage.success('导出成功')
        })
    }
}
//打开弹窗
const open = () => {
    showDialog.value = true
}
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiWarehouseProductLists,
    params: queryParams
})

defineExpose({
    open,
    setFormData,
    getDetail
})
</script>