geg-gas-web/src/views/dayPlan/PngAppro/components/basicForm.vue

<template>
  <a-row>
    <a-col :span="8">
      <a-form-item label="计划日期" name="datePlan">{{ formState.datePlan }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="当日/次日" name="kName">{{ formState.datePlan }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="合同" name="kName">{{ formState.kName}}</a-form-item>
    </a-col> 
    <a-col :span="8">
      <a-form-item label="合同量(吉焦)" name="qtyContractGj">{{ formState.qtyContractGj }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="合同量(方)" name="qtyContractM3">{{ formState.qtyContractM3 }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="月合同量执行进度%" name="rateK">{{ formState.rateK }}</a-form-item>
    </a-col>
      <a-col :span="8">
      <a-form-item label="计划量(吉焦)" name="qtyPlanGj">{{ formState.qtyPlanGj }}</a-form-item>
    </a-col>
      <a-col :span="8">
      <a-form-item label="计划量(方)" name="qtyPlanM3">{{ formState.qtyPlanM3 }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="月计划量执行进度%" name="rateMp">{{ formState.rateMp }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="指定量(吉焦)" name="qtyDemandGj">{{ formState.qtyDemandGj }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="指定量(方)" name="qtyDemandM3">{{ formState.qtyDemandM3 }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="月时间进度%" name="rateS">{{ formState.rateS }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="批复量(吉焦)" name="qtySalesGj">{{ formState.qtySalesGj }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="批复量(方)" name="qtySalesM3">{{ formState.qtySalesM3 }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="比值(方/吉焦)" name="rateM3Gj">{{ formState.rateM3Gj }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="交易主体" name="name">{{ formState.name }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="版本号" name="verNo">{{ formState.verNo }}</a-form-item>
    </a-col>
    <a-col :span="24">
      <a-form-item label="下载点" name="fullName" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
        {{ formState.fullName }}
      </a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="审批状态" name="approName">{{ formState.approName }}</a-form-item>
    </a-col>
    <a-col :span="24">
      <a-form-item label="开机方式" name="" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
        <span>连运</span>{{ formState.powerCont }}台
        <span>调峰</span>{{ formState.powerPeak }}台
        <span>停机</span>{{ formState.powerStop }}台
        <span>其他</span>{{ formState.powerOther }}台
      </a-form-item>
    </a-col>
    <a-col :span="24">
      <a-form-item label="备注" name="note" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
        {{ formState.note }}
      </a-form-item>
    </a-col>
  </a-row>
  <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 === 'qtySalesGj'">
        <a-input-number v-model:value="record.qtySalesGj" :min="0" @change="numChange" style="width: 100%" />
      </template>
        <template v-if="column.dataIndex === 'qtySalesM3'">
        <a-input-number v-model:value="record.qtySalesM3" :min="0" @change="numChange" style="width: 100%" />
      </template>
        <template v-if="column.dataIndex === 'note'">
        <a-input v-model:value="record.note" style="width: 100%" />
      </template>
    </template>
  </a-table>
   
</template>

<script lang="ts" setup>
    import { useI18n } from '/@/hooks/web/useI18n';
    import { ref, computed, onMounted, onBeforeMount, nextTick, defineAsyncComponent, reactive, defineComponent, watch} from 'vue';
    const { t } = useI18n();
    const props = defineProps({
      disabled: false,
      id: ''
    
    });
    const columns= ref([
      { title: t('序号'), dataIndex: 'index', key: 'index', sorter: true, customRender: (column) => `${column.index + 1}` ,width: 100},
      { title: t('上载点'), dataIndex: 'pointUpName', sorter: true, width:200},
      { title: t('供应商'), dataIndex: 'suSname', sorter: true, width: 130},
      { title: t('采购合同'), dataIndex: 'kName', sorter: true, width: 200},
      { title: t('指定量(吉焦)'), dataIndex: 'qtyDemandGj', sorter: true, width: 300},
      { title: t('指定量(方)'), dataIndex: 'qtyDemandM3', sorter: true, width: 200},
      { title: t('批复量(吉焦)'), dataIndex: 'qtySalesGj', sorter: true, width: 200},
      { title: t('批复量(方)'), dataIndex: 'qtySalesM3', sorter: true, width: 200},
      { title: t('备注'), dataIndex: 'note', sorter: true, width: 200},
    ]);
    const formState = reactive({})
    const dataList = ref([])
    async function numChange () {
      let num = 0;
      let num = 1;
      dataList.forEach(v => {
        num+=(Number(v.qtySalesGj) || 0)
        num1+=(Number(v.qtySalesM3) || 0)
      })
      formState.qtySalesGj = num
      formState.qtySalesM3 = num1
    }
    watch(
      () => props.id,
      (val) => {
        if (val) {
        }  
      },
      {
        immediate: true
      }
    );
    watch(
      () => props.disabled,
      (val) => {
        
      },
      {
        immediate: true
      }
    );


</script>

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