订单追溯展示页

src/api/trace.js

@@ -1,17 +1,18 @@
 import request from '@/utils/httpRequest'
 
 // 根据订单编码追溯
-export function getOrderByCode (orderCode) {
+export function getOrderByCode (params) {
   return request({
-    url: request.adornUrl(`/trace/infoOrderCode/${orderCode}`),
-    method: 'get'
+    url: request.adornUrl(`/biz-service/trace/orderList`),
+    method: 'get',
+    params: params
   })
 }
 
 // 根据产品编号追溯
 export function getProductById (productId) {
   return request({
-    url: request.adornUrl(`/trace/infoProdCode/${productId}`),
+    url: request.adornUrl(`/biz-service/trace/infoProdCode/${productId}`),
     method: 'get'
   })
 }

src/views/modules/trace/order-list.vue

@@ -0,0 +1,231 @@
+<!-- 订单 -->
+<template>
+  <div class="order-list">
+    <div class="my-title">订单追溯</div>
+    <div>
+      <template v-if="!detailVisible">
+      <el-table
+        :data="dataList"
+        border
+        v-loading="dataListLoading"
+        @selection-change="selectionChangeHandle"
+        style="width: 100%;">
+        <el-table-column
+          label="序号"
+          type="index"
+          width="50"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="orderCode"
+          header-align="center"
+          align="center"
+          min-width="180"
+          :show-tooltip-when-overflow="true"
+          label="订单编码">
+        </el-table-column>
+        <el-table-column
+          prop="customerName"
+          header-align="center"
+          align="center"
+          min-width="180"
+          :show-overflow-tooltip="true"
+          label="客户名称">
+        </el-table-column>
+        <el-table-column
+          prop="cusOrderCode"
+          header-align="center"
+          align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
+          label="客户订单编号">
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          header-align="center"
+          align="center"
+          min-width="160"
+          label="下单时间">
+        </el-table-column>
+        <el-table-column
+          prop="contactDate"
+          header-align="center"
+          align="center"
+          min-width="160"
+          label="合同交期">
+        </el-table-column>
+        <!-- <el-table-column
+          prop="-"
+          header-align="center"
+          align="center"
+          :formatter="formatState"
+          label="审批状态">
+        </el-table-column> -->
+        <el-table-column
+          prop="-"
+          header-align="center"
+          align="center"
+          :formatter="formatOrderState"
+          label="当前状态">
+        </el-table-column>
+        <el-table-column
+          prop="notes"
+          header-align="center"
+          align="center"
+          min-width="180"
+          :show-overflow-tooltip="true"
+          label="备注">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="120"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button v-if="isAuth('order:ctl:info')" type="text" size="small" @click="detailHandle(scope.row.orderId)">查看</el-button>
+<!--            <el-button v-if="isAuth('order:ctl:deliver') && Number(scope.row.orderState) === 3" type="text" size="small" @click="deliverHandle(scope.row.orderId)">发货</el-button>-->
+<!--            <el-button v-if="isAuth('order:ctl:arrived') && Number(scope.row.orderState) === 4 " type="text" size="small" @click="arrivedHandle(scope.row)">送达</el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        @size-change="sizeChangeHandle"
+        @current-change="currentChangeHandle"
+        :current-page="pageIndex"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="totalPage"
+        layout="total, sizes, prev, pager, next, jumper">
+      </el-pagination>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="onChose">返回</el-button>
+      </span>
+    </template>
+    </div>
+    
+    <!-- 弹窗, 新增 / 修改 -->
+    <detail v-if="detailVisible" ref="detail" @onChose="onChose"/>
+  </div>
+</template>
+
+<script>
+  import Detail from './order-detail'
+  import { getOrderByCode } from '@/api/trace'
+  export default {
+    name: 'order-list',
+    components: {
+      Detail
+    },
+    props: {
+      // 默认第一页的数据
+      defaultList: {
+        type: Array,
+        default: []
+      },
+      // 订单编码
+      orderCode: {
+        type: String,
+        required: true
+      },
+      defaultTotalPage: {
+        type: [Number, String],
+        default: 0
+      }
+    },
+    created () {
+    },
+    data () {
+      return {
+        detailVisible: false,
+        arrivedVisible: false,
+        dataList: this.defaultList,
+        pageIndex: 1,
+        pageSize: 10,
+        totalPage: Number(this.defaultTotalPage),
+        dataListLoading: false,
+        dataListSelections: [],
+        optionsOrderState: [
+          {
+            code: '1', value: '未开始'
+          },
+          {
+            code: '2', value: '进行中'
+          },
+          {
+            code: '3', value: '已完成'
+          },
+          {
+            code: '4', value: '已发货'
+          },
+          {
+            code: '5', value: '已送达'
+          }
+        ],
+        optionsCustomer: []
+      }
+    },
+    methods: {
+      onChose () {
+        this.$emit('onChose')
+      },
+      // 查询
+      queryData () {
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      // 获取数据列表
+      getDataList () {
+        this.dataListLoading = true
+        let params = {
+          'current': this.pageIndex,
+          'size': this.pageSize,
+          'orderCode': this.orderCode
+        }
+        console.log(params)
+        getOrderByCode(params).then(({data}) => {
+          if (data && data.code === '200') {
+            this.dataList = data.data.records
+            this.totalPage = Number(data.data.total)
+          } else {
+            this.dataList = []
+            this.totalPage = 0
+          }
+          this.dataListLoading = false
+        })
+      },
+      // 每页数
+      sizeChangeHandle (val) {
+        this.pageSize = val
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      // 当前页
+      currentChangeHandle (val) {
+        this.pageIndex = val
+        this.getDataList()
+      },
+      // 多选
+      selectionChangeHandle (val) {
+        this.dataListSelections = val
+      },
+      // 转换属性“订单状态”
+      formatOrderState (row) {
+        if (!row.orderState) return ''
+        const item1 = this.optionsOrderState.find((item) => item.code === row.orderState.toString())
+        return item1 ? item1.value : ''
+      },
+      // 详情
+      detailHandle (id) {
+        this.detailVisible = true
+        this.$nextTick(() => {
+          this.$refs.detail.init(id)
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/modules/trace/search.vue

@@ -1,56 +1,78 @@
 <!-- 追溯中心 -->
 <template>
   <div class="trace">
-    <div style="margin-top: 15px;">
-      <el-input :placeholder="codePlaceHoler" v-model="code" class="input-with-select">
-        <el-select v-model="type" slot="prepend" placeholder="请选择">
-          <el-option label="订单" value="1"></el-option>
-          <el-option label="产品" value="2"></el-option>
-        </el-select>
-        <el-button slot="append" type="primary" @click="search()">追溯</el-button>
-      </el-input>
-    </div>
+    <template v-if="!orderListVisible">
+      <div style="margin-top: 15px;">
+        <el-input :placeholder="codePlaceHoler" v-model.trim="code" class="input-with-select">
+          <el-select v-model="type" slot="prepend" placeholder="请选择">
+            <el-option label="订单" value="1"></el-option>
+            <el-option label="产品" value="2"></el-option>
+          </el-select>
+          <el-button slot="append" type="primary" ref="searchBtn" :loading="searchloading" @click="search()">追溯</el-button>
+        </el-input>
+      </div>
+    </template>
     <!-- 弹窗, 新增 / 修改 -->
-    <detail v-if="detailVisible" ref="detail" @onChose="onChose"/>      
+    <order-list v-if="orderListVisible" :defaultList="defaultOrderList" :orderCode="code" :defaultTotalPage="defaultOrderTotal" ref="orderList" @onChose="onChose"/>      
   </div>
   
 </template>
 
 
 <script>
-import Detail from './order-detail'
+import orderList from './order-list'
 import { getOrderByCode, getProductById } from '@/api/trace'
 export default {
   name: 'trace-search',
   components: {
-    Detail
+    orderList
   },
   data () {
     return {
       type: '1',
       code: '',
-      detailVisible: false
+      orderListVisible: false,
+      searchloading: false,
+      defaultOrderList: [],
+      defaultOrderTotal: 0
     }
   },
   created () {
   },
   methods: {
     onChose () {
-      this.detailVisible = false
+      this.orderListVisible = false
     },
     search () {
+      if (this.code === '') {
+        this.$message.error('请输入订单/产品编码')
+        return
+      }
+      this.searchloading = true
+      let that = this
       if (this.type === '1') {
-        getOrderByCode(this.code).then(({data}) => {
-          console.log(data)
-          if (data && data.code === '200') {
+        let params = {orderCode: this.code}
+        getOrderByCode(params).then(({data}) => {
+          if (data && data.code === '200' && data.data) {
             console.log(data)
+            this.defaultOrderList = data.data.records
+            this.defaultOrderTotal = data.data.total
+            this.orderListVisible = true
+          } else {
+            that.$message.error(data.msg)
           }
+        }).catch(function (error) {
+          console.log(error.response.data)
+          that.$message.error('未找到任何数据')
+        }).then(() => {
+          this.searchloading = false
         })
       } else if (this.type === '2') {
         getProductById(this.code).then(({data}) => {
           if (data && data.code === '200') {
-            console.log(data)
           }
+        }).then(() => {
+          this.searchloading = false
         })
       }
     },