212 lines
9.4 KiB
Vue
212 lines
9.4 KiB
Vue
<template>
|
||
<div style="width: 100%">
|
||
<a-button type="primary" style="margin-bottom: 10px" @click="addContractAgree" v-if="!disabled">新增行</a-button>
|
||
<a-table :columns="columns" :data-source="dataListContractAgree" :pagination="false" :scroll="{x: 1300}">
|
||
<template #headerCell="{ column }">
|
||
<template v-if="column.dataIndex == 'dateFrom'">
|
||
<span><span class="redStyle">*</span>开始日期</span>
|
||
</template>
|
||
<template v-if="column.dataIndex == 'dateTo'">
|
||
<span><span class="redStyle">*</span>结束日期</span>
|
||
</template>
|
||
<template v-if="column.dataIndex == 'baseInc'">
|
||
<span><span class="redStyle">*</span>基础量/增量</span>
|
||
</template>
|
||
<template v-if="column.dataIndex == 'sort'">
|
||
<span><span class="redStyle">*</span>优先级</span>
|
||
</template>
|
||
<template v-if="column.dataIndex == 'qtyGjMonth'">
|
||
<span><span class="redStyle">*</span>月气量(吉焦)</span>
|
||
</template>
|
||
<template v-if="column.dataIndex == 'qtyM3Month'">
|
||
<span><span class="redStyle">*</span>月气量(万方)</span>
|
||
</template>
|
||
</template>
|
||
<template #bodyCell="{ column, record, index }">
|
||
<template v-if="column.dataIndex === 'dateFrom'">
|
||
<a-date-picker v-model:value="record.dateFrom" format="YYYY-MM-DD" :value-format="'YYYY-MM-DD'" :disabled="disabled" @change="dateFromTb(dayjs(record.dateFrom || null), index, record)" style="width: 100%" />
|
||
</template>
|
||
<template v-if="column.dataIndex === 'dateTo'">
|
||
<a-date-picker v-model:value="record.dateTo" format="YYYY-MM-DD" :value-format="'YYYY-MM-DD'" :disabled="disabled" @change="dateToTb(dayjs(record.dateTo || null), index, record)" style="width: 100%" />
|
||
</template>
|
||
<template v-if="column.dataIndex === 'sort'">
|
||
<a-input-number v-model:value="record.sort" :disabled="disabled" :min="0" style="width: 100%" />
|
||
</template>
|
||
<template v-if="column.dataIndex === 'baseInc'">
|
||
<a-select v-model:value="record.baseInc" :disabled="disabled" style="width: 100%" allow-clear>
|
||
<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 === 'rateM3Gj'">
|
||
<a-input-number v-model:value="record.rateM3Gj" :disabled="disabled" :min="0" @change="numChange('rateM3Gj', record, index)" style="width: 100%" />
|
||
</template>
|
||
<template v-if="column.dataIndex === 'qtyGjMonth'">
|
||
<a-input-number v-model:value="record.qtyGjMonth" :disabled="disabled" :min="0" @change="numChange('qtyGjMonth', record, index)" style="width: 100%" />
|
||
</template>
|
||
<template v-if="column.dataIndex === 'qtyM3Month'">
|
||
<a-input-number v-model:value="record.qtyM3Month" :disabled="disabled" :min="0" @change="numChange('qtyM3Month', record, index)" style="width: 100%" />
|
||
</template>
|
||
<template v-if="column.dataIndex === 'zfbyTypeCode'">
|
||
<a-select v-model:value="record.zfbyTypeCode" :disabled="disabled" style="width: 100%" allow-clear>
|
||
<a-select-option v-for="item in optionSelect.zfbyTypeCodeList" :key="item.code" :value="item.code">
|
||
{{ item.name }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
<template v-if="column.dataIndex === 'zfbyValue'">
|
||
<a-input-number v-model:value="record.zfbyValue" :disabled="disabled" :min="0" style="width: 100%" />
|
||
</template>
|
||
<template v-if="column.dataIndex === 'note'">
|
||
<a-input v-model:value="record.note" :disabled="disabled" style="width: 100%" />
|
||
</template>
|
||
<template v-if="column.dataIndex === 'operation'">
|
||
<a v-if="!disabled" style="margin-right: 10px" @click="btnCheck(record, index)">删除</a>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { Card } from 'ant-design-vue';
|
||
import { 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 dayjs from 'dayjs';
|
||
|
||
const router = useRouter();
|
||
const { t } = useI18n();
|
||
const dataListContractAgree = ref([])
|
||
const columns= ref([
|
||
{ title: t('序号'), dataIndex: 'index', key: 'index', sorter: true, customRender: (column) => `${column.index + 1}` ,width: 80},
|
||
{ title: t('开始日期'), dataIndex: 'dateFrom', sorter: true, width:160},
|
||
{ title: t('结束日期'), dataIndex: 'dateTo', sorter: true, width: 160},
|
||
{ title: t('基础量/增量'), dataIndex: 'baseInc', sorter: true, width: 130},
|
||
{ title: t('优先级'), dataIndex: 'sort', sorter: true, width: 100},
|
||
{ title: t('比值(方/吉焦)'), dataIndex: 'rateM3Gj', sorter: true, width: 150},
|
||
{ title: t('月气量(吉焦)'), dataIndex: 'qtyGjMonth', sorter: true, width: 150},
|
||
{ title: t('月气量(万方)'), dataIndex: 'qtyM3Month', sorter: true, width: 150},
|
||
{ title: t('日气量(吉焦)'), dataIndex: 'qtyGjDay', sorter: true, width: 120},
|
||
{ title: t('日气量(万方)'), dataIndex: 'qtyM3Day', sorter: true, width: 120},
|
||
{ title: t('照付不议类型'), dataIndex: 'zfbyTypeCode', sorter: true, width: 120},
|
||
{ title: t('照付不议比例%/量数值'), dataIndex: 'zfbyValue', sorter: true, width: 120},
|
||
{ title: t('备注'), dataIndex: 'note', sorter: true, width: 200},
|
||
{ title: t('操作'), dataIndex: 'operation', width: 80, fixed: 'right',align: 'center'},
|
||
]);
|
||
const [register, { openModal:openModal}] = useModal();
|
||
const props = defineProps({
|
||
disabled: Boolean,
|
||
list: Array,
|
||
optionSelect: Object
|
||
});
|
||
const emit = defineEmits(['change']);
|
||
|
||
const addContractAgree = () => {
|
||
dataListContractAgree.value.push({
|
||
dateFrom: null, dateTo: null, rateM3Gj: null, qtyGjMonth: null, qtyM3Month: null, qtyGjDay: null, qtyM3Day: null
|
||
})
|
||
}
|
||
const dateFromTb = (startValue, index, record) => {
|
||
if (!startValue) return
|
||
const endValue = dataListContractAgree.value[index]?.dateTo;
|
||
if (!startValue || !endValue) {
|
||
return false
|
||
}
|
||
if (startValue.valueOf() > endValue.valueOf()) {
|
||
message.warning('结束日期须大于等于开始日期')
|
||
dataListContractAgree.value[index].dateFrom = ''
|
||
return
|
||
}
|
||
dayCount(record)
|
||
}
|
||
|
||
const dateToTb = (endValue, index, record) => {
|
||
if (!endValue) return
|
||
const startValue = dataListContractAgree.value[index]?.dateFrom;
|
||
if (!endValue || !startValue) {
|
||
return false
|
||
}
|
||
if (startValue.valueOf() > endValue.valueOf()) {
|
||
message.warning('结束日期须大于等于开始日期')
|
||
dataListContractAgree.value.splice(index, 1, { ...dataListContractAgree.value[index], dateTo: '' });
|
||
return
|
||
}
|
||
dayCount(record)
|
||
}
|
||
const numChange = (key, record) => {
|
||
if (key == 'qtyGjMonth') {
|
||
numCount2(record)
|
||
dayCount(record)
|
||
}
|
||
if (key == 'qtyM3Month') {
|
||
numCount1(record)
|
||
dayCount(record)
|
||
}
|
||
if (key == 'rateM3Gj') {
|
||
numCount1(record)
|
||
numCount2(record)
|
||
dayCount(record)
|
||
}
|
||
}
|
||
const numCount1 = (record) => {
|
||
// 月气量(吉焦) =月气量(方)qty_m3_month*rate_m3_gj (比值(方/吉焦)
|
||
record.qtyGjMonth = (Number(record.qtyM3Month) || 0) * (Number(record.rateM3Gj) || 0)
|
||
record.qtyGjMonth = record.qtyGjMonth ? record.qtyGjMonth.toFixed(4) : '0'
|
||
}
|
||
const numCount2 = (record) => {
|
||
// 月气量(方) = 月气量(吉焦) qty_gj_month/rate_m3_gj/10000 显示时字段值/10000；保存时页面值*10000
|
||
record.qtyM3Month = Number(record.rateM3Gj) ? (Number(record.qtyGjMonth) || 0) /Number(record.rateM3Gj) : 0
|
||
record.qtyM3Month = record.qtyM3Month ? record.qtyM3Month.toFixed(4) : '0'
|
||
}
|
||
const dayCount = (record) => {
|
||
// 日气量(吉焦) = 月气量(吉焦)qty_gj_month/开始日期到结束日期的天数；计算结果保留整数
|
||
const days = dayjs(record.dateTo).diff(dayjs(record.dateFrom), 'day');
|
||
record.qtyGjDay = days ? (Number(record.qtyGjMonth) || 0) /days : 0
|
||
record.qtyGjDay = parseInt(record.qtyGjDay)
|
||
// 日气量(方) = 月气量(万方)/开始日期到结束日期的天数；计算结果保留4位小数；显示时字段值/10000；保存时页面值*10000
|
||
record.qtyM3Day = days ? (Number(record.qtyM3Month) || 0) /days : 0
|
||
record.qtyM3Day = record.qtyM3Day ? record.qtyM3Day.toFixed(4) : '0'
|
||
}
|
||
const btnCheck = (record, index) => {
|
||
dataListContractAgree.value.splice(index, 1)
|
||
}
|
||
const getQtyList = () => {
|
||
return dataListContractAgree.value
|
||
}
|
||
watch(
|
||
() => props.disabled,
|
||
(val) => {
|
||
if (val) {
|
||
let idx2 = columns.value.findIndex(v =>v.dataIndex == 'operation')
|
||
idx2>-1 && columns.value.splice(idx2, 1)
|
||
}
|
||
},
|
||
{
|
||
immediate: true,
|
||
deep: true,
|
||
}
|
||
);
|
||
watch(
|
||
() => props.list,
|
||
async (val) => {
|
||
dataListContractAgree.value = val || []
|
||
},
|
||
{
|
||
immediate: true,
|
||
deep: true,
|
||
}
|
||
);
|
||
defineExpose({
|
||
getQtyList,
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.redStyle {
|
||
color: red;
|
||
}
|
||
</style>
|