manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/customer/component/relatedOrders.vue

<template>
    <div class="relatedTasks pl-4 pr-4 pt-3 pb-3 h-full flex flex-col">
        <div class="flex justify-between">
            <div class="title">相关销售订单</div>
            <div v-permission="['orderAdd']">
                <el-button type="primary" @click="editOrder()">新建销售订单</el-button>
            </div>
        </div>
        <div class="flex-1 overflow-auto pt-3">
            <el-table :data="relatedOrders" border style="width: 100%;height: 300px;">
                <el-table-column prop="orderCode" label="订单编号" width="130" />
                <el-table-column prop="orderName" label="订单名称" min-width="200">
                    <template #default="scope">
                        <el-button link type="primary" size="large" @click="toPath(scope.row)">{{
                            scope.row.orderName
                            }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="customName" label="客户名称" width="130" />
                <el-table-column prop="price" label="订单金额(￥)" width="130" />
                <el-table-column prop="receivedPayment" label="已回款(￥)" width="130" />
                <el-table-column prop="unReceivedPayment" label="未回款(￥)" width="130" />
                <el-table-column prop="typeName" label="订单类型" width="130" />
                <el-table-column prop="placeTime" label="下单时间" width="200" />
                <el-table-column prop="inchargerName" label="负责人" width="130">
                    <template #default="scope">
                        <TextTranslation translationTypes="userName" :translationValue="scope.row.inchargerName"></TextTranslation>
                    </template>
                </el-table-column>
                <el-table-column prop="creatorName" label="创建人" width="130">
                    <template #default="scope">
                        <TextTranslation translationTypes="userName" :translationValue="scope.row.creatorName"></TextTranslation>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="200" />
            </el-table>
        </div>

        <!-- 弹窗 -->
        <el-dialog v-model="allVisible.editOrderVisible" width="1000" :show-close="false" top="10vh">
            <template #header="{ close, titleId, titleClass }">
                <div class="flex justify-between items-center border-b pb-3 dialog-header">
                    <h4 :id="titleId">{{ '新建销售订单' }}</h4>
                    <div>
                        <el-button type="primary" :loading="allLoading.editSaveLading"
                            @click="saveOrder(false)">保存</el-button>
                        <el-button @click="closeVisible('editOrderVisible')">取消</el-button>
                    </div>
                </div>
            </template>
            <div class="h-[60vh] overflow-y-auto scroll-bar pt-3" v-loading="allLoading.orderTemplateLoadinng">
                <GenerateForm ref="orderTemplateRef" :data="orderTemplate" :key="orderTemplateKey"
                    :value="orderTemplateValue" />
                <div>相关产品</div>
                <RelatedProducts ref="relatedProductsRef" :productTableList="productTableList"
                    :productTableListValue="productTableListValue" />
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted, defineExpose, inject, watchEffect } from 'vue'
import { setTemplateDataDisable } from '@/utils/tools';
import { GenerateForm } from '@zmjs/form-design';
import { get, post } from '@/utils/request';
import router from '@/router';
import RelatedProducts from '@/components/relatedProducts/relatedProducts.vue'
import { GETGENERATEFOEM, URL_OEDERUPDATE } from '@/pages/order/api';
import { formatDate } from '@/utils/times';
import { GETTABLELIST } from '@/pages/product/api';

const emits = defineEmits(['refreshData']);
const globalPopup = inject<GlobalPopup>('globalPopup')
const props = defineProps<{
    data: any
}>()

const information = ref<any>({})
const relatedOrders = ref([])
const productTableList = ref([])
const productTableListValue = ref([])
const orderTemplateValue = ref({})
const orderTemplateKey = ref(1)
const orderTemplateRef = ref<typeof GenerateForm>()
const relatedProductsRef = ref<typeof RelatedProducts>()
const orderTemplate = ref({
    list: [],
    config: {}
})
const allVisible = reactive({
    editOrderVisible: false,
})
const allLoading = reactive({
    editSaveLading: false,
    orderTemplateLoadinng: false,
})

function toPath(row: any) {
    router.push({
        path: `/order/detail`,
        query: { id: row.id }
    })
}

function saveOrder(flag: boolean) {
    orderTemplateRef.value?.getData().then((res: any) => {
        let productTableListData = relatedProductsRef?.value?.returnData()
        for (var i in productTableListData) {
            productTableListData[i].sealPrice = productTableListData[i].sellingPrice,
                productTableListData[i].discount = productTableListData[i].discount,
                productTableListData[i].num = productTableListData[i].quantity
        }
        const produt = productTableListData ? JSON.stringify(productTableListData) : []
        const formVal = {
            ...orderTemplateValue.value,
            ...res,
            orderEndDate: res.orderEndDate ? formatDate(res.orderEndDate) : '',
            orderStartDate: res.orderStartDate ? formatDate(res.orderStartDate) : '',
            placeTime: res.placeTime ? formatDate(res.placeTime) : '',
            orderProductDetailString: produt
        }
        if((formVal.price || 0) < (formVal.receivedPayment || 0)) {
            globalPopup?.showError('已回款金额不能大于订单金额')
            return
        }
        allLoading.editSaveLading = true
        post(URL_OEDERUPDATE, formVal).then((_res) => {
            allVisible.editOrderVisible = flag
            globalPopup?.showSuccess('操作成功')
            if (flag) {
                orderTemplateRef.value?.reset()
            }
            emits('refreshData')
        }).finally(() => {
            allLoading.editSaveLading = false
        })
    }).catch((_err: any) => {
        globalPopup?.showError('请填写完整')
    })
}

function editOrder() {
    showVisible('editOrderVisible')
    allLoading.orderTemplateLoadinng = true

    orderTemplateValue.value = { customId: information.value.id }
    productTableListValue.value = []
    setTimeout(() => {
        orderTemplateRef.value && orderTemplateRef.value.reset()
        orderTemplateKey.value++
        allLoading.orderTemplateLoadinng = false
    }, 1000)
}

async function getSystemField() {
    const datas = await get(GETGENERATEFOEM)
    let newConfig = JSON.parse(datas.data[0].config)
    newConfig.list = setTemplateDataDisable(newConfig.list, ['customId'])
    orderTemplate.value = newConfig
}

function showVisible(type: keyof typeof allVisible) {
    allVisible[type] = true
}

function closeVisible(type: keyof typeof allVisible) {
    allVisible[type] = false
}

function getProductTableList() {
    post(GETTABLELIST, { pageIndex: -1, pageSize: -1 }).then((res) => {
        if (res.code == 'ok') {
            const { record, total } = res.data
            productTableList.value = record.map((item: any) => {
                const { id, productName, productCode, unit, unitName, typeName, type, price, inventory } = item
                return {
                    id,
                    productId: id,
                    productName,
                    productCode,
                    unit,
                    unitName,
                    price,
                    type,
                    typeName,
                    inventory,
                    quantity: '',
                    discount: '',
                    totalPrice: ''
                }
            })
        }
    })
}

watchEffect(() => {
    const { data } = props
    information.value = data
    relatedOrders.value = (data.salesOrders || [])
})

// 生命周期钩子
onMounted(() => {
    getProductTableList()
    getSystemField()
});
</script>
<style scoped lang="scss">
.relatedTasks {
    .title {
        font-size: 18px;
        color: #000
    }
}
</style>