From 1fc6fb99de36cc345e23f8ca5a6cbb9bc1828c07 Mon Sep 17 00:00:00 2001
From: WXL <1785969728@qq.com>
Date: 星期一, 04 九月 2023 13:50:23 +0800
Subject: [PATCH] 11
---
src/views/project/fund/applyDetail/index.vue | 191 +++++++++++++++++++++------
src/main.js | 2
src/views/project/travelexpenseapply/travelexpensedetail/index.vue | 129 ++++++++++++++----
package.json | 1
src/utils/drag.js | 87 ++++++++++++
5 files changed, 338 insertions(+), 72 deletions(-)
diff --git a/package.json b/package.json
index d9095d4..3ac9e75 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
"js-beautify": "1.13.0",
"js-cookie": "2.2.1",
"jsencrypt": "3.0.0-rc.1",
+ "lodash": "^4.17.21",
"moment": "^2.29.3",
"nprogress": "0.2.0",
"prettier": "^1.8.1",
diff --git a/src/main.js b/src/main.js
index 91d7ef6..6900a03 100644
--- a/src/main.js
+++ b/src/main.js
@@ -45,6 +45,8 @@
//鐪佸競鍖洪�夋嫨缁勪欢
// import li_area_select from '@components/Address'
import moment from "moment"
+import '@/utils/drag.js';
+
Vue.prototype.$moment = moment;
// 鍏ㄥ眬鏂规硶鎸傝浇
diff --git a/src/utils/drag.js b/src/utils/drag.js
new file mode 100644
index 0000000..d9f10ac
--- /dev/null
+++ b/src/utils/drag.js
@@ -0,0 +1,87 @@
+import Vue from 'vue';
+
+/*
+
+* 浣跨敤鏂规硶锛�
+
+* 灏嗕互涓嬩唬鐮佸鍒跺埌涓�涓猨s鏂囦欢涓紝鐒跺悗鍦ㄥ叆鍙ｆ枃浠秏ain.js涓璱mport寮曞叆鍗冲彲锛�
+
+* 缁檈lementUI鐨刣ialog涓婂姞涓� v-dialogDrags
+
+* 缁檇ialog璁剧疆 :close-on-click-modal="false" , 绂佹鐐瑰嚮閬僵灞傚叧闂脊鍑哄眰
+
+*/
+
+// 鍏煎ie,璋锋瓕
+// v-dialogDrags: 寮圭獥鎷栨嫿灞炴�� 锛堥噸鐐癸紒锛侊紒 缁欐ā鎬佹娣诲姞杩欎釜灞炴�фā鎬佹灏辫兘鎷栨嫿浜嗭級
+Vue.directive('dialogDrags', { // 灞炴�у悕绉癲ialogDrags锛屽墠闈㈠姞v- 浣跨敤
+ bind(el, binding, vnode, oldVnode) {
+ const dialogHeaderEl = el.querySelector('.el-dialog__header');
+ const dragDom = el.querySelector('.el-dialog');
+ dialogHeaderEl.style.cssText += ';cursor:move;';
+
+ // 鑾峰彇鍘熸湁灞炴�� ie dom鍏冪礌.currentStyle 鐏嫄璋锋瓕 window.getComputedStyle(dom鍏冪礌, null);
+ const sty = (function () {
+ if (window.document.currentStyle) {
+ return (dom, attr) => dom.currentStyle[attr];
+ } else {
+ return (dom, attr) => getComputedStyle(dom, false)[attr];
+ }
+ })();
+
+ dialogHeaderEl.onmousedown = (e) => {
+ // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂�
+ const disX = e.clientX - dialogHeaderEl.offsetLeft;
+ const disY = e.clientY - dialogHeaderEl.offsetTop;
+
+ const screenWidth = document.body.clientWidth; // body褰撳墠瀹藉害
+ const screenHeight = document.documentElement.clientHeight; // 鍙鍖哄煙楂樺害(搴斾负body楂樺害锛屽彲鏌愪簺鐜涓嬫棤娉曡幏鍙�)
+
+ const dragDomWidth = dragDom.offsetWidth; // 瀵硅瘽妗嗗搴�
+ const dragDomheight = dragDom.offsetHeight; // 瀵硅瘽妗嗛珮搴�
+
+ // 鑾峰彇鍒扮殑鍊煎甫px 姝ｅ垯鍖归厤鏇挎崲
+ let styL = sty(dragDom, 'left');
+ let styT = sty(dragDom, 'top');
+
+ // 娉ㄦ剰鍦╥e涓� 绗竴娆¤幏鍙栧埌鐨勫�间负缁勪欢鑷甫50% 绉诲姩涔嬪悗璧嬪�间负px
+ if (styL.includes('%')) {
+ styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);
+ styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);
+ } else {
+ styL = +styL.replace(/\px/g, '');
+ styT = +styT.replace(/\px/g, '');
+ };
+
+ document.onmousemove = function (e) {
+ // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈
+ let left = e.clientX - disX + styL;
+ let top = e.clientY - disY + styT;
+
+ // // 杈圭晫澶勭悊
+ // if (left < 0) {
+ // left = 0;
+ // }
+
+ // if (left > screenWidth - dragDomWidth) {
+ // left = screenWidth - dragDomWidth;
+ // }
+
+ // if (top < 0) {
+ // top = 0;
+ // }
+ // if (top > screenHeight - dragDomheight) {
+ // top = screenHeight - dragDomheight;
+ // }
+
+ // 绉诲姩褰撳墠鍏冪礌
+ dragDom.style.cssText += `;left:${left}px;top:${top}px;`;
+ };
+
+ document.onmouseup = function (e) {
+ document.onmousemove = null;
+ document.onmouseup = null;
+ };
+ };
+ }
+});
diff --git a/src/views/project/fund/applyDetail/index.vue b/src/views/project/fund/applyDetail/index.vue
index 3f8f8a1..e6ef7ec 100644
--- a/src/views/project/fund/applyDetail/index.vue
+++ b/src/views/project/fund/applyDetail/index.vue
@@ -158,6 +158,7 @@
<el-table
:data="rbDetails"
v-loading="loading"
+ max-height="400"
border
highlight-current-row
>
@@ -183,7 +184,7 @@
>
<template slot-scope="scope">
<el-select
- v-model="scope.row.applytype"
+ v-model="scope.row.applytypename"
placeholder="鏈嶅姟绫诲瀷"
@change="verifyFeeItemType(scope.row)"
>
@@ -204,7 +205,7 @@
>
<template slot-scope="scope">
<el-select
- v-model="scope.row.itemid"
+ v-model="scope.row.itemname"
placeholder="鏈嶅姟椤圭洰"
filterable
@change="verifyFeeItem(scope.row)"
@@ -620,8 +621,8 @@
@click="submitForm"
v-if="
operationType == 'add' ||
- operationType == 'update' ||
- ismanager == true
+ operationType == 'update' ||
+ ismanager == true
"
>鎻愪氦淇濆瓨</el-button
>
@@ -841,7 +842,14 @@
>
</span>
</el-dialog>
- <el-dialog :title="pdftitle" :visible.sync="pdfVisible" width="50%">
+ <el-dialog
+ v-dialogDrags
+ :modal="false"
+ :close-on-click-modal="false"
+ :title="pdftitle"
+ :visible.sync="pdfVisible"
+ width="60%"
+ >
<div class="pdfimg">
<div class="box-pdf">
<div>
@@ -850,7 +858,9 @@
class="upload-demo"
:action="uploadFileUrl"
:file-list="fileListto"
+ :show-file-list="false"
multiple
+ drag
:limit="20"
:headers="headers"
:on-success="
@@ -864,13 +874,61 @@
:on-remove="remove"
accept="image/*,.pdf"
>
- <el-button
- :disabled="operationType == 'detail'"
- size="small"
- type="primary"
- >涓婁紶绁ㄦ嵁</el-button
- >
+ <i class="el-icon-upload"></i>
+ <div class="el-upload__text">
+ 灏嗙エ鎹嫋鍒版澶勶紝鎴�
+ <em
+ ><el-button
+ :disabled="operationType == 'detail'"
+ size="small"
+ type="primary"
+ >鐐瑰嚮涓婁紶</el-button
+ ></em
+ >
+ </div>
+ <!-- <div class="el-upload__tip" slot="tip">
+ 鍙兘涓婁紶jpg/png鏂囦欢锛屼笖涓嶈秴杩�500kb
+ </div> -->
</el-upload>
+ <el-table
+ :data="fileListto"
+ @row-click="downFile"
+ style="width: 100%"
+ >
+ <el-table-column
+ prop="name"
+ :show-overflow-tooltip="true"
+ label="鍚嶇О"
+ >
+ <template slot-scope="scope">
+ <i style="color:#409EFF" class=" el-icon-s-order" />{{
+ scope.row.name
+ }}
+ </template>
+ </el-table-column>
+
+ <el-table-column
+ prop="name"
+ width="180"
+ :show-overflow-tooltip="true"
+ label="鍔熻兘"
+ >
+ <template slot-scope="scope">
+ <el-button
+ type="primary"
+ size="mini"
+ @click.native.prevent="deletedowfile(scope.row)"
+ >鍒犻櫎</el-button
+ >
+ <el-button
+ type="primary"
+ size="mini"
+ @click.native.prevent="moveupdowfile(scope.row)"
+ >涓婄Щ</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
</div>
<!-- <div
class="pdftit"
@@ -919,7 +977,7 @@
listDonatebaseinfo,
getDonatebaseinfo
} from "@/api/project/donatebaseinfo";
-
+import debounce from "lodash/debounce";
import {
onelistFund,
listFund,
@@ -1077,6 +1135,8 @@
rowfeeblocks: [],
fundflowList: [],
+ // 闅忔満鏁�
+ randomnumber: "",
//涓撳/鍗曚綅閫夋嫨锛歟xpert/unit
selectionType: "",
@@ -1608,9 +1668,24 @@
});
});
},
-
+ generateRandomString(length) {
+ const characters =
+ "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+ let randomString = "";
+ for (let i = 0; i < length; i++) {
+ randomString += characters.charAt(
+ Math.floor(Math.random() * characters.length)
+ );
+ }
+ return randomString;
+ },
/** 鎻愪氦鎸夐挳 */
- submitForm() {
+ submitForm: debounce(function() {
+ if (!this.randomnumber) {
+ this.randomnumber = this.generateRandomString(9);
+ this.form.randomnumber = this.randomnumber;
+ }
+ console.log(this.randomnumber);
this.$refs["form"].validate(valid => {
if (valid) {
this.formData = this.form;
@@ -1846,7 +1921,7 @@
this.$router.go(-1);
}
});
- },
+ }, 500),
//瀹℃壒鎻愪氦
checksubmit() {
@@ -2229,6 +2304,10 @@
},
// 鎺ュ彈鎻愰啋绔嬪埢淇濆瓨
Savenow() {
+ if (!this.randomnumber) {
+ this.randomnumber = this.generateRandomString(9);
+ this.form.randomnumber = this.randomnumber;
+ }
this.Savereminder = false;
this.Reminderquantity = 0;
this.totalquantity = 0;
@@ -2513,10 +2592,10 @@
rowfeeblocks: [],
annexfiles: null
};
- if (this.Reminderquantity >= 5) {
- this.Savereminder = true;
- return;
- }
+ // if (this.Reminderquantity >= 5) {
+ // this.Savereminder = true;
+ // return;
+ // }
if (rowIndex == undefined || rowIndex == null || rowIndex < 0) {
this.rbDetails.push(rowData);
} else {
@@ -2673,14 +2752,14 @@
handleUploadError() {},
/** 涓嬭浇鏂囦欢鎸夐挳鎿嶄綔 */
- downFile(item) {
- const url = process.env.VUE_APP_BASE_API + item.url;
- var a = document.createElement("a");
- var event = new MouseEvent("click");
- a.download = item.name;
- a.href = url;
- a.dispatchEvent(event);
- },
+ // downFile(item) {
+ // const url = process.env.VUE_APP_BASE_API + item.url;
+ // var a = document.createElement("a");
+ // var event = new MouseEvent("click");
+ // a.download = item.name;
+ // a.href = url;
+ // a.dispatchEvent(event);
+ // },
// remove(file) {
// this.fileList.splice(this.fileList.indexOf(file), 1)
@@ -2714,8 +2793,10 @@
this.form.filename = file.raw.name;
this.$modal.msgSuccess(response.msg);
- // this.fileListto.push({ name: file.name, url: response.fileName });
- this.fileListto.push({ name: file.name, url: response.url });
+ this.fileListto.push({ name: file.name, url: response.fileName });
+ // this.fileListto.push({ name: file.name, url: response.url });
+ // this.pdfimgsrcList.push(response.url);
+
this.rbDetails[this.atpresent].annexfilesList = this.fileListto;
} else {
console.log(response.msg);
@@ -2728,10 +2809,14 @@
this.pdfVisible = true;
if (this.rbDetails[index].annexfilesList) {
this.fileListto = this.rbDetails[index].annexfilesList;
- // this.pdfimg = this.Networkheader + "/prod-api" + this.fileListto[0].url;
- this.pdfimg = this.fileListto[0].url;
+ this.pdfimg = this.Networkheader + "/prod-api" + this.fileListto[0].url;
+ // this.pdfimg = this.fileListto[0].url;
this.pdfimgsrcList = [];
- this.pdfimgsrcList.push(this.pdfimg);
+ this.fileListto.forEach(item => {
+ this.pdfimgsrcList.push(this.Networkheader + "/prod-api" + item.url);
+ });
+ console.log(this.pdfimgsrcList);
+
console.log(this.pdfimg);
} else {
this.fileListto = [];
@@ -2739,23 +2824,29 @@
this.pdftitle = "";
}
},
+ fnrowclick(row) {
+ console.log(row);
+ },
// 鐐瑰嚮宸蹭笂浼犳枃浠�
- downFile(item) {
- this.pdftitle = item.name;
- let name = item.name.split(".");
+ downFile(row) {
+ console.log(row);
+
+ this.pdftitle = row.name;
+ let name = row.name.split(".");
if (name[1] == "pdf") {
this.$modal.msgWarning("褰撳墠鏂囦欢鏆備笉鏀寔棰勮");
this.previewpdf = false;
this.hintitle = "褰撳墠鏂囦欢鏆備笉鏀寔棰勮";
} else if (name[1] == "jpg" || "png") {
this.previewpdf = true;
- if (item.url) {
- this.pdfimg = this.Networkheader + "/prod-api" + item.url;
- this.pdfimgsrcList = [];
- this.pdfimgsrcList.push(this.pdfimg);
+ if (row.url) {
+ this.pdfimg = this.Networkheader + "/prod-api" + row.url;
+ // this.pdfimg = row.url;
+ // this.pdfimgsrcList = [];
+ // this.pdfimgsrcList.push(this.pdfimg);
console.log(this.pdfimg);
} else {
- this.pdfimg = this.Networkheader + "/prod-api" + item.response.url;
+ this.pdfimg = this.Networkheader + "/prod-api" + row.url;
}
} else {
this.hintitle = "褰撳墠鏂囦欢鏆備笉鏀寔棰勮";
@@ -2763,7 +2854,23 @@
this.previewpdf = false;
}
},
-
+ getIndexInArray(arr, obj) {
+ return arr.indexOf(obj);
+ },
+ // 鐐瑰嚮鍒犻櫎
+ deletedowfile(row) {
+ console.log(this.fileListto);
+ console.log(row);
+ const index = this.getIndexInArray(this.fileListto, row);
+ this.fileList = this.fileListto.splice(index, 1);
+ console.log(index);
+ },
+ // 鐐瑰嚮涓婄Щ
+ moveupdowfile(row) {
+ const index = this.getIndexInArray(this.fileListto, row);
+ const item = this.fileListto.splice(index, 1)[0]; // 绉婚櫎鎸囧畾绱㈠紩澶勭殑鍏冪礌锛屽苟淇濆瓨鍒癷tem鍙橀噺涓�
+ this.fileListto.splice(index - 1, 0, item); // 灏唅tem鎻掑叆鍒扮储寮曚綅缃殑鍓嶄竴浣�
+ },
//涓撳/鍖荤枟鏈烘瀯/璐圭敤鎶ラ攢鏈烘瀯閫夋嫨
ShowDetailDialog(spoce, showType) {
this.selectionType = showType;
@@ -2981,7 +3088,7 @@
height: 600px;
.box-pdf {
- width: 200px;
+ width: 400px;
padding-top: 20px;
margin-right: 30px;
border: 1px solid #dcdfe6;
diff --git a/src/views/project/travelexpenseapply/travelexpensedetail/index.vue b/src/views/project/travelexpenseapply/travelexpensedetail/index.vue
index 9670383..95d53df 100644
--- a/src/views/project/travelexpenseapply/travelexpensedetail/index.vue
+++ b/src/views/project/travelexpenseapply/travelexpensedetail/index.vue
@@ -216,6 +216,7 @@
:data="rbDetails"
ref="table"
border
+ max-height="400"
highlight-current-row
:summary-method="getSummaries"
show-summary
@@ -658,6 +659,7 @@
<el-table
:data="rbPayees"
border
+ max-height="400"
highlight-current-row
:summary-method="getSummaries"
show-summary
@@ -916,7 +918,14 @@
</div>
</div>
- <el-dialog :title="pdftitle" :visible.sync="pdfVisible" width="50%">
+ <el-dialog
+ v-dialogDrags
+ :modal="false"
+ :close-on-click-modal="false"
+ :title="pdftitle"
+ :visible.sync="pdfVisible"
+ width="60%"
+ >
<div class="pdfimg">
<div class="box-pdf">
<div>
@@ -925,7 +934,9 @@
class="upload-demo"
:action="uploadFileUrl"
:file-list="fileListto"
+ :show-file-list="false"
multiple
+ drag
:limit="20"
:headers="headers"
:on-success="
@@ -939,22 +950,59 @@
:on-remove="remove"
accept="image/*,.pdf"
>
- <el-button
- :disabled="operationType == 'detail'"
- size="small"
- type="primary"
- >涓婁紶</el-button
- >
+ <i class="el-icon-upload"></i>
+ <div class="el-upload__text">
+ 灏嗙エ鎹嫋鍒版澶勶紝鎴�
+ <em
+ ><el-button
+ :disabled="operationType == 'detail'"
+ size="small"
+ type="primary"
+ >鐐瑰嚮涓婁紶</el-button
+ ></em
+ >
+ </div>
</el-upload>
+ <el-table
+ :data="fileListto"
+ @row-click="downFile"
+ style="width: 100%"
+ >
+ <el-table-column
+ prop="name"
+ :show-overflow-tooltip="true"
+ label="鍚嶇О"
+ >
+ <template slot-scope="scope">
+ <i style="color:#409EFF" class=" el-icon-s-order" />{{
+ scope.row.name
+ }}
+ </template>
+ </el-table-column>
+
+ <el-table-column
+ prop="name"
+ width="180"
+ :show-overflow-tooltip="true"
+ label="鍔熻兘"
+ >
+ <template slot-scope="scope">
+ <el-button
+ type="primary"
+ size="mini"
+ @click.native.prevent="deletedowfile(scope.row)"
+ >鍒犻櫎</el-button
+ >
+ <el-button
+ type="primary"
+ size="mini"
+ @click.native.prevent="moveupdowfile(scope.row)"
+ >涓婄Щ</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
</div>
- <!-- <div
- class="pdftit"
- @click="pdffn(item)"
- v-for="item in fileList"
- :key="item.name"
- >
- {{ item.name }}
- </div> -->
</div>
<div v-if="this.previewpdf" class="pdfimgmin">
@@ -1029,6 +1077,7 @@
import { getSubsidy } from "@/api/project/travelcity";
import { listReportname, listUser } from "@/api/project/organization";
import { getToken } from "@/utils/auth";
+import debounce from "lodash/debounce";
export default {
components: {
Treeselect,
@@ -1301,9 +1350,12 @@
this.fileListto = this.rbDetails[index].annexfilesList;
console.log(this.fileListto);
this.pdfimg = this.Networkheader + "/prod-api" + this.fileListto[0].url;
- console.log(this.pdfimg);
this.pdfimgsrcList = [];
- this.pdfimgsrcList.push(this.pdfimg);
+ this.fileListto.forEach(item => {
+ this.pdfimgsrcList.push(this.Networkheader + "/prod-api" + item.url);
+ });
+ console.log(this.pdfimgsrcList);
+ console.log(this.pdfimg);
} else {
this.fileListto = [];
this.pdfimg = "";
@@ -1324,8 +1376,8 @@
this.previewpdf = true;
if (item.url) {
this.pdfimg = this.Networkheader + "/prod-api" + item.url;
- this.pdfimgsrcList = [];
- this.pdfimgsrcList.push(this.pdfimg);
+ // this.pdfimgsrcList = [];
+ // this.pdfimgsrcList.push(this.pdfimg);
console.log(this.pdfimg);
} else {
this.pdfimg = this.Networkheader + "/prod-api" + item.response.url;
@@ -1335,6 +1387,23 @@
this.$modal.msgWarning("褰撳墠鏂囦欢鏆備笉鏀寔棰勮");
this.previewpdf = false;
}
+ },
+ getIndexInArray(arr, obj) {
+ return arr.indexOf(obj);
+ },
+ // 鐐瑰嚮鍒犻櫎
+ deletedowfile(row) {
+ console.log(this.fileListto);
+ console.log(row);
+ const index = this.getIndexInArray(this.fileListto, row);
+ this.fileList = this.fileListto.splice(index, 1);
+ console.log(index);
+ },
+ // 鐐瑰嚮涓婄Щ
+ moveupdowfile(row) {
+ const index = this.getIndexInArray(this.fileListto, row);
+ const item = this.fileListto.splice(index, 1)[0]; // 绉婚櫎鎸囧畾绱㈠紩澶勭殑鍏冪礌锛屽苟淇濆瓨鍒癷tem鍙橀噺涓�
+ this.fileListto.splice(index - 1, 0, item); // 灏唅tem鎻掑叆鍒扮储寮曚綅缃殑鍓嶄竴浣�
},
/** 鏌ヨ閮ㄩ棬涓嬫媺鏍戠粨鏋� */
@@ -1962,7 +2031,7 @@
},
/** 鎻愪氦淇濆瓨鎸夐挳 */
- submitForm() {
+ submitForm: debounce(function(data) {
this.$refs["form"].validate(valid => {
if (valid) {
// idisabled=true;
@@ -2113,7 +2182,7 @@
}
}
});
- },
+ }, 500),
/** 鍒犻櫎鎸夐挳鎿嶄綔 */
handleDelete(row) {
@@ -2284,10 +2353,10 @@
personname: null,
destination: null
};
- if (this.Reminderquantity >= 5) {
- this.Savereminder = true;
- return;
- }
+ // if (this.Reminderquantity >= 5) {
+ // this.Savereminder = true;
+ // return;
+ // }
if (rowIndex == undefined || rowIndex == null || rowIndex < 0) {
this.rbDetails.push(rowData);
} else {
@@ -2313,10 +2382,10 @@
personname: null,
amount: null
};
- if (this.Reminderquantity >= 5) {
- this.Savereminder = true;
- return;
- }
+ // if (this.Reminderquantity >= 5) {
+ // this.Savereminder = true;
+ // return;
+ // }
if (rowIndex == undefined || rowIndex == null || rowIndex <= 0) {
this.rbPayees.push(rowData);
} else {
@@ -2720,7 +2789,7 @@
height: 600px;
.box-pdf {
- width: 200px;
+ width: 400px;
padding-top: 20px;
margin-right: 30px;
border: 1px solid #dcdfe6;
--
Gitblit v1.9.3