Bladeren bron

拉代码

shaun-sheep 5 jaren geleden
bovenliggende
commit
45c0a76638

+ 8 - 2
src/components/business/addBrand.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="title" :visible.sync="outerVisible" class="add-brand" width="30%">
+  <el-dialog :title="title" :visible.sync="outerVisible" class="add-brand" width="600px">
     <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" class="reset-form">
       <el-form-item label="中文名称:" prop="zhName">
         <el-input v-model="ruleForm.zhName" placeholder="请输入" />
@@ -95,6 +95,11 @@
     /deep/ .el-dialog__header {
       border-bottom: 1px solid #E4E5E7;
     }
+    /deep/.el-dialog__title{
+      font-size: 16px;
+      color:#1F2329;
+      font-weight: 500;
+    }
 .reset-form {
   width: 320px;
   margin: 0 auto;
@@ -106,7 +111,7 @@
       color:#C3C7CB;
       line-height:18px;
       margin-left: 8px;
-      margin-bottom: 78px;
+      margin-top: 78px;
     }
   }
 }
@@ -129,6 +134,7 @@
     .del-tip {
       margin-left: 39px;
       color: #646A73;
+      margin-top: 8px;
     }
   }
 </style>

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

@@ -0,0 +1,107 @@
+<template>
+  <div class="saga-toolbar-box">
+    <div class="saga-toolbar-main">
+      <selectTree
+        :props="props"
+        :options="optionData"
+        :value="valueId"
+        :clearable="isClearable"
+        :accordion="isAccordion"
+        @getValue="getValue($event)"/>
+      <span style="float: right;">
+        <el-button type="primary" @click="handBrand">添加产品</el-button>
+      </span>
+    </div>
+
+
+    <addBrand ref="addBrand" title="添加品牌"></addBrand>
+
+  </div>
+</template>
+
+<script>
+  import selectTree from "@/components/public/selectTree";
+  import addBrand from "@/components/business/addBrand";
+
+  export default {
+    components: {selectTree, addBrand},
+
+    created() {
+    },
+    mounted() {
+    },
+    data() {
+      return {
+        isClearable: true,      // 可清空(可选)
+        isAccordion: true,      // 可收起(可选)
+        valueId: 20,            // 初始ID(可选)
+        props: {                // 配置项(必选)
+          value: 'id',
+          label: 'name',
+          children: 'children',
+          // disabled:true
+        },
+        // 选项列表(必选)
+        list: [
+          {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: 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",}
+        ],
+      }
+    },
+    methods: {
+      handBrand() {
+        this.$refs.addBrand.outerVisible = true
+      },
+      // 取值
+      getValue(value) {
+        this.valueId = value
+        console.log(this.valueId);
+      },
+    },
+    computed: {
+      /* 转树形数据 */
+      optionData() {
+        let cloneData = JSON.parse(JSON.stringify(this.list))      // 对源数据深度克隆
+        return cloneData.filter(father => {                      // 循环所有项,并添加children属性
+          let branchArr = cloneData.filter(child => father.id == child.parentId);       // 返回每一项的子级数组
+          branchArr.length > 0 ? father.children = branchArr : ''   //给父级添加一个children属性,并赋值
+          return father.parentId == 0;      //返回第一层
+        });
+      }
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .saga-toolbar-box {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 70px;
+    background: #fff;
+
+    .saga-toolbar-main {
+      width: 1200px;
+      height: 100%;
+      margin: auto;
+      padding-top: 20px;
+
+    }
+
+
+    .reset-input {
+      /deep/ .el-input__inner {
+        background: #F6F6F6;
+
+      }
+    }
+  }
+</style>

+ 44 - 0
src/components/product/detail/sagaProductDetail.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <div class="saga-brand-box mt90">
+
+    </div>
+    <div class="saga-brand-box mt20">
+<detailTable/>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  import detailTable from "../../public/table";
+  export default {
+    components: {detailTable},
+    created() {
+    },
+    mounted() {
+    },
+    data() {
+      return {}
+    },
+    methods: {
+
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .mt90{
+    margin-top: 90px;
+  }
+  .mt20{
+    margin-top: 20px;
+  }
+  .saga-brand-box {
+    width: 100%;
+    padding: 16px;
+    box-sizing: border-box;
+    background: rgba(255, 255, 255, 1);
+
+  }
+
+</style>

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

@@ -13,14 +13,13 @@
             <img src="../../assets/images/rectangle.png" height="12">
             <span>某某系统</span></div>
           <div class="sys">
-            <span>燃气石油气瓶</span>
-            <span>燃气石油气瓶</span>
-            <span>燃气石油气瓶</span>
-            <span>燃气石油气瓶</span>
-            <span>燃气石油气瓶</span>
-            <span>燃气调压箱</span>
-            <span>燃气调压箱</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 slot="reference" class="classification">
             <p class="name">给排水专业—WS</p>
@@ -35,20 +34,20 @@
             <img src="../../assets/images/rectangle.png" height="12">
             <span>某某系统</span></div>
           <div class="sys">
-            <span>燃气石油气瓶</span>
-            <span>燃气石油气瓶</span>
-            <span>燃气石油气瓶</span>
-            <span>燃气石油气瓶</span>
-            <span>燃气石油气瓶</span>
-            <span>燃气调压箱</span>
-            <span>燃气调压箱</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 slot="reference" class="classification">
             <p class="name">给排水专业—WS</p>
             <p class="introduce">建筑各类生活、景观用水给水排水系统、燃气系统</p>
           </div>
         </el-popover>
+
       </div>
     </div>
     <div class="brand">
@@ -59,7 +58,15 @@
 
 <script>
   export default {
-    name: "productBrand"
+    name: "productBrand",
+    data() {
+      return {}
+    },
+    methods: {
+      handleDetail() {
+        this.$router.push({path: '/detail', query: {id: '1', name: '2', productId: '3'}})
+      }
+    },
   }
 </script>
 
@@ -149,13 +156,19 @@
     }
 
     .sys {
+      margin-left: 6px;
       span {
-        margin-right: 40px;
-        text-indent: 6px;
+        /*text-indent: 6px;*/
         display: inline-block;
         cursor: pointer;
         color: #8D9399;
+        line-height: 25px;
+        margin-right: 40px;
 
+        b {
+          display: inline-block;
+          width: 20px;
+        }
 
       }
 

+ 60 - 0
src/components/public/table.vue

@@ -0,0 +1,60 @@
+<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-column label="管理" align="center">
+      <template slot-scope="scope">
+        <el-button
+          type="text"
+          @click="handleEdit(scope.$index,scope.row)"
+        >修改
+        </el-button>
+        <el-button
+          type="text"
+          @click="handleDelete(scope.$index,scope.row)"
+        >删除
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    name: "table",
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }]
+      }
+    },
+    methods: {
+      handleEdit(index, row) {
+
+      },
+      handleDelete(index, row) {
+
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,7 +1,35 @@
 <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>
+
 </template>
 
 <script>
@@ -12,7 +40,11 @@
     mounted() {
     },
     data() {
-      return {}
+      return {
+        tabPosition: 'left',
+        ruleForm: '',
+        rules: []
+      }
     },
     methods: {}
   }
@@ -24,8 +56,24 @@
     padding: 16px;
     box-sizing: border-box;
     background: rgba(255, 255, 255, 1);
-    /*box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);*/
 
+    .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;
+      }
+
+
+      /deep/ .el-input__inner {
+        width: 320px;
+      }
+    }
   }
 
 </style>

+ 7 - 2
src/router/system.js

@@ -1,11 +1,11 @@
 import LayoutMain from '@/framework/layout/Main'
-import Dasboard from '@/views/dasboard'
 //首页登录页面
 import login from '@/framework/layout'
 // 品牌管理
 import brand from '@/views/brand'
 //产品管理
 import product from "@/views/product/index"
+import detail from "@/views/product/detail"
 //从已有数据填充产品
 import supplement from "@/views/supplement"
 //测试页面
@@ -39,8 +39,13 @@ export default [
     children: [{
       path: '',
       name: 'product',
-      component: product
+      component: product,
     },
+      {
+        path: '/detail',
+        name: 'detail',
+        component: detail,
+      }
     ]
   },
   // 品牌管理

+ 19 - 0
src/views/product/detail/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="productDetailTool">
+    <productDetailTool/>
+    <sagaProductDetail/>
+  </div>
+</template>
+
+<script>
+  import productDetailTool from "../../../components/product/detail/productDetailTool";
+import sagaProductDetail from "../../../components/product/detail/sagaProductDetail";
+  export default {
+    name: "index",
+    components: {productDetailTool,sagaProductDetail}
+  }
+</script>
+
+<style scoped>
+
+</style>