Platform/src/views/project-list/ProjectList.vue

<script setup lang="ts">
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-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" 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>

<style lang="scss" src="./style.scss" scoped></style>