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,35 @@
+import request from '@/utils/httpRequest'
+
+// 根据订单编码追溯
+export function getOrderByCode (params) {
+  return request({
+    url: request.adornUrl(`/biz-service/trace/orderList`),
+    method: 'get',
+    params: params
+  })
+}
+
+// 根据产品编号追溯
+export function getProductByCode (params) {
+  return request({
+    url: request.adornUrl(`/biz-service/trace/productionList`),
+    method: 'get',
+    params: params
+  })
+}
+
+// 根据订单 Id 获取订单详情
+export function getOrderDetailById (orderId) {
+  return request({
+    url: request.adornUrl(`/biz-service/trace/infoOrderCode/${orderId}`),
+    method: 'get'
+  })
+}
+
+// 根据产品 Id 获取产品详情
+export function getProdInfoById (productionId) {
+  return request({
+    url: request.adornUrl(`/biz-service/trace/infoProdProductionId/${productionId}`),
+    method: 'get'
+  })
+}

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

@@ -0,0 +1,242 @@
+<template>
+  <!-- <el-dialog
+    title="查看"
+    width="70%"
+    :close-on-click-modal="false"
+    :visible.sync="visible"> -->
+  <div>
+    <div class="my-title" v-if="!prodVisible">查看</div>
+    <div v-if="!prodVisible" 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="合同编号">{{dataForm.contractCode}}</e-desc-item>
+        <e-desc-item label="交货日期">{{dataForm.deliveryDate ? dataForm.deliveryDate.substring(0,10) : ''}}</e-desc-item>
+
+        <e-desc-item label="备注说明" span="3">{{dataForm.notes}}</e-desc-item>
+      </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="prodCode"
+            header-align="center"
+            align="center"
+            min-width="120"
+            :show-tooltip-when-overflow="true"
+            label="产品编号">
+          </el-table-column>
+          <el-table-column
+            prop="state"
+            header-align="center"
+            align="center"
+            :formatter="formatState"
+            :show-tooltip-when-overflow="true"
+            label="状态">
+          </el-table-column>
+          <el-table-column
+            prop="startTime"
+            header-align="center"
+            align="center"
+            :show-tooltip-when-overflow="true"
+            label="开始时间">
+          </el-table-column>
+          <el-table-column
+            prop="endTime"
+            header-align="center"
+            align="center"
+            :show-tooltip-when-overflow="true"
+            label="完成时间">
+          </el-table-column>
+          <el-table-column
+            fixed="right"
+            header-align="center"
+            align="center"
+            width="120"
+            label="操作">
+            <template slot-scope="scope">
+              <el-button type="text" v-if="isAuth('trace:search:prod:detail')" size="small" @click="prodDetailHandle(scope.row.id, scope.row.prodCode)">查看记录</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>
+      </e-desc>
+    </div>
+    <span class="dialog-footer">
+      <el-button @click="onChose">返回</el-button>
+    </span>
+
+    <!-- 弹窗, 新增 / 修改 -->
+    <product-detail v-if="prodVisible" ref="detail" @onChose="onChildClose"/>
+  </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 { getOrderDetailById } from '@/api/trace'
+  import uploadComponent from '../common/upload-component'
+  import ApproveComponent from '../common/approve-component'
+  import ProductDetail from './product-detail'
+  export default {
+    name: 'order-detail',
+    components: {
+      EDesc, EDescItem, uploadComponent, ApproveComponent, ProductDetail
+    },
+    data () {
+      return {
+        visible: false,
+        isFlow: false,
+        prodVisible: false,
+        id: 0,
+        dataForm: {},
+        productDetails: [],
+        stepList: [],
+        logList: [],
+        fileList: [],
+        // 状态：1：待排产，2:生产中，3:生产完成
+        optionsState: [
+          {
+            code: '1',
+            value: '待排产'
+          },
+          {
+            code: '2',
+            value: '生产中'
+          },
+          {
+            code: '3',
+            value: '生产完成'
+          }
+        ]
+      }
+    },
+    methods: {
+      onChose () {
+        this.$emit('onChose')
+      },
+      onChildClose () {
+        this.prodVisible = false
+      },
+      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) {
+        getOrderDetailById(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.prodProductionList) {
+              this.productDetails = data.data.prodProductionList
+            }
+            // 初始化审批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')
+      },
+      // 格式化产品状态
+      formatState (row) {
+        if (!row.state) return ''
+        const item1 = this.optionsState.find((item) => item.code === row.state.toString())
+        return item1 ? item1.value : ''
+      },
+      // 查看产品记录
+      prodDetailHandle (productdId, prodCode) {
+        this.prodVisible = true
+        this.$nextTick(() => {
+          this.$refs.detail.init(productdId, prodCode)
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+.my-line{
+  border-bottom: 1px solid #c0c4cc;
+  margin-bottom: 10px;
+}
+.title{
+  padding: 10px 0 ;
+}
+</style>

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

@@ -0,0 +1,234 @@
+<!-- 订单 -->
+<template>
+  <div class="order-list" >
+    <div class="my-title" v-if="!detailVisible">订单追溯</div>
+    <div v-show="!detailVisible">
+      <template>
+      <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 type="text" v-if="isAuth('trace:search:order:detail')" 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="onChildClose"/>
+  </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,
+        default: ''
+      },
+      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')
+      },
+      onChildClose () {
+        this.detailVisible = false
+      },
+      // 查询
+      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/product-detail.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="production">
+    <!-- <el-dialog
+      title="生产监控详情"
+      width="70%"
+      :close-on-click-modal="false"
+      :visible.sync="visible"
+      @close="handleClose"
+    > -->
+      <div class="my-title">生产详情</div>
+      <el-form
+        :model="dataForm"
+        :rules="dataRule"
+        ref="dataForm"
+        label-width="auto"
+      >
+        <el-row class="my-row">
+          <el-col :span="8">
+            <el-form-item label="产品编号：">
+              <el-input v-model="dataForm.prodCode" disabled></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row
+          class="my-row"
+          style="height: 350px; background-color: #efefef;"
+        >
+          <work-flow
+            ref="workFlow"
+            :nodeData="workFlowData"
+            :selectOperator="true"
+            :disabled="true"
+          ></work-flow>
+        </el-row>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="onChose">返回</el-button>
+      </span>
+    <!-- </el-dialog> -->
+  </div>
+</template>
+
+<script>
+import { getProdInfoById } from '@/api/trace'
+import WorkFlow from '@/components/work-flow/home'
+export default {
+  name: 'product-detail',
+  components: {
+    WorkFlow
+  },
+  data () {
+    return {
+      mouldId: '',
+      visible: false,
+      dataForm: {},
+      operatorList: [],
+      operatorIds: [],
+      productList: [],
+      display: false,
+      workFlowData: {
+        nodeList: [],
+        lineList: []
+      },
+      // 是否点击了流程图保存按钮
+      clickFlowSave: false,
+      datas: {},
+      dataRule: {
+        mouldName: [
+          { required: true, message: '请输入模板名称', trigger: 'blur' }
+        ]
+      },
+      dataRule1: {
+        operatorIds: [
+          { required: true, message: '操作人员不能为空', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.visible = true
+  },
+  methods: {
+    onChose () {
+      this.$emit('onChose')
+    },
+    // 初始化表单
+    async init (id, prodCode, disable) {
+      console.log(prodCode)
+      this.visible = true
+      this.display = disable
+      this.nodeList = []
+      this.linkList = []
+      this.mouldId = id
+      this.dataForm.prodCode = prodCode
+
+      await getProdInfoById(id).then(async ({ data }) => {
+        if (data && data.code === '200') {
+          this.dataForm = {
+            ...this.dataForm
+          }
+          // 流程图展示
+          this.workFlowData = {
+            nodeList: data.data.nodeList,
+            lineList: data.data.lineList
+          }
+        }
+      })
+    },
+    handleClose () {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/deep/ .my-row .super-flow__node {
+  width: 180px;
+  height: 80px;
+}
+</style>

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

@@ -0,0 +1,206 @@
+<!-- 产品追溯列表 -->
+<template>
+  <div class="product-list">
+    <div class="my-title" v-if="!detailsVisible">产品追溯</div>
+    <template v-if="!detailsVisible">
+      <el-table
+        :data="dataList"
+        border
+        v-loading="dataListLoading"
+        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="prodCode"
+          header-align="center"
+          align="center"
+          min-width="100"
+          :show-tooltip-when-overflow="true"
+          label="产品编号">
+        </el-table-column>
+        <el-table-column
+          prop="orderCode"
+          header-align="center"
+          align="center"
+          min-width="140"
+          :show-tooltip-when-overflow="true"
+          label="订单编号">
+        </el-table-column>
+        <el-table-column
+          prop="customerName"
+          header-align="center"
+          align="center"
+          min-width="160"
+          :show-tooltip-when-overflow="true"
+          label="客户名称">
+        </el-table-column>
+        <el-table-column
+          prop="state"
+          header-align="center"
+          align="center"
+          label="状态">
+          <template slot-scope="scope">
+            <span>{{scope.row.state?optionsState[Number(scope.row.state) - 3].value:''}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="150"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button v-if="isAuth('trace:search:prod:detail')" type="text" size="small" @click="detail(scope.row.id, scope.row.prodCode, true)">查看</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>
+    <!-- 弹窗, 查看 -->
+    <detail v-if="detailsVisible" ref="details" @onChose="onChildClose"/>
+  </div>
+</template>
+
+<script>
+  import Detail from './product-detail'
+  import { getProductByCode } from '@/api/trace'
+  export default {
+    name: 'product-list',
+    components: {Detail},
+    props: {
+      // 默认第一页的数据
+      defaultList: {
+        type: Array,
+        default: []
+      },
+      // 订单编码
+      productCode: {
+        type: String,
+        default: ''
+      },
+      defaultTotalPage: {
+        type: [Number, String],
+        default: 0
+      }
+    },
+    data () {
+      return {
+        detailsVisible: false,
+        dataForm: {},
+        dataList: this.defaultList,
+        pageIndex: 1,
+        pageSize: 10,
+        totalPage: Number(this.defaultTotalPage),
+        dataListLoading: false,
+        dataListSelections: [],
+        // 状态：1：待排产，2:生产中，3:生产完成
+        optionsState: [
+          {
+            code: '1',
+            value: '待排产'
+          },
+          {
+            code: '2',
+            value: '生产中'
+          },
+          {
+            code: '3',
+            value: '生产完成'
+          }
+        ]
+      }
+    },
+    created () {
+    },
+    methods: {
+      onChose () {
+        this.$emit('onChose')
+      },
+      onChildClose () {
+        this.detailsVisible = false
+      },
+      // 查询
+      queryPage () {
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      // 获取数据列表
+      getDataList () {
+        this.dataListLoading = true
+        let params = {
+          'current': this.pageIndex,
+          'size': this.pageSize,
+          'prodCode': this.productCode
+        }
+        getProductByCode(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
+          }
+          console.log('monitor')
+          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
+      },
+      // 新增 / 修改
+      detail (id, prodCode, disable) {
+        this.detailsVisible = true
+        this.$nextTick(() => {
+          this.$refs.details.init(id, prodCode, disable)
+        })
+      },
+      // 创建新产品
+      createNewProduct () {
+        this.$message.warning('功能暂未开放')
+      },
+      closeDialogEvent () {
+        this.detailsVisible = false
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
+

src/views/modules/trace/search.vue

@@ -0,0 +1,120 @@
+<!-- 追溯中心 -->
+<template>
+  <div class="trace">
+    <template v-if="!orderListVisible && !productListVisible">
+      <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>
+    <!-- 弹窗, 新增 / 修改 -->
+    <order-list v-if="orderListVisible" :defaultList="defaultOrderList" :orderCode="code" :defaultTotalPage="defaultOrderTotal" ref="orderList" @onChose="onChose"/>      
+    <product-list v-if="productListVisible" :defaultList="defaultProductList" :productCode="code" :defaultTotalPage="defaultProductTotal" ref="productList" @onChose="onChose"></product-list>
+  </div>
+  
+</template>
+
+
+<script>
+import orderList from './order-list'
+import ProductList from './product-list'
+import { getOrderByCode, getProductByCode } from '@/api/trace'
+export default {
+  name: 'trace-search',
+  components: {
+    orderList,
+    ProductList
+  },
+  data () {
+    return {
+      type: '1',
+      code: '',
+      orderListVisible: false,
+      productListVisible: false,
+      searchloading: false,
+      defaultOrderList: [],
+      defaultOrderTotal: 0
+    }
+  },
+  created () {
+  },
+  methods: {
+    onChose () {
+      this.orderListVisible = false
+      this.productListVisible = false
+    },
+    search () {
+      if (this.code === '') {
+        this.$message.error('请输入订单/产品编码')
+        return
+      }
+      this.searchloading = true
+      let that = this
+      // 订单追溯
+      if (this.type === '1') {
+        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') { // 产品追溯
+        let params = {
+          'prodCode': this.code
+        }
+        console.log(params)
+        getProductByCode(params).then(({data}) => {
+          console.log(data)
+          if (data && data.code === '200' && data.data) {
+            this.defaultProductList = data.data.records
+            this.defaultProductTotal = data.data.total
+            this.productListVisible = true
+          } else {
+            that.$message.error(data.msg)
+          }
+        }).then(() => {
+          this.searchloading = false
+        })
+      }
+    },
+    // 详情
+    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>