Browse Source

完善功能,添加上传组件,优化组件

shaun-sheep 4 years ago
parent
commit
ee6c21ecf4

+ 2 - 0
src/api/product/index.js

@@ -0,0 +1,2 @@
+import {baseUrl} from '@/api/scan/config'
+import http from '@/api/scan/httpUtil'

+ 2 - 3
src/components/brand/detail/sagaBrandDetail.vue

@@ -35,20 +35,19 @@
 </template>
 
 <script>
-  import detailTable from "../../public/table";
+  import detailTable from "../../public/detailTable";
 
   export default {
     components: {detailTable},
     created() {
     },
     mounted() {
-      this.limitSys = this.sys.length
     },
     data() {
       return {
         more: '更多',
         limitSys: 18,
-        isShow: true,
+        isShow: false,
         sys: [
           {
             id: 1,

+ 33 - 32
src/components/brand/sagaBrand.vue

@@ -64,38 +64,39 @@
 </template>
 
 <script>
-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: "", //检索关键字
-    }
-  },
+  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]

+ 1 - 1
src/components/product/detail/sagaProductDetail.vue

@@ -71,7 +71,7 @@
 </template>
 
 <script>
-  import detailTable from "../../public/table";
+  import detailTable from "../../public/detailTable";
   import brandList from "@/data/brandList"
 
   export default {

+ 7 - 3
src/components/product/productTool.vue

@@ -1,17 +1,20 @@
 <template>
   <div class="saga-toolbar-box">
     <div class="saga-toolbar-main">
+      <template v-if="showSelect">
         <selectTree
           :props="props"
           :options="optionData"
           :value="valueId"
           :clearable="isClearable"
           :accordion="isAccordion"
-          @getValue="getValue($event)"/>
-        <span style="float: right;">
+          @getValue="getValue($event)"
+        />
+      </template>
+
+      <span style="float: right;">
            <remoteSearch/>
               <el-button type="primary" @click="handProduct">添加产品</el-button>
-
           </span>
     </div>
   </div>
@@ -23,6 +26,7 @@
 
   export default {
     components: {selectTree, remoteSearch},
+    props:['showSelect'],
 
     created() {
     },

+ 1 - 1
src/components/public/table.vue

@@ -22,7 +22,7 @@
 
 <script>
   export default {
-    name: "table",
+    name: "detailTable",
     data() {
       return {
         tableData: [{

+ 199 - 0
src/components/public/uploadFiles.vue

@@ -0,0 +1,199 @@
+<template>
+
+  <div id="uploadFile">
+    <el-upload
+      class="upload-file"
+      action
+      drag
+      :show-file-list="false"
+      :http-request="uploadAndSubmit">
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
+    </el-upload>
+    <div v-show="item && filesArr.length" v-for="(item,index) in filesArr" :key="item.Key">
+      <p class="file-list">
+        <span class="file-name" :title="item.Name">{{item.Name}}</span>
+        <!-- <i title="下载" class="el-icon-download" style="margin-left:10px; cursor:pointer" @click="download(item)"></i>-->
+        <span v-if="!readOnly"
+              title="删除"
+              class="el-icon-circle-close file-icon"
+              @click="deleteFile(index,item)"></span>
+      </p>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  import tools from "@/utils/tools";
+
+  export default {
+    props: {
+      keysArr: {
+        type: [Array, String],
+        default: function () {
+          return []
+        }
+      },
+      readOnly: {
+        type: Boolean,
+        default: false
+      },
+      defined: null,
+
+
+    },
+    data() {
+      return {
+        filesArr: [],
+      };
+    },
+    created() {
+      this.fileFalg()
+      // this.resetFile()
+    },
+    computed: {},
+    methods: {
+      //判断是否为空
+      fileFalg() {
+        let type = typeof (this.keysArr)
+        if (type == 'string') {
+          this.filesArr = [this.keysArr]
+        } else {
+          this.filesArr = tools.deepCopy(this.keysArr)
+        }
+        this.filesArr = tools.deepCopy(this.keysArr)
+        if (!this.keysArr) {
+          this.filesArr = []
+        }
+      },
+      resetFile() {
+        this.filesArr = []
+      },
+
+
+      //点击下载
+      // download(item) {
+      //   if (item.Key) {
+      //     let a = document.createElement("a");
+      //     a.href = `/image-service/common/file_get/${item.Key}?systemId=dataPlatform`;
+      //     a.download = `${item.Name}`;
+      //     a.click();
+      //     document.body.removeChild(a);
+      //   } else {
+      //     this.$message({
+      //       message: "无该获取该文件资源链接!",
+      //       type: "error"
+      //     });
+      //   }
+      // },
+
+      //删除图片
+      deleteFile(i, key) {
+        this.filesArr.splice(i, 1);
+        this.$emit("change", this.filesArr, this.defined);
+      },
+
+      //上传
+      uploadAndSubmit(item) {
+        let file = item.file;
+        let size = item.file.size;
+        if (size > 50 * 1024 * 1024) { //文件大于50M
+          this.$message.error('文件不可大于50M,请重新上传')
+          return false
+        } else {
+          let reader = new FileReader();
+          let vm = this;
+          let fileType = file.name.split(".");
+          let type = fileType[fileType.length - 1];
+          let key = "&key=" + fileType[0] + file.uid + "." + type
+          // let CreateTime = tools.formatDate(new Date(file.lastModified))
+          reader.onloadstart = function () {
+            // 这个事件在读取开始时触发
+          };
+          reader.onprogress = function (p) {
+            // 这个事件在读取进行中定时触发
+            let value = (p.loaded / size) * 100;
+          };
+
+          reader.onload = function () {
+            // 这个事件在读取成功结束后触发
+          };
+          reader.onloadend = function () {
+            // 这个事件在读取结束后,无论成功或者失败都会触发
+            if (reader.error) {
+            } else {
+              // document.getElementById("bytesRead").textContent = file.size;
+              // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
+              var xhr = new XMLHttpRequest();
+              xhr.open(
+                /* method */
+                "POST",
+                /* target url */
+                "/image-service/common/file_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true" + key
+                /*, async, default to true */
+              );
+              //xhr.overrideMimeType("application/octet-stream");
+              xhr.send(reader.result);
+              xhr.onreadystatechange = function () {
+                if (xhr.readyState == 4) {
+                  console.log(xhr)
+                  if (xhr.status == 200) {
+                    let fileObject = {
+                      Key: key.split("=")[1],
+                      Type: type,
+                      Name: file.name,
+                      // CreateTime,
+                      SystemId: 'dataPlatform'
+                    }
+
+                    vm.filesArr.push(fileObject);
+                    vm.$emit("change", vm.filesArr, vm.defined);
+                  } else {
+                    this.$message.error(res.data.ResultMsg)
+                  }
+                }
+              };
+            }
+          };
+          reader.readAsArrayBuffer(file);
+        }
+
+      }
+    },
+    watch: {
+      keysArr: function (val) {
+        this.fileFalg()
+      }
+    }
+  };
+</script>
+<style lang="less" scoped>
+  #uploadFile {
+    .file-list {
+      border: 1px solid #E9E9E9;
+      height: 48px;
+      width: 360px;
+      line-height: 48px;
+      border-radius: 4px;
+      margin-bottom: 10px;
+
+      .file-name {
+        display: inline-block;
+        margin-left: 10px;
+        width: 300px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .file-icon {
+        float: right;
+        cursor: pointer;
+        line-height: 48px;
+        margin-right: 15px
+      }
+    }
+  }
+</style>
+

+ 32 - 13
src/components/supplement/sagaSupplement.vue

@@ -1,6 +1,5 @@
 <template>
   <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
@@ -19,7 +18,7 @@
               <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-select v-model="ruleForm.product" placeholder="请选择">
                 <el-option-group
                   v-for="group in productList"
                   :key="group.label"
@@ -54,8 +53,6 @@
                   :label="item.label"
                   :value="item.value"
                 />
-
-
               </el-select>
             </el-form-item>
             <el-form-item label="型号" prop="type">
@@ -109,33 +106,51 @@
               附件信息
             </p>
             <el-form-item label="设备文档:">
-              <uploadDrag/>
+              <uploadFiles
+                :readOnly="read"
+                :keysArr="keysArr"
+                @change="changeItem"
+              />
             </el-form-item>
           </section>
         </el-form>
       </div>
-    </el-scrollbar>
   </div>
 </template>
 
 <script>
-  import uploadDrag from "../public/uploadDrag";
+  import uploadFiles from "../public/uploadFiles";
 
   export default {
-    components: {uploadDrag},
+    components: {uploadFiles},
     created() {
+
     },
     mounted() {
+      // this.$refs.ruleForm.validate(valid => {
+      //   console.log(valid)
+      // })
+
       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() {
+      let checkBrand = (rule, value, callback) => {
+        if (value == '') {
+          return callback(new Error('请选择品牌'))
+        } else {
+          callback()
+        }
+      }
       return {
+        read: false,
         list: [],
+        keysArr: [],
         loading: false,
         states: ["Alabama", "Alaska", "Arizona",
           "Arkansas", "California", "Colorado",
@@ -230,13 +245,13 @@
         },
         rules: {
           product: [
-            {required: true, message: '请输入产品类型', trigger: 'change'}
+            {required: true, message: '请选择产品类型', trigger: 'change'}
           ],
           brand: [
-            {required: true, message: '请输入品牌', trigger: 'change'}
+            {required: true, validator: checkBrand, trigger: 'focus,blur'}
           ],
           type: [
-            {required: true, message: '请输入型号', trigger: 'change'}
+            {required: true, message: '请输入型号', trigger: 'blur'}
           ]
         }
       }
@@ -249,7 +264,6 @@
           listener = document.querySelector('.saga-brand-box'),
           distance = listener.scrollTop,
           step = total / 50;
-        console.log(jump, total, listener, distance, step)
         if (total > distance) {
           smoothDown()
         } else {
@@ -290,6 +304,7 @@
         }
       },
       remoteMethods(query) {
+        console.log(query, 'query')
         if (query !== '') {
           this.loading = true
           setTimeout(() => {
@@ -315,6 +330,10 @@
           }
         });
       },
+      changeItem(file) {
+        let arr = []
+        file.forEach(({Key}) => arr.push({Key}))
+      }
     },
     watch: {}
   }
@@ -342,9 +361,9 @@
       overflow-y: auto;
 
       .reset-steps {
-        /*height: 780px;*/
         position: absolute;
         left: 0;
+        top: 0;
         height: 100%;
       }
 

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

@@ -38,11 +38,12 @@
 <style lang="scss" scoped>
   .saga-toolbar-box {
     position: absolute;
-    top: 0;
+    top: 48px;
     left: 0;
     width: 100%;
     height: 70px;
     background: #fff;
+    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
     z-index: 11;
 
     .saga-toolbar-main {

+ 7 - 2
src/views/product/detail/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="productDetailTool">
-    <productTool/>
+    <productTool  :showSelect="showSelect"/>
     <sagaProductDetail/>
   </div>
 </template>
@@ -11,7 +11,12 @@
 
   export default {
     name: "index",
-    components: {productTool,sagaProductDetail}
+    components: {productTool,sagaProductDetail},
+    data() {
+      return {
+        showSelect:false
+      }
+  }
   }
 </script>
 

+ 4 - 2
src/views/product/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="product">
-    <productTool/>
+    <productTool :showSelect="showSelect"/>
     <sagaProduct/>
   </div>
 </template>
@@ -13,7 +13,9 @@
     name: "product",
     components: {productTool, sagaProduct},
     data() {
-      return {};
+      return {
+        showSelect:true
+      };
     },
     computed: {},
     methods: {}