sale-client 4.2.21 → 4.2.22

package/src/filiale/ronghao/Upload.vue

@@ -1,654 +1,654 @@
-<template>
-  <div style="background-color: #FFFFFF;" id="fileupload">
-    <div class="row" style="background-color: #FFFFFF;height: auto;border-radius: 8px">
-      <div style="width:75%;margin: 30px auto 10px auto;padding-bottom: 10px">
-        <div class="inpGroup col-sm-7">
-          <div class="col-sm-10 form-input-group">
-            <label class="font_normal_body col-sm-6" style="text-align: center">文件说明</label>
-            <input v-model="headers.fremarks" class="input_search" placeholder="文件说明"
-                   style="vertical-align:middle;width: 60%"/>
-          </div>
-          <div class="col-sm-10 form-input-group" style="margin-top:10px;" title="参数管理：附件使用类型">
-            <label class="font_normal_body col-sm-6" style="text-align: center">使用类型</label>
-            <v-select type="button" placeholder="使用类型" :options="foptions"
-                      close-on-select
-                      direction="up"
-                      :value.sync="fusetype" v-model="fusetype" style="vertical-align:middle;width: 60%">
-            </v-select>
-          </div>
-        </div>
-        <div class="col-sm-5 resBtn">
-          <button class="button_search btn-gn" @click="upload()" v-show="!takeimg">拍照</button>
-          <button class="button_search btn-gn" @click="fileUpload()" v-show="!isupload">审核资料上传</button>
-        </div>
-      </div>
-      <div class="showList col-sm-12"
-           style="padding: 10px;margin-top: 20px;">
-        <hr style="width: 90%;border: #ccc 1px solid;margin:0 auto"/>
-        <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
-                  v-if="(row.f_filetype.toLowerCase()==='jpg'||row.f_filetype.toLowerCase()==='png'||row.f_filetype.toLowerCase()==='gif'||row.f_filetype.toLowerCase()==='bmp')&&!rotating"
-                  :src="row.f_downloadURL" alt="..."/>
-                <img-self
-                  v-if="(row.f_filetype.toLowerCase()==='jpg'||row.f_filetype.toLowerCase()==='png'||row.f_filetype.toLowerCase()==='gif'||row.f_filetype.toLowerCase()==='bmp')&&rotating"
-                  :width="width?width:60" :height="height?height:60" :src="row.f_downloadURL" alt="..."></img-self>
-                <img v-if="row.f_filetype.toLowerCase()==='pdf'" src="../../../static/mainicon/pdf.jpg" alt="" style="width:66%"/>
-                <img-self v-if="row.f_filetype.toLowerCase()==='pdf'&&rotating" :width="width?width:60"
-                          :height="height?height:60" src="../../../static/mainicon/pdf.jpg" alt="..."></img-self>
-                <img v-if="row.f_filetype.toLowerCase().match('/wav|mp3|amr/')" src="../../../static/mainicon/sound.png" alt=""
-                     style="width:66%"/>
-                <img v-if="row.f_filetype.toLowerCase()==='xls'||row.f_filetype.toLowerCase()==='xlsx'"
-                     src="../../../static/mainicon/excel.jpg" alt="" style="width:66%"/>
-                <img-self v-if="row.f_filetype.toLowerCase()==='xls'||row.f_filetype.toLowerCase()==='xlsx'&&rotating"
-                          :width="width?width:60" :height="height?height:60" src="../../../static/mainicon/excel.jpg"
-                          alt="..."></img-self>
-                <img v-if="row.f_filetype.toLowerCase()==='doc'||row.f_filetype.toLowerCase()==='docx'"
-                     src="../../../static/mainicon/doc.jpg" alt="" style="width:66%"/>
-                <img-self v-if="row.f_filetype.toLowerCase()==='doc'||row.f_filetype.toLowerCase()==='docx'&&rotating"
-                          :width="width?width:60" :height="height?height:60" src="../../../static/mainicon/doc.jpg" alt="..."></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_filename" class="top clears"><strong>文件名</strong>:&nbsp;{{ row.f_filename }}</p>
-              <p :title="row.fremarks" class="top clears"><strong>文件说明</strong>:&nbsp;{{ row.fremarks }}</p>
-              <p>
-                <a
-                  v-if="row.f_filetype.toLowerCase()==='jpg'||row.f_filetype.toLowerCase()==='png'||row.f_filetype.toLowerCase()==='gif'||row.f_filetype.toLowerCase()==='bmp'"
-                  :href="row.f_downloadURL" style="background:#6aa6e2" class="btn btn-primary" target="_blank"
-                  role="button">预览</a>
-                <button class="button_search btn-gn"
-                        v-if="row.f_filetype.toLowerCase().match('/wav|mp3|amr/')||row.f_filetype.toLowerCase()==='pdf'||row.f_filetype.toLowerCase()==='xls'||row.f_filetype.toLowerCase()==='xlsx'||row.f_filetype.toLowerCase()==='doc'||row.f_filetype.toLowerCase()==='docx'"
-                        @click="downloadfile(row.f_downloadURL)">下载
-                </button>
-                <a v-if="isDelete == '1'" @click="delet($index,row)" href="#" class="btn btn-default"
-                   role="button">删除</a>
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <modal :show.sync="showUpload" styles="border-radius:20px;margin-top:300px" v-ref:modal backdrop="false"
-           :width="700">
-      <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" style="height: 70px">
-        <div class="form-group">
-          <file-upload style="margin-left:100px;padding-top:20px" class="my-file-uploader" :name="'myFile' + blodid"
-                       action="api/af-revenue/file/uploadFile" tagname="文件上传" :headers="headers" multiple
-                       v-ref:file></file-upload>
-        </div>
-      </article>
-      <footer slot="modal-footer" class="modal-footer">
-      </footer>
-    </modal>
-  </div>
-
-  <high-meter :show.sync="showhighmeter" @photo-finish="newPhoto" v-if="showhighmeter"
-              v-on:confirminfo="confirmIdCard"></high-meter>
-</template>
-<script>
-import { HttpResetClass } from 'vue-client'
-import Vue from 'vue'
-export default {
-  title: '附件',
-  props: ['blodid', 'businessid', 'isremark', 'isusetype', 'takeimg', 'defname', 'isupload', 'fusetype', 'cols', 'width', 'height'],
-  data () {
-    return {
-      isDelete: '0', // 删除按钮，可以进行控制（权限等）
-      fileInfoData: [], // 数据库存储的文件记录对象数组
-      headers: {
-        'username': this.$login.f.name,
-        'blodid': '',
-        'businessid': '',
-        'fremarks': '',
-        'defname': '',
-        'fusetype': this.fusetype ? this.fusetype : ''
-      }, // 调用api/af-revenue/file/uploadFile 的参数
-      showUpload: false, // 上传模态框控制
-      showhighmeter: false, // 高拍仪组件控制
-      fileRemark: '', // 文件说明
-      rotating: this.$appdata.getSingleValue('图片附加功能') // 文件是否旋转
-    }
-  },
-  methods: {
-    confirmIdCard (IdCardInfo) {
-      this.showhighmeter = !this.showhighmeter
-    },
-    // 查询按钮事件
-    delet (index, row) {
-      this.$resetdelete('api/af-revenue/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) {
-      let condition = ''
-      if (this.businessid) {
-        condition = `f_businessid= '${self.headers.businessid}' `
-      } else {
-        condition = `f_blobid= '${self.headers.blodid}' `
-      }
-      if (this.fusetype) {
-        condition += ` and fusetype like '%${this.fusetype}%'`
-      }
-      var http = new HttpResetClass()
-      let data = {
-        condition: condition
-      }
-      let getFile = []
-      try {
-        getFile = await http.load('POST', 'api/af-revenue/sql/getFiles', {data: data}, {
-          warnMsg: null,
-          resolveMsg: null
-        })
-      } catch (e) {
-        console.log(e)
-      }
-      for (var i = 0; i < getFile.data.length; i++) {
-        // 如果使用类型包含导入字样,则是execl文件导入的,不做显示
-        if (getFile.data[i].fusetype && (getFile.data[i].fusetype.includes('execl导入'))) {
-          getFile.data.splice(i, 1)
-          i--
-          continue
-        }
-        let temp = getFile.data[i].f_downloadpath
-        let URL = ''
-        if (temp.lastIndexOf(':\\') > -1) {
-          URL = temp.substring(temp.lastIndexOf(':\\') + 2)
-        } else {
-          URL = temp.substring(temp.lastIndexOf('://') + 2)
-        }
-
-        var xy = this.$appdata.getSingleValue('协议') ? this.$appdata.getSingleValue('协议') : 'http://'
-        getFile.data[i].f_downloadURL = xy + location.host + '/' + URL
-      }
-      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 (data) {
-      console.log(data.img)
-      data.name = 'GaoPaiYi'
-      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(data.img), `${data.name}.png`)
-
-      xhr.open('POST', 'api/af-revenue/file/uploadFile')
-      if (this.headers) {
-        this.headers.blodid = this.blodid
-        for (var header in this.headers) {
-          xhr.setRequestHeader(header, encodeURIComponent(this.headers[header]))
-        }
-      }
-      if (Vue.$login && Vue.$login.jwt) {
-        xhr.setRequestHeader('Authorization', 'Bearer ' + Vue.$login.jwtNew)
-        xhr.setRequestHeader('Token', Vue.$login.jwt)
-      }
-      xhr.send(form)
-      setTimeout(() => {
-        this.load(this)
-      }, 5000)
-    }
-  },
-  ready () {
-    if (this.$login.r.find(value => value == '上传附件删除')) {
-      // 有删除权限
-      this.isDelete = '1'
-    }
-    this.headers.blodid = this.blodid
-    this.headers.businessid = this.businessid
-    console.log('123222', this.businessid)
-    if (this.blodid || this.businessid) {
-      this.load(this)
-    }
-  },
-  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)
-      }
-    },
-    'defname' () {
-      this.headers.defname = this.defname
-    }
-  },
-  computed: {
-    foptions () {
-      let default_type = ['档案信息', '发卡售气', '卡表收费', '物联网表收费',
-        '机表收费', '表具停用', '换表&清零', '其他补气', '补气购气',
-        '预存收费', '调价补差', '黑名单', '补卡', '限购', '销户', '过户', '签约信息']
-      return !this.$appdata.getParam('附件使用类型') || !this.$appdata.getParam('附件使用类型').length
-        ? default_type.map((item) => {
-          return {label: item, value: item}
-        }) : 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 {
-  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;
-}
-
-#fileupload {
-  .resBtn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 2%;
-
-    button {
-      white-space: nowrap;
-      margin-right: 10px;
-    }
-  }
-}
-</style>
+<template>
+  <div style="background-color: #FFFFFF;" id="fileupload">
+    <div class="row" style="background-color: #FFFFFF;height: auto;border-radius: 8px">
+      <div style="width:75%;margin: 30px auto 10px auto;padding-bottom: 10px">
+        <div class="inpGroup col-sm-7">
+          <div class="col-sm-10 form-input-group">
+            <label class="font_normal_body col-sm-6" style="text-align: center">文件说明</label>
+            <input v-model="headers.fremarks" class="input_search" placeholder="文件说明"
+                   style="vertical-align:middle;width: 60%"/>
+          </div>
+          <div class="col-sm-10 form-input-group" style="margin-top:10px;" title="参数管理：附件使用类型">
+            <label class="font_normal_body col-sm-6" style="text-align: center">使用类型</label>
+            <v-select type="button" placeholder="使用类型" :options="foptions"
+                      close-on-select
+                      direction="up"
+                      :value.sync="fusetype" v-model="fusetype" style="vertical-align:middle;width: 60%">
+            </v-select>
+          </div>
+        </div>
+        <div class="col-sm-5 resBtn">
+          <button class="button_search btn-gn" @click="upload()" v-show="!takeimg">拍照</button>
+          <button class="button_search btn-gn" @click="fileUpload()" v-show="!isupload">审核资料上传</button>
+        </div>
+      </div>
+      <div class="showList col-sm-12"
+           style="padding: 10px;margin-top: 20px;">
+        <hr style="width: 90%;border: #ccc 1px solid;margin:0 auto"/>
+        <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
+                  v-if="(row.f_filetype.toLowerCase()==='jpg'||row.f_filetype.toLowerCase()==='png'||row.f_filetype.toLowerCase()==='gif'||row.f_filetype.toLowerCase()==='bmp')&&!rotating"
+                  :src="row.f_downloadURL" alt="..."/>
+                <img-self
+                  v-if="(row.f_filetype.toLowerCase()==='jpg'||row.f_filetype.toLowerCase()==='png'||row.f_filetype.toLowerCase()==='gif'||row.f_filetype.toLowerCase()==='bmp')&&rotating"
+                  :width="width?width:60" :height="height?height:60" :src="row.f_downloadURL" alt="..."></img-self>
+                <img v-if="row.f_filetype.toLowerCase()==='pdf'" src="../../../static/mainicon/pdf.jpg" alt="" style="width:66%"/>
+                <img-self v-if="row.f_filetype.toLowerCase()==='pdf'&&rotating" :width="width?width:60"
+                          :height="height?height:60" src="../../../static/mainicon/pdf.jpg" alt="..."></img-self>
+                <img v-if="row.f_filetype.toLowerCase().match('/wav|mp3|amr/')" src="../../../static/mainicon/sound.png" alt=""
+                     style="width:66%"/>
+                <img v-if="row.f_filetype.toLowerCase()==='xls'||row.f_filetype.toLowerCase()==='xlsx'"
+                     src="../../../static/mainicon/excel.jpg" alt="" style="width:66%"/>
+                <img-self v-if="row.f_filetype.toLowerCase()==='xls'||row.f_filetype.toLowerCase()==='xlsx'&&rotating"
+                          :width="width?width:60" :height="height?height:60" src="../../../static/mainicon/excel.jpg"
+                          alt="..."></img-self>
+                <img v-if="row.f_filetype.toLowerCase()==='doc'||row.f_filetype.toLowerCase()==='docx'"
+                     src="../../../static/mainicon/doc.jpg" alt="" style="width:66%"/>
+                <img-self v-if="row.f_filetype.toLowerCase()==='doc'||row.f_filetype.toLowerCase()==='docx'&&rotating"
+                          :width="width?width:60" :height="height?height:60" src="../../../static/mainicon/doc.jpg" alt="..."></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_filename" class="top clears"><strong>文件名</strong>:&nbsp;{{ row.f_filename }}</p>
+              <p :title="row.fremarks" class="top clears"><strong>文件说明</strong>:&nbsp;{{ row.fremarks }}</p>
+              <p>
+                <a
+                  v-if="row.f_filetype.toLowerCase()==='jpg'||row.f_filetype.toLowerCase()==='png'||row.f_filetype.toLowerCase()==='gif'||row.f_filetype.toLowerCase()==='bmp'"
+                  :href="row.f_downloadURL" style="background:#6aa6e2" class="btn btn-primary" target="_blank"
+                  role="button">预览</a>
+                <button class="button_search btn-gn"
+                        v-if="row.f_filetype.toLowerCase().match('/wav|mp3|amr/')||row.f_filetype.toLowerCase()==='pdf'||row.f_filetype.toLowerCase()==='xls'||row.f_filetype.toLowerCase()==='xlsx'||row.f_filetype.toLowerCase()==='doc'||row.f_filetype.toLowerCase()==='docx'"
+                        @click="downloadfile(row.f_downloadURL)">下载
+                </button>
+                <a v-if="isDelete == '1'" @click="delet($index,row)" href="#" class="btn btn-default"
+                   role="button">删除</a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <modal :show.sync="showUpload" styles="border-radius:20px;margin-top:300px" v-ref:modal backdrop="false"
+           :width="700">
+      <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" style="height: 70px">
+        <div class="form-group">
+          <file-upload style="margin-left:100px;padding-top:20px" class="my-file-uploader" :name="'myFile' + blodid"
+                       action="api/af-revenue/file/uploadFile" tagname="文件上传" :headers="headers" multiple
+                       v-ref:file></file-upload>
+        </div>
+      </article>
+      <footer slot="modal-footer" class="modal-footer">
+      </footer>
+    </modal>
+  </div>
+
+  <high-meter :show.sync="showhighmeter" @photo-finish="newPhoto" v-if="showhighmeter"
+              v-on:confirminfo="confirmIdCard"></high-meter>
+</template>
+<script>
+import { HttpResetClass } from 'vue-client'
+import Vue from 'vue'
+export default {
+  title: '附件',
+  props: ['blodid', 'businessid', 'isremark', 'isusetype', 'takeimg', 'defname', 'isupload', 'fusetype', 'cols', 'width', 'height'],
+  data () {
+    return {
+      isDelete: '0', // 删除按钮，可以进行控制（权限等）
+      fileInfoData: [], // 数据库存储的文件记录对象数组
+      headers: {
+        'username': this.$login.f.name,
+        'blodid': '',
+        'businessid': '',
+        'fremarks': '',
+        'defname': '',
+        'fusetype': this.fusetype ? this.fusetype : ''
+      }, // 调用api/af-revenue/file/uploadFile 的参数
+      showUpload: false, // 上传模态框控制
+      showhighmeter: false, // 高拍仪组件控制
+      fileRemark: '', // 文件说明
+      rotating: this.$appdata.getSingleValue('图片附加功能') // 文件是否旋转
+    }
+  },
+  methods: {
+    confirmIdCard (IdCardInfo) {
+      this.showhighmeter = !this.showhighmeter
+    },
+    // 查询按钮事件
+    delet (index, row) {
+      this.$resetdelete('api/af-revenue/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) {
+      let condition = ''
+      if (this.businessid) {
+        condition = `f_businessid= '${self.headers.businessid}' `
+      } else {
+        condition = `f_blobid= '${self.headers.blodid}' `
+      }
+      if (this.fusetype) {
+        condition += ` and fusetype like '%${this.fusetype}%'`
+      }
+      var http = new HttpResetClass()
+      let data = {
+        condition: condition
+      }
+      let getFile = []
+      try {
+        getFile = await http.load('POST', 'api/af-revenue/sql/getFiles', {data: data}, {
+          warnMsg: null,
+          resolveMsg: null
+        })
+      } catch (e) {
+        console.log(e)
+      }
+      for (var i = 0; i < getFile.data.length; i++) {
+        // 如果使用类型包含导入字样,则是execl文件导入的,不做显示
+        if (getFile.data[i].fusetype && (getFile.data[i].fusetype.includes('execl导入'))) {
+          getFile.data.splice(i, 1)
+          i--
+          continue
+        }
+        let temp = getFile.data[i].f_downloadpath
+        let URL = ''
+        if (temp.lastIndexOf(':\\') > -1) {
+          URL = temp.substring(temp.lastIndexOf(':\\') + 2)
+        } else {
+          URL = temp.substring(temp.lastIndexOf('://') + 2)
+        }
+
+        var xy = this.$appdata.getSingleValue('协议') ? this.$appdata.getSingleValue('协议') : 'http://'
+        getFile.data[i].f_downloadURL = xy + location.host + '/' + URL
+      }
+      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 (data) {
+      console.log(data.img)
+      data.name = 'GaoPaiYi'
+      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(data.img), `${data.name}.png`)
+
+      xhr.open('POST', 'api/af-revenue/file/uploadFile')
+      if (this.headers) {
+        this.headers.blodid = this.blodid
+        for (var header in this.headers) {
+          xhr.setRequestHeader(header, encodeURIComponent(this.headers[header]))
+        }
+      }
+      if (Vue.$login && Vue.$login.jwt) {
+        xhr.setRequestHeader('Authorization', 'Bearer ' + Vue.$login.jwtNew)
+        xhr.setRequestHeader('Token', Vue.$login.jwt)
+      }
+      xhr.send(form)
+      setTimeout(() => {
+        this.load(this)
+      }, 5000)
+    }
+  },
+  ready () {
+    if (this.$login.r.find(value => value == '上传附件删除')) {
+      // 有删除权限
+      this.isDelete = '1'
+    }
+    this.headers.blodid = this.blodid
+    this.headers.businessid = this.businessid
+    console.log('123222', this.businessid)
+    if (this.blodid || this.businessid) {
+      this.load(this)
+    }
+  },
+  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)
+      }
+    },
+    'defname' () {
+      this.headers.defname = this.defname
+    }
+  },
+  computed: {
+    foptions () {
+      let default_type = ['档案信息', '发卡售气', '卡表收费', '物联网表收费',
+        '机表收费', '表具停用', '换表&清零', '其他补气', '补气购气',
+        '预存收费', '调价补差', '黑名单', '补卡', '限购', '销户', '过户', '签约信息']
+      return !this.$appdata.getParam('附件使用类型') || !this.$appdata.getParam('附件使用类型').length
+        ? default_type.map((item) => {
+          return {label: item, value: item}
+        }) : 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 {
+  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;
+}
+
+#fileupload {
+  .resBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 2%;
+
+    button {
+      white-space: nowrap;
+      margin-right: 10px;
+    }
+  }
+}
+</style>