Explorar o código

'品牌接口联调'

zhangyu %!s(int64=4) %!d(string=hai) anos
pai
achega
72f1bfc0b9

+ 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)
-}

+ 48 - 15
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,13 +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 in list" :key="item.id" :title="item.zhName">
+        <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.zhName}}</p>
-            <p class="saga-brand-enName" :title="item.enName">{{item.enName}}</p>
+            <p class="saga-brand-zhName">{{item.BrandCname}}</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>
@@ -57,24 +64,32 @@
 </template>
 
 <script>
-import brandList from "@/data/brandList"
+import { brandQuery } from "@/api/brand"
 export default {
   components: {},
   created() {
-    this.brandList = brandList
+    // 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: "英文排序",
       },
-      sort: "中文排序",
+      sortName: "中文排序",
+      sort: "zh",
       brandList: {},
       boxWidth: 0,
       stepActive: 0, //锚点
@@ -82,13 +97,31 @@ export default {
     }
   },
   methods: {
-    handleCommand(command) {// 切换排序方式
-      this.sort = this.sortMap[command]
+    handleCommand(command) { //切换排序方式
+      this.sortName = this.sortMap[command]
+      this.sort = command
+      this.getBrandData({Type: this.sort})
+    },
+    ChangeKeyWord(keyWord) { //品牌检索
+      let params = {
+        Filters: `BrandCname contain '${keyWord}' || BrandName contain '${keyWord}'`,
+        Type: this.sort
+      }
+      this.getBrandData(params)
     },
-    ChangeKeyWord(keyWord) {// 品牌检索
-      debugger
+    getBrandData(params) { //获取品牌接口
+      brandQuery(params, res => {
+        this.brandList = res.Content[0]
+      })
+    },
+    handleClickBrand(brand) { //点击品牌
+      if (this.pageType == 'brand') { //调用修改产品弹窗
+        this.$emit("updatebrand", brand)
+      } else {
+        console.log('跳转到产品页面')
+      }
     },
-    handleClickLetter(e) {
+    handleClickLetter(e) { //点击字母锚点
       let index = e.target.dataset.index
       if (index) {
         this.stepActive = index
@@ -126,7 +159,7 @@ export default {
         }
       }
     },
-    onScroll() {
+    onScroll() { //监听滚动条变化事件
       let scrolled = document.querySelector('.page-content-scroll').scrollTop
       let jump = document.querySelectorAll('.saga-brand-group')
       for (let i = 0; i < jump.length; i++) {

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

@@ -1,22 +1,17 @@
 <template>
-  <el-dialog :title="title" :visible.sync="outerVisible" class="add-brand" width="30%">
+  <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,125 +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;
-    }
-.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-bottom: 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;
-    }
+  .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

@@ -52,7 +52,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
     },
   }