apply-clients 5.0.361 → 6.0.3

package/src/components/build/Install/Process/CustomerFile.vue

@@ -0,0 +1,423 @@
+<template>
+  <div class="form-group col-sm-12"
+       style="background-color: #FFFFFF;height: auto;min-height:500px;border-radius: 8px">
+    <div style="position: relative;height: 40px;width:70%;margin: 30px auto;">
+      <div class="inpGroup">
+        <input v-model="tempremarks" class="inp" placeholder="文件说明"/>
+      </div>
+      <!--<div class="inp_button" type="button" @click="upload()">拍照</div>-->
+      <v-select  :is-all-line="true" :value.sync="tempusetype" placeholder="使用类型" class="inp_button2" :options="foptions"
+                v-model="tempusetype"></v-select>
+      <div class="inp_button" type="button" @click="fileUpload()">本地上传</div>
+    </div>
+    <div class="showList col-sm-12" style="padding: 20px">
+
+      <div class="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">
+            <img :src="row.f_downloadURL"/>
+          </div>
+          <div class="right">
+            <!--<div class="top">-->
+              <!--<div class="topleft">用户ID:&nbsp;<span>{{row.f_blobid}}</span></div>-->
+              <!--<div class="topright">{{row.f_uploaddate}}</div>-->
+            <!--</div>-->
+            <div class="top">
+              <div class="topleft">使用类型:&nbsp;<span>{{row.f_usetype}}</span></div>
+            </div>
+            <div class="top">
+              <div class="topleft">操作员:&nbsp;<span>{{row.f_username}}</span></div>
+            </div>
+            <div class="text">文件说明:&nbsp;{{row.f_remarks}}</div>
+            <ul class="buttonList">
+              <li>
+                <a target="_blank" :href="row.f_downloadURL">预览</a>
+              </li>
+              <!--<li>-->
+              <!--<a :href="row.f_downloadURL" :download="row.filename">下载</a>-->
+              <!--</li>-->
+              <!--<li>修改</li>
+              <li>下载</li>-->
+              <!--<li>删除</li>-->
+            </ul>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+  <modal :show.sync="show" v-ref:modal backdrop="false">
+    <header slot="modal-header" class="modal-header">
+      <button type="button" class="close" @click="close"><span>&times;</span></button>
+      <h4 class="modal-title">文件上传</h4>
+    </header>
+    <article slot="modal-body" class="modal-body">
+      <div class="form-group">
+        <file-upload class="my-file-uploader" name="myFile33"
+                     action="rs/file/uploadFile" tagname="文件上传" :headers="headers" multiple v-ref:file></file-upload>
+      </div>
+    </article>
+    <footer slot="modal-footer" class="modal-footer">
+      <!-- <button v-show="show" type="button" class="btn btn-default" @click='close'>取消</button>
+
+      <button v-show="show" type="button" class="btn btn-success" @click='confirm(filename)'>确认</button> -->
+    </footer>
+  </modal>
+</template>
+<script>
+
+  export default {
+    title: "附件",
+    props: ['selectdata'],
+    data() {
+      return {
+        foptions: this.$appdata.getParam('使用类型'),
+        // options:[{label: '工程材料计划', value: '工程材料计划'}, {label:'设计方案', value:'设计方案'}],
+        selectdata: {f_process_id: null},
+        model: {},
+        href: '',
+        fileinfodata: [],
+        headers: {'username': '', 'blodid': '','f_usetype':'','f_remarks':''},
+        show: false,
+        imgadd: '/images/mainicon/adddevice.png',
+        tempusetype: '',
+        tempremarks: '',
+        timeoutHandle: '',
+        username: '',
+        blodid: '',
+        host: location.host,
+        tempindex: null
+      }
+    },
+    methods: {
+      afterCamera() {
+        let data = {
+          tablename: 't_files',
+          parameters: {
+            id: res.id,
+            f_usetype: this.tempusetype[0],
+            f_remarks: this.tempremarks
+          }
+        }
+        this.tempremarks=null
+        this.$resetpost('rs/logic/saveentity', {data: data}, {resolveMsg: null, rejectMsg: '文件备注上传失败'}).then((res) => {
+          console.log('dddddddd', this)
+          this.close()
+        })
+      },
+      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() {
+        console.log(JSON.stringify(this.selectdata.f_process_id))
+        // 直接本地调用
+        // location.href=this.href
+        // 调用卡服务启动高拍仪
+        let data = {
+          f_username: this.username,
+          f_blobid: this.blodid,
+          f_usetype: this.tempusetype[0]
+        }
+        data = JSON.stringify(data)
+        this.$resetpost('Camera/'+data.toString(), {data:null}, {resolveMsg: null, rejectMsg: '文件备注上传失败'}).then((res) => {
+          console.log("调用卡服务启动高拍仪成功")
+        })
+      },
+      load(self) {
+        if (!self.selectdata)
+          return
+        let data = {
+          tablename: 't_files',
+          condition: 'f_blobid=\'' + self.selectdata.f_process_id + '\''
+        }
+        self.$resetpost('rs/sql/singleTable', {data: data}, {
+          warnMsg: null,
+          resolveMsg: null,
+          rejectMsg: '查询错误！',
+          type: 'json',
+          silent: true
+        })
+          .then((res) => {
+            console.log("读取请求发送成功")
+            console.log(JSON.stringify(res))
+            // 查询的数组和现在的数组‘长度’不一致就刷新
+            if (res.data.length != self.fileinfodata.length) {
+              for (var i = 0; i < res.data.length; i++) {
+                if((res.data[i].f_remarks==null&&res.data[i].f_usetype==null)){
+                  res.data.splice(i,1)
+                  i--
+                  continue
+                }
+                let temp=''
+                temp = res.data[i].f_downloadpath
+                let URL = temp.substring(temp.lastIndexOf(":\\") + 2)
+                res.data[i].f_downloadURL = "http://" + this.host + "/" + URL
+                res.data[i].f_uploaddate = self.formatdate(res.data[i].f_uploaddate)
+              }
+              self.fileinfodata = []
+              self.fileinfodata = res.data
+            }
+          })
+      },
+      // 数据库时间格式化
+      formatdate(val){
+        //45012367890123
+        //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
+      },
+      // 父组件更新子组件属性
+      updateData(val) {
+        this.selectdata = val
+        this.headers.username=val.f_apply_operator
+      },
+      // 下载
+      fileDownload(id) {
+        console.log("id为" + id)
+        this.$resetget('rs/file/getfile/' + id).then((res) => {
+          console.log("下载请求发送成功")
+        })
+      },
+      // 打开文件上传对话框
+      fileUpload() {
+        if (this.tempremarks) {
+          this.show = true
+          // this.tempremarks = this.fileinfodata[index].f_remarks
+        } else {
+          this.$showMessage("请先填写文件说明")
+        }
+      },
+      // 关闭文件上传对话框
+      close() {
+        // this.show = false
+        if (this.show) {
+          this.show = false
+          // 将选的文件清空
+          let ddd = new Document()
+          ddd = this.$refs.file.$el.querySelector('input').files[0]
+          console.log("hahaha", ddd)
+          this.$refs.file.$el.querySelector('input').value = ''
+        }
+      }
+    },
+    ready() {
+      console.log("开始")
+      this.load(this)
+    },
+    watch: {
+      'selectdata'() {
+        this.headers.blodid = this.selectdata.f_process_id
+        this.load(this)
+      },
+      deep: true
+    },
+    events: {
+      onFileUpload: function (file, res) {
+        console.log("上传完毕")
+        let data = {
+          tablename: 't_files',
+          parameters: {
+            id: res.id,
+            f_usetype: this.tempusetype[0],
+            f_remarks: this.tempremarks
+          }
+        }
+        this.tempremarks=null
+        this.$resetpost('rs/logic/saveentity', {data: data}, {resolveMsg: null, rejectMsg: '文件备注上传失败'}).then((res) => {
+          console.log('dddddddd', this)
+          this.close()
+          this.load(this)
+        })
+      }
+    }
+  }
+</script>
+<style>
+
+  *{
+    padding: 0px;
+    margin: 0px;
+  }
+
+  .inpGroup {
+    position: absolute;
+    left: 0px;
+    right: 220px;
+    height: 40px;
+    font-family: "微软雅黑";
+  }
+
+  .inp {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0px 10px;
+    height: 40px;
+    font-size: 18px;
+    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: 18px;
+       line-height: 40px;
+       color: #ffffff;
+       text-align: center;
+       background-color: rgb(90, 180, 90);
+       border-radius: 4px;
+       cursor: pointer;
+     }
+  .inp_button2 {
+    float: right;
+    margin-left: 10px;
+    /*    position: absolute;
+        right: 35px;
+        height: 40px;*/
+    width: auto;
+    font-size: 16px;
+    line-height: 40px;
+    color: #ffffff;
+    text-align: center;
+    border-radius: 4px;
+    cursor: pointer;
+
+  }
+.inp_button2 button{
+  width: 100%;
+  height: 100%;
+}
+  .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: 120px;
+    width: 140px;
+    background-color: rgb(240, 240, 240);
+    overflow: hidden;
+    line-height: 120px;
+  }
+
+  .showData .left img {
+    width: 100%;
+    height: auto;
+  }
+
+  .showData .right {
+    position: absolute;
+    top: 0px;
+    left: 150px;
+    right: 0px;
+    height: 120px;
+  }
+
+  .showData .right .top {
+    height: 20px;
+    font-size: 14px;
+    line-height: 20px;
+    color: rgb(98, 98, 98);
+    overflow: hidden;
+  }
+
+  .showData .right .top .topleft {
+    float: left;
+    height: 20px;
+    margin-right: 15px;
+  }
+
+  .showData .right .top .topright {
+    float: right;
+    margin-left: 15px;
+  }
+
+  .showData .right .text {
+    word-wrap: break-word;
+    overflow: hidden;
+    height: 60px;
+    font-size: 14px;
+    color: #999999;
+    line-height: 30px;
+  }
+
+  .showData .right ul {
+    height: 20px;
+    padding: 0px;
+    margin: 0px;
+    font-size: 0px;
+  }
+
+  .showData .right ul li {
+    display: inline-block;
+    height: 18px;
+    list-style: none;
+    font-size: 14px;
+    line-height: 18px;
+    color: #FFFFFF;
+    background-color: #5bb85d;
+    padding: 0px 7px;
+    margin-right: 11px;
+    cursor: pointer;
+  }
+
+  .showData .right ul li:hover {
+    background-color: rgb(80, 150, 80);
+  }
+
+  .showData .right ul li:active {
+    background-color: rgb(150, 200, 150);
+  }
+
+  .showData .right ul li a {
+    width: 100%;
+    height: 100%;
+    text-decoration: none;
+    color: #FFFFFF;
+  }
+
+  body {
+    color: black;
+  }
+</style>