|
|
@@ -85,23 +85,28 @@
|
|
|
<!-- 附件列表(3个以内) v-if="files.length <= 3" -->
|
|
|
<div class="file-list-simple">
|
|
|
<div v-for="(file, index) in files" :key="index" class="file-item">
|
|
|
- <i class="el-icon-document"></i>
|
|
|
+ <i
|
|
|
+ class="fileIcon iconfont-5039297"
|
|
|
+ :class="fileIcon(file.fileExtension)"
|
|
|
+ ></i>
|
|
|
<span class="file-fileName" @click="handlePreview(file)">
|
|
|
{{ file.fileName }}
|
|
|
</span>
|
|
|
+ <!-- 状态标签 -->
|
|
|
+ <span class="file-status">
|
|
|
+ <el-tag size="mini" :type="getStatusType(file.status)">
|
|
|
+ {{ getStatusText(file.status) }}
|
|
|
+ </el-tag>
|
|
|
+ </span>
|
|
|
<span
|
|
|
class="delete-btn"
|
|
|
:disabled="isDisabled"
|
|
|
:class="{ 'disabled-text': isDisabled }"
|
|
|
@click="removeFile(index)"
|
|
|
>
|
|
|
- <i class="el-icon-close"></i>
|
|
|
- </span>
|
|
|
- <!-- 状态标签 -->
|
|
|
- <span style="margin-left: 10px">
|
|
|
- <el-tag size="mini" :type="getStatusType(file.status)">
|
|
|
- {{ getStatusText(file.status) }}
|
|
|
- </el-tag>
|
|
|
+ <el-tooltip effect="dark" content="删除" placement="top">
|
|
|
+ <i class="iconfont-5039297 icon-shanchu1"></i>
|
|
|
+ </el-tooltip>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -398,6 +403,17 @@
|
|
|
}
|
|
|
return map[status] || status
|
|
|
},
|
|
|
+ // 添加文件图标类名方法
|
|
|
+ fileIcon(extension) {
|
|
|
+ const map = {
|
|
|
+ xlsx: 'icon-exel',
|
|
|
+ xls: 'icon-exel',
|
|
|
+ doc: 'icon-word',
|
|
|
+ docx: 'icon-word',
|
|
|
+ pdf: 'icon-word',
|
|
|
+ }
|
|
|
+ return map[extension] || 'icon-word'
|
|
|
+ },
|
|
|
getStatusType(status) {
|
|
|
const map = {
|
|
|
pending: 'warning',
|
|
|
@@ -438,43 +454,114 @@
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
@import '@/styles/costAudit.scss';
|
|
|
+ // 上传按钮区域
|
|
|
.upload-buttons {
|
|
|
display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
gap: 10px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
+
|
|
|
+ // 文件列表
|
|
|
.file-list-simple {
|
|
|
- margin-bottom: 0px;
|
|
|
+ margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
+ // 文件项样式
|
|
|
.file-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- padding: 8px 0;
|
|
|
- border-bottom: 1px dashed #ebeef5;
|
|
|
+ padding: 12px 15px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ border-radius: 6px;
|
|
|
font-size: 14px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: $base-color-default;
|
|
|
+ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
|
|
|
+ transform: translateY(-1px);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
+ // 文件图标
|
|
|
+ .fileIcon {
|
|
|
+ font-size: 24px;
|
|
|
+ color: $base-color-default;
|
|
|
+ margin-right: 12px;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: rgba($base-color-default, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ .file-item:hover & {
|
|
|
+ background-color: rgba($base-color-default, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 文件名
|
|
|
+ .file-fileName {
|
|
|
+ flex: 1;
|
|
|
+ color: #303133;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: $base-color-default;
|
|
|
+ cursor: pointer;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 状态标签
|
|
|
+ .file-status {
|
|
|
+ margin: 0 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 删除按钮
|
|
|
.file-item .delete-btn {
|
|
|
- margin-left: auto;
|
|
|
- color: #f56c6c;
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #909399;
|
|
|
cursor: pointer;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 4px;
|
|
|
+ border-radius: 4px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:not(.disabled-text):hover {
|
|
|
+ color: #f56c6c;
|
|
|
+ background-color: rgba(245, 108, 108, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.disabled-text {
|
|
|
+ cursor: not-allowed;
|
|
|
+ opacity: 0.6;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+ // 表格形式文件列表
|
|
|
.file-list-table {
|
|
|
margin-top: 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
+ // 表格底部按钮
|
|
|
.table-footer {
|
|
|
margin-top: 20px;
|
|
|
text-align: right;
|
|
|
}
|
|
|
- .upload-container {
|
|
|
- margin-top: 0px !important;
|
|
|
- }
|
|
|
- .file-fileName {
|
|
|
- &:hover {
|
|
|
- color: $base-color-default;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
</style>
|