AuditCloudClient/src/pages/order/OrderList.vue

<template>
<div class="boxMain">
  <inc-search :listInput="listInput" :loadSoBn="tableLoad" :onSearch="filterSearch" :orderType="orderType"></inc-search>
  <a-table class="tablesa" :columns="tableColumns" :data-source="tableData" :rowKey="lists => lists.id" :pagination="pagination" :loading="tableLoad" @change="filterSearch">
    <router-link slot="orderNo" slot-scope="text,record" :to="'detail?id='+record.orderId"><a-icon type="file-text" /> {{text}}</router-link>
    <span class="amount" slot="amount" slot-scope="text,record">金额：<span>${{ text }}</span><br>已付：<span>${{record.paidAmount||0}}</span></span>
    <span slot="creationTime" slot-scope="text">{{formatDateTime(text)}}</span>
    <div class="files" slot="files" slot-scope="text">
      <ul>
        <li v-for="(file,fid) in text" :key="fid"><a :href="file.url" :title="file.name" target="_blank"><a-icon type="link" /> {{file.name}}</a></li>
      </ul>
    </div>
  </a-table>
</div>
</template>

<script>
import IncSearch from "@/pages/Common/search";
import {formatDate, resOrderStatus, resProTypes} from "@/services/Common";
import {OrderList} from "@/services/order/Order";
export default {
  name: 'OrderList',
  components: {IncSearch},

  data(){
    return{
      orderType:[],
      listInput:[
        {type:'input',name:'OrderNo',title:'订单编号',value:''},
        {type:'select',name:'orderStatus',title:'订单状态',value:'', width:'120px',
          option:resOrderStatus(),
        },
      ],
      pagination: {
        pageSize: 10,
        current: 1,
        showQuickJumper: true,
        showTotal: (total) => `总计 ${total} 条`,
      },
      tableLoad: false,
      tableColumns:[
        {title: '订单编号',dataIndex: 'orderNo',key: 'orderNo',width:'260px',scopedSlots: { customRender: 'orderNo' },},
        {title: '状态',dataIndex: 'orderStatusValue',key: 'orderStatusValue',width:'100px'},
        {title: '创建时间',dataIndex: 'creationTime',key: 'creationTime',width:'160px',scopedSlots: { customRender: 'creationTime' },},
        {title: '下单时间',dataIndex: 'orderTime',key: 'orderTime',width:'160px'},
        {title: '时效',dataIndex: 'deliveryTime',key: 'deliveryTime',width:'120px'},
        {title: '数量',dataIndex: 'qty',key: 'qty',width:'80px'},
        {title: '文件',dataIndex: 'files',key: 'files',width:'300px',scopedSlots: { customRender: 'files' },},
        {title: '金额',dataIndex: 'amount',key: 'amount',scopedSlots: { customRender: 'amount' }},
      ],
      tableData:[],
    }
  },
  mounted() {
    var reg = /\/order\/((\w|-|\s)+)\//ig;
    let routePath = this.$route.path.replace(reg,  function() {
      return arguments[1];
    });
    this.orderType = resProTypes(routePath);
    this.filterSearch()

  },
  methods:{
    getOrderStatus(key){
      return resOrderStatus(key);
    },
    filterSearch(page){
      // console.log(page)
      // console.log(this.listInput)
      if(typeof(page)=='object'){
        this.pagination.current = page.current;
      }
      let count = (this.pagination.current-1)*this.pagination.pageSize;
      let params={
        orderType:this.orderType.proType,
        orderNo:this.listInput[0].value,
        orderStatus:this.listInput[1].value,
        // sorting:this.listInput[2].value,
        skipCount:count,
        maxResultCount:this.pagination.pageSize,
      }
      // console.log(params)
      this.fetch(params);
    },
    fetch(params = {}) {
      this.tableLoad = true;
      OrderList(params).then(data=>{
        const pagination = { ...this.pagination};
        pagination.total = data.totalCount;
        this.tableLoad = false;
        this.tableData = data.items;
        this.pagination = pagination;
      }).catch(err=>{
        this.tableLoad = false;
      })
    },
    formatDateTime(time){
      return formatDate(time,'yyyy-MM-dd hh:mm');
    },
  }
}
</script>

<style scoped>

</style>