wenhuaDate_admin/src/components/page/order/closed.vue

<template>
  <div>
    <div class="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>交易订单管理</a-breadcrumb-item>
        <a-breadcrumb-item>已关闭订单</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="body">
      <div class="query">
        <a-row type="flex" justify="space-between" >
          <a-col :span="6" class="query_item">
            <span>订单编号：</span>
            <a-input v-model="query.batchcode"/>
          </a-col>
          <a-col :span="6" class="query_item">
            <span>授权方：</span>
            <a-input v-model="query.entrust_name"/>
          </a-col>
          <a-col :span="6" class="query_item">
            <span>被授权方：</span>
            <a-input v-model="query.buy_name"/>
          </a-col>
          <a-col :span="6" class="query_item">
            <span>标的名称:</span>
            <a-input v-model="query.goods_name"/>
          </a-col>

          <!-- <a-col :span="5" class="query_item" >
            <span>订单类型：</span>
            <a-select default-value=""   v-model="query.order_type">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">委托订单</a-select-option>
              <a-select-option value="2">认证订单</a-select-option>
              <a-select-option value="3">服务订单</a-select-option>
            </a-select>
          </a-col> -->

          <a-col :span="6" class="query_item">
            <span>交易方式：</span>
            <a-select default-value=""   v-model="query.entrust_type">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">转让</a-select-option>
              <a-select-option value="2">授权</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6" class="query_item query_item2">
            <span>创建时间：</span>
            <a-range-picker  v-model="query.createtime" valueFormat="YYYY-MM-DD"/>
          </a-col>
          <a-col :span="12" class="query_item query_item1">
            <a-space :size="21">
              <a-button type="primary" class="query_button" @click="getList">查 询</a-button>
              <a-button class="query_button" @click="resetQurey">重 置</a-button>
            </a-space>
          </a-col>
        </a-row>
      </div>
      <div class="table">
        <div class="table_title">
          <span>查询结果</span>
          <!-- <a-button type="primary" class="query_button">获 取</a-button> -->
        </div>
        <a-table :columns="columns" :data-source="data" bordered :pagination="false">
          <template slot="type" slot-scope="type">
            <span>{{type==1?'委托订单':type==2?'认证订单':'服务订单'}}</span>
          </template>
          <template slot="operation" slot-scope="item">
            <a-space :size="24">
              <span class="table_operation" @click="SelectDate(item.batchcode)">数据查看</span>
              <span class="table_operation" @click="SelectOrder(item.batchcode)">订单详情</span>
            </a-space>
          </template>
        </a-table>
        <a-pagination
        class="pagination"
        size="small"
        :total="total"
        v-model="page"
        :page-size="limit"
        :show-total="total => `第 ${startTotal} - ${endTotal} 条 / 总共 ${total} 条`"
        :page-size-options="pageSizeOptions"
        @showSizeChange="onShowSizeChange"
        @change="changePage"
        show-size-changer >
          <template slot="buildOptionText" slot-scope="props">
            <span >{{ props.value }}条/页</span>
          </template>
        </a-pagination>
      </div>
    </div>
    <dataSelect :visible.sync="visible" v-if="visible" :batchcode="batchcode" :type="1"></dataSelect>
    <orderDetails :visible.sync="visible2" v-if="visible2" :batchcode="batchcode"></orderDetails>
  </div>
</template>
<script>
import Operation from '../../Operation.vue'
import {getOrderList} from '../../../api/index'
export default {
  data() {
    return{
      query:{
        batchcode:'',
        entrust_name:'',
        buy_name:'',
        goods_name:'',
        order_type:'',
        entrust_type:'',
        transaction_status:'5',
        createtime:'',
        goods_isli:'',
      },
      visible:false,
      visible2:false,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      total:0,
      //一页多少条
      startTotal:1,
      endTotal:10,
      limit:10,
      // 当前页数
      page:1,
      data:[],
      columns:[
        {
          title: '序号',
          dataIndex: 'id',
          width:'65px',
          align:'center'
        },
        {
          title: '订单创建时间',
          dataIndex: 'createtime',
          width:'160px',
          // align:'center'
        },
        {
          title: '订单编号',
          dataIndex: 'batchcode',
          // align:'center'
        },
        {
          title: '授权方/卖方',
          dataIndex: 'entrust_name',
          // align:'center'
        },
        {
          title: '标的名称',
          dataIndex: 'goods_name',
          // align:'center'
        },
        {
          title: '被授权方/买方',
          dataIndex: 'buy_username',
          width:'130px',
          // align:'center'
        },
        // {
        //   title: '订单类型',
        //   dataIndex: 'type',
        //   scopedSlots: { customRender: 'type' },
        //   align:'center'
        // },
        {
          title: '交易方式',
          dataIndex: 'entrust_type',
          width:'90px',
          // align:'center'
        },
        {
          title: '交易总额',
          dataIndex: 'total_money',
          width:'90px',
          // align:'center'
        },
        {
          title: '操作',
          width:'170px',
          scopedSlots: { customRender: 'operation' },
          // align:'center'
        },
      ]
    }
  },
  components:{
    Operation,
    dataSelect: () => import('../../dateSelect/index.vue'),
    orderDetails: () => import('../../orderDetails/index.vue'),
  },
  created(){
    this.getList()
  },
  methods:{
    // 重置query
    resetQurey(){
      Object.assign(this.query, this.$options.data().query)
      this.getList()
    },
    getList(){
      let data=this.query
      data.page=this.page
      data.limit=this.limit
      getOrderList(data).then(res=>{
        if(res.code==200){
          this.data=res.data.data
          this.startTotal=res.data.start
          this.endTotal=res.data.end
          this.total=res.data.total
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    SelectOrder(val){
      this.batchcode=val
      this.visible2=true
    },
    SelectDate(val){
      this.visible=true
      this.batchcode=val
    },
    // 切换一页显示多少条
    onShowSizeChange(current, pageSize){
      this.limit = pageSize;
      this.getList()
    },
    // 切换页数
    changePage(page){
      this.page=page
      this.getList()
    },
  }
}
</script>
<style scoped>

</style>