diff --git a/src/api/dayPlan/PngSettleHdrPur/index.ts b/src/api/dayPlan/PngSettleHdrPur/index.ts
index 0d5ce15..0da8393 100644
--- a/src/api/dayPlan/PngSettleHdrPur/index.ts
+++ b/src/api/dayPlan/PngSettleHdrPur/index.ts
@@ -3,17 +3,64 @@ import { defHttp } from '/@/utils/http/axios';
 import { ErrorMessageMode } from '/#/axios';
 
 enum Api {
-  Page = '/dayPlan/pngSettleHdrPur/page',
+  // Page = '/dayPlan/pngSettleHdrPur/page',
+  Page = '/magic-api/dayPlan/pngSettlePurHdrPage',
   List = '/dayPlan/pngSettleHdrPur/list',
   Info = '/dayPlan/pngSettleHdrPur/info',
   LngPngSettleHdr = '/dayPlan/pngSettleHdrPur',
-  
+  PageAdd = '/magic-api/dayPlan/pngSettlePurHdrSelectPage',
+  date = '/magic-api/dayPlan/pngSettlePurHdrSelectDateTo',
+  DtlList = '/magic-api/dayPlan/pngSettlePurHdrDtlList',
+  LngPngSettleHdrCancel = '/dayPlan/pngSettleHdrPur/cancel',
   
   
   
   DataLog = '/dayPlan/pngSettleHdrPur/datalog',
 }
-
+export async function cancelLngPngSettleHdr(ids: string[], mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<boolean>(
+    {
+      url: Api.LngPngSettleHdrCancel,
+      data: ids,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+export async function getLngPngSettleHdrDtlListPur(params, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get<LngPngSettleHdrPageModel>(
+    {
+      url: Api.DtlList,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+export async function getLngPngSettleHdrDate(params, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get<LngPngSettleHdrPageModel>(
+    {
+      url: Api.date,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+export async function getLngPngSettleHdrPageAddPur(params: LngPngSettleHdrPageParams, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get<LngPngSettleHdrPageResult>(
+    {
+      url: Api.PageAdd,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
 /**
  * @description: 查询LngPngSettleHdr分页列表
  */
diff --git a/src/components/common/measureListModal.vue b/src/components/common/measureListModal.vue
index 76aa896..3164cb9 100644
--- a/src/components/common/measureListModal.vue
+++ b/src/components/common/measureListModal.vue
@@ -28,10 +28,16 @@
     import { useMessage } from '/@/hooks/web/useMessage';
     import { useI18n } from '/@/hooks/web/useI18n';
     import { getLngPngSettleHdrPageAdd} from '/@/api/dayPlan/PngSettleHdr';
+    import { getLngPngSettleHdrPageAddPur} from '/@/api/dayPlan/PngSettleHdrPur'
     import { parseDownloadUrl} from '/@/api/system/file';
     import { downloadByUrl } from '/@/utils/file/download';
     import { DataFormat, FormatOption, DATE_FORMAT, FormatType } from '/@/utils/dataFormat';
-
+    
+    const props = defineProps({
+      selectType: { type: String, default: 'checkbox' },
+      pageType: String
+    
+    });
     const { t } = useI18n();
     const checked = ref(false)
     const codeFormSchema: FormSchema[] = [
@@ -60,6 +66,21 @@
       { dataIndex: 'file', title: '附件', align: 'left',width: 200},
       { dataIndex: 'settledSign', title: '已结算', align: 'left',width: 100},
     ];
+    const columnsPur: BasicColumn[] = [
+      { dataIndex: 'datePlan', title: '计划日期', align: 'left', width: 100},
+      { dataIndex: 'dateMea', title: '计量日期', align: 'left',width: 100},
+      { dataIndex: 'suSname', title: '供应商', align: 'left',  },
+      { dataIndex: 'pointUpName', title: '上载点', align: 'left',},
+      { dataIndex: 'cuSname', title: '客户', align: 'left',},
+      { dataIndex: 'pointDelyName', title: '下载点', align: 'left',},
+      { dataIndex: 'comName', title: '交易主体', align: 'left',},
+      { dataIndex: 'qtyMeaGj', title: '完成量(吉焦)', align: 'left',width: 120},
+      { dataIndex: 'qtyMeaM3', title: '完成量(方)', align: 'left',width: 120},
+      { dataIndex: 'rateM3Gj', title: '比值(方/吉焦)', align: 'left',width: 120},
+      { dataIndex: 'kpName', title: '采购合同', align: 'left',},
+      { dataIndex: 'file', title: '附件', align: 'left',width: 200},
+      { dataIndex: 'settledSign', title: '已结算', align: 'left',width: 100},
+    ];
 
     const emit = defineEmits(['success', 'register']);
 
@@ -68,24 +89,21 @@
     const rowId = ref('');
     const selectedKeys = ref<string[]>([]);
     const selectedValues = ref([]);
-    const props = defineProps({
-      selectType: { type: String, default: 'checkbox' },
     
-    });
     const searchParams = ref({})
     const tableData = ref([])
     const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-
         setModalProps({ confirmLoading: false });
 
         isUpdate.value = !!data?.isUpdate;
         searchParams.value = data.searchParams || {}
     });
 
-    const [registerTable, { getDataSource, setTableData, updateTableDataRecord, reload  }] = useTable({
+    const [registerTable, { getDataSource, setTableData, updateTableDataRecord, reload,clearSelectedRowKeys  }] = useTable({
         title: t('待结算记录'),
-        api: getLngPngSettleHdrPageAdd,
-        columns,
+        api: props.pageType=='supplier'?getLngPngSettleHdrPageAddPur: getLngPngSettleHdrPageAdd,
+        rowKey: props.pageType=='supplier' ? 'salesPurId': 'salesId',
+        columns: props.pageType=='supplier' ? columnsPur: columns,
   
         bordered: true,
         pagination: true,
@@ -95,10 +113,16 @@
           schemas: codeFormSchema,
           fieldMapToTime: [['datePlan', ['startDate', 'endDate'], 'YYYY-MM-DD']],
           showResetButton: true,
+          resetButtonOptions: {
+            text: '重置',
+            onClick: () => {
+              checked.value = false
+            },
+          },
         },
         immediate: false, // 设置为不立即调用
         beforeFetch: (params) => {
-          return { ...params,page:params.limit,...searchParams.value};
+          return { ...params,page:params.limit,...searchParams.value,settledSign:  checked.value ? 0 : null};
         },
         afterFetch: (res) => {
           tableData.value = res || [] 
@@ -144,7 +168,7 @@
       }
     };
     const checkChange = (val) => {
-      reload({ searchInfo: { settledSign:  checked.value ? 0 : null } });
+      reload();
     }
     const handleDownload = (info) => {
       const url = parseDownloadUrl(info.response ? info.response.data.fileUrl : info.fileUrl);
@@ -166,6 +190,7 @@
         return
       }
       closeModal();
+      clearSelectedRowKeys()
       emit('success', selectedValues.value);
     }
 
diff --git a/src/components/common/priceComposeListModal.vue b/src/components/common/priceComposeListModal.vue
index e007309..bb98a1a 100644
--- a/src/components/common/priceComposeListModal.vue
+++ b/src/components/common/priceComposeListModal.vue
@@ -32,6 +32,7 @@
     import { useMessage } from '/@/hooks/web/useMessage';
     import { useI18n } from '/@/hooks/web/useI18n';
     import { getLngPngSettleHdrDtlList} from '/@/api/dayPlan/PngSettleHdr';
+    import { getLngPngSettleHdrDtlListPur} from '/@/api/dayPlan/PngSettleHdrPur';
     import { DataFormat, FormatOption, DATE_FORMAT, FormatType } from '/@/utils/dataFormat';
 
     const { t } = useI18n();
@@ -49,7 +50,10 @@
     ];
 
     const emit = defineEmits(['success', 'register']);
-
+    const props = defineProps({
+      pageType: String
+    
+    });
     const { notification } = useMessage();
     const isUpdate = ref(true);
     const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
@@ -58,10 +62,14 @@
         curRecord.value = data.record || {}
         isUpdate.value = !!data?.isUpdate;
         isDisable.value = data.isDisable
-        if (!(curRecord.value.lngPngSettleSalesDtlList || []).length) {
+        if (!(curRecord.value.lngPngSettleSalesDtlList || []).length || !(curRecord.value.lngPngSettlePurDtlList || []).length) {
           getList()
-        } else {
-          tableData.value = curRecord.value.lngPngSettleSalesDtlList || []
+        } else {  
+          if (props.pageType == 'supplier') {
+            tableData.value = curRecord.value.lngPngSettlePurDtlList || []
+          } else {
+            tableData.value = curRecord.value.lngPngSettleSalesDtlList || []
+          }
           tableData.value = DataFormat.format(tableData.value, [
             FormatOption.createQty('qtySettleGj'),
             FormatOption.createQty('qtySettleM3'),
@@ -88,12 +96,15 @@
       }
     }
     const getList = async () => {
-      let res = await getLngPngSettleHdrDtlList({})
+      let request = props.pageType=='supplier'?getLngPngSettleHdrDtlListPur: getLngPngSettleHdrDtlList
+      let obj = {}
+      if (props.pageType=='supplier') {
+        obj.salesPurId = curRecord.value.salesPurId
+      } else {
+        obj.salesId = curRecord.value.salesId
+      }
+      let res = await request(obj)
       tableData.value = res || []
-      // tableData.value.forEach(v => {
-      //   v.priceDesc = v.uomName + (v.uomCode == 'M3' ? v.rateQtyM3 : v.rateQtyGj) + v.priceName 
-      // })
-      
     }
     async function handleSubmit() {
       closeModal();
diff --git a/src/components/common/settleSalesPurList.vue b/src/components/common/settleSalesPurList.vue
new file mode 100644
index 0000000..570f6bf
--- /dev/null
+++ b/src/components/common/settleSalesPurList.vue
@@ -0,0 +1,269 @@
+<template>
+  <div style="width: 100%">
+    <div class="btnBox">
+      <a-button v-if="!disabled" type="primary" style="margin-bottom: 10px;margin-right: 10px;" @click="handleBtn('add')">新增</a-button>
+      <a-button v-if="!disabled" @click="handleBtn('del')">删除</a-button>
+      <span>一次结算量(吉焦)：{{ numObj.qtySettleGjOne }}</span>
+      <span>多次结算量(吉焦)：{{ numObj.qtySettleGjNum }}</span>
+      <span>结算总量(吉焦)：{{ numObj.qtySettleGjAll }}</span>
+      <span>结算总金额(元)：{{ numObj.amount }}</span>
+    </div>
+    <a-table :columns="columns" :data-source="dataList" :scroll="{x: 1800}" :rowKey="rowKey" :pagination="false" :row-selection="{ selectedRowKeys: selectedKeys, onChange: onSelectChange }">
+      <template #bodyCell="{ column, record, index }">
+        <template v-if="column.dataIndex === 'operation'">
+          <a v-if="!disabled" @click="btnCheck(record, index, 'delete')">删除</a>
+        </template>
+        <template v-if="column.dataIndex === 'priceDesc'">
+          <a @click="btnCheck(record, index, 'price')">{{record.priceDesc}}</a>
+        </template>
+        <template v-if="column.dataIndex === 'ksName'">
+          <a @click="btnCheck(record, index, 'ksName')">{{pageType=='supplier'?record.kpName :record.ksName}}</a>
+        </template>
+      </template>
+    </a-table>
+     <measureListModal @register="registerMeasure" @success="handleSuccessMeasure" :pageType="pageType"></measureListModal>
+    <priceComposeListModal @register="registerPrice" @success="handleSuccessPrice" :pageType="pageType"></priceComposeListModal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { Card } from 'ant-design-vue';
+  import { reactive, ref, watch} from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { Modal } from 'ant-design-vue';
+  import { useModal } from '/@/components/Modal';
+  import { message } from 'ant-design-vue';
+  import measureListModal from '/@/components/common/measureListModal.vue';
+  import priceComposeListModal from '/@/components/common/priceComposeListModal.vue';
+  import { DataFormat, FormatOption, DATE_FORMAT, FormatType } from '/@/utils/dataFormat';
+
+  const router = useRouter();
+  const { t } = useI18n();
+  const dataList = ref([])
+  const selectedKeys = ref([])
+  const numObj = ref({})
+  const columns = ref([
+    { title: t('序号'), dataIndex: 'index', key: 'index',  customRender: (column) => `${column.index + 1}` ,width: 80},
+    { title: t('计划日期'), dataIndex: 'datePlan',  width:120},
+    { title: t('提气日期'), dataIndex: 'dateMea',  width: 120},
+    { title: t('合同名称'), dataIndex: 'ksName', width: 200},
+    { title: t('下载点'), dataIndex: 'pointDelyName',width: 150 },
+    { title: t('完成量(吉焦)'), dataIndex: 'qtyMeaGj', width: 150},
+    { title: t('完成量(方)'), dataIndex: 'qtyMeaM3', width: 120},
+    { title: t('结算量(吉焦)'), dataIndex: 'qtySettleGj', width: 140},
+    { title: t('结算量(方)'), dataIndex: 'qtySettleM3', width: 130},
+    { title: t('结算价格(元/吉焦)'), dataIndex: 'priceGj', width: 180},
+    { title: t('结算价格(元/方)'), dataIndex: 'priceM3', width: 170},
+    { title: t('结算金额(元)'), dataIndex: 'amount', width: 140},
+    { title: t('价格组成'), dataIndex: 'priceDesc', width: 180},
+    { title: t('结算次数'), dataIndex: 'settleTimes', width: 100},
+    { title: t('操作'), dataIndex: 'operation', width: 80},
+  ]);
+  const [register, { openModal:openModal}] = useModal();
+  const [registerPrice, { openModal:openModalPrice}] = useModal();
+  const [registerMeasure, { openModal:openModalMeasure}] = useModal();
+  const props = defineProps({
+    disabled: Boolean,
+    list: Array,
+    formState: Object,
+    pageType: String
+  });
+  const rowKey = props.pageType=='supplier' ? 'salesPurId': 'salesId'
+  const emit = defineEmits(['change']);
+    const onSelectChange = (rowKeys) => {
+      selectedKeys.value = rowKeys;
+    }
+    const handleBtn = (type) => {
+      if (type === 'add') {
+        if (!props.formState.cpCode || !props.formState.comId) {
+          message.warn(props.pageType == 'customer' ? '请选择客户和交易主体' : '请选择供应商和交易主体')
+          return
+        }
+        let obj = {
+          cpCode: props.formState.cpCode,
+          comId: props.formState.comId
+        }
+        openModalMeasure(true,{isUpdate: false, searchParams: obj})
+      } else {
+        if (!selectedKeys.value.length) {
+          message.warn('请选择删除数据')
+          return
+        }
+        selectedKeys.value.forEach(i => {
+          let idx = dataList.value.findIndex(v=>v[rowKey] == i)
+          idx>-1&&dataList.value.splice(idx, 1)
+          emit('change', dataList.value)
+        });
+        setTimeout(() => {
+          selectedKeys.value = []
+        }, 1000);
+      }
+    }
+    const handleSuccessMeasure = (val) => {
+      val.forEach(i =>{
+        delete i.lngFileUploadList
+      })
+      if (!dataList.value.length) {
+        dataList.value = val
+        emit('change', dataList.value)
+        return
+      }
+      val.forEach(v=> {
+        let idx = dataList.value.findIndex(k=>k[rowKey]==v[rowKey])
+        idx<0&&dataList.value.push(v)
+        emit('change', dataList.value)
+      })
+    }
+    const handleSuccessPrice = (arr, curRecord) => {
+      let qtySettleGj = 0
+      let qtySettleM3 = 0
+      let amount = 0
+      let idx = dataList.value.findIndex(v =>v[rowKey] == curRecord[rowKey])
+      arr.forEach(v=> {
+        qtySettleGj+=Number(v.qtySettleGj) || 0
+        qtySettleM3+=Number(v.qtySettleM3) || 0
+        amount+=Number(v.amount) || 0
+        if (idx>-1&&!dataList.value[idx].id) {
+          v.id = ''
+        }
+      })
+      // price_gj=amount/qty_settle_gj，保留4位小数
+      // price_m3=amount/qty_settle_m3，保留4位小数
+      let priceGj = qtySettleGj ? Number(amount) / Number(qtySettleGj) : '0'
+      let priceM3 = qtySettleM3 ? Number(amount) / Number(qtySettleM3) : '0'
+      
+      if (idx > -1) {
+        dataList.value[idx].qtySettleGj = qtySettleGj.toFixed(3)
+        dataList.value[idx].qtySettleM3 = qtySettleM3.toFixed(3)
+        dataList.value[idx].amount = amount.toFixed(2)
+        dataList.value[idx].priceGj = priceGj.toFixed(4)
+        dataList.value[idx].priceM3 = priceM3.toFixed(4)
+        if (props.pageType == 'supplier') {
+          dataList.value[idx].lngPngSettlePurDtlList = arr
+        } else {
+          dataList.value[idx].lngPngSettleSalesDtlList = arr
+        }
+        emit('change', dataList.value)
+      }
+    }
+     
+    const btnCheck = (record, index, type) => {
+      if (type == 'delete') {
+        dataList.value.splice(index, 1)
+        emit('change', dataList.value)
+      } 
+      if (type == 'price'){
+        openModalPrice(true,{isUpdate: false, record,isDisable: props.disabled})
+      }
+      if (type == 'ksName'){
+        if (props.pageType == 'supplier') {
+          router.push({
+            path: '/contract/ContractPurPng/viewForm',
+            query: {
+              formPath: 'dayPlan/PngSettleHdrPur',
+              id: record.kpId,
+              disabled: true
+            }
+          });
+          return
+        }
+        router.push({
+          path: '/contract/ContractSales/viewForm',
+          query: {
+            formPath: 'dayPlan/PngSettleHdr',
+            id: record.ksId,
+            disabled: true
+          }
+        });
+      }
+    }
+  const getList = () => {
+    return dataList.value
+  }
+  watch(
+      () => dataList.value,
+      (val) => {
+        if (val) {
+          let qtySettleGjOne = 0
+          let qtySettleGjNum = 0
+          let amount = 0
+          val.forEach(v => {
+            if (Number(v.settleTimes) == 1){
+              qtySettleGjOne+=Number((v.qtySettleGj || '').replace(/,/g, '')) || 0
+            } else {
+              qtySettleGjNum+=Number((v.qtySettleGj || '').replace(/,/g, '')) || 0
+            }
+            amount+=Number((v.amount || '').replace(/,/g, '')) || 0
+          })
+          numObj.value.qtySettleGjOne = qtySettleGjOne.toFixed(3)
+          numObj.value.qtySettleGjNum = qtySettleGjNum.toFixed(3)
+          numObj.value.qtySettleGjAll = (qtySettleGjOne + qtySettleGjNum).toFixed(3)
+          numObj.value.amount = amount.toFixed(2)
+
+          numObj.value =  DataFormat.format({...numObj.value}, [
+            FormatOption.createQty('qtySettleGjOne'),
+            FormatOption.createQty('qtySettleGjNum'),
+            FormatOption.createQty('qtySettleGjAll'),
+            FormatOption.createAmt('amount'),
+          ]);
+        }
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
+  watch(
+    () => props.pageType,
+    (val) => {
+      if (val) {
+        let idx1 = columns.value.findIndex(v=>v.dataIndex == 'pointUpName')
+        let idx2 = columns.value.findIndex(v=>v.dataIndex == 'cuSname')
+        if (val == 'supplier') {
+          idx1 < 0 && columns.value.splice(4, 0, { title: t('上载点'), dataIndex: 'pointUpName', width: 200})
+          idx2 < 0 && columns.value.splice(5, 0, { title: t('客户'), dataIndex: 'cuSname', width: 200})
+        } else {
+          idx1>-1 && columns.value.splice(idx1, 1)
+          idx2>-1 && columns.value.splice(idx2, 1)
+        }
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  );
+  watch(
+      () => props.disabled,
+      (val) => {
+        if (val) {
+          let idx2 = columns.value.findIndex(v =>v.dataIndex == 'operation')
+          idx2>-1 && columns.value.splice(idx2, 1)
+        }
+      },
+      {
+        immediate: true,
+        deep: true,
+      }
+    );
+  watch(
+    () => props.list,
+    async (val) => {
+      dataList.value = val || []
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  );
+  defineExpose({
+    getList,
+  });
+</script>
+<style lang="less" scoped>
+  .btnBox {
+      span {
+        margin: 0 30px;
+      }
+    }
+</style>
diff --git a/src/router/routes/basic.ts b/src/router/routes/basic.ts
index eed9f3f..49510fd 100644
--- a/src/router/routes/basic.ts
+++ b/src/router/routes/basic.ts
@@ -302,6 +302,14 @@ export const PAGE_CUSTOM_ROUTE: AppRouteRecordRaw[] = [{
                 title: (route) => ('管道气销售合同详情')
             }
         },
+        {
+            path: '/contract/ContractPurPng/viewForm',
+            name: 'ContractPurPngviewForm',
+            component: () => import('/@/views/contract/ContractPurPng/components/createForm.vue'),
+            meta: {
+                title: (route) => ('管道气采购合同详情')
+            }
+        }
     ]
     
 
diff --git a/src/views/contract/ContractPurPng/components/createForm.vue b/src/views/contract/ContractPurPng/components/createForm.vue
index 6fcf2c8..c17fdc2 100644
--- a/src/views/contract/ContractPurPng/components/createForm.vue
+++ b/src/views/contract/ContractPurPng/components/createForm.vue
@@ -1,6 +1,6 @@
 <template>
   <a-spin :spinning="spinning" tip="加载中...">
-    <div class="page-bg-wrap formViewStyle">
+    <div class="page-bg-wrap formViewStyle" :class="isViewForm ? 'viewPage':''">
       <a-form ref="formRef" :model="formState" :rules="rules" v-bind="layout">
         <Card title="合同档案" :bordered="false" >
           <a-row>
@@ -231,7 +231,7 @@
     const formId = ref(currentRoute.value?.params?.id);
     const pageType = ref(currentRoute.value.query?.type);
     const pageId = ref(currentRoute.value.query?.id)
-    
+    const isViewForm = currentRoute.value.path.includes('viewForm')
     const contractQty=ref()
     const spinning = ref(false);
     const curIdx = ref(null)
@@ -312,6 +312,9 @@
       getOption()
       if (pageId.value) {
         getInfo(pageId.value)
+        if (currentRoute.value.query?.disabled) {
+          isDisable.value = true 
+        }
       } else {
         formState.empName = userInfo.name
         formState.empId = userInfo.id
@@ -662,5 +665,8 @@
       padding: 10px;
       margin-bottom: 10px;
     }
+    .viewPage {
+      padding: 6px 12px !important;
+    }
     
 </style>
diff --git a/src/views/dayPlan/PngSettleHdr/components/createForm.vue b/src/views/dayPlan/PngSettleHdr/components/createForm.vue
index eaeb652..09f8cfe 100644
--- a/src/views/dayPlan/PngSettleHdr/components/createForm.vue
+++ b/src/views/dayPlan/PngSettleHdr/components/createForm.vue
@@ -79,27 +79,7 @@
           </a-row>
         </Card>
         <Card>
-          <div class="btnBox">
-            <a-button v-if="!isDisable" type="primary" style="margin-bottom: 10px;margin-right: 10px;" @click="handleBtn('add')">新增</a-button>
-            <a-button v-if="!isDisable" @click="handleBtn('del')">删除</a-button>
-            <span>一次结算量吉焦：</span>
-            <span>二次结算量吉焦：</span>
-            <span>结算总量(吉焦)：</span>
-            <span>结算总金额：</span>
-          </div>
-          <a-table :columns="columns" :data-source="dataList" :scroll="{x: 1800}" rowKey="salesId" :pagination="false" :row-selection="{ selectedRowKeys: selectedKeys, onChange: onSelectChange }">
-            <template #bodyCell="{ column, record, index }">
-              <template v-if="column.dataIndex === 'operation'">
-                <a v-if="!isDisable" @click="btnCheck(record, index, 'delete')">删除</a>
-              </template>
-              <template v-if="column.dataIndex === 'priceDesc'">
-                <a @click="btnCheck(record, index, 'price')">{{record.priceDesc}}</a>
-              </template>
-              <template v-if="column.dataIndex === 'ksName'">
-                <a @click="btnCheck(record, index, 'ksName')">{{record.ksName}}</a>
-              </template>
-            </template>
-          </a-table>
+          <settleSalesPurList :list="dataList" :disabled="isDisable" pageType="customer" :formState="formState" @change="settleChange"></settleSalesPurList>
         </Card>
         <Card title="对账单" :bordered="false" >
           <UploadList :disabled="isDisable" btnTip="上传对账单" :list="dataFileAccount" :value="formState.filePath" :tableName="tableName" :columnName="columnName" @change="uploadChange"/>
@@ -110,8 +90,7 @@
       </a-form>
     </div>
     <customerListModal @register="registerCustomer" @success="handleSuccessCustomer" selectType="radio" />
-    <measureListModal @register="registerMeasure" @success="handleSuccessMeasure"></measureListModal>
-    <priceComposeListModal @register="registerPrice" @success="handleSuccessPrice"></priceComposeListModal>
+   
   </a-spin>
 </template>
 
@@ -133,8 +112,8 @@
     import { message } from 'ant-design-vue';
     import UploadList from '/@/components/Form/src/components/UploadList.vue';
     import customerListModal from '/@/components/common/customerListModal.vue';
-    import measureListModal from '/@/components/common/measureListModal.vue';
-    import priceComposeListModal from '/@/components/common/priceComposeListModal.vue';
+    import settleSalesPurList from '/@/components/common/settleSalesPurList.vue';
+   
     import { getAllCom} from '/@/api/contract/ContractPurInt';
     import { DataFormat, FormatOption, DATE_FORMAT, FormatType } from '/@/utils/dataFormat';
 
@@ -172,9 +151,9 @@
       settleTypeCode: 'I',
       rpSign: 'Y'
     });
-    const [registerMeasure, { openModal:openModalMeasure}] = useModal();
+   
     const [registerCustomer, { openModal:openModalCustomer}] = useModal();
-    const [registerPrice, { openModal:openModalPrice}] = useModal();
+    
     const rules= reactive({
       settleMonth: [{ required: true, message: "该项为必填项", trigger: 'change' }],
       dateFrom: [{ required: true, message: "该项为必填项", trigger: 'change' }],
@@ -195,24 +174,7 @@
       comIdList: [],
       signList: []
     });
-    const selectedKeys = ref([])
-    const columns = ref([
-      { title: t('序号'), dataIndex: 'index', key: 'index',  customRender: (column) => `${column.index + 1}` ,width: 80},
-      { title: t('计划日期'), dataIndex: 'datePlan',  width:120},
-      { title: t('提气日期'), dataIndex: 'dateMea',  width: 120},
-      { title: t('合同名称'), dataIndex: 'ksName', width: 200},
-      { title: t('下载点'), dataIndex: 'pointDelyName',width: 150 },
-      { title: t('完成量(吉焦)'), dataIndex: 'qtyMeaGj', width: 150},
-      { title: t('完成量(方)'), dataIndex: 'qtyMeaM3', width: 120},
-      { title: t('结算量(吉焦)'), dataIndex: 'qtySettleGj', width: 140},
-      { title: t('结算量(方)'), dataIndex: 'qtySettleM3', width: 130},
-      { title: t('结算价格(元/吉焦)'), dataIndex: 'priceGj', width: 180},
-      { title: t('结算价格(元/方)'), dataIndex: 'priceM3', width: 170},
-      { title: t('结算金额(元)'), dataIndex: 'amount', width: 140},
-      { title: t('价格组成'), dataIndex: 'priceDesc', width: 180},
-      { title: t('结算次数'), dataIndex: 'settleTimes', width: 100},
-      { title: t('操作'), dataIndex: 'operation', width: 80},
-    ]);
+  
     watch(
       () => props.id,
       (val) => {
@@ -240,9 +202,7 @@
       }
    
     });
-    const onSelectChange = (rowKeys) => {
-      selectedKeys.value = rowKeys;
-    }
+    
     const uploadChange = (val) => {
       dataFileAccount.value = val
     }
@@ -291,6 +251,34 @@
       formState.qtySettleM3 = a.qtySettleM3
       formState.amount = a.amount
     }
+    const settleChange = (val) => {
+      dataList.value = val 
+      numClear()
+      tableCount()
+    }
+    const numClear = () => {
+      if (!dataList.value.length) {
+        formState.qtySettleGj = ''
+        formState.qtySettleM3 = ''
+        formState.amount = ''
+      }
+    }
+    const tableCount = () => {
+      let qtySettleGj = 0
+      let qtySettleM3 = 0
+      let amount = 0
+      dataList.value.forEach(v => {
+        if (Number(v.settleTimes) == 1){
+          qtySettleGj+=Number(v.qtySettleGj) || 0
+          qtySettleM3+=Number(v.qtySettleM3) || 0
+        }
+        amount+=Number(v.amount) || 0
+      })
+      formState.qtySettleGj = qtySettleGj.toFixed(3)
+      formState.qtySettleM3 = qtySettleM3.toFixed(3)
+      formState.amount = amount.toFixed(2)
+      numFormat()
+    }
     const comIdChange = (val) => {
       if (!val)return
       getDate()
@@ -328,115 +316,6 @@
       }
       return endValue.valueOf() <= startValue.valueOf();
     }
-    const handleBtn = (type) => {
-      if (type === 'add') {
-        if (!formState.cpCode || !formState.comId) {
-          message.warn('请选择客户和交易主体')
-          return
-        }
-        let obj = {
-          cpCode: formState.cpCode,
-          comId: formState.comId
-        }
-        openModalMeasure(true,{isUpdate: false, searchParams: obj})
-      } else {
-        if (!selectedKeys.value.length) {
-          message.warn('请选择删除数据')
-          return
-        }
-        selectedKeys.value.forEach(i => {
-          let idx = dataList.value.findIndex(v=>v.salesId == i)
-          idx>-1&&dataList.value.splice(idx, 1)
-        });
-        setTimeout(() => {
-          selectedKeys.value = []
-          numClear()
-        }, 1000);
-      }
-    }
-    const numClear = () => {
-      if (!dataList.value.length) {
-        formState.qtySettleGj = ''
-        formState.qtySettleM3 = ''
-        formState.amount = ''
-      }
-    }
-    const handleSuccessMeasure = (val) => {
-      val.forEach(i =>{
-        delete i.lngFileUploadList
-      })
-      if (!dataList.value.length) {
-        dataList.value = val
-        return
-      }
-      val.forEach(v=> {
-        let idx = dataList.value.findIndex(k=>k.salesId==v.salesId)
-        idx<0&&dataList.value.push(v)
-      })
-    }
-    const btnCheck = (record, index, type) => {
-      if (type == 'delete') {
-        dataList.value.splice(index, 1)
-        numClear()
-      } 
-      if (type == 'price'){
-        openModalPrice(true,{isUpdate: false, record,isDisable: isDisable.value})
-      }
-      if (type == 'ksName'){
-        router.push({
-        path: '/contract/ContractSales/viewForm',
-         query: {
-          formPath: 'dayPlan/PngSettleHdr',
-          id: record.ksId,
-          disabled: true
-        }
-      });
-      }
-    }
-    const handleSuccessPrice = (arr, curRecord) => {
-      let qtySettleGj = 0
-      let qtySettleM3 = 0
-      let amount = 0
-      let idx = dataList.value.findIndex(v =>v.salesId == curRecord.salesId)
-      arr.forEach(v=> {
-        qtySettleGj+=Number(v.qtySettleGj) || 0
-        qtySettleM3+=Number(v.qtySettleM3) || 0
-        amount+=Number(v.amount) || 0
-        if (idx>-1&&!dataList.value[idx].id) {
-          v.id = ''
-        }
-      })
-      // price_gj=amount/qty_settle_gj，保留4位小数
-      // price_m3=amount/qty_settle_m3，保留4位小数
-      let priceGj = qtySettleGj ? Number(amount) / Number(qtySettleGj) : '0'
-      let priceM3 = qtySettleM3 ? Number(amount) / Number(qtySettleM3) : '0'
-      
-      if (idx > -1) {
-        dataList.value[idx].qtySettleGj = qtySettleGj.toFixed(3)
-        dataList.value[idx].qtySettleM3 = qtySettleM3.toFixed(3)
-        dataList.value[idx].amount = amount.toFixed(2)
-        dataList.value[idx].priceGj = priceGj.toFixed(4)
-        dataList.value[idx].priceM3 = priceM3.toFixed(4)
-        dataList.value[idx].lngPngSettleSalesDtlList = arr
-        tableCount()
-      }
-    }
-    const tableCount = () => {
-      let qtySettleGj = 0
-      let qtySettleM3 = 0
-      let amount = 0
-      dataList.value.forEach(v => {
-        if (Number(v.settleTimes) == 1){
-          qtySettleGj+=Number(v.qtySettleGj) || 0
-          qtySettleM3+=Number(v.qtySettleM3) || 0
-        }
-        amount+=Number(v.amount) || 0
-      })
-      formState.qtySettleGj = qtySettleGj.toFixed(3)
-      formState.qtySettleM3 = qtySettleM3.toFixed(3)
-      formState.amount = amount.toFixed(2)
-      numFormat()
-    }
     const onSearchCustomer = () => {
       openModalCustomer(true,{isUpdate: false})
     }
@@ -517,9 +396,4 @@
         margin-bottom: 12px;
         border-bottom: 1px solid #eee;
     }
-    .btnBox {
-      span {
-        margin: 0 30px;
-      }
-    }
 </style>
diff --git a/src/views/dayPlan/PngSettleHdrPur/components/config.ts b/src/views/dayPlan/PngSettleHdrPur/components/config.ts
index 24dbec8..362971e 100644
--- a/src/views/dayPlan/PngSettleHdrPur/components/config.ts
+++ b/src/views/dayPlan/PngSettleHdrPur/components/config.ts
@@ -53,7 +53,7 @@ export const columns: BasicColumn[] = [
   },
 
   {
-    dataIndex: 'cpName',
+    dataIndex: 'suSname',
     title: '供应商简称',
     componentType: 'input',
     align: 'left',
diff --git a/src/views/dayPlan/PngSettleHdrPur/components/createForm.vue b/src/views/dayPlan/PngSettleHdrPur/components/createForm.vue
new file mode 100644
index 0000000..2c6f991
--- /dev/null
+++ b/src/views/dayPlan/PngSettleHdrPur/components/createForm.vue
@@ -0,0 +1,399 @@
+<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 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 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 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.name }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="账期内含预收付款" name="rpSign">
+                <a-select v-model:value="formState.rpSign" style="width: 100%" allow-clear :disabled="isDisable">
+                  <a-select-option v-for="item in optionSelect.signList" :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="qtySettleM3">
+                <a-input v-model:value="formState.qtySettleM3" 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="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="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>
+          <settleSalesPurList :list="dataList" :disabled="isDisable" pageType="supplier" :formState="formState" @change="settleChange"></settleSalesPurList>
+        </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>
+      </a-form>
+    </div>
+    <supplierListModal @register="registerSupplier" @success="handleSuccessSupplier" 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 { addLngPngSettleHdr,updateLngPngSettleHdr, getLngPngSettleHdr, getLngPngSettleHdrDate} from '/@/api/dayPlan/PngSettleHdrPur';
+    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 supplierListModal from '/@/components/common/supplierListModal.vue';
+    import settleSalesPurList from '/@/components/common/settleSalesPurList.vue';
+   
+    import { getAllCom} from '/@/api/contract/ContractPurInt';
+    import { DataFormat, FormatOption, DATE_FORMAT, FormatType } from '/@/utils/dataFormat';
+
+    const tableName = 'PngSettleHdr';
+    const columnName = 'PngSettleHdr'
+
+    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: 'C',
+      rpSign: 'Y'
+    });
+   
+    const [registerSupplier, { 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) => {
+      dataFileAccount.value = val
+    }
+    const uploadListChange = (val) => {
+      dataFile.value = val
+    }
+    async function getInfo(id)  {
+      spinning.value = true
+      try {
+      let data = await getLngPngSettleHdr(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.lngPngSettlePurList || [])
+      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('qtySettleM3'),
+        FormatOption.createQty('qtyMeaGj'),
+        FormatOption.createQty('qtyMeaM3'),
+        FormatOption.createAmt('amount'),
+        FormatOption.createQty('priceGj',4),
+        FormatOption.createQty('priceM3',4),
+      ]);
+      let obj = {
+        qtySettleGj: formState.qtySettleGj,
+        qtySettleM3: formState.qtySettleM3,
+        amount: formState.amount
+      }
+      let a =  DataFormat.format({...obj}, [
+        FormatOption.createQty('qtySettleGj'),
+        FormatOption.createQty('qtySettleM3'),
+        FormatOption.createAmt('amount'),
+      ]);
+      formState.qtySettleGj = a.qtySettleGj
+      formState.qtySettleM3 = a.qtySettleM3
+      formState.amount = a.amount
+    }
+    const settleChange = (val) => {
+      dataList.value = val 
+      numClear()
+      tableCount()
+    }
+    const numClear = () => {
+      if (!dataList.value.length) {
+        formState.qtySettleGj = ''
+        formState.qtySettleM3 = ''
+        formState.amount = ''
+      }
+    }
+    const tableCount = () => {
+      let qtySettleGj = 0
+      let qtySettleM3 = 0
+      let amount = 0
+      dataList.value.forEach(v => {
+        if (Number(v.settleTimes) == 1){
+          qtySettleGj+=Number((v.qtySettleGj || '').replace(/,/g, '')) || 0
+          qtySettleM3+=Number((v.qtySettleM3 || '').replace(/,/g, '')) || 0
+        }
+        amount+=Number((v.amount || '').replace(/,/g, '')) || 0
+      })
+      formState.qtySettleGj = qtySettleGj.toFixed(3)
+      formState.qtySettleM3 = qtySettleM3.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 (!pageId.value && formState.cpCode && formState.comId && !formState.dateFrom) {
+        let data = await getLngPngSettleHdrDate(obj) || []
+        if (data.length) {
+          formState.dateFrom = data[0]?.dateTo ? dayjs(data[0]?.dateTo) : 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 handleSuccessSupplier = (val) => {
+      formState.cpCode = val[0].suCode
+      formState.cpName = val[0].suSname
+      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 = 'C'
+        })
+        
+        let obj = {
+          ...formState,
+          lngFileUploadList: dataFile.value, 
+          billList: dataFileAccount.value,
+          lngPngSettlePurList: dataList.value,
+        }
+        spinning.value = true;
+        let request = !formState.id ? addLngPngSettleHdr :updateLngPngSettleHdr
+
+        try {
+          const data = await request(obj);
+          // 新增保存
+          if (data?.id) {
+            getInfo(data?.id)
+          }
+          // 同意保存不提示
+          if (!type) {
+            notification.success({
+                message: 'Tip',
+                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>
diff --git a/src/views/dayPlan/PngSettleHdrPur/index.vue b/src/views/dayPlan/PngSettleHdrPur/index.vue
index 0f42c89..cb0f4bf 100644
--- a/src/views/dayPlan/PngSettleHdrPur/index.vue
+++ b/src/views/dayPlan/PngSettleHdrPur/index.vue
@@ -34,7 +34,7 @@
   import { Modal } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
-  import { getLngPngSettleHdrPage, deleteLngPngSettleHdr} from '/@/api/dayPlan/PngSettleHdrPur';
+  import { getLngPngSettleHdrPage, deleteLngPngSettleHdr,cancelLngPngSettleHdr} from '/@/api/dayPlan/PngSettleHdrPur';
   import { PageWrapper } from '/@/components/Page';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useI18n } from '/@/hooks/web/useI18n';
@@ -299,7 +299,21 @@
     }
   }
   function handleCancel() {
-
+    if (!selectedKeys.value.length) {
+      notification.warning({
+        message: '提示',
+        description: t('请选择需要取消结算的数据'),
+      });
+      return
+    }
+    cancelLngPngSettleHdr(selectedKeys.value).then((_) => {
+      handleSuccess();
+      notification.success({
+        message: 'Tip',
+        description: t('取消成功！'),
+      });
+      clearSelectedRowKeys()
+    });
   }
   function handleDelete(record: Recordable) {
     deleteList([record.id]);
diff --git a/src/views/secondDev/customFormConfig.ts b/src/views/secondDev/customFormConfig.ts
index 354d8ad..3fe5ad0 100644
--- a/src/views/secondDev/customFormConfig.ts
+++ b/src/views/secondDev/customFormConfig.ts
@@ -11,6 +11,7 @@ export const customFormConfig = {
     'addContractSalesLng',
     'ContractPurInt',
     'ContractSalesInt',
-    'addDayPlanPngSettleSales'
+    'addDayPlanPngSettleSales',
+    'addDayPlanPngSettlePur'
   ],
 };
\ No newline at end of file