performance-test/src/views/ledger/componentBJ/zhuzhou copy.vue

<template>
  <div>
    <div class="message">
      <div class="message-DIV">
        <p>润滑油品牌：</p>
        <el-select
          clearable
          v-model="lubricantBrand"
          placeholder="请选择"
          @change="linkage"
        >
          <el-option
            v-for="item in lubricatingPPoptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option
        ></el-select>
      </div>
      <div class="message-DIV">
        <p>润滑油型号：</p>
        <el-select
          clearable
          :disabled="!lubricantBrand"
          v-model="lubricantModel"
          placeholder="请选择"
        >
          <el-option
            v-for="item in lubricatingXXoptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option
        ></el-select>
      </div>
      <div class="message-DIV">
        <p>前轴承品牌：</p>
        <el-select
          clearable
          @change="ZQqian"
          v-model="frontPingPaiValue"
          placeholder="请选择"
        >
          <el-option
            v-for="item in bearingPPoptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option
        ></el-select>
      </div>
      <div class="message-DIV">
        <p>前轴承型号：</p>
        <el-select
          clearable
          filterable
          :disabled="!frontPingPaiValue"
          v-model="frontBearingModel"
          placeholder="请选择"
        >
          <el-option
            v-for="item in bearingXXoptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option
        ></el-select>
      </div>
      <div class="message-DIV">
        <p>后轴承品牌：</p>
        <el-select
          clearable
          @change="ZQhou"
          v-model="rearBearingBrand"
          placeholder="请选择"
        >
          <el-option
            v-for="item in bearingPPoptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option
        ></el-select>
      </div>
      <div class="message-DIV">
        <p>后轴承型号：</p>
        <el-select
          clearable
          filterable
          :disabled="!rearBearingBrand"
          v-model="rearBearingModel"
          placeholder="请选择"
        >
          <el-option
            v-for="item in bearingXXoptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option
        ></el-select>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      lubricantBrand: "",
      lubricantModel: "",
      frontPingPaiValue: "",
      frontBearingModel: "",
      rearBearingBrand: "",
      rearBearingModel: "",
      // 润滑油
      lubricatingPPoptions: [],
      lubricatingXXoptions: [],
      // 轴承
      bearingPPoptions: [],
      bearingXXoptions: [],
    };
  },
  methods: {
    linkage() {
      const params = {
        unitType: 2,
        manufacture: this.lubricantBrand,
      };
      getBrandModelNameOrModelNumber(params).then((res) => {
        this.lubricatingXXoptions = res.data;
        this.lubricantModel = "";
      });
    },
    ZQqian() {
      const params = {
        unitType: 1,
        manufacture: this.frontPingPaiValue,
      };
      getBrandModelNameOrModelNumber(params).then((res) => {
        this.bearingXXoptions = res.data;
        this.frontBearingModel = "";
      });
    },
    ZQhou() {
      const params = {
        unitType: 1,
        manufacture: this.rearBearingBrand,
      };
      getBrandModelNameOrModelNumber(params).then((res) => {
        this.bearingXXoptions = res.data;
        this.rearBearingModel = "";
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.message {
  display: flex;
  flex-wrap: wrap;
  .message-DIV {
    width: 25%;
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
    p {
      //   margin-right: 10px;
      width: 140px;
      line-height: 40px;
      height: 40px;
      text-align: right;
    }
  }
}
</style>