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
<template>
<div>
<a-row>
<a-col :span="24">
<div class="main-title">
<span>附件 <span style="color: red;">(注：上传文件后点击请点击下方【保存】或【完成填写】按钮，文件格式 .doc,.docx,.pdf)</span></span>
</div>
</a-col>
</a-row>
<a-row type="flex">
<a-col :span="24" class="bg-gray">
<div class="special-middle">
<a href="/downloadFile/202412130901.docx" download="临床医学中心承诺书模版.docx" style="margin-right: 20px;">
<a-icon type="download"></a-icon> <span style="color:green;text-decoration:underline;">临床医学中心承诺书模版</span>
</a>
<a href="/downloadFile/202412130902.docx" download="个人承诺书模版.docx" style="margin-right: 20px;">
<a-icon type="download"></a-icon> <span style="color:green;text-decoration:underline;">个人承诺书模版</span>
</a>
<a href="/downloadFile/202412130903.docx" download="项目资金预算编制说明.docx" style="margin-right: 20px;">
<a-icon type="download"></a-icon> <span style="color:green;text-decoration:underline;">项目资金预算编制说明</span>
</a>
<a href="/downloadFile/202412241748.docx" download="申请人个人简历.docx" style="margin-right: 20px;">
<a-icon type="download"></a-icon> <span style="color:green;text-decoration:underline;">申请人个人简历</span>
</a>
</div>
</a-col>
</a-row>
<a-row type="flex" class="row_center">
<a-col :span="2">
<div class="special-middle">
<div>序号</div>
</div>
</a-col>
<a-col :span="6" class="bg-gray">
<div class="special-middle">
<div>附件名称</div>
</div>
</a-col>
<a-col :span="2" class="bg-gray">
<div class="special-middle">
<div>是否必备材料</div>
</div>
</a-col>
<a-col :span="12" class="bg-gray">
<div class="special-middle">
<div>附件上传</div>
</div>
</a-col>
<a-col :span="2" 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; margin-top: 8px;">
{{ index + 1 }}
</a-col>
<a-col :span="6">
<div class="special-middle" v-if="item.required">{{ item.fileExplain }}</div>
<a-form-model-item v-else :prop="'fileList.' + index + '.fileExplain'" :rules="{required: item.isRequired, message: '*',trigger: 'blur',}">
<a-input v-model="item.fileExplain" :maxLength="100" style="width: 100%" />
</a-form-model-item>
</a-col>
<a-col :span="2">
<div class="special-middle" style="text-align: center;">
<div>{{ item.isRequired == true && item.required ? "是" : "否" }}</div>
</div>
</a-col>
<a-col :span="12" style="text-align: left;">
<div class="special-middle" style="text-align: left;">
<file-load :file.sync="fileList[index]" :index="index" :name="'fileList'" :format="['doc', 'docx', 'pdf']" />
</div>
</a-col>
<a-col :span="2">
<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: null, downloadUrl: null, fileExplain: null, downloadId: null, isRequired: true, required: false };
export default {
name: "fileEdit",
props: {
fileList: {
type: Array,
default: () => {
return [{ ...File }];
},
},
},
created () { },
data () {
return {
mustAttachment: [0, 1],
};
},
methods: {
// 添加附件
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>