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

<template>
  <a-row>
    <a-col :span="8">
      <a-form-item label="计划日期" name="datePlan" :class="diffResultList.includes('datePlan') ? 'changeStyle': ''">{{ formState.datePlan }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="当日/次日" name="daysSign" :class="diffResultList.includes('daysSign') ? 'changeStyle': ''">{{ formState.daysSign }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="合同" name="kName" :class="diffResultList.includes('kName') ? 'changeStyle': ''">{{ formState.kName}}</a-form-item>
    </a-col> 
    <a-col :span="8">
      <a-form-item label="合同量(吉焦)" name="qtyContractGj" :class="diffResultList.includes('qtyContractGj') ? 'changeStyle': ''">{{ formState.qtyContractGj }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="合同量(万方)" name="qtyContractM3" :class="diffResultList.includes('qtyContractM3') ? 'changeStyle': ''">{{ formState.qtyContractM3 }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="月合同量执行进度%" name="rateK" :class="diffResultList.includes('rateK') ? 'changeStyle': ''">{{ formState.rateK }}</a-form-item>
    </a-col>
      <a-col :span="8">
      <a-form-item label="计划量(吉焦)" name="qtyPlanGj" :class="diffResultList.includes('qtyPlanGj') ? 'changeStyle': ''">{{ formState.qtyPlanGj }}</a-form-item>
    </a-col>
      <a-col :span="8">
      <a-form-item label="计划量(万方)" name="qtyPlanM3" :class="diffResultList.includes('qtyPlanM3') ? 'changeStyle': ''">{{ formState.qtyPlanM3 }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="月计划量执行进度%" name="rateMp" :class="diffResultList.includes('rateMp') ? 'changeStyle': ''">{{ formState.rateMp }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="指定量(吉焦)" name="qtyDemandGj" :class="diffResultList.includes('qtyDemandGj') ? 'changeStyle': ''">{{ formState.qtyDemandGj }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="指定量(万方)" name="qtyDemandM3" :class="diffResultList.includes('qtyDemandM3') ? 'changeStyle': ''">{{ formState.qtyDemandM3 }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="月时间进度%" name="rateS" :class="diffResultList.includes('rateS') ? 'changeStyle': ''">{{ formState.rateS }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="批复量(吉焦)" name="qtySalesGj" :class="diffResultList.includes('qtySalesGj') ? 'changeStyle': ''">{{ formState.qtySalesGj }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="批复量(万方)" name="qtySalesM3" :class="diffResultList.includes('qtySalesM3') ? 'changeStyle': ''">{{ formState.qtySalesM3 }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="比值(方/吉焦)" name="rateM3Gj" :class="diffResultList.includes('rateM3Gj') ? 'changeStyle': ''">{{ formState.rateM3Gj }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="交易主体" name="comName" :class="diffResultList.includes('comName') ? 'changeStyle': ''">{{ formState.comName }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="版本号" name="verNo" :class="diffResultList.includes('verNo') ? 'changeStyle': ''">{{ formState.verNo }}</a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="下载点" name="poinDelyName" :class="diffResultList.includes('poinDelyName') ? 'changeStyle': ''">
        {{ formState.pointDelyName }}
      </a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="审批状态" name="approName" :class="diffResultList.includes('approName') ? 'changeStyle': ''">{{ 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 :class="diffResultList.includes('powerCont') ? 'changeStyle': ''">{{ formState.powerCont }}</i>台</div>
          <div class="dot"><span style="background:#FFFF00"></span>调峰<i :class="diffResultList.includes('powerPeak') ? 'changeStyle': ''">{{ formState.powerPeak }}</i>台</div>
          <div class="dot"><span style="background:#D9001B"></span>停机<i :class="diffResultList.includes('powerStop') ? 'changeStyle': ''">{{ formState.powerStop }}</i>台</div>
          <div class="dot"><span style="background:#CA90FF"></span>其他<i :class="diffResultList.includes('powerOther') ? 'changeStyle': ''">{{ 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 }" :class="diffResultList.includes('note') ? 'changeStyle': ''">
        {{ formState.note }}
      </a-form-item>
    </a-col>
  </a-row>
  <a-table style="width: 100%" :columns="columns" :data-source="dataList" :pagination="false" :scroll="{x: 100}">
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.dataIndex === 'pointUpName'">
        <div :class="diffResultList.includes('lngPngApproPurList[' + index + '].pointUpName') ? 'changeStyle': ''">{{ record.pointUpName }}</div>
      </template>
      <template v-if="column.dataIndex === 'suName'">
        <div :class="diffResultList.includes('lngPngApproPurList[' + index + '].suName') ? 'changeStyle': ''">{{ record.suName }}</div>
      </template>
      <template v-if="column.dataIndex === 'kpName'">
        <div :class="diffResultList.includes('lngPngApproPurList[' + index + '].kpName') ? 'changeStyle': ''">{{ record.kpName }}</div>
      </template>
      <template v-if="column.dataIndex === 'qtyDemandGj'">
        <div :class="diffResultList.includes('lngPngApproPurList[' + index + '].qtyDemandGj') ? 'changeStyle': ''">{{ record.qtyDemandGj }}</div>
      </template>
      <template v-if="column.dataIndex === 'qtyDemandM3'">
        <div :class="diffResultList.includes('lngPngApproPurList[' + index + '].qtyDemandM3') ? 'changeStyle': ''">{{ record.qtyDemandM3 }}</div>
      </template>
      <template v-if="column.dataIndex === 'qtySalesGj'">
        <a-input-number :class="diffResultList.includes('lngPngApproPurList[' + index + '].qtySalesGj') ? 'changeStyle': ''"
        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 :class="diffResultList.includes('lngPngApproPurList[' + index + '].qtySalesM3') ? 'changeStyle': ''"
        v-model:value="record.qtySalesM3" :disabled="record.alterSign=='D' || disable" :min="0" @change="numChange" style="width: 100%" />
      </template>
      <template v-if="column.dataIndex === 'note'" >
        <div v-if="record.alterSign=='D' || disable" :class="diffResultList.includes('lngPngApproPurList[' + index + '].note') ? 'changeStyle': ''">{{ record.note }}</div>
        <a-input v-model:value="record.note" v-else 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({
      formObj: {},
      list: [],
      disable: false,
      changeList: []
    
    });
    const columns= ref([
      { title: t('序号'), dataIndex: 'index', key: 'index', customRender: (column) => `${column.index + 1}` ,width: 100},
      { title: t('上载点'), dataIndex: 'pointUpName', width:400},
      { title: t('供应商'), dataIndex: 'suName', width: 400},
      { title: t('采购合同'), dataIndex: 'kpName', width: 400},
      { title: t('指定量(吉焦)'), dataIndex: 'qtyDemandGj', width: 300},
      { title: t('指定量(万方)'), dataIndex: 'qtyDemandM3', width: 200},
      { title: t('批复量(吉焦)'), dataIndex: 'qtySalesGj', width: 200},
      { title: t('批复量(万方)'), dataIndex: 'qtySalesM3', width: 200},
      { title: t('备注'), dataIndex: 'note', width: 300},
    ]);
    const formState = ref()
    const dataList = ref([])
    const diffResultList = 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,
      }
    );
    watch(
      () => props.changeList,
      (val) => {
        diffResultList.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;
      }
    }
    .changeStyle {
      color: red !important;
    }
</style>