安置申请表调试

董国庆

2025-03-21 a944d1d90465386b8c47913c3f0945e759b1910a

安置申请表调试

 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/utils/index.js

@@ -392,13 +392,13 @@


export const exportExcell = (name, params, url) => {
  fetch(BASE_URL + url, {
  fetch(process.env.VUE_APP_BASE_API + url, {
    method: 'POST',
    body: JSON.stringify({
      ...params,
    }),
    headers: {
      Authorization:'Bearer ' +  localStorage.getItem('token'),
      Authorization:'Bearer ' + getToken(),
      'ConTent-Type': 'application/json;charset=UTF-8',
      timestamp: new Date().getTime(),
      client: localStorage.getItem('client')

 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,
      });
    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);
        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">
      <el-table-column prop="waitFamilyArea" label="待安置人员应安置面积合计（㎡）" align="center" width="120">
          <template slot-scope="scope">
            {{ scope.row.resettlementPeople }}
            <el-tooltip v-if="scope.row.errors && scope.row.errors.resettlementPeople" placement="top">
              <div slot="content">
                {{ scope.row.errors.resettlementPeople }}
              </div>
              <i class="el-icon-warning" style="color: #e6a23c; margin-left: 5px"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="additionalPeople" label="非集体经济组织成员" align="center" width="120">
          <template slot-scope="scope">
            {{ scope.row.additionalPeople }}
            <el-tooltip v-if="scope.row.errors && scope.row.errors.additionalPeople" placement="top">
              <div slot="content">
                {{ scope.row.errors.additionalPeople }}
              </div>
              <i class="el-icon-warning" style="color: #e6a23c; margin-left: 5px"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="totalPeople" label="合计" align="center" width="60">
          <template slot-scope="scope">
            {{ scope.row.totalPeople }}
            <el-tooltip v-if="scope.row.errors && scope.row.errors.totalPeople" placement="top">
              <div slot="content">{{ scope.row.errors.totalPeople }}</div>
              <i class="el-icon-warning" style="color: #e6a23c; margin-left: 5px"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="houseName" label="待安置家庭成员姓名" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.houseName }}
          <el-tooltip v-if="scope.row.errors && scope.row.errors.houseName" placement="top">
            <div slot="content">{{ scope.row.errors.houseName }}</div>
            <i class="el-icon-warning" style="color: #e6a23c; margin-left: 5px"></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="area" label="待安置人员应安置面积合计（㎡）" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.area }}
          <el-tooltip v-if="scope.row.errors && scope.row.errors.area" placement="top">
            <div slot="content">{{ scope.row.errors.area }}</div>
          {{ 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) => {
      })
        .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() {
      // 实现全部导出逻辑
    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() {
      // 实现问题数据导出逻辑
      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(() => {
          // 实现删除逻辑
          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) {