geg-gas-web/src/views/dayPlan/LngSettleHdr/components/createForm.vue

<template>
  <a-spin :spinning="spinning" tip="加载中...">
    <div class="page-bg-wrap formViewStyle">
      <a-form ref="formRef" :model="formState" :rules="rules" v-bind="layout">
        <Card title="" :bordered="false" >
          <a-row> 
            <a-col :span="8">
              <a-form-item label="结算月" name="settleMonth">
                <a-date-picker :inputReadOnly="true" v-model:value="formState.settleMonth" style="width: 100%" picker="month" :disabled="isDisable" placeholder="请选择结算月" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="结算月开始日期" name="dateFrom">
                <a-date-picker :inputReadOnly="true" v-model:value="formState.dateFrom" style="width: 100%" :disabled="isDisable" :disabled-date="disabledDateStart" placeholder="请选择开始日期" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="结算月结束日期" name="dateTo">
                <a-date-picker :inputReadOnly="true" v-model:value="formState.dateTo" style="width: 100%" :disabled="isDisable" :disabled-date="disabledDateEnd" placeholder="请选择结束日期" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="客户" name="cpName">
                <a-input-search v-model:value="formState.cpName" :disabled="isDisable || dataList.length" placeholder="请选择客户"  readonly @search="onSearchCustomer"/>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="交易主体" name="comId">
                <a-select v-model:value="formState.comId" :disabled="isDisable || dataList.length" @change="comIdChange" placeholder="请选择" style="width: 100%" allow-clear>
                  <a-select-option v-for="item in optionSelect.comIdList" :key="item.id" :value="item.id">
                    {{ item.shortName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="状态" name="approCode">
                <a-select v-model:value="formState.approCode" disabled style="width: 100%" allow-clear>
                  <a-select-option v-for="item in optionSelect.approCodeList" :key="item.code" :value="item.code">
                      {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="结算总数量(吉焦)" name="qtySettleGj">
                <a-input v-model:value="formState.qtySettleGj" disabled/>
              </a-form-item>
            </a-col>
             <a-col :span="8">
              <a-form-item label="结算总数量(吨)" name="qtySettleTon">
                <a-input v-model:value="formState.qtySettleTon" disabled/>
              </a-form-item>
            </a-col>
             <a-col :span="8">
              <a-form-item label="结算总金额(元)" name="amount">
                <a-input v-model:value="formState.amount" disabled/>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="结算说明" name="settleDesc" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
                <a-textarea  v-model:value="formState.settleDesc" :disabled="isDisable"  :auto-size="{ minRows: 2, maxRows: 5 }"/>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="备注" name="note" :label-col="{ span: 3 }" :wrapper-col="{ span: 24 }">
                <a-textarea  v-model:value="formState.note" :disabled="isDisable"  :auto-size="{ minRows: 2, maxRows: 5 }"/>
              </a-form-item>
            </a-col>
          </a-row>
        </Card>
        
        <Card title="对账单" :bordered="false" >
          <UploadList :disabled="isDisable" btnTip="上传对账单" :list="dataFileAccount" :value="formState.filePath" :tableName="tableName" :columnName="columnName" @change="uploadChange"/>
        </Card>
        <Card title="附件信息" :bordered="false" >
          <UploadList :disabled="isDisable" :list="dataFile" :value="formState.filePath" :tableName="tableName" :columnName="columnName" @change="uploadListChange"/>
        </Card>
        <Card>
          <settleLngHdrList :list="dataList" :disabled="isDisable" :formState="formState" @change="settleChange"></settleLngHdrList>
        </Card>
      </a-form>
    </div>
    <customerListModal @register="registerCustomer" @success="handleSuccessCustomer" selectType="radio" />
   
  </a-spin>
</template>

<script lang="ts" setup>
    import { Card } from 'ant-design-vue';
    import { useRouter } from 'vue-router';
    import { FromPageType, RecordType } from '/@/enums/workflowEnum';
    import { ref, computed, onMounted, onBeforeMount, nextTick, defineAsyncComponent, reactive, defineComponent, watch} from 'vue';
    import { useMessage } from '/@/hooks/web/useMessage';
    import { useI18n } from '/@/hooks/web/useI18n';
    import { useMultipleTabStore } from '/@/store/modules/multipleTab';
    import useEventBus from '/@/hooks/event/useEventBus';
    import type { Rule } from 'ant-design-vue/es/form';
    import { getDictionary } from '/@/api/sales/Customer';
    import { useModal } from '/@/components/Modal';
    import { addLngLngSettleHdr,updateLngLngSettleHdr, getLngLngSettleHdr,getLngLngSettleHdrMonth} from '/@/api/dayPlan/LngSettleHdr';
    import dayjs from 'dayjs';
    import { getAppEnvConfig } from '/@/utils/env';
    import { message } from 'ant-design-vue';
    import UploadList from '/@/components/Form/src/components/UploadList.vue';
    import customerListModal from '/@/components/common/customerListModal.vue';
    import settleLngHdrList from '/@/components/common/settleLngHdrList.vue';
   
    import { getAllCom} from '/@/api/contract/ContractPurInt';
    import { DataFormat, FormatOption, DATE_FORMAT, FormatType } from '/@/utils/dataFormat';

    const tableName = 'LngSettleHdr';
    const columnName = 'LngSettleHdr'

    const formType = ref('2'); // 0 新建 1 修改 2 查看
    const formRef = ref();
    const props = defineProps({
      disabled: false,
      id: ''
    
    });
    const { bus, FORM_LIST_MODIFIED } = useEventBus();

    const router = useRouter();
    const { currentRoute } = router;
    const isDisable = ref(false);
    const { formPath } = currentRoute.value.query;
    const pathArr = [];

    const tabStore = useMultipleTabStore();
    const formProps = ref(null);
    const formId = ref(currentRoute.value?.params?.id);
    const pageType = ref(currentRoute.value.query?.type);
    const pageId = ref(currentRoute.value.query?.id)
    
    const spinning = ref(false);
    const { notification } = useMessage();
    const { t } = useI18n();

    const formState = reactive({
      approCode: 'WTJ',
      settleMonth: dayjs(new Date()),
      settleTypeCode: 'I',
      rpSign: 'Y'
    });
   
    const [registerCustomer, { openModal:openModalCustomer}] = useModal();
    
    const rules= reactive({
      settleMonth: [{ required: true, message: "该项为必填项", trigger: 'change' }],
      dateFrom: [{ required: true, message: "该项为必填项", trigger: 'change' }],
      dateTo: [{ required: true, message: "该项为必填项", trigger: 'change' }],
      cpName: [{ required: true, message: "该项为必填项", trigger: 'change' }],
      rpSign: [{ required: true, message: "该项为必填项", trigger: 'change' }],
      comId: [{ required: true, message: "该项为必填项", trigger: 'change' }],
    });
    const layout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    }
    const dataFile = ref([]);
    const dataFileAccount = ref([])
    const dataList = ref([])
    let optionSelect= reactive({
      approCodeList: [],
      comIdList: [],
      signList: []
    });
  
    watch(
      () => props.id,
      (val) => {
        if (val) {
          getInfo(val)
        }  
      },
      {
        immediate: true
      }
    );
    watch(
      () => props.disabled,
      (val) => {
        isDisable.value = val
      },
      {
        immediate: true
      }
    );
    onMounted(() => {
      getOption()
      if (pageId.value) {
        getInfo(pageId.value)
      }
   
    });
    
    const uploadChange = (val) => {
      val.forEach(v=> {
        v.tableId = ''
      })
      dataFileAccount.value = val
    }
    const uploadListChange = (val) => {
      val.forEach(v=> {
        v.tableId = ''
      })
      dataFile.value = val
    }
    async function getInfo(id)  {
      spinning.value = true
      try {
      let data = await getLngLngSettleHdr(id)
      spinning.value = false
      Object.assign(formState, {...data})
      Object.assign(dataFile.value, formState.lngFileUploadList || [])
      Object.assign(dataFileAccount.value, formState.billList || [])
      Object.assign(dataList.value, formState.lngLngSettleList || [])
      formState.settleMonth = formState.settleMonth ? dayjs(formState.settleMonth) : null
      formState.dateFrom = formState.dateFrom ? dayjs(formState.dateFrom) : null
      formState.dateTo = formState.dateTo ? dayjs(formState.dateTo) : null
      numFormat()
      } catch (error) {
        console.log(error, 'error')
        spinning.value = false
      }
    }
    const numFormat = () => {
      dataList.value = DataFormat.format(dataList.value, [
        FormatOption.createQty('qtySettleGj'),
        FormatOption.createQty('qtySettleTon'),
        FormatOption.createQty('qtyMeaGj'),
        FormatOption.createQty('qtyMeaM3'),
        FormatOption.createAmt('amount'),
        FormatOption.createQty('priceGj',4),
        FormatOption.createQty('priceM3',4),
      ]);
      let obj = {
        qtySettleGj: formState.qtySettleGj,
        qtySettleTon: formState.qtySettleTon,
        amount: formState.amount
      }
      let a =  DataFormat.format({...obj}, [
        FormatOption.createQty('qtySettleGj'),
        FormatOption.createQty('qtySettleTon'),
        FormatOption.createAmt('amount'),
      ]);
      formState.qtySettleGj = a.qtySettleGj
      formState.qtySettleTon = a.qtySettleTon
      formState.amount = a.amount
    }
    const settleChange = (val) => {
      dataList.value = val 
      numClear()
      tableCount()
    }
    const numClear = () => {
      if (!dataList.value.length) {
        formState.qtySettleGj = ''
        formState.qtySettleTon = ''
        formState.amount = ''
      }
    }
    const tableCount = () => {
      let qtySettleGj = 0
      let qtySettleTon = 0
      let amount = 0
      dataList.value.forEach(v => {
        if (Number(v.settleTimes) == 1){
          qtySettleGj+=Number(v.qtySettleGj) || 0
          qtySettleTon+=Number(v.qtySettleTon) || 0
        }
        amount+=Number(v.amount) || 0
      })
      formState.qtySettleGj = qtySettleGj.toFixed(3)
      formState.qtySettleTon = qtySettleTon.toFixed(3)
      formState.amount = amount.toFixed(2)
      numFormat()
    }
    const comIdChange = (val) => {
      if (!val)return
      getDate()
    }
    const getDate=(async () => {
      let obj = {
        cpCode: formState.cpCode,
        comId: formState.comId
      }
      if (formState.cpCode && formState.comId && !formState.dateFrom) {
        let data = await getLngLngSettleHdrMonth(obj) || []
        formState.dateFrom = data?.dateFrom ? dayjs(data?.dateFrom) : null
        formState.dateTo = null
        
      }
    })
    async function getOption() {
      optionSelect.approCodeList = await getDictionary('LNG_APPRO')
      optionSelect.comIdList = await getAllCom() || []
      optionSelect.signList = await getDictionary('LNG_YN')

    }
    const disabledDateStart = (startValue) => {
      const endValue = formState?.dateTo;
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() >= endValue.valueOf();
    }
    const disabledDateEnd = (endValue) => {
      const startValue = formState?.dateFrom;
      if (!endValue || !startValue) {
        return false
      }
      return endValue.valueOf() <= startValue.valueOf();
    }
    const onSearchCustomer = () => {
      openModalCustomer(true,{isUpdate: false})
    }
    const handleSuccessCustomer = (val) => {
      formState.cpCode = val[0].cuCode
      formState.cpName = val[0].cuSname
      getDate()
    }
    function close() {
      tabStore.closeTab(currentRoute.value, router);
    }
    async function getFormValue() {
      return formState
    }
    async function handleSubmit(type) {
      try {
        await formRef.value.validateFields();
        dataList.value.forEach(v => {
          v.settleTypeCode = 'I'
        })
        
        let obj = {
          ...formState,
          lngFileUploadList: dataFile.value, 
          billList: dataFileAccount.value,
          lngLngSettleList: dataList.value,
        }
        spinning.value = true;
        let request = !formState.id ? addLngLngSettleHdr :updateLngLngSettleHdr

        try {
          const data = await request(obj);
          // 新增保存
          if (data?.id) {
            getInfo(data?.id)
          }
          // 同意保存不提示
          if (!type) {
            notification.success({
                message: '提示',
                description: data?.id ? t('新增成功！') : t('修改成功！')
            }); //提示消息
          }
          return data?.id ? data : obj
          
        } finally {
          spinning.value = false;
        }

      } catch (errorInfo) {
        console.log(errorInfo, 'errorInfo')
         spinning.value = false;
         errorInfo?.errorFields?.length && notification.warning({
          message: '提示',
          description: '请完善信息'
        });
        return false
      }
    }

      defineExpose({
        handleSubmit,
        getFormValue
    });
</script>

<style lang="less" scoped>
  :deep(.ant-form-item .ant-form-item-label) {
    width: 135px !important;
    max-width: 135px !important;
  }
    .page-bg-wrap {
        background-color: #fff;
    }

    .top-toolbar {
        min-height: 44px;
        margin-bottom: 12px;
        border-bottom: 1px solid #eee;
    }
</style>