Ver código fonte

Merge branch 'dev' of http://39.106.8.246:3003/zhangyu/PDM into dev

 Conflicts:
	src/components/brand/sagaBrand.vue
	src/components/business/addBrand.vue
shaun-sheep 4 anos atrás
pai
commit
8a2147a5d2

+ 51 - 0
src/api/brand/index.js

@@ -0,0 +1,51 @@
+/*
+ * @Author: zhangyu
+ * @Date: 2020-05-13 11:18:18
+ * @Info: 
+ * @LastEditTime: 2020-05-13 17:49:50
+ */
+import {baseUrl} from '@/api/scan/config'
+import http from '@/api/scan/httpUtil'
+
+//设备清单-查询当前设备类下的部件分类
+export function getPartsAllType(param, success) {
+  let url = `${baseUrl}/equip-component/equip-query/equip-compon`;
+  http.getJson(url, param, success)
+}
+
+//字典查询接口 竖井所有类型
+export function queryShaftType(success) {
+  let url = `${baseUrl}/datacenter/data-dictionary/query-shaft-type`;
+  http.getJson(url, {}, success)
+}
+
+//all - 查询数据字典 --列表表头
+export function getDataDictionary(param, success) {
+  let url = `${baseUrl}/datacenter/data-dictionary/project/query?type=${param.type}`;
+  let data = param.data
+  http.postJson(url, data, success)
+}
+
+//创建品牌
+export function brandCreate(param, success) {
+  let url = `${baseUrl}/prod/brand/create`;
+  http.postJson(url, param, success)
+}
+
+//根据id删除品牌
+export function brandDelete(param, success) {
+  let url = `${baseUrl}/prod/brand/delete`;
+  http.postJson(url, param, success)
+}
+
+//更改品牌信息
+export function brandUpdate(param, success) {
+  let url = `${baseUrl}/prod/brand/update`;
+  http.postJson(url, param, success)
+}
+
+//查询品牌信息
+export function brandQuery(param, success) {
+  let url = `${baseUrl}/prod/brand/query`;
+  http.postJson(url, param, success)
+}

+ 1 - 1
src/api/scan/httpUtil.js

@@ -1,6 +1,6 @@
 import {Message} from 'element-ui';
 import fetch from './fetch'
-import storage from '@/framework/utils/storage'
+import storage from '@/utils/storage'
 
 function successResponse(vm, response, success, failed) {
   let resp = response.data;

+ 0 - 27
src/api/scan/request.js

@@ -1,27 +0,0 @@
-import {baseUrl} from './config.js'
-import http from './httpUtil'
-
-//设备清单-查询当前设备类下的部件分类
-export function getPartsAllType(param, success) {
-  let url = `${baseUrl}/equip-component/equip-query/equip-compon`;
-  http.getJson(url, param, success)
-}
-
-//字典查询接口 竖井所有类型
-export function queryShaftType(success) {
-  let url = `${baseUrl}/datacenter/data-dictionary/query-shaft-type`;
-  http.getJson(url, {}, success)
-}
-
-//all - 查询数据字典 --列表表头
-export function getDataDictionary(param, success) {
-  let url = `${baseUrl}/datacenter/data-dictionary/project/query?type=${param.type}`;
-  let data = param.data
-  http.postJson(url, data, success)
-}
-
-//all - 查询数据字典 --列表表头
-export function cacheDictionary(param, success) {
-  let url = `${baseUrl}/datacenter/class-def/query-dict`;
-  http.postJson(url, param, success)
-}

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

@@ -2,7 +2,7 @@
  * @Author: zhangyu
  * @Date: 2020-05-08 18:37:31
  * @Info:
- * @LastEditTime: 2020-05-12 19:36:27
+ * @LastEditTime: 2020-05-13 09:56:16
  -->
 <template>
   <div class="saga-toolbar-box">
@@ -56,6 +56,7 @@ import remoteSearch from "../public/remoteSearch";
     height: 70px;
     background: #fff;
     box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
+    z-index: 11;
 
     .saga-toolbar-main {
       width: 1200px;

+ 106 - 83
src/components/brand/sagaBrand.vue

@@ -2,14 +2,14 @@
  * @Author: zhangyu
  * @Date: 2020-05-08 16:06:03
  * @Info:
- * @LastEditTime: 2020-05-12 19:31:47
+ * @LastEditTime: 2020-05-13 18:45:02
  -->
 <template>
   <div class="saga-brand-box" ref="brandBox">
     <div class="saga-brand-header">
       <el-dropdown @command="handleCommand" style="line-height: 40px;">
         <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>
@@ -26,19 +26,20 @@
     <div v-for="(list, letter) in brandList" :key="letter" v-show="list.length" class="saga-brand-group">
       <h3 class="saga-brand-letter">{{letter}}</h3>
       <ul class="saga-brand-list">
-        <li class="saga-brand-item"
-            :class="{ 'brand-new': item.new, item1200: boxWidth == 1200, item980: boxWidth == 980}"
-            v-for="(item,index) in list"
-            :key="item.id"
-            :title="item.BrandCname"
-            @click="brandDetail(item)"
+        <li
+          class="saga-brand-item"
+          :class="{ 'brand-new': item.new, item1200: boxWidth == 1200, item980: boxWidth == 980}"
+          v-for="item in list"
+          :key="item.BrandID"
+          :title="item.BrandCname"
+          @click="handleClickBrand(item)"
         >
           <div class="saga-brand-name">
             <p class="saga-brand-zhName">{{item.BrandCname}}</p>
-            <p class="saga-brand-enName" :title="item.enName">{{item.BrandName}}</p>
+            <p class="saga-brand-enName" :title="item.BrandName">{{item.BrandName}}</p>
           </div>
           <div class="saga-brand-logo">
-            <el-image style="width: 52px; height: 52px" :src="item.logoUrl" fit="fill">
+            <el-image style="width: 52px; height: 52px" :src="item.BrandLogo" fit="fill">
               <div slot="error" class="image-slot">
                 <i class="el-icon-picture-outline"></i>
               </div>
@@ -63,91 +64,113 @@
 </template>
 
 <script>
-  import brandList from "@/data/brandList"
-
-  export default {
-    components: {},
-    created() {
-      this.brandList = brandList
+import { brandQuery } from "@/api/brand"
+export default {
+  components: {},
+  created() {
+    // this.brandList = brandList
+    this.getBrandData({});
+  },
+  mounted() {
+    this.boxWidth = this.$refs.brandBox.clientWidth
+    let listener = document.querySelector('.page-content-scroll')
+    listener.addEventListener('scroll', this.onScroll)
+  },
+  props: {
+    pageType: {
+      type: String,
+      default: 'brand'
+    }, //页面类型(brand/product)
+  },
+  data() {
+    return {
+      sortMap: {
+        zh: "中文排序",
+        en: "英文排序",
+      },
+      sortName: "中文排序",
+      sort: "zh",
+      brandList: {},
+      boxWidth: 0,
+      stepActive: 0, //锚点
+      keyWord: "", //检索关键字
+    }
+  },
+  methods: {
+    handleCommand(command) { //切换排序方式
+      this.sortName = this.sortMap[command]
+      this.sort = command
+      this.getBrandData({Type: this.sort})
     },
-    mounted() {
-      this.boxWidth = this.$refs.brandBox.clientWidth
-      let listener = document.querySelector('.page-content-scroll')
-      listener.addEventListener('scroll', this.onScroll)
+    ChangeKeyWord(keyWord) { //品牌检索
+      let params = {
+        Filters: `BrandCname contain '${keyWord}' || BrandName contain '${keyWord}'`,
+        Type: this.sort
+      }
+      this.getBrandData(params)
+    },
+    getBrandData(params) { //获取品牌接口
+      brandQuery(params, res => {
+        this.brandList = res.Content[0]
+      })
     },
-    data() {
-      return {
-        sortMap: {
-          zh: "中文排序",
-          en: "英文排序",
-        },
-        sort: "中文排序",
-        brandList: {},
-        boxWidth: 0,
-        stepActive: 0, //锚点
-        keyWord: "", //检索关键字
+    handleClickBrand(brand) { //点击品牌
+      if (this.pageType == 'brand') { //调用修改产品弹窗
+        this.$emit("updatebrand", brand)
+      } else {
+        console.log('跳转到产品页面')
+        this.$router.push({path: 'brand/brandDetail', query: {id: item.id, name: item.BrandCname, productId: '3'}})
       }
     },
-    methods: {
-      handleCommand(command) {// 切换排序方式
-        this.sort = this.sortMap[command]
-      },
-      ChangeKeyWord(keyWord) {// 品牌检索
-        debugger
-      },
-      handleClickLetter(e) {
-        let index = e.target.dataset.index
-        if (index) {
-          this.stepActive = index
-          let jump = document.querySelectorAll('.saga-brand-group'),
-            total = jump[index].offsetTop - 127,// 获取需要滚动的距离
-            listener = document.querySelector('.page-content-scroll'),
-            distance = listener.scrollTop,
-            step = total / 50;
-          if (total > distance) {
-            smoothDown()
-          } else {
-            let newTotal = distance - total + 100
-            step = newTotal / 50
-            smoothUp()
-          }
+    handleClickLetter(e) { //点击字母锚点
+      let index = e.target.dataset.index
+      if (index) {
+        this.stepActive = index
+        let jump = document.querySelectorAll('.saga-brand-group'),
+          total = jump[index].offsetTop - 127,// 获取需要滚动的距离
+          listener = document.querySelector('.page-content-scroll'),
+          distance = listener.scrollTop,
+          step = total / 50;
+        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 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
-            }
+        function smoothUp() {
+          if (distance > total) {
+            distance -= step
+            listener.scrollTop = distance
+            setTimeout(smoothUp, 10)
+          } else {
+            listener.scrollTop = total
           }
         }
-      },
-      onScroll() {
-        let scrolled = document.querySelector('.page-content-scroll').scrollTop
-        let jump = document.querySelectorAll('.saga-brand-group')
-        for (let i = 0; i < jump.length; i++) {
-          if ((jump[i].offsetTop - 127) >= scrolled) {
-            this.stepActive = i
-            break
-          }
+      }
+    },
+    onScroll() { //监听滚动条变化事件
+      let scrolled = document.querySelector('.page-content-scroll').scrollTop
+      let jump = document.querySelectorAll('.saga-brand-group')
+      for (let i = 0; i < jump.length; i++) {
+        if ((jump[i].offsetTop - 127) >= scrolled) {
+          this.stepActive = i
+          break
         }
-      },
-      brandDetail(item) {
-        this.$router.push({path: 'brand/brandDetail', query: {id: item.id, name: item.BrandCname, productId: '3'}})
-
       }
     }
+  }
 }
 </script>
 <style lang="scss" scoped>

+ 147 - 115
src/components/business/addBrand.vue

@@ -1,22 +1,17 @@
 <template>
-  <el-dialog :title="title" :visible.sync="outerVisible" class="add-brand" width="600px">
+  <el-dialog :title="brand.BrandID?'品牌修改':'添加品牌'" :visible.sync="outerVisible" :before-close="handleClose" 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="请输入" />
+      <el-form-item label="中文名称:" prop="BrandCname">
+        <el-input v-model="ruleForm.BrandCname" placeholder="请输入" />
       </el-form-item>
       <el-form-item label="英文名称:">
-        <el-input v-model="ruleForm.enName"  placeholder="请输入"/>
+        <el-input v-model="ruleForm.BrandName" placeholder="请输入" />
       </el-form-item>
       <el-form-item label="品牌LOGO:">
         <div class="logo">
-          <el-upload
-            style="flex: 1"
-            class="avatar-uploader"
-            action="https://jsonplaceholder.typicode.com/posts/"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload">
-            <img v-if="imageUrl" :src="imageUrl" class="avatar">
+          <el-upload style="flex: 1" class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
+            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+            <img v-if="ruleForm.BrandLogo" :src="ruleForm.BrandLogo" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
           <span class="imgTip">支持格式GIF、JPG、JPEG、PNG,文件80K以内,建议尺寸80PX*80PX</span>
@@ -24,12 +19,13 @@
 
       </el-form-item>
     </el-form>
-    <el-dialog
-      width="20%"
-      title="确定要删除该品牌吗?"
-      :visible.sync="innerVisible"
-      :show-close="false"
-      class="child-dialog"
+    <div slot="footer" class="dialog-footer">
+      <el-button v-if="brand.BrandID" @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="submitForm('ruleForm')">{{brand.BrandID?'保 存':'添 加'}}</el-button>
+    </div>
+
+    <el-dialog width="420px" 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>
@@ -38,131 +34,167 @@
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="innerVisible = false">取 消</el-button>
-        <el-button type="danger" @click="innerVisible = true">删除</el-button>
+        <el-button type="danger" @click="handleClickDelete">删除</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="outerVisible = true">添加</el-button>
-    </div>
   </el-dialog>
 </template>
 <script>
-  export default {
-    name: "addBrand",
-    props: ['title'],
-    data() {
-      return {
-        outerVisible: false,
-        innerVisible: false,
-        dialogImageUrl: '',
-        dialogVisible: false,
-        imageUrl: '',
-        ruleForm: {
-          zhName: '',
-          enName: ''
-        },
-        rules: {
-          zhName: [{required: true, message: '请输入中文名称', trigger: 'blur'}],
+import { brandCreate, brandDelete, brandUpdate } from "@/api/brand"
+export default {
+  name: "addBrand",
+  props: {
+    brand: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    return {
+      outerVisible: false,
+      innerVisible: false,
+      imageUrl: '',
+      ruleForm: {
+        BrandCname: '',
+        BrandName: '',
+        BrandLogo: '',
+      },
+      rules: {
+        BrandCname: [{ required: true, message: '请输入中文名称', trigger: 'blur' }],
 
-        }
       }
+    }
+  },
+  methods: {
+    handleAvatarSuccess(res, file) {
+      this.imageUrl = URL.createObjectURL(file.raw);
     },
-    methods: {
-      handleAvatarSuccess(res, file) {
-        this.imageUrl = URL.createObjectURL(file.raw);
-      },
-      beforeAvatarUpload(file) {
-        const isJPG = file.type === 'image/jpeg';
-        const isLt2M = file.size / 1024 / 1024 < 2;
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isLt2M = file.size / 1024 / 1024 < 2;
 
-        if (!isJPG) {
-          this.$message.error('上传头像图片只能是 JPG 格式!');
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+      }
+      return isJPG && isLt2M;
+    },
+    submitForm(formName) { //(添加/修改)
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.brand.BrandID) { //修改品牌
+            brandUpdate(params, res => {
+              this.outerVisible = false
+              this.$message.sucsee('保存成功!')
+            })
+          } else { //添加品牌
+            brandCreate(params, res => {
+              this.outerVisible = false
+              this.$message.sucsee('添加成功!')
+            })
+          }
+        } else {
+          console.log('error submit!!')
+          return false
         }
-        if (!isLt2M) {
-          this.$message.error('上传头像图片大小不能超过 2MB!');
+      });
+    },
+    handleClickDelete() { //删除品牌
+      brandDelete({BrandID: this.BrandID}, res => {
+        this.innerVisible = false
+        this.outerVisible = false
+        this.$message.sucsee('删除成功!')
+      })
+    },
+    handleClose() { //关闭弹窗回调
+      this.ruleForm = { BrandCname: '', BrandName: '', BrandLogo: '' }
+      this.outerVisible = false
+    },
+  },
+  watch: {
+    'brand.BrandID': {
+      handler(newName, oldName) {
+        if (this.brand.BrandID) {
+          this.ruleForm.BrandCname = this.brand.BrandCname
+          this.ruleForm.BrandName = this.brand.BrandName || ''
+          this.ruleForm.BrandLogo = this.brand.BrandLogo || ''
         }
-        return isJPG && isLt2M;
-      }
+      },
+      immediate: true,
     }
   }
+}
 </script>
 
 <style scoped lang="less">
-  .add-brand {
-    /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;
+.add-brand {
+  /deep/ .el-dialog__header {
+    border-bottom: 1px solid #e4e5e7;
+  }
+  .reset-form {
+    width: 320px;
+    margin: 0 auto;
 
-  .logo {
-    display: flex;
-    .imgTip{
-      font-size: 12px;
-      color:#C3C7CB;
-      line-height:18px;
-      margin-left: 8px;
-      margin-top: 78px;
+    .logo {
+      display: flex;
+      .imgTip {
+        font-size: 12px;
+        color: #c3c7cb;
+        line-height: 18px;
+        margin-left: 8px;
+        margin-bottom: 78px;
+      }
     }
   }
 }
-  }
 
-  .child-dialog {
-    /deep/ .el-dialog__body {
-      padding: 0;
-    }
+.child-dialog {
+  /deep/ .el-dialog__body {
+    padding: 0;
   }
+}
 
-  .header-title {
-    .del-text {
-      color: #1F2329;
-      font-size: 16px;
-      font-weight: 500;
-      display: inline-block;
-    }
+.header-title {
+  .del-text {
+    color: #1f2329;
+    font-size: 16px;
+    font-weight: 500;
+    display: inline-block;
+  }
 
-    .del-tip {
-      margin-left: 39px;
-      color: #646A73;
-      margin-top: 8px;
-    }
+  .del-tip {
+    margin-left: 39px;
+    color: #646a73;
   }
+}
 </style>
 <style>
-  .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
 
-  .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
-  }
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
 
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 112px;
-    height: 112px;
-    line-height: 112px;
-    text-align: center;
-  }
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 112px;
+  height: 112px;
+  line-height: 112px;
+  text-align: center;
+}
 
-  .avatar {
-    width: 112px;
-    height: 112px;
-    display: block;
-  }
+.avatar {
+  width: 112px;
+  height: 112px;
+  display: block;
+}
 </style>

+ 1 - 1
src/components/product/sagaProduct.vue

@@ -51,7 +51,7 @@
       </div>
     </div>
     <div class="brand">
-      <saga-brand></saga-brand>
+      <saga-brand pageType="product"></saga-brand>
     </div>
   </div>
 </template>

+ 10 - 4
src/views/brand/index.vue

@@ -2,15 +2,15 @@
  * @Author: zhangyu
  * @Date: 2020-05-08 15:55:30
  * @Info:
- * @LastEditTime: 2020-05-12 19:27:07
+ * @LastEditTime: 2020-05-13 17:37:58
  -->
 <template>
   <div>
     <saga-toolbar @addbrand="handleAddBrand"></saga-toolbar>
     <div style="margin-top: 90px;">
-      <saga-brand></saga-brand>
+      <saga-brand pageType="brand" @updatebrand="handleAddBrand"></saga-brand>
     </div>
-    <addBrand ref="addBrand" title="添加品牌"></addBrand>
+    <addBrand ref="addBrand" :brand="brand"></addBrand>
   </div>
 </template>
 
@@ -29,10 +29,16 @@ export default {
   mounted() {},
   data() {
     return {
+      brand: {}, //选择的品牌对象
     }
   },
   methods: {
-    handleAddBrand() {
+    handleAddBrand(brand) {
+      if (brand && brand.BrandID) {
+        this.brand = brand
+      } else {
+        this.brand = {}
+      }
       this.$refs.addBrand.outerVisible = true
     },
   }