350 lines
10 KiB
Vue
350 lines
10 KiB
Vue
<template>
|
||
<div style="background-color: #fff; height: 100vh;">
|
||
<el-container style="height: 100%; display: flex; flex-direction: column;">
|
||
<el-header class="withrawHeader">
|
||
<h1 class="headerText">回收站</h1>
|
||
</el-header>
|
||
<el-main style="flex: 1; overflow: auto;">
|
||
<!-- 工具栏 -->
|
||
<el-header class="toolbar" style="padding: 10px;">
|
||
<el-tooltip class="withdrawToolTip" content="撤销对选中线索的删除">
|
||
<el-button class='btnWithdraw' @click="withdrawSelected">
|
||
<el-icon><Remove /></el-icon>
|
||
</el-button>
|
||
</el-tooltip>
|
||
<el-tooltip class="deleteToolTip" content="彻底删除选中线索">
|
||
<el-button class="btnDelete" @click="deleteSelected">
|
||
<el-icon><DeleteFilled /></el-icon>
|
||
</el-button>
|
||
</el-tooltip>
|
||
<!-- 刷新 -->
|
||
<el-tooltip class="withdrawToolTip" content="刷新">
|
||
<el-button class="btnDelete" @click="refreshData">
|
||
<el-icon><RefreshRight /></el-icon>
|
||
</el-button>
|
||
</el-tooltip>
|
||
|
||
|
||
|
||
</el-header>
|
||
<el-table
|
||
:data="tableData"
|
||
style="width: 100%;"
|
||
@selection-change="handleSelectionChange"
|
||
>
|
||
<el-table-column type="selection" class="withdrawSelectionCol"></el-table-column>
|
||
<!-- 动态生成表格列 -->
|
||
<el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label">
|
||
<template v-slot="scope">
|
||
<span>{{ formatValue(scope.row, column.prop) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 添加删除按钮 -->
|
||
<el-table-column label="操作">
|
||
<template v-slot:default="scope">
|
||
<el-button type="text" @click="withdrawRow(scope.row)">撤销</el-button>
|
||
<el-button type="text" @click="deleteClue(scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-main>
|
||
</el-container>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import axios from 'axios';
|
||
// import HeaderPage from "@/components/HeaderPage.vue"
|
||
|
||
export default {
|
||
components:{
|
||
// HeaderPage
|
||
},
|
||
data() {
|
||
const clueId = this.$route.params.id;
|
||
return {
|
||
// 将id存在data中，方便后续使用
|
||
clueId,
|
||
tableData: [], // 表格数据
|
||
tableColumns: [
|
||
{ prop: "type", label: "类型" },
|
||
{ prop: "table_id", label: "表ID" },
|
||
{ prop: "clue_id", label: "线索ID" },
|
||
{ prop: "del_time", label: "时间" }
|
||
], // 表格列配置
|
||
deleteClues:[], // 选中的数据行
|
||
pageTitle: "回收站"
|
||
};
|
||
},
|
||
methods: {
|
||
formatValue(row, prop) {
|
||
// 针对 type 字段进行特殊处理
|
||
if (prop === 'type' && row[prop] === '0') {
|
||
if (row['clue_id']) {
|
||
row['clue_id'] = '×';
|
||
}
|
||
return '表';
|
||
}
|
||
else if (prop === 'type' && row[prop] === '1')
|
||
return '线索'
|
||
return row[prop];
|
||
},
|
||
getDelete() {
|
||
// 获取表格数据
|
||
axios.get('http://localhost:8000/showDelRecords/').then(res => {
|
||
if(res.data.message=='没有删除记录')
|
||
{
|
||
return
|
||
}
|
||
this.tableData = res.data.data; // 这里要注意，最后一个data需要和后端返回的键名对应
|
||
})
|
||
.catch(error => {
|
||
this.$handleNetError(error); // 处理网络错误
|
||
});
|
||
},
|
||
withdrawRow(row) {
|
||
const index = this.tableData.indexOf(row);
|
||
if (index !== -1) {
|
||
// 发送请求到后端，传输撤销的行的 ID
|
||
axios.post('http://localhost:8000/withDraw/', { id: row.id }).then(response => {
|
||
console.log('撤销成功:', response.data);
|
||
// 从表格数据中移除指定行
|
||
this.tableData.splice(index, 1);
|
||
})
|
||
.catch(error => {
|
||
this.$handleNetError(error);
|
||
});
|
||
}
|
||
},
|
||
handleSelectionChange(selection){
|
||
this.deleteClues = selection; // 获取选中的数据
|
||
},
|
||
// 批量撤销
|
||
withdrawSelected(){
|
||
// 如果没有选择数据，抛出警告并终止
|
||
if(this.deleteClues.length == 0){
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '请选择要撤销的线索'
|
||
});
|
||
return;
|
||
}
|
||
|
||
for(let i = 0;i < this.deleteClues.length;i++){
|
||
this.$axios.post('http://localhost:8000/withDraw/',{ id:this.deleteClues[i].id })
|
||
.catch(error => {
|
||
this.$handleNetError(error);
|
||
return;
|
||
});
|
||
}
|
||
this.$message({
|
||
type: 'success',
|
||
message: '撤销成功，即将刷新界面'
|
||
});
|
||
// 撤销成功后，更新表格数据
|
||
location.reload();
|
||
},
|
||
// 删除单条线索
|
||
deleteClue(row){
|
||
if (row.type == 0){ // 如果是删除表
|
||
this.$axios.post('http:localhosat:8000/deleteTable/',{table_id:row.table_id}).then(response=>{
|
||
if(response.data.message == '删除成功'){
|
||
// 弹窗提示
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功，即将刷新界面'
|
||
});
|
||
|
||
location.reload(); // 刷新页面
|
||
}
|
||
})
|
||
.catch(error=>{
|
||
this.$handleNetError(error);
|
||
})
|
||
}else if(row.type == 1){ // 如果是删除线索
|
||
this.$axios.post('http:localhosat:8000/deleteSelected/',{table_id:row.table_id, clue_id:row.clue_id}).then(response=>{
|
||
if(response.data.message == '删除成功'){
|
||
// 弹窗提示
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功，即将刷新界面'
|
||
});
|
||
|
||
location.reload(); // 刷新页面
|
||
}else{
|
||
this.$message({
|
||
type: 'error',
|
||
message: '删除失败'
|
||
});
|
||
}
|
||
})
|
||
.catch(error=>{
|
||
this.$handleNetError(error); // 处理网络请求错误
|
||
})
|
||
}
|
||
if (row.type == 0){ // 如果是删除表
|
||
this.$axios.post('http:localhosat:8000/deleteTable/',{table_id:row.table_id}).then(response=>{
|
||
if(response.data.message == '删除成功'){
|
||
// 弹窗提示
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功，即将刷新界面'
|
||
});
|
||
|
||
location.reload(); // 刷新页面
|
||
}
|
||
})
|
||
.catch(error=>{
|
||
this.$handleNetError(error);
|
||
})
|
||
}else if(row.type == 1){ // 如果是删除线索
|
||
this.$axios.post('http:localhosat:8000/deleteSelected/',{table_id:row.table_id, clue_id:row.clue_id}).then(response=>{
|
||
if(response.data.message == '删除成功'){
|
||
// 弹窗提示
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功，即将刷新界面'
|
||
});
|
||
|
||
location.reload(); // 刷新页面
|
||
}else{
|
||
this.$message({
|
||
type: 'error',
|
||
message: '删除失败'
|
||
});
|
||
}
|
||
})
|
||
.catch(error=>{
|
||
this.$handleNetError(error); // 处理网络请求错误
|
||
})
|
||
}
|
||
},
|
||
// 删除选中的线索
|
||
async deleteSelected(){
|
||
// 如果没有选择数据，抛出警告
|
||
if(this.deleteClues.length == 0){
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '请选择要删除的线索'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 遍历选中的数据行，将要删除的数据存入 deleteItems 数组
|
||
const deleteItems = this.deleteClues.map(row => ({
|
||
type: row.type,
|
||
table_id: row?.table_id, // 注意命名要与后端保持一致
|
||
clue_id: row?.clue_id ?? null, // 如果没有clue_id，设为null
|
||
type: row.type,
|
||
table_id: row?.table_id, // 注意命名要与后端保持一致
|
||
clue_id: row?.clue_id ?? null, // 如果没有clue_id，设为null
|
||
}));
|
||
|
||
let flag = true;
|
||
|
||
try{
|
||
// 循环发送删除请求
|
||
for(let i = 0; i < deleteItems.length; i++){
|
||
if(deleteItems[i].type == 0){ // 如果是删除表
|
||
let response = await this.$axios.post('http://localhost:8000/deleteTable',{table_id: deleteItems[i].table_id})
|
||
if(response.data.message == '删除成功'){
|
||
// 弹窗提示
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功'
|
||
});
|
||
}else{
|
||
this.$message({
|
||
type: 'error',
|
||
message: '删除失败'
|
||
});
|
||
return;
|
||
}
|
||
}else if(deleteItems[i].type == 1){ // 如果是删除线索
|
||
let response = await this.$axios.post('http://localhost:8000/deleteSelected/',{table_id:deleteItems[i].table_id, clue_id:deleteItems[i].clue_id})
|
||
if(response.data.message == '删除成功'){
|
||
// 弹窗提示
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功'
|
||
});
|
||
}else{
|
||
this.$message({
|
||
type: 'error',
|
||
message: '删除失败'
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
}catch (error){
|
||
flag = false;
|
||
this.$handleNetError(error);
|
||
}
|
||
|
||
if(flag){
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功，即将刷新界面'
|
||
});
|
||
// 撤销成功后，更新表格数据
|
||
location.reload();
|
||
}
|
||
|
||
},
|
||
refreshData(){
|
||
location.reload();
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getDelete(); // 在组件挂载后调用获取数据的方法
|
||
}
|
||
//刷新
|
||
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.withdrawSelectionCol{
|
||
width: 50px;
|
||
}
|
||
.headerText{
|
||
font-size: 24px;
|
||
text-align: center;
|
||
}
|
||
.toolbar{
|
||
height:6%;
|
||
padding:2%;
|
||
display:flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
.btnDelete, .btnWithdraw{
|
||
text-align: start;
|
||
padding: 0.6%;
|
||
margin: 0;
|
||
}
|
||
.deleteToolTip, .withdrawToolTip .el-tooltip__content{
|
||
color: red !important;
|
||
}
|
||
.withdrawHeader{
|
||
height:6%;
|
||
padding :0;
|
||
width: 100%;
|
||
display:flex;
|
||
justify-content: space-between;
|
||
background-color: white;
|
||
align-items: center;
|
||
}
|
||
.withdrawHeader{
|
||
height:6%;
|
||
padding :0;
|
||
width: 100%;
|
||
display:flex;
|
||
justify-content: space-between;
|
||
background-color: white;
|
||
align-items: center;
|
||
}
|
||
</style>
|