追溯中心

config/index.js

@@ -23,7 +23,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8001, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,

src/api/trace.js

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

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

@@ -0,0 +1,213 @@
+<template>
+  <!-- <el-dialog
+    title="查看"
+    width="70%"
+    :close-on-click-modal="false"
+    :visible.sync="visible"> -->
+  <div>
+    <div class="my-title">查看</div>
+    <div style="margin-left: 20px;margin-right: 20px">
+      <!-- 工作流 -->
+      <div v-show="dataForm.workFlowBusinessExt">
+        <el-steps :active="dataForm.workFlowBusinessExt&&dataForm.workFlowBusinessExt.workFlowProcessStepList?dataForm.workFlowBusinessExt.workFlowProcessStepList.length + 2:0" align-center style="margin-bottom: 20px">
+          <template v-for="(item, i) in stepList">
+            <el-step :icon="item.icon" :title="item.title" :description="item.description"></el-step>
+          </template>
+        </el-steps>
+        <el-collapse style="margin-bottom: 20px">
+          <el-collapse-item>
+            <template slot="title">
+              <span style="color: red">审批日志（展开查看更多）：</span>
+            </template>
+            <template v-for="(item, i) in logList">
+              <div>{{++i}}：{{item.approverName}}  {{item.createTime}}  {{item.approvalValue}}</div>
+            </template>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+      <div v-show="isFlow">
+        <approve-component ref="approve" @approveFinished="approveFinished"/>
+      </div>
+      <e-desc title="基本信息" column="3">
+        <e-desc-item label="公司订单编码">{{dataForm.orderCode}}</e-desc-item>
+        <e-desc-item label="客户订单编码">{{dataForm.cusOrderCode}}</e-desc-item>
+        <e-desc-item label="客户名称">{{dataForm.customerName}}</e-desc-item>
+
+        <e-desc-item label="业务员">{{dataForm.salesmanName}}</e-desc-item>
+        <e-desc-item label="合同交期" span="2">{{dataForm.contactDate?dataForm.contactDate.substring(0,10):''}}</e-desc-item>
+
+        <e-desc-item label="备注说明" span="3">{{dataForm.notes}}</e-desc-item>
+      </e-desc>
+      <e-desc title="合同扫描件">
+        <upload-component :display="true" :display-title="false" :accept="'*'" :file-obj-list="fileList"/>
+      </e-desc>
+      <e-desc title="订单产品明细">
+        <el-table
+          :data="productDetails"
+          border
+          style="width: 100%;">
+          <el-table-column
+            label="序号"
+            type="index"
+            width="50"
+            align="center">
+          </el-table-column>
+          <el-table-column
+            prop="productName"
+            header-align="center"
+            align="center"
+            min-width="140"
+            :show-tooltip-when-overflow="true"
+            label="产品名称">
+          </el-table-column>
+          <el-table-column
+            prop="cnt"
+            header-align="center"
+            align="center"
+            width="80"
+            label="数量">
+          </el-table-column>
+          <el-table-column
+            prop="productNumber"
+            header-align="center"
+            align="center"
+            min-width="120"
+            :show-tooltip-when-overflow="true"
+            label="订单编号">
+          </el-table-column>
+          <el-table-column
+            prop="price"
+            header-align="center"
+            align="center"
+            label="含税单价">
+          </el-table-column>
+          <el-table-column
+            prop="amount"
+            header-align="center"
+            align="center"
+            width="80"
+            label="含税总价">
+            <template slot-scope="scope">
+              <span>{{ (scope.row.cnt*scope.row.price).toFixed(2) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="rate"
+            header-align="center"
+            align="center"
+            label="税率">
+            <template slot-scope="scope">
+              <span>{{scope.row.rate?(Number(scope.row.rate * 100)).toFixed(0):''}}</span>%
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="notes"
+            header-align="center"
+            align="center"
+            width="120"
+            :show-overflow-tooltip="true"
+            label="备注">
+          </el-table-column>
+        </el-table>
+      </e-desc>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="onChose">返回</el-button>
+    </span>
+  </div>
+  <!-- </el-dialog> -->
+</template>
+
+<script>
+  import EDesc from '../common/e-desc'
+  import EDescItem from '../common/e-desc-item'
+  import { dealStepData, dealStepLogs } from '@/api/util'
+  import { getOrderDetail } from '@/api/sale'
+  import uploadComponent from '../common/upload-component'
+  import ApproveComponent from '../common/approve-component'
+  export default {
+    name: 'order-detail',
+    components: {
+      EDesc, EDescItem, uploadComponent, ApproveComponent
+    },
+    data () {
+      return {
+        visible: false,
+        isFlow: false,
+        id: 0,
+        dataForm: {},
+        productDetails: [],
+        stepList: [],
+        logList: [],
+        fileList: []
+      }
+    },
+    methods: {
+      onChose () {
+        this.$emit('onChose')
+      },
+      async init (id, businessType) {
+        this.visible = true
+        this.isFlow = !!(businessType && businessType !== '')
+        this.id = id || 0
+        this.dataForm = {
+          workFlowBusinessExt: null
+        }
+        this.productDetails = []
+        this.stepList = []
+        this.logList = []
+        this.fileList = []
+        this.getDetails(businessType)
+      },
+      getDetails (businessType) {
+        getOrderDetail(this.id).then(({data}) => {
+          if (data && data.code === '200') {
+            this.dataForm = data.data
+            // 流程图展示
+            dealStepData(data.data.workFlowBusinessExt.workFlowProcessStepList, this.stepList)
+            dealStepLogs(data.data.workFlowBusinessExt.processLogList, this.logList)
+            // 附件
+            if (data.data.attachList) {
+              data.data.attachList.forEach((item) => {
+                this.fileList.push({
+                  name: item.fileName,
+                  url: item.url,
+                  id: item.url
+                })
+              })
+            }
+            // 订单产品明细
+            if (data.data.saleROrderProductList) {
+              this.productDetails = data.data.saleROrderProductList
+            }
+            // 初始化审批Form
+            this.showApproveForm(businessType, this.id)
+          }
+        })
+      },
+      // 初始化审批Form
+      showApproveForm (businessType, businessId) {
+        if (this.isFlow) {
+          this.$nextTick(() => {
+            this.$refs.approve.init(businessType, businessId)
+          })
+        }
+      },
+      // 审批完成
+      approveFinished () {
+        this.onChose()
+        this.$emit('approveFinished')
+      }
+    }
+  }
+</script>
+
+<style scoped>
+.my-line{
+  border-bottom: 1px solid #c0c4cc;
+  margin-bottom: 10px;
+}
+.title{
+  padding: 10px 0 ;
+}
+</style>

src/views/modules/trace/search.vue

@@ -0,0 +1,82 @@
+<!-- 追溯中心 -->
+<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>
+    <!-- 弹窗, 新增 / 修改 -->
+    <detail v-if="detailVisible" ref="detail" @onChose="onChose"/>      
+  </div>
+  
+</template>
+
+
+<script>
+import Detail from './order-detail'
+import { getOrderByCode, getProductById } from '@/api/trace'
+export default {
+  name: 'trace-search',
+  components: {
+    Detail
+  },
+  data () {
+    return {
+      type: '1',
+      code: '',
+      detailVisible: false
+    }
+  },
+  created () {
+  },
+  methods: {
+    onChose () {
+      this.detailVisible = false
+    },
+    search () {
+      if (this.type === '1') {
+        getOrderByCode(this.code).then(({data}) => {
+          console.log(data)
+          if (data && data.code === '200') {
+            console.log(data)
+          }
+        })
+      } else if (this.type === '2') {
+        getProductById(this.code).then(({data}) => {
+          if (data && data.code === '200') {
+            console.log(data)
+          }
+        })
+      }
+    },
+    // 详情
+    detailHandle (id) {
+      this.detailVisible = true
+      this.$nextTick(() => {
+        this.$refs.detail.init(id)
+      })
+    }
+  },
+  computed: {
+    codePlaceHoler () {
+      return this.type === '1'
+        ? '请输入订单编码'
+        : '请输入产品编号'
+    }
+  }
+}
+</script>
+
+<style>
+  .el-select .el-input {
+    width: 130px;
+  }
+  .input-with-select .el-input-group__prepend {
+    background-color: #fff;
+  }
+</style>