自主购房页面

董国庆

2025-03-20 845587e8d1e5a22c0d4a95c2c875f44e74f99dbf

自主购房页面

 src/views/applicationBatchList/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/applicationBatchList/components/UploadDialog.vue

New file
@@ -0,0 +1,123 @@
<template>
  <el-dialog
    :title="type === 'add' ? '新增申请批次' : '批量导入'"
    :visible.sync="dialogVisible"
    width="40%"
    @close="handleClose"
  >
    <el-form ref="uploadForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="批次号" prop="batchNo">
        <el-input v-model="form.batchNo" placeholder="请输入" />
      </el-form-item>
      <el-form-item :label="type === 'add' ? '导入文件' : '批量文件'" 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>
.upload-demo {
  text-align: center;
}
.el-upload {
  width: 100%;
}
.el-upload-dragger {
  width: 100%;
}
</style> 

 src/views/applicationBatchList/detail.vue

New file
@@ -0,0 +1,433 @@
<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.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
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center"
      />
      <el-table-column
        prop="projectName"
        label="城市项目名称"
        align="center"
        width="180"
      />
      <el-table-column
        prop="village"
        label="所在村（社区）"
        align="center"
      />
      <el-table-column
        prop="time"
        label="拆迁时间"
        align="center"
      />
      <el-table-column
        prop="owner"
        label="产主姓名"
        align="center"
      />
      <el-table-column
        prop="idCard"
        label="身份证号"
        align="center"
        width="180"
      />
      <el-table-column
        prop="contact"
        label="联系电话"
        align="center"
      />
      <el-table-column label="家庭安置人数（人）" align="center">
        <el-table-column
          prop="resettlementPeople"
          label="基础安置指标内成员"
          align="center"
          width="120"
        />
        <el-table-column
          prop="additionalPeople"
          label="非基础指标内成员"
          align="center"
          width="120"
        />
        <el-table-column
          prop="totalPeople"
          label="合计"
          align="center"
          width="80"
        />
      </el-table-column>
      <el-table-column
        prop="houseName"
        label="待安置房屋房名"
        align="center"
      />
      <el-table-column
        prop="area"
        label="面积（㎡）"
        align="center"
      />
      <el-table-column
        label="操作"
        align="center"
        width="150"
      >
        <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,
        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/applicationBatchList/list.vue

New file
@@ -0,0 +1,565 @@
<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="项目名称">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="镇街">
        <el-input
          v-model="queryParams.town"
          placeholder="请输入"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="产主姓名">
        <el-input
          v-model="queryParams.owner"
          placeholder="请输入"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input
          v-model="queryParams.idCard"
          placeholder="请输入"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleQuery"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 操作按钮区域 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" size="small" @click="handleAdd"
          >新增申请批次</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" size="small" @click="handleImport"
          >下载导入模板</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" size="small" @click="handleBatchImport"
          >批量导入</el-button
        >
      </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center"
        fixed="left"
      />
      <el-table-column
        prop="projectName"
        label="项目名称"
        align="center"
        width="150"
      />
      <el-table-column
        prop="projectCompleteTime"
        label="项目启动时间"
        align="center"
        width="110"
      />
      <el-table-column prop="town" label="镇街" align="center" width="80" />
      <el-table-column
        prop="village"
        label="村社区"
        align="center"
        width="80"
      />
      <el-table-column prop="group" label="组" align="center" width="60" />
      <el-table-column
        prop="owner"
        label="户主姓名"
        align="center"
        width="80"
      />
      <el-table-column
        prop="ownerIdCard"
        label="户主身份证号"
        align="center"
        width="180"
      /><el-table-column
        prop="relationship"
        label="家庭成员名字"
        align="center"
        width="160"
      />
      <el-table-column
        prop="relationship"
        label="关系"
        align="center"
        width="60"
      />
      <el-table-column
        prop="personType"
        label="人员性质"
        align="center"
        width="80"
      />
      <el-table-column
        prop="idCard"
        label="身份证号"
        align="center"
        width="180"
      />

      <el-table-column prop="age" label="年龄" align="center" width="60" />
      <el-table-column prop="remark1" label="性别" align="center" width="80" />
      <el-table-column
        prop="birthDate"
        label="出生年月日"
        align="center"
        width="100"
      />
      <el-table-column
        prop="resettlementType"
        label="安置方式"
        align="center"
        width="100"
      />
      <el-table-column
        prop="firstDeliveryDate"
        label="原始拆迁时领取过渡费时间"
        align="center"
        width="100"
      />
      <el-table-column
        prop="secondDeliveryDate"
        label="上次过渡费发放时间(起)"
        align="center"
        width="100"
      />
      <el-table-column
        prop="thirdDeliveryDate"
        label="上次过渡费发放时间(止)"
        align="center"
        width="100"
      />
      <el-table-column
        prop="thirdDeliveryRemark"
        label="安置状态"
        align="center"
        width="100"
      />
      <el-table-column
        prop="resettlementArea"
        label="剩余未安置面积(㎡)"
        align="center"
        width="90"
      />
      <el-table-column
        prop="previousTotalAmount"
        label="剩余未安置商铺面积(㎡)"
        align="center"
        width="110"
      />

      <el-table-column
        prop="contact"
        label="联系电话"
        align="center"
        width="120"
      />
      <el-table-column prop="remark" label="备注" align="center" width="80"  />
      <el-table-column prop="status" label="安置状态" align="center" width="80" fixed="right">
        <template slot-scope="scope">
          <el-tag
            :type="
              scope.row.status === '待审核'
                ? 'warning'
                : scope.row.status === '已通过'
                ? 'success'
                : 'danger'
            "
          >
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" fixed="right">
        <template slot-scope="scope">
          
          <el-button size="mini" type="text" @click="handleView(scope.row)"
            >查看</el-button
          >
          <el-button size="mini" type="text" @click="handleDetail(scope.row)"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleAudit(scope.row)"
            v-if="scope.row.status === '待审核'"
            >审核</el-button
          >
          <el-button size="mini" type="text" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 审核对话框 - 替换原有的审核对话框 -->
    <approval-dialog
      ref="approvalDialog"
      :visible.sync="approvalDialogVisible"
      :type="approvalType"
      :row-data="currentRow"
      @audit-submit="handleApprovalSubmit"
    />

    <!-- 上传组件 -->
    <upload-dialog
      ref="uploadDialog"
      :visible.sync="uploadDialogVisible"
      :type="uploadType"
      @success="handleUploadSuccess"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import UploadDialog from "./components/UploadDialog";
import ApprovalDialog from "./components/ApprovalDialog";

export default {
  name: "ApplicationBatchList",
  components: {
    Pagination,
    UploadDialog,
    ApprovalDialog,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 4,
      // 状态数据字典
      statusOptions: [
        { value: "待审核", label: "待审核" },
        { value: "已通过", label: "已通过" },
        { value: "已驳回", label: "已驳回" },
      ],
      // 审核相关
      approvalDialogVisible: false,
      approvalType: "audit", // 'audit' 或 'detail'
      currentRow: {},
      // 上传相关
      uploadDialogVisible: false,
      uploadType: "add", // 'add' 或 'batch'
      // 表格数据
      tableData: [
        {
          projectName: "白鹤镇和平街道改造",
          projectCompleteTime: "2024-07-27",
          town: "白鹤镇",
          village: "白鹤村",
          group: "3组",
          owner: "陈向荣",
          ownerIdCard: "123456789012345678",
          relationship: "户主",
          personType: "集体",
          idCard: "123456789012345678",
          name: "陈向荣",
          age: "25岁",
          remark1: "事实",
          birthDate: "2024-01-05",
          resettlementType: "货币补偿",
          firstDeliveryDate: "2024-07-16",
          secondDeliveryDate: "2025-07-23",
          thirdDeliveryDate: "2025-11-21",
          thirdDeliveryRemark: "未完善",
          resettlementArea: "6",
          previousTotalAmount: "4",
          previousPaid: "19612348970",
          previousUnpaid: "",
          accountNumber: "19612348970",
          contact: "19612348970",
          remark: "",
          status: "待审核",
        },
        {
          projectName: "白鹤镇和平街道改造",
          projectCompleteTime: "2024-08-10",
          town: "白鹤镇",
          village: "白鹤村",
          group: "3组",
          owner: "席娟",
          ownerIdCard: "123456789012345678",
          relationship: "妻",
          personType: "集体",
          idCard: "330105197803120987",
          name: "李女士",
          age: "25岁",
          remark1: "事实",
          birthDate: "2024-01-22",
          resettlementType: "货币补偿",
          firstDeliveryDate: "2025-09-22",
          secondDeliveryDate: "2025-07-19",
          thirdDeliveryDate: "2025-04-22",
          thirdDeliveryRemark: "未完善",
          resettlementArea: "90",
          previousTotalAmount: "45",
          previousPaid: "19323312231",
          previousUnpaid: "",
          accountNumber: "19323312231",
          contact: "19323312231",
          remark: "",
          status: "待审核",
        },
        {
          projectName: "白鹤镇和平街道改造",
          projectCompleteTime: "2024-06-20",
          town: "白鹤镇",
          village: "白鹤村",
          group: "3组",
          owner: "梁小小",
          ownerIdCard: "123456789012345678",
          relationship: "子",
          personType: "北城集",
          idCard: "123456789012345678",
          name: "梁家辉",
          age: "25岁",
          remark1: "事实",
          birthDate: "2025-08-08",
          resettlementType: "货币补偿",
          firstDeliveryDate: "2024-07-04",
          secondDeliveryDate: "2024-12-20",
          thirdDeliveryDate: "2025-12-03",
          thirdDeliveryRemark: "未完善",
          resettlementArea: "65",
          previousTotalAmount: "90",
          previousPaid: "19876782134",
          previousUnpaid: "",
          accountNumber: "19876782134",
          contact: "19876782134",
          remark: "",
          status: "已驳回",
        },
        {
          projectName: "白鹤镇和平街道改造",
          projectCompleteTime: "2024-07-19",
          town: "白鹤镇",
          village: "白鹤村",
          group: "3组",
          owner: "王开莱",
          ownerIdCard: "123456789012345678",
          relationship: "兄",
          personType: "北城集",
          idCard: "123456789012345678",
          name: "王中山",
          age: "25岁",
          remark1: "事实",
          birthDate: "2024-06-09",
          resettlementType: "货币补偿",
          firstDeliveryDate: "2025-01-11",
          secondDeliveryDate: "2024-09-21",
          thirdDeliveryDate: "2024-12-12",
          thirdDeliveryRemark: "未完善",
          resettlementArea: "34",
          previousTotalAmount: "62",
          previousPaid: "19113212388",
          previousUnpaid: "",
          accountNumber: "19113212388",
          contact: "19113212388",
          remark: "",
          status: "已通过",
        },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectName: undefined,
        town: undefined,
        owner: undefined,
        idCard: undefined,
        status: undefined,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 这里添加实际的API调用
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        projectName: undefined,
        town: undefined,
        owner: undefined,
        idCard: undefined,
        status: undefined,
      };
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.uploadType = "add";
      this.uploadDialogVisible = true;
    },
    /** 导入模板下载操作 */
    handleImport() {
      // 实现下载逻辑
    },
    /** 批量导入按钮操作 */
    handleBatchImport() {
      this.uploadType = "batch";
      this.uploadDialogVisible = true;
    },
    /** 查看按钮操作 */
    handleView(row) {
      this.$router.push({
        path: "/applicationBatchList/detail",
        query: {
          batchNo: row.batchNo,
          status: row.status,
        },
      });
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      this.currentRow = row;
      this.approvalType = "detail";
      this.approvalDialogVisible = true;
    },
    /** 审核按钮操作 */
    handleAudit(row) {
      this.currentRow = row;
      this.approvalType = "audit";
      this.approvalDialogVisible = true;
    },
    /** 审核提交处理 */
    handleApprovalSubmit(data) {
      // 处理审核提交
      const { result, comment } = data;
      this.$message({
        type: "success",
        message: result === "pass" ? "审核通过成功！" : "审核驳回成功！",
      });
      // 刷新列表
      this.getList();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm("是否确认删除该批次数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 这里添加删除逻辑
          this.$message({
            type: "success",
            message: "删除成功！",
          });
          this.getList();
        })
        .catch(() => {});
    },
    /** 上传成功回调 */
    handleUploadSuccess() {
      this.uploadDialogVisible = false;
      this.getList();
      this.$message({
        type: "success",
        message: this.uploadType === "add" ? "新增成功！" : "批量导入成功！",
      });
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.search-form {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}
.mb8 {
  margin-bottom: 8px;
}
.el-button + .el-button {
  margin-left: 10px;
}
</style>