<template>
|
<div class="app-container">
|
<!-- 搜索区域 -->
|
<div class="search-area">
|
<el-form :inline="true" :model="queryParams" class="search-form">
|
<el-form-item label="批次号">
|
<el-input
|
v-model="queryParams.batchNumber"
|
placeholder="请输入"
|
clearable
|
size="small"
|
/>
|
</el-form-item>
|
<el-form-item label="状态">
|
<el-select
|
v-model="queryParams.status"
|
placeholder="请选择"
|
clearable
|
size="small"
|
>
|
<el-option
|
v-for="dict in statusOptions"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
icon="el-icon-search"
|
size="small"
|
@click="handleQuery"
|
>查询</el-button
|
>
|
<el-button icon="el-icon-refresh" size="small" @click="resetQuery"
|
>重置</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<!-- 操作按钮区域 -->
|
<div class="action-buttons">
|
<el-button type="primary" @click="handleAdd">新增申请批次</el-button>
|
<el-button type="success" @click="handleImport">下载导入模板</el-button>
|
</div>
|
|
<!-- 表格区域 -->
|
<el-table v-loading="loading" :data="tableData" border style="width: 100%">
|
<el-table-column type="index" label="序号" width="60" align="center" />
|
<el-table-column
|
prop="batchNumber"
|
label="批次号"
|
min-width="120"
|
align="center"
|
/>
|
<el-table-column
|
prop="householdsNum"
|
label="申请总户数"
|
min-width="100"
|
align="center"
|
/>
|
<el-table-column
|
prop="personNum"
|
label="申请总人数"
|
min-width="100"
|
align="center"
|
/>
|
<el-table-column
|
prop="totalAmount"
|
label="补偿资金总额（万元）"
|
min-width="150"
|
align="center"
|
/>
|
<el-table-column
|
prop="downPaymentAmount"
|
label="25%暂付款（万元）"
|
min-width="150"
|
align="center"
|
/>
|
<el-table-column
|
prop="quarterPayAmount"
|
label="每季度发放支付情况（万元）"
|
min-width="180"
|
align="center"
|
/>
|
<el-table-column
|
prop="subsidyAmount"
|
label="过渡补助（万元）"
|
min-width="150"
|
align="center"
|
/>
|
|
<el-table-column label="状态" width="100" align="center">
|
<template slot-scope="scope">
|
<el-tag
|
:type="
|
scope.row.status === 0
|
? 'warning'
|
: scope.row.status === 1
|
? 'success'
|
: 'info'
|
"
|
>{{ statusMap[scope.row.status] }}</el-tag
|
>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="操作" width="180" align="center" fixed="right">
|
<template slot-scope="scope">
|
<!-- 已审核状态 -->
|
<template>
|
<el-button
|
size="mini"
|
type="text"
|
v-if="scope.row.status === 0"
|
@click="handleView(scope.row, 'audit')"
|
>审核</el-button
|
>
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleView(scope.row, 'view')"
|
>查看</el-button
|
>
|
<el-button
|
size="mini"
|
type="text"
|
v-if="scope.row.status != 0"
|
@click="handleView(scope.row, 'detail')"
|
>详情</el-button
|
>
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleDelete(scope.row)"
|
v-if="scope.row.status != 0"
|
>删除</el-button
|
>
|
</template>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页区域 -->
|
<div class="pagination-container">
|
<el-pagination
|
background
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="queryParams.pageNum"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="queryParams.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
>
|
</el-pagination>
|
</div>
|
|
<!-- 审核对话框 -->
|
<approval-dialog
|
ref="approvalDialog"
|
:visible.sync="approvalDialogVisible"
|
:type="approvalType"
|
:id="currentRow.id"
|
@refresh="getList"
|
/>
|
|
<!-- 上传组件 -->
|
<upload-dialog
|
ref="uploadDialog"
|
:visible.sync="uploadDialogVisible"
|
@success="handleUploadSuccess"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import Pagination from "@/components/Pagination";
|
import UploadDialog from "./components/UploadDialog";
|
import ApprovalDialog from "./components/ApprovalDialog";
|
import { geTabletList, deleteList } from "@/api/application-batch";
|
import { downLoad } from "@/utils";
|
|
export default {
|
name: "ApplicationBatchList",
|
components: {
|
Pagination,
|
UploadDialog,
|
ApprovalDialog,
|
},
|
data() {
|
return {
|
// 遮罩层
|
loading: false,
|
// 总条数
|
total: 4,
|
// 状态数据字典
|
statusOptions: [
|
{ value: 0, label: "待审核" },
|
{ value: 1, label: "已通过" },
|
{ value: 2, label: "已驳回" },
|
],
|
// 状态映射
|
statusMap: {
|
0: "待审核",
|
1: "已通过",
|
2: "已驳回",
|
},
|
// 审核相关
|
approvalDialogVisible: false,
|
approvalType: "audit", // 'audit' 或 'detail'
|
currentRow: {},
|
// 上传相关
|
uploadDialogVisible: false,
|
// 表格数据
|
tableData: [],
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
projectName: undefined,
|
status: undefined,
|
},
|
};
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
/** 查询列表 */
|
getList() {
|
this.loading = true;
|
// 这里添加实际的API调用
|
setTimeout(() => {
|
this.loading = false;
|
geTabletList({ ...this.queryParams }).then((res) => {
|
this.tableData = res.data.records;
|
this.total = res.data.total;
|
});
|
}, 500);
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
projectName: undefined,
|
status: undefined,
|
town: undefined,
|
};
|
this.handleQuery();
|
},
|
handleSizeChange(size) {
|
this.queryParams.pageSize = size;
|
this.getList();
|
},
|
handleCurrentChange(page) {
|
this.queryParams.pageNum = page;
|
this.getList();
|
},
|
/** 新增按钮操作 */
|
handleAdd() {
|
this.uploadDialogVisible = true;
|
},
|
/** 导入模板下载操作 */
|
handleImport() {
|
// 实现下载逻辑
|
downLoad("/placement-apply/download-template", "安置申请表.xlsx");
|
},
|
/** 统一的查看/详情按钮操作 */
|
handleView(row, type) {
|
this.currentRow = row;
|
if (type === "audit" || type === "detail") {
|
this.approvalType = type;
|
this.approvalDialogVisible = true;
|
} else if (type === "view") {
|
this.$router.push({
|
path: "/applicationBatchList/detail",
|
query: {
|
id: row.id,
|
},
|
});
|
}
|
},
|
/** 删除按钮操作 */
|
handleDelete(row) {
|
this.$confirm("是否确认删除该批次数据?", "警告", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
// 这里添加删除逻辑
|
deleteList({ id: row.id }).then((res) => {
|
if (res.code == 200) {
|
this.$message({
|
type: "success",
|
message: "删除成功！",
|
});
|
this.getList();
|
}
|
});
|
})
|
.catch(() => {});
|
},
|
/** 上传成功回调 */
|
handleUploadSuccess() {
|
this.uploadDialogVisible = false;
|
this.getList();
|
this.$message({
|
type: "success",
|
message: "新增成功！",
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.app-container {
|
padding: 20px;
|
background-color: #fff;
|
|
.search-area {
|
background-color: #fff;
|
padding: 20px;
|
margin-bottom: 20px;
|
border-radius: 4px;
|
|
.search-form {
|
display: flex;
|
align-items: center;
|
|
.el-form-item {
|
margin-bottom: 0;
|
margin-right: 20px;
|
}
|
}
|
}
|
|
.action-buttons {
|
margin-bottom: 20px;
|
|
.el-button {
|
margin-right: 10px;
|
}
|
}
|
|
.el-table {
|
margin-bottom: 20px;
|
|
.el-button--text {
|
padding: 0 8px;
|
|
&:not(:last-child) {
|
border-right: 1px solid #dcdfe6;
|
}
|
}
|
}
|
|
.pagination-container {
|
text-align: center;
|
margin-top: 20px;
|
}
|
|
.el-tag {
|
border-radius: 2px;
|
}
|
}
|
</style>
|
