geg-gas-web/src/components/common/priceComposeListModal.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 === 'priceDesc'">
            {{ record.uomName + (record.uomCode == 'M3' ? record.rateQtyM3 : record.rateQtyGj) + record.priceName  }}
          </template>
          <template v-if="column.dataIndex === 'qtySettleGj' && !isDisable">
            <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'&& !isDisable">
            <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'&& !isDisable">
            <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'&& !isDisable">
            <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'&& !isDisable">
            <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';
    import { getLngPngSettleHdrDtlList} from '/@/api/dayPlan/PngSettleHdr';
    import { DataFormat, FormatOption, DATE_FORMAT, FormatType } from '/@/utils/dataFormat';

    const { t } = useI18n();
    const tableData = ref([])
    const curRecord = ref({})
    const isDisable = ref(false)
    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;
        isDisable.value = data.isDisable
        if (!(curRecord.value.lngPngSettleSalesDtlList || []).length) {
          getList()
        } else {
          tableData.value = curRecord.value.lngPngSettleSalesDtlList || []
          tableData.value = DataFormat.format(tableData.value, [
            FormatOption.createQty('qtySettleGj'),
            FormatOption.createQty('qtySettleM3'),
            FormatOption.createAmt('amount'),
            FormatOption.createQty('priceGj',4),
            FormatOption.createQty('priceM3',4),
          ]);
        }
    });

    const getTitle = computed(() => (!unref(isUpdate) ? t('价格组成') : t('')));
    const numChange = (k, record, idx) => {
      if (record.uomCode == 'M3') {
        if (k=='amount') {
          return
        }
        record.amount = ((Number(record.qtySettleM3) || 0) * (Number(record.priceM3) || 0)).toFixed(2)
      }
      if (record.uomCode == 'GJ') {
        if (k=='amount') {
          return
        }
        record.amount = ((Number(record.qtySettleGj) || 0) * (Number(record.priceGj) || 0)).toFixed(2)
      }
    }
    const getList = async () => {
      let res = await getLngPngSettleHdrDtlList({})
      tableData.value = res || []
      // tableData.value.forEach(v => {
      //   v.priceDesc = v.uomName + (v.uomCode == 'M3' ? v.rateQtyM3 : v.rateQtyGj) + v.priceName 
      // })
      
    }
    async function handleSubmit() {
      closeModal();
      emit('success', tableData.value, curRecord.value);
    }



  



</script>
<style >
</style>
<style lang="less" scoped>
</style>