Vue下拉框做条件查询

今天做了个功能，大致是客户页面下是设备的名称，然后保养记录和维修记录又在设备的下一级。现在想在公司下增加选择库区查看库区下的设备，但是由于项目前期的设计问题，所以实现过程略显繁琐。

点击公司界面预览，就是进入接下来的页面

这些设备是维护在公司的下级中，现在增加了一个选择库区的按钮，原本计划在点击公司界面预览的时候弹窗选择库区，然后进入这个页面的，但是由于有的部分公司并未维护库区，所以选择了在页面里查看，增加了一个点击按钮。

思路

原理很简单，就是点击按钮的时候获取公司的ID，然后拿着公司的ID去查设备表，这样我们会获得这家公司下的所有设备

    //点击选择库区事件
    kuqubt(){
      const id =this.$route.params.cid;
      console.log("点击按钮事件："+id);//打印公司id
      this.getdevice(id);
      this.visiblekuqu=true;
    },

getdevice(id){
      deviceapi.GetCx(id).then((result)=>{
        this.devicedata = result.data;
        if(this.devicedata.length==0){
          console.log("没获取到库区数据")
        }
      });
    },

当把所有的设备数据查出来后，当然要在后台做限制条件，因为我们要的是库区的名称，所以需要个去重查询，当查询结果返回到前端的时候，我们用循环把所有的库区名称取出来。

<a-modal
      title="选择库区"
      :visible="visiblekuqu"
      @ok="kuquok"
      @cancel="kuquCancel"
      okText="确定"
    >
      <a-form
        :form="kuquform"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-form-item label="库区">
          <a-select
            showSearch
            allowClear
            optionFilterProp="children"
            placeholder="请选择选项或者查找"
            v-decorator="[
              'deviceId',
              { rules: [{ required: true, message: '请选择库区' }] },
            ]"
            @blur="jt"
          >
            <a-select-option
              v-for="item in devicedata"
              :key="item.id"
              :value="item.id"
            >
              {{ item.kuQu }}
              
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
</a-modal>

这样我们可以获取到库区的名称，但是因为库区不是单独维护的，而是作为设备的一部分，所以我们还需要写个下拉框的监听事件，虽然在页面上显示的是库区的名称，但是本质上操作的还是设备的ID，所以我们还需要监听选择的那条库区所属的设备ID，当监听到选中的ID之后，我们需要拿着这个ID再调用后台专门查询库区名称的接口，这样我们可以获取选中的库区名称。

kuquok (e){
      e.preventDefault();
      deviceapi.gettjs(this.kuquid).then((result)=>{
         this.kuquname = result.data;
         console.log("库区名称："+this.kuquname)
       });
      //console.log("库区名称："+this.kuquname)
      this.kuquform.validateFields((err,values)=>{
        if(!err){
          //const kuqu = this.kuquform.getFieldValue("KuQu");
          const kuqu =this.kuquname;
          const id = this.$route.params.cid;
          console.log("获取库区的名字："+kuqu)//获取库区的名字
          console.log(id) //打印库区，根据库区名字和公司id查询设备
          console.log("可以进来！！！")
          deviceapi.gettj(id,kuqu).then((result)=>{
             this.devdata = result.data;
             if(this.devdata.length == 0){
               console.log("没获取到数据")
             }
          });
          // this.kuqufrom.resetFields();
          // this.visiblekuqu =false;
        }
          this.kuqufrom.resetFields();
          this.visiblekuqu =false;
      });
    },

最后用公司的ID和库区的名称来作为参数，调用后台查询功能，可以成功实现功能。
后台的调试可以打断点，前端调试的话我不太喜欢使用打断点的方式，所以我选择使用Console.log来把每一步数据的变换打印出来，方便观察是哪一步出现问题，最后成功实现功能。

每天记录一点，每天进步一点！