qj-happy-common-zhongjian 1.0.27

package/src/components/Upload/singleImage2.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="singleImageUpload2 upload-container">
+    <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
+      :on-success="handleImageScucess">
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">Drag或<em>点击上传</em></div>
+    </el-upload>
+    <div v-show="imageUrl.length>0" class="image-preview">
+      <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+        <img :src="imageUrl">
+        <div class="image-preview-action">
+          <i @click="rmImage" class="el-icon-delete"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getToken } from '#/api/upload'
+
+export default {
+  name: 'singleImageUpload2',
+  props: {
+    value: String
+  },
+  computed: {
+    imageUrl() {
+      return this.value
+    }
+  },
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { token: '', key: '' }
+    }
+  },
+  methods: {
+    rmImage() {
+      this.emitInput('')
+    },
+    emitInput(val) {
+      this.$emit('input', val)
+    },
+    handleImageScucess() {
+      this.emitInput(this.tempUrl)
+    },
+    beforeUpload() {
+      const _self = this
+      return new Promise((resolve, reject) => {
+        getToken().then(response => {
+          const key = response.data.qiniu_key
+          const token = response.data.qiniu_token
+          _self._data.dataObj.token = token
+          _self._data.dataObj.key = key
+          this.tempUrl = response.data.qiniu_url
+          resolve(true)
+        }).catch(() => {
+          reject(false)
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.upload-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .image-uploader {
+    height: 100%;
+  }
+  .image-preview {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    border: 1px dashed #d9d9d9;
+    .image-preview-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .image-preview-action {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      cursor: default;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+      font-size: 20px;
+      background-color: rgba(0, 0, 0, .5);
+      transition: opacity .3s;
+      cursor: pointer;
+      text-align: center;
+      line-height: 200px;
+      .el-icon-delete {
+        font-size: 36px;
+      }
+    }
+    &:hover {
+      .image-preview-action {
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

package/src/components/Upload/singleImage3.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="upload-container">
+    <el-upload class="image-uploader" :data="dataObj" drag :multiple="false" :show-file-list="false" action="https://httpbin.org/post"
+      :on-success="handleImageScucess">
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+    </el-upload>
+
+    <div class="image-preview">
+      <div class="image-preview-wrapper" v-show="imageUrl.length>1">
+        <img :src="imageUrl">
+        <div class="image-preview-action">
+          <i @click="rmImage" class="el-icon-delete"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getToken } from '#/api/upload'
+
+export default {
+  name: 'singleImageUpload3',
+  props: {
+    value: String
+  },
+  computed: {
+    imageUrl() {
+      return this.value
+    }
+  },
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { token: '', key: '' }
+    }
+  },
+  methods: {
+    rmImage() {
+      this.emitInput('')
+    },
+    emitInput(val) {
+      this.$emit('input', val)
+    },
+    handleImageScucess(file) {
+      this.emitInput(file.files.file)
+    },
+    beforeUpload() {
+      const _self = this
+      return new Promise((resolve, reject) => {
+        getToken().then(response => {
+          const key = response.data.qiniu_key
+          const token = response.data.qiniu_token
+          _self._data.dataObj.token = token
+          _self._data.dataObj.key = key
+          this.tempUrl = response.data.qiniu_url
+          resolve(true)
+        }).catch(err => {
+          console.log(err)
+          reject(false)
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "src/styles/mixin.scss";
+.upload-container {
+  width: 100%;
+  position: relative;
+  @include clearfix;
+  .image-uploader {
+    width: 35%;
+    float: left;
+  }
+  .image-preview {
+    width: 200px;
+    height: 200px;
+    position: relative;
+    border: 1px dashed #d9d9d9;
+    float: left;
+    margin-left: 50px;
+    .image-preview-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .image-preview-action {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      cursor: default;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+      font-size: 20px;
+      background-color: rgba(0, 0, 0, .5);
+      transition: opacity .3s;
+      cursor: pointer;
+      text-align: center;
+      line-height: 200px;
+      .el-icon-delete {
+        font-size: 36px;
+      }
+    }
+    &:hover {
+      .image-preview-action {
+        opacity: 1;
+      }
+    }
+  }
+  .image-app-preview {
+    width: 320px;
+    height: 180px;
+    position: relative;
+    border: 1px dashed #d9d9d9;
+    float: left;
+    margin-left: 50px;
+    .app-fake-conver {
+      height: 44px;
+      position: absolute;
+      width: 100%; // background: rgba(0, 0, 0, .1);
+      text-align: center;
+      line-height: 64px;
+      color: #fff;
+    }
+  }
+}
+</style>

package/src/components/Upload/upload.vue

@@ -0,0 +1,295 @@
+<template>
+  <div>
+    <input
+      v-show="false"
+      type="file"
+      :id="filesone"
+      name="file"
+      @change="uploadChange"
+      accept="image/*"
+    >
+    <div v-if="!isCheckBox" class="imgSrc">
+      <label :for="filesone">
+        <i class="el-icon-plus" v-show="show"></i>
+        <img v-show="ident=='0'&&emptyImg" :src="classLogo?classLogo:null">
+        <img v-show="ident=='1'" :src="editClassLogo">
+      </label>
+    </div>
+    <div v-else>
+      <div>
+        <ul v-show="emptyImg">
+          <li class="imgLi" v-for="(item,index) in items" :key="index">
+            <div>
+              <i class="el-icon-delete" @click="deleteIcon(index)"></i>
+            </div>
+            <img :src="item">
+          </li>
+        </ul>
+        <div class="upload_input">
+          <i class="el-icon-plus"></i>
+          <input
+            type="file"
+            :id="filesone"
+            name="file"
+            multiple="multiple"
+            @change="uploadChange"
+            accept="image/png, image/gif"
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { uploadGoodsFile } from "#/api/shopFbu";
+export default {
+  props: ["isCheckBox", "editClassLogo", "ident", "emptyImg", "items"],
+  data() {
+    return {
+      classLogo: "",
+      show: true,
+      filesone: this.id || "vue-filesonel-" + +new Date() + +Math.random(),
+      secDomainName:null
+    };
+  },
+  mounted() {
+    let hrefs = window.location.href, hosts = window.location.host;
+    if (hrefs && hosts) {
+      let name = hrefs.split(hosts)[1] ? hrefs.split(hosts)[1].split('/')[1] : null;
+      this.secDomainName = name && name !== 'paas' && process.env.NODE_ENV != 'development' ? process.env.API_ROOT + '/' + name : process.env.API_ROOT
+    } else {
+      this.secDomainName = process.env.API_ROOT
+    }
+  },
+  methods: {
+    uploadChange(event) {
+      console.log("shangchuan");
+      if (event.target.files.length > 0) {
+        this.show = false;
+        this.files = event.target.files[0];
+        let data = {};
+        let files = this.files;
+        let param = new FormData();
+        if (files != "") {
+          param.append("file", files, files.name);
+        } else {
+          this.$message.error("请添加图片");
+        }
+        param.append("tenantCode", "00000001");
+        param.append("param", JSON.stringify(data));
+        uploadGoodsFile(param).then(res => {
+          document.getElementsByName("file").value = "";
+          if (this.isCheckBox) {
+            this.$emit("classLogoAttr", res.fileUrl);
+          } else {
+            this.classLogo = "";
+            this.classLogo = res.fileUrl;
+            this.$emit("emitClassLogo", this.classLogo);
+          }
+        });
+      }
+    },
+    deleteIcon(index) {
+      this.items.splice(index, 1);
+    }
+  },
+  watch: {
+    editClassLogo(val) {
+      console.log("val发生改变");
+
+      if (val) {
+        this.show = false;
+      } else {
+        this.show = true;
+      }
+    }
+  }
+};
+//单个图片上传方法引用：
+// 1.新增
+//     <v-upload
+//     @emitClassLogo="emitClassLogo"
+//     :isCheckBox="isCheckBox"
+//     :ident="0"
+//     :emptyImg="emptyImg">
+//     </v-upload>
+// 2.编辑
+//     <v-upload
+//     @emitClassLogo="emitClassLogo"
+//     :isCheckBox="isCheckBox"
+//     :editClassLogo="editForm.goodsClassLogo"
+//     :ident="1">
+//     </v-upload>
+
+//import Upload from "@/components/Upload/upload";
+// export default {
+//     components:{
+//         'v-upload': Upload,
+//     },
+//     data() {
+//       return {
+//         isCheckBox:false,
+//         editClassLogo:'',
+//         emptyImg:false,
+//       };
+//     },
+//     methods: {
+//       addClassify(){
+//         this.emptyImg=false;
+//       },
+
+//       emitClassLogo(value){
+//         this.form.goodsClassLogo='';
+//         this.form.goodsClassLogo= value ;
+//         this.editForm.goodsClassLogo='';
+//         this.editForm.goodsClassLogo= value ;
+//         this.emptyImg=true;
+//       },
+//     },
+//   };
+
+//多个图片上传方法：
+//1.新增
+// <v-upload
+// @classLogoAttr="classLogoAttr"
+// :isCheckBox="isCheckBox"
+// :ident="0"
+// :emptyImg="emptyImg"
+// :items="items"
+// >
+// </v-upload>
+//2.编辑
+// <v-upload
+// @classLogoAttr="classLogoAttr"
+// :isCheckBox="isCheckBox"
+// :ident="1"
+// :emptyImg="emptyImg"
+// :items="items"
+// >
+// </v-upload>
+//import Upload from "@/components/Upload/upload";
+//   export default {
+//     components:{
+//         'v-upload': Upload,
+//     },
+//     data() {
+//       return {
+//         isCheckBox:true,
+//         editClassLogo:'',
+//         emptyImg:false,
+//         items:[],
+//     },
+//     methods: {
+//       addClassify(){
+//         this.showAddNewVirtual=true;
+//         this.selectAdd=true;
+//         this.emptyImg=false;
+//         this.items=[];
+//       },
+
+//       emitClassLogo(value){
+//         this.form.goodsClassLogo='';
+//         this.form.goodsClassLogo= value ;
+//         this.editForm.goodsClassLogo='';
+//         this.editForm.goodsClassLogo= value ;
+//         this.emptyImg=true;
+//       },
+//       classLogoAttr(value){
+//         this.emptyImg=true;
+//         this.items.push(value);
+//       },
+//         点编辑的时候将获取到的图片数据赋值给this.items;
+//     },
+//   };
+</script>
+
+<style lang='scss' scoped>
+img {
+  width: 148px;
+  height: 148px;
+}
+.upload_input,
+.imgSrc,
+.imgLi {
+  width: 148px;
+  height: 148px;
+  border: 1px dashed #c0ccda;
+  background: #fbfdff;
+  border-radius: 6px;
+}
+.upload_input {
+  position: relative;
+  border: 1px dashed #c0ccda;
+  float: left;
+  input {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    position: absolute;
+    cursor: pointer;
+  }
+  i {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -12px;
+    margin-left: -12px;
+    font-size: 24px;
+  }
+}
+.imgSrc {
+  position: relative;
+  overflow: hidden;
+  label {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    display: inline-block;
+    i {
+      white-space: pre;
+      position: absolute;
+      font-size: 24px;
+      color: #8c939d;
+      top: 50%;
+      left: 50%;
+      margin-top: -12px;
+      margin-left: -12px;
+    }
+  }
+}
+ul {
+  .imgLi {
+    float: left;
+    margin: 0 10px 10px 0;
+    list-style: none;
+    padding: 0;
+    overflow: hidden;
+    position: relative;
+    cursor: pointer;
+    div {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      opacity: 0.5;
+      background-color: rgba(0, 0, 0, 0.4);
+      display: none;
+      i {
+        position: absolute;
+        font-size: 24px;
+        top: 50%;
+        left: 50%;
+        margin-top: -12px;
+        margin-left: -12px;
+        color: #fff;
+      }
+    }
+  }
+  .imgLi:hover {
+    div {
+      display: block;
+    }
+  }
+}
+</style>

package/src/components/workOrderList/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="progress-wrap">
+    <el-dialog left :visible.sync="progressShow" width="460px" :show-close="false" @close="hideProgress">
+      <h4 slot="title">配送进度</h4>
+      <el-scrollbar :native="false" wrapStyle="height:330px;">
+        <div class="logic-list">
+          <ul>
+            <li :class="{active: index == 0}" v-for="(item,index) in list" :key="index">
+              <div class="right">
+                <i class="arrow"></i>
+                <div>
+                  <p class="time">{{item.workorderListUrl}}</p>
+                  <p class="info">{{item.workorderListCont}}</p>
+                </div>
+              </div>
+            </li>
+          </ul>
+          <span v-if="list.length==0" class="noInfo">暂无进度</span>
+        </div>
+      </el-scrollbar>
+      <span slot="footer" class="dialog-footer">
+        <button class="c-theme border-theme" @click="hideProgress">我知道了</button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import API from "#/api/common";
+export default {
+  props: ["code","progressShow"],
+  data() {
+    return {
+      list:[]
+    };
+  },
+  created() {
+    // this.progress();
+  },
+  methods: {
+    date(value) {
+      return `<p class="date">${value.slice(
+        5,
+        10
+      )}</p><p class="time">${value.slice(11, 16)}</p>`;
+    },
+    progress() {
+      if (this.code) {
+        API.queryWoWorkorderListPage({
+          workorderCode:this.code
+        }).then(res => {
+          this.list = res.list
+        })
+      }
+    },
+    hideProgress() {
+      this.$emit('hideProgress')
+    }
+  },
+  watch: {
+    code(newValue, oldValue) {
+      this.progress()
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+h4 {
+  font-size: 24px;
+  color: #666666;
+  text-align: center;
+}
+.progress-wrap {
+  .logic-list {
+    width: 100%;
+    li {
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      &:last-child {
+        .right:after {
+          top: auto;
+          bottom: 0;
+          height: calc(50% + 18px);
+        }
+      }
+    }
+    .right {
+      width: 330px;
+      padding-left: 25px;
+      margin-left: 5px;
+      // padding-bottom: 40px;
+      position: relative;
+      min-height: 88px;
+      display: flex;
+      align-items: center;
+      border-left: 1px solid #dcdcdc;
+      .state {
+        font-size: 16px;
+      }
+      .info {
+        font-size: 12px;
+        // margin-top: 8px;
+        line-height: 18px;
+      }
+      .arrow {
+        width: 9px;
+        height: 9px;
+        border-radius: 50%;
+        background-color: #dcdcdc;
+        position: absolute;
+        left: -5px;
+        top: 50%;
+        margin-top: -5px;
+        z-index: 1;
+      }
+    }
+  }
+}
+.noInfo{
+  font-size: 24px;
+  text-align: center;
+  margin-top: 150px;
+  display: block;
+}
+.progress-wrap  {
+  .el-dialog__header{
+    h4{
+      font-size: 20px;
+      color: #2e2e2e;
+      text-align: left;
+      margin-bottom: 10px;
+    }
+  }
+  .el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+  .el-scrollbar__bar {
+    // opacity: 1;
+  }
+  .is-horizontal {
+    display: none;
+  }
+  .dialog-footer {
+    button {
+      font-size: 20px !important;
+      cursor: pointer;
+      width: 158px;
+      height: 50px;
+      background-color: #ffffff;
+      border-radius: 3px;
+      border-width: 1px;
+      border-style: solid;
+    }
+  }
+}
+</style>
+
+