Merge branch 'dev' of http://47.94.165.164:13000/geg-gas/geg-gas-web into dev
This commit is contained in:
133
src/components/common/contractPurPngtListModal.vue
Normal file
133
src/components/common/contractPurPngtListModal.vue
Normal file
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" @ok="handleSubmit"
|
||||
@visible-change="handleVisibleChange" >
|
||||
<BasicTable @register="registerTable" class="ContractPurIntListModal"></BasicTable>
|
||||
</BasicModal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref, nextTick } from 'vue';
|
||||
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
|
||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||
import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { getLngPriceContractPurPng} from '/@/api/price/PricePurPngApp';
|
||||
|
||||
const { t } = useI18n();
|
||||
const comId = ref('')
|
||||
const codeFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'dateFrom',
|
||||
label: '有效期',
|
||||
component: 'RangePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD',
|
||||
style: { width: '100%' },
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const columns: BasicColumn[] = [
|
||||
{ title: t('合同号'), dataIndex: 'kNo', },
|
||||
{ title: t('合同名称'), dataIndex: 'kName', },
|
||||
{ title: t('供应商'), dataIndex: 'suName' ,},
|
||||
{ title: '有效期开始',dataIndex: 'dateFrom', width: 120,},
|
||||
{ title: '有效期结束',dataIndex: 'dateTo', width: 120},
|
||||
{ title: t('合同主体'), dataIndex: 'comName', },
|
||||
{ title: t('上载点'), dataIndex: 'pointUpName'},
|
||||
|
||||
];
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const { notification } = useMessage();
|
||||
const isUpdate = ref(true);
|
||||
const rowId = ref('');
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
const selectedValues = ref([]);
|
||||
const props = defineProps({
|
||||
selectType: { type: String, default: 'checkbox' },
|
||||
|
||||
});
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
|
||||
setModalProps({ confirmLoading: false });
|
||||
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
comId.value = data.comId
|
||||
});
|
||||
|
||||
const [registerTable, { getDataSource, setTableData, updateTableDataRecord, reload }] = useTable({
|
||||
title: t('管道气采购合同列表'),
|
||||
api: getLngPriceContractPurPng,
|
||||
columns,
|
||||
|
||||
bordered: true,
|
||||
pagination: true,
|
||||
canResize: false,
|
||||
formConfig: {
|
||||
labelCol:{span: 9, offSet:10},
|
||||
schemas: codeFormSchema,
|
||||
fieldMapToTime: [['dateFrom', ['startDate', 'endDate'], 'YYYY-MM-DD']],
|
||||
showResetButton: true,
|
||||
},
|
||||
immediate: false, // 设置为不立即调用
|
||||
beforeFetch: (params) => {
|
||||
return { ...params,page:params.limit, comId: comId.value};
|
||||
},
|
||||
rowSelection: {
|
||||
type: props.selectType,
|
||||
onChange: onSelectChange
|
||||
},
|
||||
});
|
||||
const handleVisibleChange = (visible: boolean) => {
|
||||
if (visible) {
|
||||
nextTick(() => {
|
||||
reload();
|
||||
});
|
||||
}
|
||||
};
|
||||
function onSelectChange(rowKeys: string[], e) {
|
||||
selectedKeys.value = rowKeys;
|
||||
selectedValues.value = e
|
||||
}
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? t('管道气采购合同列表') : t('')));
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!selectedValues.value.length) {
|
||||
notification.warning({
|
||||
message: t('提示'),
|
||||
description: t('请选择合同')
|
||||
});
|
||||
return
|
||||
}
|
||||
closeModal();
|
||||
emit('success', selectedValues.value);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style >
|
||||
.ContractPurIntListModal .basicCol{
|
||||
position: inherit !important;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
:deep( .ant-col-8:nth-child(1)) {
|
||||
width: 360px !important;
|
||||
max-width: 360px !important;;
|
||||
}
|
||||
:deep(.ant-col-8:nth-child(1) .ant-form-item-label) {
|
||||
width: 80px !important;
|
||||
}
|
||||
</style>
|
||||
269
src/components/common/priceInfoList.vue
Normal file
269
src/components/common/priceInfoList.vue
Normal file
@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<Card :bordered="false" >
|
||||
<template #title>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<span style="margin-left: 8px;">供应价格信息</span>
|
||||
<a-button type="primary" style="margin: 0 10px" @click="handleAdd" v-if="!isDisable">新增价格</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<div v-for="(item, idx) in dataListPrice" class="tbStyle">
|
||||
<a-button type="primary" style="margin-bottom: 10px;" @click="handleDelete(idx)" v-if="!isDisable">删除</a-button>
|
||||
<a-row>
|
||||
<a-col :span="8">
|
||||
<a-form-item name="kName">
|
||||
<template #label>
|
||||
<span><span style="color:red">*</span>合同</span>
|
||||
</template>
|
||||
<a-input-search v-model:value="item.kName" :disabled="isDisable" placeholder="请选择合同" readonly @search="onContract(idx)"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item name="dateFrom">
|
||||
<template #label>
|
||||
<span><span style="color:red">*</span>价格生效年月</span>
|
||||
</template>
|
||||
<a-date-picker v-model:value="item.dateFrom" style="width: 100%" :disabled="isDisable" placeholder="请选择日期" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="供应商" name="suName">
|
||||
<a-input v-model:value="item.suName" style="width: 100%" disabled/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="上载点" name="pointUpName">
|
||||
<a-input v-model:value="item.pointUpName" style="width: 100%" disabled />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="交割点" name="pointDelyName">
|
||||
<a-input v-model:value="item.pointDelyName" style="width: 100%" disabled />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-form-item label="计量单位" name="uomName">
|
||||
<a-input v-model:value="item.uomName" style="width: 100%" disabled />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-form-item label="价格组成" name="priceDesc">
|
||||
<a-textarea v-model:value="item.priceDesc" disabled :auto-size="{ minRows: 1, maxRows: 5 }"/>
|
||||
</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="item.note" :disabled="isDisable" placeholder="请输入备注" :auto-size="{ minRows: 2, maxRows: 5 }"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div style="width: 100%">
|
||||
<a-button type="primary" style="margin-bottom: 10px" @click="addPrice(idx)" v-if="!isDisable">新增行</a-button>
|
||||
<a-table style="width: 100%" :columns="columnsPrice" :data-source="item.lngPricePurPngAppSuDtlList" :pagination="false">
|
||||
<template #headerCell="{ column }">
|
||||
<template v-if="column.dataIndex == 'priceCode'">
|
||||
<span><span style="color: red">*</span>基础量/增量</span>
|
||||
</template>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === 'priceCode'">
|
||||
<a-select v-model:value="record.priceCode" :disabled="isDisable" style="width: 100%" allow-clear @change="numCount(record, idx, 'rateQtyGj')">
|
||||
<a-select-option v-for="item in optionSelect.baseIncList" :key="item.code" :value="item.code">
|
||||
{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'sort'">
|
||||
<input-number v-model:value="record.sort" :disabled="isDisable" :digits="0" :min="0" style="width: 100%" />
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'rateQtyGj'">
|
||||
<input-number v-model:value="record.rateQtyGj" :disabled="isDisable" :min="0" :digits="3" @change="numCount(record, idx, 'rateQtyGj')" style="width: 100%"/>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'rateQtyM3'">
|
||||
<input-number v-model:value="record.rateQtyM3" :disabled="isDisable" :min="0" :digits="3" @change="numCount(record, idx, 'rateQtyM3')" style="width: 100%"/>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'priceGj'">
|
||||
<input-number v-model:value="record.priceGj" :disabled="isDisable" :min="0" :digits="4" @change="numCount(record, idx, 'priceGj')" style="width: 100%"/>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'priceM3'">
|
||||
<input-number v-model:value="record.priceM3" :disabled="isDisable" :min="0" :digits="4" @change="numCount(record, idx, 'priceM3')" style="width: 100%"/>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'note'">
|
||||
<a-input v-model:value="record.note" :disabled="isDisable" />
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'operation'">
|
||||
<a v-if="!isDisable" @click="deletePrice(idx,index)">删除</a>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
<contractPurPngtListModal @register="registerPur" @success="handleSuccessPur" selectType="radio"/>
|
||||
</Card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { reactive, ref, watch} from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import { message } from 'ant-design-vue';
|
||||
import contractPurPngtListModal from '/@/components/common/contractPurPngtListModal.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const dataListPrice = ref([])
|
||||
const curIdx = ref('')
|
||||
const columnsPrice= ref([
|
||||
{ title: t('序号'), dataIndex: 'index', key: 'index', customRender: (column) => `${column.index + 1}` ,width: 50},
|
||||
{ title: t('基础量/增量'), dataIndex: 'priceCode', width: 150},
|
||||
{ title: t('优先级'), dataIndex: 'sort', width: 150},
|
||||
{ title: t('数量(吉焦)'), dataIndex: 'rateQtyGj', width: 150},
|
||||
{ title: t('数量(方)'), dataIndex: 'rateQtyM3', width: 150},
|
||||
{ title: t('采购价格(元/方)'), dataIndex: 'priceGj', width: 150},
|
||||
{ title: t('采购价格(元/吉焦)'), dataIndex: 'priceM3', width: 150},
|
||||
{ title: t('备注'), dataIndex: 'note'},
|
||||
{ title: t('操作'), dataIndex: 'operation', width: 80, fixed: 'right',align: 'center'},
|
||||
]);
|
||||
const [registerPur, { openModal:openModalPur}] = useModal();
|
||||
const props = defineProps({
|
||||
isDisable: Boolean,
|
||||
list: Array,
|
||||
formState: Object,
|
||||
pageType: String,
|
||||
rateCode: Number || String,
|
||||
optionSelect: Object
|
||||
});
|
||||
const emit = defineEmits(['change']);
|
||||
const numCount = (record, idx, k)=> {
|
||||
let uomCode = dataListPrice.value[idx].uomCode
|
||||
if (uomCode == 'GJ' && k == 'rateQtyGj') {
|
||||
record.rateQtyM3 = record.rateM3Gj ? (Number(record.rateQtyGj || 0)/ Number(record.rateM3Gj)).toFixed(4) : ''
|
||||
}
|
||||
if (uomCode == 'GJ' && k == 'priceGj') {
|
||||
record.priceM3 = record.rateM3Gj ? (Number(record.priceGj || 0) / Number(record.rateM3Gj)).toFixed(4) : ''
|
||||
}
|
||||
if (uomCode == 'M3' && k == 'rateQtyM3') {
|
||||
record.rateQtyGj = (Number(record.rateQtyM3 || 0)*Number(record.rateM3Gj || 0)).toFixed(3)
|
||||
}
|
||||
if (uomCode == 'M3' && k == 'priceM3') {
|
||||
record.priceGj = (Number(record.priceM3 || 0)*Number(record.rateM3Gj || 0)).toFixed(3)
|
||||
}
|
||||
updatePriceDesc(idx)
|
||||
}
|
||||
const updatePriceDesc = (idx) => {
|
||||
let uomCode = dataListPrice.value[idx].uomCode
|
||||
let priceDesc = ''
|
||||
dataListPrice.value[idx].lngPricePurPngAppSuDtlList.forEach(v=> {
|
||||
let a = v.priceCode ? (props.optionSelect.baseIncList.find(i=>i.code == v.priceCode) ||{}).name : ''
|
||||
let b = ''
|
||||
if (uomCode == 'GJ' ) {
|
||||
b=a+(v.rateQtyGj || '')+dataListPrice.value[idx].uomName + ',单价'+(v.priceGj ||'')+';'
|
||||
}
|
||||
if (uomCode == 'M3' ) {
|
||||
b=a+(v.rateQtyM3 || '')+dataListPrice.value[idx].uomName + ',单价'+(v.priceM3 || '')+';'
|
||||
}
|
||||
priceDesc+=b
|
||||
})
|
||||
dataListPrice.value[idx].priceDesc = priceDesc
|
||||
}
|
||||
const addPrice = (idx) => {
|
||||
if (!dataListPrice.value[idx].kName) {
|
||||
message.warn('请选择合同')
|
||||
return
|
||||
}
|
||||
dataListPrice.value[idx].lngPricePurPngAppSuDtlList.push({rateM3Gj: props.rateCode,priceGj: '',priceM3: '',rateQtyM3: '',rateQtyGj: ''})
|
||||
}
|
||||
const deletePrice= (idx, index) => {
|
||||
dataListPrice.value[idx].lngPricePurPngAppSuDtlList.splice(index, 1)
|
||||
updatePriceDesc(idx)
|
||||
}
|
||||
const handleAdd = ()=> {
|
||||
if (!props.formState.comId) {
|
||||
message.warn('请选择交易主体')
|
||||
return
|
||||
}
|
||||
dataListPrice.value.push({
|
||||
kName: '',
|
||||
suName: '',
|
||||
pointDelyName: '',
|
||||
pointUpName: '',
|
||||
lngPricePurPngAppSuDtlList: []
|
||||
})
|
||||
}
|
||||
const handleDelete= (index) => {
|
||||
dataListPrice.value.splice(index, 1)
|
||||
emit('change', dataListPrice.value)
|
||||
}
|
||||
const onContract = (val)=> {
|
||||
curIdx.value = val
|
||||
openModalPur(true,{isUpdate: false, comId: props.formState.comId})
|
||||
}
|
||||
const handleSuccessPur = (val) => {
|
||||
dataListPrice.value[curIdx.value].kId = val[0].kId
|
||||
dataListPrice.value[curIdx.value].kName = val[0].kName
|
||||
dataListPrice.value[curIdx.value].suCode = val[0].suCode
|
||||
dataListPrice.value[curIdx.value].suName = val[0].suName
|
||||
|
||||
dataListPrice.value[curIdx.value].kpppId = val[0].kpppId
|
||||
dataListPrice.value[curIdx.value].pointUpCode = val[0].pointUpCode
|
||||
dataListPrice.value[curIdx.value].pointUpName = val[0].pointUpName
|
||||
dataListPrice.value[curIdx.value].pointDelyCode = val[0].pointDelyCode
|
||||
dataListPrice.value[curIdx.value].pointDelyName = val[0].pointDelyName
|
||||
dataListPrice.value[curIdx.value].uomCode = val[0].uomCode
|
||||
dataListPrice.value[curIdx.value].uomName = val[0].uomName
|
||||
dataListPrice.value[curIdx.value].kpppsId = val[0].id
|
||||
dataListPrice.value[curIdx.value].transSign = val[0].transSign
|
||||
dataListPrice.value[curIdx.value].lngPricePurPngAppSuDtlList = []
|
||||
dataListPrice.value[curIdx.value].priceDesc = ''
|
||||
|
||||
}
|
||||
const getList = () => {
|
||||
return dataListPrice.value
|
||||
}
|
||||
watch(
|
||||
() => props.pageType,
|
||||
(val) => {
|
||||
if (val) {
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.disabled,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let idx2 = columnsPrice.value.findIndex(v =>v.dataIndex == 'operation')
|
||||
idx2>-1 && columnsPrice.value.splice(idx2, 1)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.list,
|
||||
async (val) => {
|
||||
dataListPrice.value = val || []
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
defineExpose({
|
||||
getList,
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.btnBox {
|
||||
span {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user