Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/chongzhouRes...

pyt

2025-03-20 37de82e230064801aa1e574b2c7ae9c96b3ddd17

Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/chongzhouResettle

 src/views/applicationBatchList/detail.vue

@@ -5,7 +5,13 @@
      <div class="header">
        <div class="batch-title">批次号：{{ batchNo }}</div>
        <div class="back-btn">
          <el-button type="primary" size="small" icon="el-icon-back" @click="goBack">返回</el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-back"
            @click="goBack"
            >返回</el-button
          >
        </div>
      </div>
      <div class="info-cards">
@@ -27,148 +33,491 @@
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="镇街">
        <el-input v-model="queryParams.town" placeholder="请输入" clearable size="small" />
        <el-input
          v-model="queryParams.town"
          placeholder="请输入"
          clearable
          size="small"
        />
      </el-form-item>
      <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.village" placeholder="请输入" clearable size="small" />
        <el-input
          v-model="queryParams.village"
          placeholder="请输入"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="户主姓名/身份证号">
        <el-input v-model="queryParams.owner" placeholder="请输入" clearable size="small" />
        <el-input
          v-model="queryParams.owner"
          placeholder="请输入"
          clearable
          size="small"
        />
      </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-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" v-if="status === '待审核'">
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="small"
          @click="handleAddHousehold"
        >新增安置户信息</el-button>
        <el-button type="primary" size="small" @click="handleAddHousehold"
          >新增安置户信息</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          size="small"
          @click="handleDownloadTemplate"
        >下载导入模板</el-button>
        <el-button type="success" size="small" @click="handleDownloadTemplate"
          >下载导入模板</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          size="small"
          @click="handleBatchImport"
        >批量导入</el-button>
        <el-button type="warning" size="small" @click="handleBatchImport"
          >批量导入</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          size="small"
          @click="handleExportIssueData"
        >问题数据导出</el-button>
        <el-button type="danger" size="small" @click="handleExportIssueData"
          >问题数据导出</el-button
        >
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mb8" v-else>
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="small"
          @click="handleExportAll"
        >全部导出为Excel</el-button>
        <el-button type="primary" size="small" @click="handleExportAll"
          >全部导出为Excel</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          size="small"
          @click="handleExportIssueData"
        >问题数据导出</el-button>
        <el-button type="danger" size="small" @click="handleExportIssueData"
          >问题数据导出</el-button
        >
      </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center"
      />
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="town" label="镇（街道）" align="center" width="80">
        <template slot-scope="scope">
          {{ scope.row.town }}
          <el-tooltip
            v-if="scope.row.errors && scope.row.errors.town"
            placement="top"
          >
            <div slot="content">{{ scope.row.errors.town }}</div>
            <i
              class="el-icon-warning"
              style="color: #e6a23c; margin-left: 5px"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="projectName"
        label="城市项目名称"
        label="拆迁项目名称"
        align="center"
        width="180"
      />
        width="150"
      >
        <template slot-scope="scope">
          {{ scope.row.projectName }}
          <el-tooltip
            v-if="scope.row.errors && scope.row.errors.projectName"
            placement="top"
          >
            <div slot="content">{{ scope.row.errors.projectName }}</div>
            <i
              class="el-icon-warning"
              style="color: #e6a23c; margin-left: 5px"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="village"
        label="所在村（社区）"
        align="center"
      />
      <el-table-column
        prop="time"
        label="拆迁时间"
        align="center"
      />
      <el-table-column
        prop="owner"
        label="产主姓名"
        align="center"
      />
        width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.village }}
          <el-tooltip
            v-if="scope.row.errors && scope.row.errors.village"
            placement="top"
          >
            <div slot="content">{{ scope.row.errors.village }}</div>
            <i
              class="el-icon-warning"
              style="color: #e6a23c; margin-left: 5px"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="拆迁时间" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.time }}
          <el-tooltip
            v-if="scope.row.errors && scope.row.errors.time"
            placement="top"
          >
            <div slot="content">{{ scope.row.errors.time }}</div>
            <i
              class="el-icon-warning"
              style="color: #e6a23c; margin-left: 5px"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="owner" label="产主姓名" align="center" width="80">
        <template slot-scope="scope">
          {{ scope.row.owner }}
          <el-tooltip
            v-if="scope.row.errors && scope.row.errors.owner"
            placement="top"
          >
            <div slot="content">{{ scope.row.errors.owner }}</div>
            <i
              class="el-icon-warning"
              style="color: #e6a23c; margin-left: 5px"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="idCard"
        label="身份证号"
        align="center"
        width="180"
      />
      >
        <template slot-scope="scope">
          {{ scope.row.idCard }}
          <el-tooltip
            v-if="scope.row.errors && scope.row.errors.idCard"
            placement="top"
          >
            <div slot="content">{{ scope.row.errors.idCard }}</div>
            <i
              class="el-icon-warning"
              style="color: #e6a23c; margin-left: 5px"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="contact"
        label="联系电话"
        align="center"
      />
        width="120"
      >
        <template slot-scope="scope">
          {{ scope.row.contact }}
          <el-tooltip
            v-if="scope.row.errors && scope.row.errors.contact"
            placement="top"
          >
            <div slot="content">{{ scope.row.errors.contact }}</div>
            <i
              class="el-icon-warning"
              style="color: #e6a23c; margin-left: 5px"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="家庭安置人数（人）" align="center">
        <el-table-column
          prop="resettlementPeople"
          label="基础安置指标内成员"
          label="集体经济组织成员"
          align="center"
          width="120"
        />
        >
          <template slot-scope="scope">
            {{ scope.row.resettlementPeople }}
            <el-tooltip
              v-if="scope.row.errors && scope.row.errors.resettlementPeople"
              placement="top"
            >
              <div slot="content">
                {{ scope.row.errors.resettlementPeople }}
              </div>
              <i
                class="el-icon-warning"
                style="color: #e6a23c; margin-left: 5px"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="additionalPeople"
          label="非基础指标内成员"
          label="非集体经济组织成员"
          align="center"
          width="120"
        />
        >
          <template slot-scope="scope">
            {{ scope.row.additionalPeople }}
            <el-tooltip
              v-if="scope.row.errors && scope.row.errors.additionalPeople"
              placement="top"
            >
              <div slot="content">
                {{ scope.row.errors.additionalPeople }}
              </div>
              <i
                class="el-icon-warning"
                style="color: #e6a23c; margin-left: 5px"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="totalPeople"
          label="合计"
          align="center"
          width="80"
        />
          width="60"
        >
          <template slot-scope="scope">
            {{ scope.row.totalPeople }}
            <el-tooltip
              v-if="scope.row.errors && scope.row.errors.totalPeople"
              placement="top"
            >
              <div slot="content">{{ scope.row.errors.totalPeople }}</div>
              <i
                class="el-icon-warning"
                style="color: #e6a23c; margin-left: 5px"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="houseName"
        label="待安置房屋房名"
        label="待安置家庭成员姓名"
        align="center"
      />
        width="120"
      >
        <template slot-scope="scope">
          {{ scope.row.houseName }}
          <el-tooltip
            v-if="scope.row.errors && scope.row.errors.houseName"
            placement="top"
          >
            <div slot="content">{{ scope.row.errors.houseName }}</div>
            <i
              class="el-icon-warning"
              style="color: #e6a23c; margin-left: 5px"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="area"
        label="面积（㎡）"
        label="待安置人员应安置面积合计（㎡）"
        align="center"
      />
        width="120"
      >
        <template slot-scope="scope">
          {{ scope.row.area }}
          <el-tooltip
            v-if="scope.row.errors && scope.row.errors.area"
            placement="top"
          >
            <div slot="content">{{ scope.row.errors.area }}</div>
            <i
              class="el-icon-warning"
              style="color: #e6a23c; margin-left: 5px"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="补偿金额（万元）" align="center">
        <el-table-column
          prop="firstPayment"
          label="新建商品住房、商业用房、停车位"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            {{ scope.row.firstPayment }}
            <el-tooltip
              v-if="scope.row.errors && scope.row.errors.firstPayment"
              placement="top"
            >
              <div slot="content">{{ scope.row.errors.firstPayment }}</div>
              <i
                class="el-icon-warning"
                style="color: #e6a23c; margin-left: 5px"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="secondPayment"
          label="二手住房"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            {{ scope.row.secondPayment }}
            <el-tooltip
              v-if="scope.row.errors && scope.row.errors.secondPayment"
              placement="top"
            >
              <div slot="content">{{ scope.row.errors.secondPayment }}</div>
              <i
                class="el-icon-warning"
                style="color: #e6a23c; margin-left: 5px"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="totalPayment"
          label="合计"
          align="center"
          width="60"
        >
          <template slot-scope="scope">
            {{ scope.row.totalPayment }}
            <el-tooltip
              v-if="scope.row.errors && scope.row.errors.totalPayment"
              placement="top"
            >
              <div slot="content">{{ scope.row.errors.totalPayment }}</div>
              <i
                class="el-icon-warning"
                style="color: #e6a23c; margin-left: 5px"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="monthlyPayment"
        label="25%首付款（万元）"
        align="center"
        width="130"
      >
        <template slot-scope="scope">
          {{ scope.row.monthlyPayment }}
          <el-tooltip
            v-if="scope.row.errors && scope.row.errors.monthlyPayment"
            placement="top"
          >
            <div slot="content">{{ scope.row.errors.monthlyPayment }}</div>
            <i
              class="el-icon-warning"
              style="color: #e6a23c; margin-left: 5px"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="remainingPayment"
        label="每季度需支付款项（万元）"
        align="center"
        width="120"
      >
        <template slot-scope="scope">
          {{ scope.row.remainingPayment }}
          <el-tooltip
            v-if="scope.row.errors && scope.row.errors.remainingPayment"
            placement="top"
          >
            <div slot="content">
              {{ scope.row.errors.remainingPayment }}
            </div>
            <i
              class="el-icon-warning"
              style="color: #e6a23c; margin-left: 5px"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="totalPaid"
        label="过渡补贴（万元）"
        align="center"
        width="60"
      >
        <template slot-scope="scope">
          {{ scope.row.totalPaid }}
          <el-tooltip
            v-if="scope.row.errors && scope.row.errors.totalPaid"
            placement="top"
          >
            <div slot="content">{{ scope.row.errors.totalPaid }}</div>
            <i
              class="el-icon-warning"
              style="color: #e6a23c; margin-left: 5px"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center" width="60">
        <template slot-scope="scope">
          {{ scope.row.remark }}
          <el-tooltip
            v-if="scope.row.errors && scope.row.errors.remark"
            placement="top"
          >
            <div slot="content">{{ scope.row.errors.remark }}</div>
            <i
              class="el-icon-warning"
              style="color: #e6a23c; margin-left: 5px"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="difference"
        label="购房差异情况"
        align="center"
        width="60"
      >
        <template slot-scope="scope">
          {{ scope.row.difference }}
          <el-tooltip
            v-if="scope.row.errors && scope.row.errors.difference"
            placement="top"
          >
            <div slot="content">{{ scope.row.errors.difference }}</div>
            <i
              class="el-icon-warning"
              style="color: #e6a23c; margin-left: 5px"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="150"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
@@ -191,7 +540,7 @@
        </template>
      </el-table-column>
    </el-table>

    
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
@@ -210,13 +559,13 @@

<script>
export default {
  name: 'ApplicationBatchDetail',
  name: "ApplicationBatchDetail",
  data() {
    return {
      // 批次号
      batchNo: '',
      batchNo: "",
      // 批次状态
      status: '',
      status: "",
      // 加载状态
      loading: false,
      // 总条数
@@ -224,74 +573,77 @@
      // 表格数据
      tableData: [
        {
          projectName: '李家窑水库工程征地拆迁',
          village: '松花社区',
          time: '',
          owner: '陈向荣',
          idCard: '220102198512345678',
          contact: '',
          projectName: "李家窑水库工程征地拆迁",
          village: "松花社区",
          time: "",
          owner: "陈向荣",
          idCard: "220102198512345678",
          contact: "",
          resettlementPeople: 1,
          additionalPeople: 2,
          totalPeople: 3,
          houseName: '陈向荣、李辉',
          area: '160'
          houseName: "陈向荣、李辉",
          area: "160",
        },
        {
          projectName: '李家窑水库工程征地拆迁',
          village: '松花社区',
          time: '',
          owner: '席娟',
          idCard: '330105197803120987',
          contact: '',
          projectName: "李家窑水库工程征地拆迁",
          village: "松花社区",
          time: "",
          owner: "席娟",
          idCard: "330105197803120987",
          contact: "",
          resettlementPeople: 1,
          additionalPeople: 1,
          totalPeople: 2,
          houseName: '周吉彬',
          area: '215'
          houseName: "周吉彬",
          area: "215",
        },
        {
          projectName: '成都绿道二环线生态区公园工程（含川师）征地拆迁及前期公示',
          village: '清泉村',
          time: '',
          owner: '周忠心',
          idCard: '440203199000999876',
          contact: '',
          projectName:
            "成都绿道二环线生态区公园工程（含川师）征地拆迁及前期公示",
          village: "清泉村",
          time: "",
          owner: "周忠心",
          idCard: "440203199000999876",
          contact: "",
          resettlementPeople: 1,
          additionalPeople: 1,
          totalPeople: 2,
          houseName: '周忠心、杨春云',
          area: '103'
          houseName: "周忠心、杨春云",
          area: "103",
        },
        {
          projectName: '成都绿道二环线生态区公园工程（含川师）征地拆迁及前期公示',
          village: '清泉村',
          time: '',
          owner: '李辉',
          idCard: '440203199000999876',
          contact: '',
          projectName:
            "成都绿道二环线生态区公园工程（含川师）征地拆迁及前期公示",
          village: "清泉村",
          time: "",
          owner: "李辉",
          idCard: "440203199000999876",
          contact: "",
          resettlementPeople: 2,
          additionalPeople: 1,
          totalPeople: 3,
          houseName: '王强',
          area: '302'
        }
          houseName: "王强",
          area: "302",
        },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        town: undefined,
        projectName: undefined,
        village: undefined,
        owner: undefined
      }
    }
        owner: undefined,
      },
    };
  },
  created() {
    // 从路由获取批次号和状态
    const { batchNo, status } = this.$route.query;
    this.batchNo = batchNo || '';
    this.status = status || '待审核';
    
    this.batchNo = batchNo || "";
    this.status = status || "待审核";

    this.getList();
  },
  methods: {
@@ -316,7 +668,7 @@
        pageSize: 10,
        town: undefined,
        village: undefined,
        owner: undefined
        owner: undefined,
      };
      this.handleQuery();
    },
@@ -339,12 +691,12 @@
    /** 全部导出 */
    handleExportAll() {
      // 实现全部导出逻辑
      this.$message.success('全部数据导出成功');
      this.$message.success("全部数据导出成功");
    },
    /** 问题数据导出 */
    handleExportIssueData() {
      // 实现问题数据导出逻辑
      this.$message.success('问题数据导出成功');
      this.$message.success("问题数据导出成功");
    },
    /** 安置户详情 */
    handleHouseholdDetail(row) {
@@ -356,15 +708,17 @@
    },
    /** 安置户删除 */
    handleHouseholdDelete(row) {
      this.$confirm('确认删除该安置户信息吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 实现删除逻辑
        this.$message.success('删除成功');
        this.getList();
      }).catch(() => {});
      this.$confirm("确认删除该安置户信息吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 实现删除逻辑
          this.$message.success("删除成功");
          this.getList();
        })
        .catch(() => {});
    },
    /** 每页显示条数变化 */
    handleSizeChange(val) {
@@ -375,9 +729,9 @@
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    }
  }
}
    },
  },
};
</script>

<style scoped>

 src/views/applicationBatchList/list.vue

@@ -1,86 +1,37 @@
<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"
    <div class="search-area">
      <el-form :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="批次号">
          <el-input
            v-model="queryParams.batchNo"
            placeholder="请输入"
            clearable
            size="small"
          />
        </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-form-item>
        <el-form-item label="状态">
          <el-input
            v-model="queryParams.status"
            placeholder="请输入"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="default" @click="resetQuery">重置</el-button>
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮区域 -->
    <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>
    <div class="action-buttons">
      <el-button type="primary" @click="handleAdd">新增申请批次</el-button>
      <el-button type="success" @click="handleImport">下载导入模板</el-button>
      <el-button type="primary" @click="handleBatchImport">批量导入</el-button>
    </div>

    <!-- 表格区域 -->
    <el-table
@@ -88,177 +39,73 @@
      :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">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="batchNo" label="批次号" min-width="120" align="center" />
      <el-table-column prop="totalApplications" label="申请总数" min-width="100" align="center" />
      <el-table-column prop="totalApplicants" label="申请总人数" min-width="100" align="center" />
      <el-table-column prop="compensationAmount" label="补偿金总额（万元）" min-width="150" align="center" />
      <el-table-column prop="quarterlyAmount" label="25%暂付款（万元）" min-width="150" align="center" />
      <el-table-column prop="quarterlyPaymentStatus" label="每季度发放支付情况（万元）" min-width="180" align="center" />
      <el-table-column prop="transitionalAmount" label="过渡补助（万元）" min-width="150" align="center" />
      
      <el-table-column label="状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag
            :type="
              scope.row.status === '待审核'
                ? 'warning'
                : scope.row.status === '已通过'
                ? 'success'
                : 'danger'
            "
          >
            {{ scope.row.status }}
          </el-tag>
            :type="scope.row.status === '待审核' ? 'warning' : scope.row.status === '已通过' ? 'success' : 'info'"
          >{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" fixed="right">
      
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template slot-scope="scope">
          <!-- 待审核状态 -->
          <template v-if="scope.row.status === '待审核'">
            <el-button
              size="mini"
              type="text"
              @click="handleView(scope.row, 'audit')"
            >审核</el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleView(scope.row, 'view')"
            >查看</el-button>
          </template>
          
          <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 v-else>
            <el-button
              size="mini"
              type="text"
              @click="handleView(scope.row, 'detail')"
            >详情</el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <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"
@@ -483,27 +330,15 @@
      this.uploadType = "batch";
      this.uploadDialogVisible = true;
    },
    /** 查看按钮操作 */
    handleView(row) {
    /** 统一的查看/详情按钮操作 */
    handleView(row, type) {
      this.$router.push({
        path: "/applicationBatchList/detail",
        query: {
          batchNo: row.batchNo,
          status: row.status,
          type: type // 'audit'/'view'/'detail'
        },
      });
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      this.currentRow = row;
      this.approvalType = "detail";
      this.approvalDialogVisible = true;
    },
    /** 审核按钮操作 */
    handleAudit(row) {
      this.currentRow = row;
      this.approvalType = "audit";
      this.approvalDialogVisible = true;
    },
    /** 审核提交处理 */
    handleApprovalSubmit(data) {
@@ -546,20 +381,55 @@
};
</script>

<style scoped>
<style lang="scss" 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;

  .search-area {
    background-color: #fff;
    padding: 15px 0;
    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>

 src/views/payment-details/detail.vue

New file
@@ -0,0 +1,184 @@
<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="镇街">
        <el-input v-model="searchForm.town" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="所在村(社区)">
        <el-input v-model="searchForm.village" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="批次号">
        <el-input v-model="searchForm.batchNo" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="户主姓名">
        <el-input v-model="searchForm.ownerName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="statistics-cards">
      <el-col :span="6">
        <el-card class="box-card">
          <div class="card-amount">2,183<span class="unit">万元</span></div>
          <div class="card-title">补偿资金总金额</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div class="card-amount">2,183<span class="unit">万元</span></div>
          <div class="card-title">资付款总金额</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div class="card-amount">2,183<span class="unit">万元</span></div>
          <div class="card-title">过渡补贴总金额</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div class="card-amount">2,183<span class="unit">万元</span></div>
          <div class="card-title">子项资金总额</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="batchNo" label="批次号" width="120"></el-table-column>
      <el-table-column prop="town" label="镇（街道）" width="120"></el-table-column>
      <el-table-column prop="projectName" label="拆迁项目名称"></el-table-column>
      <el-table-column prop="village" label="所在村（社区）" width="150"></el-table-column>
      <el-table-column prop="ownerName" label="户主姓名" width="120"></el-table-column>
      <el-table-column prop="idCard" label="身份证号" width="180"></el-table-column>
      <el-table-column prop="familySize" label="应安置人数（人）" width="140"></el-table-column>
      <el-table-column prop="area" label="所有家庭人员应安置面积（㎡）" width="160"></el-table-column>
      <el-table-column prop="paymentDate" label="25%首付款支付时间" width="160"></el-table-column>
      <el-table-column prop="firstPayment" label="25%首付款（万元）" width="160"></el-table-column>
      <el-table-column prop="mortgageApproval" label="首笔季度款应付周期" width="160"></el-table-column>
      <el-table-column prop="mortgagePayment" label="每季度需支付款项（万元）" width="180"></el-table-column>
      <el-table-column prop="transitPayment" label="过渡补贴（万元）" width="160"></el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      class="pagination">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        town: '',
        village: '',
        batchNo: '',
        ownerName: ''
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    handleSearch() {
      // 实现搜索逻辑
    },
    handleReset() {
      this.searchForm = {
        town: '',
        village: '',
        batchNo: '',
        ownerName: ''
      }
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      // 重新加载数据
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      // 重新加载数据
    },
    handleDetail(row) {
      // 查看详情
    },
    handleEdit(row) {
      // 编辑
    },
    handleDelete(row) {
      // 删除
    }
  },
  created() {
    // 初始化加载数据
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  .search-form {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
  }

  .statistics-cards {
    margin: 20px 0;
    
    .box-card {
      text-align: center;
      background: #6c5ce7;
      color: white;

      .card-amount {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 8px;

        .unit {
          font-size: 14px;
          margin-left: 4px;
        }
      }

      .card-title {
        font-size: 14px;
      }
    }
  }

  .pagination {
    margin-top: 20px;
    text-align: right;
  }
}
</style>

 src/views/payment-details/index.vue

@@ -1,18 +1,347 @@
<template>
    <div>
        1243
    <div class="app-container">
        <!-- 搜索区域 -->
        <el-form :inline="true" :model="queryParams" class="search-form">
            <el-form-item label="镇街">
                <el-input v-model="queryParams.town" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 数据卡片 -->
        <el-row :gutter="20" class="card-row">
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <div class="card-content">
                        <div class="card-amount">2,183</div>
                        <div class="card-unit">万元</div>
                        <div class="card-title">补偿资金总金额</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <div class="card-content">
                        <div class="card-amount">2,183</div>
                        <div class="card-unit">万元</div>
                        <div class="card-title">累计拨款金额</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <div class="card-content">
                        <div class="card-amount">2,183</div>
                        <div class="card-unit">万元</div>
                        <div class="card-title">过渡补贴金额</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <div class="card-content">
                        <div class="card-amount">2,183</div>
                        <div class="card-unit">万元</div>
                        <div class="card-title">季度拨款金额</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 操作工具栏 -->
        <el-row class="toolbar">
            <el-col :span="24">
                <el-button type="primary" icon="el-icon-download" @click="handleExport">导出为Excel</el-button>
            </el-col>
        </el-row>

        <!-- 数据表格 -->
        <el-table v-loading="loading" :data="tableData" border style="width: 100%"
            :header-cell-style="{ background: '#f5f7fa' }">
            <el-table-column type="index" label="序号" width="60" align="center" fixed />
            <el-table-column prop="town" label="镇（街道）" min-width="100" align="center" />
            <el-table-column prop="people" label="人数" min-width="80" align="center" />
            <el-table-column prop="total" label="补偿资金总额（万元）" min-width="150" align="center" />
            <el-table-column label="首笔款（万元）" min-width="100" align="center">
                <el-table-column prop="prepay" label="25%暂付款" min-width="100" align="center" />
                <el-table-column prop="transition" label="过渡补贴" min-width="100" align="center" />
            </el-table-column>
            <el-table-column label="每季度需支付款项（万元）" min-width="100" align="center">
                <!-- 2025年 -->
                <el-table-column label="2025年1月" prop="pay2025_01" min-width="100" align="center" />
                <el-table-column label="2025年4月" prop="pay2025_04" min-width="100" align="center" />
                <el-table-column label="2025年7月" prop="pay2025_07" min-width="100" align="center" />
                <el-table-column label="2025年10月" prop="pay2025_10" min-width="100" align="center" />

                <!-- 2026年 -->
                <el-table-column label="2026年1月" prop="pay2026_01" min-width="100" align="center" />
                <el-table-column label="2026年4月" prop="pay2026_04" min-width="100" align="center" />
                <el-table-column label="2026年7月" prop="pay2026_07" min-width="100" align="center" />
                <el-table-column label="2026年10月" prop="pay2026_10" min-width="100" align="center" />

                <!-- 2027年 -->
                <el-table-column label="2027年1月" prop="pay2027_01" min-width="100" align="center" />
                <el-table-column label="2027年4月" prop="pay2027_04" min-width="100" align="center" />
                <el-table-column label="2027年7月" prop="pay2027_07" min-width="100" align="center" />
                <el-table-column label="2027年10月" prop="pay2027_10" min-width="100" align="center" />

                <!-- 2028年 -->
                <el-table-column label="2028年1月" prop="pay2028_01" min-width="100" align="center" />
                <el-table-column label="2028年4月" prop="pay2028_04" min-width="100" align="center" />
                <el-table-column label="2028年7月" prop="pay2028_07" min-width="100" align="center" />
                <el-table-column label="2028年10月" prop="pay2028_10" min-width="100" align="center" />
            </el-table-column>

            <!-- 操作列 -->
            <el-table-column label="操作" fixed="right" width="80" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleReview(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagination" />
    </div>
</template>

<script>
export default {
    name: 'PaymentDetails',
    name: "PaymentDetails",
    data() {
        return {
            
        }
            // 遮罩层
            loading: false,
            // 总条数
            total: 800,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                town: "",
            },
            // 表格数据
            tableData: [
                {
                    town: "美阳街道",
                    people: 614,
                    total: 546,
                    prepay: 464,
                    transition: 123,
                    pay2025_01: "67.890",
                    pay2025_04: "23.456",
                    pay2025_07: "34.678",
                    pay2025_10: "45.123",
                    pay2026_01: "89.012",
                    pay2026_04: "10.234",
                    pay2026_07: "98.765",
                    pay2026_10: "54.321",
                    pay2027_01: "76.543",
                    pay2027_04: "76.543",
                    pay2027_07: "76.543",
                    pay2027_10: "76.543",
                    pay2028_01: "76.543",
                    pay2028_04: "76.543",
                    pay2028_07: "76.543",
                    pay2028_10: "76.543",
                },
                {
                    town: "美欣街道",
                    people: 997,
                    total: 151,
                    prepay: 426,
                    transition: 22,
                    pay2025_01: "76.543",
                    pay2025_04: "76.543",
                    pay2025_07: "76.543",
                    pay2025_10: "76.543",
                    pay2026_01: "76.543",
                    pay2026_04: "76.543",
                    pay2026_07: "76.543",
                    pay2026_10: "76.543",
                    pay2027_01: "76.543",
                    pay2027_04: "76.543",
                    pay2027_07: "76.543",
                    pay2027_10: "76.543",
                    pay2028_01: "76.543",
                    pay2028_04: "76.543",
                    pay2028_07: "76.543",
                    pay2028_10: "76.543",
                },
                {
                    town: "大划街道",
                    people: 408,
                    total: 120,
                    prepay: 327,
                    transition: 223,
                    pay2025_01: "76.543",
                    pay2025_04: "76.543",
                    pay2025_07: "76.543",
                    pay2025_10: "76.543",
                    pay2026_01: "76.543",
                    pay2026_04: "76.543",
                    pay2026_07: "76.543",
                    pay2026_10: "76.543",
                    pay2027_01: "76.543",
                    pay2027_04: "76.543",
                    pay2027_07: "76.543",
                    pay2027_10: "76.543",
                    pay2028_01: "76.543",
                    pay2028_04: "76.543",
                    pay2028_07: "76.543",
                    pay2028_10: "76.543",
                },
                {
                    town: "XX街道",
                    people: 271,
                    total: 764,
                    prepay: 327,
                    transition: 223,
                    pay2025_01: "76.543",
                    pay2025_04: "76.543",
                    pay2025_07: "76.543",
                    pay2025_10: "76.543",
                    pay2026_01: "76.543",
                    pay2026_04: "76.543",
                    pay2026_07: "76.543",
                    pay2026_10: "76.543",
                    pay2027_01: "76.543",
                    pay2027_04: "76.543",
                    pay2027_07: "76.543",
                    pay2027_10: "76.543",
                    pay2028_01: "76.543",
                    pay2028_04: "76.543",
                    pay2028_07: "76.543",
                    pay2028_10: "76.543",
                },
            ],
        };
    },
    created() {
        this.getList();
    },
    methods: {
        // 获取列表数据
        getList() {
            this.loading = true;
            // 模拟接口调用
            setTimeout(() => {
                this.loading = false;
            }, 500);
        },
        // 查询按钮
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        // 重置按钮
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                town: "",
            };
            this.getList();
        },
        // 详情操作
        handleReview(row) {
            this.$router.push({
                path: '/payment-details/detail',
                query: {
                    town: row.town,
                    id: row.id
                }
            });
        },
        // 导出Excel
        handleExport() {
            this.$message.success("导出Excel功能");
        },
        // 分页大小改变
        handleSizeChange(val) {
            this.queryParams.pageSize = val;
            this.getList();
        },
        // 分页页码改变
        handleCurrentChange(val) {
            this.queryParams.pageNum = val;
            this.getList();
        },
    },
};
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px;
}

.search-form {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
}

.card-row {
    margin-bottom: 20px;
}

.data-card {
    border: none;

    .el-card__body {
        padding: 15px;
    }
}
</script>
<style lang="">
    

.card-content {
    background: #8c9eff;
    color: #fff;
    text-align: center;
    padding: 15px;
    border-radius: 4px;

    .card-amount {
        font-size: 24px;
        font-weight: bold;
        display: inline-block;
    }

    .card-unit {
        font-size: 14px;
        display: inline-block;
    }

    .card-title {
        font-size: 14px;
        margin-top: 5px;
    }
}

.toolbar {
    margin-bottom: 15px;
}

.pagination {
    margin-top: 20px;
    text-align: right;
}


// 固定右侧操作栏背景色
::v-deep .el-table__fixed-right {
    .el-table__fixed-header-wrapper th {
        background-color: #f5f7fa;
    }

    .el-table__fixed-body-wrapper td {
        background-color: #fff;
    }
}
</style>