项目库新增

src/assets/styles/index.scss

@@ -4,6 +4,7 @@
 @import "./element-ui.scss";
 @import "./sidebar.scss";
 @import "./btn.scss";
+@import "./public.scss";
 
 body {
   height: 100%;

src/assets/styles/public.scss

@@ -0,0 +1,96 @@
+.L-public-main {
+  padding: 6px 6px 39px 6px;
+  width: 100%;
+  height: 100%;
+  .L-main {
+    width: 100%;
+    height: 100%;
+    padding: 24px 24px 43px 24px;
+    background-color: #fff;
+    header {
+      margin-bottom: 25px;
+      .import-btn {
+        padding: 1px 5px;
+        span {
+          display: flex;
+          align-items: center;
+          .btn-img {
+            width: 15px;
+            margin: 5px;
+          }
+        }
+      }
+    }
+    .el-table {
+      margin-bottom: 25px;
+      th {
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: bold;
+        font-size: 14px;
+        color: #000000;
+      }
+      td {
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: 500;
+        font-size: 14px;
+        color: #666666;
+      }
+      .evenNumber-row {
+        background-color: #F6F9FD;
+      }
+      .table-status {
+        p {
+          padding: 0;
+          margin: 0;
+          display: flex;
+          align-items: center;
+          span {
+            &:nth-of-type(1) {
+              width: 6px;
+              height: 6px;
+              border-radius: 50%;
+              margin-right: 10px;
+            }
+          }
+        }
+        .statusisOne {
+          span {
+            &:nth-of-type(1) {
+              background-color: #24D3A9;
+            }
+            &:nth-of-type(2) {
+              color: #24D3A9;
+            }
+          }
+        }
+        .statusisTwo {
+          span {
+            &:nth-of-type(1) {
+              background-color: #134EE6;
+            }
+            &:nth-of-type(2) {
+              color: #134EE6;
+            }
+          }
+        }
+      }
+      .table-operation {
+        span {
+          cursor: pointer;
+          &:nth-of-type(1) {
+            color: #192A92;
+            margin-right: 15px;
+          }
+          &:nth-of-type(2) {
+            color: #C51717;
+          }
+        }
+      }
+    }
+    .el-pagination {
+      .btn-prev,.btn-next {
+        padding: 0 13px;
+      }
+    }
+  }
+}

src/components/Breadcrumb/index.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: JC9527
+ * @Date: 2024-03-25 09:07:08
+ * @LastEditors: JC9527
+ * @LastEditTime: 2024-03-25 14:39:13
+-->
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
@@ -27,6 +35,7 @@ export default {
       if (route.path.startsWith("/redirect/")) {
         return;
       }
+      console.log(route);
       this.getBreadcrumb();
     },
   },
@@ -44,9 +53,9 @@ export default {
       // if (!this.isDashboard(first)) {
       //   matched = [{ path: "/index", meta: { title: "首页" } }].concat(matched);
       // }
-
+      console.log(matched,"matched");
       this.levelList = matched.filter(
-        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
+        (item) => item.meta && item.meta.title && item.meta.title != '项目列表' && item.meta.breadcrumb !== false
       );
     },
     isDashboard(route) {

src/layout/components/FixedHeader/components/MenuMain/index.vue

@@ -7,7 +7,7 @@
     >
       <div
         class="menu-item"
-        v-if="!item.children"
+        v-if="!item.children || item.name == 'Project'"
         @click="handlerRouter(item.fullPath)"
       >
         {{ item.meta.title }}
@@ -83,6 +83,11 @@ export default {
         //说明创建路由选择的是外部链接
         window.open(key, "_blank");
       } else {
+        if(key == "/project") {
+          const route = this.routers.find(item => item.path === key);
+          this.$router.push({ path: route.path + '/' + route.children[0].path });
+          return;
+        }
         this.$router.push({ path: key });
 
         // if (routeMenu && routeMenu.query) {
@@ -103,6 +108,10 @@ export default {
     theme() {
       return this.$store.state.settings.theme;
     },
+    // 所有的路由信息
+    routers() {
+      return this.$store.state.permission.topbarRouters;
+    },
     // 顶部显示菜单
     // topMenus() {
     //   let topMenus = [];

src/views/components/Pagination/index.vue

@@ -0,0 +1,200 @@
+<template>
+  <div :class="{'hidden':hidden}" class="my-pagination-container">
+    <div class="leftTotal">
+      <span class="custom"
+        >总共 <span class="number">{{ total }}</span> 条：显示{{
+          total == 0
+            ? "0"
+            : mypageNum == 1
+            ? "1"
+            : mypageSize * (mypageNum - 1) + 1
+        }}-{{ numberMap }}条</span
+      >
+    </div>
+    <el-pagination
+      prev-text="上一页"
+      next-text="下一页"
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :pager-count="pagerCount"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+    <div class="pagination-right">
+      <div class="pagination-inputNumber">到第<el-input-number v-model="num" :controls="false" @change="handleChange" :min="1" :max="Math.ceil(total)"></el-input-number>页</div>
+      <div class="pagination-confirm" :class="num ? 'pagination-cconfirm-two': ''">确定</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: 'myPagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    // 移动端页码按钮的数量端默认值5
+    pagerCount: {
+      type: Number,
+      default: document.body.clientWidth < 992 ? 5 : 7
+    },
+    layout: {
+      type: String,
+      default: 'prev, pager, next'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      mypageNum:1,
+      mypageSize:10,
+      num:undefined,
+    };
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    },
+    //算数
+    numberMap() {
+      // if (this.total == this.tableData.length) {
+      //   return this.total;
+      // } else 
+      if (
+        this.total >
+        this.mypageNum * this.mypageSize
+      ) {
+        return this.mypageNum * this.mypageSize;
+      } else if (
+        this.total < this.mypageNum * this.mypageSize ||
+        this.total == this.mypageNum * this.mypageSize
+      ) {
+        return this.total;
+      }
+    },
+  },
+  watch:{
+    page:{
+      handler(newPage){
+        this.mypageNum = newPage;
+        this.mypageSize = this.limit;
+        
+      },
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.mypageSize = val;
+      
+      if (this.currentPage * val > this.total) {
+        this.currentPage = 1
+      }
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.mypageNum = val;
+      console.log(68 / 10);
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleChange(){},
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.leftTotal {
+  flex: 1;
+  .custom {
+    font-size: 14px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #292F38;
+    line-height: 18px; 
+    // span {
+    //   margin: 0 3px;
+    // }
+  }
+}
+.pagination-right {
+  display: flex;
+  .pagination-inputNumber {
+    .el-input-number {
+      margin: 0 5px;
+      width: 50px;
+    }
+  }
+  .pagination-confirm {
+    margin-left: 10px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 52px;
+    background: #F6F6F6;
+    border-radius: 2px 2px 2px 2px;
+    border: 1px solid #CCCCCC;
+  }
+  .pagination-cconfirm-two {
+    background: #192a92;
+    color: #f6f6f6;
+    border: 1px solid #192a92;
+  }
+}
+.my-pagination-container {
+  display: flex;
+  justify-content: space-between;
+  background: #fff;
+  width: 100%;
+  // padding: 0 20px;
+}
+.my-pagination-container.hidden {
+  display: none;
+}
+</style>

src/views/project/index.vue

@@ -1,13 +1,185 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: JC9527
+ * @Date: 2024-03-25 09:07:08
+ * @LastEditors: JC9527
+ * @LastEditTime: 2024-03-25 14:18:03
+-->
 <template>
-  <h1>项目库</h1>
+  <div class="L-public-main">
+    <div class="L-main">
+      <header>
+        <el-form :inline="true" :model="formInline" size="small" class="demo-form-inline" ref="queryFrom">
+          <el-col :span="22">
+            <el-form-item label="项目分类：">
+              <el-select v-model="formInline.type" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="项目名称：">
+              <el-input v-model="formInline.name" placeholder="请输入内容"></el-input>
+            </el-form-item>
+            <el-form-item label="申报单位：">
+              <el-input v-model="formInline.unit" placeholder="请输入内容"></el-input>
+            </el-form-item>
+            <el-form-item label="年份：">
+              <el-date-picker
+                v-model="formInline.year"
+                type="year"
+                placeholder="选择年">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="状态：">
+              <el-select v-model="formInline.status" placeholder="请选择">
+                <el-option label="专家评审中" value="zhuanjia"></el-option>
+                <el-option label="市级评定中" value="shiji"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button size="mini" @click="resetQuery('queryFrom')">重置</el-button>
+              <el-button size="mini" type="primary" @click="handleQuery('queryFrom')">查询</el-button>
+            </el-form-item>
+          </el-col>
+          <el-col :span="2">
+            <el-button type="primary" class="import-btn" size="mini"><img class="btn-img" src="@/assets/images/project/toLead.png"></img>导入新项目</el-button>
+          </el-col>
+        </el-form>
+      </header>
+      <el-table v-loading="loading" :data="userList" :row-class-name="tableRowClassName">
+        <el-table-column label="项目名称" key="name" width="600px" prop="name" />
+        <el-table-column label="申报单位" key="unit" width="300px" prop="unit" />
+        <el-table-column label="项目分类" key="type" width="200px" prop="type" />
+        <el-table-column label="年份" key="year" prop="year" />
+        <el-table-column label="状态" key="status" prop="status" class-name="table-status">
+          <template slot-scope="scope">
+            <p class="statusisTwo" v-if="scope.row.status === 2">
+              <span></span>
+              <span>市级评审中</span>
+            </p>
+            <p class="statusisTwo" v-if="scope.row.status === 1">
+              <span></span>
+              <span>专家评审中</span>
+            </p>
+            <p class="statusisOne" v-if="scope.row.status === 0">
+              <span></span>
+              <span>评审通过</span>
+            </p>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" prop="userId" class-name="table-operation">
+          <template slot-scope="scope">
+            <span class="look-info" @click="goInfo(scope.row)">查看详情</span>
+            <span class="del-info" @click="delInfo(scope.row)">删除</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <my-pagination :total="60"></my-pagination>
+    </div>
+  </div>
 </template>
 
 <script>
+import myPagination from "@/views/components/Pagination/index.vue"
 export default {
+  components:{myPagination},
   data() {
-    return {};
+    return {
+      formInline: {
+        type: '',
+        name:"",
+        unit:"",
+        year:"",
+        status: ''
+      },
+      options:[
+        {
+          value: '选项1',
+          label: '总部经济'
+        },{
+          value: '选项2',
+          label: '自主品牌先进技术研究院'
+        },{
+          value: '选项3',
+          label: '省现代服务业重点项目'
+        },{
+          value: '选项4',
+          label: '省市服务业领军企业'
+        },{
+          value: '选项5',
+          label: '两业融合试点单位'
+        },
+      ],
+      loading:false,
+      userList:[
+        {
+          name: "全方位生物大分子药定制研发生产（CDMO）服务平台",
+          unit: "苏桥生物（苏州）有限公司",
+          type: "总部经济",
+          year: "2024",
+          status: 2,
+        },{
+          name: "全方位生物大分子药定制研发生产（CDMO）服务平台",
+          unit: "苏桥生物（苏州）有限公司",
+          type: "总部经济",
+          year: "2024",
+          status: 1,
+        },{
+          name: "全方位生物大分子药定制研发生产（CDMO）服务平台",
+          unit: "苏桥生物（苏州）有限公司",
+          type: "总部经济",
+          year: "2024",
+          status: 0,
+        },{
+          name: "全方位生物大分子药定制研发生产（CDMO）服务平台",
+          unit: "苏桥生物（苏州）有限公司",
+          type: "总部经济",
+          year: "2024",
+          status: 0,
+        },{
+          name: "全方位生物大分子药定制研发生产（CDMO）服务平台",
+          unit: "苏桥生物（苏州）有限公司",
+          type: "总部经济",
+          year: "2024",
+          status: 2,
+        },
+      ]
+    };
   },
+  methods:{
+    // 所有的路由信息
+    routers() {
+      return this.$store.state.permission.topbarRouters;
+    },
+    // 查询
+    handleQuery() {
+      console.log(this.formInline,'submit!');
+    },
+    // 重置
+    resetQuery(refName){
+
+    },
+    // 查看详情
+    goInfo(rwo){
+      const router = this.routers()
+      this.$router.push({
+        path: '/project/projectInfo',
+      })
+    },
+    // 删除
+    delInfo(row){},
+    // 修改table背景色
+    tableRowClassName({row, rowIndex}){
+      if (rowIndex % 2 !== 0) {
+        return 'evenNumber-row';
+      }
+      return '';
+    }
+  }
 };
 </script>
-
-<style></style>

src/views/project/projectInfo/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1>详情</h1>
+</template>
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  methods:{
+  },
+}
+</script>