订单相关

src/views/order/orderList.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="article-manager">
-    <el-card :bordered="false" shadow="never" class="ivu-mt mt16" :body-style="{ padding: '0 20px 20px' }">
-      <el-tabs v-model="page.params.orderStatus" @tab-click="onClickTab">
-        <el-tab-pane :label="item.name + '(' + item.count + ')'" :name="item.type" v-for="(item, index) in headeNum" :key="index" />
+    <el-card :bordered="false" shadow="never" class="ivu-mt mt16 " style="padding:20px !important" :body-style="{ padding: '0 20px 20px' }">
+      <el-tabs v-model="type" @tab-click="onClickTab" type="card">
+        <!-- <el-tab-pane :label="item.name + '(' + item.count + ')'" :name="item.type" v-for="(item, index) in headeNum" :key="index" /> -->
+        <el-tab-pane :label="item.name" :name="item.type" v-for="(item, index) in headeNum" :key="index" />
       </el-tabs>
       <div>
         <el-form :model="page" label-width="80px" label-position="right" inline @submit.native.prevent>
@@ -13,9 +14,22 @@
             <el-input clearable placeholder="手机号码" v-model="page.params.customerPhone" type="phone" />
           </el-form-item>
           <el-form-item label="下单时间：">
-            <el-date-picker v-model="page.params.createTime" type="date" placeholder="选择日期"> </el-date-picker>
+            <el-date-picker v-model="page.params.createTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
+          </el-form-item>
+          <el-form-item label="选择油站：">
+            <el-select
+              v-model="page.params.takeSiteId"
+              clearable
+              filterable
+              remote
+              reserve-keyword
+              placeholder="油站名称"
+              :remote-method="siteRemoteMethod"
+              @keyup.enter.native="getByPage"
+            >
+              <el-option v-for="item in siteList" :key="item.siteId" :label="item.siteName" :value="item.siteId" />
+            </el-select>
           </el-form-item>
-
           <el-form-item>
             <el-button type="primary" @click="userSearchs">查询</el-button>
           </el-form-item>
@@ -25,7 +39,6 @@
         <el-button class="export" @click="exports">导出</el-button>
       </div>
       <el-table
-        :key="id"
         :data="tableList"
         class="ivu-mt mt14"
         v-loading="loading"
@@ -47,7 +60,7 @@
         </el-table-column>
         <el-table-column label="用户账号" min-width="120" align="center">
           <template slot-scope="scope">
-            <span>{{ scope.row.customerPhone }}</span>
+            <span>{{ scope.row.acctId }}</span>
           </template>
         </el-table-column>
         <el-table-column label="订单金额" min-width="60" align="center">
@@ -89,15 +102,24 @@
           :total="page.totalCount"
         />
       </div>
+
+      <el-drawer title="详情" class="table-detail-drawer" :visible.sync="detailDialog" direction="ltr" size="70%">
+        <orderListDetail :detailData="detailData" @closeDialog="closeDialog" v-if="detailDialog" />
+      </el-drawer>
+      <el-dialog title="取消订单" :visible.sync="cancleDialog" v-el-drag-dialog width="45%">
+        <orderListCancle @getList="getList" @closeDialog="closeDialog" v-if="cancleDialog" :detailData="detailData" />
+      </el-dialog>
     </el-card>
   </div>
 </template>
 
 <script>
 import orderInfoApi from '@/api/order/orderInfo.js'
+import orderListDetail from './orderListDetail'
+import orderListCancle from './orderListCancle'
 export default {
   name: 'product_productList',
-  //   components: { expandRow, attribute, taoBao, goodsDetail, userLabel, couponList },
+  components: { orderListDetail, orderListCancle },
 
   filters: {
     orderStatus(e) {
@@ -118,7 +140,8 @@ export default {
   data() {
     return {
       template: false,
-      modals: false,
+      detailDialog: false,
+      cancleDialog: false,
       batchModal: false,
       grid: {
         xl: 6,
@@ -133,6 +156,7 @@ export default {
         params: {},
         totalCount: 0
       },
+      type: '',
       tableList: [],
       headeNum: [
         {
@@ -164,12 +188,16 @@ export default {
       goodsId: '',
       isProductBox: false,
       multipleSelection: [],
-      detail: {} //详情对象
+      detailData: {}, //详情对象
+      siteList: []
     }
   },
   created() {
+    // delete this.page.params.orderStatus
+
     this.getList()
   },
+
   activated() {},
   methods: {
     closeLabel(label) {
@@ -224,6 +252,7 @@ export default {
     // tab选择
     onClickTab(e) {
       console.log(e)
+      this.page.params.orderStatus = e.name
       this.page.currentPag = 1
       this.multipleSelection = []
       // this.$refs.table.clearSelection()
@@ -238,7 +267,14 @@ export default {
       this.page.currentPage = val
       this.getList()
     },
-
+    siteRemoteMethod(value) {
+      // 远程搜索油站
+      if (value) {
+        orderInfoApi.getIntegralSite(value).then(res => {
+          this.siteList = res.data
+        })
+      }
+    },
     // 订单列表；
     getList() {
       orderInfoApi.getByPage(this.page).then(res => {
@@ -250,16 +286,32 @@ export default {
       this.page.currentPage = 1
       this.getList()
     },
-
+    closeDialog() {
+      this.cancleDialog = false
+      this.detailDialog = false
+    },
     // 数据导出；
     exportData: function() {},
 
-    // 编辑
+    // 详情
     detail(row) {
-      // this.$router.push({ path: this.$routeProStr + '/product/add_product/' + row.id });
+      orderInfoApi.get(row.id).then(res => {
+        if ((res.code = 20000)) {
+          this.detailData = res.data
+          this.detailDialog = true
+        }
+      })
     },
     // 取消
-    cancle(row, tit, num) {}
+    cancle(row, tit, num) {
+      // orderInfoApi.get(row.id).then(res => {
+      //   if ((res.code = 20000)) {
+      this.detailData = row
+      this.cancleDialog = true
+      console.log(row)
+      // }
+      // })
+    }
   }
 }
 </script>