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="dayDesc">{{ formState.dayDesc }}</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 }">
        <div style="display: flex;">
          <div class="dot"><span style="background:#04F21C"></span>连运<i>{{ formState.powerCont }}</i>台</div>
          <div class="dot"><span style="background:#FFFF00"></span>调峰<i>{{ formState.powerCont }}</i>台</div>
          <div class="dot"><span style="background:#D9001B"></span>停机<i>{{ formState.powerStop }}</i>台</div>
          <div class="dot"><span style="background:#CA90FF"></span>其他<i>{{ formState.powerOther }}</i>台</div>
        </div>
      </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" :disabled="record.alterSign=='D' || disable" :min="0" @change="numChange" style="width: 100%" />
      </template>
        <template v-if="column.dataIndex === 'qtySalesM3'">
        <a-input-number v-model:value="record.qtySalesM3" :disabled="record.alterSign=='D' || disable" :min="0" @change="numChange" style="width: 100%" />
      </template>
        <template v-if="column.dataIndex === 'note'">
        <a-input v-model:value="record.note" :disabled="record.alterSign=='D' || disable" style="width: 100%" />
      </template>
    </template>
  </a-table>

</template>

<script lang="ts" setup>
    import { json } from 'stream/consumers';
import { useI18n } from '/@/hooks/web/useI18n';
    import { ref, computed, onMounted, onBeforeMount, nextTick, defineAsyncComponent, reactive, defineComponent, watch} from 'vue';
    const { t } = useI18n();
    const props = defineProps({
      formObj: {},
      list: [],
      disable: false
    
    });
    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 = ref()
    const dataList = ref([])
    async function numChange () {
      let num = 0;
      let num1 = 0;
      dataList.value.forEach(v => {
        num+=(Number(v.qtySalesGj) || 0)
        num1+=(Number(v.qtySalesM3) || 0)
      })
      formState.value.qtySalesGj = num
      formState.value.qtySalesM3 = num1
    }
    function getFormValue () {
      let obj = {
        formInfo: formState.value,
        list: dataList.value
      }
      return obj
    }
    watch(
      () => props.formObj,
      (val) => {
        if (val) {
          formState.value = val
        }  
      },
      { 
        immediate: true,
        deep: true,
      }
    );
    watch(
      () => props.list,
      (val) => {
        dataList.value = val
      },
      {
        immediate: true,
        deep: true,
      }
    );
    defineExpose({
      getFormValue
    });

</script>

<style lang="less" scoped>
 
    .dot {
      margin-right: 10px;
      display: flex;
      align-items: center;
      i{
        padding: 5px;
        font-style: normal;
      }
      span{
        width: 10px !important;
        height: 10px !important;
        border-radius: 50%;
        background: red;
        display: block;
      }
    }
</style>