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

pyt

2025-03-21 89946bea834a200b7edc9a8fbdbb12f48d7d152a

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

 package.json

@@ -2,7 +2,7 @@
  "name": "ruoyi",
  "version": "3.8.9",
  "description": "崇州自主安置管理后台",
  "author": "若依",
  "author": "崇州自主安置管理后台",
  "license": "MIT",
  "scripts": {
    "dev": "vue-cli-service serve",

 src/api/application-batch.js

@@ -27,3 +27,45 @@
    data
  })
}

//安置新增审批批次详情
export function addDetail(data) {
  return request({
    url: '/placement-apply/record-add',
    method: 'post',
    data
  })
}

//安置审批批次详情
export function getDetail(data) {
  return request({
    url: '/placement-apply/record-detail',
    method: 'post',
    data
  })
}
//安置审批批次详情删除
export function delDetail(data) {
  return request({
    url: '/placement-apply/record-del',
    method: 'post',
    data
  })
}
//安置审批批次详情编辑
export function editDetail(data) {
  return request({
    url: '/placement-apply/record-edit',
    method: 'post',
    data
  })
}
//安置审批批次详情审批
export function approve(data) {
  return request({
    url: '/placement-apply/approve',
    method: 'post',
    data
  })
}

 src/api/placement-details.js

@@ -26,3 +26,12 @@
      data
    })
  }

  //安置批次详情
  export function getPlacementBatchDetail(data) {
    return request({
      url: '/placement-batch/detail',
      method: 'post',
      data
    })
  }

 src/api/placement.js

@@ -8,11 +8,13 @@
        data
    })
}
// 下载模板
export function downloadTemplate() {

// 导入
export function importPlacement(data) {
    return request({
        url: '/placement/download-template',
        method: 'post'
        url: '/placement/imports',
        method: 'post',
        data
    })
}


 src/views/applicationBatchList/components/ApprovalDialog.vue

@@ -4,13 +4,23 @@
    <div class="approval-content">
      <!-- 左侧表格区域 -->
      <div class="table-container">
        <el-table :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName">
        <el-table 
          v-loading="loading"
          element-loading-text="加载中..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          :data="tableData" 
          border 
          style="width: 100%" 
          :row-class-name="tableRowClassName"
          height="400"
        >
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column prop="town" label="镇（街道）" align="center" width="80">
          <el-table-column prop="street" 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>
              {{ scope.row.street }}
              <el-tooltip v-if="scope.row.streetWarn" placement="top">
                <div slot="content">{{ scope.row.streetWarn }}</div>
                <i class="el-icon-warning" style="color: #e6a23c; margin-left: 5px"></i>
              </el-tooltip>
            </template>
@@ -18,35 +28,35 @@
          <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>
              <el-tooltip v-if="scope.row.projectNameWarn" placement="top">
                <div slot="content">{{ scope.row.projectNameWarn }}</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">
          <el-table-column prop="community" 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>
              {{ scope.row.community }}
              <el-tooltip v-if="scope.row.communityWarn" placement="top">
                <div slot="content">{{ scope.row.communityWarn }}</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">
          <el-table-column prop="demolitionTime" 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>
              {{ scope.row.demolitionTime }}
              <el-tooltip v-if="scope.row.demolitionTimeWarn" placement="top">
                <div slot="content">{{ scope.row.demolitionTimeWarn }}</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">
          <el-table-column prop="householdHead" 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>
              {{ scope.row.householdHead }}
              <el-tooltip v-if="scope.row.householdHeadWarn" placement="top">
                <div slot="content">{{ scope.row.householdHeadWarn }}</div>
                <i class="el-icon-warning" style="color: #e6a23c; margin-left: 5px"></i>
              </el-tooltip>
            </template>
@@ -54,126 +64,124 @@
          <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>
              <el-tooltip v-if="scope.row.idCardExistsWarn == 1" placement="top">
                <div slot="content">{{ "身份证不在安置库" }}</div>
                <i class="el-icon-warning" style="color: #e6a23c; margin-left: 5px"></i>
              </el-tooltip>
              <el-tooltip v-if="scope.row.idCardNoWarn == 1" placement="top">
                <div slot="content">{{ "身份证重复" }}</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">
          <el-table-column prop="mobile" 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>
              {{ scope.row.mobile }}
              <el-tooltip v-if="scope.row.mobileWarn" placement="top">
                <div slot="content">{{ scope.row.mobileWarn }}</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">
          <el-table-column label="本次安置人数（人）" align="center">
            <el-table-column prop="currentCollectiveNum" 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>
                {{ scope.row.currentCollectiveNum }}
                <el-tooltip v-if="scope.row.currentCollectiveNumWarn" placement="top">
                  <div slot="content">{{ scope.row.currentCollectiveNumWarn }}</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">
            <el-table-column prop="currentNoCollectiveNum" 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>
                {{ scope.row.currentNoCollectiveNum }}
                <el-tooltip v-if="scope.row.currentNoCollectiveNumWarn" placement="top">
                  <div slot="content">{{ scope.row.currentNoCollectiveNumWarn }}</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">
            <el-table-column prop="currentCount" 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>
                {{ scope.row.currentCount }}
                <el-tooltip v-if="scope.row.currentCountWarn" placement="top">
                  <div slot="content">{{ scope.row.currentCountWarn }}</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">
          <el-table-column prop="waitFamilyNames" 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>
              {{ scope.row.waitFamilyNames }}
              <el-tooltip v-if="scope.row.waitFamilyNamesWarn" placement="top">
                <div slot="content">{{ scope.row.waitFamilyNamesWarn }}</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">
          <el-table-column prop="waitFamilyArea" 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>
              {{ scope.row.waitFamilyArea }}
              <el-tooltip v-if="scope.row.waitFamilyAreaWarn" placement="top">
                <div slot="content">{{ scope.row.waitFamilyAreaWarn }}</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">
            <el-table-column prop="compensationNewAmount" 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>
                {{ scope.row.compensationNewAmount }}
                <el-tooltip v-if="scope.row.compensationNewAmountWarn" placement="top">
                  <div slot="content">{{ scope.row.compensationNewAmountWarn }}</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">
            <el-table-column prop="compensationOldAmount" 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>
                {{ scope.row.compensationOldAmount }}
                <el-tooltip v-if="scope.row.compensationOldAmountWarn" placement="top">
                  <div slot="content">{{ scope.row.compensationOldAmountWarn }}</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">
            <el-table-column prop="compensationSum" 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>
                {{ scope.row.compensationSum }}
                <el-tooltip v-if="scope.row.compensationSumWarn" placement="top">
                  <div slot="content">{{ scope.row.compensationSumWarn }}</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">
          <el-table-column prop="downPaymentAmount" 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>
              {{ scope.row.downPaymentAmount }}
              <el-tooltip v-if="scope.row.downPaymentAmountWarn" placement="top">
                <div slot="content">{{ scope.row.downPaymentAmountWarn }}</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">
          <el-table-column prop="quarterPayAmount" 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>
              {{ scope.row.quarterPayAmount }}
              <el-tooltip v-if="scope.row.quarterPayAmountWarn" placement="top">
                <div slot="content">{{ scope.row.quarterPayAmountWarn }}</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">
          <el-table-column prop="subsidyAmount" 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>
              {{ scope.row.subsidyAmount }}
              <el-tooltip v-if="scope.row.subsidyAmountWarn" placement="top">
                <div slot="content">{{ scope.row.subsidyAmountWarn }}</div>
                <i class="el-icon-warning" style="color: #e6a23c; margin-left: 5px"></i>
              </el-tooltip>
            </template>
@@ -181,17 +189,17 @@
          <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>
              <el-tooltip v-if="scope.row.remarkWarn" placement="top">
                <div slot="content">{{ scope.row.remarkWarn }}</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">
          <el-table-column prop="situation" 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>
              {{ scope.row.situation }}
              <el-tooltip v-if="scope.row.situationWarn" placement="top">
                <div slot="content">{{ scope.row.situationWarn }}</div>
                <i class="el-icon-warning" style="color: #e6a23c; margin-left: 5px"></i>
              </el-tooltip>
            </template>
@@ -211,12 +219,12 @@
              <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 class="approver-title">提交人：</div>
                    <div class="approver-name">{{ approvalInfo.createUser }}</div>
                  </div>
                  <div class="approval-time-info">
                    <div class="approval-time-title">审批时间：</div>
                    <div class="approval-time">{{ approvalTime }}</div>
                    <div class="approval-time-title">提交时间：</div>
                    <div class="approval-time">{{ approvalInfo.createTime }}</div>
                  </div>
                </div>
              </div>
@@ -240,12 +248,12 @@
              <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 class="approver-title">提交人：</div>
                    <div class="approver-name">{{ approvalInfo.createUser }}</div>
                  </div>
                  <div class="approval-time-info">
                    <div class="approval-time-title">提交时间：</div>
                    <div class="approval-time">{{ submitTime }}</div>
                    <div class="approval-time">{{ approvalInfo.createTime }}</div>
                  </div>
                </div>
              </div>
@@ -259,11 +267,11 @@
                <div class="info-line">
                  <div class="approver-info">
                    <div class="approver-title">审核人：</div>
                    <div class="approver-name">{{ auditorName }}</div>
                    <div class="approver-name">{{ approvalInfo.approveName }}</div>
                  </div>
                  <div class="approval-time-info">
                    <div class="approval-time-title">审核时间：</div>
                    <div class="approval-time">{{ auditTime }}</div>
                    <div class="approval-time">{{ approvalInfo.approveTime }}</div>
                  </div>
                </div>
              </div>
@@ -282,20 +290,33 @@

    <!-- 审核结果区域 -->
    <div class="audit-section">
      <div class="audit-result" v-if="type === 'audit'">
        <div class="result-title">审核结果</div>
      <div class="audit-result">
        <div class="result-label">审核结果</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>
          <el-button-group>
            <el-button 
              :disabled="type === 'detail'"
              :type="form.auditResult === '通过' ? 'primary' : ''" 
              @click="form.auditResult = '通过'"
            >通过</el-button>
            <el-button 
              :disabled="type === 'detail'"
              :type="form.auditResult === '驳回' ? 'primary' : ''" 
              @click="form.auditResult = '驳回'"
            >驳回</el-button>
          </el-button-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 class="comment-label">审批意见</div>
        <el-input 
          type="textarea" 
          :rows="4" 
          placeholder="请输入审批意见" 
          v-model="form.auditComment"
          :disabled="type === 'detail'"
        ></el-input>
      </div>
    </div>

@@ -308,6 +329,7 @@
</template>

<script>
import { geDetailTabletList,approve } from "@/api/application-batch"
export default {
  name: "ApprovalDialog",
  props: {
@@ -322,148 +344,73 @@
        return ["audit", "detail"].indexOf(value) !== -1;
      },
    },
    rowData: {
      type: Object,
      default: () => ({}),
    },
    id: {
      type: [Number],
      required: true,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      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', ''
      hasWarning: false,
      tableData: [],
      form: {
        auditResult: "pass",
        auditResult: "通过",
        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,
        },
      ],
      // 审批信息
      approvalInfo: {
        approver: "",
        approvalTime: "",
        operatorName: "",
        submitTime: "",
        auditorName: "",
        auditTime: ""
      }
    };
  },
  watch: {
    visible(val) {
      this.dialogVisible = val;
      if (val) {
        this.getTableData();
      }
    },
    dialogVisible(val) {
      this.$emit("update:visible", val);
    },
    rowData: {
      handler(newVal) {
        if (newVal && Object.keys(newVal).length > 0) {
          // 如果有传入数据，可以在这里处理
        }
      },
      immediate: true,
    },
    }
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
    async getTableData() {
      this.loading = true;
      try {
        const res = await geDetailTabletList({
          applyId: this.id,
          pageNum: 1,
          pageSize: 999
        });
        if (res.code === 200) {
          this.tableData = res.data.records.map(item => ({
            ...item,
            hasError: Object.keys(item).some(key => key.endsWith('Warn') && item[key])
          }));
          this.hasWarning = this.tableData.some(item => item.hasError);
          this.approvalInfo = {...res.data.placementApply};
          this.form.auditResult = this.approvalInfo.status === 1 ? '通过' : '驳回';
          this.form.auditComment = this.approvalInfo.reason;
        }
      } catch (error) {
        console.error('获取表格数据失败:', error);
        this.$message.error('获取数据失败，请稍后重试');
      } finally {
        this.loading = false;
      }
    },
    tableRowClassName({ row }) {
      if (row.hasError) {
        return "error-row";
        return "warning-row";
      }
      return "";
    },
@@ -471,18 +418,36 @@
      this.dialogVisible = false;
      this.resetForm();
    },
    submitAudit() {
      // 提交审核
      this.$emit("audit-submit", {
        result: this.form.auditResult,
        comment: this.form.auditComment,
      });
      this.dialogVisible = false;
      this.resetForm();
    async submitAudit() {
      if (!this.form.auditComment.trim()) {
        this.$message.warning("请输入审批意见");
        return;
      }
      
      const params = {
        applyId: Number(this.id),  // 确保是数字类型
        reason: this.form.auditComment.trim(),
        status: Number(this.form.auditResult === '通过' ? 1 : 2)  // 确保是数字类型
      };
      
      try {
        const res = await approve(params);
        if (res.code === 200) {
          this.$message.success("审批成功");
          this.$emit("refresh");
          this.dialogVisible = false;
          this.resetForm();
        } else {
          this.$message.error(res.msg || "审批失败");
        }
      } catch (error) {
        console.error('审批失败:', error);
        this.$message.error(error?.response?.data?.message || "审批失败");
      }
    },
    resetForm() {
      this.form = {
        auditResult: "pass",
        auditResult: "通过",
        auditComment: "",
      };
    },
@@ -499,7 +464,8 @@
.table-container {
  flex: 1;
  margin-right: 20px;
  overflow-x: auto;
  overflow: hidden;
  position: relative;
}

.approval-info {
@@ -594,26 +560,97 @@

.audit-section {
  margin-top: 20px;
  padding: 0 20px;
  display: flex;
  /* align-items: center; */
  width: 100%;
  margin-top: 20px;
}

.audit-result {
  margin-bottom: 15px;
  margin-bottom: 20px;
  display: flex;
  /* align-items: center; */
}

.result-title,
.comment-title {
  font-weight: bold;
  margin-bottom: 10px;
.result-label,
.comment-label {
  font-size: 14px;
  color: #606266;
  margin-right: 15px;
  min-width: 70px;
}

.result-options {
  flex: 1;
}

.result-options .el-button {
  width: 80px;
}

.audit-comment {
  display: flex;
  align-items: flex-start;
  flex:1;
  padding-left: 60px;
}

.audit-comment .el-textarea {
  flex: 1;
}

.el-button-group {
  display: inline-block;
}

.el-button-group .el-button {
  margin-right: 0;
}

.el-button-group .el-button:first-child {
  border-right: 1px solid #DCDFE6;
}

.dialog-footer {
  text-align: right;
}

/* 自定义滚动条样式 */
.el-table {
  max-height: 400px;
}

.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  border-radius: 4px;
}

.el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #f5f7fa;
}

/* loading样式优化 */
::v-deep .el-loading-spinner .el-icon-loading {
  font-size: 30px;
  color: #409EFF;
}

::v-deep .el-loading-spinner .el-loading-text {
  font-size: 14px;
  margin-top: 8px;
  color: #409EFF;
}
</style>

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

 src/views/applicationBatchList/components/DetailDialog.vue

New file
@@ -0,0 +1,321 @@
<template>
  <el-dialog 
    title="安置户申请信息详情" 
    :visible.sync="dialogVisible" 
    width="80%" 
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <div class="detail-form" v-loading="loading">
      <el-form :model="formData" label-width="180px" :disabled="true">
        <!-- 基本信息 -->
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="镇（街道）">
              <el-input v-model="formData.street"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所在村（社区）">
              <el-input v-model="formData.community"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="拆迁项目名称">
              <el-input v-model="formData.projectName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="拆迁时间">
              <el-input v-model="formData.demolitionTime"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="户主姓名">
              <el-input v-model="formData.householdHead"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="户主身份号">
              <el-input v-model="formData.idCard"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话">
              <el-input v-model="formData.mobile"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 本次安置人数 -->
        <div class="section-title">本次安置人数</div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="集体经济组织成员">
              <div class="input-with-unit">
                <el-input v-model="formData.currentCollectiveNum">
                  <template slot="append">人</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="非集体经济组织成员">
              <div class="input-with-unit">
                <el-input v-model="formData.currentNoCollectiveNum">
                  <template slot="append">人</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合计">
              <div class="input-with-unit">
                <el-input v-model="formData.currentCount">
                  <template slot="append">人</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="待安置家庭成员姓名">
              <el-input v-model="formData.waitFamilyNames"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="待安置人员应安置面积合计" label-width="215px">
              <div class="input-with-unit">
                <el-input v-model="formData.waitFamilyArea">
                  <template slot="append">㎡</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 补偿金额 -->
        <div class="section-title">补偿金额</div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="新建商品住房/商业用房/停车位" label-width="215px">
              <div class="input-with-unit">
                <el-input v-model="formData.compensationNewAmount">
                  <template slot="append">万元</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="二手住房" label-width="215px">
              <div class="input-with-unit">
                <el-input v-model="formData.compensationOldAmount">
                  <template slot="append">万元</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合计" label-width="215px">
              <div class="input-with-unit">
                <el-input v-model="formData.compensationSum">
                  <template slot="append">万元</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="25%首付款" label-width="215px">
              <div class="input-with-unit">
                <el-input v-model="formData.downPaymentAmount">
                  <template slot="append">万元</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="每季度需支付款项" label-width="215px">
              <div class="input-with-unit">
                <el-input v-model="formData.quarterPayAmount">
                  <template slot="append">万元</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="过渡补贴" label-width="215px">
              <div class="input-with-unit">
                <el-input v-model="formData.subsidyAmount">
                  <template slot="append">万元</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" label-width="215px">
              <el-input
                type="textarea"
                v-model="formData.remark"
                :rows="3"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="购房差异情况" label-width="215px">
              <el-input
                type="textarea"
                v-model="formData.situation"
                :rows="3"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDetail } from "@/api/application-batch"

export default {
  name: "DetailDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      formData: {
        street: '', // 镇（街道）
        community: '', // 所在村（社区）
        projectName: '', // 拆迁项目名称
        demolitionTime: '', // 拆迁时间
        householdHead: '', // 户主姓名
        idCard: '', // 户主身份号
        mobile: '', // 联系电话
        currentCollectiveNum: '', // 集体经济组织成员
        currentNoCollectiveNum: '', // 非集体经济组织成员
        currentCount: '', // 合计人数
        waitFamilyNames: '', // 待安置家庭成员姓名
        waitFamilyArea: '', // 待安置人员应安置面积合计
        compensationNewAmount: '', // 新建商品住房/商业用房/停车位
        compensationOldAmount: '', // 二手住房
        compensationSum: '', // 合计金额
        downPaymentAmount: '', // 25%首付款
        quarterPayAmount: '', // 每季度需支付款项
        subsidyAmount: '', // 过渡补贴
        remark: '', // 备注
        situation: '', // 购房差异情况
      }
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val;
      if (val) {
        this.getDetailData();
      }
    },
    dialogVisible(val) {
      this.$emit('update:visible', val);
    }
  },
  methods: {
    async getDetailData() {
      this.loading = true;
      try {
        const res = await getDetail({
          id: this.id,
        });
        if (res.code === 200) {
          this.formData = res.data;
        }
      } catch (error) {
        console.error('获取详情数据失败:', error);
        this.$message.error('获取详情数据失败，请稍后重试');
      } finally {
        this.loading = false;
      }
    },
    closeDialog() {
      this.dialogVisible = false;
    }
  }
}
</script>

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

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin: 30px 0 20px;
  padding-left: 10px;
  border-left: 4px solid #409EFF;
}

.input-with-unit {
  width: 100%;
  
  :deep(.el-input-group__append) {
    background-color: #f5f7fa;
    color: #606266;
    border-left: 1px solid #dcdfe6;
  }
}

.dialog-footer {
  text-align: right;
}

:deep(.el-form-item) {
  margin-bottom: 22px;
}

:deep(.el-input.is-disabled .el-input__inner) {
  color: #606266;
  background-color: #f5f7fa;
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
  color: #606266;
  background-color: #f5f7fa;
}

:deep(.el-textarea__inner) {
  font-family: Arial, sans-serif;
  padding: 10px 15px;
  line-height: 1.5;
}
</style> 

 src/views/applicationBatchList/components/UploadDialog.vue

@@ -6,7 +6,7 @@
    @close="handleClose"
  >
    <el-form ref="uploadForm" :model="form" :rules="rules" label-width="180px">
      <el-form-item label="批次号" prop="batchNumber">
      <el-form-item label="批次号" prop="batchNumber" v-if="!info.id">
        <el-input v-model="form.batchNumber" placeholder="请输入" />
      </el-form-item>
      <el-form-item :label="'导入安置申请表'" prop="file">
@@ -39,6 +39,10 @@
export default {
  name: 'UploadDialog',
  props: {
    info: {
      type: Object,
      default: () => {id:0}
    },
    visible: {
      type: Boolean,
      default: false
@@ -91,7 +95,12 @@
        
        const formData = new FormData();
        formData.append('file',this.form.file);
        formData.append('batchNumber',this.form.batchNumber);
        if(this.info.id){
          formData.append('applyId',this.info.id);
          formData.append('batchNumber',this.info.batchNumber);
        }else{
          formData.append('batchNumber',this.form.batchNumber);
        }
        // console.log('22222222222222222',formData)
        importBatch(formData)
          .then(res => {

 src/views/applicationBatchList/detail.vue

@@ -1,5 +1,5 @@
<template>
  <div class="app-container">
  <div class="app-container" v-loading="loading" element-loading-text="加载中...">
    <!-- 头部信息卡片 -->
    <div class="batch-info">
      <div class="header">
@@ -75,171 +75,123 @@
      <el-table-column prop="street" label="镇（街道）" align="center" width="80">
        <template slot-scope="scope">
          {{ scope.row.street }}
          <el-tooltip v-if="scope.row.errors && scope.row.errors.street" placement="top">
            <div slot="content">{{ scope.row.errors.street }}</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="community" label="所在村（社区）" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.community }}
          <el-tooltip v-if="scope.row.errors && scope.row.errors.community" placement="top">
            <div slot="content">{{ scope.row.errors.community }}</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">
      <el-table-column prop="demolitionTime" 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>
          {{ scope.row.demolitionTime }}
        </template>
      </el-table-column>
      <el-table-column prop="headOrIdCard" label="产主姓名" align="center" width="80">
      <el-table-column prop="householdHead" label="户主名称" align="center" width="80">
        <template slot-scope="scope">
          {{ scope.row.headOrIdCard }}
          <el-tooltip v-if="scope.row.errors && scope.row.errors.headOrIdCard" placement="top">
            <div slot="content">{{ scope.row.errors.headOrIdCard }}</div>
            <i class="el-icon-warning" style="color: #e6a23c; margin-left: 5px"></i>
          </el-tooltip>
          {{ scope.row.householdHead }}
        </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>
          <el-tooltip v-if="scope.row.idCardExistsWarn == 1" placement="top">
            <div slot="content">{{ "身份证不在安置库" }}</div>
            <i class="el-icon-warning" style="color: #e6a23c; margin-left: 5px"></i>
          </el-tooltip>
          <el-tooltip v-if="scope.row.idCardNoWarn == 1" placement="top">
            <div slot="content">{{ "身份证重复" }}</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">
      <el-table-column prop="mobile" 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>
          {{ scope.row.mobile }}
        </template>
      </el-table-column>
      <el-table-column label="本次安置人数（人）" align="center">
        <el-table-column prop="currentCollectiveNum" label="集体经济组织成员" align="center" width="120">
          <template slot-scope="scope">
            {{ scope.row.currentCollectiveNum }}
          </template>
        </el-table-column>
        <el-table-column prop="currentNoCollectiveNum" label="非集体经济组织成员" align="center" width="120">
          <template slot-scope="scope">
            {{ scope.row.currentNoCollectiveNum }}
          </template>
        </el-table-column>
        <el-table-column prop="currentCount" label="合计" align="center" width="60">
          <template slot-scope="scope">
            {{ scope.row.currentCount }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="waitFamilyNames" label="待安置家庭成员姓名" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.waitFamilyNames }}
          <el-tooltip v-if="scope.row.waitFamilyNamesWarn" placement="top">
            <div slot="content">{{ scope.row.waitFamilyNamesWarn }}</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">
      <el-table-column prop="waitFamilyArea" 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>
          {{ scope.row.waitFamilyArea }}
          <el-tooltip v-if="scope.row.waitFamilyAreaWarn" placement="top">
            <div slot="content">{{ scope.row.waitFamilyAreaWarn }}</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">
        <el-table-column prop="compensationNewAmount" 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>
            {{ scope.row.compensationNewAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="secondPayment" label="二手住房" align="center" width="80">
        <el-table-column prop="compensationOldAmount" 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>
            {{ scope.row.compensationOldAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="totalPayment" label="合计" align="center" width="60">
        <el-table-column prop="compensationSum" 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>
            {{ scope.row.compensationSum }}
            <el-tooltip v-if="scope.row.compensationSumWarn" placement="top">
              <div slot="content">{{ scope.row.compensationSumWarn }}</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">
      <el-table-column prop="downPaymentAmount" 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>
          {{ scope.row.downPaymentAmount }}
        </template>
      </el-table-column>
      <el-table-column prop="remainingPayment" label="每季度需支付款项（万元）" align="center" width="120">
      <el-table-column prop="quarterPayAmount" 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">
          {{ scope.row.quarterPayAmount }}
          <el-tooltip v-if="scope.row.quarterPayAmountWarn" placement="top">
            <div slot="content">
              {{ scope.row.errors.remainingPayment }}
              {{ scope.row.quarterPayAmountWarn }}
            </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">
      <el-table-column prop="subsidyAmount" 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>
          {{ scope.row.subsidyAmount }}
          <el-tooltip v-if="scope.row.subsidyAmountWarn" placement="top">
            <div slot="content">{{ scope.row.subsidyAmountWarn }}</div>
            <i class="el-icon-warning" style="color: #e6a23c; margin-left: 5px"></i>
          </el-tooltip>
        </template>
@@ -247,25 +199,17 @@
      <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">
      <el-table-column prop="situation" 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>
          {{ scope.row.situation }}
        </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 === '待审核'">
          <template v-if="batchInfo.status == '0'">
            <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>
@@ -279,13 +223,31 @@
        :current-page="queryParams.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" />
    </div>

    <!-- 上传组件 -->
    <upload-dialog ref="uploadDialog" :info="batchInfo" :visible.sync="uploadDialogVisible"
      @success="handleUploadSuccess" />

    <!-- 详情弹窗 -->
    <DetailDialog 
      :visible.sync="detailDialogVisible"
      :id="currentId"
    />
  </div>
</template>

<script>
import { geDetailTabletList } from "@/api/application-batch";
import { geDetailTabletList,delDetail } from "@/api/application-batch";
import { downLoad, exportExcell } from "@/utils";
import UploadDialog from "./components/UploadDialog.vue";
import DetailDialog from './components/DetailDialog.vue'

export default {
  name: "ApplicationBatchDetail",
  components: {
    UploadDialog,
    DetailDialog
  },
  data() {
    return {
      batchInfo: {
@@ -304,6 +266,8 @@
      },
      // 加载状态
      loading: false,
      // 上传组件
      uploadDialogVisible: false,
      // 总条数
      total: 0,
      // 表格数据
@@ -317,6 +281,10 @@
        community: undefined,
        headOrIdCard: undefined,
      },
      // 详情弹窗
      detailDialogVisible: false,
      // 当前记录的ID
      currentId: "",
    };
  },
  created() {
@@ -332,20 +300,20 @@
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 这里添加实际的API调用获取数据
      setTimeout(() => {
        this.loading = false;
        geDetailTabletList({
          ...this.queryParams,
          applyId: this.batchInfo.id,
        }).then((res) => {
      geDetailTabletList({
        ...this.queryParams,
        applyId: this.batchInfo.id,
      })
        .then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
          this.batchInfo = {
            ...res.data.placementApply,
          };
        })
        .finally(() => {
          this.loading = false;
        });
      }, 500);
    },
    /** 搜索按钮操作 */
    handleQuery() {
@@ -371,32 +339,75 @@
    /** 新增安置户信息 */
    handleAddHousehold() {
      // 实现新增安置户逻辑
      this.$router.push({
        path: "/applicationBatchList/detailInfo",
        query: {
          parentId: this.batchInfo.id,
          type: "add",
        },
      });
    },
    /** 下载导入模板 */
    handleDownloadTemplate() {
      // 实现下载模板逻辑
      downLoad("/placement-apply/download-template", "安置申请表.xlsx");
    },
    /** 批量导入 */
    handleBatchImport() {
      // 实现批量导入逻辑
      this.uploadDialogVisible = true;
    },
    /** 全部导出 */
    handleExportAll() {
      // 实现全部导出逻辑
      this.$message.success("全部数据导出成功");
    async handleExportAll() {
      // 实现全部导出逻辑  /api/placement-apply/problem-export
      let res = await exportExcell(
        "安置数据表.xlsx",
        {...this.queryParams,applyId:this.batchInfo.id},
        "/placement-apply/exports"
      );
      if (res) {
        this.$message.success("全部数据导出成功");
      }
    },
    /** 问题数据导出 */
    handleExportIssueData() {
    async handleExportIssueData() {
      // 实现问题数据导出逻辑
      this.$message.success("问题数据导出成功");
      let res = await exportExcell(
        "安置数据表.xlsx",
        {...this.queryParams,applyId:this.batchInfo.id},
        "/placement-apply/problem-export"
      );
      if (res) {
        this.$message.success("问题数据导出成功");
      }
    },
    /** 安置户详情 */
    handleHouseholdDetail(row) {
      // 实现安置户详情查看逻辑
      if(this.batchInfo.status == '0'){
        this.$router.push({
          path: "/applicationBatchList/detailInfo",
          query: {
            parentId: this.batchInfo.id,
            type: "detail",
            id: row.id,
          },
        });
      }else{
        this.currentId = row.id;
        this.detailDialogVisible = true;
      }
    },
    /** 安置户编辑 */
    handleHouseholdEdit(row) {
      // 实现安置户编辑逻辑
      this.$router.push({
        path: "/applicationBatchList/detailInfo",
        query: {
          parentId: this.batchInfo.id,
          type: "edit",
          id: row.id,
        },
      });
    },
    /** 安置户删除 */
    handleHouseholdDelete(row) {
@@ -407,8 +418,12 @@
      })
        .then(() => {
          // 实现删除逻辑
          this.$message.success("删除成功");
          this.getList();
          delDetail({id:row.id}).then(res=>{
            if(res){
              this.$message.success("删除成功");
              this.getList();
            }
          })
        })
        .catch(() => { });
    },
@@ -421,6 +436,23 @@
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    /** 设置行的className */
    tableRowClassName({ row }) {
      console.log(row, "11111111111");
      if (row.compensationAmountWarn === 1) {
        return "warning-row";
      }
      return "";
    },
    /** 上传成功 */
    handleUploadSuccess() {
      this.uploadDialogVisible = false;
      this.getList();
      this.$message({
        type: "success",
        message: "导入成功！",
      });
    },
  },
};
@@ -486,4 +518,21 @@
  margin-top: 15px;
  text-align: right;
}

::v-deep .warning-row {
  background-color: #faa2a2 !important;
}

/* ::v-deep .warning-row:hover > td {
  background-color: #faa2a2 !important;
}

::v-deep .warning-row .el-button--text {
  color: #000 !important;
}

::v-deep .warning-row .el-button--text:hover {
  color: #000 !important;
  background-color: #faa2a2 !important;
} */
</style>

 src/views/applicationBatchList/detailInfo.vue

New file
@@ -0,0 +1,437 @@
<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="form" :model="form" :rules="rules" label-width="180px" size="small" :disabled="isViewMode">
        <!-- 基本信息 -->
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="镇（街道）" prop="street" required>
              <el-input v-model="form.street" placeholder="请输入" clearable style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所在村（社区）" prop="community" required>
              <el-input v-model="form.community" placeholder="请输入" clearable style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="拆迁项目名称" prop="projectName" required>
              <el-input v-model="form.projectName" placeholder="请输入" clearable style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="拆迁时间" prop="demolitionTime">
              <el-date-picker 
                v-model="form.demolitionTime" 
                type="date" 
                placeholder="请选择拆迁时间" 
                style="width: 100%;" 
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="户主姓名" prop="householdHead" required>
              <el-input v-model="form.householdHead" placeholder="请输入" clearable style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="户主身份号" prop="idCard" required>
              <el-input v-model="form.idCard" placeholder="请输入" clearable style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="mobile" required>
              <el-input v-model="form.mobile" placeholder="请输入" clearable style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 本次安置人数 -->
        <div class="section-title">本次安置人数</div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="集体经济组织成员" prop="currentCollectiveNum" required>
              <div class="input-with-unit">
                <el-input v-model="form.currentCollectiveNum" placeholder="请输入" clearable style="width: 100%;" >
                    <template slot="append">人</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="非集体经济组织成员" prop="currentNoCollectiveNum" required>
              <div class="input-with-unit">
                <el-input v-model="form.currentNoCollectiveNum" placeholder="请输入" clearable style="width: 100%;" >
                    <template slot="append">人</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合计" prop="currentCount">
              <div class="input-with-unit">
                <el-input v-model="form.currentCount" placeholder="自动计算" disabled style="width: 100%;" >
                    <template slot="append">人</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="待安置家庭成员姓名" prop="waitFamilyNames" required>
              <el-input v-model="form.waitFamilyNames" placeholder="请输入" clearable style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="待安置人员应安置面积合计" label-width="215px" prop="waitFamilyArea" required>
              <div class="input-with-unit">
                <el-input v-model="form.waitFamilyArea" placeholder="请输入" clearable style="width: 100%;" >
                    <template slot="append">㎡</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 补偿金额 -->
        <div class="section-title">补偿金额</div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="新建商品住房/商业用房/停车位" label-width="215px" prop="compensationNewAmount" required>
              <div class="input-with-unit">
                <el-input v-model="form.compensationNewAmount" placeholder="请输入" clearable style="width: 100%;" >
                    <template slot="append">万元</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="二手住房"  label-width="215px" prop="compensationOldAmount" required>
              <div class="input-with-unit">
                <el-input v-model="form.compensationOldAmount" placeholder="请输入" clearable style="width: 100%;" >
                    <template slot="append">万元</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合计"  label-width="215px" prop="compensationSum">
              <div class="input-with-unit">
                <el-input v-model="form.compensationSum" placeholder="自动计算" disabled style="width: 100%;" >
                    <template slot="append">万元</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="25%首付款"  label-width="215px" prop="downPaymentAmount" required>
              <div class="input-with-unit">
                <el-input v-model="form.downPaymentAmount" placeholder="请输入" clearable style="width: 100%;" >
                    <template slot="append">万元</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="每季度需支付款项"  label-width="215px" prop="quarterPayAmount" required>
              <div class="input-with-unit">
                <el-input v-model="form.quarterPayAmount" placeholder="请输入" clearable style="width: 100%;" >
                    <template slot="append">万元</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="过渡补贴"  label-width="215px" prop="subsidyAmount" required>
              <div class="input-with-unit">
                <el-input v-model="form.subsidyAmount" placeholder="请输入" clearable style="width: 100%;" >
                    <template slot="append">万元</template>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注"  label-width="215px" prop="remark">
              <el-input
                type="textarea"
                v-model="form.remark"
                placeholder="请输入备注信息"
                :rows="3"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="购房差异情况"  label-width="215px" prop="situation">
              <el-input
                type="textarea"
                v-model="form.situation"
                placeholder="请输入购房差异情况说明"
                :rows="3"
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 按钮区域 -->
      <div class="form-footer">
          <el-button v-if="isAddMode" type="primary" @click="submitForm">提交</el-button>
          <el-button v-if="isEditMode" type="primary" @click="submitForm">保存</el-button>
          <el-button @click="goBack">返回</el-button>
        </div>
    </el-card>
  </div>
</template>

<script>
import { addDetail, getDetail, editDetail } from '@/api/application-batch'
export default {
  name: 'ApplayPerson',
  data() {
    return {
      form: {
        street: '', // 镇（街道）
        community: '', // 所在村（社区）
        projectName: '', // 拆迁项目名称
        demolitionTime: '', // 拆迁时间
        householdHead: '', // 户主姓名
        idCard: '', // 户主身份号
        mobile: '', // 联系电话
        currentCollectiveNum: '', // 集体经济组织成员
        currentNoCollectiveNum: '', // 非集体经济组织成员
        currentCount: '', // 合计人数
        waitFamilyNames: '', // 待安置家庭成员姓名
        waitFamilyArea: '', // 待安置人员应安置面积合计
        compensationNewAmount: '', // 新建商品住房/商业用房/停车位
        compensationOldAmount: '', // 二手住房
        compensationSum: '', // 合计金额
        downPaymentAmount: '', // 25%首付款
        quarterPayAmount: '', // 每季度需支付款项
        subsidyAmount: '', // 过渡补贴
        remark: '', // 备注
        situation: '', // 购房差异情况
        placementApplyId: this.$route.query.parentId,
      },
      rules: {
        street: [{ required: true, message: '请输入镇（街道）', trigger: 'blur' }],
        community: [{ required: true, message: '请输入所在村（社区）', trigger: 'blur' }],
        projectName: [{ required: true, message: '请输入拆迁项目名称', trigger: 'blur' }],
        householdHead: [{ required: true, message: '请输入户主姓名', trigger: 'blur' }],
        idCard: [
          { required: true, message: '请输入户主身份号', trigger: 'blur' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        currentCollectiveNum: [{ required: true, message: '请输入集体经济组织成员人数', trigger: 'blur' }],
        currentNoCollectiveNum: [{ required: true, message: '请输入非集体经济组织成员人数', trigger: 'blur' }],
        waitFamilyNames: [{ required: true, message: '请输入待安置家庭成员姓名', trigger: 'blur' }],
        waitFamilyArea: [{ required: true, message: '请输入待安置人员应安置面积合计', trigger: 'blur' }],
        compensationNewAmount: [{ required: true, message: '请输入新建商品住房/商业用房/停车位金额', trigger: 'blur' }],
        compensationOldAmount: [{ required: true, message: '请输入二手住房金额', trigger: 'blur' }],
        downPaymentAmount: [{ required: true, message: '请输入25%首付款', trigger: 'blur' }],
        quarterPayAmount: [{ required: true, message: '请输入每季度需支付款项', trigger: 'blur' }],
        subsidyAmount: [{ required: true, message: '请输入过渡补贴', trigger: 'blur' }],
        situation: [{ required: true, message: '请输入购房差异情况', trigger: 'blur' }]
      },
      originalForm: null // 用于存储编辑前的原始数据
    }
  },
  computed: {
    // 从路由获取参数
    parentId() {
      return this.$route.query.parentId
    },
    type() {
      return this.$route.query.type || 'add'
    },
    id() {
      return this.$route.query.id
    },
    // 判断是否是查看模式
    isViewMode() {
      return this.type === 'detail'
    },
    // 判断是否是编辑模式
    isEditMode() {
      return this.type === 'edit'
    },
    // 判断是否是添加模式
    isAddMode() {
      return this.type === 'add'
    }
  },
  created() {
    this.initData()
  },
  watch: {
    // 监听集体和非集体成员人数，自动计算总人数
    'form.currentCollectiveNum': {
      handler(val) {
        this.calculateTotalMember()
      }
    },
    'form.currentNoCollectiveNum': {
      handler(val) {
        this.calculateTotalMember()
      }
    },
    // 监听新建和二手房金额，自动计算总金额
    'form.compensationNewAmount': {
      handler(val) {
        this.calculateTotalAmount()
      }
    },
    'form.compensationOldAmount': {
      handler(val) {
        this.calculateTotalAmount()
      }
    }
  },
  methods: {
    async initData() {
      if (this.id && (this.isEditMode || this.isViewMode)) {
        try {
          const response = await getDetail({id: this.id})
          if (response.code === 200) {
            this.form = response.data
            this.originalForm = JSON.parse(JSON.stringify(response.data))
          } else {
            this.$message.error(response.msg || '获取详情数据失败')
          }
        } catch (error) {
          this.$message.error('获取详情数据失败')
          console.error('获取详情数据失败:', error)
        }
      }
    },
    async submitForm() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            const params = {
              ...this.form,
              placementApplyId: this.parentId
            }
            
            let response
            if (this.isAddMode) {
              response = await addDetail(params)
              this.$message.success('添加成功')
            } else if (this.isEditMode) {
              response = await editDetail({...params, id: this.id})
              this.$message.success('编辑成功')
            }

            if (response.code === 200) {
              this.goBack()
            } else {
              this.$message.error(response.msg || (this.isAddMode ? '添加失败' : '编辑失败'))
            }
          } catch (error) {
            this.$message.error(this.isAddMode ? '添加失败' : '编辑失败')
            console.error('提交表单失败:', error)
          }
        } else {
          this.$message.error('请填写完整信息')
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    // 计算总人数
    calculateTotalMember() {
      const collective = parseFloat(this.form.currentCollectiveNum) || 0
      const nonCollective = parseFloat(this.form.currentNoCollectiveNum) || 0
      this.form.currentCount = collective + nonCollective
    },
    // 计算总金额
    calculateTotalAmount() {
      const newBuilding = parseFloat(this.form.compensationNewAmount) || 0
      const secondHand = parseFloat(this.form.compensationOldAmount) || 0
      this.form.compensationSum = newBuilding + secondHand
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.box-card {
  margin-bottom: 20px;
  padding: 20px;

  :deep(.el-form-item) {
    margin-bottom: 22px;
    
    
  }

  :deep(.el-input-group__append) {
    padding: 0 15px;
  }
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin: 30px 0 20px;
  padding-left: 10px;
  border-left: 4px solid #409EFF;
}

.input-with-unit {
  width: 100%;
  
  :deep(.el-input-group__append) {
    background-color: #f5f7fa;
    color: #606266;
    border-left: 1px solid #dcdfe6;
  }
}

.form-footer {
  text-align: center;
  margin-top: 40px;
  
  .el-button {
    padding: 12px 35px;
    margin: 0 10px;
  }
}

:deep(.el-textarea__inner) {
  font-family: Arial, sans-serif;
  padding: 10px 15px;
  line-height: 1.5;
}

:deep(.el-date-editor) {
  width: 100% !important;
}
</style>

 src/views/applicationBatchList/list.vue

@@ -156,8 +156,7 @@
      ref="approvalDialog"
      :visible.sync="approvalDialogVisible"
      :type="approvalType"
      :row-data="currentRow"
      @audit-submit="handleApprovalSubmit"
      :id="currentRow.id"
    />

    <!-- 上传组件 -->
@@ -277,25 +276,9 @@
          path: "/applicationBatchList/detail",
          query: {
            id: row.id,
            batchNumber: row.batchNumber,
            waitFamilyArea: row.waitFamilyArea || 0,
            personNum: row.personNum,
            totalAmount: row.totalAmount,
            status: row.status, //0待审核 1已通过 2已驳回
          },
        });
      }
    },
    /** 审核提交处理 */
    handleApprovalSubmit(data) {
      // 处理审核提交
      const { result, comment } = data;
      this.$message({
        type: "success",
        message: result === "pass" ? "审核通过成功！" : "审核驳回成功！",
      });
      // 刷新列表
      this.getList();
    },
    /** 删除按钮操作 */
    handleDelete(row) {

 src/views/login.vue

@@ -1,7 +1,7 @@
<template>
  <div class="login">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">若依后台管理系统</h3>
      <h3 class="title">崇州自主安置管理后台</h3>
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"

 src/views/placement-batch/index.vue

@@ -152,13 +152,13 @@
    },
    /** 导入资金批次 */
    importPrice(form) {
      console.log('//////////////',form)
      console.log('//////////////', form)
      let formData = new FormData()
      formData.append('assetFile', form.assetFile)
      formData.append('householdFile', form.householdFile)
      formData.append('batchNumber', form.batchNumber)
      importPlacementBatch(formData).then(res => {
        if(res.code == 200) {
        if (res.code == 200) {
          this.$message.success('导入成功')
          this.dialogVisible = false
          this.getList()
@@ -168,6 +168,7 @@
    /** 查看详情按钮操作 */
    handleView(row) {
      // TODO: 实现查看详情逻辑
      this.$router.push('/placement/batch/personnel?id=' + row.id)
    },
    /** 审核按钮操作 */
    handleApproval(row) {
@@ -176,18 +177,18 @@
    /** 删除按钮操作 */
    handleDelete(row) {
      // TODO: 实现删除逻辑
      this.$confirm('确定删除该安置批次吗？', '提示', { 
      this.$confirm('确定删除该安置批次吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePlacementBatch({id: row.id}).then(res => {
          if(res.code == 200) {
        deletePlacementBatch({ id: row.id }).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getList()
          }
        })
      })  
      })
    }
  }
}

 src/views/placement-batch/person.vue

@@ -1,188 +1,205 @@
<template>
    <div class="app-container">
      <!-- 搜索区域 -->
      <div class="filter-container">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <el-form-item label="镇街">
            <el-input v-model="queryParams.town" size="small" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item label="所在村(社区)">
            <el-input v-model="queryParams.village" size="small" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input v-model="queryParams.projectName" size="small" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item label="户主姓名">
            <el-input v-model="queryParams.householderName" size="small" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="handleQuery">查询</el-button>
            <el-button type="primary" plain size="small" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
  
      <!-- Tab切换区域 -->
      <div class="tab-container">
        <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
          <el-tab-pane label="资金表" name="fullReport"></el-tab-pane>
          <el-tab-pane label="购房信息表" name="houseInfo"></el-tab-pane>
        </el-tabs>
      </div>
  
      <!-- 统计卡片区域 -->
      <div class="statistics-container">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="statistics-card" shadow="hover">
              <div class="card-amount">2,183万元</div>
              <div class="card-title">补偿资金总金额</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="statistics-card" shadow="hover">
              <div class="card-amount">2,183万元</div>
              <div class="card-title">首付款总金额</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="statistics-card" shadow="hover">
              <div class="card-amount">2,183万元</div>
              <div class="card-title">过渡补贴总金额</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="statistics-card" shadow="hover">
              <div class="card-amount">2,183万元</div>
              <div class="card-title">季度款总金额</div>
            </el-card>
          </el-col>
        </el-row>
      </div>
  
      <!-- 功能按钮区域 -->
      <div class="button-container">
        <el-button type="primary" size="small" @click="handleExport">新增安置户记录</el-button>
        <el-button type="success" size="small" @click="handleDownloadTemplate">下载导入模板</el-button>
        <el-button type="primary" size="small" @click="handleImport">批量导入</el-button>
        <el-button type="danger" size="small" @click="handleExportSelected">问题数据导出</el-button>
      </div>
  
      <div v-if="activeTab === 'fullReport'">
      <!-- 表格区域 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="town" label="镇（街道）" min-width="120" align="center" />
        <el-table-column prop="projectName" label="拆迁项目名称" min-width="180" align="center" />
        <el-table-column prop="village" label="所在村（社区）" min-width="120" align="center" />
        <el-table-column prop="householderName" label="户主姓名" min-width="100" align="center" />
        <el-table-column prop="idCard" label="身份证号" min-width="180" align="center" />
        <el-table-column prop="familySize" label="应安置人数（人）" min-width="140" align="center" />
        <el-table-column label="所有家庭人员应安置面积（㎡）" min-width="160" align="center"/>
        <el-table-column label="补偿单位标准（万元）" min-width="160" align="center">
          <el-table-column prop="compensationAmount" label="新建商品住房、商业用房、停车位" min-width="160" align="center" />
          <el-table-column prop="buildingArea" label="二手住房" min-width="150" align="center" />
        </el-table-column>
        <el-table-column prop="compensationAmount" label="补偿资金总额（万元）" min-width="160" align="center" />
        <el-table-column prop="buildingArea" label="25%首付款（㎡）" min-width="150" align="center" />
        <el-table-column prop="temporaryAmount" label="每季度需支付款项（万元）" min-width="180" align="center" />
        <el-table-column prop="temporaryAmount" label="过渡补贴（万元）" min-width="180" align="center" />
        <el-table-column label="操作" fixed="right" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleView(scope.row)">详情</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @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"
      />
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="filter-container">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="镇街">
          <el-input v-model="queryParams.street" size="small" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="所在村(社区)">
          <el-input v-model="queryParams.community" size="small" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="queryParams.projectName" size="small" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="户主姓名">
          <el-input v-model="queryParams.householdHead" size="small" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="handleQuery">查询</el-button>
          <el-button type="primary" plain size="small" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="activeTab === 'houseInfo'">
      <!-- 购房信息表格 -->
      <el-table
        v-loading="loading"
        :data="houseTableData"
        border
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="batchNo" label="镇（街道）" min-width="100" align="center" />
        <el-table-column prop="batchNo" label="拆迁项目名称" min-width="100" align="center" />
        <el-table-column prop="batchNo" label="所在村（社区）" min-width="100" align="center" />
        <el-table-column prop="batchNo" label="拆迁时间" min-width="100" align="center" />
        <el-table-column prop="householderName" label="户主姓名" min-width="100" align="center" />
        <el-table-column prop="idCard" label="身份证号" min-width="180" align="center" />
        <el-table-column prop="householderName" label="联系电话" min-width="100" align="center" />
        <el-table-column prop="householderName" label="本次安置人数（人）" min-width="100" align="center" >
          <el-table-column prop="householderName" label="集体经济组织成员" min-width="100" align="center" />
          <el-table-column prop="householderName" label="非集体经济组织成员" min-width="100" align="center" />
          <el-table-column prop="householderName" label="合计" min-width="100" align="center" />
        </el-table-column>
        <el-table-column prop="householderName" label="待安置家庭成员姓名" min-width="100" align="center" />
        <el-table-column prop="householderName" label="待安置人员应安置面积合计（㎡）" min-width="100" align="center" />
        <el-table-column prop="householderName" label="补偿金额（万元）" min-width="100" align="center" >
          <el-table-column prop="householderName" label="新建商品住房、商业用房、停车位" min-width="100" align="center" />
          <el-table-column prop="householderName" label="二手住房" min-width="100" align="center" />
          <el-table-column prop="householderName" label="合计" min-width="100" align="center" />
        </el-table-column>
        <el-table-column prop="householderName" label="25%首付款（万元）" min-width="100" align="center" />
        <el-table-column prop="householderName" label="每季度需支付款项（万元）" min-width="100" align="center" />
        <el-table-column prop="householderName" label="过渡补贴（万元）" min-width="100" align="center" />
        <el-table-column prop="householderName" label="备注" min-width="100" align="center" />
        <el-table-column prop="householderName" label="凭证发放时间" min-width="100" align="center" />
        <el-table-column prop="householderName" label="购房时间" min-width="100" align="center" />
        <el-table-column prop="householderName" label="成交金额（万元）" min-width="100" align="center" />
        <el-table-column prop="householderName" label="新建商品住房" min-width="100" align="center" >
          <el-table-column prop="householderName" label="楼盘名称" min-width="100" align="center" />
          <el-table-column prop="householderName" label="面积（㎡）" min-width="100" align="center" />
          <el-table-column prop="householderName" label="套数（套）" min-width="100" align="center" />
        </el-table-column>
        <el-table-column prop="householderName" label="二手住房" min-width="100" align="center" >
          <el-table-column prop="householderName" label="小区名称" min-width="100" align="center" />
          <el-table-column prop="householderName" label="面积（㎡）" min-width="100" align="center" />
          <el-table-column prop="householderName" label="套数（套）" min-width="100" align="center" />
        </el-table-column>
        <el-table-column prop="householderName" label="新建商业用房" min-width="100" align="center" >
          <el-table-column prop="householderName" label="楼盘名称" min-width="100" align="center" />
          <el-table-column prop="householderName" label="面积（㎡）" min-width="100" align="center" />
          <el-table-column prop="householderName" label="套数（套）" min-width="100" align="center" />
        </el-table-column>
        <el-table-column prop="householderName" label="新建停车位" min-width="100" align="center" >
          <el-table-column prop="householderName" label="楼盘名称" min-width="100" align="center" />
          <el-table-column prop="householderName" label="金额（万元）" min-width="100" align="center" />
          <el-table-column prop="householderName" label="个数（个）" min-width="100" align="center" />
        </el-table-column>
        <el-table-column prop="householderName" label="自主购房协议签订时间" min-width="100" align="center" />
        <el-table-column prop="householderName" label="25%补偿款及过渡补贴支付时间" min-width="100" align="center" />
        <el-table-column prop="householderName" label="剩余款项支付时间" min-width="100" align="center" >
          <el-table-column prop="householderName" label="第一年" min-width="100" align="center" />
          <el-table-column prop="householderName" label="第二年" min-width="100" align="center" />
          <el-table-column prop="householderName" label="第三年" min-width="100" align="center" />
          <el-table-column prop="householderName" label="第四年" min-width="100" align="center" />
        </el-table-column>

        <el-table-column prop="status" label="状态" min-width="80" align="center">
    <!-- Tab切换区域 -->
    <div class="tab-container">
      <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
        <el-tab-pane label="资金表" name="fullReport"></el-tab-pane>
        <el-tab-pane label="购房信息表" name="houseInfo"></el-tab-pane>
      </el-tabs>
    </div>

    <!-- 统计卡片区域 -->
    <div class="statistics-container">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="statistics-card" shadow="hover">
            <div class="card-amount">{{ detailData.totalAmount || 0 }}万元</div>
            <div class="card-title">补偿资金总金额</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="statistics-card" shadow="hover">
            <div class="card-amount">{{ detailData.downPaymentAmount || 0 }}万元</div>
            <div class="card-title">首付款总金额</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="statistics-card" shadow="hover">
            <div class="card-amount">{{ detailData.subsidyAmount || 0 }}万元</div>
            <div class="card-title">过渡补贴总金额</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="statistics-card" shadow="hover">
            <div class="card-amount">{{ detailData.quarterPayAmount || 0 }}万元</div>
            <div class="card-title">季度款总金额</div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 功能按钮区域 -->
    <div class="button-container">
      <el-button type="primary" size="small" @click="handleExport">新增安置户记录</el-button>
      <el-button type="success" size="small" @click="handleDownloadTemplate">下载导入模板</el-button>
      <el-button type="primary" size="small" @click="handleImport">批量导入</el-button>
      <el-button type="danger" size="small" @click="handleExportSelected">问题数据导出</el-button>
    </div>

    <div v-if="activeTab === 'fullReport'">
      <!-- 表格区域 -->
      <el-table v-loading="loading" :data="tableData" border style="width: 100%"
        @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="street" label="镇（街道）" min-width="120" align="center" />
        <el-table-column prop="projectName" label="拆迁项目名称" min-width="180" align="center" />
        <el-table-column prop="community" label="所在村（社区）" min-width="120" align="center" />
        <el-table-column prop="householdHead" label="户主姓名" min-width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '已通过' ? 'success' : 'info'">
              {{ scope.row.status }}
            </el-tag>
            <span>{{ scope.row.householdHead }} <el-tooltip v-if="scope.row.householdHeadWarn == 1" class="item"
                effect="dark" content="用户信息未通过安置申请" placement="top">
                <i class="el-icon-warning-outline"></i>
              </el-tooltip></span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="180" align="center">
        <el-table-column prop="idCard" label="身份证号" min-width="180" align="center" />
        <el-table-column prop="resettledNum" label="应安置人数（人）" min-width="140" align="center" />
        <el-table-column label="所有家庭人员应安置面积（㎡）" prop="resettledArea" min-width="160" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.resettledArea }} <el-tooltip v-if="scope.row.waitFamilyAreaWarn == 1" class="item"
                effect="dark" content="应补偿面积数据异常" placement="top">
                <i class="el-icon-warning-outline"></i>
              </el-tooltip></span>
          </template>
        </el-table-column>
        <el-table-column label="补偿单位标准（万元）" min-width="160" align="center">
          <el-table-column prop="priceNewAmount" label="新建商品住房、商业用房、停车位" min-width="160" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.priceNewAmount }} <el-tooltip v-if="scope.row.priceNewAmountWarn == 1" class="item"
                  effect="dark" content="补充标准数据异常" placement="top">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip></span>
            </template>
          </el-table-column>
          <el-table-column prop="priceOldAmount" label="二手住房" min-width="150" align="center" />
        </el-table-column>
        <el-table-column prop="compensationAmount" label="补偿资金总额（万元）" min-width="160" align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.compensationAmount }} <el-tooltip v-if="scope.row.compensationSumWarn == 1" class="item"
                effect="dark" content="补偿总金额数据异常" placement="top">
                <i class="el-icon-warning-outline"></i>
              </el-tooltip></span>
          </template>
        </el-table-column>
        <el-table-column prop="downPaymentAmount" label="25%首付款（㎡）" min-width="150" align="center" />
        <el-table-column prop="quarterPayAmount" v-if="activeTab == 'fullReport'" label="每季度需支付款项（万元）" min-width="180"
          align="center" >
          <template slot-scope="scope">
            <span>{{ scope.row.quarterPayAmount }} <el-tooltip v-if="scope.row.quarterPayAmountWarn == 1" class="item"
                effect="dark" content="季度款数据异常" placement="top">
                <i class="el-icon-warning-outline"></i>
              </el-tooltip></span>
          </template>
        </el-table-column>
        <el-table-column prop="subsidyAmount" label="过渡补贴（万元）" min-width="180" align="center" />
        <el-table-column label="操作" prop="operation" fixed="right" width="180" align="center">
          <template slot-scope="scope" v-if="activeTab == 'fullReport'">
            <el-button type="text" size="small" @click="handleView(scope.row)">详情</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @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" />
    </div>
    <div v-else>
      <!-- 购房信息表格 -->
      <el-table v-loading="loading" :data="tableData" border style="width: 100%" :row-class-name="tableRowClassName1">
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="street" label="镇（街道）" min-width="100" align="center" />
        <el-table-column prop="projectName" label="拆迁项目名称" min-width="100" align="center" />
        <el-table-column prop="community" label="所在村（社区）" min-width="100" align="center" />
        <el-table-column prop="demolitionTime" label="拆迁时间" min-width="100" align="center" />
        <el-table-column prop="householdHead" label="户主姓名" min-width="100" align="center">

        </el-table-column>
        <el-table-column prop="idCard" label="身份证号" min-width="180" align="center" />
        <el-table-column prop="mobile" label="联系电话" min-width="100" align="center" />
        <el-table-column label="本次安置人数（人）" min-width="100" align="center">
          <el-table-column prop="currentCollectiveNum" label="集体经济组织成员" min-width="100" align="center" />
          <el-table-column prop="currentNoCollectiveNum" label="非集体经济组织成员" min-width="100" align="center" />
          <el-table-column prop="currentCount" label="合计" min-width="100" align="center" />
        </el-table-column>
        <el-table-column prop="waitFamilyNames" label="待安置家庭成员姓名" min-width="100" align="center" />
        <el-table-column prop="waitFamilyArea" label="待安置人员应安置面积合计（㎡）" min-width="100" align="center" />
        <el-table-column label="补偿金额（万元）" min-width="100" align="center">
          <el-table-column prop="compensationNewAmount" label="新建商品住房、商业用房、停车位" min-width="100" align="center" />
          <el-table-column prop="compensationOldAmount" label="二手住房" min-width="100" align="center" />
          <el-table-column prop="compensationSum" label="合计" min-width="100" align="center" />
        </el-table-column>
        <el-table-column prop="downPaymentAmount" label="25%首付款（万元）" min-width="100" align="center" />
        <el-table-column prop="quarterPayAmount" v-if="activeTab == 'houseInfo'" label="每季度需支付款项（万元）" min-width="100"
          align="center" />
        <el-table-column prop="subsidyAmount" label="过渡补贴（万元）" min-width="100" align="center" />
        <el-table-column prop="remark" label="备注" min-width="100" align="center" />
        <el-table-column prop="certificateTime" label="凭证发放时间" min-width="100" align="center" />
        <el-table-column prop="buyTime" label="购房时间" min-width="100" align="center" />
        <el-table-column prop="dealAmount" label="成交金额（万元）" min-width="100" align="center" />
        <el-table-column label="新建商品住房" min-width="100" align="center">
          <el-table-column prop="newHousingName" label="楼盘名称" min-width="100" align="center" />
          <el-table-column prop="newHousingArea" label="面积（㎡）" min-width="100" align="center" />
          <el-table-column prop="newHousingNum" label="套数（套）" min-width="100" align="center" />
        </el-table-column>
        <el-table-column label="二手住房" min-width="100" align="center">
          <el-table-column prop="oldHousingName" label="小区名称" min-width="100" align="center" />
          <el-table-column prop="householdHead" label="面积（㎡）" min-width="100" align="center" />
          <el-table-column prop="householdHead" label="套数（套）" min-width="100" align="center" />
        </el-table-column>
        <el-table-column prop="householdHead" label="新建商业用房" min-width="100" align="center">
          <el-table-column prop="householdHead" label="楼盘名称" min-width="100" align="center" />
          <el-table-column prop="oldHousingArea" label="面积（㎡）" min-width="100" align="center" />
          <el-table-column prop="oldHousingNum" label="套数（套）" min-width="100" align="center" />
        </el-table-column>
        <el-table-column label="新建停车位" min-width="100" align="center">
          <el-table-column prop="newStopName" label="楼盘名称" min-width="100" align="center" />
          <el-table-column prop="newStopArea" label="金额（万元）" min-width="100" align="center" />
          <el-table-column prop="newStopNum" label="个数（个）" min-width="100" align="center" />
        </el-table-column>
        <el-table-column prop="signTime" label="自主购房协议签订时间" min-width="100" align="center" />
        <el-table-column prop="compensationPayTime" label="25%补偿款及过渡补贴支付时间" min-width="100" align="center" />
        <el-table-column label="剩余款项支付时间" min-width="100" align="center">
          <el-table-column prop="remainingTime1" label="第一年" min-width="100" align="center" />
          <el-table-column prop="remainingTime2" label="第二年" min-width="100" align="center" />
          <el-table-column prop="remainingTime3" label="第三年" min-width="100" align="center" />
          <el-table-column prop="remainingTime4" label="第四年" min-width="100" align="center" />
          <el-table-column prop="remainingTime5" label="第四年" min-width="100" align="center" />
        </el-table-column>
        <el-table-column label="操作" prop="operation" fixed="right" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleView(scope.row)">详情</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
@@ -190,225 +207,230 @@
          </template>
        </el-table-column>
      </el-table>
  

      <!-- 分页区域 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getHouseList"
      />
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getHouseList" />
    </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'PlacementPerson',
    components: {},
    data() {
      return {
        // 遮罩层
        loading: false,
        // 选中数组
        selectedRows: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 表格数据
        tableData: [
          {
            town: '长洲社区',
            projectName: '长洲水利工程征地拆迁',
            village: '和兴社区',
            householderName: '张三',
            idCard: '220102198512345678',
            familySize: 3,
            totalArea: 160,
            registeredArea: 120,
            measuredArea: 120,
            courtArea: 40,
            compensationAmount: 30,
            buildingArea: 38,
            temporaryAmount: 5
          }
        ],
        // 当前激活的tab
        activeTab: 'fullReport',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          town: undefined,
          village: undefined,
          projectName: undefined,
          householderName: undefined
        },
        // 购房信息表格数据
        houseTableData: [
          {
            householderName: '张三',
            idCard: '220102198512345678',
            familySize: 3,
            houseAddress: '长洲社区XX街道',
            houseType: '住宅',
            houseArea: 160,
            landArea: 100,
            compensationArea: 160,
            compensationAmount: 30,
            temporaryAmount: 5,
            temporaryPeriod: '12个月',
            newHouseArea: 0,
            secondHandArea: 160,
            totalArea: 160,
            status: '已通过'
          }
        ],
      }
  </div>
</template>

<script>
import { getPlacementBatchDetail } from '@/api/placement-details'
import { downLoad,exportExcell } from '@/utils'
export default {
  name: 'PlacementPerson',
  components: {},
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      selectedRows: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 表格数据
      tableData: [
        {
          street: '长洲社区',
          projectName: '长洲水利工程征地拆迁',
          community: '和兴社区',
          householdHead: '张三',
          idCard: '220102198512345678',
          familySize: 3,
          totalArea: 160,
          registeredArea: 120,
          measuredArea: 120,
          courtArea: 40,
          compensationAmount: 30,
          buildingArea: 38,
          temporaryAmount: 5
        }
      ],
      // 当前激活的tab
      activeTab: 'fullReport',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,

        street: undefined,
        community: undefined,
        projectName: undefined,
        householdHead: undefined
      },
      detailData: {},
      columns: []
    }
  },

  created() {
    this.getList()
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      // TODO: 调用接口获取数据
      getPlacementBatchDetail({ ...this.queryParams, placementBatchId: this.$route.query.id, type: this.activeTab == 'fullReport' ? 1 : 2 }).then(res => {
        if (res.code == 200) {
          this.tableData = this.activeTab == 'fullReport' ? res.data.assetList : res.data.householdList
          this.detailData = res.data.placementBatch
          this.total = res.data.total
          this.loading = false
        }
      })
    },
    created() {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    methods: {
      /** 查询列表 */
      getList() {
        this.loading = true
        // TODO: 调用接口获取数据
        setTimeout(() => {
          this.tableData = [
            {
              town: '长洲社区',
              projectName: '长洲水利工程征地拆迁',
              village: '和兴社区',
              householderName: '张三',
              idCard: '220102198512345678',
              familySize: 3,
              totalArea: 160,
              registeredArea: 120,
              measuredArea: 120,
              courtArea: 40,
              compensationAmount: 30,
              buildingArea: 38,
              temporaryAmount: 5
            }
          ]
          this.total = 4
          this.loading = false
        }, 1000)
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      handleReset() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          town: undefined,
          village: undefined,
          projectName: undefined,
          householderName: undefined
        }
        this.getList()
      },
      /** Tab切换操作 */
      handleTabClick(tab) {
        if (tab.name === 'houseInfo') {
          this.getHouseList()
        } else {
          this.getList()
        }
      },
      /** 选择框变更 */
      handleSelectionChange(selection) {
        this.selectedRows = selection
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        // TODO: 实现新增逻辑
      },
      /** 导出操作 */
      handleExport() {
        // TODO: 实现导出逻辑
      },
      /** 下载模板 */
      handleDownloadTemplate() {
        // TODO: 实现下载模板逻辑
      },
      /** 导入操作 */
      handleImport() {
        // TODO: 实现导入逻辑
      },
      /** 导出选中记录 */
      handleExportSelected() {
        // TODO: 实现导出选中记录逻辑
      },
      /** 查看详情按钮操作 */
      handleView(row) {
        // TODO: 实现查看详情逻辑
      },
      /** 编辑按钮操作 */
      handleEdit(row) {
        // TODO: 实现编辑逻辑
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        // TODO: 实现删除逻辑
      },
      /** 获取购房信息列表 */
      getHouseList() {
        this.loading = true
        // TODO: 调用接口获取购房信息数据
        setTimeout(() => {
          this.loading = false
        }, 1000)
      },
    }
    tableRowClassName({ row, rowIndex }) {
      if (row.householdHeadWarn == 1 || row.waitFamilyAreaWarn == 1 || row.compensationSumWarn == 1 || row.quarterPayAmountWarn == 1) {
        return 'warning-row'
      }
      return ''
    },
    tableRowClassName1({ row, rowIndex }) {
      if (row.areaWarn == 1 || row.compensationSumWarn == 1 || row.idCardWarn == 1 || row.waitFamilyNamesWarn == 1) {
        return 'warning-row'
      }
      return ''
    },
    /** 重置按钮操作 */
    handleReset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        street: undefined,
        community: undefined,
        projectName: undefined,
        householdHead: undefined
      }
      this.getList()
    },
    /** Tab切换操作 */
    handleTabClick(tab) {
      this.activeTab = tab.name
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        street: undefined,
        community: undefined,
        projectName: undefined,
        householdHead: undefined
      }
      this.$forceUpdate()
      this.getList()
    },
    /** 选择框变更 */
    handleSelectionChange(selection) {
      this.selectedRows = selection
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      // TODO: 实现新增逻辑
    },
    /** 导出操作 */
    handleExport() {
      // TODO: 实现导出逻辑
    },
    /** 下载模板 */
    handleDownloadTemplate() {
      // TODO: 实现下载模板逻辑
      downLoad(`/placement-batch/download-template/${this.activeTab == 'fullReport' ? 3 : 4}`, `${this.activeTab == 'fullReport' ? '资金导入模版' : '购房信息表导入模版'}.xlsx`)
    },
    /** 导入操作 */
    handleImport() {
      // TODO: 实现导入逻辑
    },
    /** 导出选中记录 */
    handleExportSelected() {
      // TODO: 实现导出选中记录逻辑
      exportExcell(`/placement-batch/problem-export/${this.activeTab == 'fullReport' ? 1 : 2}`,{
        ...this.queryParams,
        placementBatchId: this.$route.query.id,
        type: this.activeTab == 'fullReport' ? 1 : 2
      }, `${this.activeTab == 'fullReport' ? '资金问题数据' : '购房信息问题数据'}.xlsx`)
    },
    /** 查看详情按钮操作 */
    handleView(row) {
      // TODO: 实现查看详情逻辑
    },
    /** 编辑按钮操作 */
    handleEdit(row) {
      // TODO: 实现编辑逻辑
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      // TODO: 实现删除逻辑
    },
    /** 获取购房信息列表 */
    getHouseList() {
      this.loading = true
      // TODO: 调用接口获取购房信息数据
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
  }
  </script>
  
  <style scoped>
  .app-container {
    padding: 20px;
  }
  .filter-container {
    margin-bottom: 20px;
  }
  .tab-container {
    margin-bottom: 20px;
  }
  .statistics-container {
    margin-bottom: 20px;
  }
  .statistics-card {
    text-align: center;
    color: #666;
  }
  .card-amount {
    font-size: 24px;
    color: #409EFF;
    margin-bottom: 10px;
  }
  .card-title {
    font-size: 14px;
  }
  .button-container {
    margin-bottom: 20px;
  }
  .area-value {
    cursor: pointer;
    color: #409EFF;
    text-decoration: underline;
  }
  .el-table {
    margin-bottom: 20px;
  }
  </style>
}
</script>

<style scoped lang="scss">
::v-deep .warning-row {
  background: #DE868F !important;
}

.app-container {
  padding: 20px;
}

.filter-container {
  margin-bottom: 20px;
}

.tab-container {
  margin-bottom: 20px;
}

.statistics-container {
  margin-bottom: 20px;
}

.statistics-card {
  text-align: center;
  color: #666;
}

.card-amount {
  font-size: 24px;
  color: #409EFF;
  margin-bottom: 10px;
}

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

.button-container {
  margin-bottom: 20px;
}

.area-value {
  cursor: pointer;
  color: #409EFF;
  text-decoration: underline;
}

.el-table {
  margin-bottom: 20px;
}
</style>

 src/views/relocatablePersonnel/index.vue

@@ -35,8 +35,9 @@
                    v-hasPermi="['RelocatablePersonnel:download']">下载导入模板</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-upload v-hasPermi="['RelocatablePersonnel:import']" :headers="{ ...headers }" action="http://182.140.209.168:8888/api/placement/imports"
                    :show-file-list="false" :on-success="handleImportSuccess" :before-upload="beforeImportUpload">
                <el-upload v-hasPermi="['RelocatablePersonnel:import']" action="#" :auto-upload="false"
                    accept=".xlsx,.xls" :show-file-list="false" :on-change="handleFileChange" :limit="1"
                    :before-upload="beforeImportUpload">
                    <el-button type="primary" size="small">批量导入</el-button>
                </el-upload>
            </el-col>
@@ -49,22 +50,26 @@
            <el-table-column label="镇街" prop="street" :show-overflow-tooltip="true" width="150" />
            <el-table-column label="村社区" prop="community" width="100" />
            <el-table-column label="组" prop="groupName" width="100" />
            <el-table-column label="户主姓名" prop="householdHead" width="180" />
            <el-table-column label="户主姓名" prop="householdHead" />
            <el-table-column label="户主身份证号码" prop="idCard" width="180" />
            <el-table-column label="家庭成员名字" prop="familyName" />
            <el-table-column label="家庭成员名字" prop="familyName" width="100" />
            <el-table-column label="关系" prop="relation" />
            <el-table-column label="人员性质" prop="personType" width="180" />
            <el-table-column label="身份证号码" prop="familyIdCard" width="180" />
            <el-table-column label="年龄" prop="age" />
            <el-table-column label="性别" prop="sex" />
            <el-table-column label="出生年月日" prop="birthday" width="180" />
            <el-table-column label="安置方式" prop="ways" width="180" />
            <el-table-column label="出生年月日" prop="birthday" width="100">
                <template slot-scope="{row}">
                    {{ row.birthday ? parseTime(row.birthday, '{y}-{m}-{d}') : '' }}
                </template>
            </el-table-column>
            <el-table-column label="安置方式" prop="ways" width="100" />
            <el-table-column label="原始拆迁时领取过渡费时间" prop="originCollectionTime" width="180" />
            <el-table-column label="上次过渡费发放时间(起)" prop="lastBeginTime" width="180" />
            <el-table-column label="上次过渡费发放时间(止)" prop="lastEndTime" width="180" />
            <el-table-column label="剩余未安置面积(㎡)" prop="noHouseArea" width="180" />
            <el-table-column label="剩余未安置商铺面积(㎡)" prop="noShopArea" width="180" />
            <el-table-column label="联系电话" prop="mobile" width="180" />
            <el-table-column label="剩余未安置面积(㎡)" prop="noHouseArea" width="160" />
            <el-table-column label="剩余未安置商铺面积(㎡)" prop="noShopArea" width="160" />
            <el-table-column label="联系电话" prop="mobile" width="100" />
            <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" width="180" />
            <el-table-column label="安置状态" fixed="right" prop="status">
                <template slot-scope="{row}">
@@ -91,8 +96,9 @@
</template>

<script>
import { getListData, downloadTemplate, del, getDictData } from "@/api/placement";
import { getListData, del, getDictData, importPlacement } from "@/api/placement";
import { getToken } from '@/utils/auth'
import { downLoad } from '@/utils'

export default {
    name: "RelocatablePersonnel",
@@ -149,15 +155,7 @@
        },
        /** 下载模板 */
        download() {
            downloadTemplate().then(response => {
                const url = window.URL.createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', 'template.xlsx');
                document.body.appendChild(link);
                link.click();
                this.$message.success('下载成功');
            });
            downLoad('/placement/download-template', '待安置人员导入模板.xlsx')
        },
        /** 新增按钮操作 */
        handleAdd() {
@@ -176,12 +174,15 @@
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        handleImportSuccess(response, file, fileList) {
            if (response.code == 200) {
                this.$message.success('导入成功');
            } else {
                this.$message.error(response.msg);
            }
        handleFileChange(file, fileList) {
            let formData = new FormData()
            formData.append('file', file.raw)
            importPlacement(formData).then(response => {
                if (response.code == 200) {
                    this.$message.success('导入成功');
                    this.getList();
                }
            })
        },
        handleImportError(error, file, fileList) {
            this.$message.error('导入失败');

 src/views/system/dept/index.vue

@@ -65,7 +65,7 @@
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
          <span>{{ parseTime(scope.row.createTime)</span> }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">