在 <el-button>
组件的 v-if
条件中检查行数据的状态是否为暂存状态(状态值为5)。只有当状态为暂存状态时,删除按钮才会显示出来。
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100">
<template slot-scope="scope">
<!-- <el-button v-if="-->
<!-- scope.row.status &&-->
<!-- ![10, 60].includes(scope.row.status) &&-->
<!-- statusMap[scope.row.status]-->
<!-- " size="mini" type="text" icon="el-icon-tickets"-->
<!-- @click.stop="toDetail(scope.row.approveId, scope.row.status)">{{ statusMap[scope.row.status] }}-->
<!-- </el-button>-->
<el-button size="mini" type="text" icon="el-icon-tickets"
@click.stop="updateDocFile(scope.row.approveId)">更新文书
</el-button>
<el-button
v-if="scope.row.status === 5"
size="mini"
type="text"
icon="el-icon-delete"
@click.stop="handleDelete(scope.row.approveId)"
v-hasPermi="['enforceLaw:approve:remove']"
>
删除
</el-button>
</template>
</el-table-column>
在 handleDelete
方法中添加了一个条件判断,如果行数据的状态不是暂存状态(状态值为5),则不执行删除操作,并通过 alert
给出提示。如果行数据的状态是暂存状态,则执行实际的删除操作。
添加了 scope.row
作为参数,并相应地修改了 handleDelete
方法中的代码。在模板中,我使用了 @click="handleDelete(scope.row)"
将 scope.row
传递给 handleDelete
方法。
根据提供的代码,当行数据的状态不是暂存状态时,将显示警告信息并不执行删除操作。否则,将弹出确认对话框,并在确认删除后执行删除操作,并在成功删除后刷新列表并显示成功消息。
handleDelete(approveId) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认案源编号为"' + approveId + '"的数据项?').then(function () {
return delApprove(approveId);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
});
},
创建了一个名为 statusMap
的计算属性,并将字典数据映射到该属性中。使用 scope.row.status
获取行数据的状态值,并通过 statusMap
对象获取对应的字典显示文本。
data() {
return {
fileName: "",
printUrl: "",
showPrintConfirm: false,
statusMap: {
5:"暂存",
10: "无需审批",
20: "待初审",
30: "初审拒绝",
40: "待终审",
50: "终审拒绝",
60: "审批完成",
},
approvalTitle: "申请审批",
detailTitle: "审批详情",
title: "",
detailVisible: false,
approvalVisible: false,
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
caseName: "",
},
// 总条数
total: 0,
listData: [],
// 表单参数
form: {},
// 表单校验
rules: {},
item: {},
optionItem: {},
};
},