|
@@ -0,0 +1,210 @@
|
|
|
+<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;" />
|
|
|
+ OPEN
|
|
|
+ </el-button>
|
|
|
+ <el-button class="box">
|
|
|
+ <img :src="getImgPath('blueplus.png')" style="width: 20px; margin-right: 5px;" />
|
|
|
+ New Project
|
|
|
+ </el-button>
|
|
|
+ <el-button class="box">
|
|
|
+ <img :src="getImgPath('blueplus.png')" style="width: 20px; margin-right: 5px;" />
|
|
|
+ New Compound
|
|
|
+ </el-button>
|
|
|
+ <el-button class="box">
|
|
|
+ <img :src="getImgPath('blueplus.png')" style="width: 20px; margin-right: 5px;" />
|
|
|
+ New Library
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </el-header>
|
|
|
+ <el-main class="project-main">
|
|
|
+ <div class="project-main-header">
|
|
|
+ <div class="project-main-header-title">
|
|
|
+ Project List
|
|
|
+ </div>
|
|
|
+ <div class="project-main-header-actions">
|
|
|
+ <el-button >New Project</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="project-main-content custom-table">
|
|
|
+ <el-table
|
|
|
+ :data="projectlists"
|
|
|
+ style="width: 100%;height: 540px;"
|
|
|
+ >
|
|
|
+ <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>
|
|
|
+ <div class="custom-pagination" style="margin-top: 14px;">
|
|
|
+ <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>总计 {{ 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>
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { request } from "@/utils/request";
|
|
|
+import { ElMessage, ElButton, ElDialog, ElSelect, ElMessageBox } from 'element-plus'
|
|
|
+
|
|
|
+let projectlists = ref([]);
|
|
|
+
|
|
|
+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)
|
|
|
+ })
|
|
|
+};
|
|
|
+
|
|
|
+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: 80%;
|
|
|
+
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+</style>
|