1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<template>
<div>
<a-row>
<a-col :span="24">
<div class="tb-title">
<span>附件上传</span>
</div>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="24" class="bg-gray">
<div class="special-middle" style="font-weight: bold;">
1.科研诚信承诺书（必须提供）<span class="required"></span><br />
2.承诺书（必须提供）<span class="required"></span><br />
3.医学研究伦理审查证明<br />
4.多家单位联合申报的必须提供牵头单位与所有参与单位签署的联合申报协议（协议中应包含项目名称、课题设置、专项经费分配、知识产权归属、项目经费筹集与使等内容，协议经单位盖章、项目及所有课题负责人签字有效）<br />
5.相关查新报告、前期科研成果、专利等佐证材料（选择提供）<br />
6.与项目相关的其它证明材料或文件等（选择提供）<br />
</div>
</a-col>
</a-row>
<a-row type="flex" class="item_inner">
<a-col :span="2">
<div class="special-middle">
<div>序号</div>
</div>
</a-col>
<a-col :span="8" class="bg-gray">
<div class="special-middle">
<div>附件说明</div>
</div>
</a-col>
<a-col :span="10" class="bg-gray">
<div class="special-middle">
<div>附件上传</div>
</div>
</a-col>
<a-col :span="4" class="bg-gray">
<div class="special-middle">
<div>操作</div>
</div>
</a-col>
</a-row>
<a-row v-for="(item, index) in fileList" :key="'fileList' + index" type="flex">
<a-col :span="2" style="text-align: center;">
{{ index + 1 }}
</a-col>
<a-col :span="8">
<a-form-model-item :prop="'fileList.' + index + '.fileExplain'" :rules="{required: true, message: '*',trigger: 'blur',}">
<a-input v-model="item.fileExplain" :maxLength="100" style="width: 80%" :disabled="item.required" />
<!-- <span v-if="mustAttachment.includes(index)" class="required"></span> -->
</a-form-model-item>
</a-col>
<a-col :span="10">
<div class="special-middle">
<div v-if="item.downloadUrl" class="file-box">
<div>
<a-icon type="file" style="margin-right: 8px" />
<span class="hover-pointer" @click="downloadfile(item)">{{item.fileName}}</span>
</div>
<a-icon type="delete" class="hover-pointer d-icon" @click="deletefile(item, index)" />
</div>
<div v-else>
<a-form-model-item :prop="'fileList.' + index + '.downloadUrl'" :rules="{required: true, message: '请上传附件',trigger: 'blur',}">
<input type="file" :ref="'fileElem' + index" class="visually-hidden" @change="handleFiles(item, index)" />
<a-button @click="fileSelect(item, index)"><a-icon type="upload" />选择文件</a-button>
</a-form-model-item>
</div>
</div>
</a-col>
<a-col :span="4">
<div class="special-middle">
<div v-if="!item.required">
<a-popconfirm title="确定要删除吗？" ok-text="确定" cancel-text="取消" @confirm="removefileList(item)">
<a-button type="link" size="small">删除</a-button>
</a-popconfirm>
</div>
</div>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="24" style="text-align: center">
<div class="special-middle">
<div>
<a-button type="dashed" style="width: 50%" @click="addfileList()">
<a-icon type="plus" /> 添加
</a-button>
</div>
</div>
</a-col>
</a-row>
</div>
</template>
<script>
const File = { fileName: "", downloadUrl: "", fileExplain: "", downloadId: "" };
export default {
name: "fileEdit",
props: {
fileList: {
type: Array,
default: () => {
return [{ ...File }];
},
},
},
created() {},
data() {
return {
mustAttachment: [ 0, 1 ],
};
},
methods: {
downloadfile() {
},
deletefile (item, index) {
this.$api.base.deletefile({ id: item.downloadId }).then(({ data = {} }) => {
if (data) {
item.fileName = ''
item.downloadUrl = ''
item.downloadId = ''
}
}).catch(() => {
this.$message.error('删除失败')
})
},
uploadHandle (file, fileName) {
let formData = new FormData()
formData.append('file', file)
formData.append('fileName', fileName)
return formData
},
handleFiles(item, index) {
let fileElem = this.$refs['fileElem' + index][0]
let files = fileElem.files
if (files.length <= 0) {
this.$message.error('未选中文件，请尝试重新选择')
return
}
if (!this.fileCheck(files[0]))
return
this.$api.base.asyncUpload(this.uploadHandle(files[0], files[0].name)).then(({ data = {} }) => {
if (data) {
item.fileName = files[0].name
item.downloadUrl = '/' + files[0].name
item.downloadId = data.id
} else
this.$message.error('上传失败')
}).catch(() => {
this.$message.error('上传失败')
})
},
fileSelect (item, index) {
let fileElem = this.$refs['fileElem' + index][0]
if (fileElem) {
fileElem.click()
}
},
fileCheck (file) {
//判断是否小于1M
let isLtSize = file.size < 1024 * 1024 * 15;
if (!isLtSize) {
this.$message.error('文件大小不能超过15M！');
return false
}
return true
},
// 添加附件
addfileList () {
this.fileList.push(Object.assign({ ...File }, { fileExplain: '' }))
},
// 删除附件
removefileList (item) {
let index = this.fileList.indexOf(item)
if (index !== -1) {
this.fileList.splice(index, 1)
}
},
},
};
</script>