feat

pyt

2025-03-20 8c3fdf9a3a3236b6a62c4b383506774af26da0f4

feat

 src/views/compensation-standard/index.vue

New file
@@ -0,0 +1,755 @@
<template>
    <div class="app-container">
      <el-card class="form-card">
        <!-- 政策说明 -->
        <div class="policy-description">
          <h3 style="color: #DE868F;">《补偿标准说明》：</h3>
          <ol>
            <li>
              《实施意见》第（七）项补偿金额中"集体经济组织成员"是指：
              <p>（1）符合《崇州市人民政府关于印发崇州市征地补偿安置实施办法（试行）的通知》（崇府发〔2008〕63号）文件中第十三条（一）（二）（三）（四）款条件的人员。</p>
              <p>（2）符合《崇州市人民政府关于印发崇州市征地补偿安置实施办法的通知》（崇府发〔2014〕6号）文件中第十五条、第十八条、第二十四条第二款规定的住房安置人员。</p>
            </li>
            <li>
              《实施意见》第（七）项补偿金额中"非集体经济组织成员"是指符合《崇州市人民政府关于印发崇州市征地补偿安置实施办法（试行）的通知》（崇府发〔2008〕63号）文件中第十三条（五）（六）（七）款条件的，且依据第十六条第（二）款按照市场建筑成本购买安置住房面积的人员。
            </li>
            <li style="color: #DE868F;text-decoration: underline;">
              商铺置换：
              <p>符合《崇州市人民政府关于印发崇州市征地补偿安置实施办法（试行）的通知》（崇府发〔2008〕63号）文件中第十六条第（三）项的安置对象，在本次申请自主购房安置时，需将每人应安置8㎡的商铺置换成12㎡的安置面积，与应安置住房面积一并补偿结算。</p>
            </li>
            <span style="color: #DE868F;">...</span>
          </ol>
          <div class="view-detail">
            <el-button type="text" @click="showDetailDialog">查看详情 >></el-button>
          </div>
        </div>
  
        <!-- 详情弹窗 -->
        <el-dialog
          :visible.sync="detailDialogVisible"
          title="补偿标准说明详情"
          width="60%"
          :close-on-click-modal="false"
        >
          <ol>
            <li>
              《实施意见》第（七）项补偿金额中"集体经济组织成员"是指：
              <p>（1）符合《崇州市人民政府关于印发崇州市征地补偿安置实施办法（试行）的通知》（崇府发〔2008〕63号）文件中第十三条（一）（二）（三）（四）款条件的人员。</p>
              <p>（2）符合《崇州市人民政府关于印发崇州市征地补偿安置实施办法的通知》（崇府发〔2014〕6号）文件中第十五条、第十八条、第二十四条第二款规定的住房安置人员。</p>
            </li>
            <li>
              《实施意见》第（七）项补偿金额中"非集体经济组织成员"是指符合《崇州市人民政府关于印发崇州市征地补偿安置实施办法（试行）的通知》（崇府发〔2008〕63号）文件中第十三条（五）（六）（七）款条件的，且依据第十六条第（二）款按照市场建筑成本购买安置住房面积的人员。
            </li>
            <li style="color: #DE868F;text-decoration: underline;">
              商铺置换：
              <p>符合《崇州市人民政府关于印发崇州市征地补偿安置实施办法（试行）的通知》（崇府发〔2008〕63号）文件中第十六条第（三）项的安置对象，在本次申请自主购房安置时，需将每人应安置8㎡的商铺置换成12㎡的安置面积，与应安置住房面积一并补偿结算。</p>
            </li>
            <li>
              选择购买新建商业用房、停车位的被征地拆迁人员，需向所属镇（街道）提供自有住房以户为单位人均不低于20平方米的不动产权属证书或相关权利证明材料。
            </li>
            <li>
              住房资料审核要求：
              <p>1. 购买商品住房：</p>
              <p>（1）购买新建商品住房的，需提供《凭证》、网签备案合同及商品房买卖合同摘要、个人住房信息查询记录；</p>
              <p>（2）购买二手住房的，需提供《凭证》、住房买卖合同、转移登记后的不动产权证书。</p>
              <p>2. 购买商业用房、停车位：</p>
              <p>购买新建商业用房、停车位的，需提供《凭证》、网签备案合同及商品房买卖合同摘要、个人住房信息查询记录、支付凭证。</p>
            </li>
            <li>
              审核重点内容：
              <p>1. 所购房屋应位于崇州市行政区域内；</p>
              <p>2. 自主购买的商品住房（含新建商品住房和二手商品住房）建筑面积，以户为单位人均不低于20平方米；</p>
              <p>3. 自主购买商业用房、停车位的总价款应不低于应享受自主购房安置补偿总额的70%。</p>
            </li>
            <li>
              款项支付方式：
              <p>1. 各镇（街道）于每月15号、30号将每半个月内自主购房安置协议信息汇总表报市拆迁安置服务中心复核；</p>
              <p>2. 复核后市拆迁安置服务中心将自主购房安置协议信息汇总表报市财政局；</p>
              <p>3. 市财政局即时将25%的自主购房安置补偿款和过渡补贴拨付至镇（街道），各镇（街道）确保在《协议》签订后2个月内向被征地拆迁人员支付；</p>
              <p>4. 剩余75%补偿款由市财政局按照五年分20次拨付至镇（街道），镇（街道）在每年1月、4月、7月、10月向被征地拆迁人员无息支付。</p>
            </li>
          </ol>
        </el-dialog>
  
        <!-- 表单内容 -->
        <el-form :model="formData" :rules="rules" ref="formRef" class="settlement-form">
          <!-- 适用房源 -->
          <div class="form-section">
            <h4>适用房源</h4>
            <div class="form-item">
              <span class="text">自主购买商品住房（含新建商品住房和二手住房）建筑面积，以户为单位人均不低于</span>
              <el-input-number v-model="formData.minArea" :min="0" class="short-input" />
              <span class="unit">㎡</span>
            </div>
          </div>
  
          <!-- 应安置面积 -->
          <div class="form-section">
            <h4>应安置面积</h4>
            <div class="time-section">
              <p class="time-label">拆迁时间在2014年之前：</p>
              <div class="form-row">
                <div class="form-item">
                  <span class="text">集体经济组织成员应安置面积为</span>
                  <el-input-number v-model="formData.before2014.collective" :min="0" class="short-input" />
                  <span class="unit">㎡</span>
                </div>
                <div class="form-item">
                  <span class="text">非集体经济组织成员应安置面积为</span>
                  <el-input-number v-model="formData.before2014.nonCollective" :min="0" class="short-input" />
                  <span class="unit">㎡</span>
                </div>
              </div>
            </div>
  
            <div class="time-section">
              <p class="time-label">拆迁时间在2014年之后：</p>
              <div class="form-row">
                <div class="form-item">
                  <span class="text">集体经济组织成员应安置面积为</span>
                  <el-input-number v-model="formData.after2014.collective" :min="0" class="short-input" />
                  <span class="unit">㎡</span>
                </div>
                <div class="form-item">
                  <span class="text">非集体经济组织成员应安置面积为</span>
                  <el-input-number v-model="formData.after2014.nonCollective" :min="0" class="short-input" />
                  <span class="unit">㎡</span>
                </div>
              </div>
            </div>
          </div>
  
          <!-- 标准表格 -->
          <div class="form-section">
            <h4>拆迁时间在2014年之前自主购房安置补偿标准</h4>
            <el-table :data="standardsBefore2014" border style="width: 100%">
              <el-table-column prop="area" label="镇/街道" />
              <el-table-column prop="type" label="人员类型" />
              <el-table-column prop="newPrice" label="新建商品房、停车位、商业用房">
                <template #default="scope">
                  <el-input-number 
                    v-if="scope.row.isEditing"
                    v-model="scope.row.newPriceNum"
                    :min="0"
                    :precision="6"
                    :step="0.000001"
                    @change="handlePriceChange(scope.row, 'newPrice')"
                    @blur="handlePriceBlur(scope.row, 'newPrice')"
                  />
                  <span v-else>{{ scope.row.newPrice }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="secondHandPrice" label="二手房">
                <template #default="scope">
                  <el-input-number 
                    v-if="scope.row.isEditing"
                    v-model="scope.row.secondHandPriceNum"
                    :min="0"
                    :precision="6"
                    :step="0.000001"
                    @change="handlePriceChange(scope.row, 'secondHandPrice')"
                    @blur="handlePriceBlur(scope.row, 'secondHandPrice')"
                  />
                  <span v-else>{{ scope.row.secondHandPrice }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template #default="scope">
                  <el-button 
                    type="text" 
                    @click="handleEdit(scope.row)"
                  >{{ scope.row.isEditing ? '保存' : '编辑' }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
  
          <div class="form-section">
            <h4>拆迁时间在2014年之后自主购房安置补偿标准</h4>
            <el-table :data="standardsAfter2014" border style="width: 100%">
              <el-table-column prop="area" label="镇/街道" />
              <el-table-column prop="type" label="人员类型" />
              <el-table-column prop="newPrice" label="新建商品房、停车位、商业用房">
                <template #default="scope">
                  <el-input-number 
                    v-if="scope.row.isEditing"
                    v-model="scope.row.newPriceNum"
                    :min="0"
                    :precision="6"
                    :step="0.000001"
                    @change="handlePriceChange(scope.row, 'newPrice')"
                    @blur="handlePriceBlur(scope.row, 'newPrice')"
                  />
                  <span v-else>{{ scope.row.newPrice }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="secondHandPrice" label="二手房">
                <template #default="scope">
                  <el-input-number 
                    v-if="scope.row.isEditing"
                    v-model="scope.row.secondHandPriceNum"
                    :min="0"
                    :precision="6"
                    :step="0.000001"
                    @change="handlePriceChange(scope.row, 'secondHandPrice')"
                    @blur="handlePriceBlur(scope.row, 'secondHandPrice')"
                  />
                  <span v-else>{{ scope.row.secondHandPrice }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template #default="scope">
                  <el-button 
                    type="text" 
                    @click="handleEdit(scope.row)"
                  >{{ scope.row.isEditing ? '保存' : '编辑' }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
  
          <!-- 选择标准 -->
          <div class="form-section">
            <h4>过渡费补偿标准</h4>

            <div class="form-item">
              <span class="text">选择自主购房安置拆迁人员，按</span>
              <el-input-number v-model="formData.subsidyStandard" :min="0" class="short-input" />
              <span class="description">元/月/人的标准发6个月过渡补贴</span>
            </div>
          </div>
  
          <div class="form-actions">
            <el-button v-hasPermi="['CompensationStandard:save']" type="primary" :loading="loading" @click="handleSubmit">保存设置</el-button>
          </div>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script>
  import { getInfo, edit } from '@/api/compensation-standard'

  export default {
    name: "CompensationStandard",
    data() {
      return {
        loading: false, // 保存按钮loading状态
        detailDialogVisible: false, // 详情弹窗显示状态
        formData: {
          minArea: 0, // 最小建筑面积
          before2014: {
            collective: 0, // 2014年前集体经济组织成员应安置面积
            nonCollective: 0 // 2014年前非集体经济组织成员应安置面积
          },
          after2014: {
            collective: 0, // 2014年后集体经济组织成员应安置面积
            nonCollective: 0 // 2014年后非集体经济组织成员应安置面积
          },
          subsidyStandard: 0 // 过渡费补偿标准
        },
        // 表单验证规则
        rules: {
          minArea: [
            { required: true, message: '请输入最小建筑面积', trigger: 'blur' },
            { type: 'number', message: '最小建筑面积必须为数字', trigger: 'blur' },
            { min: 0, message: '最小建筑面积不能小于0', trigger: 'blur' }
          ],
          'before2014.collective': [
            { required: true, message: '请输入2014年前集体经济组织成员应安置面积', trigger: 'blur' },
            { type: 'number', message: '应安置面积必须为数字', trigger: 'blur' },
            { min: 0, message: '应安置面积不能小于0', trigger: 'blur' }
          ],
          'before2014.nonCollective': [
            { required: true, message: '请输入2014年前非集体经济组织成员应安置面积', trigger: 'blur' },
            { type: 'number', message: '应安置面积必须为数字', trigger: 'blur' },
            { min: 0, message: '应安置面积不能小于0', trigger: 'blur' }
          ],
          'after2014.collective': [
            { required: true, message: '请输入2014年后集体经济组织成员应安置面积', trigger: 'blur' },
            { type: 'number', message: '应安置面积必须为数字', trigger: 'blur' },
            { min: 0, message: '应安置面积不能小于0', trigger: 'blur' }
          ],
          'after2014.nonCollective': [
            { required: true, message: '请输入2014年后非集体经济组织成员应安置面积', trigger: 'blur' },
            { type: 'number', message: '应安置面积必须为数字', trigger: 'blur' },
            { min: 0, message: '应安置面积不能小于0', trigger: 'blur' }
          ],
          subsidyStandard: [
            { required: true, message: '请输入过渡费补偿标准', trigger: 'blur' },
            { type: 'number', message: '过渡费补偿标准必须为数字', trigger: 'blur' },
            { min: 0, message: '过渡费补偿标准不能小于0', trigger: 'blur' }
          ]
        },
        // 2014年前补偿标准表格数据
        standardsBefore2014: [
          {
            area: '罗湖街道、梧桐山镇、东晓街道、大划街道',
            type: '集体经济组织成员',
            newPrice: '0万元/㎡',
            newPriceNum: 0,
            secondHandPrice: '0万元/㎡',
            secondHandPriceNum: 0,
            isEditing: false
          },
          {
            area: '罗湖街道、梧桐山镇、东晓街道、大划街道',
            type: '非集体经济组织成员',
            newPrice: '0万元/㎡',
            newPriceNum: 0,
            secondHandPrice: '0万元/㎡',
            secondHandPriceNum: 0,
            isEditing: false
          },
          {
            area: '黄贝街道/街道',
            type: '集体经济组织成员',
            newPrice: '0万元/㎡',
            newPriceNum: 0,
            secondHandPrice: '0万元/㎡',
            secondHandPriceNum: 0,
            isEditing: false
          },
          {
            area: '黄贝街道/街道',
            type: '非集体经济组织成员',
            newPrice: '0万元/㎡',
            newPriceNum: 0,
            secondHandPrice: '0万元/㎡',
            secondHandPriceNum: 0,
            isEditing: false
          }
        ],
        // 2014年后补偿标准表格数据
        standardsAfter2014: [
          {
            area: '罗湖街道、梧桐山镇、东晓街道、大划街道',
            type: '集体经济组织成员',
            newPrice: '0万元/㎡',
            newPriceNum: 0,
            secondHandPrice: '0万元/㎡',
            secondHandPriceNum: 0,
            isEditing: false
          },
          {
            area: '罗湖街道、梧桐山镇、东晓街道、大划街道',
            type: '非集体经济组织成员',
            newPrice: '0万元/㎡',
            newPriceNum: 0,
            secondHandPrice: '0万元/㎡',
            secondHandPriceNum: 0,
            isEditing: false
          },
          {
            area: '黄贝街道/街道',
            type: '集体经济组织成员',
            newPrice: '0万元/㎡',
            newPriceNum: 0,
            secondHandPrice: '0万元/㎡',
            secondHandPriceNum: 0,
            isEditing: false
          },
          {
            area: '黄贝街道/街道',
            type: '非集体经济组织成员',
            newPrice: '0万元/㎡',
            newPriceNum: 0,
            secondHandPrice: '0万元/㎡',
            secondHandPriceNum: 0,
            isEditing: false
          }
        ],
        configList: [] // 配置列表数据
      };
    },
    created() {
      this.fetchConfigData();
    },
    methods: {
      // 获取配置数据
      async fetchConfigData() {
        try {
          const res = await getInfo();
          this.configList = res.data;
          this.mapConfigData();
        } catch (error) {
          console.error('获取配置数据失败:', error);
          this.$message.error('获取配置数据失败');
        }
      },

      // 映射配置数据到表单和表格
      mapConfigData() {
        // 映射基础配置
        this.formData.minArea = this.getConfigValue('housing');
        this.formData.before2014.collective = this.getConfigValue('before_org_area');
        this.formData.before2014.nonCollective = this.getConfigValue('before_no_org_area');
        this.formData.after2014.collective = this.getConfigValue('after_org_area');
        this.formData.after2014.nonCollective = this.getConfigValue('after_no_org_area');
        this.formData.subsidyStandard = this.getConfigValue('subsidies');

        // 映射2014年前的标准
        this.mapBefore2014Standards();
        // 映射2014年后的标准
        this.mapAfter2014Standards();
        // 更新显示价格
        this.updateDisplayPrices();
      },

      // 映射2014年前的标准
      mapBefore2014Standards() {
        const standards = this.standardsBefore2014;
        standards[0].newPriceNum = this.getConfigValue('before_buy_org_appoint1');
        standards[0].secondHandPriceNum = this.getConfigValue('before_buy_org_appoint2');
        standards[1].newPriceNum = this.getConfigValue('before_buy_no_org_appoint1');
        standards[1].secondHandPriceNum = this.getConfigValue('before_buy_no_org_appoint2');
        standards[2].newPriceNum = this.getConfigValue('before_buy_org_other1');
        standards[2].secondHandPriceNum = this.getConfigValue('before_buy_org_other2');
        standards[3].newPriceNum = this.getConfigValue('before_buy_no_org_other1');
        standards[3].secondHandPriceNum = this.getConfigValue('before_buy_no_org_other2');
      },

      // 映射2014年后的标准
      mapAfter2014Standards() {
        const standards = this.standardsAfter2014;
        standards[0].newPriceNum = this.getConfigValue('after_buy_org_appoint1');
        standards[0].secondHandPriceNum = this.getConfigValue('after_buy_org_appoint2');
        standards[1].newPriceNum = this.getConfigValue('after_buy_no_org_appoint1');
        standards[1].secondHandPriceNum = this.getConfigValue('after_buy_no_org_appoint2');
        standards[2].newPriceNum = this.getConfigValue('after_buy_org_other1');
        standards[2].secondHandPriceNum = this.getConfigValue('after_buy_org_other2');
        standards[3].newPriceNum = this.getConfigValue('after_buy_no_org_other1');
        standards[3].secondHandPriceNum = this.getConfigValue('after_buy_no_org_other2');
      },

      // 更新显示价格
      updateDisplayPrices() {
        this.standardsBefore2014.forEach(row => {
          row.newPrice = row.newPriceNum + '万元/㎡';
          row.secondHandPrice = row.secondHandPriceNum + '万元/㎡';
        });
        this.standardsAfter2014.forEach(row => {
          row.newPrice = row.newPriceNum + '万元/㎡';
          row.secondHandPrice = row.secondHandPriceNum + '万元/㎡';
        });
      },

      // 获取配置值
      getConfigValue(key) {
        const config = this.configList.find(item => item.configKey === key);
        return config ? Number(config.configValue) : 0;
      },

      // 获取配置ID
      getConfigId(key) {
        const config = this.configList.find(item => item.configKey === key);
        return config ? config.id : 0;
      },

      // 显示详情弹窗
      showDetailDialog() {
        this.detailDialogVisible = true;
      },

      // 表单提交
      handleSubmit() {
        this.$refs.formRef.validate(async (valid) => {
          if (!valid) {
            this.$message.error('请填写所有必填项');
            return false;
          }

          if (!this.validateFormData()) {
            return;
          }

          this.loading = true;
          try {
            const submitData = this.buildSubmitData();
            await edit(submitData);
            this.$message.success('修改成功');
          } catch (error) {
            console.error('保存失败:', error);
            this.$message.error('修改失败');
          } finally {
            this.loading = false;
          }
        });
      },

      // 验证表单数据
      validateFormData() {
        // 检查表格数据是否已填写
        const before2014Valid = this.standardsBefore2014.every(row => 
          row.newPriceNum > 0 && row.secondHandPriceNum > 0
        );
        const after2014Valid = this.standardsAfter2014.every(row => 
          row.newPriceNum > 0 && row.secondHandPriceNum > 0
        );

        if (!before2014Valid || !after2014Valid) {
          this.$message.error('请确保所有补偿标准都已填写');
          return false;
        }

        // 检查所有数字输入框是否有值
        const hasEmptyInputs = !this.formData.minArea || 
          !this.formData.before2014.collective || 
          !this.formData.before2014.nonCollective || 
          !this.formData.after2014.collective || 
          !this.formData.after2014.nonCollective || 
          !this.formData.subsidyStandard;

        if (hasEmptyInputs) {
          this.$message.error('请填写所有必填项');
          return false;
        }

        return true;
      },

      // 构建提交数据
      buildSubmitData() {
        return [
          {
            configKey: 'housing',
            configValue: this.formData.minArea,
            id: this.getConfigId('housing')
          },
          {
            configKey: 'before_org_area',
            configValue: this.formData.before2014.collective,
            id: this.getConfigId('before_org_area')
          },
          {
            configKey: 'before_no_org_area',
            configValue: this.formData.before2014.nonCollective,
            id: this.getConfigId('before_no_org_area')
          },
          {
            configKey: 'after_org_area',
            configValue: this.formData.after2014.collective,
            id: this.getConfigId('after_org_area')
          },
          {
            configKey: 'after_no_org_area',
            configValue: this.formData.after2014.nonCollective,
            id: this.getConfigId('after_no_org_area')
          },
          {
            configKey: 'subsidies',
            configValue: this.formData.subsidyStandard,
            id: this.getConfigId('subsidies')
          },
          {
            configKey: 'before_buy_org_appoint1',
            configValue: this.standardsBefore2014[0].newPriceNum,
            id: this.getConfigId('before_buy_org_appoint1')
          },
          {
            configKey: 'before_buy_org_appoint2',
            configValue: this.standardsBefore2014[0].secondHandPriceNum,
            id: this.getConfigId('before_buy_org_appoint2')
          },
          {
            configKey: 'before_buy_no_org_appoint1',
            configValue: this.standardsBefore2014[1].newPriceNum,
            id: this.getConfigId('before_buy_no_org_appoint1')
          },
          {
            configKey: 'before_buy_no_org_appoint2',
            configValue: this.standardsBefore2014[1].secondHandPriceNum,
            id: this.getConfigId('before_buy_no_org_appoint2')
          },
          {
            configKey: 'before_buy_org_other1',
            configValue: this.standardsBefore2014[2].newPriceNum,
            id: this.getConfigId('before_buy_org_other1')
          },
          {
            configKey: 'before_buy_org_other2',
            configValue: this.standardsBefore2014[2].secondHandPriceNum,
            id: this.getConfigId('before_buy_org_other2')
          },
          {
            configKey: 'before_buy_no_org_other1',
            configValue: this.standardsBefore2014[3].newPriceNum,
            id: this.getConfigId('before_buy_no_org_other1')
          },
          {
            configKey: 'before_buy_no_org_other2',
            configValue: this.standardsBefore2014[3].secondHandPriceNum,
            id: this.getConfigId('before_buy_no_org_other2')
          },
          {
            configKey: 'after_buy_org_appoint1',
            configValue: this.standardsAfter2014[0].newPriceNum,
            id: this.getConfigId('after_buy_org_appoint1')
          },
          {
            configKey: 'after_buy_org_appoint2',
            configValue: this.standardsAfter2014[0].secondHandPriceNum,
            id: this.getConfigId('after_buy_org_appoint2')
          },
          {
            configKey: 'after_buy_no_org_appoint1',
            configValue: this.standardsAfter2014[1].newPriceNum,
            id: this.getConfigId('after_buy_no_org_appoint1')
          },
          {
            configKey: 'after_buy_no_org_appoint2',
            configValue: this.standardsAfter2014[1].secondHandPriceNum,
            id: this.getConfigId('after_buy_no_org_appoint2')
          },
          {
            configKey: 'after_buy_org_other1',
            configValue: this.standardsAfter2014[2].newPriceNum,
            id: this.getConfigId('after_buy_org_other1')
          },
          {
            configKey: 'after_buy_org_other2',
            configValue: this.standardsAfter2014[2].secondHandPriceNum,
            id: this.getConfigId('after_buy_org_other2')
          },
          {
            configKey: 'after_buy_no_org_other1',
            configValue: this.standardsAfter2014[3].newPriceNum,
            id: this.getConfigId('after_buy_no_org_other1')
          },
          {
            configKey: 'after_buy_no_org_other2',
            configValue: this.standardsAfter2014[3].secondHandPriceNum,
            id: this.getConfigId('after_buy_no_org_other2')
          }
        ];
      },

      // 处理编辑状态切换
      handleEdit(row) {
        row.isEditing = !row.isEditing;
      },

      // 处理价格变更
      handlePriceChange(row, field) {
        const numField = field + 'Num';
        row[field] = row[numField].toFixed(6) + '万元/㎡';
      },

      // 处理价格输入框失焦
      handlePriceBlur(row, field) {
        const numField = field + 'Num';
        row[field] = row[numField].toFixed(6) + '万元/㎡';
      }
    }
  };
  </script>
  
  <style scoped lang="scss">
  .app-container {
    padding: 20px;
    
    .form-card {
      .policy-description {
        margin-bottom: 30px;
        
        h3 {
          color: #303133;
          margin-bottom: 15px;
        }
        
        ol {
          padding-left: 20px;
          
          li {
            margin-bottom: 10px;
            line-height: 1.6;
            color: #606266;

            &.ellipsis {
              color: #909399;
              font-size: 20px;
              text-align: center;
              margin: 10px 0;
            }
          }
        }

        .view-detail {
          text-align: left;
          margin-top: 15px;
          padding-left: 20px;
        }
      }
  
      .form-section {
        margin-bottom: 30px;
  
        h4 {
          color: #303133;
          margin-bottom: 20px;
          font-weight: bold;
        }
  
        .time-section {
          margin-bottom: 20px;
  
          .time-label {
            color: #606266;
            margin-bottom: 10px;
          }
  
          .form-row {
            display: flex;
            gap: 40px;
            margin-bottom: 10px;
  
            .form-item {
              flex: 1;
            }
          }
        }
      }
  
      .settlement-form {
        .form-item {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
  
          .text {
            color: #606266;
            margin-right: 10px;
            white-space: nowrap;
          }
  
          .short-input {
            width: 120px;
          }
  
          .unit {
            margin-left: 10px;
            color: #606266;
          }
  
          .description {
            margin-left: 10px;
            color: #606266;
          }
        }
      }
  
      .form-actions {
        margin-top: 30px;
        text-align: center;
      }
    }
  
    :deep(.el-table) {
      margin: 20px 0;
    }
  }
  
  :deep(.el-input-number) {
    width: 120px;
  }
  </style>