Vue3:封装Table 表格组件问题修改

问题修正：上一次封装了组件，刚开始想的是接口请求完成后，返回了数据在把组件显示出来，但是如果接口请求错误，或者某些原因导致了接口无法正常返回数据，就会导致页面报错白屏。所以今天就修改一下问题 上一篇：跳转

修改后:

<template>
  <div class="box">
    <div class="topbus"></div>
    <FromData :fromlist="fromlist" @UserSearch="Receive_Data" style="margin-top: 8px;" />
    <div class="Table_Top_button">
      <div class="Table_Top_button_Left">
        <Button  :type="'primary'"  :loading="ButIsLoading"  :icon="'plus'" :title="'添加'" :pattern="'centre'"  />
        <Button  :type="'primary'"  plain :loading="ButIsLoading"  :title="'权限配置'" :pattern="'centre'"  />
        <Button  :type="'primary'"  plain :loading="ButIsLoading"  :title="'自定义配置'" :pattern="'centre'"  /> 
        <Button  :type="'dropdown'"    :title="'更多操作'"  /> 
      </div> 
      <div class="Table_Top_button_Rigth">
        <Button  plain  :title="'导出'" :pattern="'centre'" :icon="'download'"/>
        <Button  plain  :title="'导入'" :pattern="'centre'" :icon="'upload'"/>
      </div>
    </div>
      <Table  :PropTableS="PropTableS"  ></Table>
      <Paging :PageList="PageList" @UserPaging="UserPagingSearch"></Paging>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, defineExpose, watch } from "vue";
import { FromData ,Button ,Table,Paging} from "@/components";
import useCurrentInstance from "@/hooks/useCurrentInstance";
import axios from "@/axios/project_interface";
 
import bus from "@/mitt";
import { Return } from "@icon-park/vue-next/es/map";
const { proxy } = useCurrentInstance();
const form = ref({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

let ShowTable = ref(false)

const fromlist = ref({
   formInline:true,
   isInput:true,
   listData:{
    "order_sn":{ 
      title:'退货通知单',
      type:'input',
      clearable:true,
      icon:'',
    },
    "e3_order_sn_false":{ 
      title:'销货单号',
      type:'input',
      clearable:true,
      icon:'',
    },
    "order_status":{
      title:'状态',
      type:'select',
      multiple:true,
      clearable:true,
      children:[{
              label:"已完成",
              value:1
            },
            {
              label:"已关闭",
              value:2
            },
            {
              label:"已终止",
              value:3
            },
            {
              label:'待业务确认',
              value:0
            },
            {
              label:'待财务确认',
              value:4
            }]
    },
    "push_e3":{
      title:'已推送E3',
      type:'select',
      clearable:true,
      children:[{
              label:"是",
              value:1
            },
            {
              label:'否',
              value:0
            }]
    },
    'has_back_order':{
          title:'已生成退单',
          type:'select',
          clearable:true,
          children:[
            {
              label:"已生成",
              value:1
            },
            {
              label:'未生成',
              value:0
            }
          ]
        },
      'channel':{
          title:'渠道',
          type:'select',
          clearable:true,
          filterable:true,
          multiple:true,
          children:[],//请求后端接口的数据
        },

        'nc_code':{
          title:'NC代码',
          type:'select',
          clearable:true,
          filterable:true,
          multiple:true,
          children:[]
        },

    "customer_abbreviate":{ 
      title:'客户简称',
      type:'input',
      clearable:true,
    },
    'warehouse_code':{
        title:'仓库',
        clearable:true,
        type:'select',
        children:[
          {
            label:"是",
            value:1
          },
          {
            label:'否',
            value:0
          }
        ]
      },
    'business_type':{
        title:'业务类型',
        type:'select',
        clearable:true,
        filterable:true,
        multiple:true,
        children:[
          {
            label:"零售",
            value:1
          },
          {
            label:'批发',
            value:2
          }
        ]
      },
        'user_id':{
          title:'业务员',
          type:'select',
          clearable:true,
          filterable:true,
          multiple:true,
          children:[]
        },
        'creator_id':{
          title:'制单人',
          type:'select',
          clearable:true,
          filterable:true,
          multiple:true,
          children:[]
        },

      'business_time':{
          title:'业务时间',
          type:'picker',
        },
        'logistics_number':{
          title:'退货物流单号',
          type:'input',
        },
   
   }
})

let PageList = ref({
   layout:'total, sizes, prev, pager, next', //分页组件的排列顺序
})

let ButIsLoading = ref(false)
let ShiwTable = ref(false)
let ShiwPaging = ref(false)

let PropTableS = ref({
  tableStyle : {
          'width' : '99%',
          'margin' : 'auto',
      },
  keyS:proxy.$PublicAPI.SetTableCotentWidth({
        selection:{
          type:'selection',
          width:50,
        },
        order_sn:{
          title:'退货通知单号',
          width:'200px',
          link:true
        },
        order_status_text:{
          title:'状态',
        },
        push_e3_text:{
          title:'已推送E3',
        },
        is_succeed_text:{
          title:'推送E3状态',
        },
        has_sale_order_text:{
          title:'已生成退单',
        },
        customer_abbreviate:{
          title:'客户简称',
        },
        nc_code:{
          title:'NC代码',
        },
        order_amount:{
          title:'金额',
        },
        sku_count:{
          title:'数量',
        },
        return_shipping_name:{
          title:'退货快递公司',
        },
        logistics_number:{
          title:'退货物流单号',
        },
        warehouse_name:{
          title:'仓库',
        },business_type_text:{
          title:'业务类型',
        },
        user_text:{
          title:'业务',
        },
        creator_text:{
          title:'制单人',
        },
        remarks:{
          title:'备注',
        },
        business_time:{
          title:'业务时间',
          width:'200px'
        },created_at:{
          title:'创建时间',
          width:'200px'
        },
      })
})


let fromSearch = ref({})

let PagingSearch = ref({
  page_size:20,
  page:1
})

//定义表头的显示名称
let objeckeys = ref([])

onMounted(()=>{
  getShopSelectList()
})

bus.on("userressting", () => {
  getButton();
});

//表单组件返回的查询数据
function Receive_Data(params:any,type:string) {
  fromSearch.value = params
  let list = {} 
  if(type == 'resetting'){
    PagingSearch.value = {
      page_size:20,
      page:1
    }
  }
  //PagingSearch:分页的查询条件 , fromSearch：表单的查询条件
  list = Object.assign(PagingSearch.value, fromSearch.value)
  //调用表格列表的查询接口
  GetTabList(list).then(result =>{
      PropTableS.value.tables = result
    }).catch(error=>{
  })
}

 
function GetTabList(params:boject) {  
  //测试数据
 return new Promise((resolve,reject)=>{
    axios.GetchargebacknoticeList(params).then(res=>{
      //PageList 这个是分页组件需要传递的数据
      PageList.value.total = Number(res.total) //总页数
      PageList.value.currentPage = Number(res.page)   //当前页
      PageList.value.pageSize = Number(res.page_size)   //每页数据多少条
       resolve(res.list); 
    }).catch(error => {
       reject(error);
    });
 })
}


//进入页面就调用了方法 list是查询条件，fromSearch 和 PagingSearch 定义的时候是有默认值的
let list = Object.assign(fromSearch.value,PagingSearch.value)
  //查询列表数据
  GetTabList(list).then(result =>{
    PropTableS.value.tables = result 
    if(PropTableS.value){
      ShiwTable.value = true
    }
  })



//店铺请求接口调用
 function getShopSelectList() {
    axios.GetShopSelectList().then(res=>{
      // fromlist.value.listData.store_id.children = res
    })
 }


//接收分页传递过来的数据
 function UserPagingSearch(params:object) {
    PagingSearch.value = params
    let list = {}
    // Object.assign(值,值) 如果第一个参数值，和第二个参数值中有的键名一样，第二个参数值的内容会覆盖掉第一个参数值相同键的内容，如果第二个参数值的键，在第一参数值之中没有那就合并成新的对象就会添加进入如：fromSearch={a:1,b:2}  PagingSearch={a:3,b:3,c:4} ，合并后的list ={a:3,b:3,c:4}
    list = Object.assign(fromSearch.value, PagingSearch.value)
     GetTabList(list).then(result =>{
      PropTableS.value.tables = result
    })
 }


</script>