From 1e49e17d482e3a3e67108bdffa4ae5f374e26cb8 Mon Sep 17 00:00:00 2001
From: zhaoxiaoqiang <287285524@qq.com>
Date: Thu, 31 Aug 2023 18:05:46 +0800
Subject: [PATCH] 订单管理管理员订单管理
---
src/components/upload.vue | 368 ++++++++++++++++------------------------------------
1 files changed, 115 insertions(+), 253 deletions(-)
diff --git a/src/components/upload.vue b/src/components/upload.vue
index 0af7d97..faf40f5 100644
--- a/src/components/upload.vue
+++ b/src/components/upload.vue
@@ -2,294 +2,156 @@
* @Author: zxq
* @Date: 2022-01-05 18:44:53
* @LastEditors: zhaoxiaoqiang 287285524@qq.com
- * @LastEditTime: 2023-08-24 14:39:04
+ * @LastEditTime: 2023-08-31 14:56:53
* @Description: Description
- * @FilePath: \qyp_finlean_plat\src\components\upload.vue
+ * @FilePath: \sjzl-plat\src\components\upload.vue
-->
<template>
- <div style="width: 100%">
+ <div>
<el-upload
- action="#"
- :limit="limit"
- multiple
- class="upload-demo"
- :list-type="!isUploadOther?'picture-card':''"
- :disabled="disabled"
- :on-exceed="masterFileMax"
- :before-upload="beforeAvatarUpload"
- :http-request="uploadFileData"
- :file-list="PicList"
- :class="[uploadDisabled ? 'updispaly' : '']"
- >
- <el-button v-if="isUploadOther" size="small" icon="el-icon-plus" type="primary" >点击上传</el-button>
- <i v-else slot="default" class="el-icon-plus"></i>
- <div slot="file" slot-scope="{ file }">
- <template v-if="isUploadOther">
- <div class="pdf_style" v-if='file.url'>
- <template
- v-if="
- file.url
- .substring(file.url.lastIndexOf('.'))
- .split('.')[1]
- .trim() != 'pdf'
- "
+ action="#"
+ :limit='limit'
+ multiple
+ :disabled='disabled'
+ list-type="picture-card"
+ :on-exceed="masterFileMax"
+ :before-upload="beforeAvatarUpload"
+ :http-request="uploadFileData"
+ :file-list="pictureList"
+ >
+ <i slot="default" class="el-icon-plus"></i>
+ <div slot="file" slot-scope="{ file }">
+ <!-- <span>{{ file.url }}</span> -->
+ <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
+ <span class="el-upload-list__item-actions">
+ <span
+ class="el-upload-list__item-preview"
+ @click="handlePictureCardPreview(file)"
>
- <div :style="imgStyle" class="img_box">
- <img
- class="el-upload-list__item-thumbnail"
- :style="imgStyle"
- :src="file.url"
- alt=""
- />
- <div class="el-upload-list__item-actions" :style="imgStyle">
- <span class="el-upload-list__item-preview">
- <i
- class="el-icon-zoom-in"
- style="color: #fff; font-size: 20px"
- @click="handlePictureCardPreview(file)"
- ></i>
- <i
- class="el-icon-delete"
- style="color: #fff; font-size: 20px"
- @click="handleRemoveLoanT(file)"
- ></i>
- </span>
- </div>
- </div>
- </template>
- <template v-else>
- <div class="pdf_box">
- <span>{{ file.fileName }}</span>
- <i
- class="el-icon-delete delete_file"
- style="color: #fff; font-size: 20px"
- @click="handleRemoveLoanT(file)"
- ></i>
- </div>
- </template>
- </div>
- </template>
- <template v-else>
- <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
- <span class="el-upload-list__item-actions">
- <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
- <i class="el-icon-zoom-in"></i>
+ <i class="el-icon-zoom-in"></i>
</span>
- <span v-if='!disabled' class="el-upload-list__item-delete" @click="handleRemoveLoanT(file)">
- <i class="el-icon-delete"></i>
+ <span v-if='!disabled'
+ class="el-upload-list__item-delete"
+ @click="handleRemoveLoanT(file)"
+ >
+ <i class="el-icon-delete"></i>
</span>
- </span>
- </template>
- </div>
+ </span>
+ </div>
</el-upload>
- <el-dialog
- title="查看图片"
- :append-to-body="true"
- top="0"
- :visible.sync="imgVisible"
- class="dialogImageUrlbox"
- >
- <img width="100%" :src="dialogImageUrl" alt="" />
+ <el-dialog title="查看图片" top="1vh" :append-to-body='true' :visible.sync="imgVisible" class='dialogImageUrlbox'>
+ <img width="80%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>
+
<script>
-import axios from "axios";
import { uploadFile } from "@/api/user";
import { imgShrink } from "@/utils/validate";
-import {showTipOfStatuCode} from '@/utils/statusCodeManage'
+
export default {
- props: {
- limit: {
- type: Number | String,
- default: "",
- },
- disabled: {
+ props:{
+ limit: {
+ type: Number,
+ default: 1
+ },
+ disabled: {
type: Boolean,
- default: false,
- },
- defaultList: {
+ default: false
+ },
+ defaultList:{
type: Array,
- default: () => {
- return [];
- },
- },
- imgSize: {
- type: Object,
- default: () => {
- return {};
- },
- },
- imgStyle: {
- type: Object,
- default: () => {
- return {
- width: "100px",
- height: "100px",
- };
- },
- },
- isUploadOther: {
+ default: ()=>{
+ return []
+ }
+ },
+ isProject:{
type: Boolean,
- default: false,
- },
+ default: false
+ }
},
data() {
- return {
- PicList: [],
- imgVisible: false,
- dialogImageUrl: "",
- uploadFileForm: {
- suffix: "",
- base64Data: "",
- },
- uploadDisabled: false,
- };
+ return {
+ pictureList:[],
+ imgVisible:false,
+ dialogImageUrl:'',
+ uploadFileForm:{
+ suffix:"",
+ base64Data:""
+ }
+ };
},
- watch: {
- defaultList: {
- handler: function (val) {
- this.PicList = val;
- },
- deep: true,
- },
+ watch:{
+ defaultList:{
+ handler: function(val) {
+ console.log(val)
+ this.pictureList = val;
+ },
+ deep: true
+ }
},
methods: {
- beforeAvatarUpload(file, type) {
- var testmsg = !/\/(?:jpg|jpeg|png|pdf)/i.test(file.type);
- const isLt5M = file.size / 1024 / 1024 < 100;
- if (testmsg) {
- this.$message.error("请检查文件格式");
- return false;
- }
- if (!isLt5M) {
- this.$message.error("上传图片大小不能超过 100MB!");
- return false;
- }
- },
- uploadFileData(file, type) {
- if(this.isUploadOther){
- var formData = new FormData(); //新建表单对象
- formData.append("file", file.file); //把文件对象添加到表单对象里
- formData.append("filename", file.file.name); //把文件名称添加到表单对象里
- axios.post("/sfPlat/pub/uploadLargeFile", formData).then(({ data }) => {
- let { fileUrl, fileName, fileId } = data.body;
- this.PicList.push({
- fileUrl: fileUrl,
- fileName,
- url: fileUrl,
- fileId,
- });
- this.$emit("sendList", this.PicList);
- })
- .catch((err) => {
- showTipOfStatuCode(err)
- });
- }else{
+ beforeAvatarUpload(file,type) {
+ var testmsg = /^image\/(jpeg|png|jpg)$/.test(file.type);
+ const isLt5M = file.size / 1024 / 1024 < 15;
+ if (!testmsg) {
+ this.$message.error("上传图片格式不对!");
+ return false;
+ }
+ if (!isLt5M) {
+ this.$message.error("上传图片大小不能超过 15MB!");
+ return false;
+ }
+ },
+ uploadFileData(file,type) {
//上传图片
const fileName = file.file.name;
- this.uploadFileForm.suffix = fileName.substr(fileName.lastIndexOf(".") + 1, fileName.length);
- imgShrink(file.file,this.imgSize.width,this.imgSize.height).then(resBase64 => {
- this.uploadFileForm.base64Data = resBase64.split(",")[1];
- //直接拿到base64信息
- uploadFile(this.uploadFileForm).then(res => {
- this.PicList.push({
- filePath: res.body.fileUrl,
- fileName: fileName,
- url: res.body.fileUrl,
- fileId: res.body.fileId
+ this.uploadFileForm.suffix = fileName.substr( fileName.lastIndexOf(".") + 1,fileName.length);
+ imgShrink(file.file).then(resBase64 => {
+ this.uploadFileForm.base64Data = resBase64.split(",")[1];
+ let apiEvent = {uploadFile};
+ //直接拿到base64信息
+ apiEvent["uploadFile"](this.uploadFileForm).then(res => {
+ this.pictureList.push({
+ filePath: res.body.fileUrl,
+ fileName: fileName,
+ uid: file.file.uid,
+ url: res.body.fileUrl,
+ fileId:res.body.fileId
+ });
+ this.$emit('sendList',this.pictureList);
});
- this.uploadDisabled = this.PicList.length >= 1 && this.limit==1
- this.$emit('sendList', this.PicList);
- });
});
+ },
+ handlePictureCardPreview(file) {
+ this.dialogImageUrl = file.url;
+ this.imgVisible = true;
+ },
+ handleRemoveLoanT(file) {
+ const index = this.pictureList.findIndex(item => {
+ return item.uid == file.uid;
+ });
+ this.pictureList.splice(index,1);
+ this.$emit('sendList',this.pictureList);
+ },
+ masterFileMax(){
+ this.$message.warning(`请最多上传 ${this.limit} 个文件。`);
}
- },
- handlePictureCardPreview(file) {
- this.dialogImageUrl = file.url;
- this.imgVisible = true;
- },
- handleRemoveLoanT(file) {
- const index = this.PicList.findIndex((item) => {
- return item.fileId == file.fileId;
- });
- this.PicList.splice(index, 1);
- this.uploadDisabled = this.PicList.length >= 1 && this.limit == 1;
- this.$emit("sendList", this.PicList);
- },
- masterFileMax() {
- this.$message.warning(`最多上传 ${this.limit} 个文件。`);
- },
},
- created() {},
mounted() {
if (this.defaultList.length > 0) {
- this.PicList = this.defaultList;
- this.uploadDisabled = this.PicList.length >= 1 && this.limit == 1;
+ this.pictureList = this.defaultList;
+ this.uploadDisabled = this.pictureList.length >= 1 && this.limit == 1;
}
},
};
</script>
-<style lang="scss">
-.updispaly {
- .el-upload--picture-card {
- display: none;
- }
- .el-upload {
- width: 100% !important;
- height: 100% !important;
- }
- .uplaod_img > .el-upload--picture-card {
- width: 100% !important;
- height: 100% !important;
- }
+<style>
+.el-upload--picture-card , .el-upload-list__item{
+ width: 74px !important;
+ height: 74px !important;
+ line-height: 76px !important;
}
-.pdf_style{
- .img_box {
- position: relative;
- margin-right: 5px;
- margin-bottom: 5px;
- }
- .el-upload-list__item {
- width: inherit !important;
- }
- .el-upload-list__item-actions {
- position: absolute !important;
- top: 0 !important;
- left: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- opacity: 0;
- background: rgba(0, 0, 0, 0.5);
- }
-
- .img_box:hover .el-upload-list__item-actions {
- opacity: 1;
- }
- .el-upload-list {
- display: flex !important;
- justify-content: flex-start !important;
- align-items: center !important;
- flex-wrap: wrap !important;
- }
- .pdf_box {
- padding: 5px 0;
- padding-right: 24px;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- }
- .delete_file {
- display: inline-block;
- margin-left: 12px;
- opacity: 0;
- }
- .pdf_box:hover .delete_file {
- opacity: 1;
- color: #666 !important;
- }
-}
-
+
</style>
--
Gitblit v1.8.0