优化收款单

jshERP-web/src/components/jeecg/JUpload.vue

@@ -1,434 +1,435 @@
-<template>
-  <div :id="containerId" style="position: relative">
-
-    <!--  ---------------------------- begin 图片左右换位置 ------------------------------------- -->
-    <div class="movety-container" :style="{top:top+'px',left:left+'px',display:moveDisplay}" style="padding:0 8px;position: absolute;z-index: 91;height: 32px;width: 104px;text-align: center;">
-      <div :id="containerId+'-mover'" :class="showMoverTask?'uploadty-mover-mask':'movety-opt'" style="margin-top: 12px">
-        <a @click="moveLast" style="margin: 0 5px;"><a-icon type="arrow-left" style="color: #fff;font-size: 16px"/></a>
-        <a @click="moveNext" style="margin: 0 5px;"><a-icon type="arrow-right" style="color: #fff;font-size: 16px"/></a>
-      </div>
-    </div>
-    <!--  ---------------------------- end 图片左右换位置 ------------------------------------- -->
-
-    <a-upload
-      name="file"
-      :multiple="true"
-      :action="uploadAction"
-      :headers="headers"
-      :data="{'biz':bizPath}"
-      :fileList="fileList"
-      :beforeUpload="beforeUpload"
-      @change="handleChange"
-      :disabled="disabled"
-      :returnUrl="returnUrl"
-      :listType="complistType"
-      @preview="handlePreview"
-      :class="{'uploadty-disabled':disabled}">
-      <template>
-        <div v-if="isImageComp">
-          <a-icon type="plus" />
-          <div class="ant-upload-text">{{ text }}</div>
-        </div>
-        <a-button v-else-if="buttonVisible">
-         <a-icon type="upload" />{{ text }}
-        </a-button>
-      </template>
-    </a-upload>
-    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
-      <img alt="example" style="width: 100%" :src="previewImage" />
-    </a-modal>
-  </div>
-</template>
-
-<script>
-
-  import Vue from 'vue'
-  import { ACCESS_TOKEN } from "@/store/mutation-types"
-  import { getFileAccessHttpUrl } from '@/api/manage';
-
-  const FILE_TYPE_ALL = "all"
-  const FILE_TYPE_IMG = "image"
-  const FILE_TYPE_TXT = "file"
-  const uidGenerator=()=>{
-    return '-'+parseInt(Math.random()*10000+1,10);
-  }
-  const getFileName=(path)=>{
-    if(path.lastIndexOf("\\")>=0){
-      let reg=new RegExp("\\\\","g");
-      path = path.replace(reg,"/");
-    }
-    return path.substring(path.lastIndexOf("/")+1);
-  }
-  export default {
-    name: 'JUpload',
-    data(){
-      return {
-        uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
-        headers:{},
-        fileList: [],
-        newFileList: [],
-        uploadGoOn:true,
-        previewVisible: false,
-        //---------------------------- begin 图片左右换位置 -------------------------------------
-        previewImage: '',
-        containerId:'',
-        top:'',
-        left:'',
-        moveDisplay:'none',
-        showMoverTask:false,
-        moverHold:false,
-        currentImg:''
-        //---------------------------- end 图片左右换位置 -------------------------------------
-      }
-    },
-    props:{
-      text:{
-        type:String,
-        required:false,
-        default:"点击上传"
-      },
-      fileType:{
-        type:String,
-        required:false,
-        default:FILE_TYPE_ALL
-      },
-      /*这个属性用于控制文件上传的业务路径*/
-      bizPath:{
-        type:String,
-        required:false,
-        default:"temp"
-      },
-      value:{
-        type:[String,Array],
-        required:false
-      },
-      // update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
-      disabled:{
-        type:Boolean,
-        required:false,
-        default: false
-      },
-      // update-end- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
-      //此属性被废弃了
-      triggerChange:{
-        type: Boolean,
-        required: false,
-        default: false
-      },
-      /**
-       * update -- author:lvdandan -- date:20190219 -- for:Jupload组件增加是否返回url，
-       * true：仅返回url
-       * false：返回fileName filePath fileSize
-       */
-      returnUrl:{
-        type:Boolean,
-        required:false,
-        default: true
-      },
-      number:{
-        type:Number,
-        required:false,
-        default: 0
-      },
-      buttonVisible:{
-        type:Boolean,
-        required:false,
-        default: true
-      },
-    },
-    watch:{
-      value:{
-        immediate: true,
-        handler() {
-          let val = this.value
-          if (val instanceof Array) {
-            if(this.returnUrl){
-              this.initFileList(val.join(','))
-            }else{
-              this.initFileListArr(val);
-            }
-          } else {
-            this.initFileList(val)
-          }
-        }
-      }
-    },
-    computed:{
-      isImageComp(){
-        return this.fileType === FILE_TYPE_IMG
-      },
-      complistType(){
-        return this.fileType === FILE_TYPE_IMG?'picture-card':'text'
-      }
-    },
-    created(){
-      const token = Vue.ls.get(ACCESS_TOKEN);
-      //---------------------------- begin 图片左右换位置 -------------------------------------
-      this.headers = {"X-Access-Token":token};
-      this.containerId = 'container-ty-'+new Date().getTime();
-      //---------------------------- end 图片左右换位置 -------------------------------------
-    },
-
-    methods:{
-      initFileListArr(val){
-        if(!val || val.length==0){
-          this.fileList = [];
-          return;
-        }
-        let fileList = [];
-        for(var a=0;a<val.length;a++){
-          let url = getFileAccessHttpUrl(val[a].filePath);
-          fileList.push({
-            uid:uidGenerator(),
-            name:val[a].fileName,
-            status: 'done',
-            url: url,
-            response:{
-              status:"history",
-              message:val[a].filePath
-            }
-          })
-        }
-        this.fileList = fileList
-      },
-      initFileList(paths){
-        if(!paths || paths.length==0){
-          //return [];
-          // update-begin- --- author:os_chengtgen ------ date:20190729 ---- for:issues:326,Jupload组件初始化bug
-          this.fileList = [];
-          return;
-          // update-end- --- author:os_chengtgen ------ date:20190729 ---- for:issues:326,Jupload组件初始化bug
-        }
-        let fileList = [];
-        let arr = paths.split(",")
-        for(var a=0;a<arr.length;a++){
-          let url = getFileAccessHttpUrl(arr[a]);
-          fileList.push({
-            uid:uidGenerator(),
-            name:getFileName(arr[a]),
-            status: 'done',
-            url: url,
-            response:{
-              status:"history",
-              message:arr[a]
-            }
-          })
-        }
-        this.fileList = fileList
-      },
-      handlePathChange(){
-        let uploadFiles = this.fileList
-        let path = ''
-        if(!uploadFiles || uploadFiles.length==0){
-          path = ''
-        }
-        let arr = [];
-
-        for(var a=0;a<uploadFiles.length;a++){
-          arr.push(uploadFiles[a].response.message)
-        }
-        if(arr.length>0){
-          path = arr.join(",")
-        }
-        this.$emit('change', path);
-      },
-      beforeUpload(file){
-        this.uploadGoOn=true
-        var fileType = file.type;
-        if(this.fileType===FILE_TYPE_IMG){
-          if(fileType.indexOf('image')<0){
-            this.$message.warning('请上传图片');
-            this.uploadGoOn=false
-            return false;
-          }
-        }
-        //TODO 扩展功能验证文件大小
-        return true
-      },
-      handleChange(info) {
-        console.log("--文件列表改变--")
-        if(!info.file.status && this.uploadGoOn === false){
-          info.fileList.pop();
-        }
-        let fileList = info.fileList
-        if(info.file.status==='done'){
-          if(this.number>0){
-            fileList = fileList.slice(-this.number);
-          }
-          if(info.file.response.success){
-            fileList = fileList.map((file) => {
-              if (file.response) {
-                let reUrl = file.response.message;
-                file.url = getFileAccessHttpUrl(reUrl);
-              }
-              return file;
-            });
-          }
-          //this.$message.success(`${info.file.name} 上传成功!`);
-        }else if (info.file.status === 'error') {
-          this.$message.error(`${info.file.name} 上传失败.`);
-        }else if(info.file.status === 'removed'){
-          this.handleDelete(info.file)
-        }
-        this.fileList = fileList
-        if(info.file.status==='done' || info.file.status === 'removed'){
-          //returnUrl为true时仅返回文件路径
-          if(this.returnUrl){
-            this.handlePathChange()
-          }else{
-            //returnUrl为false时返回文件名称、文件路径及文件大小
-            this.newFileList = [];
-            for(var a=0;a<fileList.length;a++){
-              var fileJson = {
-                fileName:fileList[a].name,
-                filePath:fileList[a].response.message,
-                fileSize:fileList[a].size
-              };
-              this.newFileList.push(fileJson);
-            }
-            this.$emit('change', this.newFileList);
-          }
-        }
-      },
-      handleDelete(file){
-        //如有需要新增 删除逻辑
-        console.log(file)
-      },
-      handlePreview(file){
-        if(this.fileType === FILE_TYPE_IMG){
-          this.previewImage = file.url || file.thumbUrl;
-          this.previewVisible = true;
-        }else{
-          location.href=file.url
-        }
-      },
-      handleCancel(){
-        this.previewVisible = false;
-      },
-      //---------------------------- begin 图片左右换位置 -------------------------------------
-      moveLast(){
-        //console.log(ev)
-        //console.log(this.fileList)
-        //console.log(this.currentImg)
-        let index = this.getIndexByUrl();
-        if(index==0){
-          this.$message.warn('未知的操作')
-        }else{
-          let curr = this.fileList[index].url;
-          let last = this.fileList[index-1].url;
-          let arr =[]
-          for(let i=0;i<this.fileList.length;i++){
-            if(i==index-1){
-              arr.push(curr)
-            }else if(i==index){
-              arr.push(last)
-            }else{
-              arr.push(this.fileList[i].url)
-            }
-          }
-          this.currentImg = last
-          this.$emit('change',arr.join(','))
-        }
-      },
-      moveNext(){
-        let index = this.getIndexByUrl();
-        if(index==this.fileList.length-1){
-          this.$message.warn('已到最后~')
-        }else{
-          let curr = this.fileList[index].url;
-          let next = this.fileList[index+1].url;
-          let arr =[]
-          for(let i=0;i<this.fileList.length;i++){
-            if(i==index+1){
-              arr.push(curr)
-            }else if(i==index){
-              arr.push(next)
-            }else{
-              arr.push(this.fileList[i].url)
-            }
-          }
-          this.currentImg = next
-          this.$emit('change',arr.join(','))
-        }
-      },
-      getIndexByUrl(){
-        for(let i=0;i<this.fileList.length;i++){
-          if(this.fileList[i].url === this.currentImg || encodeURI(this.fileList[i].url) === this.currentImg){
-            return i;
-          }
-        }
-        return -1;
-      }
-    },
-    mounted(){
-      const moverObj = document.getElementById(this.containerId+'-mover');
-      moverObj.addEventListener('mouseover',()=>{
-        this.moverHold = true
-        this.moveDisplay = 'block';
-      });
-      moverObj.addEventListener('mouseout',()=>{
-        this.moverHold = false
-        this.moveDisplay = 'none';
-      });
-      let picList = document.getElementById(this.containerId)?document.getElementById(this.containerId).getElementsByClassName('ant-upload-list-picture-card'):[];
-      if(picList && picList.length>0){
-        picList[0].addEventListener('mouseover',(ev)=>{
-          ev = ev || window.event;
-          let target = ev.target || ev.srcElement;
-          if('ant-upload-list-item-info' == target.className){
-            this.showMoverTask=false
-            let item = target.parentElement
-            this.left = item.offsetLeft
-            this.top=item.offsetTop+item.offsetHeight-50;
-            this.moveDisplay = 'block';
-            this.currentImg = target.getElementsByTagName('img')[0].src
-          }
-
-        });
-
-        picList[0].addEventListener('mouseout',(ev)=>{
-          ev = ev || window.event;
-          let target = ev.target || ev.srcElement;
-          //console.log('移除',target)
-          if('ant-upload-list-item-info' == target.className){
-            this.showMoverTask=true
-            setTimeout(()=>{
-              if(this.moverHold === false)
-                this.moveDisplay = 'none';
-            },100)
-          }
-          if('ant-upload-list-item ant-upload-list-item-done' == target.className || 'ant-upload-list ant-upload-list-picture-card'== target.className){
-            this.moveDisplay = 'none';
-          }
-        })
-        //---------------------------- end 图片左右换位置 -------------------------------------
-      }
-    },
-    model: {
-      prop: 'value',
-      event: 'change'
-    }
-  }
-</script>
-
-<style lang="less">
-.uploadty-disabled{
-  .ant-upload-list-item {
-    .anticon-close{
-      display: none;
-    }
-    .anticon-delete{
-      display: none;
-    }
-  }
-}
-  //---------------------------- begin 图片左右换位置 -------------------------------------
-  .uploadty-mover-mask{
-    background-color: rgba(0, 0, 0, 0.5);
-    opacity: .8;
-    color: #fff;
-    height: 28px;
-    line-height: 28px;
-  }
-  //---------------------------- end 图片左右换位置 -------------------------------------
+<template>
+  <div :id="containerId" style="position: relative">
+
+    <!--  ---------------------------- begin 图片左右换位置 ------------------------------------- -->
+    <div class="movety-container" :style="{top:top+'px',left:left+'px',display:moveDisplay}" style="padding:0 8px;position: absolute;z-index: 91;height: 32px;width: 104px;text-align: center;">
+      <div :id="containerId+'-mover'" :class="showMoverTask?'uploadty-mover-mask':'movety-opt'" style="margin-top: 12px">
+        <a @click="moveLast" style="margin: 0 5px;"><a-icon type="arrow-left" style="color: #fff;font-size: 16px"/></a>
+        <a @click="moveNext" style="margin: 0 5px;"><a-icon type="arrow-right" style="color: #fff;font-size: 16px"/></a>
+      </div>
+    </div>
+    <!--  ---------------------------- end 图片左右换位置 ------------------------------------- -->
+
+    <a-upload
+      name="file"
+      :multiple="true"
+      :action="uploadAction"
+      :headers="headers"
+      :data="{'biz':bizPath}"
+      :fileList="fileList"
+      :beforeUpload="beforeUpload"
+      @change="handleChange"
+      :disabled="disabled"
+      :returnUrl="returnUrl"
+      :listType="complistType"
+      @preview="handlePreview"
+      :class="{'uploadty-disabled':disabled}">
+      <template>
+        <div v-if="isImageComp">
+          <a-icon type="plus" />
+          <div class="ant-upload-text">{{ text }}</div>
+        </div>
+        <a-button v-else-if="buttonVisible">
+         <a-icon type="upload" />{{ text }}
+        </a-button>
+      </template>
+    </a-upload>
+    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+      <img alt="example" style="width: 100%" :src="previewImage" />
+    </a-modal>
+  </div>
+</template>
+
+<script>
+
+  import Vue from 'vue'
+  import { ACCESS_TOKEN } from "@/store/mutation-types"
+  import { getFileAccessHttpUrl } from '@/api/manage';
+
+  const FILE_TYPE_ALL = "all"
+  const FILE_TYPE_IMG = "image"
+  const FILE_TYPE_TXT = "file"
+  const uidGenerator=()=>{
+    return '-'+parseInt(Math.random()*10000+1,10);
+  }
+  const getFileName=(path)=>{
+    if(path.lastIndexOf("\\")>=0){
+      let reg=new RegExp("\\\\","g");
+      path = path.replace(reg,"/");
+    }
+    return path.substring(path.lastIndexOf("/")+1);
+  }
+  export default {
+    name: 'JUpload',
+    data(){
+      return {
+        uploadAction:window._CONFIG['domianURL']+"/systemConfig/upload",
+        headers:{},
+        fileList: [],
+        newFileList: [],
+        uploadGoOn:true,
+        previewVisible: false,
+        //---------------------------- begin 图片左右换位置 -------------------------------------
+        previewImage: '',
+        containerId:'',
+        top:'',
+        left:'',
+        moveDisplay:'none',
+        showMoverTask:false,
+        moverHold:false,
+        currentImg:''
+        //---------------------------- end 图片左右换位置 -------------------------------------
+      }
+    },
+    props:{
+      text:{
+        type:String,
+        required:false,
+        default:"点击上传"
+      },
+      fileType:{
+        type:String,
+        required:false,
+        default:FILE_TYPE_ALL
+      },
+      /*这个属性用于控制文件上传的业务路径*/
+      bizPath:{
+        type:String,
+        required:false,
+        default:"temp"
+      },
+      value:{
+        type:[String,Array],
+        required:false
+      },
+      // update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
+      disabled:{
+        type:Boolean,
+        required:false,
+        default: false
+      },
+      // update-end- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
+      //此属性被废弃了
+      triggerChange:{
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      /**
+       * update -- author:lvdandan -- date:20190219 -- for:Jupload组件增加是否返回url，
+       * true：仅返回url
+       * false：返回fileName filePath fileSize
+       */
+      returnUrl:{
+        type:Boolean,
+        required:false,
+        default: true
+      },
+      number:{
+        type:Number,
+        required:false,
+        default: 0
+      },
+      buttonVisible:{
+        type:Boolean,
+        required:false,
+        default: true
+      },
+    },
+    watch:{
+      value:{
+        immediate: true,
+        handler() {
+          let val = this.value
+          if (val instanceof Array) {
+            if(this.returnUrl){
+              this.initFileList(val.join(','))
+            }else{
+              this.initFileListArr(val);
+            }
+          } else {
+            this.initFileList(val)
+          }
+        }
+      }
+    },
+    computed:{
+      isImageComp(){
+        return this.fileType === FILE_TYPE_IMG
+      },
+      complistType(){
+        return this.fileType === FILE_TYPE_IMG?'picture-card':'text'
+      }
+    },
+    created(){
+      const token = Vue.ls.get(ACCESS_TOKEN);
+      //---------------------------- begin 图片左右换位置 -------------------------------------
+      this.headers = {"X-Access-Token":token};
+      this.containerId = 'container-ty-'+new Date().getTime();
+      //---------------------------- end 图片左右换位置 -------------------------------------
+    },
+
+    methods:{
+      initFileListArr(val){
+        if(!val || val.length==0){
+          this.fileList = [];
+          return;
+        }
+        let fileList = [];
+        for(var a=0;a<val.length;a++){
+          let url = getFileAccessHttpUrl(val[a].filePath);
+          fileList.push({
+            uid:uidGenerator(),
+            name:val[a].fileName,
+            status: 'done',
+            url: url,
+            response:{
+              code:"history",
+              data:val[a].filePath
+            }
+          })
+        }
+        this.fileList = fileList
+      },
+      initFileList(paths){
+        if(!paths || paths.length==0){
+          //return [];
+          // update-begin- --- author:os_chengtgen ------ date:20190729 ---- for:issues:326,Jupload组件初始化bug
+          this.fileList = [];
+          return;
+          // update-end- --- author:os_chengtgen ------ date:20190729 ---- for:issues:326,Jupload组件初始化bug
+        }
+        let fileList = [];
+        let arr = paths.split(",")
+        for(var a=0;a<arr.length;a++){
+          let url = getFileAccessHttpUrl(arr[a]);
+          fileList.push({
+            uid:uidGenerator(),
+            name:getFileName(arr[a]),
+            status: 'done',
+            url: url,
+            response:{
+              code:"history",
+              data:arr[a]
+            }
+          })
+        }
+        this.fileList = fileList
+      },
+      handlePathChange(){
+        let uploadFiles = this.fileList
+        let path = ''
+        if(!uploadFiles || uploadFiles.length==0){
+          path = ''
+        }
+        let arr = [];
+
+        for(var a=0;a<uploadFiles.length;a++){
+          arr.push(uploadFiles[a].response.data)
+        }
+        if(arr.length>0){
+          path = arr.join(",")
+        }
+        this.$emit('change', path);
+      },
+      beforeUpload(file){
+        this.uploadGoOn=true
+        var fileType = file.type;
+        if(this.fileType===FILE_TYPE_IMG){
+          if(fileType.indexOf('image')<0){
+            this.$message.warning('请上传图片');
+            this.uploadGoOn=false
+            return false;
+          }
+        }
+        //TODO 扩展功能验证文件大小
+        return true
+      },
+      handleChange(info) {
+        console.log("--文件列表改变--")
+        debugger
+        if(!info.file.status && this.uploadGoOn === false){
+          info.fileList.pop();
+        }
+        let fileList = info.fileList
+        if(info.file.status==='done'){
+          if(this.number>0){
+            fileList = fileList.slice(-this.number);
+          }
+          if(info.file.response.code === 200){
+            fileList = fileList.map((file) => {
+              if (file.response) {
+                let reUrl = file.response.data;
+                file.url = getFileAccessHttpUrl(reUrl);
+              }
+              return file;
+            });
+          }
+          //this.$message.success(`${info.file.name} 上传成功!`);
+        }else if (info.file.status === 'error') {
+          this.$message.error(`${info.file.name} 上传失败.`);
+        }else if(info.file.status === 'removed'){
+          this.handleDelete(info.file)
+        }
+        this.fileList = fileList
+        if(info.file.status==='done' || info.file.status === 'removed'){
+          //returnUrl为true时仅返回文件路径
+          if(this.returnUrl){
+            this.handlePathChange()
+          }else{
+            //returnUrl为false时返回文件名称、文件路径及文件大小
+            this.newFileList = [];
+            for(var a=0;a<fileList.length;a++){
+              var fileJson = {
+                fileName:fileList[a].name,
+                filePath:fileList[a].response.data,
+                fileSize:fileList[a].size
+              };
+              this.newFileList.push(fileJson);
+            }
+            this.$emit('change', this.newFileList);
+          }
+        }
+      },
+      handleDelete(file){
+        //如有需要新增 删除逻辑
+        console.log(file)
+      },
+      handlePreview(file){
+        if(this.fileType === FILE_TYPE_IMG){
+          this.previewImage = file.url || file.thumbUrl;
+          this.previewVisible = true;
+        }else{
+          location.href=file.url
+        }
+      },
+      handleCancel(){
+        this.previewVisible = false;
+      },
+      //---------------------------- begin 图片左右换位置 -------------------------------------
+      moveLast(){
+        //console.log(ev)
+        //console.log(this.fileList)
+        //console.log(this.currentImg)
+        let index = this.getIndexByUrl();
+        if(index==0){
+          this.$message.warn('未知的操作')
+        }else{
+          let curr = this.fileList[index].url;
+          let last = this.fileList[index-1].url;
+          let arr =[]
+          for(let i=0;i<this.fileList.length;i++){
+            if(i==index-1){
+              arr.push(curr)
+            }else if(i==index){
+              arr.push(last)
+            }else{
+              arr.push(this.fileList[i].url)
+            }
+          }
+          this.currentImg = last
+          this.$emit('change',arr.join(','))
+        }
+      },
+      moveNext(){
+        let index = this.getIndexByUrl();
+        if(index==this.fileList.length-1){
+          this.$message.warn('已到最后~')
+        }else{
+          let curr = this.fileList[index].url;
+          let next = this.fileList[index+1].url;
+          let arr =[]
+          for(let i=0;i<this.fileList.length;i++){
+            if(i==index+1){
+              arr.push(curr)
+            }else if(i==index){
+              arr.push(next)
+            }else{
+              arr.push(this.fileList[i].url)
+            }
+          }
+          this.currentImg = next
+          this.$emit('change',arr.join(','))
+        }
+      },
+      getIndexByUrl(){
+        for(let i=0;i<this.fileList.length;i++){
+          if(this.fileList[i].url === this.currentImg || encodeURI(this.fileList[i].url) === this.currentImg){
+            return i;
+          }
+        }
+        return -1;
+      }
+    },
+    mounted(){
+      const moverObj = document.getElementById(this.containerId+'-mover');
+      moverObj.addEventListener('mouseover',()=>{
+        this.moverHold = true
+        this.moveDisplay = 'block';
+      });
+      moverObj.addEventListener('mouseout',()=>{
+        this.moverHold = false
+        this.moveDisplay = 'none';
+      });
+      let picList = document.getElementById(this.containerId)?document.getElementById(this.containerId).getElementsByClassName('ant-upload-list-picture-card'):[];
+      if(picList && picList.length>0){
+        picList[0].addEventListener('mouseover',(ev)=>{
+          ev = ev || window.event;
+          let target = ev.target || ev.srcElement;
+          if('ant-upload-list-item-info' == target.className){
+            this.showMoverTask=false
+            let item = target.parentElement
+            this.left = item.offsetLeft
+            this.top=item.offsetTop+item.offsetHeight-50;
+            this.moveDisplay = 'block';
+            this.currentImg = target.getElementsByTagName('img')[0].src
+          }
+
+        });
+
+        picList[0].addEventListener('mouseout',(ev)=>{
+          ev = ev || window.event;
+          let target = ev.target || ev.srcElement;
+          //console.log('移除',target)
+          if('ant-upload-list-item-info' == target.className){
+            this.showMoverTask=true
+            setTimeout(()=>{
+              if(this.moverHold === false)
+                this.moveDisplay = 'none';
+            },100)
+          }
+          if('ant-upload-list-item ant-upload-list-item-done' == target.className || 'ant-upload-list ant-upload-list-picture-card'== target.className){
+            this.moveDisplay = 'none';
+          }
+        })
+        //---------------------------- end 图片左右换位置 -------------------------------------
+      }
+    },
+    model: {
+      prop: 'value',
+      event: 'change'
+    }
+  }
+</script>
+
+<style lang="less">
+.uploadty-disabled{
+  .ant-upload-list-item {
+    .anticon-close{
+      display: none;
+    }
+    .anticon-delete{
+      display: none;
+    }
+  }
+}
+  //---------------------------- begin 图片左右换位置 -------------------------------------
+  .uploadty-mover-mask{
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: .8;
+    color: #fff;
+    height: 28px;
+    line-height: 28px;
+  }
+  //---------------------------- end 图片左右换位置 -------------------------------------
 </style>

jshERP-web/src/views/bill/PurchaseInList.vue

@@ -152,8 +152,14 @@
               return (record.discountMoney + record.discountLastMoney).toFixed(2);
             }
           },
-          { title: '优惠后金额', dataIndex: 'discountLastMoney',width:100},
-          { title: '付款', dataIndex: 'changeAmount',width:50},
+          { title: '优惠后金额', dataIndex: 'discountLastMoney',width:80},
+          { title: '付款', dataIndex: 'changeAmount',width:60},
+          { title: '欠款', dataIndex: 'debt',width:60,
+            customRender:function (text,record,index) {
+              let debt = record.discountLastMoney - record.changeAmount
+              return debt? debt.toFixed(2):''
+            }
+          },
           {
             title: '操作',
             dataIndex: 'action',

jshERP-web/src/views/bill/SaleOutList.vue

@@ -152,8 +152,14 @@
               return (record.discountMoney + record.discountLastMoney).toFixed(2);
             }
           },
-          { title: '优惠后金额', dataIndex: 'discountLastMoney',width:100},
-          { title: '收款', dataIndex: 'changeAmount',width:50},
+          { title: '优惠后金额', dataIndex: 'discountLastMoney',width:80},
+          { title: '收款', dataIndex: 'changeAmount',width:60},
+          { title: '欠款', dataIndex: 'debt',width:60,
+            customRender:function (text,record,index) {
+              let debt = record.discountLastMoney - record.changeAmount
+              return debt? debt.toFixed(2):''
+            }
+          },
           {
             title: '操作',
             dataIndex: 'action',

jshERP-web/src/views/financial/dialog/DebtBillList.vue

@@ -1,13 +1,49 @@
 <template>
   <a-modal
     :title="title"
-    :width="1000"
+    :width="1150"
     :visible="visible"
     @ok="handleOk"
     @cancel="handleCancel"
     cancelText="关闭"
     wrapClassName="ant-modal-cust-warp"
     style="top:5%;height: 100%;overflow-y: hidden">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <!-- 搜索区域 -->
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="6" :sm="8">
+            <a-form-item label="单据编号" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
+              <a-input placeholder="请输入单据编号查询" v-model="queryParam.number"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="商品信息" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
+              <a-input placeholder="请输入名称、规格、型号" v-model="queryParam.materialParam"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="7" :sm="10">
+            <a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-range-picker
+                style="width: 210px"
+                v-model="queryParam.createTimeRange"
+                format="YYYY-MM-DD"
+                :placeholder="['开始时间', '结束时间']"
+                @change="onDateChange"
+                @ok="onDateOk"
+              />
+            </a-form-item>
+          </a-col>
+          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+            <a-col :md="6" :sm="24">
+              <a-button type="primary" @click="searchQuery">查询</a-button>
+              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
+            </a-col>
+          </span>
+        </a-row>
+      </a-form>
+    </div>
     <!-- table区域-begin -->
     <a-table
       bordered
@@ -27,6 +63,7 @@
 
 <script>
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+  import Vue from 'vue'
   export default {
     name: 'DebtBillList',
     mixins:[JeecgListMixin],
@@ -40,12 +77,22 @@
         selectBillRows: [],
         selectBillIds: '',
         queryParam: {
+          organId: "",
+          materialParam: "",
           number: "",
-          searchMaterial: "",
           type: "",
           subType: "",
+          roleType: Vue.ls.get('roleType'),
           status: ""
         },
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 8 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
         // 表头
         columns: [
           {
@@ -59,20 +106,30 @@
             }
           },
           { title: '', dataIndex: 'organName',width:120},
-          { title: '单据编号', dataIndex: 'number',width:150},
-          { title: '商品信息', dataIndex: 'materialsList',width:220, ellipsis:true,
+          { title: '单据编号', dataIndex: 'number',width:120},
+          { title: '商品信息', dataIndex: 'materialsList',width:200, ellipsis:true,
             customRender:function (text,record,index) {
               if(text) {
                 return text.replace(",","，");
               }
             }
           },
-          { title: '单据日期', dataIndex: 'operTimeStr',width:145},
+          { title: '单据日期', dataIndex: 'operTimeStr',width:130},
           { title: '操作员', dataIndex: 'userName',width:60},
-          { title: '金额合计', dataIndex: 'totalPrice',width:70}
+          { title: '应收欠款', dataIndex: 'needDebt',width:70,
+            customRender:function (text,record,index) {
+              return (record.discountLastMoney - record.changeAmount).toFixed(2);
+            }
+          },
+          { title: '已收欠款', dataIndex: 'finishDebt',width:70 },
+          { title: '待收欠款', dataIndex: 'debt',width:70,
+            customRender:function (text,record,index) {
+              return (record.discountLastMoney - record.changeAmount - record.finishDebt).toFixed(2);
+            }
+          }
         ],
         url: {
-          list: "/depotHead/list"
+          list: "/depotHead/debtList"
         }
       }
     },
@@ -84,7 +141,8 @@
     created() {
     },
     methods: {
-      show(type, subType, organType, status) {
+      show(organId, type, subType, organType, status) {
+        this.queryParam.organId = organId
         this.queryParam.type = type
         this.queryParam.subType = subType
         this.queryParam.status = status
@@ -109,6 +167,20 @@
         this.$emit('ok', this.selectBillRows);
         this.close();
       },
+      onDateChange: function (value, dateString) {
+        this.queryParam.beginTime=dateString[0];
+        this.queryParam.endTime=dateString[1];
+      },
+      onDateOk(value) {
+        console.log(value);
+      },
+      searchReset() {
+        this.queryParam = {
+          type: this.queryParam.type,
+          subType: this.queryParam.subType
+        }
+        this.loadData(1);
+      },
       getSelectBillRows() {
         let dataSource = this.dataSource;
         let billIds = "";

jshERP-web/src/views/financial/dialog/FinancialDetail.vue

@@ -288,6 +288,11 @@
               </a-col>
             </a-row>
             <a-row class="form-row" :gutter="24">
+              <a-col :span="6">
+                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收款账户">
+                  {{model.accountName}}
+                </a-form-item>
+              </a-col>
               <a-col :span="6">
                 <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="优惠金额">
                   {{model.changeAmount}}
@@ -295,7 +300,6 @@
               </a-col>
               <a-col :span="6"></a-col>
               <a-col :span="6"></a-col>
-              <a-col :span="6"></a-col>
             </a-row>
           </section>
         </template>
@@ -405,8 +409,10 @@
         ],
         moneyInColumns: [
           { title: '销售单据编号',dataIndex: 'billNumber',width: '20%'},
-          { title: '金额',dataIndex: 'eachAmount', width: '10%'},
-          { title: '备注',dataIndex: 'remark', width: '30%'}
+          { title: '应收欠款',dataIndex: 'needDebt', width: '10%'},
+          { title: '已收欠款',dataIndex: 'finishDebt', width: '10%'},
+          { title: '本次收款',dataIndex: 'eachAmount', width: '10%'},
+          { title: '备注',dataIndex: 'remark', width: '20%'}
         ],
         moneyOutColumns: [
           { title: '账户名称',dataIndex: 'accountName',width: '20%'},

jshERP-web/src/views/financial/modules/MoneyInModal.vue

@@ -49,7 +49,7 @@
             <a-col :lg="6" :md="12" :sm="24">
               <!-- 操作按钮 -->
               <div class="action-button">
-                <a-button type="primary" icon="plus" @click="handleClickAdd">批量新增</a-button>
+                <a-button type="primary" icon="plus" @click="handleClickAdd">新增</a-button>
                 <span class="gap"></span>
                 <a-button type="primary" icon="minus" @click="handleClear">清空</a-button>
               </div>
@@ -76,6 +76,15 @@
             </a-col>
           </a-row>
           <a-row class="form-row" :gutter="24">
+            <a-col :lg="6" :md="12" :sm="24">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="收款账户">
+                <a-select placeholder="选择收款账户" v-decorator="[ 'accountId', validatorRules.accountId ]" :dropdownMatchSelectWidth="false">
+                  <a-select-option v-for="(item,index) in accountList" :key="index" :value="item.id">
+                    {{ item.name }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
             <a-col :lg="6" :md="12" :sm="24">
               <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="优惠金额">
                 <a-input placeholder="请输入优惠金额" v-decorator.trim="[ 'changeAmount' ]" />
@@ -85,7 +94,12 @@
             </a-col>
             <a-col :lg="6" :md="12" :sm="24">
             </a-col>
+          </a-row>
+          <a-row class="form-row" :gutter="24">
             <a-col :lg="6" :md="12" :sm="24">
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="文件上传">
+                <j-upload v-model="fileList" bizPath="financial"></j-upload>
+              </a-form-item>
             </a-col>
           </a-row>
         </a-form>
@@ -100,6 +114,8 @@
   import { FormTypes } from '@/utils/JEditableTableUtil'
   import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
   import { FinancialModalMixin } from '../mixins/FinancialModalMixin'
+  import JUpload from '@/components/jeecg/JUpload'
+  import JEllipsis from '@/components/jeecg/JEllipsis'
   import JDate from '@/components/jeecg/JDate'
   import Vue from 'vue'
   export default {
@@ -107,6 +123,8 @@
     mixins: [JEditableTableMixin, FinancialModalMixin],
     components: {
       DebtBillList,
+      JUpload,
+      JEllipsis,
       JDate
     },
     data () {
@@ -118,6 +136,7 @@
         addDefaultRowNum: 0,
         visible: false,
         model: {},
+        fileList:[],
         labelCol: {
           xs: { span: 24 },
           sm: { span: 8 },
@@ -133,10 +152,12 @@
           dataSource: [],
           columns: [
             { title: '销售单据编号',key: 'billNumber',width: '20%', type: FormTypes.input, readonly: true },
-            { title: '金额',key: 'eachAmount', width: '10%', type: FormTypes.inputNumber, statistics: true, placeholder: '请选择${title}',
+            { title: '应收欠款',key: 'needDebt', width: '10%', type: FormTypes.inputNumber, statistics: true, readonly: true },
+            { title: '已收欠款', key: 'finishDebt', width: '10%', type: FormTypes.inputNumber, statistics: true, readonly: true },
+            { title: '本次收款',key: 'eachAmount', width: '10%', type: FormTypes.inputNumber, statistics: true, placeholder: '请选择${title}',
               validateRules: [{ required: true, message: '${title}不能为空' }]
             },
-            { title: '备注',key: 'remark', width: '30%', type: FormTypes.input, placeholder: '请选择${title}'}
+            { title: '备注',key: 'remark', width: '20%', type: FormTypes.input, placeholder: '请选择${title}'}
           ]
         },
         confirmLoading: false,
@@ -150,6 +171,11 @@
             rules: [
               { required: true, message: '请选择经手人!' }
             ]
+          },
+          accountId:{
+            rules: [
+              { required: true, message: '请选择收款账户!' }
+            ]
           }
         },
         url: {
@@ -160,7 +186,7 @@
       }
     },
     created () {
-      this.initDetailAccount()
+      this.initAccount()
     },
     methods: {
       //调用完edit()方法之后会自动调用此方法
@@ -170,8 +196,10 @@
         } else {
           this.model.billTime = this.model.billTimeStr
           this.$nextTick(() => {
-            this.form.setFieldsValue(pick(this.model,'organId', 'handsPersonId', 'billTime', 'billNo', 'remark', 'changeAmount'))
+            this.form.setFieldsValue(pick(this.model,'organId', 'handsPersonId', 'billTime', 'billNo', 'remark',
+                  'accountId','changeAmount'))
           });
+          this.fileList = this.model.fileName
           // 加载子表数据
           let params = {
             headerId: this.model.id
@@ -190,6 +218,9 @@
           totalPrice += item.eachAmount-0
         }
         billMain.totalPrice = totalPrice
+        if(this.fileList && this.fileList.length > 0) {
+          billMain.fileName = this.fileList
+        }
         if(this.model.id){
           billMain.id = this.model.id
         }
@@ -199,8 +230,13 @@
         }
       },
       handleClickAdd() {
-        this.$refs.debtBillList.show('出库', '销售', '客户', "0")
-        this.$refs.debtBillList.title = "选择销售出库"
+        let organId = this.form.getFieldValue('organId')
+        if(organId){
+          this.$refs.debtBillList.show(organId, '出库', '销售', '客户', "0")
+          this.$refs.debtBillList.title = "选择销售出库欠款单据"
+        } else {
+          this.$message.warning('请选择客户！');
+        }
       },
       handleClear() {
         this.accountTable.dataSource = []
@@ -217,8 +253,11 @@
         for(let i=0; i<selectBillRows.length; i++){
           let info = selectBillRows[i]
           info.billNumber = info.number
-          info.eachAmount = info.totalPrice
-          listEx.push(info)
+          info.needDebt = (info.discountLastMoney - info.changeAmount).toFixed(2)
+          info.eachAmount =  (info.discountLastMoney - info.changeAmount - info.finishDebt).toFixed(2);
+          if(info.eachAmount != 0) {
+            listEx.push(info)
+          }
         }
         tab.dataSource = listEx
         typeof success === 'function' ? success(res) : ''