93 lines
3.7 KiB
Vue
93 lines
3.7 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" @ok="handleSubmit">
|
||
|
|
<a-table :columns="columns" :data-source="tableData" :scroll="{x: 300}" :pagination="false">
|
||
|
|
<template #bodyCell="{ column, record, index }">
|
||
|
|
<template v-if="column.dataIndex === 'qtySettleGj'">
|
||
|
|
<a-input-number v-model:value="record.qtySettleGj" :min="0" :precision="3" @change="numChange('qtySettleGj', record, index)" style="width: 100%" />
|
||
|
|
</template>
|
||
|
|
<template v-if="column.dataIndex === 'qtySettleM3'">
|
||
|
|
<a-input-number v-model:value="record.qtySettleM3" :min="0" :precision="3" @change="numChange('qtySettleM3', record, index)" style="width: 100%" />
|
||
|
|
</template>
|
||
|
|
<template v-if="column.dataIndex === 'priceM3'">
|
||
|
|
<a-input-number v-model:value="record.priceM3" :min="0" :precision="4" @change="numChange('priceM3', record, index)" style="width: 100%" />
|
||
|
|
</template>
|
||
|
|
<template v-if="column.dataIndex === 'priceGj'">
|
||
|
|
<a-input-number v-model:value="record.priceGj" :min="0" :precision="4" @change="numChange('priceGj', record, index)" style="width: 100%" />
|
||
|
|
</template>
|
||
|
|
<template v-if="column.dataIndex === 'amount'">
|
||
|
|
<a-input-number v-model:value="record.amount" :min="0" :precision="2" @change="numChange('amount', record, index)" style="width: 100%" />
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</a-table>
|
||
|
|
</BasicModal>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref, computed, unref, nextTick } from 'vue';
|
||
|
|
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
|
||
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
||
|
|
import { useI18n } from '/@/hooks/web/useI18n';
|
||
|
|
|
||
|
|
const { t } = useI18n();
|
||
|
|
const tableData = ref([
|
||
|
|
{priceDesc: '基础量300000方'},
|
||
|
|
{priceDesc: '增量'}
|
||
|
|
])
|
||
|
|
const curRecord = ref({})
|
||
|
|
const columns= [
|
||
|
|
{ title: t('序号'), dataIndex: 'index', key: 'index', customRender: (column) => `${column.index + 1}` ,width: 80},
|
||
|
|
{ title: t('价格描述'), dataIndex: 'priceDesc', width:130},
|
||
|
|
{ title: t('数量(吉焦)'), dataIndex: 'qtySettleGj', width: 120},
|
||
|
|
{ title: t('数量(方)'), dataIndex: 'qtySettleM3', width: 120},
|
||
|
|
{ title: t('价格(元/方)'), dataIndex: 'priceM3', width: 120},
|
||
|
|
{ title: t('价格(元/吉焦)'), dataIndex: 'priceGj', width: 120},
|
||
|
|
{ title: t('金额(元)'), dataIndex: 'amount', width: 120},
|
||
|
|
];
|
||
|
|
|
||
|
|
const emit = defineEmits(['success', 'register']);
|
||
|
|
|
||
|
|
const { notification } = useMessage();
|
||
|
|
const isUpdate = ref(true);
|
||
|
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||
|
|
|
||
|
|
setModalProps({ confirmLoading: false });
|
||
|
|
curRecord.value = data.record || {}
|
||
|
|
isUpdate.value = !!data?.isUpdate;
|
||
|
|
});
|
||
|
|
|
||
|
|
const getTitle = computed(() => (!unref(isUpdate) ? t('价格组成') : t('')));
|
||
|
|
const numChange = (k, record, idx) => {
|
||
|
|
if (curRecord.value.uomCode == 'M3') {
|
||
|
|
if (k=='amount') {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
record.amount = ((Number(record.qtySettleM3) || 0) * (Number(record.priceM3) || 0)).toFixed(2)
|
||
|
|
}
|
||
|
|
if (curRecord.value.uomCode == 'GJ') {
|
||
|
|
if (k=='amount') {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
record.amount = ((Number(record.qtySettleGj) || 0) * (Number(record.priceGj) || 0)).toFixed(2)
|
||
|
|
}
|
||
|
|
// if (curRecord.value.uomCode == 'TON') {
|
||
|
|
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
async function handleSubmit() {
|
||
|
|
closeModal();
|
||
|
|
emit('success', tableData.value, curRecord.value);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style >
|
||
|
|
</style>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
</style>
|