Gyyq-Upstairs/src/views/components/ProjectDetails/Programme.vue

<template>
    <div class="container">
      <!-- 顶部信息 -->
      <div class="containertop">
        <div class="topleft">
          <img src="../../../assets/images/detailsicon/1.png" alt="">
          <span>规划信息</span>
        </div>
        <div class="topright">
          <el-button v-if="!isEditing" type="primary" size="medium" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="edit">
            <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
            编辑
          </el-button>
          <el-button v-else type="primary" size="medium" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="save">
            <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="保存" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
            保存
          </el-button>
          <el-button type="primary" size="medium" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="handleExport">
            <img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
            导出
          </el-button>
        </div>
      </div>
      <!-- 内容区 -->
      <div class="content">
        <div class="descriptionsdiv">
          <el-descriptions class="margin-top" :column="4" border>
            <el-descriptions-item>
              <template slot="label">
                总用地面积(平方米)
              </template>
              <el-input v-if="isEditing" v-model.number="form.zydmj" style="width: 100%;"></el-input>
              <span v-else>{{ form.zydmj }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                容积率
              </template>
              <el-input v-if="isEditing" v-model.number="form.rjl" style="width: 100%;"></el-input>
              <span v-else>{{ form.rjl }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                总建筑面积（平方米）
              </template>
              <el-input v-if="isEditing" v-model.number="form.zjzmj" style="width: 100%;"></el-input>
              <span v-else>{{ form.zjzmj }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                标准层建筑面积（平方米）
              </template>
              <el-input v-if="isEditing" v-model.number="form.bzcjzmj" style="width: 100%;"></el-input>
              <span v-else>{{ form.bzcjzmj }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                计容积率建筑面积(平方米)
              </template>
              <el-input v-if="isEditing" v-model.number="form.jrjljzmj" style="width: 100%;"></el-input>
              <span v-else>{{ form.jrjljzmj }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                建筑密度(%)
              </template>
              <el-input v-if="isEditing" v-model.number="form.jzmd" style="width: 100%;"></el-input>
              <span v-else>{{ form.jzmd }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                绿地率(%)
              </template>
              <el-input v-if="isEditing" v-model.number="form.ldl" style="width: 100%;"></el-input>
              <span v-else>{{ form.ldl }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                建筑栋数（栋）
              </template>
              <el-input v-if="isEditing" v-model.number="form.jzds" style="width: 100%;"></el-input>
              <span v-else>{{ form.jzds }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                地上建筑面积(平方米)
              </template>
              <el-input v-if="isEditing" v-model.number="form.dsjzmj" style="width: 100%;"></el-input>
              <span v-else>{{ form.dsjzmj }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                地下建筑面积(平方米)
              </template>
              <el-input v-if="isEditing" v-model.number="form.dxjzmj" style="width: 100%;"></el-input>
              <span v-else>{{ form.dxjzmj }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                最高建筑层数（层）
              </template>
              <el-input v-if="isEditing" v-model.number="form.zgjzcs" style="width: 100%;"></el-input>
              <span v-else>{{ form.zgjzcs }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                最高建筑高度(米)
              </template>
              <el-input v-if="isEditing" v-model.number="form.zgjzgd" style="width: 100%;"></el-input>
              <span v-else>{{ form.zgjzgd }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                机动车停车位(辆)
              </template>
              <el-input v-if="isEditing" v-model.number="form.jdctcw" style="width: 100%;"></el-input>
              <span v-else>{{ form.jdctcw }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                非机动车停车位(辆)
              </template>
              <el-input v-if="isEditing" v-model.number="form.fjdctcw" style="width: 100%;"></el-input>
              <span v-else>{{ form.fjdctcw }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                防火等级
              </template>
              <el-input v-if="isEditing" v-model="form.fhjd" style="width: 100%;"></el-input>
              <span v-else>{{ form.fhjd }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                规划文件
              </template>
              <el-input v-if="isEditing" v-model="form.ghwj" style="width: 100%;"></el-input>
              <span v-else>{{ form.ghwj }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { getProgrammeInformationById, updateProgrammeInformation } from '@/api/ManageApi/index';
  
  export default {
    props: {
      size: {
        type: String,
        default: ''
      },
      id: {
        type: [Number, String],
        required: true
      }
    },
    data() {
      return {
        isEditing: false,
        form: {
          bzcjzmj: 0,
          createBy: '',
          createId: 0,
          createTime: '',
          dsjzmj: 0,
          dxjzmj: 0,
          fjdctcw: 0,
          ghwj: '',
          id: 0,
          jdctcw: 0,
          jrjljzmj: 0,
          jzds: 0,
          jzmd: 0,
          ldl: 0,
          rjl: 0,
          updateBy: '',
          updateId: 0,
          updateTime: '',
          xmId: 0,
          zgjzcs: 0,
          zgjzgd: 0,
          zjzmj: 0,
          zydmj: 0
        },
        rules: {
          zydmj: [{ required: true, message: '总用地面积不能为空', trigger: 'blur' }],
          rjl: [{ required: true, message: '容积率不能为空', trigger: 'blur' }],
          zjzmj: [{ required: true, message: '总建筑面积不能为空', trigger: 'blur' }],
          bzcjzmj: [{ required: true, message: '标准层建筑面积不能为空', trigger: 'blur' }],
          jrjljzmj: [{ required: true, message: '计容积率建筑面积不能为空', trigger: 'blur' }],
          jzmd: [{ required: true, message: '建筑密度不能为空', trigger: 'blur' }],
          ldl: [{ required: true, message: '绿地率不能为空', trigger: 'blur' }],
          jzds: [{ required: true, message: '建筑栋数不能为空', trigger: 'blur' }],
          dsjzmj: [{ required: true, message: '地上建筑面积不能为空', trigger: 'blur' }],
          dxjzmj: [{ required: true, message: '地下建筑面积不能为空', trigger: 'blur' }],
          zgjzcs: [{ required: true, message: '最高建筑层数不能为空', trigger: 'blur' }],
          zgjzgd: [{ required: true, message: '最高建筑高度不能为空', trigger: 'blur' }],
          jdctcw: [{ required: true, message: '机动车停车位不能为空', trigger: 'blur' }],
          fjdctcw: [{ required: true, message: '非机动车停车位不能为空', trigger: 'blur' }],
          fhjd: [{ required: true, message: '防火等级不能为空', trigger: 'blur' }],
          ghwj: [{ required: true, message: '规划文件不能为空', trigger: 'blur' }]
        }
      };
    },
    created() {
      this.fetchData();
    },
    methods: {
      // 获取规划信息
      fetchData() {
        getProgrammeInformationById(this.id)
          .then(response => {
            const data = response.data;
            this.form = { ...data };
          })
          .catch(error => {
            console.error('数据获取失败:', error);
          });
      },
      // 导出操作
      handleExport() {
        this.download('system/post/export', {
          ...this.queryParams
        }, `post_${new Date().getTime()}.xlsx`);
      },
      // 打开编辑模式
      edit() {
        this.isEditing = true;
      },
      // 保存数据
      save() {
        this.$refs.form.validate(valid => {
          if (valid) {
            const formData = this.prepareFormData(this.form);
            updateProgrammeInformation(formData)
              .then(response => {
                this.$message.success('数据保存成功！');
                this.isEditing = false;
                this.fetchData(); // 刷新数据
              })
              .catch(error => {
                console.error('数据保存失败:', error);
                this.$message.error('数据保存失败，请重试！');
              });
          } else {
            this.$message.warning('请填写完整信息！');
          }
        });
      },
      // 准备表单数据
      prepareFormData(formData) {
        return {
          ...formData,
          createBy: '',
          createId: 0,
          createTime: '',
          updateBy: '',
          updateId: 0,
          updateTime: ''
        };
      }
    }
  };
  </script>
  
  <style scoped>
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #FFFFFF;
    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  }
  
  .content {
    padding: 1rem;
    display: flex;
  }
  
  .containertop {
    height: auto;
    display: flex;
    justify-content: space-between;
    padding: .7rem 0;
    padding: .5rem;
    border-bottom: 1px solid #E5E5E5;
  }
  
  .topleft {
    width: 8rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
  }
  
  .topleft img {
    width: 0.81rem;
    height: 0.81rem;
  }
  
  .topleft span {
    width: auto;
    height: 0.88rem;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 500;
    font-size: 0.88rem;
    color: #3D424C;
    line-height: 0.88rem;
    text-align: right;
    font-style: normal;
    text-transform: none;
  }
  
  .picturediv {
    width: 18.31rem;
    height: 25.31rem;
    background-color: lightblue;
  }
  
  .descriptionsdiv {
    width: 100%;
    margin-left: 1rem;
    height: auto;
  }
  
  .two-row-item {
    height: 20rem;
  }
  </style>