2023-222

src/HDrpManagement/productMoneyOdd/components/add.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <el-button size="small" type="primary" :disabled="isEdit()" @click="dialogFormVisible=true">新 增</el-button>
-    <el-drawer title="新 增 商 品" append-to-body :visible.sync="dialogFormVisible" size="50%">
+    <el-drawer title="新 增 商 品" append-to-body :visible.sync="dialogFormVisible" size="1000px">
       <div class="container">
         <div>
           <selectClass @brandChange="brandChange" @onClassChange="onClassChange" @Search="Search" @clearSearch="clearSearch" @clickField="clickField" :default="true"></selectClass>
-          <el-input style="width:200px;margin-bottom:10px" size="small" placeholder="请输入商品" @clear="getProductList(params.content.pageNumber=1)"
+          <el-input style="width:200px;margin-bottom:10px;margin-top:10px" size="small" placeholder="请输入商品" @clear="getProductList(params.content.pageNumber=1)"
             @keyup.native.enter="getProductList(params.content.pageNumber=1)" v-model="params.content.where.condition" clearable />
         </div>
         <Table ref="table" :layout="tablecols" :data="productList" :custom="false" height="500px">

src/HDrpManagement/productMoneyOdd/components/selectClass/Select.vue

@@ -1,22 +1,19 @@
 <template>
   <div class="border-bottom">
     <div>
-      <ul class="flex-align-center normal-margin">
-        <li style="color:#999;font-size: 13px;">领域:</li>
-        <li :class="field_act === item.sys_enterprise_tradefieldid?'act':''" class="brand-item" v-for="item in fields" :key="item.sys_enterprise_tradefieldid" @click="clickField(item)">{{item.tradefield}}</li>
+      <ul class="flex-align-center normal-margin-new" >
+        <li  :class="field_act === ''?'act':''" class="brand-item border-all" @click="clickField({})" >全部领域</li>
+        <li  :class="field_act === item.sys_enterprise_tradefieldid?'act':''" class="brand-item margin-notAll" v-for="item in fields" :key="item.sys_enterprise_tradefieldid" @click="clickField(item)">{{item.tradefield}}</li>
       </ul>
-      <ul class="flex-align-center normal-margin">
-        <li style="color:#999;font-size: 13px;">品牌:</li>
-        <li :class="brand_act === item.sa_brandid?'act':''" class="brand-item" v-for="item in brands" :key="item.sa_brandid" @click="clickBrand(item.sa_brandid)">{{item.brandname}}</li>
+      <ul class="flex-align-center normal-margin-new">
+        <li :class="!brand_act?'act':''" class="brand-item border-all" @click="clickBrand('')">全部品牌</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">
-        <li style="color:#999;font-size: 13px;">分类:</li>
-        <li :class="class_act === item.itemclassnum?'act':''" class="brand-item" v-for="item in itemclass" :key="item.itemclassnum" @click="clickClass(item)">{{item.itemclassname}}</li>
+      <ul class="flex-align-center normal-margin-new">
+        <li  :class="class_act === ''?'act':''" class="brand-item border-all" @click="clickClass('')">全部分类</li>
+        <li  :class="class_act === item.itemclassnum?'act':''" class="brand-item margin-notAll" v-for="item in itemclass" :key="item.itemclassnum" @click="clickClass(item)">{{item.itemclassname}}</li>
       </ul>
-      <classTree style="padding-left:31px" :data="activeClass.subdep" @onClassChange="change"></classTree>
-    </div>
-    <div>
-
+      <classTree style="padding-left:80px" :data="activeClass.subdep" @onClassChange="change"></classTree>
     </div>
   </div>
 </template>
@@ -31,9 +28,14 @@ export default {
       fields:[],
       itemclass:[],
       activeClass:{},
-      field_act:0,
+      field_act:'',
       brand_act:0,
-      class_act:0
+      class_act:''
+    }
+  },
+  provide () {
+    return {
+      selectThis:() => this
     }
   },
   props: {
@@ -58,7 +60,7 @@ export default {
         }
       })
       this.fields = res1.data
-      this.field_act = res1.data[0].sys_enterprise_tradefieldid
+      this.field_act = ''
     },
     async queryBrands () {
       const res = await this.$api.requested({
@@ -71,32 +73,40 @@ export default {
         }
       })
       this.brands = res.data
-      this.brand_act = this.brands[0].sa_brandid
-      this.queryClass()
+      this.brand_act = res.data[0].sa_brandid
+      this.clickBrand(res.data[0].sa_brandid)
     },
 
     async queryClass () {
       const res = await this.$api.requested({
-        "id":"20220922110403","content":{"sa_brandid":this.brand_act}
+        "id":"20220922110403","content":{"sa_brandid":this.brand_act,where:{istool:0}}
       })
       console.log(res.data,'pop')
       this.itemclass = res.data[0].ttemclass
     },
     clickBrand (id) {
-      this.brand_act = id
+      this.brand_act = id ? id : 0
       this.queryClass()
     },
     clickField (item) {
-      this.field_act = item.sys_enterprise_tradefieldid
+      this.field_act = item ? item.sys_enterprise_tradefieldid : ''
       this.$emit('clickField',item)
     },
     clickClass (item) {
-      this.activeClass = item
-      this.class_act = item.itemclassnum
-      this.change(item)
+      if (item) {
+        this.activeClass = item
+        this.class_act = item.itemclassnum
+        this.$emit('onClassChange',item)
+      } else {
+        this.class_act = ''
+        this.$emit('onClassChange',item)
+      }
+      console.log('分类单机出发');
+      
+      
     },
     change(n) {
-      console.log(n)
+      console.log('分类单机出发2');
       this.$emit('onClassChange',n)
     },
     clearSearch() {
@@ -104,6 +114,7 @@ export default {
     }
   },
   mounted () {
+    this.queryClass()
     this.queryAgentiInfo()
     this.queryBrands()
   }
@@ -114,18 +125,28 @@ export default {
 </style>
 <style scoped>
 .brand-item{
-  margin:0 25px;
+  margin:10px 40px;
   color: #333;
   cursor: pointer;
   transition: .2s all linear;
-  font-size: 13px;
+  font-size: 14px;
 }
 .act{
   color:#3874f6;
+  font-weight: bold;
+}
+.normal-margin-new{
+  margin-bottom: 2px !important;
 }
 .border-bottom{
+  padding-bottom:16px;
   border-bottom: 1px solid #e3e5ea;
-  margin-bottom: 16px;
+}
+.border-all{
+  margin-left: 0px
+}
+.margin-notAll{
+  margin-left: -18px
 }
 
 </style>

src/HDrpManagement/productMoneyOdd/components/selectClass/classTree.vue

@@ -1,9 +1,10 @@
 <template>
   <div>
-    <div class="flex-align-center">
-      <div v-for="item in data" :key="item.index" @click="classClick(item)">
-        <p class="normal-margin class-item"  :class="class_act === item.itemclassnum?'act':''">{{item.itemclassname}}</p>
-        <Tree v-if="item.subdep" :data="item.subdep" @onClassChange="change"></Tree>
+    <div class="flex-start">
+      <div v-for="item in data" :key="item.index" @click.stop="classClick(item)">
+        <p class="classItem" v-if="item.index === 1"  :class="class_act === item.itemclassnum?'act':''">{{item.itemclassname}}</p>
+        <p class="classItem"  v-else   :class="class_act === item.itemclassnum?'act':''">{{item.itemclassname}}</p>
+        <Tree v-if="item.subdep && class_act === item.itemclassnum" :data="item.subdep"></Tree>
       </div>
     </div>
   </div>
@@ -13,6 +14,7 @@
 export default {
   name: "Tree",
   props:['data'],
+  inject:['selectThis'],
   data () {
     return {
       activeClass:{},
@@ -21,27 +23,43 @@ export default {
   },
   methods:{
     classClick (item) {
+      console.log(item)
       this.activeClass = item
       this.class_act = item.itemclassnum
-      this.change(item)
+      this.selectThis().change(item)
     },
-    change(item) {
-      this.$emit('onClassChange',item)
-    }
   }
 }
 </script>
 <style scoped>
 .class-item{
-  margin:0 25px;
+  margin:0 15px;
   color: #333;
   cursor: pointer;
   transition: .2s all linear;
-  font-size: 13px;
+  font-size: 14px;
   
 }
 .act{
   color:#3874f6;
+  font-weight: bold;
+}
+.classIndex{
+  margin-bottom: 0px
+  !important;
+}
+.classItem{
+  flex: 0 1 auto;
+  width:110px ;
+  margin:10px 0px 10px 0;
+  font-size:14px !important;
+  cursor: pointer;
+}
+.flex-start{
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  position: relative;
+  width: 80px;
 }
-
 </style>