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 v-if="checkRole(['admin','common'])"
          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="toggleEditMode"
          :loading="saveLoading">
          <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
            style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
          {{ isEditMode ? '保存' : '编辑' }}
        </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">
            <template v-if="isEditMode">
              <el-input v-model="item.zdinfor" size="small" @change="handleFieldChange(item)"></el-input>
            </template>
            <template v-else>
              {{ item.zdinfor }}
            </template>
          </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 { checkPermi, checkRole } from "@/utils/permission"; 

export default {
  props: {
    anotherInfo: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  created() {
    console.log('anotherInfo 内容:', this.anotherInfo);
  },
  data() {
    return {
      dialogVisible: false, // 控制弹窗显示
      dialogTitle: '', // 弹窗标题
      form: {
        zdname: '',
        zdinfor: ''
      },
      isEditMode: false, // 是否为编辑模式
      saveLoading: false, // 保存加载状态
      editedData: [] // 存储编辑后的数据
    };
  },
  methods: {
    checkPermi,
    checkRole,
    
    // 打开新增对话框
    openDialog(type) {
      if (type === 'add') {
        this.dialogTitle = '新增信息';
        this.form = {
          zdname: '',
          zdinfor: ''
        };
        this.dialogVisible = true;
      }
    },
    
    // 切换编辑模式
    toggleEditMode() {
      if (this.isEditMode) {
        // 保存操作
        this.saveChanges();
      } else {
        // 进入编辑模式
        this.isEditMode = true;
        // 创建编辑数据的副本
        this.editedData = JSON.parse(JSON.stringify(this.anotherInfo));
      }
    },
    
    // 处理字段变化
    handleFieldChange(item) {
      const index = this.editedData.findIndex(i => i.zdname === item.zdname);
      if (index !== -1) {
        this.editedData[index] = { ...item };
      }
    },
    
    // 保存修改
    saveChanges() {
      this.saveLoading = true;
      
      try {
        // 准备要发送给父组件的数据
        const updatedData = this.editedData.map(item => ({
          ...item,
        }));
        
        // 发送给父组件
        this.$emit('update-info', updatedData);
        
        // 退出编辑模式
        this.isEditMode = false;
      } catch (error) {
        console.error('保存失败:', error);
      } finally {
        this.saveLoading = false;
      }
    },
    
    // 提交新增表单
    submitForm() {
      const newItem = {
        zdname: this.form.zdname,
        zdinfor: this.form.zdinfor,
        createTime: new Date().toISOString(),
        // 其他需要的字段
      };
      
      // 发送给父组件
      this.$emit('add-info', newItem);
      
      this.dialogVisible = false;
    },
    
    // 删除数据
    deleteData() {
      this.$confirm('确定要删除这些信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('delete-info');
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    }
  }
}
</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>