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

<template>
  <div class="project-page">
    <el-header class="project-header">
      <div class="boxcontainer">
        <el-button class="box">
          <img :src="getImgPath('open.png')" style="width: 20px; margin-right: 5px;" />
          {{ $t('project.open') }}
        </el-button>
        <el-button class="box" @click="addProjectdialog = true">
          <img :src="getImgPath('blueplus.png')" style="width: 20px; margin-right: 5px;" />
          {{ $t('project.create') }}
        </el-button>
        <el-button class="box">
          <img :src="getImgPath('blueplus.png')" style="width: 20px; margin-right: 5px;" />
          {{ $t('project.newcompound') }}
        </el-button>
        <el-button class="box">
          <img :src="getImgPath('blueplus.png')" style="width: 20px; margin-right: 5px;" />
          {{ $t('project.newlibrary') }}
        </el-button>
      </div>
      

    </el-header>
    <el-main class="project-main">
      <div class="project-main-header">
        <div class="project-main-header-title">
            <span style="margin-right: 10px;">{{ $t('project.projectlist') }}</span>
            <el-input v-model="gd.searchtag" style="width: 200px;margin-right: 5px;">
            </el-input>
            <el-button @click="getprojectlist" :icon="Search" style="width: 22px;" class="custom-icon-button"/>
        </div>
        <div class="project-main-header-actions">
          <el-button class="custom-icon-button">
            <img :src="getImgPath('daohang.png')" style="width: 22px;"/>
          </el-button>
          <el-button class="custom-icon-button">
            <img :src="getImgPath('jiaocheng.png')" style="width: 22px;"/>
          </el-button>
          <el-button class="custom-icon-button">
            <img :src="getImgPath('shiying.png')" style="width: 22px;"/>
          </el-button>
        </div>
      </div>  
      <div class="project-main-content custom-table">
        <el-table
          ref="tableRef"
          :data="projectlists"
          style="width: 100%;height: 540px; overflow: auto;"
          @row-click="handleRowClick"
          :row-class-name="tableRowClassName"
        >
          <el-table-column type="index" :label="$t('project.number')" width="100"></el-table-column>
          <el-table-column prop="name" :label="$t('project.name')" ></el-table-column>
          <el-table-column prop="dirsize" :label="$t('project.dirsize')" ></el-table-column>
          <el-table-column prop="updateTime" :label="$t('project.updateTime')" ></el-table-column>
          <el-table-column prop="uname" :label="$t('project.uname')" ></el-table-column>
          <el-table-column prop="keywords" :label="$t('project.keywords')" ></el-table-column>
          <el-table-column prop="description" :label="$t('project.description')" ></el-table-column>
        </el-table>
        
      </div>
      <div class="project-main-pagination">
        <div class="custom-pagination" >
            <el-pagination
                v-model:current-page="gd.currentPage4"
                v-model:page-size="gd.pageSize4"
                background
                size="small"
                layout="prev, slot, pager, next"
                :total="parseInt(gd.total)"
                class="mt-4"
                @current-change="handleCurrentChange2"
            >
              <template #default>
                <span>{{ $t('project.total') }} {{ gd.total }}</span>
              </template>
            </el-pagination>
        </div>
      </div>
      <div class="project-main-footer lastbtn">
        <el-button @click="selectAll">{{ $t('project.selectAll') }}</el-button>
        <el-button @click="deleteSelected" :disabled="selectedRows.length === 0">{{ $t('project.delete') }}</el-button>
        <el-button @click="confirmSelected" :disabled="selectedRows.length === 0">{{ $t('project.ok') }}</el-button>
      </div>
    </el-main>

  </div>

  <el-dialog v-model="addProjectdialog" align-center :append-to-body="true" 
    width="500" class="dialog_class" draggable>

    <template #header="{ titleId, titleClass }">
    <div class="my-header ">
        <!-- <el-image :src="icon" fit="contain"></el-image> -->
        <h4 :id="titleId" :class="titleClass">{{ $t('dialog.new') }}</h4>

    </div>
    </template>
    <div>
    <el-form-item :label="`${$t('project.name')}: `" label-width="120px">
        <el-input v-model="newproject.name" class="w-50 m-2" placeholder="请输入" maxlength="100"/>
    </el-form-item>
    <el-form-item :label="`${$t('project.description')}: `" label-width="120px">
        <el-input v-model="newproject.description" class="w-50 m-2" placeholder="请输入" maxlength="500"/>
    </el-form-item>
    </div>
    <template #footer>
      <span class="lastbtn">
        <el-button @click="addProjectdialog = false">{{ $t('dialog.cancel') }}</el-button>
        <el-button type="primary" @click="addProject();">
          {{ $t('dialog.ok') }}
        </el-button>
      </span>
    </template>

  </el-dialog>
  
</template>

<script setup>
import { request } from "@/utils/request";
import { ElMessage, ElButton, ElDialog, ElSelect, ElMessageBox } from 'element-plus'
import {Search} from '@element-plus/icons-vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

let projectlists = ref([]);
let selectedRows = ref([]);
let tableRef = ref();
let addProjectdialog = ref(false);

let newproject = ref({
    name: '',
    description: ''
});

let gd = ref({
    total: 1,
    currentPage4: 1,
    pageSize4:5,
    searchtag: ''
})

const getImgPath = (url) => {
  return new URL(`../../assets/img/${url}`, import.meta.url).href
}

const getprojectlist = () => {
    const params = {
        transCode: 'ES0001',
        count: gd.value.pageSize4,
        page: gd.value.currentPage4,
        searchtag: gd.value.searchtag,
    }
    request(params)
        .then((res) => {
            // console.log(res);
            gd.value.total = res.total;
            projectlists.value=res.rows;
        })
        .catch((err) => {
            ElMessage.error(err.returnMsg)
        })
};

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

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

// 处理行点击事件
const handleRowClick = (row) => {
  const index = selectedRows.value.findIndex(item => item.pid === row.pid);
  if (index === -1) {
    selectedRows.value = [row]; // 单选模式，只保留一个选中项
    // selectedRows.value.push(row); // 如果是多选模式，使用 push
  } else {
    selectedRows.value.splice(index, 1); // 如果已选中，则取消选中
  }
};

// 为行添加类名
const tableRowClassName = ({ row }) => {
  return selectedRows.value.some(item => item.pid === row.pid) ? 'selected-row' : '';
};

// 全选/取消全选
const selectAll = () => {
  if (selectedRows.value.length === projectlists.value.length) {
    selectedRows.value = [];
  } else {
    selectedRows.value = [...projectlists.value];
  }
};

// 删除选中行
const deleteSelected = () => {
  ElMessageBox.confirm(
    t('message.confirmDelete'), // "确定要删除选中的项目吗?"
    t('common.tip'),           // "提示"
    {
      confirmButtonText: t('common.ok'), // "确定"
      cancelButtonText: t('common.cancel'),   // "取消"
      type: 'warning'
    }
  ).then(() => {
    const selectedIds = selectedRows.value.map(row => row.pid)
    // console.log('删除的项目ID:', selectedIds)
    const params = {
      transCode: 'ES0003',
      pid: selectedIds.join(',')
    }

    request(params)
      .then((res) => {
        ElMessage.success(t('message.deleteSuccess')) // "删除成功"
        selectedRows.value = []
        getprojectlist()
      })
      .catch((err) => {
        ElMessage.error(err.returnMsg || t('message.deleteFailed')) // "删除失败"
      })
  }).catch(() => {
    ElMessage.info(t('message.deleteCancelled')) // "已取消删除"
  })
}

// 确认选中行
const confirmSelected = () => {
  
};

onMounted(() => {
    getprojectlist();
});
</script>

<style scoped>
.project-page {
  width: 100%;
  height: 100%;
  background: #EEEEEE;
  padding: 8px 8px 0 8px;
  overflow: auto;
}

.project-header{
  width: 100%;
  height: 104px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFFFFF;
}

.project-main{
  width: 100%;
  margin-top: 8px;
  height: calc(100% - 8px - 104px);
  background: #FFFFFF;
  padding: 8px;
}

.boxcontainer {
  width: 80%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.box{
  width: 192px;
  height: 56px;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #12739E;
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-weight: 400;
  font-size: 14px;
  color: #12739E;
  font-style: normal;
}

.boxcontainer .el-button>span {
  line-height: 18px;
}

.project-main-header {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-main-header-title {
  margin-left: 32px;
  font-weight: 400;
  font-size: 16px;
  color: #7F7F7F;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.project-main-content{
  width: 100%;
  height: 75%;
  overflow: auto;
}

.project-main-pagination{
  width: 100%;
  height: 5%;
}

.project-main-footer {
  width: 100%;
  height: 10%;
  padding: 0 30px;
  display: flex;
  justify-content: end;
  align-items: center;
}

.project-main-footer .el-button {
  width: 100px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #12739E;

  font-weight: 400;
  font-size: 14px;
  color: #12739E;
}


/* 选中行的样式 */
:deep(.el-table .selected-row) {
  background-color: #F3F8FB !important;
  position: relative;
}

:deep(.el-table .selected-row td:first-child) {
  border-left: 4px solid #12739E !important;
}

:deep(.el-table .selected-row td) {
  border-top: 1px solid #12739E !important;
  /* border-right: 1px solid #12739E !important; */
  border-bottom: 1px solid #12739E !important;
}

:deep(.el-table .selected-row td:last-child) {
  border-right: 1px solid #12739E !important;
}

</style>