<template>
|
<div class="app-container">
|
<!-- 搜索区域 -->
|
<el-form :inline="true" :model="queryParams" class="search-form">
|
<el-form-item label="项目名称">
|
<el-input
|
v-model="queryParams.projectName"
|
placeholder="请输入"
|
clearable
|
size="small"
|
/>
|
</el-form-item>
|
<el-form-item label="镇街">
|
<el-input
|
v-model="queryParams.town"
|
placeholder="请输入"
|
clearable
|
size="small"
|
/>
|
</el-form-item>
|
<el-form-item label="产主姓名">
|
<el-input
|
v-model="queryParams.owner"
|
placeholder="请输入"
|
clearable
|
size="small"
|
/>
|
</el-form-item>
|
<el-form-item label="身份证号">
|
<el-input
|
v-model="queryParams.idCard"
|
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>
|
|
<!-- 操作按钮区域 -->
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button type="primary" size="small" @click="handleAdd"
|
>新增申请批次</el-button
|
>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button type="success" size="small" @click="handleImport"
|
>下载导入模板</el-button
|
>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button type="warning" size="small" @click="handleBatchImport"
|
>批量导入</el-button
|
>
|
</el-col>
|
</el-row>
|
|
<!-- 表格区域 -->
|
<el-table
|
v-loading="loading"
|
:data="tableData"
|
border
|
style="width: 100%"
|
:header-cell-style="{ 'text-align': 'center' }"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
width="50"
|
align="center"
|
fixed="left"
|
/>
|
<el-table-column
|
prop="projectName"
|
label="项目名称"
|
align="center"
|
width="150"
|
/>
|
<el-table-column
|
prop="projectCompleteTime"
|
label="项目启动时间"
|
align="center"
|
width="110"
|
/>
|
<el-table-column prop="town" label="镇街" align="center" width="80" />
|
<el-table-column
|
prop="village"
|
label="村社区"
|
align="center"
|
width="80"
|
/>
|
<el-table-column prop="group" label="组" align="center" width="60" />
|
<el-table-column
|
prop="owner"
|
label="户主姓名"
|
align="center"
|
width="80"
|
/>
|
<el-table-column
|
prop="ownerIdCard"
|
label="户主身份证号"
|
align="center"
|
width="180"
|
/><el-table-column
|
prop="relationship"
|
label="家庭成员名字"
|
align="center"
|
width="160"
|
/>
|
<el-table-column
|
prop="relationship"
|
label="关系"
|
align="center"
|
width="60"
|
/>
|
<el-table-column
|
prop="personType"
|
label="人员性质"
|
align="center"
|
width="80"
|
/>
|
<el-table-column
|
prop="idCard"
|
label="身份证号"
|
align="center"
|
width="180"
|
/>
|
|
<el-table-column prop="age" label="年龄" align="center" width="60" />
|
<el-table-column prop="remark1" label="性别" align="center" width="80" />
|
<el-table-column
|
prop="birthDate"
|
label="出生年月日"
|
align="center"
|
width="100"
|
/>
|
<el-table-column
|
prop="resettlementType"
|
label="安置方式"
|
align="center"
|
width="100"
|
/>
|
<el-table-column
|
prop="firstDeliveryDate"
|
label="原始拆迁时领取过渡费时间"
|
align="center"
|
width="100"
|
/>
|
<el-table-column
|
prop="secondDeliveryDate"
|
label="上次过渡费发放时间(起)"
|
align="center"
|
width="100"
|
/>
|
<el-table-column
|
prop="thirdDeliveryDate"
|
label="上次过渡费发放时间(止)"
|
align="center"
|
width="100"
|
/>
|
<el-table-column
|
prop="thirdDeliveryRemark"
|
label="安置状态"
|
align="center"
|
width="100"
|
/>
|
<el-table-column
|
prop="resettlementArea"
|
label="剩余未安置面积(㎡)"
|
align="center"
|
width="90"
|
/>
|
<el-table-column
|
prop="previousTotalAmount"
|
label="剩余未安置商铺面积(㎡)"
|
align="center"
|
width="110"
|
/>
|
|
<el-table-column
|
prop="contact"
|
label="联系电话"
|
align="center"
|
width="120"
|
/>
|
<el-table-column prop="remark" label="备注" align="center" width="80" />
|
<el-table-column prop="status" label="安置状态" align="center" width="80" fixed="right">
|
<template slot-scope="scope">
|
<el-tag
|
:type="
|
scope.row.status === '待审核'
|
? 'warning'
|
: scope.row.status === '已通过'
|
? 'success'
|
: 'danger'
|
"
|
>
|
{{ scope.row.status }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="200" fixed="right">
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="text" @click="handleView(scope.row)"
|
>查看</el-button
|
>
|
<el-button size="mini" type="text" @click="handleDetail(scope.row)"
|
>详情</el-button
|
>
|
<el-button
|
size="mini"
|
type="text"
|
@click="handleAudit(scope.row)"
|
v-if="scope.row.status === '待审核'"
|
>审核</el-button
|
>
|
<el-button size="mini" type="text" @click="handleDelete(scope.row)"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页区域 -->
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getList"
|
/>
|
|
<!-- 审核对话框 - 替换原有的审核对话框 -->
|
<approval-dialog
|
ref="approvalDialog"
|
:visible.sync="approvalDialogVisible"
|
:type="approvalType"
|
:row-data="currentRow"
|
@audit-submit="handleApprovalSubmit"
|
/>
|
|
<!-- 上传组件 -->
|
<upload-dialog
|
ref="uploadDialog"
|
:visible.sync="uploadDialogVisible"
|
:type="uploadType"
|
@success="handleUploadSuccess"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import Pagination from "@/components/Pagination";
|
import UploadDialog from "./components/UploadDialog";
|
import ApprovalDialog from "./components/ApprovalDialog";
|
|
export default {
|
name: "ApplicationBatchList",
|
components: {
|
Pagination,
|
UploadDialog,
|
ApprovalDialog,
|
},
|
data() {
|
return {
|
// 遮罩层
|
loading: false,
|
// 总条数
|
total: 4,
|
// 状态数据字典
|
statusOptions: [
|
{ value: "待审核", label: "待审核" },
|
{ value: "已通过", label: "已通过" },
|
{ value: "已驳回", label: "已驳回" },
|
],
|
// 审核相关
|
approvalDialogVisible: false,
|
approvalType: "audit", // 'audit' 或 'detail'
|
currentRow: {},
|
// 上传相关
|
uploadDialogVisible: false,
|
uploadType: "add", // 'add' 或 'batch'
|
// 表格数据
|
tableData: [
|
{
|
projectName: "白鹤镇和平街道改造",
|
projectCompleteTime: "2024-07-27",
|
town: "白鹤镇",
|
village: "白鹤村",
|
group: "3组",
|
owner: "陈向荣",
|
ownerIdCard: "123456789012345678",
|
relationship: "户主",
|
personType: "集体",
|
idCard: "123456789012345678",
|
name: "陈向荣",
|
age: "25岁",
|
remark1: "事实",
|
birthDate: "2024-01-05",
|
resettlementType: "货币补偿",
|
firstDeliveryDate: "2024-07-16",
|
secondDeliveryDate: "2025-07-23",
|
thirdDeliveryDate: "2025-11-21",
|
thirdDeliveryRemark: "未完善",
|
resettlementArea: "6",
|
previousTotalAmount: "4",
|
previousPaid: "19612348970",
|
previousUnpaid: "",
|
accountNumber: "19612348970",
|
contact: "19612348970",
|
remark: "",
|
status: "待审核",
|
},
|
{
|
projectName: "白鹤镇和平街道改造",
|
projectCompleteTime: "2024-08-10",
|
town: "白鹤镇",
|
village: "白鹤村",
|
group: "3组",
|
owner: "席娟",
|
ownerIdCard: "123456789012345678",
|
relationship: "妻",
|
personType: "集体",
|
idCard: "330105197803120987",
|
name: "李女士",
|
age: "25岁",
|
remark1: "事实",
|
birthDate: "2024-01-22",
|
resettlementType: "货币补偿",
|
firstDeliveryDate: "2025-09-22",
|
secondDeliveryDate: "2025-07-19",
|
thirdDeliveryDate: "2025-04-22",
|
thirdDeliveryRemark: "未完善",
|
resettlementArea: "90",
|
previousTotalAmount: "45",
|
previousPaid: "19323312231",
|
previousUnpaid: "",
|
accountNumber: "19323312231",
|
contact: "19323312231",
|
remark: "",
|
status: "待审核",
|
},
|
{
|
projectName: "白鹤镇和平街道改造",
|
projectCompleteTime: "2024-06-20",
|
town: "白鹤镇",
|
village: "白鹤村",
|
group: "3组",
|
owner: "梁小小",
|
ownerIdCard: "123456789012345678",
|
relationship: "子",
|
personType: "北城集",
|
idCard: "123456789012345678",
|
name: "梁家辉",
|
age: "25岁",
|
remark1: "事实",
|
birthDate: "2025-08-08",
|
resettlementType: "货币补偿",
|
firstDeliveryDate: "2024-07-04",
|
secondDeliveryDate: "2024-12-20",
|
thirdDeliveryDate: "2025-12-03",
|
thirdDeliveryRemark: "未完善",
|
resettlementArea: "65",
|
previousTotalAmount: "90",
|
previousPaid: "19876782134",
|
previousUnpaid: "",
|
accountNumber: "19876782134",
|
contact: "19876782134",
|
remark: "",
|
status: "已驳回",
|
},
|
{
|
projectName: "白鹤镇和平街道改造",
|
projectCompleteTime: "2024-07-19",
|
town: "白鹤镇",
|
village: "白鹤村",
|
group: "3组",
|
owner: "王开莱",
|
ownerIdCard: "123456789012345678",
|
relationship: "兄",
|
personType: "北城集",
|
idCard: "123456789012345678",
|
name: "王中山",
|
age: "25岁",
|
remark1: "事实",
|
birthDate: "2024-06-09",
|
resettlementType: "货币补偿",
|
firstDeliveryDate: "2025-01-11",
|
secondDeliveryDate: "2024-09-21",
|
thirdDeliveryDate: "2024-12-12",
|
thirdDeliveryRemark: "未完善",
|
resettlementArea: "34",
|
previousTotalAmount: "62",
|
previousPaid: "19113212388",
|
previousUnpaid: "",
|
accountNumber: "19113212388",
|
contact: "19113212388",
|
remark: "",
|
status: "已通过",
|
},
|
],
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
projectName: undefined,
|
town: undefined,
|
owner: undefined,
|
idCard: undefined,
|
status: undefined,
|
},
|
};
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
/** 查询列表 */
|
getList() {
|
this.loading = true;
|
// 这里添加实际的API调用
|
setTimeout(() => {
|
this.loading = false;
|
}, 500);
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
projectName: undefined,
|
town: undefined,
|
owner: undefined,
|
idCard: undefined,
|
status: undefined,
|
};
|
this.handleQuery();
|
},
|
/** 新增按钮操作 */
|
handleAdd() {
|
this.uploadType = "add";
|
this.uploadDialogVisible = true;
|
},
|
/** 导入模板下载操作 */
|
handleImport() {
|
// 实现下载逻辑
|
},
|
/** 批量导入按钮操作 */
|
handleBatchImport() {
|
this.uploadType = "batch";
|
this.uploadDialogVisible = true;
|
},
|
/** 查看按钮操作 */
|
handleView(row) {
|
this.$router.push({
|
path: "/applicationBatchList/detail",
|
query: {
|
batchNo: row.batchNo,
|
status: row.status,
|
},
|
});
|
},
|
/** 详情按钮操作 */
|
handleDetail(row) {
|
this.currentRow = row;
|
this.approvalType = "detail";
|
this.approvalDialogVisible = true;
|
},
|
/** 审核按钮操作 */
|
handleAudit(row) {
|
this.currentRow = row;
|
this.approvalType = "audit";
|
this.approvalDialogVisible = true;
|
},
|
/** 审核提交处理 */
|
handleApprovalSubmit(data) {
|
// 处理审核提交
|
const { result, comment } = data;
|
this.$message({
|
type: "success",
|
message: result === "pass" ? "审核通过成功！" : "审核驳回成功！",
|
});
|
// 刷新列表
|
this.getList();
|
},
|
/** 删除按钮操作 */
|
handleDelete(row) {
|
this.$confirm("是否确认删除该批次数据?", "警告", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
// 这里添加删除逻辑
|
this.$message({
|
type: "success",
|
message: "删除成功！",
|
});
|
this.getList();
|
})
|
.catch(() => {});
|
},
|
/** 上传成功回调 */
|
handleUploadSuccess() {
|
this.uploadDialogVisible = false;
|
this.getList();
|
this.$message({
|
type: "success",
|
message: this.uploadType === "add" ? "新增成功！" : "批量导入成功！",
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
}
|
.search-form {
|
margin-bottom: 20px;
|
background-color: #fff;
|
padding: 20px;
|
border-radius: 4px;
|
}
|
.mb8 {
|
margin-bottom: 8px;
|
}
|
.el-button + .el-button {
|
margin-left: 10px;
|
}
|
</style>
|
