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 label="总用地面积(平方米)">
            <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 label="容积率">
            <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 label="总建筑面积（平方米）">
            <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 label="标准层建筑面积（平方米）">
            <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 label="计容积率建筑面积(平方米)">
            <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 label="建筑密度(%)">
            <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 label="绿地率(%)">
            <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 label="建筑栋数（栋）">
            <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 label="地上建筑面积(平方米)">
            <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 label="地下建筑面积(平方米)">
            <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 label="最高建筑层数（层）">
            <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 label="最高建筑高度(米)">
            <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 label="机动车停车位(辆)">
            <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 label="非机动车停车位(辆)">
            <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 label="防火等级">
            <el-input v-if="isEditing" v-model="form.fhdj" style="width: 100%;"></el-input>
            <span v-else>{{ form.fhdj }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="规划文件">
            <div v-if="isEditing">
              <span v-if="form.ghwj">{{ form.ghwj }}</span>
              <el-tooltip class="item" effect="dark" content="支持pdf或word文件，大小不得超过50MB" placement="top-start">
                <el-button type="text" icon="el-icon-upload" @click="showFileDialog">编辑文件</el-button>
              </el-tooltip>
            </div>
            <span v-else>{{ form.ghwj }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog title="上传规划文件" :visible.sync="dialogVisible" width="30%">
      <FileUpload @file-uploaded="handleFileUploaded" v-model="form.ghwj" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getProgrammeInformationById, updateProgrammeInformation } from '@/api/ManageApi/index';
import FileUpload from '@/components/FileUpload2'

export default {
  components: { FileUpload },
  props: {
    size: {
      type: String,
      default: ''
    },
    xmId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      isEditing: false,
      dialogVisible: false,
      form: {
        id: 0,
        xmId: 0,
        zydmj: 0,
        rjl: 0,
        zjzmj: 0,
        bzcjzmj: 0,
        jrjljzmj: 0,
        jzmd: 0,
        ldl: 0,
        jzds: 0,
        dsjzmj: 0,
        dxjzmj: 0,
        zgjzcs: 0,
        zgjzgd: 0,
        jdctcw: 0,
        fjdctcw: 0,
        fhdj: null,
        ghwj: '',
        createBy: '',
        createId: 0,
        createTime: null,
        updateBy: '',
        updateId: 0,
        updateTime: null,
      },
      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' }],
        fhdj: [{ required: true, message: '防火等级不能为空', trigger: 'blur' }],
        ghwj: [{ required: true, message: '规划文件不能为空', trigger: 'blur' }]
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    // 获取规划信息
    fetchData() {
      console.log('Fetching data for xmId:', this.xmId);
      getProgrammeInformationById({ xmId: this.xmId })
        .then(response => {
          console.log('API response:', response);
          if (response.code === 200 && response.data) {
            this.form = { ...response.data };
            console.log('Form data after assignment:', this.form);
          } else {
            console.error('数据格式不正确:', response);
          }
        })
        .catch(error => {
          console.error('数据获取失败:', error);
        });
    },
    // 导出操作
    handleExport() {
      this.download('system/post/export', {
        ...this.queryParams
      }, `post_${new Date().getTime()}.xlsx`);
    },
    // 打开编辑模式
    edit() {
      this.isEditing = true;
    },
    // 保存数据
    save() {
      if (this.validateForm()) {
        const formData = this.prepareFormData(this.form);
        updateProgrammeInformation(formData)
          .then(response => {
            this.$message.success('数据保存成功！');
            this.isEditing = false;
            // 添加延迟以确保数据更新
            setTimeout(() => {
              this.fetchData(); // 刷新数据
            }, 500); // 500毫秒延迟
          })
      }
    },
    // 手动验证表单
    validateForm() {
      for (const field in this.rules) {
        const rules = this.rules[field];
        const value = this.form[field];
        for (const rule of rules) {
          if (rule.required && !value) {
            this.$message.error(rule.message);
            return false;
          }
        }
      }
      return true;
    },
    // 准备表单数据
    prepareFormData(formData) {
      return {
        ...formData,
        createBy: '',
        createId: 0,
        createTime: '',
        updateBy: '',
        updateId: 0,
        updateTime: ''
      };
    },
    // 显示文件上传弹窗
    showFileDialog() {
      this.dialogVisible = true;
    },
    // 处理文件上传结果
    handleFileUploaded(fileName) {
      this.form.ghwj = fileName;
    }
  }
};
</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;
}

.descriptionsdiv {
  width: 100%;
  margin-left: 1rem;
  height: auto;
}
</style>