Gyyq-Upstairs/src/views/components/ProjectDetails/Others.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 type="primary" size="medium" plain
          style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="openDialog('add')">
          <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="openDialog('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 type="primary" size="medium" plain
          style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
          <img src="../../../assets/images/detailsicon/icon-dc@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(242,83,83,0.1);color: #F25353;" @click="deleteData">
          <img src="../../../assets/images/detailsicon/icon-delet@2x.png" alt="删除"
            style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
          删除
        </el-button>
      </div>
    </div>

    <!-- 数据展示表格 -->
    <div class="tagdiv">
      <div class="descriptionsdiv">
        <el-descriptions class="margin-top" :column="4" border>
          <el-descriptions-item v-for="(item, index) in anotherInfo" :key="index" :label="item.zdname">
            {{ item.zdinfor }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <!-- 表单弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="字段名称">
          <el-input v-model="form.zdname" placeholder="请输入字段名称"></el-input>
        </el-form-item>
        <el-form-item label="字段内容">
          <el-input v-model="form.zdinfor" placeholder="请输入字段内容 "></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    anotherInfo: {
      type: Array,
      required: true,
    }
  },
  created() {
    console.log('anotherInfo 内容:', this.anotherInfo);
  },
  data() {
    return {
      dialogVisible: false, // 控制弹窗显示
      dialogTitle: '', // 弹窗标题
      form: { // 表单数据
        zdname: '',
        zdinfor: ''
      },
      isEditMode: false // 是否为编辑模式
    };
  },
  methods: {
    // 打开弹窗
    openDialog(mode) {
      if (mode === 'add') {
        this.dialogTitle = '新增';
        this.isEditMode = false;
        this.form = { zdname: '', zdinfor: '' }; // 重置表单
      } else if (mode === 'edit') {
        this.dialogTitle = '编辑';
        this.isEditMode = true;
        // 填充当前数据，假设选择第一个数据进行编辑
        if (this.anotherInfo.length > 0) {
          this.form = { ...this.anotherInfo[0] };
        } else {
          this.form = { zdname: '', zdinfor: '' };
        }
      }
      this.dialogVisible = true;
    },
    // 准备表单数据
    prepareFormData(form) {
      return {
        zdname: form.zdname,
        zdinfor: form.zdinfor
      };
    },
    // 提交表单
    submitForm() {
      const formData = this.prepareFormData(this.form);
      if (this.isEditMode) {
        // 编辑模式
        // 假设更新第一个数据
        if (this.anotherInfo.length > 0) {
          this.anotherInfo[0] = { ...formData };
          this.$message.success('编辑成功');
        }
      } else {
        // 新增模式
        this.anotherInfo.push({ ...formData }); //包含 zdname 和 zdinfor
        this.$message.success('新增成功');
      }
      // 触发事件，将数据传递给父组件
      this.$emit('update-data', formData);
      this.dialogVisible = false; // 关闭弹窗
    },
    // 删除数据（暂不实现）
    deleteData() {
      this.$message.warning('删除功能暂未实现');
    }
  }
};
</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;
}

.tagdiv {
  padding: 1rem 3em 1rem 1rem;
}

.block {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}
</style>