|
|
@@ -0,0 +1,300 @@
|
|
|
+<template>
|
|
|
+ <div class="border-bottom">
|
|
|
+ <div>
|
|
|
+ <ul class="normal-margin-new" ref="myUl">
|
|
|
+ <li
|
|
|
+ :class="areaBase === '' ? 'act' : ''"
|
|
|
+ class="brand-item border-all"
|
|
|
+ style="float: left"
|
|
|
+
|
|
|
+ @click="clickAreaBase('')"
|
|
|
+ >
|
|
|
+ {{ $t("全部标准") }}
|
|
|
+ </li>
|
|
|
+ <li
|
|
|
+ :class="areaBase === item ? 'act' : ''"
|
|
|
+
|
|
|
+ class="brand-item margin-notAll"
|
|
|
+ v-for="(item,index) in areaBases"
|
|
|
+ :key="item"
|
|
|
+ @click="clickAreaBase(item)"
|
|
|
+ >
|
|
|
+ <div v-if="index == 0" class="brand-item margin-notAll" style="float: left" :class="areaBase === item ? 'act' : ''">{{ $t(item) }}</div>
|
|
|
+ <div v-else class="brand-item margin-notAll" style="float: left;margin-left: 15px" :class="areaBase === item ? 'act' : ''">{{ $t(item) }}</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul class="normal-margin-new" style="clear: both">
|
|
|
+ <li
|
|
|
+ :class="field_act === '' ? 'act' : ''"
|
|
|
+ v-if="(siteid == 'HY' && fields.length > 1) || siteid != 'HY'"
|
|
|
+ class="brand-item border-all"
|
|
|
+ style="float: left"
|
|
|
+ @click="clickField('')"
|
|
|
+ >
|
|
|
+ {{ $t("全部领域") }}
|
|
|
+ </li>
|
|
|
+ <li
|
|
|
+ :class="tradefield === item.tradefield ? 'act' : ''"
|
|
|
+ v-if="(siteid == 'HY' && fields.length > 1) || siteid != 'HY'"
|
|
|
+ class="brand-item margin-notAll"
|
|
|
+ v-for="(item,index) in fields"
|
|
|
+ :key="item.sys_enterprise_tradefieldid"
|
|
|
+ @click="clickField(item)"
|
|
|
+ >
|
|
|
+ <!-- {{ $t(item.tradefield) }}-->
|
|
|
+ <div v-if="item.rowindex == 1" class="brand-item margin-notAll" style="float: left" :class="tradefield === item.tradefield ? 'act' : ''">{{ $t(item.tradefield) }}</div>
|
|
|
+ <div v-else class="brand-item margin-notAll" style="float: left;margin-left: 15px" :class="tradefield === item.tradefield ? 'act' : ''">{{ $t(item.tradefield) }}</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul class="normal-margin-new" style="clear: both">
|
|
|
+ <li
|
|
|
+ :class="!brand_act ? 'act' : ''"
|
|
|
+ class="brand-item border-all"
|
|
|
+ style="float: left"
|
|
|
+ v-if="(siteid == 'HY' && brands.length > 1) || siteid != 'HY'"
|
|
|
+ @click="clickBrand('')"
|
|
|
+ >
|
|
|
+ {{ $t("全部品牌") }}
|
|
|
+ </li>
|
|
|
+ <li
|
|
|
+ :class="brand_act == item.sa_brandid ? 'act' : ''"
|
|
|
+ v-if="(siteid == 'HY' && brands.length > 1) || siteid != 'HY'"
|
|
|
+ class="brand-item margin-notAll"
|
|
|
+ v-for="(item,index) in brands"
|
|
|
+ :key="item.sa_brandid"
|
|
|
+ @click="clickBrand(item.sa_brandid)"
|
|
|
+ >
|
|
|
+ <!-- {{ item.brandname }}-->
|
|
|
+ <div v-if="index == 0" class="brand-item margin-notAll" style="float: left" :class="brand_act == item.sa_brandid ? 'act' : ''">{{ $t(item.brandname) }}</div>
|
|
|
+ <div v-else class="brand-item margin-notAll" style="float: left;margin-left: 15px" :class="brand_act == item.sa_brandid ? 'act' : ''">{{ $t(item.brandname) }}</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul class="flex-align-center normal-margin-new" style="clear: both">
|
|
|
+ <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)"
|
|
|
+ >
|
|
|
+ {{ $t(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: "",
|
|
|
+ siteid:JSON.parse(sessionStorage.getItem('active_account')).siteid,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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: '',
|
|
|
+ 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: '',
|
|
|
+ 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: '',
|
|
|
+ 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");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // watch:{
|
|
|
+ // "height":function (){
|
|
|
+ // console.log(this.height,'444444高度222')
|
|
|
+ // const newHeight = this.$refs.myUl.offsetHeight; // 获取当前高度。
|
|
|
+ // if (newHeight !== this.height) { // 检查是否真的发生了变化（可选）以避免不必要的操作。
|
|
|
+ // this.height = newHeight; // 更新高度值。可以在这里执行其他基于高度变化的逻辑。例如：console.log(newHeight); 或者 this.doSomethingWithNewHeight(newHeight);。
|
|
|
+ // }
|
|
|
+ // console.log(this.height,'高度')
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ 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>
|
qymljy