airoptweb/src/views/home/newfile.vue

<template>
    <!-- 新建 -->
    <div class="demo-collapse">
    <el-collapse  class="custom-collapse" v-model="activeNames" @change="handleChange">
      <el-collapse-item name="1">
        <template #title>
          <span style="font-size: 14px;">新建工程</span>
        </template>
        <div class="collapse-list" >
            <div class="list" @click="newclick()">
                <el-image :src="s0" fit="contain" ></el-image>
            </div>
        </div>
    
      </el-collapse-item>
      <el-collapse-item name="2">
        <template #title>
          <span style="font-size: 14px;">函数优化模板</span>
        </template>
        <div class="collapse-list">
         <div v-for="(item, index) in collapselist_1" :key="index"  @click="clickimg(item,'2',index)"
         @mouseenter="handleMouseEnter(index, '2')"
         @mouseleave="handleMouseLeave('2')"
         class="showImgDiv">
            <div class="list">
                <el-image :src="item.image" fit="contain"  ></el-image>
                 <!-- 鼠标悬停时显示的图片容器 -->
                <div v-if="hoveredIndexes['2'] === index && !!item.image2" class="hoveredImageContainer">
                  <el-image :src="item.image2  || ''" fit="contain" class="hoveredImage"></el-image>
                </div>
            </div>
            <p class="modelStyle">{{item.name}}</p>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item name="3">
        <template #title>
          <span style="font-size: 14px;">翼型优化模板</span>
        </template>
        <div class="collapse-list">
         <div v-for="(item, index) in collapselist_2" :key="index"  @click="clickimg(item,'3',index)"
            @mouseenter="handleMouseEnter(index, '3')"
            @mouseleave="handleMouseLeave('3')"
            class="showImgDiv">
            <div class="list">
                <el-image :src="item.image" fit="contain"></el-image>
                <!-- 鼠标悬停时显示的图片容器 -->
                <div v-show="hoveredIndexes['3'] === index && !!item.image2" class="hoveredImageContainer">
                  <el-image :src="item.image2  || ''" fit="contain" class="hoveredImage"></el-image>
                </div>
            </div>
            <p class="modelStyle">{{item.name}}</p>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item name="4">
        <template #title>
          <span style="font-size: 14px;">机翼优化模板</span>
        </template>
        <div class="collapse-list">
         <div v-for="(item, index) in collapselist_3" :key="index"  @click="clickimg(item,'4',index)">
            <div class="list"   >
                <el-image :src="item.image" fit="contain"  ></el-image>
            </div>
            <p class="modelStyle">{{item.name}}</p>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
  <el-dialog v-model="eldialog"  align-center    :append-to-body="true" width="400" class="dialog_class">

 <template #header="{ titleId, titleClass }">
    <div class="my-header ">
        <!-- <el-image :src="icon" fit="contain"></el-image> -->
        <h4 :id="titleId" :class="titleClass">新建</h4>

    </div>
</template>
<div>
  <el-form-item label="名称：" >
        <el-input v-model="newfile.name" class="w-50 m-2" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="描述：">
        <el-input v-model="newfile.remark" class="w-50 m-2" placeholder="请输入" />
    </el-form-item>
</div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="eldialog = false">取消</el-button>
        <el-button type="primary" @click="saveclick();"
          >确认</el-button
        >
      </span>
    </template>

</el-dialog>
</template>
<script setup>
import { ref, onMounted, reactive, } from "vue";
import {CaretRight } from "@element-plus/icons-vue";
import { RouterView, RouterLink,useRouter } from "vue-router"
import { request, uploadFile } from "@/utils/request";
import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
import s0 from "@/assets/img/s0.png";
import open2 from "@/assets/img/open2.png";
import open3 from "@/assets/img/open3.png";
let router = useRouter();
let eldialog=ref(false);
const activeNames = ref(['1','2', '3', '4']);
let mid=ref('');
let modelflow=ref();
let gcid=ref('');//工程模版
let mob=ref('');
let pid=ref('');
let newfile=ref({
  name:'',
  remark:'',
});

onMounted(() => {
  modelget();
});
const handleChange = (val) => {
  console.log(val)

}
const newclick = () => {
     sessionStorage.clear();
  eldialog.value=true;


}

let collapselist = ref([
  {img:open2},{img:open3},
])

let collapselist_1 = ref([]); // 1-函数优化模版
let collapselist_2 = ref([]); // 2-翼型优化模版
let collapselist_3 = ref([]); // 3-机翼优化模版
// 记录当前悬停的项目索引
const hoveredIndexes = ref({});

// 定义处理鼠标进入的方法
const handleMouseEnter = (index, section) => {
  hoveredIndexes.value[section] = index;
};

// 定义处理鼠标离开的方法
const handleMouseLeave = (section) => {
  delete hoveredIndexes.value[section];
};
const openclick=()=>{
   // router.replace({ path: key })
}
const saveclick=()=>{
  if(newfile.value.name==''||newfile.value.name==null||newfile.value.name==undefined){
    ElMessage.error('名称不能为空')
  }else if(newfile.value.remark==''||newfile.value.remark==null||newfile.value.remark==undefined){
    ElMessage.error('描述不能为空')
  }
  else{
   
  if(gcid.value=='2'){
    
    modeladd();
  }else{
    newbaocun();
  }
  }

}
//新建的保存
const newbaocun=()=>{
  const params = {
        transCode: 'MDO0002',
        pid: pid.value,
        name: newfile.value.name,
        remark:newfile.value.remark,
        image:'',
        isshare:'1',
        flow:'' 
    }
    request(params)
        .then((res) => {
            console.log(res);
            pid.value=res.pid;
            newfile.value.pid =res.pid;
            newfile.value.flow ="";
            ElMessage({
                  message: res.returnMsg,
                  type: 'success',
              })
              eldialog.value = false;
           router.push({ path: "/home" ,query:{pid: pid.value}});
           sessionStorage.setItem("objlist",JSON.stringify(newfile.value));
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
//模版添加

// 模版查询
const modelget=()=>{
  const params = {
        transCode: 'MDO0005',
        count:'',
        page:1,
        searchtag:''
    }
    request(params)
        .then((res) => {
          // 清空原有的数据
          collapselist_1.value = [];
          collapselist_2.value = [];
          collapselist_3.value = [];
          // 遍历 res.rows 并根据 type 分配到对应的 collapselist
          res.rows.forEach(item => {
            switch (item.type) {
              case 1:
                collapselist_1.value.push(item);
                break;
              case 2:
                collapselist_2.value.push(item);
                break;
              case 3:
                collapselist_3.value.push(item);
                break;
              default:
                console.log(`Unknown type: ${item.type}`);
        }
    });
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
const modeladd=()=>{
  const params = {
        transCode: 'MDO0004',
        mid:mid.value,
        name:newfile.value.name,
        remark:newfile.value.description
    }
    request(params)
        .then((res) => {
          ElMessage({
                  message: res.returnMsg,
                  type: 'success',
              })
              modelflow.value=res;
              console.log(modelflow.value);
              router.push({ path: "/home",query:{id:'2',pid:res.pid}});
              sessionStorage.setItem("objlist",JSON.stringify(modelflow.value));
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
}
const clickimg=(data,index,id)=>{
   mid.value=data.mid;
   mob.value=id;//判断当前点击第几的模版
   gcid.value=index;
eldialog.value=true;

}

</script>
<style lang="scss" scoped>
.collapse-list{
    display: flex;
    .list{
      width: 110px;
      height: 110px;
      border: 2px solid #71AAFF;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin: 0 5px;
    }
}
.hoveredImageContainer {
  height: 220px;
  width: 180px;
  position: absolute;
  left: calc(100% + 5px); /* 或者调整到合适的距离 */
  top: -10px;
  z-index: 10; /* 确保悬浮图片在其他内容之上 */
}

.showImgDiv {
  position: relative; /* 确保 .hoveredImageContainer 相对于 .showImgDiv 定位 */
}
.modelStyle{
  font-family: 'Source Sans-Regular';
  font-size: 12px;
  color: #333333;
  text-align: center;
}
</style>
<style>
.custom-collapse .el-collapse-item__header {
  font-family: 'Source Sans-Regular';
  font-weight: 500;
  font-size: 14px;
  color: #383838;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.custom-collapse .el-collapse-item__header {
  align-items: center;
  border: none;
  height: 20px;
  margin: 6px 6px 6px 0;
}
 
.custom-collapse .el-collapse-item__arrow {
  order: -1; /* 将箭头元素的顺序设置为最前 */
  margin-right: 5px;
  margin-left: 6px; /* 根据需要调整箭头与标题的间距 */
}
 .custom-collapse .el-collapse-item__wrap,.custom-collapse{
    border: none;
}

.custom-collapse .el-collapse-item__content{
  padding-bottom: 5px;
}

</style>