apply-clients 5.0.35 → 5.0.36-2

package/src/components/product/Function/functions/ApplyUpload.vue

@@ -0,0 +1,556 @@
+<template>
+  <div style="background-color: #FFFFFF;">
+    <div class=" col-sm-12"
+         style="background-color: #FFFFFF;height: auto;border-radius: 8px">
+      <div style="position: relative;margin-left: 5%; margin-top: 5%">
+        <button type="button" name="button" class="button_search btn-gn" @click="load(this)">
+          刷新
+        </button>
+<!--        <div class="inpGroup" v-if="isremark" style="position:absolute;left: 0px;">-->
+<!--          <input v-model="headers.fremarks" style="width:70%" class="input_search" placeholder="文件说明"/>-->
+<!--        </div>-->
+<!--        <div style="position:absolute;right:10%;">-->
+<!--&lt;!&ndash;          <button class="button_search btn-gn"  @click="upload()" v-show="!takeimg" >拍照</button>&ndash;&gt;-->
+<!--&lt;!&ndash;          <button class="button_search btn-gn"   @click="fileUpload()" v-show="!isupload" >本地上传</button>&ndash;&gt;-->
+<!--        </div>-->
+<!--        <high-meter :show.sync="showhighmeter" @photo-finish="newPhoto" v-if="showhighmeter"></high-meter>-->
+<!--        <div v-if="isusetype">-->
+<!--          <v-select class="inp_button2" type="button" placeholder="使用类型" :options="foptions"-->
+<!--                    :value.sync="useType" v-model="useType"></v-select>-->
+<!--        </div>-->
+      </div>
+      <hr style="width: 90%;margin: 0px auto;border: #999999 1px solid;margin-top: 20px"/>
+      <div class="showList col-sm-12" style="padding: 10px;margin-top: 20px">
+        <div :class="cols ? cols : 'col-sm-6'" style="padding:10px 10px 0px 10px;height: auto;box-sizing: border-box"
+             v-for="row in fileInfoData">
+          <div class="showData">
+            <div class="left">
+              <a href="#" class="thumbnail"  style="width:100%;height:100%" >
+                <img-self :src="`rs/image/file/${row.f_overall_path}`" alt="现场照片" :width="220" :height="200"></img-self>
+<!--                <img-self :src="'rs/image/file/b6dfe712eba1cf71a2a2a63658e646fc-f_overall_path.jpg'" alt="现场照片" :width="220" :height="200"></img-self>-->
+              </a>
+            </div>
+            <div class="right">
+<!--              <p :title="row.f_uploaddate" class="top clears"><strong>上传时间</strong>:&nbsp;<span>{{row.f_uploaddate}}</span></p>-->
+<!--              <p :title="row.f_username" class="top clears"><strong>操作员</strong>:&nbsp;<span>{{row.f_username}}</span></p>-->
+<!--              <p :title="row.f_overall_path" class="top clears"><strong>文件名</strong>:&nbsp;{{row.f_overall_path}}</p>-->
+<!--              <p :title="row.f_overall_name" class="top clears"><strong>流程节点</strong>:&nbsp;{{row.f_overall_name}}</p>-->
+              <p>
+<!--                <a v-show="isDelete == '1'" @click="delet($index,row)" href="#" class="btn btn-default" role="button">删除</a>-->
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <modal :show.sync="showUpload" v-ref:modal backdrop="false" :width="500" >
+      <header slot="modal-header" class="modal-header">
+        <button type="button" class="close" @click="close"><span class="glyphicon glyphicon-remove"></span></button>
+        <h4 class="modal-title" style="text-align: center">文件上传</h4>
+      </header>
+      <article slot="modal-body" class="modal-body">
+        <div class="form-group">
+          <file-upload class="my-file-uploader" :name="'myFile' + blodid"
+                       action="rs/file/uploadFile" tagname="文件上传" :headers="headers" multiple v-ref:file></file-upload>
+        </div>
+      </article>
+      <footer slot="modal-footer" class="modal-footer">
+      </footer>
+    </modal>
+  </div>
+</template>
+<script>
+  //import { HttpResetClass } from 'vue-client'
+  import {HttpResetClass} from 'vue-client'
+
+  export default {
+    title: "APP附件",
+    props: ['blodid','businessid','isremark', 'isusetype','takeimg','defname','isupload','fusetype','cols','appupload'],
+    data() {
+      return {
+        isDelete: '1', // 删除按钮，可以进行控制（权限等）
+        fileInfoData: [], // 数据库存储的文件记录对象数组
+        headers: {'username': this.$login.f.name, 'blodid': '','businessid':'', 'fremarks': '','defname':'','fusetype':this.fusetype?this.fusetype:''}, // 调用rs/file/uploadFile 的参数
+        showUpload: false, // 上传模态框控制
+        showhighmeter: false, // 高拍仪组件控制
+        useType: '', // 使用类型
+        fileRemark: '' // 文件说明
+      }
+    },
+    methods: {
+      // 查询按钮事件
+      delet(index, row) {
+        this.$resetdelete('rs/entity/t_files', {id: row.id}, {resolveMsg: '删除成功', rejectMsg: '删除失败'}).then((res) => {
+          this.$dispatch("delResid",row.id)
+          this.fileInfoData.splice(index, 1)
+        })
+      },
+      downloadfile(filepath){
+
+        var link = document.createElement('a');
+        // let pathName = "http://" + location.host + filepath;
+        link.href = filepath;
+        link.target='_blank'
+        link.dispatchEvent(new MouseEvent('click'));
+      },
+      GetRequest() {
+        var url = location.search;
+        var theRequest = new Object();
+        if (url.indexOf("?") != -1) {
+          var str = url.substr(1);
+          let strs = str.split("&");
+          for (var i = 0; i < strs.length; i++) {
+            theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
+          }
+        }
+        return theRequest;
+      },
+      upload() {
+
+        if(this.showhighmeter){
+          console.log(this,'测试')
+          this.$refs.ltgao.closeVideo()
+        }
+        console.log('测试1')
+        this.showhighmeter = !this.showhighmeter
+      },
+      async load(self) {
+
+        var http = new HttpResetClass()
+        let data = {
+          tablename: 't_apply_overall_imgs',
+          condition: "f_apply_id = '" + this.appupload.id + "'"
+        }
+        let getFile = await http.load('POST', 'rs/sql/singleTable', {data: data}, {
+          warnMsg: null,
+          resolveMsg: null
+        })
+
+        self.fileInfoData = []
+        self.fileInfoData = getFile.data
+      },
+      // 数据库时间格式化
+      formatdate(val) {
+        //20180914151603   :    2018-09-14 15:16:03
+        if (val.length != 14)
+          return
+        let year = val.substr(0, 4)
+        let month = val.substr(4, 2)
+        let day = val.substr(6, 2)
+        let hour = val.substr(8, 2)
+        let min = val.substr(10, 2)
+        let second = val.substr(12, 2)
+        return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + second
+      },
+      // 打开文件上传对话框
+      fileUpload() {
+        this.showUpload = true
+      },
+      // 关闭文件上传对话框
+      close() {
+        this.showUpload = false
+        // 将选的文件清空
+        this.$refs.file.$el.querySelector('input').value = ''
+        this.load(this)
+      },
+      convertBase64ToBlob(base64String) {
+        // 将base64解码
+        var bytes = atob(base64String);
+        //var bytes = base64;
+        var bytesCode = new ArrayBuffer(bytes.length);
+        // 转换为类型化数组
+        var byteArray = new Uint8Array(bytesCode);
+
+        // 将base64转换为ascii码
+        for (var i = 0; i < bytes.length; i++) {
+          byteArray[i] = bytes.charCodeAt(i);
+        }
+        // 生成Blob对象（文件对象）
+        return new Blob([bytesCode], {type: 'image/jpeg'});
+      },
+      newPhoto(Imgbase64) {
+        let form = new FormData()
+        let xhr = new XMLHttpRequest()
+        let formDataBoundary = "----WebkitFormBoundary" + "GaoPaiYi";
+        form.append('Content-Type', 'multipart/form-data;boundary=' + formDataBoundary)
+        form.append('file', this.convertBase64ToBlob(Imgbase64), "GaoPaiYi.jpg")
+        xhr.open("POST", "rs/file/uploadFile")
+
+        if (this.headers) {
+          for (var header in this.headers) {
+            xhr.setRequestHeader(header, encodeURIComponent(this.headers[header]))
+          }
+        }
+        xhr.send(form)
+        setTimeout(() => {
+          this.load(this)
+        }, 5000)
+      }
+    },
+    ready() {
+      console.log("测试一=============")
+      this.headers.blodid = this.blodid
+      this.headers.businessid = this.businessid
+      console.log('123222', this.businessid)
+      // if (this.blodid||this.businessid) {
+        this.load(this)
+      console.log("测试二=============")
+      // }
+    },
+    watch: {
+      'blodid'(val) {
+        if (val) {
+          console.log('观察blodid', val)
+          this.headers.blodid = this.blodid
+          this.load(this)
+        }
+      },
+      'businessid'(val) {
+        console.log('观察businessid')
+        if (val) {
+          console.log('观察businessid', val)
+          this.headers.businessid = this.businessid
+          this.load(this)
+        }
+      },
+      'useType'() {
+        this.headers.fusetype = this.useType[0] ? this.useType[0] : ''
+      },
+      'defname'() {
+        this.headers.defname=this.defname
+      }
+    },
+    computed: {
+      foptions() {
+        return this.$appdata.getParam('使用类型')
+      },
+    },
+    events: {
+      onFileUpload: function (file, res) {
+        console.log("上传完毕",res)
+        this.$dispatch("resid",res.id)
+        this.headers.fremarks=''
+        this.close()
+      }
+    }
+  }
+</script>
+<style scoped>
+
+  * {
+    padding: 0px;
+    margin: 0px;
+  }
+
+  .inpGroup {
+    position: absolute;
+    left: 0px;
+    right: 220px;
+    font-family: "微软雅黑";
+  }
+
+  .navWin {
+    position: relative;
+  }
+
+  .navWin .navShow {
+    margin-top: 5px;
+    height: 34px;
+    font-size: 20px;
+    line-height: 34px;
+    color: rgb(180, 180, 180);
+  }
+
+  .navWin .navShow span {
+    display: inline-block;
+    height: 34px;
+  }
+
+  .navWin .navShow .icon {
+    height: 34px;
+    margin-right: 10px;
+    color: rgb(200, 200, 200);
+  }
+
+  .navWin .navList {
+    position: absolute;
+    width: 100%;
+    z-index: 99;
+    list-style: none;
+    background-color: rgba(241, 241, 241, 0.9);
+    line-height: 34px;
+    color: #8d8d8d;
+    visibility: hidden;
+  }
+
+  .navWin:hover .navList {
+    visibility: visible;
+  }
+
+  .navWin .navList li {
+    font-size: 18px;
+    padding-left: 30px;
+  }
+
+  .navWin .navList li:hover {
+    background-color: rgba(220, 220, 220, 0.9);
+  }
+
+  .inp {
+    box-sizing: border-box;
+    width: 79%;
+    padding: 0px 10px;
+    height: 34px;
+    font-size: 14px;
+    line-height: 36px;
+    color: #999999;
+    border: solid 1px #c1c1c1;
+    border-radius: 2px;
+    background: none;
+    outline: none;
+  }
+
+  .inp::-webkit-input-placeholder {
+    color: #999999;
+  }
+
+  .inp_button {
+    float: right;
+    margin-left: 10px;
+    /*    position: absolute;
+        right: 35px;
+        height: 40px;*/
+    width: 100px;
+    font-size: 14px;
+    line-height: 34px;
+    color: #ffffff;
+    text-align: center;
+    background-color: rgb(90, 180, 90);
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .btn-group {
+    height: 34px;
+  }
+
+  .inp_button2 {
+    float: right;
+    margin-left: 10px;
+    /*    position: absolute;
+        right: 35px;
+        height: 40px;*/
+    width: auto;
+    font-size: 16px;
+    line-height: 34px;
+    color: #ffffff;
+    text-align: center;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .inp_button:hover {
+    /*background-color: rgb(80, 150, 80);*/
+  }
+
+  .inp_button:active {
+    font-size: 20px;
+    /*background-color: rgb(150, 200, 150);*/
+  }
+
+  .showData {
+    height: auto;
+    position: relative;
+    padding-bottom: 7px;
+    border-bottom: solid 1px #c1c1c1;
+    font-family: "微软雅黑";
+  }
+
+  .showData .left {
+    height: 180px;
+    width: 210px;
+    background-color: rgb(240, 240, 240);
+    overflow: hidden;
+    line-height: 180px;
+  }
+
+  .showData .left img {
+    width: 100%;
+    height: auto;
+  }
+
+  .showData .right {
+    position: absolute;
+    top: 0px;
+    left: 220px;
+    right: 0px;
+    height: 180px;
+  }
+
+  .showData .right .top {
+    height: 30px;
+    line-height: 30px;
+    color: rgb(98, 98, 98);
+  }
+
+  .showData .right .top .topleft {
+    float: left;
+    font-size: 16px;
+    margin-right: 20px;
+  }
+
+  .showData .right .top .topright {
+    float: right;
+    margin-left: 20px;
+  }
+
+  .showData .right .text {
+    word-wrap: break-word;
+    overflow: hidden;
+    /*height: 100px;*/
+    color: #999999;
+    /*padding: 8px 0px;*/
+  }
+
+  .showData .right ul {
+    height: 20px;
+    padding: 0px;
+    margin: 0px;
+    font-size: 0px;
+  }
+
+  .showData .right ul li {
+    display: inline-block;
+    height: 20px;
+    list-style: none;
+    font-size: 16px;
+    line-height: 20px;
+    padding: 0px 7px;
+    margin-right: 10px;
+    cursor: pointer;
+    background-color: none;
+    font-weight: bold;
+    color: #006fa3;
+  }
+
+  .showData .right ul li:hover {
+    color: #006fb3;
+  }
+
+  .showData .right ul li:active {
+    color: #006fb3;
+  }
+
+  .showData .right ul li a {
+    width: 100%;
+    height: 100%;
+    text-decoration: none;
+    color: #FFFFFF;
+  }
+
+  body {
+    color: black;
+  }
+
+  .search {
+    width: 75%;
+    margin: 10px auto 30px auto;
+  }
+
+  .search .searchAll {
+    height: 34px;
+    font-size: 18px;
+    color: #999999;
+    line-height: 34px;
+  }
+
+  .search .searchAll span {
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    border: #999999 1px solid;
+    position: relative;
+    top: 2px;
+  }
+
+  .search .searchAll .spanAll {
+    background-color: rgb(90, 180, 90);
+  }
+
+  .search .itemList {
+    font-size: 16px;
+    color: #999999;
+    line-height: 34px;
+  }
+
+  .search .itemList .item {
+    height: 34px;
+    position: relative;
+  }
+
+  .search .itemList .item .descript {
+    display: inline-block;
+    width: 80px;
+  }
+
+  .search .itemList .item .inputBox {
+    height: 30px;
+    position: absolute;
+    top: 0px;
+    left: 80px;
+    right: 20px;
+  }
+
+  .search .itemList .item .inputBox input {
+    width: 100%;
+    height: 100%;
+    outline: none;
+    padding: 0px 5px;
+  }
+
+  .search .itemList .item .inputBox input::-webkit-input-placeholder {
+    color: #999999;
+  }
+
+  .searchItem {
+    height: 30px;
+    position: absolute;
+    top: 0px;
+    left: 80px;
+    right: 20px;
+  }
+
+  .searchItem .show {
+    padding-left: 10px;
+  }
+
+  .searchItem ul {
+    position: relative;
+    list-style: none;
+    background-color: none;
+    font-weight: bold;
+    color: #006fa3;
+
+    z-index: 99;
+    visibility: hidden;
+  }
+
+  .searchItem ul li {
+    padding-left: 10px;
+  }
+
+  .searchItem:hover ul {
+    visibility: visible;
+  }
+
+  .searchItem ul li:hover {
+    color: #006fb1;
+  }
+  .clears{
+    overflow:hidden;
+
+    　　　text-overflow:ellipsis;
+
+    　　　white-space:nowrap;
+  }
+</style>