shaun-sheep 4 lat temu
rodzic
commit
070e91c40a

+ 106 - 6
src/components/business/addBrand.vue

@@ -1,31 +1,131 @@
-
 <template>
+  <el-dialog :title="title" :visible.sync="outerVisible" class="add-brand" width="30%">
+    <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="请输入" />
+      </el-form-item>
+      <el-form-item label="英文名称:">
+        <el-input v-model="ruleForm.enName"  placeholder="请输入"/>
+      </el-form-item>
+      <el-form-item label="品牌LOGO:">
+        <div style="display:inline-block;">
+          <el-upload
+            action="https://jsonplaceholder.typicode.com/posts/"
+            list-type="picture-card"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove"
+            :before-upload="beforeAvatarUpload"
+            :limit="1"
+            accept=".jpg, .png, .jpeg"
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
+<!--          <span>支持格式GIF、JPG、JPEG、PNG,文件80K以内,建议尺寸80PX*80PX</span>-->
 
-  <el-dialog title="添加品牌" :visible.sync="outerVisible">
+        </div>
+        <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt="">
+        </el-dialog>
+      </el-form-item>
+    </el-form>
     <el-dialog
-      width="30%"
+      width="20%"
       title="确定要删除该品牌吗?"
       :visible.sync="innerVisible"
+      :show-close="false"
+      class="child-dialog"
       append-to-body>
+      <div slot="title" class="header-title">
+        <span class="el-icon-info" style="font-size: 24px;color: #F54E45;margin-right: 10px"> </span>
+        <span class="del-text">确定要删除该品牌吗?</span>
+        <p class="del-tip">删除后该品牌的所有信息将被删除,不可恢复</p>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="innerVisible = false">取 消</el-button>
+        <el-button type="danger" @click="innerVisible = true">删除</el-button>
+      </div>
     </el-dialog>
+
     <div slot="footer" class="dialog-footer">
+      <el-button @click="innerVisible = true" type="text" style="padding-right: 10px;color: #646C73">删除品牌</el-button>
       <el-button @click="outerVisible = false">取 消</el-button>
-      <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
+      <el-button type="primary" @click="outerVisible = true">添加</el-button>
     </div>
   </el-dialog>
 </template>
 <script>
   export default {
     name: "addBrand",
+    props: ['title'],
     data() {
       return {
         outerVisible: false,
-        innerVisible: false
+        innerVisible: false,
+        dialogImageUrl: '',
+        dialogVisible: false,
+        imageUrl: '',
+        ruleForm: {
+          zhName: '',
+          enName: ''
+        },
+        rules: {
+          zhName: [{required: true, message: '请输入中文名称', trigger: 'blur'}],
+
+        }
+      }
+    },
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+        return isJPG && isLt2M;
       }
     }
   }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+  .add-brand {
+    /deep/ .el-dialog__header {
+      border-bottom: 1px solid #E4E5E7;
+    }
+.reset-form{
+  width: 320px;
+  margin: 0 auto;
+}
+  }
+
+  .child-dialog {
+    /deep/ .el-dialog__body {
+      padding: 0;
+    }
+  }
 
+  .header-title {
+    .del-text {
+      color: #1F2329;
+      font-size: 16px;
+      font-weight: 500;
+      display: inline-block;
+    }
+
+    .del-tip {
+      margin-left: 39px;
+      color: #646A73;
+    }
+  }
 </style>

+ 1 - 1
src/components/test.vue

@@ -12,7 +12,7 @@
     <search text="请输入关键词/拼音/首字母" type="header"></search>
     <search text="请输入品牌名称" type="content"></search>
     <el-button type="primary" @click="handBrand">添加产品</el-button>
-    <addBrand ref="addBrand"></addBrand>
+    <addBrand ref="addBrand" title="添加品牌"></addBrand>
   </div>
 </template>
 

+ 8 - 0
src/router/system.js

@@ -4,6 +4,8 @@ import Dasboard from '@/views/dasboard'
 import login from '@/framework/layout'
 //测试页面
 import test from '@/components/test'
+//产品管理
+import product from "@/views/product";
 /**模型管理 */
 import modelFile from '@/views/model/file'
 
@@ -25,6 +27,12 @@ export default [
     name: 'login',
     component: login,
   },
+  //产品管理
+  {
+    path: '/product',
+    name: 'product',
+    component: product,
+  },
   {
     path: '/test',
     name: 'test',

+ 222 - 0
src/views/product.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="product">
+    <div class="top">
+      <div class="top-menu">
+        <selectTree
+          :props="props"
+          :options="optionData"
+          :value="valueId"
+          :clearable="isClearable"
+          :accordion="isAccordion"
+          @getValue="getValue($event)"/>
+        <span style="float: right;">
+              <search text="请输入关键词/拼音/首字母" type="header"></search>&nbsp;
+              <el-button type="primary" @click="handBrand">添加产品</el-button>
+              <addBrand ref="addBrand" title="添加品牌"></addBrand>
+          </span>
+      </div>
+    </div>
+    <div class="content">
+      <div class="sidebar">
+        <div class="title">产品分类</div>
+        <div class="product-classification">
+          <el-popover
+            trigger="hover"
+            placement="right"
+            width="600">
+            <p>某某系统</p>
+            <div class="sys">
+              <span>燃气调压箱</span>
+              <span>燃气调压箱</span>
+              <span>燃气调压箱</span>
+              <span>燃气调压箱</span>
+              <span>燃气调压箱</span>
+              <span>燃气调压箱</span>
+              <span>燃气调压箱</span>
+
+            </div>
+            <!--            <div style="text-align: right; margin: 0">-->
+            <!--              <el-button size="mini" type="text" @click="visible = false">取消</el-button>-->
+            <!--              <el-button type="primary" size="mini" @click="visible = false">确定</el-button>-->
+            <!--            </div>-->
+            <div slot="reference" class="classification">
+              <p class="name">给排水专业—WS</p>
+              <p class="introduce">建筑各类生活、景观用水给水排水系统、燃气系统</p>
+            </div>
+
+          </el-popover>
+
+        </div>
+      </div>
+      <div class="brand">
+        <div class="brand-top">
+          <el-dropdown style="margin-left: 20px">
+              <span class="el-dropdown-link">
+                下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>黄金糕</el-dropdown-item>
+              <el-dropdown-item>狮子头</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <!--              <search text="请输入品牌名称" type="content"></search>-->
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import selectTree from "../components/public/selectTree";
+  import search from "../components/public/search"
+  import addBrand from "../components/business/addBrand";
+
+  export default {
+    name: "product",
+    components: {selectTree, search, addBrand},
+    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", rank: 1},
+          {id: 2, parentId: 0, name: "一级菜单B", rank: 1},
+          {id: 3, parentId: 0, name: "一级菜单C", rank: 1},
+          {id: 4, parentId: 1, name: "二级菜单A-A", rank: 2},
+          {id: 5, parentId: 1, name: "二级菜单A-B", rank: 2},
+          {id: 6, parentId: 2, name: "二级菜单B-A", rank: 2},
+          {id: 7, parentId: 4, name: "三级菜单A-A-A", rank: 3},
+          {id: 20, parentId: 0, name: "一级菜单C", rank: 1},
+          {id: 39, parentId: 0, name: "一级菜单C", rank: 1},
+          {id: 40, parentId: 0, name: "一级菜单end", rank: 1}
+        ]
+      };
+    },
+    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;      //返回第一层
+        });
+      }
+    },
+    methods: {
+      // 取值
+      getValue(value) {
+        this.valueId = value
+        console.log(this.valueId);
+      },
+      handBrand() {
+        this.$refs.addBrand.outerVisible = true
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  @bgc: #fff;
+  .product {
+    background: #F7F9FA;
+    height: 100%;
+
+    .top {
+      height: 70px;
+      width: 100%;
+      background: @bgc;
+
+      .top-menu {
+        width: 1200px;
+        margin: 0 auto;
+        padding-top: 20px;
+      }
+    }
+
+    .content {
+      width: 1200px;
+      margin: 20px auto 0 auto;
+      display: flex;
+
+      .sidebar {
+        /*margin-top: 20px;*/
+        width: 200px;
+        background: @bgc;
+        display: inline-block;
+
+        .title {
+          height: 40px;
+          line-height: 40px;
+          background: #CBDFFC;
+          color: #3A8DDE;
+          padding-left: 10px;
+        }
+
+        .product-classification {
+          background: @bgc;
+          /*margin-top: -19px;*/
+
+          .classification {
+            cursor: pointer;
+            padding: 10px;
+            border-bottom: 1px solid #EFF0F1;
+
+            .name {
+              color: #1F2429;
+            }
+
+            .introduce {
+              color: #8D9399;
+            }
+          }
+
+          .classification:hover {
+            background: #E1F2FF;
+
+            .name {
+              color: #3A8DDE;
+            }
+
+            .introduce {
+              color: #3A8DDE;
+            }
+          }
+
+          .sys {
+            padding: 10px;
+
+            span {
+              margin: 0 20px;
+              color: #8D9399;
+              display: inline-block;
+            }
+          }
+        }
+      }
+
+      .brand {
+        margin-left: 20px;
+        background: @bgc;
+        flex-grow: 1;
+
+        .brand-top {
+          height: 57px;
+          line-height: 57px;
+        }
+      }
+    }
+
+
+  }
+</style>