From ea44321752674bc97efb7bfa987c19121c3d6881 Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期四, 16 一月 2025 17:16:50 +0800
Subject: [PATCH] 财务报销（未完成）
---
src/components/tem/tem-upload-file.vue | 620 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 620 insertions(+), 0 deletions(-)
diff --git a/src/components/tem/tem-upload-file.vue b/src/components/tem/tem-upload-file.vue
new file mode 100644
index 0000000..ab0c247
--- /dev/null
+++ b/src/components/tem/tem-upload-file.vue
@@ -0,0 +1,620 @@
+<template>
+ <!--鏈枃浠剁敱FirstUI鎺堟潈浜堝洓宸濇斂閲囨嫑鎶曟爣鍜ㄨ鏈夐檺鍏徃锛堜細鍛業D锛� 1 63锛岃惀涓氭墽鐓у彿锛�9 1 51 0 1313 3 2 0061 9 3K锛変笓鐢紝璇峰皧閲嶇煡璇嗕骇鏉冿紝鍕跨涓嬩紶鎾紝杩濊�呰拷绌舵硶寰嬭矗浠汇��-->
+ <view class="fui-upload__wrap">
+ <view class="fui-upload__item" :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius+'rpx'}"
+ v-for="(item,index) in urls" :key="index">
+ <image src="/static/WPS.png" mode="aspectFill" @tap.sto='showTip' :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius+'rpx'}" v-if="checkFileExtensions(item)"></image>
+ <image v-else class="fui-upload__img" :style="{width:width+'rpx',height:height+'rpx',borderRadius:radius+'rpx'}"
+ :src="item" mode="aspectFill" @tap.stop="previewImage(index)"></image>
+ <view class="fui-upload__mask" v-if="status[index]!=='success' && status[index]!=='preupload' ">
+ <fui-icon name="warning-fill" color="#fff" :size="48" v-if="status[index]==='error'"></fui-icon>
+ <text class="fui-reupload__btn" @tap.stop="reUpload(index)" v-if="status[index]==='error'">閲嶆柊涓婁紶</text>
+ <!-- #ifndef APP-NVUE -->
+ <view class="fui-upload__loading" ref="fui_reupload_ld" v-if="status[index]==='uploading'"></view>
+ <text class="fui-upload__text" v-if="status[index]==='uploading'">璇风◢鍊�...</text>
+ <!-- #endif -->
+ <!-- #ifdef APP-NVUE -->
+ <text class="fui-upload__text fui-upload__mtop" v-if="status[index]==='uploading'">姝ｅ湪涓婁紶...</text>
+ <!-- #endif -->
+ </view>
+ <view class="fui-upload__del" :style="{background:delColor}" v-if="isDel" @tap.stop="deleteImage(index)">
+ <fui-icon name="close" color="#fff" :size="32"></fui-icon>
+ </view>
+ </view>
+ <view class="fui-upload__item"
+ :class="[borderColor && borderColor!==true?'fui-upload__border':'fui-upload__noborder']"
+ :style="{width:width+'rpx',height:height+'rpx',background:background,borderRadius:radius+'rpx',borderColor:borderColor,borderStyle:borderSytle}"
+ v-if="showAdd" @tap.stop="chooseImage">
+ <slot>
+ <fui-icon name="plus" :size="addSize" :color="addColor"></fui-icon>
+ </slot>
+ </view>
+ </view>
+</template>
+
+<script>
+ //闈瀍asycom妯″紡鍙栨秷娉ㄩ噴寮曞叆瀛椾綋缁勪欢锛屾寜瀹為檯璺緞杩涜璋冩暣
+ // import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
+ export default {
+ name: "fui-upload",
+ emits: ['success', 'error', 'complete', 'preview', 'reupload', 'delete'],
+ // components:{
+ // fuiIcon
+ // },
+ props: {
+ width: {
+ type: [Number, String],
+ default: 200
+ },
+ height: {
+ type: [Number, String],
+ default: 200
+ },
+ fileList: {
+ type: Array,
+ default () {
+ return []
+ }
+ },
+ max: {
+ type: [Number, String],
+ default: 9
+ },
+ isAdd: {
+ type: Boolean,
+ default: true
+ },
+ addColor: {
+ type: String,
+ default: '#333'
+ },
+ addSize: {
+ type: [Number, String],
+ default: 88
+ },
+ background: {
+ type: String,
+ default: '#eee'
+ },
+ radius: {
+ type: [Number, String],
+ default: 0
+ },
+ borderColor: {
+ type: String,
+ default: ''
+ },
+ //solid銆乨ashed銆乨otted
+ borderSytle: {
+ type: String,
+ default: 'solid'
+ },
+ isDel: {
+ type: Boolean,
+ default: true
+ },
+ delColor: {
+ type: String,
+ default: 'rgba(0,0,0,.6)'
+ },
+ confirmDel: {
+ type: Boolean,
+ default: false
+ },
+ url: {
+ type: String,
+ default: ''
+ },
+ immediate: {
+ type: Boolean,
+ default: false
+ },
+ //V1.9.8+ 鏄惁璋冪敤upload 鏂规硶杩涜涓婁紶鎿嶄綔
+ callUpload: {
+ type: Boolean,
+ default: false
+ },
+ sizeType: {
+ type: Array,
+ default () {
+ return ['original', 'compressed']
+ }
+ },
+ sourceType: {
+ type: Array,
+ default () {
+ return ['album', 'camera']
+ }
+ },
+ //鍥剧墖鍚庣紑鍚嶉檺鍒�
+ suffix: {
+ type: Array,
+ default () {
+ return []
+ }
+ },
+ //鍗曞紶鍥剧墖澶у皬闄愬埗 MB
+ size: {
+ type: [Number, String],
+ default: 4
+ },
+ name: {
+ type: String,
+ default: 'file'
+ },
+ header: {
+ type: Object,
+ default () {
+ return {}
+ }
+ },
+ formData: {
+ type: Object,
+ default () {
+ return {}
+ }
+ },
+ param: {
+ type: [Number, String],
+ default: 0
+ }
+ },
+ data() {
+ return {
+ urls: [],
+ tempFiles: [],
+ //preupload銆乽ploading銆乻uccess銆乪rror
+ status: []
+ };
+ },
+ created() {
+ this.initData(this.fileList)
+ },
+ watch: {
+ fileList(vals) {
+ this.initData(vals)
+ }
+ },
+ computed: {
+ showAdd() {
+ let show = true;
+ let len = this.urls.length
+ if (!this.isAdd || (this.max == -1 && len >= 9) || (this.max != -1 && len >= this.max)) {
+ show = false
+ }
+ return show
+ }
+ },
+ methods: {
+ showTip(){
+ this.$util.showToast({
+ title: "鏂囦欢绫诲瀷涓嶆敮鎸侀瑙堬紒",
+ })
+ },
+ checkFileExtensions(str) {
+ const extensions = ['pdf', 'doc', 'docx', 'xls', 'xlsx'];
+ return extensions.some(extension => str.includes(extension));
+ },
+ initData(urls) {
+ urls = urls || []
+ this.status = [];
+ let status = [];
+ let tempFiles = []
+ urls.forEach(item => {
+ status.push('success')
+ tempFiles.push({
+ path: item
+ })
+ })
+ this.urls = [...urls];
+ this.tempFiles = tempFiles;
+ this.status = status;
+ },
+ reUpload(index) {
+ this.$set(this.status, index, 'uploading')
+ if (this.callUpload) {
+ this.$emit('reupload', {
+ index
+ })
+ } else {
+ this.uploadImage(index, this.urls[index]).then((res) => {
+ this._success(res)
+ }).catch((res) => {
+ this._error(res)
+ })
+ }
+ },
+ getStatus() {
+ if (this.status.length === 0) return '';
+ let status = 'preupload';
+ if (this.status.indexOf('preupload') === -1) {
+ status = ~this.status.indexOf('uploading') ? 'uploading' : 'success'
+ if (status !== 'uploading' && ~this.status.indexOf("error")) {
+ // 涓婁紶澶辫触
+ status = 'error'
+ }
+ }
+ return status
+ },
+ onComplete(action) {
+ let status = this.getStatus()
+ this.$emit('complete', {
+ status: status,
+ urls: this.urls,
+ tempFiles: this.tempFiles,
+ action: action,
+ param: this.param
+ })
+ },
+ _success(res) {
+ let status = this.getStatus()
+ this.$emit('success', {
+ status: status,
+ ...res,
+ param: this.param
+ })
+ },
+ _error(res) {
+ let status = this.getStatus()
+ this.$emit('error', {
+ status: status,
+ ...res,
+ param: this.param
+ })
+ },
+ result(url, index) {
+ if (!url || index === undefined) return;
+ this.$set(this.urls, index, url)
+ setTimeout(() => {
+ this.onComplete('upload')
+ }, 0)
+ },
+ toast(text) {
+ text && uni.showToast({
+ title: text,
+ icon: "none"
+ });
+ },
+ chooseImage() {
+ let max = Number(this.max)
+ uni.chooseImage({
+ count: max === -1 ? 9 : max - this.urls.length,
+ sizeType: this.sizeType,
+ sourceType: this.sourceType,
+ success: (e) => {
+ let imageArr = [];
+ for (let i = 0; i < e.tempFiles.length; i++) {
+ let len = this.urls.length;
+ if (len >= max && max !== -1) {
+ this.toast(`鏈�澶氬彲涓婁紶${max}寮犲浘鐗嘸);
+ break;
+ }
+ //杩囨护鍥剧墖绫诲瀷
+ let path = e.tempFiles[i].path;
+
+ if (this.suffix.length > 0) {
+ let format = ""
+ // #ifdef H5
+ let type = e.tempFiles[i].type;
+ format = type.split('/')[1]
+ // #endif
+
+ // #ifndef H5
+ format = path.split(".")[(path.split(".")).length - 1];
+ // #endif
+
+ if (this.suffix.indexOf(format) == -1) {
+ let text = `鍙兘涓婁紶 ${this.suffix.join(',')} 鏍煎紡鍥剧墖锛乣
+ this.toast(text);
+ continue;
+ }
+ }
+
+ //杩囨护瓒呭嚭澶у皬闄愬埗鍥剧墖
+ let size = e.tempFiles[i].size;
+
+ if (Number(this.size) * 1024 * 1024 < size) {
+ let err = `鍗曞紶鍥剧墖澶у皬涓嶈兘瓒呰繃锛�${this.size}MB`
+ this.toast(err);
+ continue;
+ }
+ imageArr.push(path)
+ this.urls.push(path)
+ this.tempFiles.push(e.tempFiles[i])
+ this.status.push(this.immediate ? 'uploading' : 'preupload')
+ }
+ this.onComplete('choose')
+ let start = this.urls.length - imageArr.length
+ if (this.immediate) {
+ for (let j = 0; j < imageArr.length; j++) {
+ let index = start + j
+ this.uploadImage(index, imageArr[j]).then((res) => {
+ this._success(res)
+ }).catch((res) => {
+ this._error(res)
+ })
+ }
+ }
+ }
+ })
+ },
+ uploadImage(index, imgUrl, url) {
+ return new Promise((resolve, reject) => {
+ uni.uploadFile({
+ url: this.url || url,
+ name: this.name,
+ header: this.header,
+ formData: this.formData,
+ filePath: imgUrl,
+ success: (res) => {
+ if (res.statusCode === 200) {
+ this.$set(this.status, index, 'success')
+ resolve({
+ res,
+ index
+ })
+ } else {
+ this.$set(this.status, index, 'error')
+ reject({
+ res,
+ index
+ })
+ }
+ },
+ fail: (res) => {
+ this.$set(this.status, index, 'error')
+ // uni.showModal({
+ // content: JSON.stringify(res)
+ // })
+ reject({
+ res,
+ index
+ })
+ }
+ })
+ })
+ },
+ deleteImage(index) {
+ let status = this.getStatus()
+ if (status === 'uploading') {
+ this.toast('璇风瓑寰呬笂浼犵粨鏉熷啀杩涜鍒犻櫎锛�')
+ } else {
+ if (this.confirmDel) {
+ let _this = this
+ uni.showModal({
+ content: '纭畾灏嗚鍥剧墖鍒犻櫎鍚楋紵',
+ showCancel: true,
+ confirmText: "纭畾",
+ success(res) {
+ if (res.confirm) {
+ _this.urls.splice(index, 1)
+ _this.tempFiles.splice(index, 1)
+ _this.status.splice(index, 1)
+ _this.onComplete('delete')
+ _this.$emit('delete', {
+ index: index
+ })
+ }
+ }
+ })
+
+ } else {
+ this.urls.splice(index, 1)
+ this.tempFiles.splice(index, 1)
+ this.status.splice(index, 1)
+ this.onComplete('delete')
+ this.$emit('delete', {
+ index: index
+ })
+ }
+ }
+ },
+ previewImage(index) {
+ // #ifndef MP-BAIDU
+ if (this.status.length === 0) return;
+ uni.previewImage({
+ current: this.urls[index],
+ loop: true,
+ urls: this.urls
+ })
+ // #endif
+ //鐧惧害灏忕▼搴忎娇鐢�
+ this.$emit('preview', {
+ index: index,
+ urls: this.urls
+ })
+ },
+ start() {
+ if (!this.url) {
+ this.toast('璇蜂紶鍏ユ湇鍔″櫒鎺ュ彛鍦板潃锛�');
+ return;
+ }
+ let urls = [...this.urls]
+ const len = urls.length
+ for (let i = 0; i < len; i++) {
+ if (urls[i].startsWith('https')) {
+ continue;
+ } else {
+ this.$set(this.status, i, "uploading")
+ this.uploadImage(i, urls[i], this.url).then(res => {
+ this._success(res)
+ }).catch(error => {
+ this._error(error)
+ })
+ }
+ }
+ },
+ upload(callback, index) {
+ // 浼犲叆涓�涓繑鍥濸romise鐨勬枃浠朵笂浼犵殑鍑芥暟
+ //V1.9.8+锛屾柊澧炴鏂规硶涓昏涓轰簡鏇村ソ鐨勬墿灞曚娇鐢�
+ if (index === undefined || index === null) {
+ let urls = [...this.urls]
+ const len = urls.length
+ for (let i = 0; i < len; i++) {
+ if (urls[i].startsWith('https')) {
+ continue;
+ } else {
+ this.$set(this.status, i, "uploading")
+ if (typeof callback === 'function') {
+ callback(this.tempFiles[i]).then(res => {
+ this.$set(this.status, i, 'success')
+ this.result(res, i)
+ }).catch(err => {
+ this.$set(this.status, i, 'error')
+ })
+ }
+ }
+ }
+ } else {
+ //濡傛灉浼犲叆index锛屽垯鏄噸鏂颁笂浼犳椂璋冪敤
+ this.$set(this.status, index, "uploading")
+ if (typeof callback === 'function') {
+ callback(this.tempFiles[index]).then(res => {
+ this.$set(this.status, index, 'success')
+ this.result(res, index)
+ }).catch(err => {
+ this.$set(this.status, index, 'error')
+ })
+ }
+ }
+ }
+ }
+ }
+</script>
+
+<style scoped>
+ .fui-upload__wrap {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+
+ .fui-upload__item {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ align-items: center;
+ justify-content: center;
+ margin-right: 20rpx;
+ margin-bottom: 20rpx;
+ /* #ifdef H5 */
+ cursor: pointer;
+ /* #endif */
+ position: relative;
+
+ /* #ifndef APP-NVUE */
+ box-sizing: border-box;
+ /* #endif */
+ }
+
+ .fui-upload__noborder {
+ border-width: 0;
+ }
+
+ .fui-upload__border {
+ border-width: 1px;
+ }
+
+ .fui-upload__del {
+ position: absolute;
+ top: 8rpx;
+ right: 8rpx;
+ height: 40rpx;
+ width: 40rpx;
+ /* #ifndef APP-NVUE */
+ border-radius: 50%;
+ display: flex;
+ /* #endif */
+
+ /* #ifdef APP-NVUE */
+ border-radius: 20rpx;
+ /* #endif */
+ align-items: center;
+ justify-content: center;
+ z-index: 10;
+ }
+
+ .fui-upload__mask {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, .6);
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .fui-reupload__btn {
+ width: 144rpx;
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 4rpx 0;
+ font-size: 24rpx;
+ border: 1px solid #FFFFFF;
+ color: #fff;
+ border-radius: 32rpx;
+ margin-top: 16rpx;
+ font-weight: normal;
+ }
+
+ .fui-reupload__btn:active {
+ opacity: .5;
+ }
+
+ .fui-upload__loading {
+ width: 32rpx;
+ height: 32rpx;
+ border-width: 2px;
+ border-style: solid;
+ border-top-color: #FFFFFF;
+ border-left-color: #7F7F7F;
+ border-right-color: #7F7F7F;
+ border-bottom-color: #7F7F7F;
+ /* #ifdef APP-NVUE */
+ border-radius: 20rpx;
+ /* #endif */
+ /* #ifndef APP-NVUE */
+ border-radius: 50%;
+ animation: fui-rotate 0.7s linear infinite;
+ /* #endif */
+ margin-bottom: 8rpx;
+ }
+
+ .fui-upload__text {
+ font-size: 24rpx;
+ color: #fff;
+ margin-top: 16rpx;
+ font-weight: normal;
+ }
+
+ /* #ifdef APP-NVUE */
+ .fui-upload__mtop {
+ margin-top: 0;
+ }
+
+ /* #endif */
+
+ /* #ifndef APP-NVUE */
+ @keyframes fui-rotate {
+ 0% {
+ transform: rotate(0);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ /* #endif */
+</style>
\ No newline at end of file
--
Gitblit v1.9.1