|
@@ -4,10 +4,10 @@
|
|
:action="action"
|
|
:action="action"
|
|
:listType="listType"
|
|
:listType="listType"
|
|
:fileList="fileList"
|
|
:fileList="fileList"
|
|
|
|
+ :disabled="disabled"
|
|
@preview="handlePreview"
|
|
@preview="handlePreview"
|
|
@change="handleChange"
|
|
@change="handleChange"
|
|
:beforeUpload="beforeUpload"
|
|
:beforeUpload="beforeUpload"
|
|
- :preview-file="previewFile"
|
|
|
|
:data="params"
|
|
:data="params"
|
|
:value="comVal"
|
|
:value="comVal"
|
|
>
|
|
>
|
|
@@ -57,7 +57,7 @@ export default {
|
|
},
|
|
},
|
|
upText: {
|
|
upText: {
|
|
type: String,
|
|
type: String,
|
|
- default: '上传'
|
|
|
|
|
|
+ default: ''
|
|
},
|
|
},
|
|
value: {
|
|
value: {
|
|
type: String
|
|
type: String
|
|
@@ -66,14 +66,21 @@ export default {
|
|
type: Object,
|
|
type: Object,
|
|
default: function () {
|
|
default: function () {
|
|
return {
|
|
return {
|
|
- savePathType: 'ali' // 存储类型 local 服务器本地,ali 阿里云
|
|
|
|
|
|
+ savePathType: 'ali' // 存储类型 local 服务器本地,ali 阿里云, web
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ disabled: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false
|
|
|
|
+ },
|
|
|
|
+ uploadType: { // 上传类型 img图片;attach附件;import导入
|
|
|
|
+ type: String,
|
|
|
|
+ default: 'img'
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
value (a, b) {
|
|
value (a, b) {
|
|
- console.log(a, '=--====')
|
|
|
|
this.comVal = a || ''
|
|
this.comVal = a || ''
|
|
if (a == undefined) {
|
|
if (a == undefined) {
|
|
this.fileList = []
|
|
this.fileList = []
|
|
@@ -93,19 +100,37 @@ export default {
|
|
setFileList (a) {
|
|
setFileList (a) {
|
|
const temp = []
|
|
const temp = []
|
|
if (a && a.length > 0) {
|
|
if (a && a.length > 0) {
|
|
- a.split(',').map((item, index) => {
|
|
|
|
- if (item) {
|
|
|
|
- temp.push({
|
|
|
|
- uid: index,
|
|
|
|
- name: item,
|
|
|
|
- status: 'done',
|
|
|
|
- url: item,
|
|
|
|
- response: {
|
|
|
|
- data: item
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ if (this.uploadType == 'img') { // 图片
|
|
|
|
+ a.split(',').map((item, index) => {
|
|
|
|
+ if (item) {
|
|
|
|
+ temp.push({
|
|
|
|
+ uid: index,
|
|
|
|
+ name: item,
|
|
|
|
+ status: 'done',
|
|
|
|
+ url: item,
|
|
|
|
+ response: {
|
|
|
|
+ data: item
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else if (this.uploadType == 'attach') { // 附件
|
|
|
|
+ a.map((item, index) => {
|
|
|
|
+ if (item) {
|
|
|
|
+ temp.push({
|
|
|
|
+ uid: index,
|
|
|
|
+ name: item.fileName,
|
|
|
|
+ status: 'done',
|
|
|
|
+ url: item.filePath,
|
|
|
|
+ response: {
|
|
|
|
+ data: item
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else if (this.uploadType == 'import') { // 导入
|
|
|
|
+
|
|
|
|
+ }
|
|
}
|
|
}
|
|
this.fileList = temp
|
|
this.fileList = temp
|
|
},
|
|
},
|
|
@@ -116,39 +141,51 @@ export default {
|
|
if (this.listType == 'text') {
|
|
if (this.listType == 'text') {
|
|
return
|
|
return
|
|
}
|
|
}
|
|
- console.log(file, '8888888888')
|
|
|
|
this.previewImage = file.url || file.thumbUrl
|
|
this.previewImage = file.url || file.thumbUrl
|
|
- // this.previewImage = file.response.data
|
|
|
|
this.previewVisible = true
|
|
this.previewVisible = true
|
|
},
|
|
},
|
|
handleChange ({ file, fileList }) {
|
|
handleChange ({ file, fileList }) {
|
|
- if (file.status == 'error') {
|
|
|
|
|
|
+ // console.log(file, fileList, '-----change')
|
|
|
|
+ if (file.status == 'error' || (file.response && (file.response.status == 500))) {
|
|
this.$message.error('上传失败,请重试!')
|
|
this.$message.error('上传失败,请重试!')
|
|
return
|
|
return
|
|
}
|
|
}
|
|
this.fileList = this.validaFile(file, fileList)
|
|
this.fileList = this.validaFile(file, fileList)
|
|
this.$emit('change', this.formatFile())
|
|
this.$emit('change', this.formatFile())
|
|
|
|
+ this.$emit('input', this.formatFile())
|
|
},
|
|
},
|
|
// 格式化文件列表数据,给表单
|
|
// 格式化文件列表数据,给表单
|
|
formatFile () {
|
|
formatFile () {
|
|
const a = this.fileList
|
|
const a = this.fileList
|
|
- const temp = []
|
|
|
|
|
|
+ let temp = []
|
|
|
|
+ let obj = null
|
|
if (a && a.length) {
|
|
if (a && a.length) {
|
|
- a.map(item => {
|
|
|
|
- if (item.response && item.status == 'done') {
|
|
|
|
- temp.push(item.response.data)
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ if (this.uploadType == 'img') { // 图片 将接口的返回图片地址逗号拼接后返回页面
|
|
|
|
+ a.map(item => {
|
|
|
|
+ if (item.response && item.status == 'done') {
|
|
|
|
+ temp.push(item.response.data)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ obj = temp.join(',')
|
|
|
|
+ } else if (this.uploadType == 'attach') { // 附件 将接口的返回数据返回页面
|
|
|
|
+ a.map(item => {
|
|
|
|
+ if (item.response && item.status == 'done') {
|
|
|
|
+ temp = [...temp, ...item.response.data]
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ obj = JSON.stringify(temp)
|
|
|
|
+ } else if (this.uploadType == 'import') { // 导入
|
|
|
|
+
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- return temp.join(',')
|
|
|
|
|
|
+ return obj
|
|
},
|
|
},
|
|
// 文件校验
|
|
// 文件校验
|
|
validaFile (file, filesList) {
|
|
validaFile (file, filesList) {
|
|
if (filesList.length == 0) {
|
|
if (filesList.length == 0) {
|
|
return []
|
|
return []
|
|
}
|
|
}
|
|
-
|
|
|
|
- console.log(file, filesList, this.beforeUpload(file, 0))
|
|
|
|
|
|
+ // console.log(file, filesList, this.beforeUpload(file, 0))
|
|
if (!this.beforeUpload(file, 0) && file.status != 'removed') {
|
|
if (!this.beforeUpload(file, 0) && file.status != 'removed') {
|
|
const index = filesList.findIndex(item => item.uid == file.uid)
|
|
const index = filesList.findIndex(item => item.uid == file.uid)
|
|
filesList.splice(index, 1)
|
|
filesList.splice(index, 1)
|
|
@@ -192,10 +229,12 @@ export default {
|
|
.upload-file{
|
|
.upload-file{
|
|
float: left;
|
|
float: left;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
|
+ height: 80px;
|
|
/* you can make up upload button and sample style by using stylesheets */
|
|
/* you can make up upload button and sample style by using stylesheets */
|
|
.ant-upload-select-picture-card i {
|
|
.ant-upload-select-picture-card i {
|
|
font-size: 32px;
|
|
font-size: 32px;
|
|
color: #999;
|
|
color: #999;
|
|
|
|
+ margin-top: 9px;
|
|
}
|
|
}
|
|
.ant-upload-select-picture-card .ant-upload-text {
|
|
.ant-upload-select-picture-card .ant-upload-text {
|
|
margin-top: 8px;
|
|
margin-top: 8px;
|
|
@@ -207,11 +246,16 @@ export default {
|
|
padding: 4px 0;
|
|
padding: 4px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .ant-upload-list-picture-card-container{
|
|
|
|
+ height: 80px;
|
|
|
|
+ width: 80px;
|
|
|
|
+ }
|
|
.ant-upload.ant-upload-select-picture-card,
|
|
.ant-upload.ant-upload-select-picture-card,
|
|
.ant-upload-list-picture-card .ant-upload-list-item{
|
|
.ant-upload-list-picture-card .ant-upload-list-item{
|
|
width:80px;
|
|
width:80px;
|
|
height:80px;
|
|
height:80px;
|
|
padding: 4px;
|
|
padding: 4px;
|
|
|
|
+ margin: 0;
|
|
}
|
|
}
|
|
.ant-upload-list-item-info{
|
|
.ant-upload-list-item-info{
|
|
padding: 0 22px 0 4px;
|
|
padding: 0 22px 0 4px;
|