wenhuaDate_admin/src/components/page/order/toBeSettled.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  justify="space-between" >
          <a-col :span="5" class="query_item">
            <span>订单编号：</span>
            <a-input/>
          </a-col>
          <a-col :span="5" class="query_item">
            <span>委托方：</span>
            <a-input/>
          </a-col>
          <a-col :span="5" class="query_item">
            <span>购买方：</span>
            <a-input/>
          </a-col>
          <a-col :span="5" class="query_item">
            <span>标的名称:</span>
            <a-input/>
          </a-col>

          <a-col :span="5" class="query_item" >
            <span>订单类型：</span>
            <a-select default-value="全部"  @change="handleChange">
              <a-select-option value="全部">
                全部
              </a-select-option>
            </a-select>
          </a-col>

          <a-col :span="5" class="query_item">
            <span>委托类型：</span>
            <a-select default-value="全部"  @change="handleChange">
              <a-select-option value="全部">
                全部
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="5" class="query_item query_item2">
            <span>创建时间：</span>
            <a-range-picker @change="onChange" />
          </a-col>
          <a-col :span="9" class="query_item query_item1">
            <a-space :size="21">
              <a-button type="primary" class="query_button">查 询</a-button>
              <a-button class="query_button">重 置</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="operation">
            <a-space :size="24">
              <span class="table_operation" @click="SelectDate()">数据查看</span>
              <span class="table_operation" @click="SelectOrder()">订单详情</span>
            </a-space>
          </template>
        </a-table>
        <a-pagination
        class="pagination"
        size="small"
        :total="total"
        v-model="current"
        :page-size="pageSize"
        :show-total="total => `第 ${current} / ${pageSize} 条 / 总共 ${total} 条`"
        :page-size-options="pageSizeOptions"
        @showSizeChange="onShowSizeChange"
        show-size-changer >
          <template slot="buildOptionText" slot-scope="props">
            <span >{{ props.value }}条/页</span>
          </template>
        </a-pagination>
      </div>
    </div>
    <dataSelect :visible.sync="visible"></dataSelect>
    <orderDetails :visible.sync="visible2"></orderDetails>
  </div>
</template>
<script>
import Operation from '../../Operation.vue'
export default {
  data() {
    return{
      visible:false,
      visible2:false,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      //一页多少条
      pageSize:10,
      total:500,
      // 当前页数
      current: 1,
      data:[
        {
          key: '1',
          name: 'John Brown',
          money: '￥300,000.00',
          address: 'New York No. 1 Lake Park',
        },
        {
          key: '2',
          name: 'Jim Green',
          money: '￥1,256,000.00',
          address: 'London No. 1 Lake Park',
        },
        {
          key: '3',
          name: 'Joe Black',
          money: '￥120,000.00',
          address: 'Sidney No. 1 Lake Park',
        },
      ],
      columns:[
        {
          title: '序号',
          className: 'table_column',
          dataIndex: 'id',
          width:'65px',
          align:'center'
        },
        {
          title: '创建时间',
          dataIndex: 'money',
          align:'center'
        },
        {
          title: '订单编号',
          dataIndex: 'name',
          align:'center'
        },
        {
          title: '委托方/收款方',
          dataIndex: '',
          align:'center'
        },
        {
          title: '标的名称',
          dataIndex: '',
          align:'center'
        },
        {
          title: '购买方/付款方',
          dataIndex: '',
          align:'center'
        },
        {
          title: '订单类型',
          dataIndex: '',
          align:'center'
        },
        {
          title: '委托类型',
          dataIndex: '',
          align:'center'
        },
        {
          title: '交易总额',
          dataIndex: '',
          align:'center'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'operation' },
          align:'center'
        },
      ]
    }
  },
  components:{
    Operation,
    dataSelect: () => import('../../dateSelect/index.vue'),
    orderDetails: () => import('../../orderDetails/index.vue'),
  },
  created(){
    console.info(this.$route)
  },
  methods:{
    SelectOrder(){
      this.visible2=true
    },
    SelectDate(){
      this.visible=true
    },
    // 切换一页显示多少条
    onShowSizeChange(current, pageSize){
      this.pageSize = pageSize;
    },
    handleChange(){

    },
    onChange(){

    }
  }
}
</script>
<style scoped>

</style>