|
@@ -10,37 +10,39 @@
|
|
:on-error="handleUploadError"
|
|
:on-error="handleUploadError"
|
|
:on-exceed="handleExceed"
|
|
:on-exceed="handleExceed"
|
|
:on-remove="handleRemove"
|
|
:on-remove="handleRemove"
|
|
- name="file"
|
|
|
|
|
|
+ name="file"
|
|
:file-list="fileList"
|
|
:file-list="fileList"
|
|
:headers="headers"
|
|
:headers="headers"
|
|
>
|
|
>
|
|
- <div slot="tip" class="el-upload__tip">cad文件类型:dwg,dwt;word文件类型:doc,docx;Excel文件类型:xls,xlsx;照片文件类型:jpg,png,jpeg</div>
|
|
|
|
|
|
+ <div slot="tip" class="el-upload__tip">
|
|
|
|
+ cad文件类型:dwg,dwt;word文件类型:doc,docx;Excel文件类型:xls,xlsx;照片文件类型:jpg,png,jpeg
|
|
|
|
+ </div>
|
|
<el-button class="el-icon-plus abs" type="primary">上传文件</el-button>
|
|
<el-button class="el-icon-plus abs" type="primary">上传文件</el-button>
|
|
</el-upload>
|
|
</el-upload>
|
|
|
|
|
|
<!-- 上传提示 -->
|
|
<!-- 上传提示 -->
|
|
<div class="el-upload__tip" slot="tip" v-if="showTip">
|
|
<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>
|
|
|
|
|
|
+ <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>
|
|
<!-- 文件列表 -->
|
|
<!-- 文件列表 -->
|
|
-<!-- <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">-->
|
|
|
|
-<!-- <li :key="file.url + index" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">-->
|
|
|
|
-<!-- <el-link :href="`${file.url}`" :underline="false" target="_blank">-->
|
|
|
|
-<!-- <span class="el-icon-document"> {{ file.name }} </span>-->
|
|
|
|
-<!-- </el-link>-->
|
|
|
|
-<!-- <div class="ele-upload-list__item-content-action">-->
|
|
|
|
-<!-- <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>-->
|
|
|
|
-<!-- </div>-->
|
|
|
|
-<!-- </li>-->
|
|
|
|
-<!-- </transition-group>-->
|
|
|
|
|
|
+ <!-- <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">-->
|
|
|
|
+ <!-- <li :key="file.url + index" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">-->
|
|
|
|
+ <!-- <el-link :href="`${file.url}`" :underline="false" target="_blank">-->
|
|
|
|
+ <!-- <span class="el-icon-document"> {{ file.name }} </span>-->
|
|
|
|
+ <!-- </el-link>-->
|
|
|
|
+ <!-- <div class="ele-upload-list__item-content-action">-->
|
|
|
|
+ <!-- <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>-->
|
|
|
|
+ <!-- </div>-->
|
|
|
|
+ <!-- </li>-->
|
|
|
|
+ <!-- </transition-group>-->
|
|
</el-form>
|
|
</el-form>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { getToken } from "@/utils/auth";
|
|
|
|
|
|
+import {getToken} from "@/utils/auth";
|
|
|
|
|
|
export default {
|
|
export default {
|
|
props: {
|
|
props: {
|
|
@@ -55,14 +57,14 @@ export default {
|
|
type: Number,
|
|
type: Number,
|
|
default: 5,
|
|
default: 5,
|
|
},
|
|
},
|
|
- disabled:{
|
|
|
|
- type:Boolean,
|
|
|
|
|
|
+ disabled: {
|
|
|
|
+ type: Boolean,
|
|
default: false
|
|
default: false
|
|
},
|
|
},
|
|
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
|
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
|
fileType: {
|
|
fileType: {
|
|
type: Array,
|
|
type: Array,
|
|
- default: () => ['dwg','dwt','doc','docx','xls','xlsx','png', 'jpg', 'jpeg'],
|
|
|
|
|
|
+ default: () => ['dwg', 'dwt', 'doc', 'docx', 'xls', 'xlsx', 'png', 'jpg', 'jpeg'],
|
|
},
|
|
},
|
|
// 是否显示提示
|
|
// 是否显示提示
|
|
isShowTip: {
|
|
isShowTip: {
|
|
@@ -75,7 +77,7 @@ export default {
|
|
dialogImageUrl: "",
|
|
dialogImageUrl: "",
|
|
dialogVisible: false,
|
|
dialogVisible: false,
|
|
hideUpload: false,
|
|
hideUpload: false,
|
|
- type:"",
|
|
|
|
|
|
+ type: "",
|
|
baseUrl: process.env.VUE_APP_BASE_API,
|
|
baseUrl: process.env.VUE_APP_BASE_API,
|
|
uploadImgUrl: process.env.VUE_APP_BASE_API + "/obs", // 上传的图片服务器地址
|
|
uploadImgUrl: process.env.VUE_APP_BASE_API + "/obs", // 上传的图片服务器地址
|
|
headers: {
|
|
headers: {
|
|
@@ -93,7 +95,7 @@ export default {
|
|
// 然后将数组转为对象数组
|
|
// 然后将数组转为对象数组
|
|
this.fileList = list.map(item => {
|
|
this.fileList = list.map(item => {
|
|
if (typeof item === "object") {
|
|
if (typeof item === "object") {
|
|
- item = { name: item.fileName, url: item.picUrl };
|
|
|
|
|
|
+ item = {name: item.fileName, url: item.picUrl};
|
|
}
|
|
}
|
|
return item;
|
|
return item;
|
|
});
|
|
});
|
|
@@ -113,26 +115,26 @@ export default {
|
|
},
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- handlePreview(file){
|
|
|
|
- if (file.url==null)return;
|
|
|
|
|
|
+ handlePreview(file) {
|
|
|
|
+ if (file.url == null) return;
|
|
const link = document.createElement('a');
|
|
const link = document.createElement('a');
|
|
link.href = file.url;
|
|
link.href = file.url;
|
|
- link.download = file.name?file.name:'文件'; // 可以指定下载后的文件名
|
|
|
|
|
|
+ link.download = file.name ? file.name : '文件'; // 可以指定下载后的文件名
|
|
link.click();
|
|
link.click();
|
|
},
|
|
},
|
|
// 删除文件
|
|
// 删除文件
|
|
handleDelete(index) {
|
|
handleDelete(index) {
|
|
const obj = this.fileList[index];
|
|
const obj = this.fileList[index];
|
|
- if(obj!=null) {
|
|
|
|
- this.fileList.splice(index, 1);
|
|
|
|
|
|
+ if (obj != null) {
|
|
|
|
+ this.fileList.splice(index, 1);
|
|
}
|
|
}
|
|
this.$emit("input", this.fileList);
|
|
this.$emit("input", this.fileList);
|
|
},
|
|
},
|
|
// 删除图片
|
|
// 删除图片
|
|
handleRemove(file, fileList) {
|
|
handleRemove(file, fileList) {
|
|
const findex = this.fileList.map(f => f.url).indexOf(file.url);
|
|
const findex = this.fileList.map(f => f.url).indexOf(file.url);
|
|
- if(findex > -1) {
|
|
|
|
- this.fileList.splice(findex, 1);
|
|
|
|
|
|
+ if (findex > -1) {
|
|
|
|
+ this.fileList.splice(findex, 1);
|
|
}
|
|
}
|
|
console.log('000000000')
|
|
console.log('000000000')
|
|
console.log(this.fileList)
|
|
console.log(this.fileList)
|
|
@@ -141,9 +143,10 @@ export default {
|
|
// 上传成功回调
|
|
// 上传成功回调
|
|
handleUploadSuccess(res) {
|
|
handleUploadSuccess(res) {
|
|
if (res.code == 200) {
|
|
if (res.code == 200) {
|
|
- this.fileList.push({ name: res.data.fileName, url: res.data.url });
|
|
|
|
|
|
+ this.fileList.push({name: res.data.fileName, url: res.data.url});
|
|
this.$emit("input", this.fileList);
|
|
this.$emit("input", this.fileList);
|
|
- this.loading.close();
|
|
|
|
|
|
+ if (this.loading)
|
|
|
|
+ this.loading.close();
|
|
} else {
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
this.$message.error(res.msg);
|
|
this.loading.close();
|
|
this.loading.close();
|
|
@@ -162,18 +165,18 @@ export default {
|
|
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
|
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
|
let name = '';
|
|
let name = '';
|
|
let flag = false;
|
|
let flag = false;
|
|
- if (!['dwg','dwt','doc','docx','xls','xlsx','png', 'jpg', 'jpeg'].includes(fileExtension)){
|
|
|
|
- name='cad文件类型:dwg,dwt;word文件类型:doc,docx;Excel文件类型:xls,xlsx;照片文件类型:jpg,png,jpeg';
|
|
|
|
|
|
+ if (!['dwg', 'dwt', 'doc', 'docx', 'xls', 'xlsx', 'png', 'jpg', 'jpeg'].includes(fileExtension)) {
|
|
|
|
+ name = 'cad文件类型:dwg,dwt;word文件类型:doc,docx;Excel文件类型:xls,xlsx;照片文件类型:jpg,png,jpeg';
|
|
flag = true
|
|
flag = true
|
|
}
|
|
}
|
|
- if (flag==true) {
|
|
|
|
|
|
+ if (flag == true) {
|
|
this.$message.error(
|
|
this.$message.error(
|
|
`文件格式不正确, 规则:${name}!`
|
|
`文件格式不正确, 规则:${name}!`
|
|
);
|
|
);
|
|
return false;
|
|
return false;
|
|
}
|
|
}
|
|
return true
|
|
return true
|
|
- }else {
|
|
|
|
|
|
+ } else {
|
|
return false
|
|
return false
|
|
}
|
|
}
|
|
|
|
|
|
@@ -207,7 +210,7 @@ export default {
|
|
handlePictureCardPreview(file) {
|
|
handlePictureCardPreview(file) {
|
|
this.dialogImageUrl = file.url;
|
|
this.dialogImageUrl = file.url;
|
|
this.dialogVisible = true;
|
|
this.dialogVisible = true;
|
|
- this.type=file.name.slice(file.name.lastIndexOf(".")+1);
|
|
|
|
|
|
+ this.type = file.name.slice(file.name.lastIndexOf(".") + 1);
|
|
console.log(this.type)
|
|
console.log(this.type)
|
|
},
|
|
},
|
|
// 对象转成指定字符串分隔
|
|
// 对象转成指定字符串分隔
|
|
@@ -227,6 +230,7 @@ export default {
|
|
::v-deep.hide .el-upload--picture-card {
|
|
::v-deep.hide .el-upload--picture-card {
|
|
display: none;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
+
|
|
// 去掉动画效果
|
|
// 去掉动画效果
|
|
::v-deep .el-list-enter-active,
|
|
::v-deep .el-list-enter-active,
|
|
::v-deep .el-list-leave-active {
|
|
::v-deep .el-list-leave-active {
|
|
@@ -237,21 +241,25 @@ export default {
|
|
opacity: 0;
|
|
opacity: 0;
|
|
transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
+
|
|
.upload-file-uploader {
|
|
.upload-file-uploader {
|
|
margin-bottom: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.upload-file-list .el-upload-list__item {
|
|
.upload-file-list .el-upload-list__item {
|
|
border: 1px solid #e4e7ed;
|
|
border: 1px solid #e4e7ed;
|
|
line-height: 2;
|
|
line-height: 2;
|
|
margin-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
+
|
|
.upload-file-list .ele-upload-list__item-content {
|
|
.upload-file-list .ele-upload-list__item-content {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-items: center;
|
|
color: inherit;
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
+
|
|
.ele-upload-list__item-content-action .el-link {
|
|
.ele-upload-list__item-content-action .el-link {
|
|
margin-right: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|