客户需求对比

This commit is contained in:
‘huanghaiixia’
2026-01-23 11:20:27 +08:00
parent acdc3555ac
commit 7788e60814
6 changed files with 366 additions and 150 deletions

View File

@ -3,96 +3,121 @@
<a-row>
<a-col :span="8">
<a-form-item label="计划日期" name="datePlan">
<a-date-picker v-model:value="formState.datePlan" :disabled-date="disabledDateStart" style="width: 100%" :disabled="disable" placeholder="请选择计划日期" @change="datePlanChange" />
<div v-if="pageType=='compare'" :class="diffResultList.includes('datePlan')?'changeStyle':''">
{{ formState.datePlan ? dayjs(formState.datePlan).format('YYYY-MM-DD'): null }}
</div>
<a-date-picker v-else v-model:value="formState.datePlan" :disabled-date="disabledDateStart" style="width: 100%" :disabled="disable" placeholder="请选择计划日期" @change="datePlanChange" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="合同" name="kName">
<a-input-search v-model:value="formState.kName" :disabled="disable" placeholder="请选择合同" readonly @search="onSearch"/>
<div v-if="pageType=='compare'" :class="diffResultList.includes('kName')?'changeStyle':''">{{ formState.kName }}</div>
<a-input-search v-else v-model:value="formState.kName" :disabled="disable" placeholder="请选择合同" readonly @search="onSearch"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="下载点" name="pointDelyName">
<a-input-search v-model:value="formState.pointDelyName" :disabled="disable" placeholder="请选择下载点" readonly @search="onSearchUpLoad"/>
<div v-if="pageType=='compare'" :class="diffResultList.includes('pointDelyName')?'changeStyle':''">{{ formState.pointDelyName }}</div>
<a-input-search v-else v-model:value="formState.pointDelyName" :disabled="disable" placeholder="请选择下载点" readonly @search="onSearchUpLoad"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="合同量(吉焦)" name="qtyContractGj">{{ formState.qtyContractGj }}</a-form-item>
<a-form-item label="合同量(吉焦)" name="qtyContractGj" :class="diffResultList.includes('qtyContractGj')?'changeStyle':''">{{ formState.qtyContractGj }}</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="合同量(方)" name="qtyContractM3">{{ formState.qtyContractM3 }}</a-form-item>
<a-form-item label="合同量(方)" name="qtyContractM3" :class="diffResultList.includes('qtyContractM3')?'changeStyle':''">{{ formState.qtyContractM3 }}</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="月合同量执行进度%" name="rateK">{{ formState.rateK }}</a-form-item>
<a-form-item label="月合同量执行进度%" name="rateK" :class="diffResultList.includes('rateK')?'changeStyle':''">{{ formState.rateK }}</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="计划量(吉焦)" name="qtyPlanGj">{{ formState.qtyPlanGj }}</a-form-item>
<a-form-item label="计划量(吉焦)" name="qtyPlanGj" :class="diffResultList.includes('qtyPlanGj')?'changeStyle':''">{{ formState.qtyPlanGj }}</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="计划量(方)" name="qtyPlanM3">{{ formState.qtyPlanM3 }}</a-form-item>
<a-form-item label="计划量(方)" name="qtyPlanM3" :class="diffResultList.includes('qtyPlanM3')?'changeStyle':''">{{ formState.qtyPlanM3 }}</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="月计划量执行进度%" name="rateMp">{{ formState.rateMp }}</a-form-item>
<a-form-item label="月计划量执行进度%" name="rateMp" :class="diffResultList.includes('rateMp')?'changeStyle':''">{{ formState.rateMp }}</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="指定量(吉焦)" name="qtyDemandGj">{{ formState.qtyDemandGj }}</a-form-item>
<a-form-item label="指定量(吉焦)" name="qtyDemandGj" :class="diffResultList.includes('qtyDemandGj')?'changeStyle':''">{{ formState.qtyDemandGj }}</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="指定量(方)" name="qtyDemandM3">{{ formState.qtyDemandM3 }}</a-form-item>
<a-form-item label="指定量(方)" name="qtyDemandM3" :class="diffResultList.includes('qtyDemandM3')?'changeStyle':''">{{ formState.qtyDemandM3 }}</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="月时间进度%" name="rateS">{{ formState.rateS }}</a-form-item>
<a-form-item label="月时间进度%" name="rateS" :class="diffResultList.includes('rateS')?'changeStyle':''">{{ formState.rateS }}</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="批复量(吉焦)" name="qtySalesGj">{{ formState.qtySalesGj }}</a-form-item>
<a-form-item label="批复量(吉焦)" name="qtySalesGj" :class="diffResultList.includes('qtySalesGj')?'changeStyle':''">{{ formState.qtySalesGj }}</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="批复量(方)" name="qtySalesM3">{{ formState.qtySalesM3 }}</a-form-item>
<a-form-item label="批复量(方)" name="qtySalesM3" :class="diffResultList.includes('qtySalesM3')?'changeStyle':''">{{ formState.qtySalesM3 }}</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="比值(方/吉焦)" name="rateM3Gj">{{ formState.rateM3Gj }}</a-form-item>
<a-form-item label="比值(方/吉焦)" name="rateM3Gj" :class="diffResultList.includes('rateM3Gj')?'changeStyle':''">{{ formState.rateM3Gj }}</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="交易主体" name="name">{{ formState.name }}</a-form-item>
<a-form-item label="交易主体" name="comName" :class="diffResultList.includes('comName')?'changeStyle':''">{{ formState.name }}</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="版本号" name="verNo">{{ formState.verNo }}</a-form-item>
<a-form-item label="版本号" name="verNo" :class="diffResultList.includes('verNo')?'changeStyle':''">{{ formState.verNo }}</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="审批状态" name="approName">{{ formState.approName }}</a-form-item>
<a-form-item label="审批状态" name="approName" :class="diffResultList.includes('approName')?'changeStyle':''">{{ formState.approName }}</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="开机方式" name="" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
<div style="display: flex;">
<div class="dot"><span style="background:#04F21C"></span>连运<a-input-number v-model:value="formState.powerCont" :disabled="disable" :precision="0"/></div>
<div class="dot"><span style="background:#FFFF00"></span>调峰<a-input-number v-model:value="formState.powerPeak" :disabled="disable" :precision="0"/></div>
<div class="dot"><span style="background:#D9001B"></span>停机<a-input-number v-model:value="formState.powerStop" :disabled="disable" :precision="0"/></div>
<div class="dot"><span style="background:#CA90FF"></span>其他<a-input-number v-model:value="formState.powerOther" :disabled="disable" :precision="0"/></div>
<div class="dot"><span style="background:#04F21C"></span>连运<a-input-number v-model:value="formState.powerCont" :class="diffResultList.includes('powerCont')?'changeStyle':''" :disabled="disable" :precision="0"/></div>
<div class="dot"><span style="background:#FFFF00"></span>调峰<a-input-number v-model:value="formState.powerPeak" :class="diffResultList.includes('powerPeak')?'changeStyle':''" :disabled="disable" :precision="0"/></div>
<div class="dot"><span style="background:#D9001B"></span>停机<a-input-number v-model:value="formState.powerStop" :class="diffResultList.includes('powerStop')?'changeStyle':''" :disabled="disable" :precision="0"/></div>
<div class="dot"><span style="background:#CA90FF"></span>其他<a-input-number v-model:value="formState.powerOther" :class="diffResultList.includes('powerOther')?'changeStyle':''" :disabled="disable" :precision="0"/></div>
</div>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="备注" name="note" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
<a-textarea v-model:value="formState.note" placeholder="请输入备注" :auto-size="{ minRows: 2, maxRows: 5 }"/>
<div v-if="pageType=='compare'" :class="diffResultList.includes('note')?'changeStyle':''">{{ formState.note }}</div>
<a-textarea v-else v-model:value="formState.note" :disabled="disable" placeholder="请输入备注" :auto-size="{ minRows: 2, maxRows: 5 }"/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="批复意见" name="reply" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
<a-textarea v-model:value="formState.reply" disabled :auto-size="{ minRows: 1, maxRows: 5 }"/>
<div v-if="pageType=='compare'" :class="diffResultList.includes('reply')?'changeStyle':''">{{ formState.reply }}</div>
<a-textarea v-else v-model:value="formState.reply" disabled :auto-size="{ minRows: 1, maxRows: 5 }"/>
</a-form-item>
</a-col>
</a-row>
</a-form>
<a-table style="width: 100%" :columns="columns" :data-source="dataList" :pagination="false" :scroll="{x: 1000}">
<template #bodyCell="{ column, record, index }">
<template v-if="column.dataIndex === 'pointUpName'">
<div :class="diffResultList.includes('lngPngDemandPurList[' + index + '].pointUpName') ? 'changeStyle': ''">{{ record.pointUpName }}</div>
</template>
<template v-if="column.dataIndex === 'suName'">
<div :class="diffResultList.includes('lngPngDemandPurList[' + index + '].suName') ? 'changeStyle': ''">{{ record.suName }}</div>
</template>
<template v-if="column.dataIndex === 'kpName'">
<div :class="diffResultList.includes('lngPngDemandPurList[' + index + '].kpName') ? 'changeStyle': ''">{{ record.kpName }}</div>
</template>
<template v-if="column.dataIndex === 'qtySalesGj'">
<div :class="diffResultList.includes('lngPngDemandPurList[' + index + '].qtySalesGj') ? 'changeStyle': ''">{{ record.qtySalesGj }}</div>
</template>
<template v-if="column.dataIndex === 'qtySalesM3'">
<div :class="diffResultList.includes('lngPngDemandPurList[' + index + '].qtySalesM3') ? 'changeStyle': ''">{{ record.qtySalesM3 }}</div>
</template>
<template v-if="column.dataIndex === 'qtyDemandGj'">
<a-input-number v-model:value="record.qtyDemandGj" :disabled="disable" :min="0" @change="numChange('qtyDemandGj', record)" style="width: 100%" />
<a-input-number v-model:value="record.qtyDemandGj" :class="diffResultList.includes('lngPngDemandPurList[' + index + '].qtyDemandGj')?'changeStyle':''" :disabled="disable" :min="0" @change="numChange('qtyDemandGj', record)" style="width: 100%" />
</template>
<template v-if="column.dataIndex === 'qtyDemandM3'">
<a-input-number v-model:value="record.qtyDemandM3" :disabled="disable" :min="0" @change="numChange('qtyDemandM3', record)" style="width: 100%" />
<a-input-number v-model:value="record.qtyDemandM3" :class="diffResultList.includes('lngPngDemandPurList[' + index + '].qtyDemandM3')?'changeStyle':''" :disabled="disable" :min="0" @change="numChange('qtyDemandM3', record)" style="width: 100%" />
</template>
<template v-if="column.dataIndex === 'note'">
<a-input v-model:value="record.note" style="width: 100%" />
<template v-if="column.dataIndex === 'note'">
<div v-if="pageType=='compare'" :class="diffResultList.includes('lngPngDemandPurList[' + index + '].note')?'changeStyle':''">
{{ record.note }}
</div>
<a-input v-else v-model:value="record.note" :disabled="disable" style="width: 100%" />
</template>
</template>
</a-table>
@ -117,6 +142,7 @@
const router = useRouter();
const { currentRoute } = router;
const pageId = ref(currentRoute.value.query?.id)
const pageType = ref(currentRoute.value.query?.type)
const formRef = ref()
const rules= reactive({
pointDelyName: [{ required: true, message: "该项为必填项", trigger: 'change' }],
@ -133,9 +159,10 @@
const props = defineProps({
formObj: {},
list: [],
disable: false
disable: false,
changeList: []
});
const diffResultList = ref([])
const columns= ref([
{ title: t('序号'), dataIndex: 'index', key: 'index', customRender: (column) => `${column.index + 1}` ,width: 100},
{ title: t('供应商'), dataIndex: 'suName', width: 300},
@ -157,11 +184,15 @@
const contractList = ref([])
const pointDelyList = ref([])
onMounted(async () =>{
const res = await getCompDept(userInfo.id)
formState.value.cuCode = res?.comp?.code
formState.value.comId = res?.comp?.id
const res1 = await getLngPngDemandRate({}) || []
formState.value.rateM3Gj = res1[0].rateM3Gj
if (!pageType.value) {
const res = await getCompDept(userInfo.id)
formState.value.cuCode = res?.comp?.code
formState.value.comId = res?.comp?.id
}
if (pageType.value!=='view' && pageType.value!=='compare') {
const res1 = await getLngPngDemandRate({}) || []
formState.value.rateM3Gj = res1[0].rateM3Gj
}
})
async function numChange (k, record) {
if (k == 'qtyDemandGj') {
@ -312,7 +343,16 @@
() => props.list,
(val) => {
dataList.value = val
console.log(dataList.value, 88888888888)
},
{
immediate: true,
deep: true,
}
);
watch(
() => props.changeList,
(val) => {
diffResultList.value = val || []
},
{
immediate: true,
@ -343,4 +383,7 @@
display: block;
}
}
.changeStyle {
color: red !important;
}
</style>

View File

@ -5,22 +5,22 @@
<a-button style="margin-right: 10px" @click="close">
<slot name="icon"><close-outlined /></slot>关闭
</a-button>
<template v-if="currentRoute.query.type!=='compare'">
<a-button style="margin-right: 10px" type="primary" @click="checkBtn('save')" v-if="!currentRoute.query.type">
<template v-if="pageType=='edit'||pageType=='update' ">
<a-button style="margin-right: 10px" type="primary" @click="checkBtn('save')">
<slot name="icon"><save-outlined /></slot>保存
</a-button>
<a-button style="margin-right: 10px" @click="checkBtn('submit')" v-if="!currentRoute.query.type">
<a-button style="margin-right: 10px" @click="checkBtn('submit')">
<slot name="icon"><send-outlined /></slot>保存并提交
</a-button>
</template>
</div>
<Card :title="title" :bordered="false" >
<basicForm ref="formRef" :formObj="formState" :list="dataList" :disable="currentRoute.query.type"></basicForm>
</Card>
<Card :title="title" :bordered="false" v-if="currentRoute.query.type=='compare'">
<basicForm :formObj="formState" :list="dataList" :disable="currentRoute.query.type"></basicForm>
</Card>
<Card :title="title" :bordered="false" v-if="pageType=='compare'&&titleNew">
<basicForm :formObj="formStateNew" :changeList="diffResultList" :list="dataListNew" :disable="true"></basicForm>
</Card>
<Card :title="title" :bordered="false" v-if="title">
<basicForm ref="formRef" :formObj="formState" :list="dataList" :disable="pageType=='view' || pageType=='compare'"></basicForm>
</Card>
</div>
</a-spin>
@ -39,7 +39,7 @@
import type { Rule } from 'ant-design-vue/es/form';
import { getDictionary } from '/@/api/sales/Customer';
import { useModal } from '/@/components/Modal';
import { addLngPngDemand, submitLngPngDemand,getLngPngDemand } from '/@/api/dayPlan/Demand';
import { addLngPngDemand, submitLngPngDemand,getLngPngDemand,getLngPngDemandUpdate,getLngPngDemandCompare } from '/@/api/dayPlan/Demand';
import dayjs from 'dayjs';
import { getAppEnvConfig } from '/@/utils/env';
import { message } from 'ant-design-vue';
@ -48,70 +48,77 @@
const userStore = useUserStore();
const userInfo = userStore.getUserInfo;
const formType = ref('2'); // 0 新建 1 修改 2 查看
const formRef = ref();
const props = defineProps({
disabled: false,
id: ''
});
const { bus, FORM_LIST_MODIFIED } = useEventBus();
const router = useRouter();
const { currentRoute } = router;
const isDisable = ref(false);
const { formPath } = currentRoute.value.query;
const pathArr = [];
const { currentRoute } = router
const tabStore = useMultipleTabStore();
const formProps = ref(null);
const formId = ref(currentRoute.value?.params?.id);
const pageType = ref(currentRoute.value.query?.type);
const pageId = ref(currentRoute.value.query?.id)
const pageType = ref(currentRoute.value.query?.type)
const contractQty = ref()
const spinning = ref(false);
const curIdx = ref(null)
const { notification } = useMessage();
const { t } = useI18n();
const hasDel = ref(false)
const formState = reactive({
datePlan: null
});
const formStateNew = reactive({})
const [register, { openModal:openModal}] = useModal();
const title = ref('管道气需求')
const dataList = ref([])
const titleNew = ref('')
const dataListNew = ref([])
const basicFormRef = ref()
let optionSelect= reactive({
approCodeList: [],
});
watch(
() => props.id,
(val) => {
if (val) {
getInfo(val)
}
},
{
immediate: true
}
);
const diffResultList = ref([])
const dataList = ref([])
onMounted(() => {
if (pageId.value) {
if (pageType.value=='compare') {
getCompareInfo(pageId.value)
return
}
getInfo(pageId.value)
}
});
async function getCompareInfo(id) {
spinning.value = true
try {
let data = await getLngPngDemandCompare(id) || {}
spinning.value = false
diffResultList.value = data.diffResultList || []
let obj = changeData(data.oldBean || {})
Object.assign(formState, {...obj.params})
Object.assign(dataList.value, obj.list || [])
title.value = formState.verNo? ('版本V'+ formState.verNo) : ''
let obj1 = changeData(data.newBean || {})
Object.assign(formStateNew, {...obj1.params})
Object.assign(dataListNew.value, obj1.list || [])
titleNew.value = formStateNew.verNo ? ('版本V'+ formStateNew.verNo) : ''
} catch (error) {
console.log(error,'error555555')
spinning.value = false
}
}
async function getInfo(id) {
spinning.value = true
try {
let data = await getLngPngDemand(id)
spinning.value = false
let obj = changeData(data)
Object.assign(formState, {...obj.params})
Object.assign(dataList.value, obj.list || [{}])
let data = {}
if (pageType.value == 'update') {
data = await getLngPngDemandUpdate(id)
} else {
data = await getLngPngDemand(id)
}
spinning.value = false
let obj = changeData(data)
Object.assign(formState, {...obj.params})
Object.assign(dataList.value, obj.list || [{}])
} catch (error) {
console.log(error, 'error')
@ -119,14 +126,14 @@
}
}
const changeData = (obj) => {
let arr = obj.lngPngDemandPurList || [{}]
let arr = obj.lngPngDemandPurList || []
obj.datePlan = obj.datePlan ? dayjs(obj.datePlan) : null
obj.qtyContractM3 = Number(obj.qtyContractM3)/10000
obj.qtyPlanM3 = Number(obj.qtyPlanM3)/10000
obj.qtyDemandM3 = Number(obj.qtyDemandM3)/10000
obj.qtySalesM3 = Number(obj.qtySalesM3)/10000
arr.forEach(v => {
arr.length && arr.forEach(v => {
v.qtyDemandM3 = Number(v.qtyDemandM3)/10000
v.qtySalesM3 = Number(v.qtySalesM3)/10000