aircraft-web/src/views/project/index.vue

<template>
  <div class="project-page">
    <img class="background-image" :src="bgback" alt="背景图">
    <el-header>
      <myheader />
    </el-header>
    <el-main class="project-container">
      <div class="project-content" id="projectContent">
        
        <div class="newproject" v-show="isnew">
          <div class="newproject-header">
            {{ titlename }}
            <el-icon class="close-icon" @click="isnew = false">
              <Close />
            </el-icon>
          </div>
          <div class="newproject-body">
            <el-form>
              <el-row :gutter="20">
                <el-col :span="10">
                  <el-form-item label="项目名称:">
                    <el-input v-model="newproject.name" maxlength="100"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="备注:">
                    <el-input v-model="newproject.remark" maxlength="500"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item>
                    <el-button @click="opProject">确定</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        
        <div class="project-table">
          <div class="project-table-header">
            项目集
          </div>

          <div class="table-container custom-table">
            <el-table border 
            :data="projectlists" 
            style="width: 100%; overflow: auto;"
            height="365"
            highlight-current-row
            @current-change="handleRowChange"
            >
              <el-table-column prop="name" label="项目名称"></el-table-column>
              <el-table-column prop="remark" label="备注"></el-table-column>
              <el-table-column prop="updateTime" label="修改时间" min-width="100"></el-table-column>
              <el-table-column prop="createTime" label="创建时间" min-width="100"></el-table-column>

            </el-table>
          </div>

          <div class="project-footer">
            <div class="project-main-pagination">
              <div class="custom-pagination">
                <el-pagination v-model:current-page="gd.currentPage" v-model:page-size="gd.pageSize"
                  :page-sizes="[8, 16, 32, 64]" background size="default" layout="prev, slot, sizes, pager, next"
                  :total="parseInt(gd.total)" class="mt-4" @size-change="handleSizeChange"
                  @current-change="handleCurrentChange">
                  <template #default>
                    <span style="color: #FFFFFF;">总计 {{ gd.total }}</span>
                  </template>
                </el-pagination>
              </div>
            </div>

            <div class="custom-btn">
              <el-button @click="addone">新增</el-button>
              <el-button @click="editSelected">编辑</el-button>
              <el-button @click="deleteSelected">删除</el-button>
              <el-button @click="confirmSelected">打开</el-button>
            </div>
          </div>
          
        </div>
      </div>
    </el-main>
  </div>
</template>
<script setup>
import myheader from '@/components/layout/header.vue'

import { RouterView, RouterLink, useRouter, useRoute } from "vue-router"
import { request, enPassword } from "@/utils/request";
import { ElMessage, ElMessageBox } from 'element-plus'
import { Close } from '@element-plus/icons-vue';
import { useProjectStore } from '@/store/project'

import bgback from "@/assets/img/project-bg.png"

const router = useRouter();
// 获取路由实例
const route = useRoute()

const projectStore = useProjectStore()

const isnew = ref(false)

const newproject = ref({
  name: '',
  remark: ''
})

let gd = ref({
    total: 1,
    currentPage: 1,
    pageSize:8,
    searchtag: ''
})


const projectlists = ref()
const currentRow = ref()
const titlename = ref('新建项目')

const handleSizeChange = (newSize) => {
    gd.value.pageSize = newSize;
    gd.value.currentPage = 1;
    getprojectlist();
}

const handleCurrentChange=(val)=>{
    getprojectlist();
}

const handleRowChange = (val) => {
  console.log("当前行：",val)
  currentRow.value = val;
}

const getprojectlist = () => {
    const params = {
        transCode: 'AC00001',
        count: gd.value.pageSize,
        page: gd.value.currentPage,
        searchtag: gd.value.searchtag,
    }
    request(params)
        .then((res) => {
            // console.log(res);
            gd.value.total = res.total;
            projectlists.value=res.rows.map((item) =>({
              ...item,
              updateTime: item.updateTime.split(' +')[0],
              createTime: item.createTime.split(' +')[0],
            }))
        })
        .catch((err) => {
            console.error(err);
            ElMessage.error(err.returnMsg)
        })
};

const opProject = () => {
  if(titlename.value ==='新建项目'){
    addProject();
  }else {
    editProject();
  }
}

// 新增
const addone = () => {
  isnew.value = true;
  titlename.value = '新建项目';
  newproject.value.name = '';
  newproject.value.remark = '';
}

const addProject = () => {
  const params = {
    transCode: 'AC00002',
    name: newproject.value.name,
    remark: newproject.value.remark,
  };
  request(params)
    .then((res) => {
      console.log(res);
      ElMessage.success('添加成功');
      isnew.value = false;
      getprojectlist();
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg);
    });
};

// 编辑选中行
const editSelected = () => {
  if (!currentRow.value) {
    ElMessage.warning("请选择一个项目")
    return
  }
  isnew.value = true;
  titlename.value = '编辑项目';
  newproject.value.name = currentRow.value.name;
  newproject.value.remark = currentRow.value.remark;
}

const editProject = () => {
  const pid = currentRow.value.pid
  const params = {
    transCode: 'AC00002',
    pid:pid,
    name: newproject.value.name,
    remark: newproject.value.remark,
  };
  request(params)
    .then((res) => {
      console.log(res);
      ElMessage.success('编辑成功');
      isnew.value = false;
      getprojectlist();
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg);
    });
}


// 删除选中行
const deleteSelected = () => {
  ElMessageBox.confirm(
    "确定要删除选中的项目吗?", // "确定要删除选中的项目吗?"
    "提示",           // "提示"
    {
      confirmButtonText: "确定", // "确定"
      cancelButtonText: "取消",   // "取消"
      type: 'warning'
    }
  ).then(() => {
    const selectedIds = currentRow.value.pid;
    // console.log('删除的项目ID:', selectedIds)
    const params = {
      transCode: 'AC00003',
      pid: selectedIds
    }

    request(params)
      .then((res) => {
        ElMessage.success("删除成功") // "删除成功"
        currentRow.value = ''
        getprojectlist()
      })
      .catch((err) => {
        ElMessage.error(err.returnMsg || "删除失败") // "删除失败"
        console.log(err)
      })
  }).catch(() => {
    ElMessage.info("已取消删除") // "已取消删除"
  })
}


const confirmSelected = () => {
  
  if (!currentRow.value) {
    ElMessage.warning("请选择一个项目")
    return
  }

  // 获取选中项的pid
  const pid = currentRow.value.pid
  // console.log('选中的项目:', currentRow.value)
  projectStore.setpid(pid)
  projectStore.setProjectInfo({
    name: currentRow.value.name,
    remark: currentRow.value.remark,
  })

  router.push({
    path: '/',
  })
}



onMounted(() => {
    getprojectlist();
});


</script>
<style scoped>
.project-page {
  width: 100%;
  min-width: 1400px;
  min-height: 700px;
  height: 100vh;
  overflow: hidden;

  position: relative;
  /* 关键：为子元素绝对定位提供参照 */
}


.background-image {
  position: absolute;
  /* 脱离文档流 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  /* 或 contain，根据需求选择 */
  object-position: center;
  z-index: 0;
  /* 置于底层 */
}

.project-container {
  position: relative;
  /* 关键：确保内容在背景上方 */
  z-index: 1;
  /* 高于背景图的层级 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - 70px);
  min-height: 630px;
}

.project-content {
  width: 80%;
  position: relative;
  border: 1px solid transparent;
  border-image: linear-gradient(to right, #0075FF, #00FFD8, #00FFD8) 1;
}

.newproject {
  width: 100%;
  height: 15%;
  padding: 24px 24px 0;

  .newproject-header{
    font-size: 20px;
    color: #2CFFFF;
    padding-bottom: 10px;

    display: flex;
    justify-content: space-between; /* 标题和图标两端对齐 */
    align-items: center; /* 垂直居中 */
  }

  .newproject-body {
    width: 100%;
    padding-left: 5px;

    :deep(.el-form-item__label) {
      color: #2CFFFF;
    }

    .el-button {
      width: 100%;
      background: linear-gradient( 355deg, #00ABFF 0%, #023187 100%);
      border-radius: 0px 0px 0px 0px;
      border: 2px solid #52C6FF;

      color: #FFFFFF;
    }
  }
}

.close-icon {
  cursor: pointer; /* 鼠标悬停时显示手型 */
  transition: color 0.3s;
}

.close-icon:hover {
  color: #ff4d4f; /* 悬停时红色 */
}

.project-table {
  width: 100%;
  height: 85%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 24px;
}

.project-table-header {
  font-size: 20px;
  color: #2CFFFF;
  padding-bottom: 10px;
}

.table-container {
  width: 100%;
  height: 85%;
}

.project-footer {
  width: 100%;

  padding:10px;
  display: flex;
  justify-content: space-between;
}
</style>