feat

pyt

2025-03-20 f07aab8efad33f502c8cc99f0f8dac48d39f4987

feat

 src/api/storing-data.js

New file
@@ -0,0 +1,37 @@
import request from '@/utils/request'

// 新增资料
export function add(data) {
  return request({
    url: '/file/add',
    method: 'post',
    data
  })
}

// 删除资料
export function del(data) {
  return request({
    url: '/file/del',
    method: 'post',
    data
  })
}

// 资料列表
export function list(data) {
  return request({
    url: '/file/list',
    method: 'post',
    data
  })
}

// 修改资料
export function update(data) {
  return request({
    url: '/file/update',
    method: 'post',
    data
  })
}

 src/views/storing-data/components/ApprovalDialog.vue

New file
@@ -0,0 +1,872 @@
<template>
  <el-dialog
    :title="type === 'audit' ? '审批安置户申请信息' : '安置户申请信息'"
    :visible.sync="dialogVisible"
    width="80%"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <div class="approval-content">
      <!-- 左侧表格区域 -->
      <div class="table-container">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <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="拆迁项目名称"
            align="center"
            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"
            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="集体经济组织成员"
              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="非集体经济组织成员"
              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="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="待安置家庭成员姓名"
            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="待安置人员应安置面积合计（㎡）"
            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>
      </div>

      <!-- 右侧审核信息 -->
      <div class="approval-info">
        <div class="approver-timeline">
          <!-- 审核状态下显示审批人和等待审核按钮 -->
          <template v-if="type === 'audit'">
            <div class="timeline-item">
              <div class="timeline-icon">
                <el-avatar
                  size="small"
                  icon="el-icon-user"
                  :style="{ background: '#6d78ff' }"
                ></el-avatar>
              </div>
              <div class="timeline-content info-box">
                <div class="info-line">
                  <div class="approver-info">
                    <div class="approver-title">审批人：</div>
                    <div class="approver-name">{{ approver }}</div>
                  </div>
                  <div class="approval-time-info">
                    <div class="approval-time-title">审批时间：</div>
                    <div class="approval-time">{{ approvalTime }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="timeline-divider"></div>
            <div class="timeline-item">
              <div class="timeline-icon">
                <el-avatar
                  size="small"
                  icon="el-icon-time"
                  :style="{ background: '#909399' }"
                ></el-avatar>
              </div>
              <div class="timeline-content">
                <el-button size="small" disabled class="waiting-btn"
                  >等待审核</el-button
                >
              </div>
            </div>
          </template>
          <!-- 详情状态下显示经办人和审核人 -->
          <template v-else>
            <div class="timeline-item">
              <div class="timeline-icon">
                <el-avatar
                  size="small"
                  icon="el-icon-user"
                  :style="{ background: '#6d78ff' }"
                ></el-avatar>
              </div>
              <div class="timeline-content info-box">
                <div class="info-line">
                  <div class="approver-info">
                    <div class="approver-title">经办人：</div>
                    <div class="approver-name">{{ operatorName }}</div>
                  </div>
                  <div class="approval-time-info">
                    <div class="approval-time-title">提交时间：</div>
                    <div class="approval-time">{{ submitTime }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="timeline-divider"></div>
            <div class="timeline-item">
              <div class="timeline-icon">
                <el-avatar
                  size="small"
                  icon="el-icon-user"
                  :style="{ background: '#6d78ff' }"
                ></el-avatar>
              </div>
              <div class="timeline-content info-box">
                <div class="info-line">
                  <div class="approver-info">
                    <div class="approver-title">审核人：</div>
                    <div class="approver-name">{{ auditorName }}</div>
                  </div>
                  <div class="approval-time-info">
                    <div class="approval-time-title">审核时间：</div>
                    <div class="approval-time">{{ auditTime }}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 警告信息 -->
    <div class="warning-info" v-if="hasWarning && type === 'audit'">
      <div class="warning-text">
        注意: 系统检测到该申请表中存在异常数据，请仔细核实!
      </div>
    </div>

    <!-- 审核结果区域 -->
    <div class="audit-section">
      <div class="audit-result" v-if="type === 'audit'">
        <div class="result-title">审核结果</div>
        <div class="result-options">
          <el-radio-group v-model="form.auditResult">
            <el-radio label="pass">通过</el-radio>
            <el-radio label="reject">驳回</el-radio>
          </el-radio-group>
        </div>
      </div>

      <div class="audit-comment">
        <div class="comment-title">审批意见</div>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入审批意见"
          v-model="form.auditComment"
          :disabled="type === 'detail'"
        ></el-input>
      </div>
    </div>

    <!-- 底部按钮 - 仅审核模式显示 -->
    <div slot="footer" class="dialog-footer" v-if="type === 'audit'">
      <el-button @click="cancelAudit">取消</el-button>
      <el-button type="primary" @click="submitAudit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "ApprovalDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "audit", // 'audit' 或 'detail'
      validator: function (value) {
        return ["audit", "detail"].indexOf(value) !== -1;
      },
    },
    rowData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      dialogVisible: false,
      hasWarning: true,
      approver: "李四",
      approvalTime: "2025-1-17 09:35:24",
      operatorName: "张三",
      submitTime: "2025-1-17 09:35:24",
      auditorName: "王五",
      auditTime: "2025-1-17 09:35:24",
      approvalStatus: "", // 'passed', 'rejected', ''
      form: {
        auditResult: "pass",
        auditComment: "",
      },
      tableData: [
        {
          town: "松花社区",
          projectName: "李家窑水库工程征地拆迁",
          village: "松花社区",
          time: "",
          owner: "陈向荣",
          idCard: "220102198512345678",
          contact: "",
          resettlementPeople: 1,
          additionalPeople: 2,
          totalPeople: 3,
          houseName: "陈向荣、李辉",
          ownerName: "",
          area: "160",
          totalCompensation: "54",
          firstPayment: "10",
          secondPayment: "46",
          totalPayment: "30",
          monthlyPayment: "38",
          remainingPayment: "69",
          totalPaid: "",
          hasError: false,
        },
        {
          town: "松花社区",
          projectName: "李家窑水库工程征地拆迁",
          village: "松花社区",
          time: "",
          owner: "席娟",
          idCard: "330105197803120987",
          contact: "",
          resettlementPeople: 1,
          additionalPeople: 1,
          totalPeople: 2,
          houseName: "周吉彬",
          ownerName: "",
          area: "215",
          totalCompensation: "43",
          firstPayment: "14",
          secondPayment: "2",
          totalPayment: "81",
          monthlyPayment: "41",
          remainingPayment: "17",
          totalPaid: "",
          hasError: true,
          errors: {
            idCard: "身份证号不合法",
            totalPayment: "金额计算异常",
          },
        },
        {
          town: "清泉村",
          projectName:
            "成都绿道二环线生态区公园工程（含川师）征地拆迁及前期公示",
          village: "清泉村",
          time: "",
          owner: "周忠心",
          idCard: "440203199000999876",
          contact: "",
          resettlementPeople: 1,
          additionalPeople: 1,
          totalPeople: 2,
          houseName: "周忠心、杨春云",
          ownerName: "",
          area: "103",
          totalCompensation: "88",
          firstPayment: "42",
          secondPayment: "14",
          totalPayment: "61",
          monthlyPayment: "35",
          remainingPayment: "26",
          totalPaid: "",
          hasError: false,
        },
        {
          town: "清泉村",
          projectName:
            "成都绿道二环线生态区公园工程（含川师）征地拆迁及前期公示",
          village: "清泉村",
          time: "",
          owner: "李辉",
          idCard: "440203199000999876",
          contact: "",
          resettlementPeople: 2,
          additionalPeople: 1,
          totalPeople: 3,
          houseName: "王强",
          ownerName: "",
          area: "302",
          totalCompensation: "49",
          firstPayment: "28",
          secondPayment: "10",
          totalPayment: "56",
          monthlyPayment: "29",
          remainingPayment: "4",
          totalPaid: "",
          hasError: false,
        },
      ],
    };
  },
  watch: {
    visible(val) {
      this.dialogVisible = val;
    },
    dialogVisible(val) {
      this.$emit("update:visible", val);
    },
    rowData: {
      handler(newVal) {
        if (newVal && Object.keys(newVal).length > 0) {
          // 如果有传入数据，可以在这里处理
        }
      },
      immediate: true,
    },
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.hasError) {
        return "error-row";
      }
      return "";
    },
    cancelAudit() {
      this.dialogVisible = false;
      this.resetForm();
    },
    submitAudit() {
      // 提交审核
      this.$emit("audit-submit", {
        result: this.form.auditResult,
        comment: this.form.auditComment,
      });
      this.dialogVisible = false;
      this.resetForm();
    },
    resetForm() {
      this.form = {
        auditResult: "pass",
        auditComment: "",
      };
    },
  },
};
</script>

<style scoped>
.approval-content {
  display: flex;
  margin-bottom: 20px;
}

.table-container {
  flex: 1;
  margin-right: 20px;
  overflow-x: auto;
}

.approval-info {
  width: 250px;
  padding: 15px;
  border-radius: 4px;
  background-color: #f0f2f5;
}

.approver-timeline {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}

.timeline-icon {
  margin-right: 10px;
}

.timeline-divider {
  width: 2px;
  height: 30px;
  background-color: #dcdfe6;
  margin-left: 15px;
  margin-bottom: 15px;
}

.timeline-content {
  flex: 1;
}

.info-box {
  background-color: #8e9aff;
  border-radius: 8px;
  padding: 6px 8px;
  color: white;
}

.info-line {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.approver-info,
.approval-time-info {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.approver-title,
.approval-time-title {
  font-weight: bold;
  margin-right: 2px;
  white-space: nowrap;
  font-size: 12px;
}

.approver-name,
.approval-time {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.waiting-btn {
  background-color: #909399;
  color: white;
  border: none;
}

.warning-info {
  background-color: #fef0f0;
  padding: 10px 15px;
  border-radius: 4px;
  margin: 15px 0;
}

.warning-text {
  color: #f56c6c;
}

.audit-section {
  margin-top: 20px;
}

.audit-result {
  margin-bottom: 15px;
}

.result-title,
.comment-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.dialog-footer {
  text-align: right;
}
</style>

<style>
/* 全局样式 */
.error-row {
  background-color: #ffecec !important;
}
</style> 

 src/views/storing-data/components/UploadDialog.vue

New file
@@ -0,0 +1,124 @@
<template>
  <el-dialog
    :title="type === 'add' ? '新增资料' : '编辑资料'"
    :visible.sync="dialogVisible"
    width="40%"
    @close="handleClose"
  >
    <el-form ref="uploadForm" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="镇(街道)" prop="batchNo">
        <el-input v-model="form.batchNo" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="资料名称" prop="batchNo">
        <el-input v-model="form.batchNo" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="资料文件" prop="file">
        <el-upload
          class="upload-demo"
          drag
          action="#"
          :auto-upload="false"
          :on-change="handleFileChange"
          :limit="1"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            支持扩展名：.doc .docx .pdf .jpg .png .xlsx .xls
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitUpload">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'UploadDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'add',
      validator: function(value) {
        return ['add', 'batch'].indexOf(value) !== -1
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        batchNo: '',
        file: null
      },
      rules: {
        batchNo: [
          { required: true, message: '请输入批次号', trigger: 'blur' }
        ],
        file: [
          { required: true, message: '请选择上传文件', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val;
    },
    dialogVisible(val) {
      this.$emit('update:visible', val);
    }
  },
  methods: {
    handleClose() {
      this.form.batchNo = '';
      this.form.file = null;
      this.$refs.uploadForm && this.$refs.uploadForm.resetFields();
    },
    handleFileChange(file) {
      this.form.file = file.raw;
      // 手动触发文件字段验证
      this.$refs.uploadForm.validateField('file');
    },
    submitUpload() {
      this.$refs.uploadForm.validate(valid => {
        if (!valid) {
          return;
        }
        
        // 这里添加实际的上传逻辑
        const formData = new FormData();
        formData.append('file', this.form.file);
        if (this.type === 'add') {
          formData.append('batchNo', this.form.batchNo);
        }

        // 模拟上传
        this.$message.info('正在上传，请稍候...');
        setTimeout(() => {
          this.$emit('success');
          this.handleClose();
        }, 1000);
      });
    }
  }
}
</script>

<style scoped>

.el-upload {
  width: 100%;
}
.el-upload-dragger {
  width: 100%;
}
</style> 

 src/views/storing-data/detail.vue

New file
@@ -0,0 +1,787 @@
<template>
  <div class="app-container">
    <!-- 头部信息卡片 -->
    <div class="batch-info">
      <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
          >
        </div>
      </div>
      <div class="info-cards">
        <el-card class="box-card">
          <div class="card-title">29,183</div>
          <div class="card-desc">申请总人数</div>
        </el-card>
        <el-card class="box-card">
          <div class="card-title">2,183 万元</div>
          <div class="card-desc">申请总金额</div>
        </el-card>
        <el-card class="box-card">
          <div class="card-title">2,183 ㎡</div>
          <div class="card-desc">居安置总面积</div>
        </el-card>
      </div>
    </div>

    <!-- 搜索表单 -->
    <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 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-form-item>
      <el-form-item label="户主姓名/身份证号">
        <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-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-col>
      <el-col :span="1.5">
        <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-col>
      <el-col :span="1.5">
        <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-col>
      <el-col :span="1.5">
        <el-button type="danger" size="small" @click="handleExportIssueData"
          >问题数据导出</el-button
        >
      </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <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="拆迁项目名称"
        align="center"
        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"
        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="集体经济组织成员"
          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="非集体经济组织成员"
          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="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="待安置家庭成员姓名"
        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="待安置人员应安置面积合计（㎡）"
        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
            size="mini"
            type="text"
            @click="handleHouseholdDetail(scope.row)"
          >详情</el-button>
          <template v-if="status === '待审核'">
            <el-button
              size="mini"
              type="text"
              @click="handleHouseholdEdit(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleHouseholdDelete(scope.row)"
            >删除</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, 50]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
  </div>
</template>

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

    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 这里添加实际的API调用获取数据
      setTimeout(() => {
        this.loading = false;
        this.total = this.tableData.length;
      }, 500);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        town: undefined,
        village: undefined,
        owner: undefined,
      };
      this.handleQuery();
    },
    /** 返回按钮操作 */
    goBack() {
      this.$router.go(-1);
    },
    /** 新增安置户信息 */
    handleAddHousehold() {
      // 实现新增安置户逻辑
    },
    /** 下载导入模板 */
    handleDownloadTemplate() {
      // 实现下载模板逻辑
    },
    /** 批量导入 */
    handleBatchImport() {
      // 实现批量导入逻辑
    },
    /** 全部导出 */
    handleExportAll() {
      // 实现全部导出逻辑
      this.$message.success("全部数据导出成功");
    },
    /** 问题数据导出 */
    handleExportIssueData() {
      // 实现问题数据导出逻辑
      this.$message.success("问题数据导出成功");
    },
    /** 安置户详情 */
    handleHouseholdDetail(row) {
      // 实现安置户详情查看逻辑
    },
    /** 安置户编辑 */
    handleHouseholdEdit(row) {
      // 实现安置户编辑逻辑
    },
    /** 安置户删除 */
    handleHouseholdDelete(row) {
      this.$confirm("确认删除该安置户信息吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 实现删除逻辑
          this.$message.success("删除成功");
          this.getList();
        })
        .catch(() => {});
    },
    /** 每页显示条数变化 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    /** 当前页变化 */
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.batch-info {
  margin-bottom: 20px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.batch-title {
  font-size: 18px;
  font-weight: bold;
}
.info-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.box-card {
  width: 32%;
  background-color: #6f82fb;
  color: white;
  text-align: center;
  border-radius: 5px;
}
.card-title {
  font-size: 22px;
  margin: 10px 0;
}
.card-desc {
  font-size: 14px;
  margin-bottom: 10px;
}
.search-form {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}
.mb8 {
  margin-bottom: 15px;
}
.pagination-container {
  margin-top: 15px;
  text-align: right;
}
</style>

 src/views/storing-data/index.vue

New file
@@ -0,0 +1,300 @@
<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.street"
            placeholder="请输入"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="资料名称">
          <el-input
            v-model="queryParams.name"
            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>

    <!-- 操作按钮区域 -->
    <div class="action-buttons">
      <el-button type="primary" @click="handleAdd">新增资料</el-button>
    </div>

    <!-- 表格区域 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column prop="batchNo" label="镇/街道" min-width="120" align="center" />
      <el-table-column prop="totalApplications" label="资料名称" min-width="100" align="center" >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleView(scope.row, 'view')"
          >查看</el-button>
        </template>
      </el-table-column>
      <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 label="操作" width="180" align="center" fixed="right">
        <template slot-scope="scope">
          <template>
            <el-button
              size="mini"
              type="text"
              @click="handleView(scope.row, 'detail')"
            >详情</el-button>
            <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>

    <!-- 分页区域 -->
    <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"
      :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";
import { list, add, del, update } from "@/api/storing-data";


export default {
  name: "StoringData",
  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: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        street: undefined,
        name: undefined
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      list(this.queryParams).then(res => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    /** 搜索按钮操作 */
    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, type) {
      this.$router.push({
        path: "/applicationBatchList/detail",
        query: {
          batchNo: row.batchNo,
          type: type // 'audit'/'view'/'detail'
        },
      });
    },
    /** 审核提交处理 */
    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 lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #fff;

  .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>