yos_web/src/SDrpManagement/ProductGroup/modules/Select2.vue

<template>
  <div class="border-bottom">
    <div>
      <ul class="flex-align-center normal-margin-new">
        <li
          :class="areaBase === '' ? 'act' : ''"
          class="brand-item border-all"
          @click="clickAreaBase('')"
        >
          {{ $t("全部标准") }}
        </li>
        <li
          :class="areaBase === item ? 'act' : ''"
          class="brand-item margin-notAll"
          v-for="item in areaBases"
          :key="item"
          @click="clickAreaBase(item)"
        >
          {{ $t(item) }}
        </li>
      </ul>
      <ul class="flex-align-center normal-margin-new">
        <li
          :class="field_act === '' ? 'act' : ''"
          class="brand-item border-all"
          @click="clickField('')"
        >
          {{ $t("全部领域") }}
        </li>
        <li
          :class="tradefield === item.tradefield ? 'act' : ''"
          class="brand-item margin-notAll"
          v-for="item in fields"
          :key="item.sys_enterprise_tradefieldid"
          @click="clickField(item)"
        >
          {{ $t(item.tradefield) }}
        </li>
      </ul>
      <ul class="flex-align-center normal-margin-new">
        <li
          :class="!brand_act ? 'act' : ''"
          class="brand-item border-all"
          @click="clickBrand('')"
        >
          {{ $t("全部品牌") }}
        </li>
        <li
          :class="brand_act == item.sa_brandid ? 'act' : ''"
          class="brand-item margin-notAll"
          v-for="item in brands"
          :key="item.sa_brandid"
          @click="clickBrand(item.sa_brandid)"
        >
          {{ item.brandname }}
        </li>
      </ul>
      <ul class="flex-align-center normal-margin-new">
        <li
          :class="class_act === '' ? 'act' : ''"
          class="brand-item border-all"
          @click="clickClass('')"
        >
          {{ $t("全部分类") }}
        </li>
        <li
          :class="class_act === item.itemclassnum ? 'act' : ''"
          class="brand-item margin-notAll right-line"
          v-for="item in itemclass"
          :key="item.itemclassnum"
          @click="clickClass(item)"
        >
          {{ item.itemclassname }}
        </li>
      </ul>
      <classTree
        ref="tree"
        style="padding-left: 80px"
        :data="activeClass.subdep"
        @onClassChange="change"
      ></classTree>
    </div>
  </div>
</template>

<script>
import classTree from "./classTree.vue";
export default {
  data() {
    return {
      value: "",
      brands: [],
      fields: [],
      itemclass: [],
      activeClass: {},
      field_act: "",
      tradefield: "",
      brand_act: 0,
      class_act: "",
      areaBases: [],
      areaBase: "",
    };
  },
  provide() {
    return {
      selectThis: () => this,
    };
  },
  inject: ["sys_enterpriseid"],
  props: {
    default: {
      type: Boolean,
      default: () => false,
    },
  },
  components: {
    classTree,
  },
  methods: {
    /* 授权标准 */
    async queryAreaBase(id) {
      const res1 = await this.$api.requested({
        id: "20230519141202",
        content: {
          sys_enterpriseid: id ? id : "", //不传查询当前账号授权的标准
        },
      });
      if (res1.data.length) {
        // this.areaBase = res1.data[0]
        this.areaBases = res1.data;
        // this.$emit('clickAreaBase',res1.data[0])
      } else {
        this.areaBases = res1.data;
        // this.areaBase = ''
      }
      console.log("标准", this.areaBases);
    },
    async queryAgentiInfo(callback) {
      let param = {
        id: 20230418142202,
        content: {
          sys_enterpriseid: this.sys_enterpriseid(),
          where: {
            condition: "",
          },
        },
      };
      if (!this.sys_enterpriseid()) delete param.content.sys_enterpriseid;
      const res1 = await this.$api.requested(param);
      this.fields = res1.data;
      if (this.fields.length) {
        // this.field_act = res1.data[0].sys_enterprise_tradefieldid
        // this.tradefield = res1.data[0].tradefield
        // this.$emit('clickField',res1.data[0])
        // this.clickField({sys_enterprise_tradefieldid:this.field_act,tradefield:res1.data[0].tradefield})
      } else {
        // this.field_act = 0
        // this.tradefield = ''
        // this.clickField(false)
      }
      callback && callback();
    },
    async queryBrands(callback) {
      let param = {
        id: "20220924163702",
        content: {
          pageSize: 1000,
          sys_enterpriseid: this.sys_enterpriseid(),
          where: {
            condition: "",
          },
        },
      };
      if (!this.sys_enterpriseid()) delete param.content.sys_enterpriseid;
      const res = await this.$api.requested(param);
      this.brands = res.data;
      if (this.brands.length) {
        // this.brand_act = res.data[0].sa_brandid
        // this.clickBrand(res.data[0].sa_brandid)
      } else {
        // this.brand_act = 0
        // this.clickBrand(this.brand_act)
      }
      callback && callback();
    },

    async queryClass() {
      let param = {
        id: "20220922110403",
        content: {
          sa_brandid: this.brand_act,
          sys_enterpriseid: this.sys_enterpriseid(),
          where: { istool: 0 },
        },
      };
      if (!this.sys_enterpriseid()) delete param.content.sys_enterpriseid;
      const res = await this.$api.requested(param);
      console.log(res.data);

      this.itemclass = res.data.length ? res.data[0].ttemclass : [];
    },
    clickAreaBase(item) {
      this.areaBase = item ? item : "";
      this.$emit("clickAreaBase", item);
    },
    clickBrand(id) {
      this.brand_act = id ? id : 0;
      this.queryClass();
      this.$emit("brandChange", this.brand_act ? [this.brand_act] : []);
    },
    clickField(item) {
      console.log(this.fields);
      this.field_act = item ? item.sys_enterprise_tradefieldid : "";
      this.tradefield = item ? item.tradefield : "";
      this.$emit("clickField", item);
    },
    clickClass(item) {
      if (item) {
        this.activeClass = item;
        this.class_act = item.itemclassnum;
        this.$emit("onClassChange", item);
      } else {
        this.class_act = "";
        this.$refs.tree.class_act = 0;
        this.$emit("onClassChange", item);
      }
    },
    change(n) {
      this.$emit("onClassChange", n);
    },
    clearSearch() {
      this.$emit("clearSearch");
    },
  },
  mounted() {
    this.queryClass();
    this.queryAgentiInfo();
    this.queryBrands();
    this.queryAreaBase();
  },
};
</script>
<style>
</style>
<style scoped>
.brand-item {
  margin: 2px 40px;
  color: #333;
  cursor: pointer;
  transition: 0.2s all linear;
  font-size: 14px;
  /* border-right: 1px solid #ccc; */
}
.right-line {
  border-right: 1px solid #e3e5ea;
  padding-right: 10px;
}
.act {
  color: #3874f6;
  font-weight: bold;
}
.normal-margin-new {
  margin-bottom: 2px !important;
}
.border-bottom {
  padding-bottom: 16px;
  border-bottom: 1px solid #e3e5ea;
}
.border-all {
  margin-left: 0px;
}
.margin-notAll {
  margin-left: -18px;
}
</style>