关联查询

未分类

始发站 目的站(无需要反写项)

// 引入查询城市接口(接口统一放到service/index.js方便管理维护)
import {
    searchCity, 
    searchProduct,
} from "../../service"

模板

// 始发站
<el-form-item label="始发站" class="grid-content" prop="departure">
  <el-select size="mini" 
    filterable 
    remote 
    default-first-option                   
    allow-create placeholder=""
    v-model="detailInfo.departure"
    :remote-method="getDepartures"
    :loading="loading">
    <el-option
      v-for="item in departures" // 根据departures数据展示下拉框显示项
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</el-form-item>
// 目的站
<el-form-item label="目的站" class="grid-content" prop="destination">
  <el-select size="mini" 
    filterable 
    remote 
    default-first-option                   
    allow-create placeholder=""
    v-model="detailInfo.destination"
    :remote-method="getDestination"
    :loading="loading">
    <el-option
      v-for="item in destinations"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</el-form-item>

交互

methods: {
  getCity(query) {  // 获取城市
    if(query !== '') { // 查询前显示loading
      this.loading = true
    }
    return searchCity({code: query}).then(res => {
      if(res.data.status === 200) {
        this.loading = false // 查询出后隐藏loading
        return res.data.data.map(item => {
          // label为下拉框显示项,value为显示项对应值
          return {value: item.cn_name, label: item.cn_name}
        })
      }
    })
  },
  getDepartures(query) { // 获取始发站
    this.getCity(query).then(res => {
      this.departures = res
    })
  },
  getDestination(query) { // 获取目的站
    this.getCity(query).then(res => {
      this.destinations = res
    })
  }
}

品名(存在需要反写项)

methods: {
  getProduct(query) {
    if(query !== '') {
      this.loading = true
    }
    return searchProduct({code: query}).then(res => {
      if(res.data.status === 200) {
        this.loading = false
        return res.data.data
      }
    })
  },
  renderProduct(query) {
    this.getProduct(query).then(res => {
      this.products = res.map(item => {
        return {value: item.name, label: item.name}
      })
    })
  },
  fillProductAbout(query) { // 填充反写项
    this.getProduct(query).then(res => {
      if(Array.isArray(res)) {
        let o = res[0]
        if(o) {
          this.detailInfo.product_category = o.start_product_category
          this.detailInfo.packaging = o.pkg
          this.$refs['your_category'].focus()
        }
      }
    })
  }
}

无反写项时参考始发站、目的站，有反写项时参考品名
具体代码参考 src ->pages ->receive ->detail