一件代发

+<template>
+  <layout-body>
+    <layout-filter ref="filter" :model="query">
+      <filter-item label="订单号">
+        <Input v-model.trim="query.orderCode" :maxlength="11" />
+      </filter-item>
+      <filter-item label="SKN">
+        <Input v-model.trim="query.productSkn" :maxlength="9" />
+      </filter-item>
+      <filter-item label="SKU">
+        <Input v-model.trim="query.productSku" :maxlength="9" />
+      </filter-item>
+      <filter-item label="收货人">
+        <Input v-model.trim="query.userName" />
+      </filter-item>
+      <filter-item label="买家昵称">
+        <Input v-model.trim="query.nickName" />
+      </filter-item>
+      <filter-item label="商品名称">
+        <Input v-model.trim="query.prodName" />
+      </filter-item>
+      <filter-item label="订单状态">
+        <Select v-model.trim="query.orderStatusStr" clearable>
+          <Option v-for="option in orderStatusArr" :key="option.id" :value="option.id">
+            {{ option.name }}
+          </Option>
+        </Select>
+      </filter-item>
+      <filter-item>
+        <Button type="primary" @click="search">筛选</Button>
+        <Button @click="reset">清空条件</Button>
+        <Button type="primary" @click="exportExcel">导出</Button>
+      </filter-item>
+    </layout-filter>
+    <layout-list>
+      <list-tabs @change-tabs="onChangeTabs"></list-tabs>
+      <data-table :table-cols="tableCols" :table-data="tableData"></data-table>
+      <Page :total="pageData.total" :current="pageData.current" :page-size="20" show-total @on-change="pageChange">
+      </Page>
+    </layout-list>
+  </layout-body>
+</template>
+
+<script>
+import { ListTabs, DataTable } from './components';
+import OrderService from 'services/order/order-service';
+import _ from 'lodash';
+export default {
+  components: { ListTabs, DataTable },
+  data() {
+    return {
+      query: {
+        orderCode: '',
+        productSkn: '',
+        productSku: '',
+        prodName: '',
+        nickName: '',
+        userName: '',
+        orderStatus: '',
+        pageSize: 20,
+        pageNo: 1,
+        orderStatusStr: '',
+        queryType: 1,
+      },
+      orderStatusArr: [
+        { id: 1, name: 'a' },
+        { id: 2, name: 'b' },
+        { id: 3, name: 'c' },
+      ],
+      pageData: {
+        total: 100,
+        current: 1,
+      },
+      tableData: [
+        {
+          orderCode: '11111',
+          parentOrderCode: '1111-22222',
+          createTime: '2020-04-08 12:39:39',
+          buyerNickeName: '小乌贼',
+          receiver: '收货人',
+          paymentStatus: '支付状态',
+          orderStatus: '订单状态',
+          realAmount: '实收金额',
+          orderGoods: [
+            {
+              imageUrl: 'fdsafdsa', //商品图片
+              prodcutName: 'Converse RENEW工装大衣', //商品名称
+              prodcutCode: '10019501-A01',
+              sizeName: 'M', // 尺码名称
+              colorName: '黑', // 颜色名称
+              price: '¥120.00', //单价
+              buyNums: '2', //购买数量
+              productSkn: '34556778', // 商品skn
+              productSku: '34556778', // 商品sku
+            },
+            {
+              imageUrl: 'fdsafdsa', //商品图片
+              prodcutName: 'Converse RENEW工装大衣', //商品名称
+              prodcutCode: '10019501-A01',
+              sizeName: 'M', // 尺码名称
+              colorName: '黑', // 颜色名称
+              price: '¥120.00', //单价
+              buyNums: '2', //购买数量
+              productSkn: '34556778', // 商品skn
+              productSku: '34556778', // 商品sku
+            },
+            {
+              imageUrl: 'fdsafdsa', //商品图片
+              prodcutName: 'Converse RENEW工装大衣', //商品名称
+              prodcutCode: '10019501-A01',
+              sizeName: 'M', // 尺码名称
+              colorName: '黑', // 颜色名称
+              price: '¥120.00', //单价
+              buyNums: '2', //购买数量
+              productSkn: '34556778', // 商品skn
+              productSku: '34556778', // 商品sku
+            },
+          ],
+        },
+        {
+          orderCode: '2222222',
+          parentOrderCode: '1111-22222',
+          createTime: '2020-04-08 12:39:39',
+          buyerNickeName: '小乌贼',
+          receiver: '收货人',
+          paymentStatus: '支付状态',
+          orderStatus: '订单状态',
+          realAmount: '实收金额',
+          orderGoods: [
+            {
+              imageUrl: 'fdsafdsa', //商品图片
+              prodcutName: 'Converse RENEW工装大衣', //商品名称
+              prodcutCode: '10019501-A01',
+              sizeName: 'M', // 尺码名称
+              colorName: '黑', // 颜色名称
+              price: '¥120.00', //单价
+              buyNums: '2', //购买数量
+              productSkn: '34556778', // 商品skn
+              productSku: '34556778', // 商品sku
+            },
+          ],
+        },
+      ],
+      tableCols: [
+        { title: '图片', width: '8%' },
+        { title: '商品信息', width: '20%' },
+        { title: '单价', width: '8%' },
+        { title: '数量', width: '5%' },
+        { title: 'SKN', width: '5%' },
+        { title: 'SKU', width: '5%' },
+        { title: '买家昵称', width: '5%' },
+        { title: '收货人', width: '5%' },
+        { title: '支付状态', width: '5%' },
+        { title: '实收金额', width: '5%' },
+        { title: '订单状态', width: '5%' },
+        { title: '操作', width: '10%' },
+      ],
+    };
+  },
+  created() {
+    this.orderService = new OrderService();
+  },
+  methods: {
+    onChangeTabs(type) {
+      this.query.queryType = +type;
+      this.reset();
+    },
+    search() {
+      this.orderService.orderList(this.query).then(ret => {
+        this.tableData = _.get(ret, 'data.records', []);
+        this.pageData.total = _.get(ret, 'data.totalCount', 0);
+        this.pageData.pageNo = _.get(ret, 'data.pageNo', 1);
+      });
+    },
+    pageChange(page) {
+      this.pageData.current = page;
+      this.query.pageNo = page;
+      this.search();
+    },
+    reset() {
+      this.query.orderCode = '';
+      this.query.productSkn = '';
+      this.query.productSku = '';
+      this.query.prodName = '';
+      this.query.nickName = '';
+      this.query.userName = '';
+      this.query.orderStatus = 0;
+      this.query.pageSize = 20;
+      this.query.pageNo = 1;
+      this.query.orderStatusStr = '';
+      this.search();
+    },
+    exportExcel() {},
+  },
+};
+</script>
+
+<style lang="scss">
+table.order-table {
+  width: 100%;
+  height: auto;
+  thead {
+    background: #000000;
+    th {
+      padding: 8px 0;
+      border: 1px solid #cccccc;
+      color: #ffffff;
+      text-align: center;
+    }
+  }
+  tbody {
+    tr {
+      height: 35px;
+      td {
+        border: 1px solid #cccccc;
+        border-top: none;
+        border-right: none;
+        text-align: center;
+        padding: 5px;
+        span {
+          margin-left: 10px;
+          margin-right: 20px;
+        }
+      }
+      td:last-child {
+        border-right: 1px solid #cccccc;
+      }
+    }
+  }
+}
+</style>