优化
This commit is contained in:
zt
@ -29,6 +29,29 @@
|
||||
gap: 12px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.checkbox-item {
|
||||
display: flex;
|
||||
width: 100%; /* 确保宽度占满父容器 */
|
||||
}
|
||||
.el-checkbox__label {
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: space-between;
|
||||
width: 100%; /* 确保宽度占满父容器 */
|
||||
}
|
||||
/* 添加状态颜色样式 */
|
||||
.status-text.not-uploaded {
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
.status-text.partially-uploaded {
|
||||
color: rgb(255, 225, 7);
|
||||
}
|
||||
.status-text.uploaded {
|
||||
color: rgb(8, 224, 8);
|
||||
}
|
||||
.status-text {
|
||||
color: #999;
|
||||
}
|
||||
.action-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -56,6 +79,12 @@
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.el-table--border {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.el-table .cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@ -88,7 +117,7 @@
|
||||
</el-checkbox>
|
||||
<el-checkbox
|
||||
v-model="isFilter"
|
||||
:disabled="isListEmpty"
|
||||
:disabled="isFilterDisabled"
|
||||
@change="handleFilterChange"
|
||||
>
|
||||
筛选未上传的人员列表
|
||||
@ -113,7 +142,21 @@
|
||||
:label="item.userId"
|
||||
class="checkbox-item"
|
||||
>
|
||||
{{ item.username }}
|
||||
<span>{{ item.username }}</span>
|
||||
<!-- 添加状态显示 -->
|
||||
<span
|
||||
:class="['status-text', getUploadStatusClass(item.uploadType)]"
|
||||
>
|
||||
{{ getUploadStatus(item.uploadType) }}
|
||||
<el-button
|
||||
v-if="item.uploadType == '2'||item.uploadType == '1'"
|
||||
type="primary"
|
||||
@click="checkoutDetail(item)"
|
||||
size="small"
|
||||
>
|
||||
查看
|
||||
</el-button>
|
||||
</span>
|
||||
</el-checkbox>
|
||||
</template>
|
||||
<div v-else class="el-upload__tip">{{ listStatusText }}</div>
|
||||
@ -156,6 +199,23 @@
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 查看详情弹窗 -->
|
||||
<el-dialog v-model="dialogVisible" title="附件详情" width="80%">
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<el-table-column prop="annexName" label="附件名称"></el-table-column>
|
||||
<el-table-column prop="annexUrl" label="附件路径">
|
||||
<template #default="scope"> {{ scope.row.annexUrl }} </template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="annexType" width="120" label="附件类型">
|
||||
<template #default="scope">
|
||||
<span
|
||||
>{{ scope.row.annexType == '1' ? "劳动合同" : "保单" }}</span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 如果需要更多字段，可继续添加 -->
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</body>
|
||||
<script src="./vue.global.js"></script>
|
||||
@ -174,17 +234,28 @@
|
||||
loading: false,
|
||||
uploadLoading: false,
|
||||
listStatusText: "请先选择主题",
|
||||
userId: "",
|
||||
userId: "1893247598219890699",
|
||||
checkAll: false,
|
||||
isIndeterminate: false,
|
||||
uploadFile: null,
|
||||
isFilter: false,
|
||||
dialogVisible: false,
|
||||
detailLoading: false,
|
||||
dialogData: {},
|
||||
tableData: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isListEmpty() {
|
||||
return this.currentList.length === 0;
|
||||
},
|
||||
isFilterDisabled() {
|
||||
// 仅在未选择主题或原始列表为空时禁用
|
||||
return (
|
||||
!this.selectedTheme ||
|
||||
(this.currentList.length === 0 && !this.isFilter)
|
||||
);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const protocol = window.location.protocol;
|
||||
@ -239,11 +310,11 @@
|
||||
|
||||
// 筛选未上传文件的人员列表
|
||||
async handleFilterChange() {
|
||||
if (this.isListEmpty) {
|
||||
// 新增空列表判断
|
||||
this.isFilter = false;
|
||||
return;
|
||||
}
|
||||
// if (this.isListEmpty) {
|
||||
// // 新增空列表判断
|
||||
// this.isFilter = false;
|
||||
// return;
|
||||
// }
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await this.ajaxRequest({
|
||||
@ -345,6 +416,29 @@
|
||||
}
|
||||
},
|
||||
|
||||
// 详情请求方法
|
||||
async checkoutDetail(item) {
|
||||
console.log("点击详情", item);
|
||||
|
||||
try {
|
||||
this.detailLoading = true;
|
||||
const response = await this.ajaxRequest({
|
||||
url: `/ruoyi/common/annex/getHtmlWgzAnnex?recruitApplyId=${item.id}&wgzUserId=${item.userId}`,
|
||||
method: "GET",
|
||||
});
|
||||
// 转换数据结构
|
||||
this.dialogData = response.data;
|
||||
// 将后端返回的数据转换为适合表格展示的格式
|
||||
this.tableData = Object.values(this.dialogData).flat();
|
||||
this.dialogVisible = true;
|
||||
console.log("获取详情数据", this.tableData);
|
||||
} catch (error) {
|
||||
ElementPlus.ElMessage.error("获取详情失败");
|
||||
} finally {
|
||||
this.detailLoading = false;
|
||||
}
|
||||
},
|
||||
// 统一的 AJAX 请求方法
|
||||
async ajaxRequest(options) {
|
||||
const config = {
|
||||
method: options.method,
|
||||
@ -364,6 +458,32 @@
|
||||
|
||||
return options.isDownload ? response.arrayBuffer() : response.json();
|
||||
},
|
||||
// 根据uploadType返回状态文本
|
||||
getUploadStatus(uploadType) {
|
||||
switch (uploadType) {
|
||||
case "0":
|
||||
return "未上传";
|
||||
case "1":
|
||||
return "部分上传";
|
||||
case "2":
|
||||
return "已上传";
|
||||
default:
|
||||
return "未知状态";
|
||||
}
|
||||
},
|
||||
// 根据uploadType返回状态样式类名
|
||||
getUploadStatusClass(uploadType) {
|
||||
switch (uploadType) {
|
||||
case "0":
|
||||
return "not-uploaded";
|
||||
case "1":
|
||||
return "partially-uploaded";
|
||||
case "2":
|
||||
return "uploaded";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
userIds(newVal) {
|
||||
@ -371,11 +491,11 @@
|
||||
this.checkAll = newVal.length === total && total > 0;
|
||||
this.isIndeterminate = newVal.length > 0 && newVal.length < total;
|
||||
},
|
||||
currentList(newVal) {
|
||||
if (newVal.length === 0) {
|
||||
this.isFilter = false;
|
||||
}
|
||||
},
|
||||
// currentList(newVal) {
|
||||
// if (newVal.length === 0) {
|
||||
// this.isFilter = false;
|
||||
// }
|
||||
// },
|
||||
},
|
||||
});
|
||||
app.use(ElementPlus);
|
||||
|
||||
Reference in New Issue
Block a user