Browse Source

拉代码

shaun-sheep 5 năm trước cách đây
mục cha
commit
c6c2c83086

+ 4 - 11
src/components/brand/brandTool.vue

@@ -20,14 +20,7 @@
         <span>7</span>个
       </div>
       <span style="float: right;">
-        <el-input
-          v-model="value"
-          style="width: 360px;"
-          placeholder="请输入关键词/拼音/首字母"
-          class="reset-input"
-        >
-          <i slot="prefix" class="el-input__icon el-icon-search"></i>
-        </el-input>
+       <remoteSearch/>
          <el-button type="primary" @click="handBrand">添加产品</el-button>
           </span>
     </div>
@@ -38,13 +31,13 @@
 
 <script>
   import addBrand from "../../components/business/addBrand";
-
+import remoteSearch from "../public/remoteSearch";
   export default {
     created() {
     },
     mounted() {
     },
-    components: {addBrand},
+    components: {addBrand,remoteSearch},
     data() {
       return {
         value:''
@@ -65,7 +58,7 @@
     width: 100%;
     height: 70px;
     background: #fff;
-    z-index: 11;
+    /*z-index: 11;*/
 
     .saga-toolbar-main {
       width: 1200px;

+ 1 - 0
src/components/product/detail/productDetailTool.vue

@@ -87,6 +87,7 @@
     width: 100%;
     height: 70px;
     background: #fff;
+    z-index: 11;
 
     .saga-toolbar-main {
       width: 1200px;

+ 18 - 3
src/components/product/detail/sagaProductDetail.vue

@@ -1,7 +1,16 @@
 <template>
   <div>
     <div class="saga-brand-box mt90">
+      <span @click="changeHandle">打开或者收缩</span>
 
+      <collapse>
+        33333
+        <div class="collapse-wrap"
+             v-show="isActive">
+          23333
+<!--          <slot></slot>-->
+        </div>
+      </collapse>
     </div>
     <div class="saga-brand-box mt20">
 <detailTable/>
@@ -12,17 +21,23 @@
 
 <script>
   import detailTable from "../../public/table";
+  import collapse from "@/data/upDown"
+
   export default {
-    components: {detailTable},
+    components: {detailTable, collapse},
     created() {
     },
     mounted() {
     },
     data() {
-      return {}
+      return {
+        isActive: true
+      }
     },
     methods: {
-
+      changeHandle() {
+        this.isActive = !this.isActive
+      }
     }
   }
 </script>

+ 16 - 27
src/components/product/productTool.vue

@@ -9,15 +9,8 @@
           :accordion="isAccordion"
           @getValue="getValue($event)"/>
         <span style="float: right;">
-           <el-input
-             v-model="value"
-             style="width: 360px"
-             placeholder="请输入关键词/拼音/首字母"
-             class="reset-input"
-           >
-           <i slot="prefix" class="el-input__icon el-icon-search"></i>
-           </el-input>
-              <el-button type="primary" @click="handBrand">添加产品</el-button>
+          <remoteSearch/>
+            <el-button type="primary" @click="handBrand">添加产品</el-button>
 
           </span>
     </div>
@@ -31,14 +24,14 @@
 <script>
   import selectTree from "../../components/public/selectTree";
   import addBrand from "../../components/business/addBrand";
+  import remoteSearch from "../public/remoteSearch";
 
   export default {
-    components: {selectTree, addBrand},
+    components: {selectTree, addBrand, remoteSearch},
 
     created() {
     },
-    mounted() {
-    },
+
     data() {
       return {
         isClearable: true,      // 可清空(可选)
@@ -52,18 +45,18 @@
         },
         // 选项列表(必选)
         list: [
-          {id: 1, parentId: 0, name: "一级菜单A", },
+          {id: 1, parentId: 0, name: "一级菜单A",},
           {id: 2, parentId: 0, name: "一级菜单B",},
-          {id: 3, parentId: 0, name: "一级菜单C", },
-          {id: 4, parentId: 1, name: "二级菜单A-A", },
-          {id: 5, parentId: 1, name: "二级菜单A-B", },
+          {id: 3, parentId: 0, name: "一级菜单C",},
+          {id: 4, parentId: 1, name: "二级菜单A-A",},
+          {id: 5, parentId: 1, name: "二级菜单A-B",},
           {id: 6, parentId: 2, name: "二级菜单B-A",},
-          {id: 7, parentId: 4, name: "三级菜单A-A-A", },
-          {id: 20, parentId: 0, name: "一级菜单C", },
-          {id: 39, parentId: 0, name: "一级菜单C", },
-          {id: 40, parentId: 0, name: "一级菜单end", }
+          {id: 7, parentId: 4, name: "三级菜单A-A-A",},
+          {id: 20, parentId: 0, name: "一级菜单C",},
+          {id: 39, parentId: 0, name: "一级菜单C",},
+          {id: 40, parentId: 0, name: "一级菜单end",}
         ],
-        value: ''
+
       }
     },
     methods: {
@@ -75,6 +68,7 @@
         this.valueId = value
         console.log(this.valueId);
       },
+
     },
     computed: {
       /* 转树形数据 */
@@ -97,7 +91,7 @@
     width: 100%;
     height: 70px;
     background: #fff;
-    z-index: 11;
+    /*z-index: 11;*/
 
     .saga-toolbar-main {
       width: 1200px;
@@ -108,11 +102,6 @@
     }
 
 
-    .reset-input {
-      /deep/ .el-input__inner {
-        background: #F6F6F6;
 
-      }
-    }
   }
 </style>

+ 107 - 0
src/components/public/remoteSearch.vue

@@ -0,0 +1,107 @@
+<template>
+  <el-autocomplete
+    v-model.trim="state"
+    :fetch-suggestions="querySearchAsync"
+    placeholder="请输入关键词/拼音/首字母"
+    @select="handleSelect"
+    style="width: 360px"
+    class="reset-input"
+  >
+    <i slot="prefix" class="el-input__icon el-icon-search"></i>
+  </el-autocomplete>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        restaurants: [],
+        state: '',
+        timeout: null
+      };
+    },
+    methods: {
+      loadAll() {
+        return [
+          {"value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号"},
+          {"value": "Hot honey 首尔炸鸡(仙霞路)", "address": "上海市长宁区淞虹路661号"},
+          {"value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113"},
+          {"value": "泷千家(天山西路店)", "address": "天山西路438号"},
+          {"value": "胖仙女纸杯蛋糕(上海凌空店)", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},
+          {"value": "贡茶", "address": "上海市长宁区金钟路633号"},
+          {"value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号"},
+          {"value": "茶芝兰(奶茶,手抓饼)", "address": "上海市普陀区同普路1435号"},
+          {"value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107"},
+          {"value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号"},
+          {"value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号"},
+          {"value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号"},
+          {"value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F,2383弄62号1F"},
+          {"value": "浮生若茶(凌空soho店)", "address": "上海长宁区金钟路968号9号楼地下一层"},
+          {"value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号"},
+          {"value": "CoCo都可(北新泾店)", "address": "上海市长宁区仙霞西路"},
+          {"value": "快乐柠檬(神州智慧店)", "address": "上海市长宁区天山西路567号1层R117号店铺"},
+          {"value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819"},
+          {"value": "猫山王(西郊百联店)", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306"},
+          {"value": "枪会山", "address": "上海市普陀区棕榈路"},
+          {"value": "纵食", "address": "元丰天山花园(东门) 双流路267号"},
+          {"value": "钱记", "address": "上海市长宁区天山西路"},
+          {"value": "壹杯加", "address": "上海市长宁区通协路"},
+          {"value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢(B幢)第01层第1-02A单元"},
+          {"value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室"},
+          {"value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},
+          {"value": "鲜果榨汁(金沙江路和美广店)", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6"},
+          {"value": "开心丽果(缤谷店)", "address": "上海市长宁区威宁路天山路341号"},
+          {"value": "超级鸡车(丰庄路店)", "address": "上海市嘉定区丰庄路240号"},
+          {"value": "妙生活果园(北新泾店)", "address": "长宁区新渔路144号"},
+          {"value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号"},
+          {"value": "凡仔汉堡(老真北路店)", "address": "上海市普陀区老真北路160号"},
+          {"value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室"},
+          {"value": "蜀香源麻辣香锅(剑河路店)", "address": "剑河路443-1"},
+          {"value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号"},
+          {"value": "饭典*新简餐(凌空SOHO店)", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室"},
+          {"value": "焦耳·川式快餐(金钟路店)", "address": "上海市金钟路633号地下一层甲部"},
+          {"value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B"},
+          {"value": "浏阳蒸菜", "address": "天山西路430号"},
+          {"value": "四海游龙(天山西路店)", "address": "上海市长宁区天山西路"},
+          {"value": "樱花食堂(凌空店)", "address": "上海市长宁区金钟路968号15楼15-105室"},
+          {"value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号"},
+          {"value": "福荣祥烧腊(平溪路店)", "address": "上海市长宁区协和路福泉路255弄57-73号"},
+          {"value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位"},
+          {"value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号"},
+          {"value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼"},
+          {"value": "阳阳麻辣烫", "address": "天山西路389号"},
+          {"value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13"}
+        ];
+      },
+      querySearchAsync(queryString, cb) {
+        var restaurants = this.restaurants;
+        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+          cb(results);
+        }, 3000 * Math.random());
+      },
+      createStateFilter(queryString) {
+        return (state) => {
+          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
+      handleSelect(item) {
+        console.log(item);
+      }
+    },
+    mounted() {
+      this.restaurants = this.loadAll();
+    }
+  };
+</script>
+
+<style scoped lang="less">
+  .reset-input {
+    /deep/ .el-input__inner {
+      background: #F6F6F6;
+
+    }
+  }
+</style>

+ 21 - 0
src/components/public/uploadDrag.vue

@@ -0,0 +1,21 @@
+<template>
+  <el-upload
+    class="upload-demo"
+    drag
+    action="https://jsonplaceholder.typicode.com/posts/"
+    multiple>
+    <i class="el-icon-upload"></i>
+    <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
+<!--    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>-->
+  </el-upload>
+</template>
+
+<script>
+    export default {
+        name: "uploadDrag"
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 367 - 52
src/components/supplement/sagaSupplement.vue

@@ -1,79 +1,394 @@
 <template>
-  <div class="saga-brand-box">
-
-    <el-tabs :tab-position="tabPosition" style="float: left">
-      <el-tab-pane label="基本信息"></el-tab-pane>
-      <el-tab-pane label="基本信息"></el-tab-pane>
-      <el-tab-pane label="基本信息"></el-tab-pane>
-      <el-tab-pane label="基本信息"></el-tab-pane>
-    </el-tabs>
-    <section class="content">
-      <el-form
-        label-position="top"
-        :model="ruleForm"
-        :rules="rules"
-      >
-        <p class="title">
-          <img src="../../assets/images/rectangle.png" height="16" style="vertical-align: middle">
-          基本信息</p>
-          <el-form-item label="产品类型" prop="product">
-            <el-input v-model="ruleForm.product"/>
-          </el-form-item>
-          <el-form-item label="品牌" prop="brand">
-            <el-input v-model="ruleForm.brand"/>
-          </el-form-item>
-          <el-form-item label="型号" prop="type">
-            <el-input v-model="ruleForm.type"/>
-          </el-form-item>
-
-      </el-form>
-    </section>
-  </div>
+  <div class="saga-supplement-box">
+    <el-scrollbar style="height:100%" class="saga-supplement-scroll">
+      <div class="saga-brand-box">
+        <el-tabs :tab-position="tabPosition" class="reset-steps" @tab-click="jump" v-model="stepActive">
+          <el-tab-pane
+            :label="item.name || '信息'"
+            v-for="(item,index) in labelKey"
+            :key="item.name"/>
+        </el-tabs>
+        <el-form
+          label-position="top"
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+        >
+          <section class="d_jump">
+            <p class="title">
+              <img src="../../assets/images/rectangle.png" height="16" style="vertical-align: middle">
+              基本信息</p>
+            <el-form-item label="产品类型" prop="product">
+              <el-select v-model="ruleForm.product" prop="product" placeholder="请选择">
+                <el-option-group
+                  v-for="group in productList"
+                  :key="group.label"
+                  :labe="group.label"
+                >
+                  <el-option
+                    v-for="item in group.options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+
+                  </el-option>
+                </el-option-group>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="品牌" prop="brand">
+              <el-select
+                v-model="ruleForm.brand"
+                multiple
+                :multiple-limit="1"
+                filterable
+                @focus="focus"
+                remote
+                placeholder="请选择"
+                :remote-method="remoteMethods"
+                :loading="loading"
+              >
+                <el-option
+                  v-for="item in brandList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+
+
+              </el-select>
+            </el-form-item>
+            <el-form-item label="型号" prop="type">
+              <el-input v-model="ruleForm.type"/>
+            </el-form-item>
+          </section>
+          <section class="d_jump">
+            <p class="title">
+              <img src="../../assets/images/rectangle.png" height="16" style="vertical-align: middle">
+              技术参数
+            </p>
+            <el-form-item label="CPU规格:">
+              <el-input  />
+            </el-form-item>
+            <el-form-item label="CPU规格:">
+              <el-input/>
+            </el-form-item>
+            <el-form-item label="CPU规格:">
+              <el-input/>
+            </el-form-item>
+            <el-form-item label="CPU规格:">
+              <el-input/>
+            </el-form-item>
+            <el-form-item label="CPU规格:">
+              <el-input/>
+            </el-form-item>
+            <el-form-item label="CPU规格:">
+              <el-input/>
+            </el-form-item>
+            <el-form-item label="CPU规格:">
+              <el-input/>
+            </el-form-item>
+            <el-form-item label="CPU规格:">
+              <el-input/>
+            </el-form-item>
+            <el-form-item label="CPU规格:">
+              <el-input/>
+            </el-form-item>
+            <el-form-item label="CPU规格:">
+              <el-input/>
+            </el-form-item>
+            <el-form-item label="CPU规格:">
+              <el-input/>
+            </el-form-item>
 
+
+          </section>
+          <section class="d_jump">
+            <p class="title">
+              <img src="../../assets/images/rectangle.png" height="16" style="vertical-align: middle">
+              附件信息
+            </p>
+            <el-form-item label="设备文档:">
+              <uploadDrag/>
+            </el-form-item>
+          </section>
+        </el-form>
+      </div>
+    </el-scrollbar>
+  </div>
 </template>
 
 <script>
+  import uploadDrag from "../public/uploadDrag";
+
   export default {
-    components: {},
+    components: {uploadDrag},
     created() {
     },
     mounted() {
+      let listener = document.querySelector('.saga-brand-box')
+      listener.addEventListener('scroll', this.onScroll)
+      //  option
+      this.list = this.states.map(item => {
+        return {value: `value:${item}`, label: `label:${item}`}
+      })
     },
     data() {
       return {
+        list: [],
+        loading: false,
+        states: ["Alabama", "Alaska", "Arizona",
+          "Arkansas", "California", "Colorado",
+          "Connecticut", "Delaware", "Florida",
+          "Georgia", "Hawaii", "Idaho", "Illinois",
+          "Indiana", "Iowa", "Kansas", "Kentucky",
+          "Louisiana", "Maine", "Maryland",
+          "Massachusetts", "Michigan", "Minnesota",
+          "Mississippi", "Missouri", "Montana",
+          "Nebraska", "Nevada", "New Hampshire",
+          "New Jersey", "New Mexico", "New York",
+          "North Carolina", "North Dakota", "Ohio",
+          "Oklahoma", "Oregon", "Pennsylvania",
+          "Rhode Island", "South Carolina",
+          "South Dakota", "Tennessee", "Texas",
+          "Utah", "Vermont", "Virginia",
+          "Washington", "West Virginia", "Wisconsin",
+          "Wyoming"],
+        bbs: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
+        }],
+        brandList: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
+        }],
+        productList: [{
+          label: '热门城市',
+          options: [{
+            value: 'Shanghai',
+            label: '上海'
+          }, {
+            value: 'Beijing',
+            label: '北京'
+          }]
+        }, {
+          label: '城市名',
+          options: [{
+            value: 'Chengdu',
+            label: '成都'
+          }, {
+            value: 'Shenzhen',
+            label: '深圳'
+          }, {
+            value: 'Guangzhou',
+            label: '广州'
+          }, {
+            value: 'Dalian',
+            label: '大连'
+          }]
+        }],
+        labelKey: [
+          {
+            name: '基本信息',
+          }, {
+            name: '技术参数',
+          }, {
+            name: '附件信息',
+          }
+        ],
+        stepActive: '0',
         tabPosition: 'left',
-        ruleForm: '',
-        rules: []
+        ruleForm: {
+          product: '',
+          brand: '',
+          type: '',
+
+        },
+        rules: {
+          product: [
+            {required: true, message: '请输入产品类型', trigger: 'change'}
+          ],
+          brand: [
+            {required: true, message: '请输入品牌', trigger: 'change'}
+          ],
+          type: [
+            {required: true, message: '请输入型号', trigger: 'change'}
+          ]
+        }
       }
     },
-    methods: {}
+    methods: {
+      jump(tab, event) {
+        this.stepActive = tab.index
+        let jump = document.querySelectorAll('.d_jump'),
+          total = jump[this.stepActive].offsetTop,//获取需要滚动的距离
+          listener = document.querySelector('.saga-brand-box'),
+          distance = listener.scrollTop,
+          step = total / 50;
+        console.log(jump, total, listener, distance, step)
+        if (total > distance) {
+          smoothDown()
+        } else {
+          let newTotal = distance - total + 100
+          step = newTotal / 50
+          smoothUp()
+        }
+
+        function smoothDown() {
+          if (distance < total) {
+            distance += step
+            listener.scrollTop = distance
+            setTimeout(smoothDown, 10)
+          } else {
+            listener.scrollTop = total
+          }
+        }
+
+        function smoothUp() {
+          if (distance > total) {
+            distance -= step
+            listener.scrollTop = distance
+            setTimeout(smoothUp, 10)
+          } else {
+            listener.scrollTop = total
+          }
+        }
+      },
+      onScroll() {
+        let scrolled = document.querySelector('.saga-brand-box').scrollTop
+        let jump = document.querySelectorAll('.d_jump')
+        for (let i = 0; i < jump.length; i++) {
+          if (jump[i].offsetTop >= scrolled) {
+            this.stepActive = i.toString()
+            break
+
+          }
+        }
+      },
+      remoteMethods(query) {
+        if (query !== '') {
+          this.loading = true
+          setTimeout(() => {
+            this.loading = false
+            this.brandList = this.list.filter(item => {
+              return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
+            })
+          }, 200)
+        } else {
+          this.brandList = []
+        }
+      },
+      focus() {
+        this.brandList = this.bbs
+      },
+      submitForm() {
+        this.$refs.ruleForm.validate((valid) => {
+          if (valid) {
+            console.log(this.ruleForm);
+          } else {
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      },
+    },
+    watch: {}
   }
 </script>
 <style lang="scss" scoped>
-  .saga-brand-box {
-    width: 100%;
+  @media screen and (max-width: 1500px) {
+    .saga-supplement-box {
+      height: 500px;
+      border: 1px solid #42b983;
+    }
+  }
+
+  .saga-supplement-box {
+    position: relative;
+    height: 800px;
     margin-top: 90px;
-    padding: 16px;
-    box-sizing: border-box;
-    background: rgba(255, 255, 255, 1);
-
-    .content {
-      display: inline-block;
-      width: calc(100% - 108px);
-
-      .title {
-        margin: 25px 70px;
-        padding-bottom: 10px;
-        font-size: 16px;
-        color: #1F2429;
-        border-bottom: 1px solid #EFF0F1;
+
+    .saga-brand-box {
+      width: 100%;
+      max-height: 800px;
+      /*margin-top: 90px;*/
+      padding: 16px;
+      box-sizing: border-box;
+      background: rgba(255, 255, 255, 1);
+      overflow-y: auto;
+
+      .reset-steps {
+        /*height: 780px;*/
+        position: absolute;
+        left: 0;
+        height: 100%;
       }
 
+      .d_jump {
+        display: inline-block;
+        width: calc(100% - 108px);
+        position: relative;
+        left: 100px;
 
-      /deep/ .el-input__inner {
-        width: 320px;
+        .title {
+          margin: 25px 70px;
+          padding-bottom: 10px;
+          font-size: 16px;
+          color: #1F2429;
+          border-bottom: 1px solid #EFF0F1;
+        }
+
+
+        /deep/ .el-input__inner {
+          width: 320px;
+        }
       }
+
+      .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
+        padding: 0 340px;
+      }
+    }
+
+    /deep/ .el-scrollbar__wrap {
+      overflow-x: hidden;
     }
   }
 
+  ::-webkit-scrollbar-thumb {
+    height: 50px;
+    outline-offset: -2px;
+    outline: 2px solid #dddee0;
+    border: 2px solid #dddee0;
+    background-color: #dddee0;
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
 </style>

+ 7 - 2
src/components/supplement/supplementTool.vue

@@ -6,7 +6,7 @@
         添加产品</p>
       <span class="fr">
       <el-button>取消</el-button>
-      <el-button type="primary">创建</el-button>
+      <el-button type="primary" @click="addProduct">创建</el-button>
       <el-button type="primary">创建并继续</el-button>
       </span>
     </div>
@@ -28,7 +28,11 @@
     data() {
       return {}
     },
-    methods: {}
+    methods: {
+      addProduct() {
+        this.$emit('addProduct')
+      }
+    }
   }
 </script>
 <style lang="scss" scoped>
@@ -39,6 +43,7 @@
     width: 100%;
     height: 70px;
     background: #fff;
+    z-index: 11;
 
     .saga-toolbar-main {
       width: 1200px;

+ 4 - 1
src/components/test.vue

@@ -13,6 +13,7 @@
     <search text="请输入品牌名称" type="content"></search>
     <el-button type="primary" @click="handBrand">添加产品</el-button>
     <addBrand ref="addBrand" title="添加品牌"></addBrand>
+    <test1></test1>
 
   </div>
 </template>
@@ -21,12 +22,14 @@
   import SelectTree from "./public/selectTree";
   import search from "./public/search";
   import addBrand from "./business/addBrand";
+  import test1 from "./test1";
   export default {
     name: "test",
     components: {
       SelectTree,
       search,
-      addBrand
+      addBrand,
+      test1
     },
     data() {
       return {

+ 3 - 0
src/components/test1.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>hello</div>
+</template>

+ 73 - 0
src/data/upDown.js

@@ -0,0 +1,73 @@
+const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'
+const Transition = {
+  'before-enter' (el) {
+    el.style.transition = elTransition
+    if (!el.dataset) el.dataset = {}
+
+    el.dataset.oldPaddingTop = el.style.paddingTop
+    el.dataset.oldPaddingBottom = el.style.paddingBottom
+
+    el.style.height = 0
+    el.style.paddingTop = 0
+    el.style.paddingBottom = 0
+  },
+
+  'enter' (el) {
+    el.dataset.oldOverflow = el.style.overflow
+    if (el.scrollHeight !== 0) {
+      el.style.height = el.scrollHeight + 'px'
+      el.style.paddingTop = el.dataset.oldPaddingTop
+      el.style.paddingBottom = el.dataset.oldPaddingBottom
+    } else {
+      el.style.height = ''
+      el.style.paddingTop = el.dataset.oldPaddingTop
+      el.style.paddingBottom = el.dataset.oldPaddingBottom
+    }
+
+    el.style.overflow = 'hidden'
+  },
+
+  'after-enter' (el) {
+    el.style.transition = ''
+    el.style.height = ''
+    el.style.overflow = el.dataset.oldOverflow
+  },
+
+  'before-leave' (el) {
+    if (!el.dataset) el.dataset = {}
+    el.dataset.oldPaddingTop = el.style.paddingTop
+    el.dataset.oldPaddingBottom = el.style.paddingBottom
+    el.dataset.oldOverflow = el.style.overflow
+
+    el.style.height = el.scrollHeight + 'px'
+    el.style.overflow = 'hidden'
+  },
+
+  'leave' (el) {
+    if (el.scrollHeight !== 0) {
+      el.style.transition = elTransition
+      el.style.height = 0
+      el.style.paddingTop = 0
+      el.style.paddingBottom = 0
+    }
+  },
+
+  'after-leave' (el) {
+    el.style.transition = ''
+    el.style.height = ''
+    el.style.overflow = el.dataset.oldOverflow
+    el.style.paddingTop = el.dataset.oldPaddingTop
+    el.style.paddingBottom = el.dataset.oldPaddingBottom
+  }
+}
+
+export default {
+  name: 'collapseTransition',
+  functional: true,
+  render (h, { children }) {
+    const data = {
+      on: Transition
+    }
+    return h('transition', data, children)
+  }
+}

+ 8 - 3
src/views/supplement/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="supplement">
-    <supplementTool/>
-    <sagaSupplement/>
+    <supplementTool @addProduct="addProduct"/>
+    <sagaSupplement ref="supplement"/>
   </div>
 </template>
 
@@ -11,7 +11,12 @@
 
   export default {
     name: "index",
-    components: {supplementTool, sagaSupplement}
+    components: {supplementTool, sagaSupplement},
+    methods: {
+      addProduct() {
+        this.$refs.supplement.submitForm()
+      }
+    }
   }
 </script>