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

<!-- 追溯中心 -->
<template>
  <div class="trace">
    <div class="search">
      <template v-if="!orderListVisible && !productListVisible">
        <div>
          <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>
    </div>

    <!-- 弹窗, 新增 / 修改 -->
    <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;
  }
  .trace {
    width: 100%;
    min-height: 711px;
    position: relative;
  }
  .search {
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top:-20px
  }
</style>