فهرست منبع

产品详情,品牌详情

shaun-sheep 4 سال پیش
والد
کامیت
06f9b739cb

+ 14 - 2
src/api/brand/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: zhangyu
  * @Date: 2020-05-13 11:18:18
- * @Info: 
+ * @Info:
  * @LastEditTime: 2020-05-18 11:27:42
  */
 import {baseUrl} from '@/api/scan/config'
@@ -54,4 +54,16 @@ export function brandQuery(param, success) {
 export function brandCount(param, success) {
   let url = `${baseUrl}/prod/brand/count`;
   http.getJson(url, param, success)
-}
+}
+
+//根据品牌和字典查询产品分类
+export function classQueryByBrand(param, success) {
+  let url = `${baseUrl}/prod/prodType/classQueryByBrand`
+  http.postJson(url, param, success)
+}
+
+//查询产品信息
+export function prodTypeQuery(param, success) {
+  let url = `${baseUrl}/prod/prodType/query`
+  http.postJson(url, param, success)
+}

+ 6 - 0
src/api/product/index.js

@@ -24,3 +24,9 @@ export function prodTypeUpdate(param, success) {
   let url = `${baseUrl}/prod/prodType/update`
   http.postJson(url, param, success)
 }
+
+//根据产品类型查询品牌
+export function brandQueryByClass(param, success) {
+  let url = `${baseUrl}/prod/prodType/brandQueryByClass`
+  http.postJson(url, param, success)
+}

+ 3 - 2
src/components/brand/brandTool.vue

@@ -20,7 +20,8 @@
         <span>&nbsp;{{incompleteCount}}&nbsp;</span>个
       </div>
       <span style="float: right;">
-         <el-button type="primary" @click="handBrand">添加品牌</el-button>
+            <el-button type="primary" @click="handBrand">添加产品</el-button>
+
       </span>
     </div>
   </div>
@@ -50,7 +51,7 @@ export default {
       })
     },
     handBrand() {
-      this.$emit("addbrand")
+      //跳转添加产品的路由
     },
   }
 }

+ 96 - 117
src/components/brand/detail/sagaBrandDetail.vue

@@ -3,32 +3,43 @@
     <div class="saga-brand-box mt90 por">
       <div class="breadcrumb-content">
         <el-breadcrumb separator-class="el-icon-arrow-right">
-          <el-breadcrumb-item>所有分类</el-breadcrumb-item>
-          <el-breadcrumb-item>品牌名称</el-breadcrumb-item>
+          <el-breadcrumb-item>所有品牌</el-breadcrumb-item>
+          <el-breadcrumb-item>{{this.$route.query.BrandCname}}</el-breadcrumb-item>
         </el-breadcrumb>
-        <span v-for="(item,index) in sys" v-if="item.show" class="select">{{item.name}}
-          <i class="el-icon-close" @click="deleteCurrent(index)"></i></span>
-        <span class="total poa">共<b>42</b>件相关产品</span>
+        <template v-for="item in system">
+          <template v-for="i in item">
+                  <span v-for="(j,index) in i.DefClass" v-if="j.show" class="select">{{j.Name}}
+              <i class="el-icon-close" @click="deleteCurrent(index)"></i></span>
+            <span class="total poa">共<b>{{total}}</b>件相关产品</span>
+          </template>
+        </template>
+
       </div>
-      <div class="device-sys">
-        <div class="left">能源设备系统:</div>
-        <div class="main">
-          <ul>
-            <li v-for="(item,index) in sys" :key="index" v-if="index < limitSys" @click="currentSys(index)"
-                :class="item.show ? 'light':''">
-              {{item.name}}
-            </li>
-          </ul>
-        </div>
-        <div class="right" @click="allData" :class="more == '更多' ? 'dark' :'light'">
-          <p style="cursor: pointer;">{{more}}
-            <span :class="more=='更多' ? 'el-icon-caret-bottom':'el-icon-caret-top'"></span>
-          </p>
+      <template v-for="(item,index) in system">
+        <div class="device-sys" v-for="(i,index) in item">
+          <div class="left">{{i.Name}}:</div>
+          <div class="main">
+            <ul>
+              <li v-for="(group,index) in i.DefClass"
+                  :key="index"
+                  v-if="index < limitSys"
+                  @click="currentSys(index,group)"
+                  :class="group.show ? 'light':''">
+                {{group.Name}}
+              </li>
+            </ul>
+          </div>
+          <div class="right" @click="allData" :class="more == '更多' ? 'dark' :'light'">
+            <p style="cursor: pointer;">{{more}}
+              <span :class="more=='更多' ? 'el-icon-caret-bottom':'el-icon-caret-top'"></span>
+            </p>
+          </div>
         </div>
-      </div>
+      </template>
+
     </div>
     <div class="saga-brand-box mt20">
-      <detailTable/>
+      <detailTable :table="table"/>
     </div>
   </div>
 
@@ -36,132 +47,100 @@
 
 <script>
   import detailTable from "../../public/detailTable";
+  import {mapGetters} from "vuex"
+  import {classQueryByBrand, prodTypeQuery} from "@/api/brand"
 
   export default {
     components: {detailTable},
     created() {
+      this.getDate()
+      this.getProductList()
     },
     mounted() {
     },
+
     data() {
       return {
         more: '更多',
         limitSys: 18,
         isShow: false,
-        sys: [
-          {
-            id: 1,
-            name: '喷灌控制箱',
-            show: false,
-          }, {
-            id: 2,
-            name: '喷灌机组',
-            show: false,
-          }, {
-            id: 3,
-            name: '喷灌控制箱',
-            show: false,
-          }, {
-            id: 4,
-            name: '喷灌控制箱',
-            show: false,
-          }, {
-            id: 5,
-            name: '喷灌机组',
-            show: false,
-          }, {
-            id: 6,
-            name: '喷灌控制箱',
-            show: false,
-          }, {
-            id: 7,
-            name: '喷灌控制箱',
-            show: false,
-          }, {
-            id: 8,
-            name: '喷灌控制箱',
-            show: false,
-          }, {
-            id: 9,
-            name: '喷灌机组',
-            show: false,
-          }, {
-            id: 10,
-            name: '喷灌控制箱',
-            show: false,
-          }, {
-            id: 11,
-            name: '喷灌机组',
-            show: false,
-          }, {
-            id: 12,
-            name: '喷灌机组',
-            show: false,
-          }, {
-            id: 13,
-            name: '喷灌机组',
-            show: false,
-          }, {
-            id: 14,
-            name: '喷灌机组',
-            show: false,
-          }, {
-            id: 15,
-            name: '喷灌机组',
-            show: false,
-          }, {
-            id: 16,
-            name: '喷灌机组',
-            show: false,
-          }, {
-            id: 17,
-            name: '喷灌机组',
-            show: false,
-          }, {
-            id: 18,
-            name: '喷灌机组',
-            show: false,
-          }, {
-            id: 19,
-            name: '喷灌机组',
-            show: false,
-          }, {
-            id: 20,
-            name: '喷灌机组',
-            show: false,
-          }
-        ]
+        system: [],
+        total: 0,
+        table: []
       }
     },
-    computed: {},
+    computed: {
+      ...mapGetters('layout', ['dictionary']),
+    },
     methods: {
+      getDate() {
+        let param = {
+          GroupId: this.dictionary.groupId,
+          Type: this.dictionary.dictionaryType,
+          ProjectId: this.dictionary.projectId,
+          BrandID: this.$route.query.BrandID,
+          Orders: 'name asc, createTime desc'
+        }
+        classQueryByBrand(param, res => {
+          this.system = res.Content ? res.Content.map(i => {
+            i.forEach(j => {
+              j.DefClass.forEach((k, index) => {
+                this.$set(k, 'show', false)
+              })
+
+            })
+            return i
+          }) : []
+        })
+      },
+      getProductList() {
+        let params = {
+          Filters: `BrandID='${this.$route.query.BrandID}'`
+        }
+        prodTypeQuery(params, res => {
+          this.total = res.Total
+          this.table = res.Content.map(i => ({...i, brandName: this.$route.query.BrandCname}))
+        })
+      },
       allData() {
         this.isShow = !this.isShow
         if (this.isShow) {
           this.more = '收起'
-          this.limitSys = this.sys.length
+          this.limitSys = this.system.length
         } else {
           this.more = '更多'
           this.limitSys = 18
         }
       },
-      currentSys(index) {
-        for (let i = 0; i < this.sys.length; i++) {
-          if (i == index) {
-            this.sys[i].show = true
-          } else {
-            this.sys[i].show = false
+      currentSys(index, val) {
+        for (let i = 0; i < this.system.length; i++) {
+          for (let j = 0; j < this.system[i].length; j++) {
+            let def = this.system[i][j].DefClass
+            for (let k = 0; k < def.length; k++) {
+              def[k].show = k == index ? true : false
+            }
           }
         }
+        let params = {
+          Filters: `prodCode='${val.Code}';BrandID='${this.$route.query.BrandID}'`
+        }
+        prodTypeQuery(params, res => {
+          this.total = res.Total
+          this.table = res.Content.map(i => ({...i, brandName: this.$route.query.BrandCname}))
+
+        })
       },
       deleteCurrent(index) {
-        for (let i = 0; i < this.sys.length; i++) {
-          if (i == index) {
-            this.sys[i].show = false
-          } else {
-            this.sys[i].show = false
+        for (let i = 0; i < this.system.length; i++) {
+          for (let j = 0; j < this.system[i].length; j++) {
+            let def = this.system[i][j].DefClass
+            for (let k = 0; k < def.length; k++) {
+              def[k].show = k == index ? false : true
+            }
           }
         }
+        this.getProductList()
+
       }
     }
   }

+ 2 - 1
src/components/brand/sagaBrand.vue

@@ -121,7 +121,8 @@ export default {
         this.$emit("updatebrand", brand)
       } else {
         console.log('跳转到产品页面')
-        this.$router.push({path: 'brand/brandDetail', query: {id: '1', name: '22', productId: '3'}})
+        console.log(brand)
+        this.$router.push({path: 'brand/brandDetail', query: {BrandCname: brand.BrandCname, BrandID:brand.BrandID, BrandName: brand.BrandID}})
       }
     },
     handleClickLetter(e) { //点击字母锚点

+ 107 - 43
src/components/product/detail/sagaProductDetail.vue

@@ -5,27 +5,32 @@
         <div style="width: 1020px">
           <el-breadcrumb
             separator-class="el-icon-arrow-right"
-            style="width: 320px;display: inline-block"
+            style="max-width: 470px;display: inline-block"
           >
             <el-breadcrumb-item>所有分类</el-breadcrumb-item>
-            <el-breadcrumb-item>给排水专业</el-breadcrumb-item>
-            <el-breadcrumb-item>燃气系统</el-breadcrumb-item>
-            <el-breadcrumb-item>品牌名称</el-breadcrumb-item>
+            <el-breadcrumb-item>{{this.$route.query.major}}</el-breadcrumb-item>
+            <el-breadcrumb-item>{{this.$route.query.system}}</el-breadcrumb-item>
+            <el-breadcrumb-item>{{this.$route.query.class}}</el-breadcrumb-item>
           </el-breadcrumb>
           <span v-for="(item,index) in allSelect" v-if="item.check" class="select">{{item.BrandCname}}
           <i class="el-icon-close" @click="deleteCurrent(item,index)"></i></span>
         </div>
 
 
-        <span class="total poa">共<b>42</b>件相关产品</span>
+        <span class="total poa">共<b>{{total}}</b>件相关产品</span>
       </div>
       <div class="device-sys">
         <div class="left">品牌:</div>
 
         <div class="main" :class="more=='收起'? 'mt30':''">
           <ul v-if="more=='更多'">
-            <li v-for="(item,index) in allDate" :key="index" v-if="index < 8" @click="handleCurrentBrand(item,index)"
-                :class="item.check ?'light':''">
+            <li
+              v-for="(item,index) in allDate"
+              :key="index"
+              v-if="index < 9"
+              @click="handleCurrentBrand(item,index)"
+              v-show="item.name != '全部'"
+              :class="item.check ?'light':''">
               {{item.BrandCname}}
             </li>
           </ul>
@@ -39,32 +44,34 @@
               > {{letter}}</span>
             </div>
             <ul>
-              <li v-for="(item,index) in allDate" :key="index" @click="handleCurrentBrand(item,index)"
-                  :class="item.check ?'light':''">{{item.BrandCname}}
+              <li
+                v-for="(item,index) in allDate"
+                :key="index"
+                @click="handleCurrentBrand(item,index)"
+                v-show="item.name != '全部'"
+                :class="item.check ?'light':''">{{item.BrandCname}}
               </li>
             </ul>
-
           </template>
-
         </div>
-        <div class="right" @click="allData" :class="more == '更多' ? 'dark' :'light'" style="position:relative;">
+        <div class="right" :class="more == '更多' ? 'dark' :'light'" style="position:relative;">
           <el-dropdown @command="handleCommand" style="line-height: 40px;" v-show="more=='收起'"
                        :class="more=='收起'?'pos-drop':''">
         <span class="el-dropdown-link">
-          {{sort}}<i class="el-icon-arrow-down el-icon--right"></i>
+          {{sortName}}<i class="el-icon-arrow-down el-icon--right"></i>
         </span>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item v-for="(val, key) in sortMap" :key="key" :command="key">{{val}}</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
-          <p style="cursor: pointer;" :class="more=='收起'? 'pos-down':''">{{more}}
+          <p style="cursor: pointer;" @click="allData" :class="more=='收起'? 'pos-down':''">{{more}}
             <span :class="more=='更多' ? 'el-icon-caret-bottom':'el-icon-caret-top'"></span>
           </p>
         </div>
       </div>
     </div>
     <div class="saga-brand-box mt20">
-      <detailTable/>
+      <detailTable :table="table"/>
     </div>
   </div>
 
@@ -72,38 +79,18 @@
 
 <script>
   import detailTable from "../../public/detailTable";
-  import brandList from "@/data/brandList"
+  import {prodTypeQuery} from "@/api/brand"
+  import {brandQueryByClass} from "@/api/product"
+  import {mapGetters} from "vuex"
+
 
   export default {
-    components: {detailTable},
-    created() {
-      this.brandList = Object.assign({
-        '全部': [{
-          id: 0,
-          name: '全部'
-        }
-        ]
-      }, brandList)
-
-      for (let key in this.brandList) {
-        if (Array.isArray(brandList[key])) {
-          let list = this.temporary.concat(brandList[key])
-          list.map(i => this.$set(i, 'check', false))
-          this.temporary = list
-          this.allDate = list
-          this.allSelect = list
-        }
-      }
-    },
-    mounted() {
-    },
     data() {
       return {
         idx: 0,
         more: '更多',
-        // limitSys: 18,
         isShow: true,
-        brandList: {},
+        brandList: [],
         allDate: [],
         temporary: [],//全部数据
         allSelect: [],//选择的数据
@@ -111,14 +98,71 @@
           zh: "中文排序",
           en: "英文排序",
         },
-        sort: "中文排序",
+        sortName: "中文排序",
+        sort: "zh",
+        total: 0,
+        table: []
 
       }
     },
-    computed: {},
+    components: {detailTable},
+    created() {
+      this.getDate()
+      this.getProductList()
+    },
+    mounted() {
+    },
+    computed: {
+      ...mapGetters('layout', ['dictionary']),
+    },
     methods: {
+      getDate() {
+        let param = {
+          GroupId: this.dictionary.groupId,
+          ProjectId: this.dictionary.projectId,
+          Type: this.sort,
+          ClassCode: this.$route.query.code,
+          Orders: 'name asc, createTime desc'
+        }
+        brandQueryByClass(param, res => {
+          this.brandList = res.Content ? res.Content[0] : []
+          this.brandList = Object.assign({
+            '全部': [{
+              name: '全部'
+            }
+            ]
+          }, this.brandList)
+          this.temporary = []
+          this.allDate = []
+          this.allSelect = []
+          for (let key in this.brandList) {
+            if (Array.isArray(this.brandList[key])) {
+              let list = this.temporary.concat(this.brandList[key])
+              list.map(i => this.$set(i, 'check', false))
+              this.temporary = list
+              this.allDate = list
+              this.allSelect = list
+            }
+          }
+        })
+      },
+      getProductList() {
+        let params = {
+          "Cascade": [
+            {"Name": "brand"}
+          ],
+          Filters: `prodCode='${this.$route.query.code}'`
+        }
+        prodTypeQuery(params, res => {
+          this.total = res.Total
+          this.table = res.Content.map(i => ({...i, brandName: this.$route.query.BrandCname}))
+        })
+      },
       handleCommand(command) {// 切换排序方式
-        this.sort = this.sortMap[command]
+        this.sortName = this.sortMap[command]
+        this.sort = command
+        this.getDate()
+        this.getProductList()
       },
       allData() {
         this.isShow = !this.isShow
@@ -142,6 +186,7 @@
             i.check = item.check
           }
         })
+        this.handleQuery(this.allSelect)
       },
       deleteCurrent(item, index) {
         item.check = false
@@ -150,7 +195,26 @@
             i.check = item.check
           }
         })
+        this.handleQuery(this.allSelect)
+      },
+      handleQuery(arr) {
+        let filter = this.allSelect.filter(i => i.check), str = ''
+        str = filter.map(i => `brandID='${i.BrandID}'`).join(' or ')
+        if (str) {
+          let params = {
+            "Cascade": [
+              {"Name": "brand"}
+            ],
+            Filters: `prodCode='${this.$route.query.code}';(${str})`
 
+          }
+          prodTypeQuery(params, res => {
+            this.total = res.Total
+            this.table = res.Content.map(i => ({...i, brandName: this.$route.query.BrandCname}))
+          })
+        } else {
+          this.getProductList()
+        }
       }
     }
   }

+ 24 - 19
src/components/product/sagaProduct.vue

@@ -18,7 +18,7 @@
             </div>
           </div>
           <div v-for="system in major.DefMajor" :key="system.Code" v-show="major.DefMajor && major.DefMajor.length">
-            <div style="margin-bottom: 10px">
+            <div style="padding-bottom: 12px;margin-top:20px;">
               <img src="../../assets/images/rectangle.png" height="12">
               <span>{{system.Name}}</span>
             </div>
@@ -26,7 +26,7 @@
               <span
                 v-for="equip in system.DefClass"
                 :key="equip.Code"
-                @click="handleDetail(equip)"
+                @click="handleDetail(equip,major,system)"
               >
                 {{equip.Name}}
               </span>
@@ -42,28 +42,33 @@
 </template>
 
 <script>
-import sagaBrand from "@/components/brand/sagaBrand"
-import { dictionDefMajor } from "@/api/dictionary"
-import { mapGetters } from "vuex"
-export default {
-  name: "productBrand",
-  components: {
-    sagaBrand,
-  },
-  created() {
-    this.getProductType()
-  },
-  data() {
-    return {
-      productType: []
+  import sagaBrand from "@/components/brand/sagaBrand"
+  import {dictionDefMajor} from "@/api/dictionary"
+  import {mapGetters} from "vuex"
+
+  export default {
+    name: "productBrand",
+    components: {
+      sagaBrand,
+    },
+    created() {
+      this.getProductType()
+    },
+    data() {
+      return {
+        productType: []
     }
   },
   computed: {
     ...mapGetters('layout', ['dictionary']),
   },
-  methods:{
-    handleDetail(item) {
-      this.$router.push({path: 'product/productDetail', query: {id: '1', name: '2', productId: '3'}})
+  methods: {
+    handleDetail(val, major, system) {
+      console.log(val, 'val', major, system)
+      this.$router.push({
+        path: 'product/productDetail',
+        query: {major: major.Name, system: system.Name, class: val.Name,code:val.Code}
+      })
     },
     getProductType() {// 获取产品类型数据
       let params = {

+ 5 - 4
src/components/public/detailTable.vue

@@ -1,8 +1,8 @@
 <template>
-  <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#F6F6F6',color:'#646A73'}">
-    <el-table-column prop="date" label="产品类型" align="center"/>
-    <el-table-column prop="name" label="品牌" align="center"/>
-    <el-table-column prop="address" label="型号" align="center"/>
+  <el-table :data="table" style="width: 100%" :header-cell-style="{background:'#F6F6F6',color:'#646A73'}">
+    <el-table-column prop="ProdCname" label="产品类型" align="center"/>
+    <el-table-column prop="brandName" label="品牌" align="center"/>
+    <el-table-column prop="Model" label="型号" align="center"/>
     <el-table-column label="管理" align="center">
       <template slot-scope="scope">
         <el-button
@@ -23,6 +23,7 @@
 <script>
   export default {
     name: "detailTable",
+    props:['table'],
     data() {
       return {
         tableData: [{

+ 1 - 2
src/components/supplement/sagaSupplement.vue

@@ -22,7 +22,7 @@
                 <el-option-group
                   v-for="group in productList"
                   :key="group.label"
-                  :labe="group.label"
+                  :label="group.label"
                 >
                   <el-option
                     v-for="item in group.options"
@@ -30,7 +30,6 @@
                     :label="item.label"
                     :value="item.value"
                   >
-
                   </el-option>
                 </el-option-group>
               </el-select>

+ 4 - 5
src/views/brand/detail/index.vue

@@ -1,18 +1,17 @@
 <template>
   <div class="brand-detail">
-    hello
-    <brandTool/>
+    <productTool/>
     <sagaBrandDetail/>
   </div>
 </template>
 
 <script>
-  import brandTool from "../../../components/brand/brandTool";
-  import sagaBrandDetail from "../../../components/brand/detail/sagaBrandDetail";
+  import productTool from "@/components/product/productTool";
+  import sagaBrandDetail from "@/components/brand/detail/sagaBrandDetail";
 
   export default {
     name: "index",
-    components: {brandTool, sagaBrandDetail}
+    components: {productTool, sagaBrandDetail}
   }
 </script>