【EQI前端】普通头部查询，及通用导出功能封装开发，已开发页面使用新封装联调开发，表格排序封装开发

Web/src/api/common/index.js

@@ -18,4 +18,13 @@ export function postCommonExport(urlName,params) {
       responseType:'blob',
       params:params
     })
+}
+
+// 获取导入模板
+export function getCommonImportTemplate(urlName) {
+  return request({
+    url: `/api/${urlName}/getimporttemplate`,
+    method: 'get',
+    responseType:'blob',
+  })
 }

Web/src/components/elPager/index.vue

@@ -1,8 +1,8 @@
 <template>
   <el-pagination
     :currentPage="state.currentPage"
-    :page-size="props.pageParams.pageSize"
+    :page-size="props.pager.pageSize"
-    :total="props.pageParams.total"
+    :total="props.pager.total"
     :background="props.pageBackGround"
     :layout="props.pageLayout"
     :hide-on-single-page="props.isHideOnlyOne"
@@ -23,7 +23,7 @@
 
   const props = defineProps({
     // table分页
-    pageParams: {
+    pager: {
       type: Object,
       default: {}
     },
@@ -51,7 +51,7 @@
 
   const emits = defineEmits(['pageSizeChange', 'pageCurrentChange'])
 
-  watch(props.pageParams, (val) => {
+  watch(props.pager, (val) => {
     state.currentPage = val.Page
   })
   

Web/src/components/elTable/index.vue

@@ -1,11 +1,17 @@
 <template>
-  <el-table ref="tableRef" row-key="id" :data="props.tableData" :border="true">
+  <el-table 
+    ref="tableRef" 
+    row-key="id" 
+    :data="props.tableData" 
+    :border="true"
+    @sort-change="sortChange"
+  >
     <el-table-column
       v-for="(item, index) in props.tableColumns" 
       :key="index"
       :label="item.title"
       :prop="item.prop"
-      :sortable="item.sortable"
+      :sortable="item.sortable || 'custom'"
       :fixed="item.fixed"
       :width="item.width || props.columnWidth"
       :align="item.align || props.columnAlign"
@@ -50,7 +56,7 @@
     // 表头宽度
     columnWidth:{
       type: Number,
-      default: 100
+      default: null
     },
     // 表头对齐
     columnHeaderAlign:{
@@ -76,6 +82,12 @@
     let _op = item.options.filter(op=>op.value == row[item.prop])
     if(_op && _op.length > 0){ return _op[0][type] }
   }
+
+  const emits = defineEmits(['sortChange'])
+  //排序
+  function sortChange(data) {
+    emits('sortChange',data)
+  }
   
   onMounted(() => {})
 

Web/src/components/importPop/index.vue

@@ -1,66 +1,78 @@
 <template>
-    <el-dialog
+  <el-dialog
-        v-model="dialogVisible"
+    v-model="dialogVisible"
-        title="导入"
+    title="导入"
-        width="600"
+    width="600"
-        :close-on-click-modal="false"
+    :close-on-click-modal="false"
-        :header-class="importPop"
+  >
+    <el-upload
+      ref="uploadRef"
+      v-model:file-list="fileList"
+      :action="importUrl"
+      :auto-upload="false"
+      :disabled="formLoading"
+      :headers="uploadHeaders"
+      :limit="1"
+      :on-error="submitFormError"
+      :on-exceed="handleExceed"
+      :on-success="submitFormSuccess"
+      :accept="accept"
+      drag
+      style="width: 300px; margin: 0 auto"
+      v-loading="formLoading"
     >
-        <!-- <el-upload
+      <el-icon color="#c0c4cc" :size="60"><UploadFilled /></el-icon>
-        ref="uploadRef"
+      <div class="el-upload__text">将文件拖到此处，或'<em>点击上传</em></div>
-        v-model:file-list="fileList"
+    </el-upload>
-        :auto-upload="false"
+    <template #footer>
-        :disabled="formLoading"
+      <div class="footerBtns">
-        :headers="uploadHeaders"
+        <div>
-        :limit="1"
+          <el-button type="success" plain @click="importTemplate">
-        :on-error="submitFormError"
+            <el-icon><Download /></el-icon>下载模板
-        :on-exceed="handleExceed"
+          </el-button>
-        :on-success="submitFormSuccess"
-        :accept="accept"
-        drag
-        style="width: 300px; margin: 0 auto"
-        v-loading="formLoading"
-      >
-        <Icon icon="ep:upload-filled" color="#c0c4cc" :size="60" />
-        <div class="el-upload__text">将文件拖到此处，或'<em>点击上传</em></div>
-      </el-upload>
-      <template #footer>
-        <div class="flex items-center">
-          <div class="flex-1 text-left">
-            <el-button type="primary" plain @click="importTemplate">
-              <Icon icon="ep:download" /> 下载模板
-            </el-button>
-          </div>
-          <el-button :disabled="formLoading" type="primary" @click="submitForm">{{ t('ts.确 定') }}</el-button>
-          <el-button @click="dialogVisible = false">{{ t('ts.取 消') }}</el-button>
         </div>
-      </template> -->
+        <div>
-    </el-dialog>
+          <el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button>
+          <el-button @click="dialogVisible = false">取消</el-button>
+        </div>
+      </div>
+    </template>
+  </el-dialog>
 </template>
-<script setup>
+<script setup lang="ts">
 defineOptions({ name: 'importPop' })
 import { reactive, ref, onMounted } from 'vue'
 import { ElDialog,ElMessage } from 'element-plus'
-// import { downloadByData } from '@/utils/download'
+import { downloadByData } from '@/utils/download'
+import { getCommonImportTemplate } from '@/api/common/index'
+
+import { useRoute } from 'vue-router'
+const route = useRoute()
 
-// import { useRoute } from 'vue-router'
-// const route = useRoute()
 const dialogVisible = ref(false) // 弹窗的是否展示
 const fileList = ref([]) // 文件列表
 const uploadRef = ref()
 const formLoading = ref(false) // 表单的加载中
-// const uploadHeaders = ref() // 上传 Header 头
+const uploadHeaders = ref() // 上传 Header 头
+// const importUrl = getBaseUrl() + import.meta.env.VITE_API_URL + (props.url || '/finance/common-excel-in/import')
+
+const props = defineProps({
+  // api名称
+  apiName: {
+    type: String,
+    default: null
+  },
+  // 可以导入的文件类型
+  accept: {
+    type: String,
+    required: false,
+    default: '.xlsx,.xls'
+  },
+})
 
-// const props = defineProps({
+const importUrl =  `/api/${props.apiName}/import`
-//   // 可以导入的文件类型
-//   accept: {
-//     type: String,
-//     required: false,
-//     default: '.xlsx,.xls'
-//   },
-// })
 
-// /** 重置表单 */
+/** 重置表单 */
 const resetForm = () => {
   // 重置上传状态和文件
   formLoading.value = false
@@ -68,78 +80,95 @@ const resetForm = () => {
   fileList.value = []
 }
 
-// /** 打开弹窗 */
+/** 打开弹窗 */
 const open = () => {
   dialogVisible.value = true
   resetForm()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
-// /** 上传错误提示 */
+/** 上传错误提示 */
-// const submitFormError = (): void => {
+const submitFormError = (): void => {
-//     ElMessage.error('上传失败，请您重新上传！')
+    ElMessage.error('上传失败，请您重新上传！')
-//     formLoading.value = false
+    formLoading.value = false
-// }
+}
 
-// /** 文件数超出提示 */
+/** 文件数超出提示 */
-// const handleExceed = (): void => {
+const handleExceed = (): void => {
-//     ElMessage.error('最多只能上传一个文件！')
+    ElMessage.error('最多只能上传一个文件！')
-// }
+}
 
-// /** 下载模板操作 */
+/** 下载模板操作 */
-// const importTemplate = () => {
+const importTemplate = () => {
-//     // todo：
+  formLoading.value = true
-//     // downloadByData(res.data,route.meta.title+'.xlsx')
+  getCommonImportTemplate(props.apiName)
-// //   const res = importTemplateData.value.templateUrl
+    .then(res=>{
-// //   download.excel(res, importTemplateData.value.templateTitle)
+      downloadByData(res.data,route.meta.title+'_模板.xlsx')
-// }
+    })
+    .finally(() => (formLoading.value = false))
+}
 
 // /** 提交表单 */
-// const submitForm = async () => {
+const submitForm = async () => {
-//   if (fileList.value.length == 0) {
+  if (fileList.value.length == 0) {
-//     ElMessage.error('请上传文件')
+    ElMessage.error('请上传文件')
-//     return
+    return
-//   }
+  }
-//   file.value = fileList.value[0].name
+  // 提交请求
-//   // 提交请求
+  // uploadHeaders.value = {
-//   uploadHeaders.value = {
+  //   Authorization: 'Bearer ' + getAccessToken(),
-//     Authorization: 'Bearer ' + getAccessToken(),
+  //   'tenant-id': getTenantId()
-//     'tenant-id': getTenantId()
+  // }
-//   }
+  formLoading.value = true
-//   formLoading.value = true
+  uploadRef.value!.submit()
-//   uploadRef.value!.submit()
+}
-// }
 
 // /** 文件上传成功 */
-// const emits = defineEmits(['success'])
+const emits = defineEmits(['success'])
-// const submitFormSuccess = (response: any) => {
+// todo:成功后处理
-//   formLoading.value = true
+const submitFormSuccess = (response: any) => {
-//   if (response) {
+  formLoading.value = true
-//     if (response.code == 500) {
+  if (response) {
-//       uploadRef.value!.clearFiles()
+    if(response.code == '200'){
-//       ElMessage.error('导入失败')
+      ElMessage.success('导入成功！')
-//       formLoading.value = false
+    }else{
-//       return
+      ElMessage.error(response.msg)
-//     } else if (response.code == 0) {
+    }
-//       if (response.data.errorCount > 0) {
+    // if (response.code == 500) {
-//         ElMessage.confirm('文件中有部分数据导入失败，是否下载失败数据？').then(async () => {
+    //   uploadRef.value!.clearFiles()
-//             // todo:失败下载链接
+    //   ElMessage.error('导入失败')
-//           window.open(
+    //   formLoading.value = false
-//             getJmreportBaseUrl() + response.data.errorFile,
+    //   return
-//             'TITLE'
+    // } 
-//           )
+    // // todo:错误下载
-//         })
+    // else if (response.code == 0) {
-//       } else {
+    //   if (response.data.errorCount > 0) {
-//         ElMessage.success('导入成功')
+    //     ElMessage.confirm('文件中有部分数据导入失败，是否下载失败数据？').then(async () => {
-//       }
+    //         // todo:失败下载链接
-//     }else if(response.data == null){
+    //       window.open(
-//         ElMessage.error(response.msg)
+    //         getJmreportBaseUrl() + response.data.errorFile,
-//       }
+    //         'TITLE'
-//   }
+    //       )
+    //     })
+    //   } else {
+    //     ElMessage.success('导入成功')
+    //   }
+    // }
+    // else if(response.data == null){
+    //   ElMessage.error(response.msg)
+    // }
+  }
 
-//   // 发送操作成功的事件
+  // 发送操作成功的事件
-//   formLoading.value = false
+  formLoading.value = false
-//   emits('success')
+  emits('success')
-//   dialogVisible.value = false
+  dialogVisible.value = false
-// }
+}
-</script>
+</script>
+<style lang="scss" scoped>
+  .footerBtns{
+    display: flex;
+    padding: 20px;
+    justify-content: space-between;
+  }
+</style>

Web/src/components/tablePage/index.vue

@@ -1,49 +1,122 @@
 <template>
-  <elTable 
+  <div class="app-container" v-loading="state.loading">
-    :columnWidth="props.columnWidth"
+    <el-card class="search-container">
-    :columnHeaderAlign="props.columnHeaderAlign"
+      <el-form :inline="true">
-    :columnAlign="props.columnAlign"
+        <el-form-item 
-    :tableData="props.tableData"
+          v-for="(item,index) in props.searchOptions"
-    :tableColumns="props.tableColumns"
+          :key="index"
-  ></elTable>
+          :label="item.label">
+          <el-input 
+            v-if="item.type == 'input'"
+            v-model="props.searchFilter[item.prop]" 
+            :placeholder="item.label" 
+            :clearable="!item.noClear"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            v-for="(btn,btn_key) in props.searchButtons"
+            :key="btn_key"
+            :icon="state.searchBtnOptions[btn].icon"
+            v-auth="state.searchBtnOptions[btn].sAuth || props.apiName + state.searchBtnOptions[btn].auth"
+            :type="state.searchBtnOptions[btn].type"
+            @click="searchBtnHandle(btn)"
+          >{{state.searchBtnOptions[btn].label}}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-  <elPager
+    <el-card class="paged-table-container">
-    style="margin-top: 15px;float:right"
+      <elTable 
-    :pageParams="props.pageParams"
+        :columnWidth="props.columnWidth"
-    @pageSizeChange="pageSizeChange"
+        :columnHeaderAlign="props.columnHeaderAlign"
-    @pageCurrentChange="pageCurrentChange"
+        :columnAlign="props.columnAlign"
-  ></elPager>
+        :tableData="state.tableData"
+        :tableColumns="props.tableColumns"
+        @sortChange="sortChange"
+      ></elTable>
+
+      <elPager
+        style="margin-top: 15px;float:right"
+        :pager="state.pager"
+        @pageSizeChange="pageSizeChange"
+        @pageCurrentChange="pageCurrentChange"
+      ></elPager>
+    </el-card>
+
+    <!-- 导入弹窗 -->
+    <importPop 
+      ref="importPopRef" 
+      :apiName="props.apiName"
+      @success="importSuccess"
+    />
+  </div>
 </template>
   
 <script setup>
   defineOptions({ name: 'tablePage' })
   import { reactive, ref, onMounted } from 'vue'
+  import { getCommonPaged,postCommonExport } from '@/api/common/index'
   import { ElMessageBox, ElMessage,ElTable, ElTableColumn } from 'element-plus'
   import elTable from '@/components/elTable/index.vue'
   import elPager from '@/components/elPager/index.vue'
+  import { getPageParamsForFilter } from '@/utils/common/index'
+  import { downloadByData } from '@/utils/download'
+  import importPop from '@/components/importPop/index.vue'
+
+  import { useRoute } from 'vue-router'
+  const route = useRoute()
   
-  const state = reactive({})
+  const state = reactive({
+    loading:false,
+    searchBtnOptions:{
+      search:{icon:'Search',auth:':page',label:'查询',type:null},
+      import:{icon:'BottomRight',auth:':import',label:'导入',type:'warning'},
+      export:{icon:'TopRight',auth:':export',label:'导出',type:'success'},
+    },
+    tableData:[],
+    // table排序处理
+    sortFilter:{
+      sortBy:null,
+      isAscending:null
+    },
+    pager:{
+      page: 1,
+      pageSize: 10,
+      total: 1,
+    }
+  })
 
   const props = defineProps({
-    // table数据
+    // api名称
-    tableData: {
+    apiName: {
-      type: Object,
+      type: String,
-      default: []
+      default: null
     },
     // table表头
     tableColumns: {
       type: Object,
       default: []
     },
-    // table分页
+    // 查询配置
-    pageParams: {
+    searchOptions: {
+      type: Object,
+      default: []
+    },
+    // 查询按钮
+    searchButtons: {
+      type: Object,
+      default: ['search','import','export']
+    },
+    // table查询数据filter
+    searchFilter: {
       type: Object,
       default: {}
     },
     // 表头宽度
     columnWidth:{
       type: Number,
-      default: 100
+      default: 120
     },
     // 表头对齐
     columnHeaderAlign:{
@@ -56,22 +129,93 @@
       default: 'center'
     },
   })
+  
+
+  // 格式化页面传参
+  function getPageParams(){
+    console.log(136,props.searchFilter)
+    let _pageParams = getPageParamsForFilter({
+      pageNumber:state.pager.page,
+      pageSize:state.pager.pageSize,
+      sortBy:state.sortFilter.sortBy,
+      isAscending:state.sortFilter.isAscending,
+      filters:props.searchFilter
+    })
+    return _pageParams
+  }
+
+  // 获取页面数据
+  function getTableData(page) {
+    state.loading = true
+    if(!page)page = state.pager.page
+    if(page)state.pager.page = page
+    getCommonPaged(props.apiName,getPageParams())
+      .then((resp) => {
+        state.tableData = resp.data.data
+        state.pager.total = resp.data.totalPages
+      })
+      .finally(() => (state.loading = false))
+  }
+
+  const importPopRef = ref()
+  // 按钮功能
+  function searchBtnHandle(btn){
+    console.log(btn)
+    // 查询
+    if(btn == 'search'){
+      getTableData()
+    }
+    // 导入
+    else if (btn == 'import'){
+      importPopRef.value.open()
+    }
+    // 导出
+    else if (btn == 'export'){
+      state.loading = true
+      getTableData()//同步数据查询
+      postCommonExport(props.apiName,getPageParams())
+        .then((res) => {
+          downloadByData(res.data,route.meta.title+'.xlsx')
+        })
+        .finally(() => (state.loading = false))
+    }
+  }
 
-  const emits = defineEmits(['pageSizeChange', 'pageCurrentChange'])
+  // 排序
+  function sortChange(data) {
+    const { prop, order } = data;
+    if (!prop || !order) {
+      state.sortFilter.sortBy = null;
+      state.sortFilter.isAscending = null;
+      getTableData();
+      return;
+    }
+    state.sortFilter.sortBy = prop;
+    state.sortFilter.isAscending = (order == "ascending");
+    getTableData();
+  }
+  
+  // 导入成功之后todo
+  function importSuccess(response,importDate){
+    getTableData()
+  }
+  
+  // 页脚方法处理
+  // const emits = defineEmits(['pageSizeChange', 'pageCurrentChange'])
   
   // size-change
   function pageSizeChange(page){
-    emits('pageSizeChange',page)
+    getTableData(page)
+    // emits('pageSizeChange',page)
   }
 
   // current-change
   function pageCurrentChange(page){
-    emits('pageCurrentChange',page)
+    getTableData(page)
+    // emits('pageCurrentChange',page)
   }
-  
-  onMounted(() => {})
 
-  </script>
+  onMounted(() => {
-  
+    getTableData()
-  <style></style>
+  })
-  
+  </script>

Web/src/views/logisticsPlan/supplierMrpMonth/index.vue

@@ -1,59 +1,28 @@
 <template>
-  <div class="app-container" v-loading="state.loading">
+  <tablePage 
-    <!-- M+6月物料需求计划 -->
+    :apiName="state.apiName"
-    <el-card class="search-container">
+    :searchOptions="state.searchOptions"
-      <el-form :inline="true">
+    :tableColumns="state.tableColumns"
-        <el-form-item label="零件号">
+    :searchFilter="state.searchFilter"
-          <el-input 
+  ></tablePage>
-            v-model="state.pageParams.filters.materialCode" 
-            placeholder="零件号" 
-            clearable 
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="handleQuery(1)" icon="Search" v-auth="state.apiName + ':page'">查询</el-button>
-          <el-button @click="handleExport()" icon="TopRight" v-auth="state.apiName + ':export'" type="success">导出</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-    <el-card class="paged-table-container">
-      <tablePage 
-        :tableData="state.tableData"
-        :tableColumns="state.tableColumns"
-        :pageParams="state.pageParams"
-        @pageSizeChange="handleQuery"
-        @pageCurrentChange="handleQuery"
-      ></tablePage>
-    </el-card>
-  </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'supplierMrpMonth' })
 import { reactive, ref, onMounted } from 'vue'
-import { getCommonPaged,postCommonExport } from '@/api/common/index'
-import { downloadByData } from '@/utils/download'
-import { ElMessageBox, ElMessage } from 'element-plus'
 import tablePage from '@/components/tablePage/index.vue'
 import EnumList from '@/utils/common/enumList'
-import { getPageParamsForFilter } from '@/utils/common/index'
-
-import { useRoute } from 'vue-router'
-const route = useRoute()
 
 const state = reactive({
   apiName:'cherysuppliermrpmonth',
-  loading: false,
+  searchFilter: {
-  pageParams: {
+    materialCode: null
-    page: 1,
-    pageSize: 10,
-    total: 1,
-    filters: {
-      materialCode: null
-    },
   },
+  searchOptions:[
+    {type:'input',prop:'materialCode',label:'零件号'}
+  ],
   tableColumns: [
-    {prop:'releaseEdition',title:'需求发布版次',width:120},
+    {prop:'releaseEdition',title:'需求发布版次',width:150},
     {prop:'materialCode',title:'零件号'},
     {prop:'materialDescription',title:'零件名称'},
     {prop:'plantId',title:'工厂代码'},
@@ -68,46 +37,16 @@ const state = reactive({
     {prop:'quantityDemand7',title:'需求数量7'},
     {prop:'quantityDemand8',title:'需求数量8'},
     {prop:'quantityDemand9',title:'需求数量9'},
-    {prop:'quantityDemand10',title:'需求数量10'},
+    {prop:'quantityDemand10',title:'需求数量10',width:130},
-    {prop:'quantityDemand11',title:'需求数量11'},
+    {prop:'quantityDemand11',title:'需求数量11',width:130},
-    {prop:'quantityDemand12',title:'需求数量12'},
+    {prop:'quantityDemand12',title:'需求数量12',width:130},
     {prop:'isUpdate',title:'是否更新',type:'tagFilter',options:EnumList.whether},
     {prop:'createByUser',title:'创建人'},
-    {prop:'createTime',title:'创建时间',type:'datetime',width:180},
+    {prop:'createTime',title:'创建时间',width:180},
     {prop:'updateByUser',title:'修改人'},
-    {prop:'updateTime',title:'修改时间',type:'datetime',width:180},
+    {prop:'updateTime',title:'修改时间',width:180},
     {prop:'isDelete',title:'是否删除',type:'tagFilter',options:EnumList.whether},
     {prop:'version',title:'版本号'},
   ],
-  tableData: []
-})
-
-onMounted(() => {
-  handleQuery(1)
 })
-
-// 查询
-function handleQuery(page) {
-  state.loading = true
-  state.pageParams.page = page
-  getCommonPaged(state.apiName,Object.assign({}, getPageParamsForFilter(state.pageParams)))
-    .then((resp) => {
-      state.tableData = resp.data.data
-      state.pageParams.total = resp.data.totalPages
-    })
-    .finally(() => (state.loading = false))
-}
-
-// 导出
-function handleExport(){
-  state.loading = true
-  postCommonExport(state.apiName,Object.assign({}, getPageParamsForFilter(state.pageParams)))
-    .then((res) => {
-      downloadByData(res.data,route.meta.title+'.xlsx')
-    })
-    .finally(() => (state.loading = false))
-}
-
 </script>
-
-<style></style>

Web/src/views/logisticsPlan/supplierPo/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <tablePage 
+    :apiName="state.apiName"
+    :searchOptions="state.searchOptions"
+    :tableColumns="state.tableColumns"
+    :searchFilter="state.searchFilter"
+  ></tablePage>
+</template>
+
+<script setup>
+defineOptions({ name: 'supplierPo' })
+import { reactive, ref, onMounted } from 'vue'
+import tablePage from '@/components/tablePage/index.vue'
+import EnumList from '@/utils/common/enumList'
+
+const state = reactive({
+  apiName:'cherysupplierpo',
+  searchFilter: {
+    purchaseOrder: null
+  },
+  searchOptions:[
+    {type:'input',prop:'purchaseOrder',label:'采购订单号'}
+  ],
+  tableColumns: [
+    {prop:'purchaseOrder',title:'采购订单号',width:120},
+    {prop:'serialNumber',title:'行项目号'},
+    {prop:'plantId',title:'工厂代码'},
+    {prop:'plantName',title:'工厂名称'},
+    {prop:'voucherDate',title:'凭证日期',width:180},
+    {prop:'purchaser',title:'需方联系人'},
+    {prop:'supplier',title:'供方联系人'},
+    {prop:'materialCode',title:'物料编码'},
+    {prop:'materialDescription',title:'物料描述'},
+    {prop:'quantityDemand',title:'需求数量'},
+    {prop:'materialUnit',title:'物料单位'},
+    {prop:'deliveryDate',title:'交货日期',width:180},
+    {prop:'deliveryPlace',title:'交货地点'},
+    {prop:'quantityDelivery',title:'到货数量'},
+    {prop:'note',title:'备注'},
+    {prop:'itemType',title:'项目类别文本',width:150},
+    {prop:'tradeTerms',title:'国际贸易条件',width:150},
+    {prop:'country',title:'出口国家'},
+    {prop:'batch',title:'批次'},
+    {prop:'createByUser',title:'创建人'},
+    {prop:'createTime',title:'创建时间',width:180},
+    {prop:'updateByUser',title:'修改人'},
+    {prop:'updateTime',title:'修改时间',width:180},
+    {prop:'isDelete',title:'是否删除',type:'tagFilter',options:EnumList.whether},
+    {prop:'version',title:'版本号'},
+  ],
+})
+</script>

Web/src/views/logisticsPlan/supplierProPlaning/index.vue

@@ -1,59 +1,28 @@
 <template>
-  <div class="app-container" v-loading="state.loading">
+  <tablePage 
-    <!-- 整车月度生产计划2 -->
+    :apiName="state.apiName"
-    <el-card class="search-container">
+    :searchOptions="state.searchOptions"
-      <el-form :inline="true">
+    :tableColumns="state.tableColumns"
-        <el-form-item label="零件号">
+    :searchFilter="state.searchFilter"
-          <el-input 
+  ></tablePage>
-            v-model="state.pageParams.filters.materialCode" 
-            placeholder="零件号" 
-            clearable 
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="handleQuery(1)" icon="Search" v-auth="state.apiName + ':page'">查询</el-button>
-          <el-button @click="handleExport()" icon="TopRight" v-auth="state.apiName + ':export'" type="success">导出</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-    <el-card class="paged-table-container">
-      <tablePage 
-        :tableData="state.tableData"
-        :tableColumns="state.tableColumns"
-        :pageParams="state.pageParams"
-        @pageSizeChange="handleQuery"
-        @pageCurrentChange="handleQuery"
-      ></tablePage>
-    </el-card>
-  </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'supplierProPlaning' })
 import { reactive, ref, onMounted } from 'vue'
-import { getCommonPaged,postCommonExport } from '@/api/common/index'
-import { downloadByData } from '@/utils/download'
-import { ElMessageBox, ElMessage } from 'element-plus'
 import tablePage from '@/components/tablePage/index.vue'
 import EnumList from '@/utils/common/enumList'
-import { getPageParamsForFilter } from '@/utils/common/index'
-
-import { useRoute } from 'vue-router'
-const route = useRoute()
 
 const state = reactive({
   apiName:'supplierproplaning',
-  loading: false,
+  searchFilter: {
-  pageParams: {
+    materialCode: null
-    page: 1,
-    pageSize: 10,
-    total: 1,
-    filters: {
-      materialCode: null
-    },
   },
+  searchOptions:[
+    {type:'input',prop:'materialCode',label:'零件号'}
+  ],
   tableColumns: [
-    {prop:'releaseEdition',title:'需求发布版次',width:120},
+    {prop:'releaseEdition',title:'需求发布版次',width:150},
     {prop:'models',title:'车型'},
     {prop:'salseDepartment',title:'销售单位'},
     {prop:'type',title:'类型'},
@@ -70,42 +39,11 @@ const state = reactive({
     {prop:'quantity6',title:'数量6'},
     {prop:'plant',title:'工厂'},
     {prop:'createByUser',title:'创建人'},
-    {prop:'createTime',title:'创建时间',type:'datetime',width:180},
+    {prop:'createTime',title:'创建时间',width:180},
     {prop:'updateByUser',title:'修改人'},
-    {prop:'updateTime',title:'修改时间',type:'datetime',width:180},
+    {prop:'updateTime',title:'修改时间',width:180},
-    //是否删除(0:否,1是)
     {prop:'isDelete',title:'是否删除',type:'tagFilter',options:EnumList.whether},
     {prop:'version',title:'版本号'},
   ],
-  tableData: []
-})
-
-onMounted(() => {
-  handleQuery(1)
 })
-
+</script>
-// 查询
-function handleQuery(page) {
-  state.loading = true
-  state.pageParams.page = page
-  getCommonPaged(state.apiName,Object.assign({}, getPageParamsForFilter(state.pageParams)))
-    .then((resp) => {
-      state.tableData = resp.data.data
-      state.pageParams.total = resp.data.totalPages
-    })
-    .finally(() => (state.loading = false))
-}
-
-// 导出
-function handleExport(){
-  state.loading = true
-  postCommonExport(state.apiName,Object.assign({}, getPageParamsForFilter(state.pageParams)))
-    .then((res) => {
-      downloadByData(res.data,route.meta.title+'.xlsx')
-    })
-    .finally(() => (state.loading = false))
-}
-
-</script>
-
-<style></style>

Web/src/views/logisticsPlan/supplierSaWeek/index.vue

@@ -1,58 +1,26 @@
 <template>
-  <div class="app-container" v-loading="state.loading">
+  <tablePage 
-    <!-- M+6月物料需求计划 -->
+    :apiName="state.apiName"
-    <el-card class="search-container">
+    :searchOptions="state.searchOptions"
-      <el-form :inline="true">
+    :tableColumns="state.tableColumns"
-        <el-form-item label="计划协议号">
+    :searchFilter="state.searchFilter"
-          <el-input 
+  ></tablePage>
-            v-model="state.pageParams.filters.scheduleAgreement" 
-            placeholder="计划协议号" 
-            clearable 
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="handleQuery(1)" icon="Search" v-auth="state.apiName + ':page'">查询</el-button>
-          <el-button @click="handleExport()" icon="TopRight" v-auth="state.apiName + ':export'" type="success">导出</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-    <el-card class="paged-table-container">
-      <tablePage 
-        :columnWidth="null"
-        :tableData="state.tableData"
-        :tableColumns="state.tableColumns"
-        :pageParams="state.pageParams"
-        @pageSizeChange="handleQuery"
-        @pageCurrentChange="handleQuery"
-      ></tablePage>
-    </el-card>
-  </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'supplierSaWeek' })
 import { reactive, ref, onMounted } from 'vue'
-import { getCommonPaged,postCommonExport } from '@/api/common/index'
-import { downloadByData } from '@/utils/download'
-import { ElMessageBox, ElMessage } from 'element-plus'
 import tablePage from '@/components/tablePage/index.vue'
 import EnumList from '@/utils/common/enumList'
-import { getPageParamsForFilter } from '@/utils/common/index'
-
-import { useRoute } from 'vue-router'
-const route = useRoute()
 
 const state = reactive({
   apiName:'cherysuppliersaweek',
-  loading: false,
+  searchFilter: {
-  pageParams: {
+    scheduleAgreement: null
-    page: 1,
-    pageSize: 10,
-    total: 1,
-    filters: {
-      scheduleAgreement: null
-    },
   },
+  searchOptions:[
+    {type:'input',prop:'scheduleAgreement',label:'计划协议号'}
+  ],
   tableColumns: [
     {prop:'scheduleAgreement',title:'计划协议号',width:120},
     {prop:'serialNumber',title:'行项目号'},
@@ -61,43 +29,13 @@ const state = reactive({
     {prop:'purchasingGroup',title:'采购组'},
     {prop:'plantId',title:'工厂代码'},
     {prop:'quantityDemand',title:'需求数量'},
-    {prop:'dateReceived',title:'交货日期',type:'datetime',width:180},
+    {prop:'dateReceived',title:'交货日期',width:180},
     {prop:'createByUser',title:'创建人'},
-    {prop:'createTime',title:'创建时间',type:'datetime',width:180},
+    {prop:'createTime',title:'创建时间',width:180},
     {prop:'updateByUser',title:'修改人'},
-    {prop:'updateTime',title:'修改时间',type:'datetime',width:180},
+    {prop:'updateTime',title:'修改时间',width:180},
     {prop:'isDelete',title:'是否删除',type:'tagFilter',options:EnumList.whether},
     {prop:'version',title:'版本号'},
   ],
-  tableData: []
-})
-
-onMounted(() => {
-  handleQuery(1)
 })
-
+</script>
-// 查询
-function handleQuery(page) {
-  state.loading = true
-  state.pageParams.page = page
-  getCommonPaged(state.apiName,Object.assign({}, getPageParamsForFilter(state.pageParams)))
-    .then((resp) => {
-      state.tableData = resp.data.data
-      state.pageParams.total = resp.data.totalPages
-    })
-    .finally(() => (state.loading = false))
-}
-
-// 导出
-function handleExport(){
-  state.loading = true
-  postCommonExport(state.apiName,Object.assign({}, getPageParamsForFilter(state.pageParams)))
-    .then((res) => {
-      downloadByData(res.data,route.meta.title+'.xlsx')
-    })
-    .finally(() => (state.loading = false))
-}
-
-</script>
-
-<style></style>