manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/contacts/component/relatedBusiness.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="['businessAddAnEdit']">
                <el-button type="primary" @click="addBusiness()">新建商机</el-button>
            </div>
        </div>
        <div class="flex-1 overflow-auto pt-3">
            <el-table :data="relatedTaskstable" border height="300" style="width: 100%;">
                <el-table-column prop="name" label="商机名称">
                    <template #default="scope">
                        <el-button link type="primary" size="large" @click="toBusDetal(scope.row)">{{
                            scope.row.name
                        }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="customerName" label="客户名称" width="140" />
                <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="amountOfMoney" label="商机金额" width="130" />
                <el-table-column prop="expectedTransactionDate" label="预计成交时间" width="170" />
                <el-table-column prop="stageValue" label="商机阶段" width="130" />
                <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="130" />
                <el-table-column prop="editTime" label="修改时间" width="130" />
            </el-table>
        </div>

        <!-- 弹窗 -->
        <el-dialog v-model="allVisible.newBusinessisible" 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" @click="editBusiness()"
                            :loading="allLoading.businessSaveLading">保存</el-button>
                        <el-button @click="closeVisible('newBusinessisible')">取消</el-button>
                    </div>
                </div>
            </template>
            <div class="h-[60vh] overflow-y-auto scroll-bar pt-3" v-loading="allLoading.generateFormLading">
                <GenerateForm ref="businessTemplateRef" :data="businessTemplate" :value="businessTemplateValue"
                    :key="businessTemplateKey" />
                <div>相关产品</div>
                <RelatedProducts ref="relatedProductsRef" :productTableList="productTableList" />
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted, defineExpose, inject, watchEffect } from 'vue'
import { GenerateForm } from '@zmjs/form-design';
import { get, post } from '@/utils/request';
import { useRouter, useRoute } from "vue-router";

import RelatedProducts from '@/components/relatedProducts/relatedProducts.vue'
import { formatDate, formatDateTime } from '@/utils/times';
import { GETGENERATEFOEM, UPDATEINSET } from '@/pages/business/api';
import { GETTABLELIST } from '@/pages/product/api';
import { judgmentaAmounteEqual } from '@/utils/tools';

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

const information = ref<any>({})
const relatedTaskstable = ref([])
const businessTemplateRef = ref<typeof GenerateForm>() // 自定义表单dom
const relatedProductsRef = ref<typeof RelatedProducts>()
const productTableList = ref([])
const businessTemplateValue = ref({})
const businessTemplateKey = ref(1)
const businessTemplate = ref({
    config: {},
    list: []
}) // 自定义表单数据
const allLoading = reactive({
    newBusinessSaveLading: false,
    businessSaveLading: false,
    generateFormLading: false
})
const allVisible = reactive({
    newBusinessisible: false
})

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

function editBusiness() {
    businessTemplateRef.value?.getData().then((res: any) => {
        let productTableListData = relatedProductsRef?.value?.returnData()
        if(!productTableListData || judgmentaAmounteEqual({ ...businessTemplateValue.value, ...res }, productTableListData)) {
            return
        }
        let newForm = {
            ...res,
            expectedTransactionDate: res.expectedTransactionDate ? formatDate(new Date(res.expectedTransactionDate)) : '',
            businessItemProductList: productTableListData ? JSON.stringify(productTableListData) : []
        }
        allLoading.businessSaveLading = true
        post(UPDATEINSET, { ...businessTemplateValue.value, ...newForm }).then((_res) => {
            allVisible.newBusinessisible = false
            globalPopup?.showSuccess('保存成功')
            emits('refreshData')
        }).finally(() => {
            allLoading.businessSaveLading = false
        })
    }).catch((_err: any) => {
        console.log(_err)
        globalPopup?.showError('请填写完整')
    })
}

function addBusiness() {
    showVisible('newBusinessisible')
    allLoading.generateFormLading = true
    businessTemplateValue.value = {
        customerId: information.value.customId,
        contactsId: information.value.id
    }
    setTimeout(() => {
        businessTemplateRef.value && businessTemplateRef.value.reset()
        businessTemplateKey.value++
        allLoading.generateFormLading = false
    }, 500)
}

function showVisible(type: keyof typeof allVisible) { // 显示弹窗
    allVisible[type] = true
}

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

watchEffect(() => {
    const { data } = props
    information.value = data
    relatedTaskstable.value = (data.businessOpportunityList || []).map((item: any) => {
        return {
            ...item,
            expectedTransactionDate: item.expectedTransactionDate ? formatDate(new Date(item.expectedTransactionDate)) : '',
            editTime: item.editTime ? formatDate(new Date(item.editTime)) : ''
        }
    })
});

async function getSystemField() {
    const res = await get(GETGENERATEFOEM)
    let config = JSON.parse(res.data[0].config)
    config.list.forEach((item: any) => {
        if (item.type == "grid") {
            item.columns.forEach((column: any) => {
                column.list.forEach((newColumn: any) => {
                    if (newColumn.model == 'customerId' || newColumn.model == "contactsId") {
                        newColumn.options.disabled = true
                    }
                })
            })
        }
    })
    businessTemplate.value = config
}

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: ''
                }
            })
        }
    })
}
// 生命周期钩子
onMounted(() => {
    getSystemField()
    getProductTableList()
});
</script>
<style scoped lang="scss"></style>