Bläddra i källkod

'添加产品分类'

zhangyu 4 år sedan
förälder
incheckning
53a66f0785

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

@@ -12,3 +12,9 @@ export function dictionDefMajor(param, success) {
   let url = `${baseUrl}/prod/dictionary/query/defMajor`
   http.postJson(url, param, success)
 }
+
+//根据关键词查询产品类型和品牌
+export function dictionBrandQuery(param, success) {
+  let url = `${baseUrl}/prod/dictionary/queryByKeyword`
+  http.postJson(url, param, success)
+}

+ 1 - 0
src/components/product/productTool.vue

@@ -88,6 +88,7 @@ export default {
         }
       }
       this.setDictionary(dictionary)
+      this.$emit('change')
     },
   },
 }

+ 55 - 51
src/components/product/sagaProduct.vue

@@ -8,57 +8,31 @@
         <el-popover
           trigger="hover"
           placement="right"
+          v-for="major in productType"
+          :key="major.Code"
           width="960">
           <div slot="reference" class="classification">
-            <p class="name">给排水专业—WS</p>
-            <p class="introduce">建筑各类生活、景观用水给水排水系统、燃气系统</p>
-          </div>
-          <div>
-            <div style="margin-bottom: 10px">
-              <img src="../../assets/images/rectangle.png" height="12">
-              <span>某某系统</span>
+            <div class="major-content">
+              <p class="name">{{`${major.Name} — ${major.Code}`}}</p>
+              <p class="introduce">{{major.Note}}</p>
             </div>
-            <div class="sys">
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-            </div>
-          </div>
-        </el-popover>
-        <el-popover
-          trigger="hover"
-          placement="right"
-          width="960">
-          <div slot="reference" class="classification">
-            <p class="name">给排水专业—WS</p>
-            <p class="introduce">建筑各类生活、景观用水给水排水系统、燃气系统</p>
           </div>
-          <div>
+          <div v-for="system in major.DefMajor" :key="system.Code" v-show="major.DefMajor && major.DefMajor.length">
             <div style="margin-bottom: 10px">
               <img src="../../assets/images/rectangle.png" height="12">
-              <span>某某系统</span>
+              <span>{{system.Name}}</span>
             </div>
-            <div class="sys">
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
-              <span @click="handleDetail">燃气石油气瓶</span>
+            <div class="sys" v-show="system.DefClass && system.DefClass.length">
+              <span
+                v-for="equip in system.DefClass"
+                :key="equip.Code"
+                @click="handleDetail(equip)"
+              >
+                {{equip.Name}}
+              </span>
             </div>
           </div>
         </el-popover>
-
       </div>
     </div>
     <div class="brand">
@@ -69,14 +43,37 @@
 
 <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: []
+    }
+  },
+  computed: {
+    ...mapGetters('layout', ['dictionary']),
+  },
   methods:{
-    handleDetail() {
+    handleDetail(item) {
       this.$router.push({path: 'product/productDetail', query: {id: '1', name: '2', productId: '3'}})
+    },
+    getProductType() {// 获取产品类型数据
+      let params = {
+        Type: this.dictionary.dictionaryType,
+        GroupId: this.dictionary.groupId,
+        ProjectId: this.dictionary.projectId,
+      }
+      dictionDefMajor(params, res => {
+        this.productType = res.Content
+      })
     }
   }
 }
@@ -106,15 +103,22 @@ export default {
       /*margin-top: -19px;*/
       .classification {
         cursor: pointer;
-        padding: 20px;
-        border-bottom: 1px solid #EFF0F1;
-        .name {
-          color: #1F2429;
-          margin-bottom: 10px;
-        }
-        .introduce {
-          color: #8D9399;
-          line-height: 20px;
+        .major-content{
+          padding: 12px 0;
+          margin: 0 16px;
+          border-bottom: 1px solid #EFF0F1;
+          .name {
+            font-size: 14px;
+            line-height: 22px;
+            color: #1F2429;
+            margin-bottom: 4px;
+          }
+          .introduce {
+            color: #8D9399;
+            font-size: 12px;
+            letter-spacing: 0.5px;
+            line-height: 18px;
+          }
         }
       }
       .classification:hover {

+ 18 - 14
src/views/product/index.vue

@@ -1,25 +1,29 @@
 <template>
   <div class="product">
-    <productTool :showSelect="showSelect"/>
-    <sagaProduct/>
+    <product-tool :showSelect="showSelect" @change="handleChangeDictionary"></product-tool>
+    <saga-product ref="product"></saga-product>    
   </div>
 </template>
 
 <script>
-  import productTool from "../../components/product/productTool";
-  import sagaProduct from "../../components/product/sagaProduct";
+import productTool from "@/components/product/productTool";
+import sagaProduct from "@/components/product/sagaProduct";
 
-  export default {
-    name: "product",
-    components: {productTool, sagaProduct},
-    data() {
-      return {
-        showSelect:true
-      };
-    },
-    computed: {},
-    methods: {}
+export default {
+  name: "product",
+  components: {productTool, sagaProduct},
+  data() {
+    return {
+      showSelect:true
+    };
+  },
+  computed: {},
+  methods: {
+    handleChangeDictionary() {// 切换字典刷新产品分类数据
+      this.$refs.product.getProductType()
+    }
   }
+}
 </script>
 
 <style scoped lang="less">