采运销弹框优化

2026-04-07 09:46:09 +08:00
parent 79f13dfddb
commit f475a86bc6
2 changed files with 181 additions and 133 deletions
--- a/src/components/common/contractSalesPngPurPointModal.vue
+++ b/src/components/common/contractSalesPngPurPointModal.vue
@ -2,28 +2,58 @@
  <div>
    <BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" @ok="handleSubmit"
      @visible-change="handleVisibleChange" >
-        <BasicTable @register="registerTable" class="contractSalesPngPurPointModal" v-if="showTable"></BasicTable>
+        <a-form ref="formRef" v-bind="layout">
+          <a-row>
+            <a-col :span="10">
+              <a-form-item label="有效期" name="dateArr" >
+                <a-range-picker :inputReadOnly="true"  v-model:value="dateArr" :format="dateFormat"  />
+              </a-form-item>
+            </a-col>
+            <a-col :span="4">
+              <div class="btnFoot">
+                <a-button style="margin: 0 10px" type="primary" @click="onSearch">搜索</a-button>
+                <a-button @click="onReset">重置</a-button>
+              </div>
+            </a-col>
+          </a-row>
+
+        </a-form>
+        <a-table :loading="loading" rowKey="kpId" :scroll="{x: 200}"
+         :columns="columns" bordered :data-source="tableData" 
+         :row-selection="{ type: props.selectType, selectedRowKeys: selectedKeys, onChange: onSelectChange }" 
+         :pagination="pagination"></a-table>
    </BasicModal>
  </div>
 </template>
 <script lang="ts" setup>
-    import { ref, computed, unref, nextTick  } from 'vue';
+    import { ref, computed, unref, nextTick, reactive  } from 'vue';
    import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
    import { BasicForm, useForm } from '/@/components/Form/index';
    import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
    import { useMessage } from '/@/hooks/web/useMessage';
    import { useI18n } from '/@/hooks/web/useI18n';
    import { getContractSalesPngPoint } from '/@/api/contract/contractSalesPngPur';
-    import { getContractSalesPngPointTc } from '/@/api/contract/contractSalesPngPur';
+    import dayjs from 'dayjs';
    const { t } = useI18n();
    const comId = ref('')
-    const dateArr = ref([])
-    const codeFormSchema: FormSchema[] = [  
+    const dateFormat = ['YYYY-MM-DD', 'YYYY-MM-DD'];
+    const dateArr = ref<any[]>([])
+    const loading = ref(false)
+    const tableData = ref([])
+    const layout = {
+      labelCol: { span: 9 },
+      wrapperCol: { span: 15 },
+    }
+    let columns: BasicColumn[] = [
+      { title: t('合同号'), dataIndex: 'kpNo', width: 120},
+      { title: t('合同名称'), dataIndex: 'kpName', width: 180},
+      { title: '供应商', dataIndex: 'suName',width: 150},
+      { title: '有效期开始',dataIndex: 'dateFrom', width: 120,},
+      { title: '有效期结束',dataIndex: 'dateTo', width: 120},
+      { title: t('合同主体'), dataIndex: 'comName', width: 130},
+      { title: t('上载点'), dataIndex: 'pointUpName',width: 180},
      
    ];
-
-    
-
    const emit = defineEmits(['success', 'register']);

    const { notification } = useMessage();
@ -37,77 +67,71 @@
      pageType: String,
      defaultDate: { type: Array, default: [] },
    });
-    dateArr.value = props.defaultDate || []
-    let columns: BasicColumn[] = [
-      { title: t('合同号'), dataIndex: 'kpNo', },
-      { title: t('合同名称'), dataIndex: 'kpName', },
-      { title: '供应商', dataIndex: 'suName',},
-      { title: '有效期开始',dataIndex: 'dateFrom', width: 120,},
-      { title: '有效期结束',dataIndex: 'dateTo', width: 120},
-      { title: t('合同主体'), dataIndex: 'comName', },
-      { title: t('上载点'), dataIndex: 'pointUpName'},
-      
-    ];
-    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-      dateArr.value = props.defaultDate || []
-      showTable.value = true
-      comId.value = data.comId
-        setModalProps({ confirmLoading: false });
-        setPagination({'limit': 1,'size': 10,'page': 1});
-        isUpdate.value = !!data?.isUpdate;
+    const pagination = reactive({
+      total: 0,
+      current: 1,
+      pageSize: 10,
+      showQuickJumper: true,
+      showSizeChanger: true,
+      showTotal: (total: number) => `共 ${total}条数据`,
+      pageSizeOptions: ["10", "20", "50", "80", "100"],
+      onChange: (current, size) => {
+        pagination.current = current;
+        pagination.pageSize = size;
+        loadData();
+      },
    });
    
-    const [registerTable, { getDataSource, setTableData, updateTableDataRecord, reload,setPagination  }] = useTable({
-        title: t('管道气采购合同列表'),
-        api: getContractSalesPngPoint,
-        columns,
    
-        bordered: true,
-        pagination: true,
-        canResize: false,
-        formConfig: {
-          labelCol:{span: 9},
-          schemas: [
-            {
-              field: 'dateFrom',
-              label: '有效期',
-              component: 'RangePicker',
-              defaultValue: props.defaultDate || [],
-              componentProps: {
-                format: 'YYYY-MM-DD',
-                style: { width: '100%' },
-                getPopupContainer: () => document.body,
-              },
-            }
-          ],
-          fieldMapToTime: [['dateFrom', ['startDate', 'endDate'], 'YYYY-MM-DD']],
-          showResetButton: true,
-        },
-        immediate: false, // 设置为不立即调用
-        beforeFetch: (params) => {
-          return { ...params,page:params.limit, comId: comId.value};
-        },
-        rowSelection: {
-          type: props.selectType,
-          onChange: onSelectChange
-        },
+    const loadData = async (val) => {
+      if (val && props.defaultDate.length) {
+        dateArr.value = [dayjs(props.defaultDate[0]), dayjs(props.defaultDate[1])]
+      }
+      loading.value = true;
+      try {
+        const res = await getContractSalesPngPoint({
+          limit: pagination.current,
+          size: pagination.pageSize,
+          startDate: dateArr.value.length ? dayjs(dateArr.value[0]).format('YYYY-MM-DD') : '',
+          endDate: dateArr.value.length ? dayjs(dateArr.value[1]).format('YYYY-MM-DD') : '',
+        });
+        tableData.value = res.list || [];
+        pagination.total = res.total || 0;
+      } catch (error) {
+          console.error('获取列表失败:', error);
+      } finally {
+          loading.value = false;
+      }
+    };
+    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+      if (props.defaultDate && props.defaultDate.length === 2) {
+        dateArr.value = [dayjs(props.defaultDate[0] as string), dayjs(props.defaultDate[1] as string)]
+      } else {
+        dateArr.value = []
+      }
+      comId.value = data.comId
+        setModalProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
    });
    const handleVisibleChange = async  (visible: boolean) => {
      if (visible) {
-        showTable.value = false
-        await nextTick();
-        await nextTick();
-        await nextTick();
-        nextTick(() => {
-          
-          reload({searchInfo:{'limit':1,'size':10,'page':1, startDate: props.defaultDate[0], endDate: props.defaultDate[1] }});
-        });
+        selectedKeys.value = [];
+        selectedValues.value = []
+        loadData(1)
      }
    };
    function onSelectChange(rowKeys: string[], e) {
      selectedKeys.value = rowKeys;
      selectedValues.value = e
    }
+    const onSearch = () => {
+      loadData()
+    }
+    const onReset = () => {
+      dateArr.value = [dayjs(props.defaultDate[0]), dayjs(props.defaultDate[1])]
+      pagination.current = 1
+      loadData()
+    }
    const getTitle = computed(() => (t('管道气采购合同列表')));

    async function handleSubmit() {
--- a/src/components/common/contractSalesPngPurPointTcModal.vue
+++ b/src/components/common/contractSalesPngPurPointTcModal.vue
@ -2,28 +2,58 @@
  <div>
    <BasicModal v-bind="$attrs" @register="registerModal" width="60%" :title="getTitle" @ok="handleSubmit"
      @visible-change="handleVisibleChange" >
-        <BasicTable @register="registerTable" class="contractSalesPngPurPointModal" v-if="showTable"></BasicTable>
+        <a-form ref="formRef" v-bind="layout">
+          <a-row>
+            <a-col :span="10">
+              <a-form-item label="有效期" name="dateArr" >
+                <a-range-picker :inputReadOnly="true"  v-model:value="dateArr" :format="dateFormat"  />
+              </a-form-item>
+            </a-col>
+            <a-col :span="4">
+              <div class="btnFoot">
+                <a-button style="margin: 0 10px" type="primary" @click="onSearch">搜索</a-button>
+                <a-button @click="onReset">重置</a-button>
+              </div>
+            </a-col>
+          </a-row>
+
+        </a-form>
+        <a-table :loading="loading" rowKey="ktpId" :scroll="{x: 600}"
+         :columns="columns" bordered :data-source="tableData" 
+         :row-selection="{ type: props.selectType, selectedRowKeys: selectedKeys, onChange: onSelectChange }" 
+         :pagination="pagination"></a-table>
    </BasicModal>
  </div>
 </template>
 <script lang="ts" setup>
-    import { ref, computed, unref, nextTick  } from 'vue';
+    import { ref, computed, unref, nextTick, reactive  } from 'vue';
    import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
    import { BasicForm, useForm } from '/@/components/Form/index';
    import { BasicTable, useTable, FormSchema, BasicColumn, TableAction } from '/@/components/Table';
    import { useMessage } from '/@/hooks/web/useMessage';
    import { useI18n } from '/@/hooks/web/useI18n';
-    import { getContractSalesPngPoint } from '/@/api/contract/contractSalesPngPur';
    import { getContractSalesPngPointTc } from '/@/api/contract/contractSalesPngPur';
+    import dayjs from 'dayjs';
    const { t } = useI18n();
    const comId = ref('')
-    const dateArr = ref([])
-    const codeFormSchema: FormSchema[] = [  
-      
+    const dateFormat = ['YYYY-MM-DD', 'YYYY-MM-DD'];
+    const dateArr = ref<any[]>([])
+    const loading = ref(false)
+    const tableData = ref([])
+    const layout = {
+      labelCol: { span: 9 },
+      wrapperCol: { span: 15 },
+    }
+    let columns: BasicColumn[] = [
+      { title: t('合同号'), dataIndex: 'kpNo', width: 120},
+      { title: t('合同名称'), dataIndex: 'kpName', width: 180},
+      { title: '供应商', dataIndex: 'suName',width: 150},
+      { title: '有效期开始',dataIndex: 'dateFrom', width: 120,},
+      { title: '有效期结束',dataIndex: 'dateTo', width: 120},
+      { title: t('合同主体'), dataIndex: 'comName', width: 130},
+      { title: t('上载点'), dataIndex: 'pointUpName',width: 160},
+      { title: t('下载点'), dataIndex: 'pointDelyName',width: 160},
    ];
-
-    
-
    const emit = defineEmits(['success', 'register']);

    const { notification } = useMessage();
@ -37,77 +67,71 @@
      pageType: String,
      defaultDate: { type: Array, default: [] },
    });
-    dateArr.value = props.defaultDate || []
-    let columns: BasicColumn[] = [
-      { title: t('合同号'), dataIndex: 'kpNo', },
-      { title: t('合同名称'), dataIndex: 'kpName', },
-      { title: '供应商', dataIndex: 'suName',},
-      { title: '有效期开始',dataIndex: 'dateFrom', width: 120,},
-      { title: '有效期结束',dataIndex: 'dateTo', width: 120},
-      { title: t('合同主体'), dataIndex: 'comName', },
-      { title: t('上载点'), dataIndex: 'pointUpName'},
-      { title: t('下载点'), dataIndex: 'pointDelyName'},
-    ];
-    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-      dateArr.value = props.defaultDate || []
-      showTable.value = true
-      comId.value = data.comId
-        setModalProps({ confirmLoading: false });
-        setPagination({'limit': 1,'size': 10,'page': 1});
-        isUpdate.value = !!data?.isUpdate;
+    const pagination = reactive({
+      total: 0,
+      current: 1,
+      pageSize: 10,
+      showQuickJumper: true,
+      showSizeChanger: true,
+      showTotal: (total: number) => `共 ${total}条数据`,
+      pageSizeOptions: ["10", "20", "50", "80", "100"],
+      onChange: (current, size) => {
+        pagination.current = current;
+        pagination.pageSize = size;
+        loadData();
+      },
    });
    
-    const [registerTable, { getDataSource, setTableData, updateTableDataRecord, reload,setPagination  }] = useTable({
-        title: t('管道气管输合同列表'),
-        api: getContractSalesPngPointTc,
-        columns,
    
-        bordered: true,
-        pagination: true,
-        canResize: false,
-        formConfig: {
-          labelCol:{span: 9},
-          schemas: [
-            {
-              field: 'dateFrom',
-              label: '有效期',
-              component: 'RangePicker',
-              defaultValue: props.defaultDate,
-              componentProps: {
-                format: 'YYYY-MM-DD',
-                style: { width: '100%' },
-                getPopupContainer: () => document.body,
-              },
-            }
-          ],
-          fieldMapToTime: [['dateFrom', ['startDate', 'endDate'], 'YYYY-MM-DD']],
-          showResetButton: true,
-        },
-        immediate: false, // 设置为不立即调用
-        beforeFetch: (params) => {
-          return { ...params,page:params.limit, comId: comId.value};
-        },
-        rowSelection: {
-          type: props.selectType,
-          onChange: onSelectChange
-        },
+    const loadData = async (val) => {
+      if (val && props.defaultDate.length) {
+        dateArr.value = [dayjs(props.defaultDate[0]), dayjs(props.defaultDate[1])]
+      }
+      loading.value = true;
+      try {
+        const res = await getContractSalesPngPointTc({
+          limit: pagination.current,
+          size: pagination.pageSize,
+          startDate: dateArr.value.length ? dayjs(dateArr.value[0]).format('YYYY-MM-DD') : '',
+          endDate: dateArr.value.length ? dayjs(dateArr.value[1]).format('YYYY-MM-DD') : '',
+        });
+        tableData.value = res.list || [];
+        pagination.total = res.total || 0;
+      } catch (error) {
+          console.error('获取列表失败:', error);
+      } finally {
+          loading.value = false;
+      }
+    };
+    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+      if (props.defaultDate && props.defaultDate.length === 2) {
+        dateArr.value = [dayjs(props.defaultDate[0] as string), dayjs(props.defaultDate[1] as string)]
+      } else {
+        dateArr.value = []
+      }
+      comId.value = data.comId
+        setModalProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
    });
    const handleVisibleChange = async  (visible: boolean) => {
      if (visible) {
-        showTable.value = false
-        await nextTick();
-        await nextTick();
-        await nextTick();
-        nextTick(() => {
-          
-          reload({searchInfo:{'limit':1,'size':10,'page':1, startDate: props.defaultDate[0], endDate: props.defaultDate[1] }});
-        });
+        selectedKeys.value = [];
+        selectedValues.value = []
+        loadData(1)
      }
    };
    function onSelectChange(rowKeys: string[], e) {
      selectedKeys.value = rowKeys;
      selectedValues.value = e
    }
+    const onSearch = () => {
+      loadData()
+    }
+    const onReset = () => {
+      dateArr.value = [dayjs(props.defaultDate[0]), dayjs(props.defaultDate[1])]
+      pagination.current = 1
+      loadData()
+    }
    const getTitle = computed(() => (t('管道气管输合同列表')));

    async function handleSubmit() {