X-web/src/views/modules/trace/search.vue

<!-- 追溯中心 -->
<template>
  <div class="trace">
    <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>
    <!-- 弹窗, 新增 / 修改 -->
    <order-list v-if="orderListVisible" :defaultList="defaultOrderList" :orderCode="code" :defaultTotalPage="defaultOrderTotal" ref="orderList" @onChose="onChose"/>      
  </div>
  
</template>


<script>
import orderList from './order-list'
import { getOrderByCode, getProductById } from '@/api/trace'
export default {
  name: 'trace-search',
  components: {
    orderList
  },
  data () {
    return {
      type: '1',
      code: '',
      orderListVisible: false,
      searchloading: false,
      defaultOrderList: [],
      defaultOrderTotal: 0
    }
  },
  created () {
  },
  methods: {
    onChose () {
      this.orderListVisible = 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') {
        getProductById(this.code).then(({data}) => {
          if (data && data.code === '200') {
          }
        }).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>