|
|
@@ -4,19 +4,19 @@
|
|
|
<div class="boxcontainer">
|
|
|
<el-button class="box">
|
|
|
<img :src="getImgPath('open.png')" style="width: 20px; margin-right: 5px;" />
|
|
|
- OPEN
|
|
|
+ {{ $t('project.open') }}
|
|
|
</el-button>
|
|
|
- <el-button class="box">
|
|
|
+ <el-button class="box" @click="addProjectdialog = true">
|
|
|
<img :src="getImgPath('blueplus.png')" style="width: 20px; margin-right: 5px;" />
|
|
|
- New Project
|
|
|
+ {{ $t('project.create') }}
|
|
|
</el-button>
|
|
|
<el-button class="box">
|
|
|
<img :src="getImgPath('blueplus.png')" style="width: 20px; margin-right: 5px;" />
|
|
|
- New Compound
|
|
|
+ {{ $t('project.newcompound') }}
|
|
|
</el-button>
|
|
|
<el-button class="box">
|
|
|
<img :src="getImgPath('blueplus.png')" style="width: 20px; margin-right: 5px;" />
|
|
|
- New Library
|
|
|
+ {{ $t('project.newlibrary') }}
|
|
|
</el-button>
|
|
|
</div>
|
|
|
|
|
|
@@ -25,12 +25,12 @@
|
|
|
<el-main class="project-main">
|
|
|
<div class="project-main-header">
|
|
|
<div class="project-main-header-title">
|
|
|
- Project List
|
|
|
+ <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-select v-model="select1" style="width: 120px;margin-right: 5px;">
|
|
|
- <el-option label="Save" value="save"></el-option>
|
|
|
- </el-select>
|
|
|
<el-button class="custom-icon-button">
|
|
|
<img :src="getImgPath('daohang.png')" style="width: 22px;"/>
|
|
|
</el-button>
|
|
|
@@ -44,18 +44,24 @@
|
|
|
</div>
|
|
|
<div class="project-main-content custom-table">
|
|
|
<el-table
|
|
|
+ ref="tableRef"
|
|
|
:data="projectlists"
|
|
|
- style="width: 100%;height: 540px;"
|
|
|
+ style="width: 100%;height: 540px; overflow: auto;"
|
|
|
+ @row-click="handleRowClick"
|
|
|
+ :row-class-name="tableRowClassName"
|
|
|
>
|
|
|
- <el-table-column type="index" label="Number" width="100"></el-table-column>
|
|
|
- <el-table-column prop="name" label="File name" ></el-table-column>
|
|
|
- <el-table-column prop="dirsize" label="Size" ></el-table-column>
|
|
|
- <el-table-column prop="updateTime" label="Last modified" ></el-table-column>
|
|
|
- <el-table-column prop="uname" label="Author" ></el-table-column>
|
|
|
- <el-table-column prop="keywords" label="Keywords" ></el-table-column>
|
|
|
- <el-table-column prop="description" label="Description" ></el-table-column>
|
|
|
+ <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 class="custom-pagination" style="margin-top: 14px;">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="project-main-pagination">
|
|
|
+ <div class="custom-pagination" >
|
|
|
<el-pagination
|
|
|
v-model:current-page="gd.currentPage4"
|
|
|
v-model:page-size="gd.pageSize4"
|
|
|
@@ -67,27 +73,67 @@
|
|
|
@current-change="handleCurrentChange2"
|
|
|
>
|
|
|
<template #default>
|
|
|
- <span>总计 {{ gd.total }}</span>
|
|
|
+ <span>{{ $t('project.total') }} {{ gd.total }}</span>
|
|
|
</template>
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="project-main-footer lastbtn">
|
|
|
- <el-button >All Select</el-button>
|
|
|
- <el-button >Delete</el-button>
|
|
|
- <el-button >OK</el-button>
|
|
|
+ <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">
|
|
|
+
|
|
|
+ <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,
|
|
|
@@ -96,8 +142,6 @@ let gd = ref({
|
|
|
searchtag: ''
|
|
|
})
|
|
|
|
|
|
-let select1 = ref('save');
|
|
|
-
|
|
|
const getImgPath = (url) => {
|
|
|
return new URL(`../../assets/img/${url}`, import.meta.url).href
|
|
|
}
|
|
|
@@ -111,7 +155,7 @@ const getprojectlist = () => {
|
|
|
}
|
|
|
request(params)
|
|
|
.then((res) => {
|
|
|
- console.log(res);
|
|
|
+ // console.log(res);
|
|
|
gd.value.total = res.total;
|
|
|
projectlists.value=res.rows;
|
|
|
})
|
|
|
@@ -120,6 +164,90 @@ const getprojectlist = () => {
|
|
|
})
|
|
|
};
|
|
|
|
|
|
+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();
|
|
|
});
|
|
|
@@ -197,9 +325,15 @@ onMounted(() => {
|
|
|
|
|
|
.project-main-content{
|
|
|
width: 100%;
|
|
|
- height: 80%;
|
|
|
-
|
|
|
+ height: 75%;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.project-main-pagination{
|
|
|
+ width: 100%;
|
|
|
+ height: 5%;
|
|
|
}
|
|
|
+
|
|
|
.project-main-footer {
|
|
|
width: 100%;
|
|
|
height: 10%;
|
|
|
@@ -220,4 +354,26 @@ onMounted(() => {
|
|
|
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>
|
tangjunhao