From b7574057c93b649a669eec5a6c783f80a1912e5b Mon Sep 17 00:00:00 2001
From: TiaStars <L18864257234@163.com>
Date: Mon, 25 Mar 2024 14:41:11 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=BA=93=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/project/toLead.png          | Bin 0 -> 1282 bytes
 src/assets/styles/index.scss                  |   1 +
 src/assets/styles/public.scss                 |  96 +++++++++
 src/components/Breadcrumb/index.vue           |  13 +-
 .../FixedHeader/components/MenuMain/index.vue |  11 +-
 src/views/components/Pagination/index.vue     | 200 ++++++++++++++++++
 src/views/project/index.vue                   | 180 +++++++++++++++-
 src/views/project/projectInfo/index.vue       |  13 ++
 8 files changed, 507 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/images/project/toLead.png
 create mode 100644 src/assets/styles/public.scss
 create mode 100644 src/views/components/Pagination/index.vue
 create mode 100644 src/views/project/projectInfo/index.vue

diff --git a/src/assets/images/project/toLead.png b/src/assets/images/project/toLead.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c5ae172d58aaa45b100b69c3906133b9e6f4386
GIT binary patch
literal 1282
zcmV+d1^xPoP)<h;3K|Lk000e1NJLTq002Ay0024&1^@s6?4>$y00001b5ch_0Itp)
z=>Px(yh%hsRA@u(n|bI}MHI(BW@b@F36@3u5w=2-g0yJ=R76D<t)`Wj;EDtmMfQhc
z1uaAo6fJ5LZA6<&i6W>VT55k}3oVwChFC#+(L&pNf1LYc9PahrH}~E5?!|ZheKTjy
zXJ+o1bI!~gz<wqJ_A_3xfDZ+x0oMR00Y^b*+q%rzf55lE=fG>g65zMcxHRDNffs;d
z>OvA}#~$EDV6ERj1U?T~1soJPNZq>q1zZfQOAPaYwT-nMn!d8(q-&*527c8KKJXpD
z{Xy%`fJMMpbz8a&dyWTY0H*}M&jTI^f!_tjcnv=W&PrycA;2<o2=E>-!n0XyXNJJP
zyA?jzYc$<FU4vNrO_lB1nTh<Fu=!hBZrzvhz=|f)0++ho`c`0jA8QZTo0Z-QH)wnJ
zwsi9O_P*iXH(c$9JJ7N+g|$xriUryswf%-?8K@vP0G9(lw1K#`!1n=)a})W<vYXu{
zp&J7%&YcGRX$j~?0gLlH3lBF(LN^XroGQ;uOo@q$%t38|mC-1($&$bA_h*YxdTnY4
ztg4C%gi6W}$$?Q8cW08o7X+^b@M*v#;0j=5LBsuKj{vs<VH%sJs%yXp7~n0yxe<_I
zmzSIup9-irw=d}m@CATY<@7dy`YKifSLc+TItqL&@Gx*)n?Zebs!?4Ae3LOo$AEQ=
zJmr87uMjp-{RMClup?!x%7G8GRlT_bp#BhF1D7~Iu{9XCQeag&b(f<-x*<Q?_FmtK
zb69EJazGBMoAM=aLe;>7fi=LmZj##ATkO&xF{RL!*4Z}5GhVld{g+SyluAR-ySu0x
zY5=<lxC+o6QcJ*3x=u5#$2Q;$m#hAf0d%j0d)?-J#vM(woh`aq@TJfSD=O02In?fl
zf6AbdvNyYYL9V3Yb_;CM%q#?4WVICZzYh#6(zv2F-vblOe`F2OHsF<3ji`tvSFK7w
zN<Oydv}_Bow)@MuCZ#u!LzIznEWZHSlB0qv%{<l1oQ}x_uWw5OD^&c%T|p{NE-LQ;
zZ`juR&>;Q3ip~@)oRgza>EJ!C&BB7Iq12TIz6)4TfK)4~<LV)spu8?&)iP|aX9`nn
z;_`I0?4`359_?PkC{RBvXT+uEIrF|RU(LRNl@wg*&e#uHA+@%pR#>a0N<)_XXzwas
zjW8?=SOL$qR=tc+8^5KGum>$!tE<}rMO(XKtOC-2AGHaVV~dsO6;6BElNj+BFc<hI
z)+*p`*MGkCSF|(-c)EnXq-zwg;$?-HCk6(@R1vcn^t?#Njdbd%<J)b3jrP)GfsKIy
z+GaPo_m?lW$*`)_M6Iw&HG1Tgh+wY=Vw_V|U|D)w238eAQIVXMM6jwUtFqAqX&Kn>
zAg832eWeMcW@Dj;X+F>6mS_HJh41GY1Y7v&q0gkaSsqjcfyI%qD*dz)dq)nlSGVKL
z@0=PaOMP6Lv^mlu9G!`JcM&5Gx~%55n2r_n$$UPXjCHoFM2;>2D~G3`Uk_HgElOrC
zw5+VpmbAYB=rw%aWmO)CW_5U8ql$l*4XTVN{Oy;j{?($t66kXXA8J?0nEc5@S=Q@z
s<<s{Hz7xPzf|b%;)e4s~s>;s)124N9O5Rr-CjbBd07*qoM6N<$g4U8@F#rGn

literal 0
HcmV?d00001

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index d60ff1f..0a9cd7a 100644
--- a/src/assets/styles/index.scss
+++ b/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%;
diff --git a/src/assets/styles/public.scss b/src/assets/styles/public.scss
new file mode 100644
index 0000000..aa41360
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index a35513f..948cf1f 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/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) {
diff --git a/src/layout/components/FixedHeader/components/MenuMain/index.vue b/src/layout/components/FixedHeader/components/MenuMain/index.vue
index 0c4c5eb..92f708e 100644
--- a/src/layout/components/FixedHeader/components/MenuMain/index.vue
+++ b/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 = [];
diff --git a/src/views/components/Pagination/index.vue b/src/views/components/Pagination/index.vue
new file mode 100644
index 0000000..a5ad805
--- /dev/null
+++ b/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>
diff --git a/src/views/project/index.vue b/src/views/project/index.vue
index 62c5597..616b8b1 100644
--- a/src/views/project/index.vue
+++ b/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>
diff --git a/src/views/project/projectInfo/index.vue b/src/views/project/projectInfo/index.vue
new file mode 100644
index 0000000..adb288d
--- /dev/null
+++ b/src/views/project/projectInfo/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <h1>详情</h1>
+</template>
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  methods:{
+  },
+}
+</script>