From b2d72d9308c08217a84a1cd0a43320a359cc4523 Mon Sep 17 00:00:00 2001
From: hezidan <2033098269@qq.com>
Date: Tue, 26 Mar 2024 13:51:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E7=BC=96=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/index.js             |   8 +-
 src/api/axiosFun.js         |   1 -
 src/api/userMG.js           |  25 ++-
 src/components/leftnav.vue  |  28 ++--
 src/imageUpload/index.vue   | 237 +++++++++++++++++++++++++++
 src/main.js                 |   2 +-
 src/router/index.js         |  19 +--
 src/utils/drag.js           | 118 ++++++++++++++
 src/views/fapiao/Fapiao.vue | 308 +++++++++++++-----------------------
 src/views/fapiao/edit.vue   | 259 ++++++++++++++++++++++++++++++
 10 files changed, 775 insertions(+), 230 deletions(-)
 create mode 100644 src/imageUpload/index.vue
 create mode 100644 src/utils/drag.js
 create mode 100644 src/views/fapiao/edit.vue

diff --git a/config/index.js b/config/index.js
index 56ca4d8..27c1032 100644
--- a/config/index.js
+++ b/config/index.js
@@ -12,7 +12,8 @@ module.exports = {
         assetsPublicPath: '/',
         proxyTable: {
             '/api': {
-                target: 'http://localhost:8081', // 你请求的第三方接口
+                target: 'http://192.168.2.88:8081', // 你请求的第三方接口
+                // target: 'http://192.168.80.155:8081', // 你请求的第三方接口
                 changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                 pathRewrite: { // 路径重写，
                     '^/api': '' // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
@@ -21,8 +22,9 @@ module.exports = {
         },
 
         // Various Dev Server settings
-        host: 'localhost', // can be overwritten by process.env.HOST
-        port: 9999, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+        host: '127.0.0.1',
+        // host: '192.168.80.155', // can be overwritten by process.env.HOST
+        port: 9990, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
         autoOpenBrowser: true,
         errorOverlay: true,
         notifyOnErrors: true,
diff --git a/src/api/axiosFun.js b/src/api/axiosFun.js
index e4e1dd0..538a64d 100644
--- a/src/api/axiosFun.js
+++ b/src/api/axiosFun.js
@@ -52,7 +52,6 @@ const req = (method, url, params) => {
         // ]
     }).then(res => res.data);
 };
-
 export {
     loginreq,
     req
diff --git a/src/api/userMG.js b/src/api/userMG.js
index 595dfe0..e4d82fd 100644
--- a/src/api/userMG.js
+++ b/src/api/userMG.js
@@ -50,15 +50,19 @@ export const ModelTagDelete = (params) => { return req("post", "http://127.0.0.1
 /**
  * 发票管理
  **/
-// 发票管理-获取发票列表
 
-export const FapiaoList = (params) => { return req("get", "http://localhost:9999/api/bill/selectAll?current="+params.pageNum+"&size="+params.pageSize+"&baoxiaoname="+params.baoxiaoname+"&billnum="+params.billnum)};
 // // 发票管理-根据Id获取发票
 // export const getFapiaoById = (params) => { return req("get", "http://127.0.0.1:10001/modelTagInfo/detail?id="+params.modelTagId)};
 // 发票管理-获取发票列表
 export const FapiaoAllList = () => { return req("get", "http://127.0.0.1:10001/modelTagInfo/selectAll")};
+// 发票管理-获取发票列表
+export const FapiaoList = (params) => { return req("get", "http://192.168.2.88:9990/api/bill/selectAll?current="+params.pageNum+"&size="+params.pageSize+"&baoxiaoname="+params.baoxiaoname+"&billnum="+params.billnum)};
 // 发票管理-保存（添加编辑）
-export const FapiaoSave = (params) => { return req("post", "http://localhost:9999/api/bill/insert", params) };
+export const FapiaoSave = (params) => { return req("post", "http://192.168.2.88:9990/api/bill/insert", params) };
+
+// export const FapiaoList = (params) => { return req("get", "http://127.0.0.1:9990/api/bill/selectAll?current="+params.pageNum+"&size="+params.pageSize+"&baoxiaoname="+params.baoxiaoname+"&billnum="+params.billnum)};
+// export const FapiaoSave = (params) => { return req("post", "http://127.0.0.1:9990/api/bill/insert", params) };
+
 
 /**
  * 模型管理
@@ -105,6 +109,21 @@ export const FileUplod = (formData) => {
         traditional: true,
         }).then(res => res.data);};
 
+// 上传数据集文件接口
+export const fapiaoPicUplod = (formData) => {
+  return axios(
+    {
+      method: "post",
+      url: "http://192.168.2.88:9990/api/getocr/putfile",
+      headers: {
+        'Content-Type': 'multipart/form-data',
+        token: localStorage.getItem('token'),
+        'Access-Control-Allow-Origin': '*',
+      },
+      data: formData,
+      traditional: true,
+    }).then(res => res.data);};
+
 // 数据集管理-获取模型列表
 export const ModelDataList = (params) => { return req("get", "http://127.0.0.1:10001/modelDataInfo/list?pageNum="+params.pageNum+"&pageSize="+params.pageSize+"&dataName="+params.dataName)};
 // 数据集管理-保存（添加编辑）
diff --git a/src/components/leftnav.vue b/src/components/leftnav.vue
index c70912d..8ceedd5 100644
--- a/src/components/leftnav.vue
+++ b/src/components/leftnav.vue
@@ -25,7 +25,7 @@
   </el-menu>
 </template>
 <script>
-import { menu } from '../api/userMG'
+// import { menu } from '../api/userMG'
 export default {
   name: 'leftnav',
   data() {
@@ -122,19 +122,19 @@ export default {
     }
     this.allmenu = res.data
 
-    menu(localStorage.getItem('token'))
-      .then(res => {
-        console.log(JSON.stringify(res))
-        if (res.success) {
-          this.allmenu = res.data
-        } else {
-          this.$message.error(res.msg)
-          return false
-        }
-      })
-      .catch(err => {
-        this.$message.error('菜单加载失败，请稍后再试！')
-      })
+    // menu(localStorage.getItem('token'))
+    //   .then(res => {
+    //     console.log(JSON.stringify(res))
+    //     if (res.success) {
+    //       this.allmenu = res.data
+    //     } else {
+    //       this.$message.error(res.msg)
+    //       return false
+    //     }
+    //   })
+    //   .catch(err => {
+    //     this.$message.error('菜单加载失败，请稍后再试！')
+    //   })
     // 监听是否收缩侧边栏
     this.$root.Bus.$on('toggle', value => {
       this.collapsed = !value
diff --git a/src/imageUpload/index.vue b/src/imageUpload/index.vue
new file mode 100644
index 0000000..0533c8e
--- /dev/null
+++ b/src/imageUpload/index.vue
@@ -0,0 +1,237 @@
+<template>
+  <div class="component-upload-image">
+    <el-upload
+      multiple
+      :action="uploadImgUrl"
+      list-type="picture-card"
+      :on-success="handleUploadSuccess"
+      :before-upload="handleBeforeUpload"
+      :limit="limit"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      ref="imageUpload"
+      :on-remove="handleDelete"
+      :show-file-list="true"
+      :headers="headers"
+      :file-list="fileList"
+      :on-preview="handlePictureCardPreview"
+      :class="{hide: this.fileList.length >= this.limit}"
+    >
+      <i class="el-icon-plus"></i>
+    </el-upload>
+
+    <!-- 上传提示 -->
+    <div class="el-upload__tip" slot="tip" v-if="showTip">
+      请上传
+      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+      的文件
+    </div>
+
+    <el-dialog
+      v-dialog-drag
+      :visible.sync="dialogVisible"
+      title="预览"
+      width="800"
+      append-to-body
+    >
+      <img
+        :src="dialogImageUrl"
+        style="display: block;max-width:85%;max-height:85%;margin: 0 auto"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    value: [String, Object, Array],
+    // 图片数量限制
+    limit: {
+      type: Number,
+      default: 1,
+    },
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ["png", "jpg", "jpeg"],
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      number: 0,
+      res:'',
+      uploadList: [],
+      dialogImageUrl: "",
+      dialogVisible: false,
+      hideUpload: false,
+      baseUrl: "http://192.168.2.88:8788/photos",
+      // baseUrl: "http://192.168.80.155:8788/photos",
+      uploadImgUrl: "http://192.168.2.88:9990/api/getocr/putfile", // 上传的图片服务器地址
+      headers: {
+        token: localStorage.getItem('token'),
+      },
+      fileList: []
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(',');
+          // 然后将数组转为对象数组
+          this.fileList = list.map(item => {
+            if (typeof item === "string") {
+              if (item.indexOf(this.baseUrl) === -1) {
+                item = { name: this.baseUrl + item, url: this.baseUrl + item };
+              } else {
+                item = { name: item, url: item };
+              }
+            }
+            return item;
+          });
+        } else {
+          this.fileList = [];
+          return [];
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize);
+    },
+  },
+  methods: {
+    // 上传前loading加载
+    handleBeforeUpload(file) {
+      let isImg = false;
+      if (this.fileType.length) {
+        let fileExtension = "";
+        if (file.name.lastIndexOf(".") > -1) {
+          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+        }
+        isImg = this.fileType.some(type => {
+          if (file.type.indexOf(type) > -1) return true;
+          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+          return false;
+        });
+      } else {
+        isImg = file.type.indexOf("image") > -1;
+      }
+
+      if (!isImg) {
+        this.$message(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`)
+        // this.$modal.msgError();
+        return false;
+      }
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$message(`上传头像图片大小不能超过 ${this.fileSize} MB!`)
+
+          // this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
+          return false;
+        }
+      }
+      // this.$modal.loading("正在上传图片，请稍候...");
+      this.number++;
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$message(`上传文件数量不能超过 ${this.limit} 个!`)
+
+      // this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
+    // 上传成功回调
+    handleUploadSuccess(res, file) {
+
+      if (res.code === 0) {
+        this.$emit('dataFromChild', res);
+        this.uploadList.push({ name: res.data.imageurl, url: res.data.imageurl });
+        this.uploadedSuccessfully();
+      } else {
+        this.number--;
+        // this.$modal.closeLoading();
+        // this.$modal.msgError(res.msg);
+        this.$refs.imageUpload.handleRemove(file);
+        this.uploadedSuccessfully();
+      }
+    },
+    // 删除图片
+    handleDelete(file) {
+      const findex = this.fileList.map(f => f.name).indexOf(file.name);
+      if (findex > -1) {
+        this.fileList.splice(findex, 1);
+        this.$emit("input", this.listToString(this.fileList));
+      }
+    },
+    // 上传失败
+    handleUploadError() {
+      this.$message(`上传图片失败，请重试`)
+
+      // this.$modal.msgError("上传图片失败，请重试");
+      // this.$modal.closeLoading();
+    },
+    // 上传结束处理
+    uploadedSuccessfully() {
+      if (this.number > 0 && this.uploadList.length === this.number) {
+        this.fileList = this.fileList.concat(this.uploadList);
+        this.uploadList = [];
+        this.number = 0;
+        this.$emit("input", this.listToString(this.fileList));
+        // this.$modal.closeLoading();
+      }
+    },
+    // 预览
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = "";
+      separator = separator || ",";
+      for (let i in list) {
+        if (list[i].url) {
+          strs += list[i].url.replace(this.baseUrl, "") + separator;
+        }
+      }
+      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+    }
+  }
+};
+</script>
+<!--<style scoped lang="scss">-->
+<!--// .el-upload&#45;&#45;picture-card 控制加号部分-->
+<!--&gt;>>.hide .el-upload&#45;&#45;picture-card {-->
+<!--  display: none;-->
+<!--}-->
+<!--// 去掉动画效果-->
+<!--&gt;>> .el-list-enter-active,-->
+<!--&gt;>> .el-list-leave-active {-->
+<!--  transition: all 0s;-->
+<!--}-->
+
+<!--&gt;>> .el-list-enter, .el-list-leave-active {-->
+<!--  opacity: 0;-->
+<!--  transform: translateY(0);-->
+<!--}-->
+<!--</style>-->
+
diff --git a/src/main.js b/src/main.js
index 17d6ec0..348c7bb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,7 +12,7 @@ import store from './vuex/store';
 // 引入icon
 import './assets/icon/iconfont.css'
 //
-
+import './utils/drag'
 
 
 // 引入echarts
diff --git a/src/router/index.js b/src/router/index.js
index e2a54ed..c24f2b4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -25,6 +25,7 @@ import tags from '@/views/models/Tag';
 
 
 import fapiao from '@/views/fapiao/Fapiao';
+import fapiaoedit from '@/views/fapiao/edit';
 
 
 
@@ -111,20 +112,20 @@ export default new Router({
         },
           {
             path: '/fapiao/Fapiao',
-            name: '发票查询',
+            name: 'fapiao',
             component: fapiao,
             meta: {
               requireAuth: true
             }
           },
-          // {
-          //   path: '/fapiao/Dataset',
-          //   name: '数据集管理',
-          //   component: fapiao,
-          //   meta: {
-          //     requireAuth: true
-          //   }
-          // },
+          {
+            path: '/fapiao/edit',
+            name: 'fapiaoedit',
+            component: fapiaoedit,
+            meta: {
+              requireAuth: true
+            }
+          },
     ]
     }]
 })
diff --git a/src/utils/drag.js b/src/utils/drag.js
new file mode 100644
index 0000000..fb3c8a8
--- /dev/null
+++ b/src/utils/drag.js
@@ -0,0 +1,118 @@
+import Vue from 'vue'
+
+// v-dialogDrag: 弹窗拖拽
+Vue.directive('dialogDrag', {
+  bind(el, binding, vnode, oldVnode) {
+    const dialogHeaderEl = el.querySelector('.el-dialog__header')
+    const dragDom = el.querySelector('.el-dialog')
+    dialogHeaderEl.style.cursor = 'move'
+
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+
+    dialogHeaderEl.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+      const minDragDomLeft = dragDom.offsetLeft;
+      const maxDragDomLeft = document.body.clientWidth - minDragDomLeft - dragDom.offsetWidth;
+      const minDragDomTop = dragDom.offsetTop;
+      const maxDragDomTop = document.documentElement.clientHeight - minDragDomTop - dragDom.offsetHeight;
+
+      // 获取到的值带px 正则匹配替换
+      let styL, styT
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (sty.left.includes('%')) {
+        styL = +document.body.clientWidth * (+sty.left.replace(/\\%/, '') / 100)
+        styT = +document.body.clientHeight * (+sty.top.replace(/\\%/, '') / 100)
+      } else {
+        if (sty.left && sty.left.indexOf('px') > 0) {
+          styL = +sty.left.replace(/(px)/, '')
+        } else {
+          styL = +0
+        }
+        if (sty.top && sty.top.indexOf('px') > 0) {
+          styT = +sty.top.replace(/(px)/, '')
+        } else {
+          styT = +0
+        }
+      }
+      //  console.log("styL:" + styL + ";styT:" + styT)
+
+      document.onmousemove = function (e) {
+        // 通过事件委托，计算移动的距离
+        let l = e.clientX - disX
+        let t = e.clientY - disY
+
+        // 边界处理
+        if (-l > minDragDomLeft) {
+          l = -minDragDomLeft;
+        } else if (l > maxDragDomLeft) {
+          l = maxDragDomLeft;
+        }
+        if (-t > minDragDomTop) {
+          t = -minDragDomTop;
+        } else if (t > maxDragDomTop) {
+          t = maxDragDomTop;
+        }
+
+        // 移动当前元素
+        dragDom.style.left = `${l + styL}px`
+        dragDom.style.top = `${t + styT}px`
+
+        // 将此时的位置传出去
+        // binding.value({x:e.pageX,y:e.pageY})
+      }
+
+      document.onmouseup = function (e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+
+    /**
+     * 增加一个fullscreen按钮
+     */
+    if(binding.value && (binding.value.zoom || binding.value.zoomMx)) {
+      const fullScreenBtn = document.createElement('button')
+      fullScreenBtn.setAttribute('type', 'button')
+      fullScreenBtn.className = "el-dialog__headerbtn"
+      fullScreenBtn.style.setProperty('right', '42px')
+      fullScreenBtn.setAttribute('aria-label', 'Close')
+      const fullScreenBtnI = document.createElement('i')
+      fullScreenBtnI.classList.add("el-icon-full-screen", "el-icon", "r180")
+      fullScreenBtn.appendChild(fullScreenBtnI)
+      let closeBtn = dialogHeaderEl.querySelector('button')
+      dialogHeaderEl.insertBefore(fullScreenBtn, closeBtn)
+      let dialogBodyEl = dialogHeaderEl.parentNode
+      let style = dialogBodyEl.style
+      let w = style.width
+      // let h = style.height
+      let maginTop = style['margin-top']
+      let viewHeight = document.documentElement.clientHeight
+      fullScreenBtn.onclick = (e) => {
+        fullScreenBtnI.classList.toggle("el-icon-full-screen")
+        fullScreenBtnI.classList.toggle("el-icon-copy-document")
+        dialogBodyEl.classList.toggle("is-fullscreen")
+        if(fullScreenBtnI.classList.contains("el-icon-full-screen")) {
+          // 还原
+          dialogBodyEl.style.setProperty("margin-top", maginTop)
+          binding.value.zoomMx && dialogBodyEl.style.setProperty("width", w)
+          dialogBodyEl.style.setProperty("height", 'auto')
+          if(viewHeight * parseInt(maginTop) * 2 / 100 + dialogBodyEl.scrollHeight > viewHeight) {
+            dialogBodyEl.style.setProperty("height", `calc(100% - ${parseInt(maginTop) * 2}${maginTop.match(/\d+\.*\d+(\S*)/)[1]}`)
+          } else {
+            dialogBodyEl.style.setProperty("height", 'auto')
+          }
+        } else {
+          // 最大化
+          dialogBodyEl.style.setProperty("margin-top", 0)
+          binding.value.zoomMx && dialogBodyEl.style.setProperty("width", '100%')
+          dialogBodyEl.style.setProperty("height", '100%')
+        }
+        dialogBodyEl.style.setProperty("left", 0)
+        dialogBodyEl.style.setProperty("top", 0)
+      }
+    }
+  }
+})
diff --git a/src/views/fapiao/Fapiao.vue b/src/views/fapiao/Fapiao.vue
index c7356df..9521d7c 100644
--- a/src/views/fapiao/Fapiao.vue
+++ b/src/views/fapiao/Fapiao.vue
@@ -45,109 +45,58 @@
       </el-table-column>
       <el-table-column sortable prop="baoxiaoname" label="报销人" width="250">
       </el-table-column>
-      <el-table-column sortable prop="baoxiaoname" label="处理人" width="200">
+      <el-table-column sortable prop="username" label="处理人" width="200">
       </el-table-column>
-<!--      <el-table-column sortable prop="modelTagId" label="模型标签Id" width="150">-->
-<!--      </el-table-column>-->
-<!--      <el-table-column sortable prop="updateTime" label="修改时间" width="200">-->
-<!--      </el-table-column>-->
-<!--      <el-table-column align="center" label="操作" min-width="200">-->
-<!--        <template slot-scope="scope">-->
-<!--          &lt;!&ndash; <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">模型详情</el-button> &ndash;&gt;-->
-<!--          <el-button size="mini" @click="goToDetail(scope.$index, scope.row)">模型详情</el-button>-->
-<!--          <el-button size="mini" type="danger" @click="deleteModel(scope.$index, scope.row)">删除</el-button>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
     </el-table>
     <!-- 分页组件 -->
     <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
     <!-- 编辑界面 -->
-    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'>
-      <el-form label-width="120px" :model="editForm" ref="editForm" :rules="rules">
+<!--    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'>-->
+<!--      <el-form label-width="120px" :model="editForm" ref="editForm" :rules="rules">-->
 <!--        <el-form-item label="发票号" prop="billnum">-->
 <!--          <el-input size="small" v-model="editForm.billnum" auto-complete="off" placeholder="请输入发票号"></el-input>-->
+<!--          <imageUpload v-model="fileList" @dataFromChild="handleChildData" />-->
 <!--        </el-form-item>-->
-        <el-form-item label="发票号" prop="billnum">
-          <el-input size="small" v-model="editForm.billnum" auto-complete="off" placeholder="请输入发票号"></el-input>
-<!--          <el-button size="small" @click='closeDialog("edit")'>上传发票</el-button>-->
-<!--          <el-popover placement="right" trigger="hover">-->
-<!--            <img :src= url style="width:500px;height:400px">-->
-<!--            <img slot="reference" :src=url style="width: 300px;height: 200px">-->
-<!--          </el-popover>-->
-          <el-upload
-            :action="上传图片接口地址"
-            list-type="picture-card"
-            :limit="3"
-            :on-preview="handlePictureCardPreview"
-            :on-success="imgSuccess"
-            :on-error="imgError"
-            :on-remove="imgRemove"
-            >
-            <i class="el-icon-plus"></i>
-          </el-upload>
-        </el-form-item>
-
-        <el-form-item label="报销人" prop="baoxiaoname">
-          <el-input size="small" v-model="editForm.baoxiaoname" auto-complete="off" placeholder="请输入报销人"></el-input>
-        </el-form-item>
-        <el-form-item label="报销金额" prop="amount">
-          <el-input size="small" v-model="editForm.amount" auto-complete="off" placeholder="请输入报销金额"></el-input>
-        </el-form-item>
-        <!-- <el-form-item label="模型请求方式" prop="reqType">
-          <el-select size="small" v-model="editForm.reqType" placeholder="请选择模型请求方式">
-            <el-option label="POST" value="POST"></el-option>
-            <el-option label="GET" value="GET"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="模型请求参数" prop="reqParamKeys">
-        <div v-for="(key, index) in editForm.reqParamKeys" :key="key">
-          <el-row gutter={20}>
-            <el-col :span="11">
-              <el-input size="small" v-model="editForm.reqParamKeys[index]" auto-complete="off" placeholder="请输入键"></el-input>
-            </el-col>
-            <el-col :span="11">
-              <el-input size="small" v-model="editForm.reqParamValues[index]" auto-complete="off" placeholder="请输入值"></el-input>
-            </el-col>
-            <el-col :span="2">
-              <el-button size="small" type="danger" icon="el-icon-delete" @click="deleteParam(key)"></el-button>
-            </el-col>
-          </el-row>
-        </div>
-        <el-button size="small" type="primary" @click="addParam">添加参数</el-button>
-      </el-form-item> -->
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
-        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
-      </div>
-    </el-dialog>
 
+<!--        <el-form-item label="报销人" prop="baoxiaoname">-->
+<!--          <el-input size="small" v-model="editForm.baoxiaoname" auto-complete="off" placeholder="请输入报销人"></el-input>-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="报销金额" prop="amount">-->
+<!--          <el-input size="small" v-model="editForm.amount" auto-complete="off" placeholder="请输入报销金额"></el-input>-->
+<!--        </el-form-item>-->
+<!--      </el-form>-->
+<!--      <div slot="footer" class="dialog-footer">-->
+<!--        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>-->
+<!--        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>-->
+<!--      </div>-->
+<!--    </el-dialog>-->
+<!--    <el-dialog v-dialog-drag :modal-append-to-body="false" :visible.sync="imgVisible" width="30%">-->
+<!--      <img width="100%" :src="dialogImageUrl" alt="图片未找到"/>-->
+<!--    </el-dialog>-->
   </div>
 </template>
 
 <script>
 import {
-  // FapiaoList,
-  ModelSave,
-  ModelDelete,
-  // ModelTagAllList,
   ModelgetByModelTagId,
-  getTagById,
-  rolePwd,
-  RoleRightTree,
-  RoleRightSave, FapiaoList, FapiaoSave
+  FapiaoList, FapiaoSave, fapiaoPicUplod
 } from '../../api/userMG'
 import Pagination from '../../components/Pagination'
+import imageUpload from '../../imageUpload/index.vue'
+
 export default {
   data() {
     return {
+      imgVisible: false,
+      dialogImageUrl: undefined,
       nshow: true, //switch开启
       fshow: false, //switch关闭
       loading: false, //是显示加载
       editFormVisible: false, //控制编辑页面显示与隐藏
       menuAccessshow: false, //控制数据权限显示与隐藏
       title: '添加',
-      url: '',
+      imageUrl: '',
+      fileList: [], // 用于存储文件信息的数组
       editForm: {
         id: '',
         baoxiaoname:'',
@@ -171,7 +120,8 @@ export default {
         pageNum: 1,
         pageSize: 10,
         baoxiaoname:'',
-        billnum:''
+        billnum:'',
+        username:''
       },
       // 删除
       seletedata: {
@@ -202,7 +152,8 @@ export default {
   },
   // 注册组件
   components: {
-    Pagination
+    Pagination,
+    imageUpload
   },
   /**
    * 数据发生改变
@@ -303,42 +254,9 @@ export default {
       this.formInline.billnum = typeof(this.formInline.billnum)==='undefined'?'':this.formInline.billnum
       this.getdata(this.formInline)
     },
-    // //跳转到模型详情页面
-    // goToDetail: function(index, row){
-    //   let tagName=''
-    //   getTagById(row)
-    //     .then(res => {
-    //       this.loading = false
-    //       if (res.code!=200) {
-    //         this.$message({
-    //           type: 'info',
-    //           message: res.msg
-    //         })
-    //       } else {
-    //         tagName=res.data.modelTag
-    //         this.$router.push({
-    //           name: "模型详情", // 路由的名字
-    //           params: { // 通过params发送的信息
-    //             id: row.id,
-    //             modelName:  row.modelName,
-    //             modelTagId:row.modelTagId,
-    //             modelDesc:row.modelDesc,
-    //             modelTagId:row.modelTagId,
-    //             modelTag:tagName,
-    //             modelPath:row.modelPath,
-    //             updateTime:row.updateTime
-    //           }
-    //         });
-    //       }
-    //     })
-    //     .catch(err => {
-    //       this.$message.error('获取列表失败，请稍后再试！')
-    //     })
-    //
-    // },
     //显示编辑界面
     handleEdit: function(index, row) {
-      this.editFormVisible = true
+      // this.editFormVisible = true
       if (row != undefined && row != 'undefined') {
         this.title = '修改'
         this.editForm.id=row.id
@@ -347,14 +265,7 @@ export default {
         this.editForm.amount = row.amount
 
       } else {
-        this.title = '添加'
-        this.editForm.baoxiaoname =''
-        this.editForm.billnum =null
-        this.editForm.amount =''
-
-        delete this.editForm.id
-
-
+        this.$router.push({ name: 'fapiaoedit' });//跳转到添加界面
       }
     },
 
@@ -369,12 +280,13 @@ export default {
               this.editFormVisible = false
               this.loading = false
               console.log(res.success)
-              if (res.code==200) {
+              if (res.code==0) {
                 this.getdata(this.formInline)
                 this.$message({
                   type: 'success',
                   message: '数据保存成功！'
                 })
+                this.$router.push({ name: 'list' });
               } else {
                 this.$message({
                   type: 'info',
@@ -392,42 +304,6 @@ export default {
         }
       })
     },
-    // // 删除角色
-    // deleteModel(index, row) {
-    //   this.$confirm('确定要删除吗?', '信息', {
-    //     confirmButtonText: '确定',
-    //     cancelButtonText: '取消',
-    //     type: 'warning'
-    //   })
-    //     .then(() => {
-    //       console.log(row)
-    //       ModelDelete(row)
-    //         .then(res => {
-    //           if (res.code==200) {
-    //             this.$message({
-    //               type: 'success',
-    //               message: '模型已删除！'
-    //             })
-    //             this.getdata(this.formInline)
-    //           } else {
-    //             this.$message({
-    //               type: 'success',
-    //               message: res.msg
-    //             })
-    //           }
-    //         })
-    //         .catch(err => {
-    //           this.loading = false
-    //           this.$message.error('模型删除失败，请稍后再试！')
-    //         })
-    //     })
-    //     .catch(() => {
-    //       this.$message({
-    //         type: 'info',
-    //         message: '已取消删除'
-    //       })
-    //     })
-    // },
 
     // 选中菜单
     changemenu(arr) {
@@ -439,47 +315,6 @@ export default {
       }
       this.checkmenu = change
     },
-    // tree 递归
-    changeArr(list) {
-      var temptree = [],
-        tree = [],
-        items = []
-      for (var i in list) {
-        if (!temptree[list[i].id]) {
-          var trow = {
-            id: list[i].id,
-            pId: list[i].pId,
-            name: list[i].name,
-            open: list[i].open,
-            checked: list[i].checked,
-            children: []
-          }
-          temptree[list[i].id] = trow
-          items.push(trow)
-        }
-        if (list[i].uid > 0) {
-          temptree[list[i].id]['children'].push({
-            id: list[i].id,
-            pId: list[i].pId,
-            name: list[i].name,
-            open: list[i].open,
-            checked: list[i].checked,
-            children: []
-          })
-        }
-      }
-
-      for (var j in items) {
-        if (temptree[items[j].pId]) {
-          temptree[items[j].pId]['children'].push(temptree[items[j].id])
-        } else {
-          tree.push(temptree[items[j].id])
-        }
-      }
-      temptree = null
-      items = null
-      return tree
-    },
 
     // 关闭编辑、增加弹出框
     closeDialog(dialog) {
@@ -521,7 +356,82 @@ export default {
       this.pageparm.pageSize = this.formInline.pageSize;
       this.pageparm.total += list.length;
     },
+    handleBeforeUpload(file) {
+      console.log(file.name)
+      // 创建一个临时的URL来预览图片
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = (e) => {
+        console.log(file.name)
+        console.log(e.target.result)
+        // 将图片的预览URL添加到fileList数组中
+        this.fileList.push({ name: file.name, url: e.target.result });
+      };
+      console.log(this.fileList)
+    },
+    // 移除图片预览的方法（可选）
+    removeImage() {
+      // // 移除文件的操作
+      // console.log('移除文件: ', file.name);
+      // this.fileList[0].name=null
+      // this.fileList[0].url=null
+      this.fileList.splice(index, 1);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+    },
+    handleChange(file) {
+      // 在文件上传之前执行的操作，比如检查文件大小、格式等
+      // 如果返回false或者返回Promise且被reject，则停止上传
+      const isLt200M = file.size / 1024 / 1024 < 200;
+      if (!isLt200M) {
+        this.$message.error('上传文件大小不能超过 200MB!');
+      }
+      this.fileList[0].name=file.name
+      console.log(isLt200M)
+      return isLt200M;
+    },
+    // 图片上传成功
+    imgSuccess(obj) {
+    },
+    handlePictureCardPreview(file){
+      this.dialogImageUrl = file.url;
+      this.imgVisible = true;
+    },
+    handleRemove(file,filelist){
+      file=null;
+      console.log(file)
+      console.log(filelist)
+      const findex = this.fileList.map(f => f.name).indexOf(file.name);
+      console.log(this.fileList)
+      this.fileList =null;
+      if (findex > -1) {
+        this.fileList.splice(findex, 1);
+        filelist.splice(findex, 1);
+        // this.$emit("input", this.listToString(this.fileList));
+        this.$emit('input', this.fileList)
+      }
+    },
+    fapiaoRequest(obj){
+      let formData = new FormData();
+      //参数的格式是formData格式的
+      formData.append('file', obj.file);
+      fapiaoPicUplod(formData).then(res => {
+        console.log(res)
+        if(res.code==0){
+          this.editForm.amount = res.data.amount;
+          this.editForm.billnum = res.data.billnum;
+        }else {
+          this.$message.error('图片上传失败，请稍后再试！')
+        }
+      });
 
+    },
+    handleChildData(dataFromChild) {
+      // 父组件接收到子组件传递的数据
+      this.editForm.amount = dataFromChild.data.amount;
+      this.editForm.billnum = dataFromChild.data.billnum;
+    }
   }
 }
 </script>
diff --git a/src/views/fapiao/edit.vue b/src/views/fapiao/edit.vue
new file mode 100644
index 0000000..bfccfec
--- /dev/null
+++ b/src/views/fapiao/edit.vue
@@ -0,0 +1,259 @@
+<template>
+  <div style="height: 800px;width: 100%;">
+    <div style="height: 100px;width: 100%;">
+    <!-- 面包屑导航 -->
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>发票录入添加编辑</el-breadcrumb-item>
+    </el-breadcrumb>
+    </div>
+    <div style="height: 300px;width: 100%;">
+      <div style="height: 100%;width: 40%;float: left">
+        <el-form label-width="120px" :model="DataForm" ref="DataForm" :rules="rules">
+          <el-form-item label="发票号" prop="billnum">
+            <el-input size="small" v-model="DataForm.billnum" auto-complete="off" placeholder="请输入发票号"></el-input>
+          </el-form-item>
+          <el-form-item label="报销人" prop="baoxiaoname">
+            <el-input size="small" v-model="DataForm.baoxiaoname" auto-complete="off" placeholder="请输入报销人"></el-input>
+          </el-form-item>
+          <el-form-item label="报销金额" prop="amount">
+            <el-input size="small" v-model="DataForm.amount" auto-complete="off" placeholder="请输入报销金额"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
+            <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('DataForm')">保存</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div style="height: 100%;width: 59%;float: right">
+        <div style="height: 100%;width: 100%;margin: auto" v-if="imageUrl">
+<!--          <imageUpload v-model="fileList" @dataFromChild="handleChildData" />-->
+          <el-upload
+            class="avatar-uploader"
+            :action="uploadImgUrl"
+            :on-success="handleSuccess"
+            :on-remove="handleDelete"
+            :before-upload="beforeUpload"
+            :file-list="fileList"
+            :limit="1"
+            :headers="headers"
+            :auto-upload="true"
+            :show-file-list="false"
+          >
+            <div class="avatar" v-if="imageUrl">
+              <img :src="imageUrl" alt="Uploaded Image" class="image-preview">
+            </div>
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+          <!-- 上传提示 -->
+          <div class="el-upload__tip" slot="tip" v-if="showTip">
+            请上传
+            <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+            <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+            的文件
+          </div>
+        </div>
+        <div v-else>
+          <!--          <imageUpload v-model="fileList" @dataFromChild="handleChildData" />-->
+          <el-upload
+            class="avatar-upload"
+            :action="uploadImgUrl"
+            :on-success="handleSuccess"
+            :before-upload="beforeUpload"
+            :file-list="fileList"
+            :limit="1"
+            :headers="headers"
+            :auto-upload="true"
+            :show-file-list="false"
+          >
+            <i class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+          <!-- 上传提示 -->
+          <div class="el-upload__tip" slot="tip" v-if="showTip">
+            请上传
+            <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+            <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+            的文件
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ModelSave,
+  getModelById,
+  modelUpload, FapiaoSave
+} from '../../api/userMG'
+import imageUpload from "../../imageUpload/index.vue";
+
+export default {
+  components: {imageUpload},
+  data() {
+    return {
+      fileList: [],
+      fileContent: '',
+      imageUrl:'',
+      loading: false, //是显示加载
+      DataForm: {
+        id:'',
+        baoxiaoname:'',
+        billnum:'',
+        amount:'',
+      },
+      // rules 表单验证
+      rules: {
+        baoxiaoname: [
+          { required: true, message: '请输入报销人', trigger: 'blur' }
+        ],
+        billnum: [
+          { required: true, message: '请输入发票号', trigger: 'blur' }
+        ],
+        amount: [
+          { required: true, message: '请输入报销金额', trigger: 'blur' }
+        ],
+
+      },
+      baseUrl: "http://192.168.2.88:9990/photos",
+      // baseUrl: "http://192.168.80.155:8788/photos",
+      // uploadImgUrl: "http://127.0.0.1:9990/api/getocr/putfile", // 上传的图片服务器地址
+      uploadImgUrl: "http://192.168.2.88:9990/api/getocr/putfile", // 上传的图片服务器地址
+      headers: {
+        token: localStorage.getItem('token'),
+      },
+    };
+  },
+  created() {
+    this.DataForm.id = this.$route.params.id;
+    this.DataForm.baoxiaoname = this.$route.params.baoxiaoname;
+    this.DataForm.billnum = this.$route.params.billnum;
+    this.DataForm.amount = this.$route.params.amount;
+  },
+
+  methods: {
+    closeDialog(obj){
+      this.$router.push({ name: 'fapiao' });//跳转到查询界面
+    },
+    // handleChildData(dataFromChild) {
+    //   // 父组件接收到子组件传递的数据
+    //   this.DataForm.amount = dataFromChild.data.amount;
+    //   this.DataForm.billnum = dataFromChild.data.billnum;
+    // },
+    // 编辑、增加保存方法
+    submitForm(editData) {
+      this.loading = true
+      this.$refs[editData].validate(valid => {
+        if (valid) {
+          FapiaoSave(this.DataForm)
+            .then(res => {
+              console.log(res.success)
+              if (res.code===0) {
+                // this.getdata(this.formInline)
+                this.$message({
+                  type: 'success',
+                  message: '数据保存成功！'
+                })
+                this.$router.push({ name: 'fapiao' });//跳转到查询界面
+              } else {
+                this.$message({
+                  type: 'info',
+                  message: res.msg
+                })
+              }
+            })
+            .catch(err => {
+              this.$message.error('模型保存失败，请稍后再试！')
+            })
+        } else {
+          return false
+        }
+      })
+      this.loading = false
+    },
+    handleSuccess(res, file) {
+      // 上传成功后的处理逻辑
+      if (res.code === 0) {
+        this.DataForm.amount = res.data.amount;
+        this.DataForm.billnum = res.data.billnum;
+        this.fileList.push({ name: res.data.imageurl, url: res.data.imageurl });
+        this.imageUrl = this.baseUrl+res.data.imageurl;
+        console.log(this.imageUrl)
+        this.uploadedSuccessfully();
+      } else {
+        this.number--;
+        this.$refs.imageUpload.handleRemove(file);
+        this.uploadedSuccessfully();
+      }
+    },
+    // 删除图片
+    handleDelete(file) {
+      this.imageUrl=null;
+      // const findex = this.fileList.map(f => f.name).indexOf(file.name);
+      // if (findex > -1) {
+      //   this.fileList.splice(findex, 1);
+      //   this.$emit("input", this.listToString(this.fileList));
+      // }
+    },
+    beforeUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      const isLt500k = file.size / 1024 < 500;
+
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传图片只能是 JPG/PNG 格式!');
+      }
+      if (!isLt500k) {
+        this.$message.error('上传图片大小不能超过 500KB!');
+      }
+      return isJPG || isPNG && isLt500k;
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+    },
+  }
+};
+</script>
+<style scoped>
+.avatar-upload {
+  width: 100px; /* 你可以根据需要调整这个值 */
+  height: 100px; /* 你可以根据需要调整这个值 */
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  overflow: hidden; /* 隐藏超出容器的内容 */
+  position: relative;
+  cursor: pointer;
+}
+.avatar-uploader {
+  width: 800px; /* 你可以根据需要调整这个值 */
+  height: 600px; /* 你可以根据需要调整这个值 */
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  overflow: hidden; /* 隐藏超出容器的内容 */
+  position: relative;
+  cursor: pointer;
+}
+
+.avatar {
+  width: 800px;
+  height: 600px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.image-preview {
+  max-width: 800px; /* 图片最大宽度为容器宽度 */
+  max-height: 600px; /* 图片最大高度为容器高度 */
+  object-fit: cover; /* 保持图片比例，同时填充整个容器 */
+}
+
+.avatar-uploader-icon {
+  font-size: 40px;
+  color: #8c939d;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>
-- 
Gitee