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 label="键">
            {{ otherInfo.zdname }}
          </el-descriptions-item>
          <el-descriptions-item label="值">
            {{ otherInfo.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>
import { addxmqt, updatexmqt, getOtherInfoByxmid } from '@/api/ManageApi/index';

export default {
  props: {
    xmId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      otherInfo: { // 其他信息
        zdname: '', // 键
        zdinfor: '' // 值
      },
      dialogVisible: false, // 控制弹窗显示
      dialogTitle: '', // 弹窗标题
      form: { // 表单数据
        zdname: '',
        zdinfor: ''
      },
      isEditMode: false // 是否为编辑模式
    };
  },
  created() {
    this.fetchOtherInfo(); // 页面加载时获取数据
  },
  methods: {
    // 获取其他信息
    fetchOtherInfo() {
      getOtherInfoByxmid({ xmId: this.xmId }) // 确保参数名和接口定义一致
        .then(response => {
          if (response.code === 200 && response.data) {
            this.otherInfo = response.data; // 填充数据
          } else {
            console.error("获取其他信息失败：数据为空");
          }
        })
        .catch(error => {
          console.error("获取其他信息失败:", error);
        });
    },
    // 打开弹窗
    openDialog(mode) {
      if (mode === 'add') {
        this.dialogTitle = '新增';
        this.isEditMode = false;
        this.form = { zdname: '', zdinfor: '' }; // 重置表单
      } else if (mode === 'edit') {
        this.dialogTitle = '编辑';
        this.isEditMode = true;
        this.form = { ...this.otherInfo }; // 填充当前数据
      }
      this.dialogVisible = true;
    },
    // 提交表单
    submitForm() {
      if (this.isEditMode) {
        // 编辑模式
        updatexmqt({ ...this.form, xmId: this.xmId })
          .then(response => {
            if (response.code === 200) {
              this.$message.success('编辑成功');
              this.fetchOtherInfo(); // 刷新数据
            }
          })
          .catch(error => {
            console.error("编辑失败:", error);
          });
      } else {
        // 新增模式
        addxmqt({ ...this.form, xmId: this.xmId })
          .then(response => {
            if (response.code === 200) {
              this.$message.success('新增成功');
              this.fetchOtherInfo(); // 刷新数据
            }
          })
          .catch(error => {
            console.error("新增失败:", error);
          });
      }
      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>