feat: 投资项目列表页

src/router/index.ts

@@ -17,7 +17,7 @@ const routes: Array<RouteRecordRaw> = [
                 component: () => import(/* webpackChunkName: "workbench" */ '@/views/workbench/Workbench.vue'),
             },
             {
-                path: 'project-list',
+                path: 'project',
                 name: 'ProjectList',
                 component: () => import(/* webpackChunkName: "project-list" */ '@/views/project-list/ProjectList.vue'),
             },

src/styles/_element_plus.scss

@@ -3,24 +3,24 @@
   $colors: (
     'white': #ffffff,
     'black': #000000,
-    "primary": (
-      "base": $primary,
-    ),
-    'success': (
-      'base': $success,
-    ),
-    'warning': (
-      'base': $warning,
-    ),
-    'danger': (
-      'base': $danger,
-    ),
-    'error': (
-      'base': $danger,
-    ),
-    'info': (
-      'base': $info,
-    ),
+    //"primary": (
+    //  "base": $primary,
+    //),
+    //'success': (
+    //  'base': $success,
+    //),
+    //'warning': (
+    //  'base': $warning,
+    //),
+    //'danger': (
+    //  'base': $danger,
+    //),
+    //'error': (
+    //  'base': $danger,
+    //),
+    //'info': (
+    //  'base': $info,
+    //),
   ),
   $font-path: 'element-plus/theme-chalk/fonts',
   $sm: 1140px,

src/views/main-frame/MainFrame.vue

@@ -38,7 +38,7 @@ import {onMounted, ref} from "vue";
           </li>
         </router-link>
 
-        <router-link custom to="/project-list" v-slot="{ navigate, isExactActive }">
+        <router-link custom to="/project" v-slot="{ navigate, isExactActive }">
           <li class="item" @click="navigate" :class="{ 'active': isExactActive }">
             <iconfont class="icon dsk-city-one"/>
           </li>

src/views/project-list/ProjectList.vue

@@ -1,10 +1,152 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from "vue";
+import {onMounted, reactive, ref} from "vue";
+
+const filterForm = reactive({
+  name: '',
+  type: '',
+  process: '',
+  step: '',
+  time: ''
+})
+
+const inlineMode = ref(true)
+
+const list = [
+  {
+    name: "市妇幼保健医院新址配套市政道路工程",
+    process: "预算",
+    step: "(2) 收件员预审项目",
+    submit: "0.00",
+    increase: "0.00",
+    decrease: "0.00",
+    offset: "0.00",
+  },
+  {
+    name: "梧桐路（石花西路）电力改迁工程",
+    process: "结算",
+    step: "(1) 建设单位报审项目",
+    submit: "0.00",
+    increase: "0.00",
+    decrease: "0.00",
+    offset: "0.00",
+  },
+  {
+    name: "珠海城市职业技术学院机电学院、航空与海洋工程珠海城市职业技术学院机电学院、航空与海洋工程",
+    process: "预算",
+    step: "(1) 建设单位报审项目",
+    submit: "0.00",
+    increase: "0.00",
+    decrease: "0.00",
+    offset: "0.00",
+  },
+  {
+    name: "珠海城市职业技术学院机电学院、航空与海洋工程",
+    process: "预算",
+    step: "(5) 主审人编制审核方案",
+    submit: "0.00",
+    increase: "0.00",
+    decrease: "0.00",
+    offset: "0.00",
+  },
+  {
+    name: "珠海城市职业技术学院机电学院、航空与海洋工程",
+    process: "预算",
+    step: "(5) 主审人编制审核方案",
+    submit: "0.00",
+    increase: "0.00",
+    decrease: "0.00",
+    offset: "0.00",
+  },
+]
+list.push(...list)
+const projectList = reactive(list);
 </script>
 
 <template>
-  <article class="project-list">
-    项目列表
+  <article class="project-list-page">
+    <header class="header">
+      <h1 class="title">项目列表</h1>
+      <p class="desc">包括珠海市、中山市所有投资项目。</p>
+    </header>
+    <main class="main">
+      <el-form inline :model="filterForm" :label-width="80">
+        <el-form-item label="项目名称" class="name-item">
+          <el-input v-model="filterForm.name" placeholder="请输入项目名称"></el-input>
+        </el-form-item>
+        <el-form-item label="工程类型" class="type-item" :class="{inline : inlineMode}">
+          <el-select v-model="filterForm.type" placeholder="请选择工程类型">
+            <el-option label="Zone one" value="shanghai"></el-option>
+            <el-option label="Zone two" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目流程" class="process-item" :class="{inline : inlineMode}">
+          <el-select v-model="filterForm.process" placeholder="请选择项目流程">
+            <el-option label="Zone one" value="shanghai"></el-option>
+            <el-option label="Zone two" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <br v-if="!inlineMode"/>
+        <el-form-item label="审核步骤" class="step-item" :class="{inline : inlineMode}">
+          <el-select v-model="filterForm.step" placeholder="请选择审核步骤">
+            <el-option label="Zone one" value="shanghai"></el-option>
+            <el-option label="Zone two" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="流程时间" class="time-item" :class="{inline : inlineMode}">
+          <el-select v-model="filterForm.time" placeholder="请选择">
+            <el-option label="Zone one" value="shanghai"></el-option>
+            <el-option label="Zone two" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item class="submit-item" :class="{inline : inlineMode}">
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+          <el-button plain @click="onSubmit">重置</el-button>
+          <el-button type="text" @click="inlineMode = !inlineMode">
+            展开
+            <iconfont :class="inlineMode ? 'dsk-down' : 'dsk-up'"/>
+          </el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 列表 -->
+      <el-table :data="projectList">
+        <el-table-column prop="name" label="项目名称" :min-width="300">
+          <template #default="scope">
+            <router-link to="/project/overview" class="link">{{ scope.row.name }}</router-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="process" label="项目流程" :min-width="80"/>
+        <el-table-column prop="step" label="当前步骤" :min-width="140"/>
+        <el-table-column
+            prop="submit"
+            label="送审金额(元)"
+            align="center"
+            :min-width="115"
+        />
+        <el-table-column
+            prop="increase"
+            label="审增金额(元)"
+            align="center"
+            :min-width="115"
+        />
+        <el-table-column
+            prop="decrease"
+            label="审减金额(元)"
+            align="center"
+            :min-width="115"
+        />
+        <el-table-column
+            prop="offset"
+            label="品迭金额(元)"
+            align="center"
+            :min-width="115"
+        />
+        <template #empty>
+          <el-empty :image-size="120" description="暂无项目"/>
+        </template>
+      </el-table>
+      <el-pagination background layout="total, prev, pager, next" :total="50"/>
+    </main>
   </article>
 </template>
 

src/views/project-list/style.scss

@@ -1,2 +1,120 @@
-.project-list {
+.project-list-page {
+  .header {
+    padding: 16px 32px;
+    border-bottom: 1px solid #e8eaec;
+    background: #fff;
+
+    .title {
+      font-size: 20px;
+      font-weight: 500;
+      color: #17233d;
+      margin-bottom: 16px;
+    }
+  }
+
+  .main {
+    margin: 16px 24px 60px;
+    background: #fff;
+    border-radius: 4px;
+    padding: 16px;
+
+    .el-form {
+      .el-form-item {
+        width: 250px;
+
+        &.type-item {
+
+        }
+
+        &.step-item,
+        &.time-item {
+          &.inline {
+            @apply hidden;
+          }
+        }
+
+        &.submit-item {
+          @apply float-right text-right;
+          margin-top: -4px;
+        }
+      }
+    }
+
+    ::v-deep .el-table {
+      width: 100%;
+      background-color: #fff;
+      border: 1px solid $border-gray;
+      border-left: none;
+      border-right: none;
+
+      &::before {
+        display: none;
+      }
+
+      .el-table__header-wrapper {
+        .el-table__header {
+          height: 48px;
+
+          th {
+            .cell {
+              font-weight: 600;
+              color: #535a5d;
+              padding: 0 17px;
+            }
+          }
+        }
+      }
+
+      .el-table__body-wrapper {
+        &::-webkit-scrollbar {
+          width: 3px;
+        }
+
+        tr {
+          &:last-child {
+            td {
+              border-bottom: none !important;
+            }
+          }
+
+          td {
+            padding: 0;
+            border-bottom: 1px solid #f4f4f4 !important;
+
+            .cell {
+              line-height: 13px;
+              color: #535a5d;
+              padding: 20px 17px 18px;
+              font-size: 13px;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+
+              .link {
+                color: #268af5;
+
+                &:hover {
+                  color: #57a3f3;
+                }
+              }
+            }
+          }
+        }
+
+      }
+
+      .el-empty {
+        @apply select-none;
+      }
+    }
+
+    ::v-deep .el-pagination {
+      @apply text-center;
+      margin-top: 16px;
+
+      .number {
+        font-weight: 400;
+      }
+    }
+  }
 }