jin_ji_hu/src/views/project/index.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2024-03-25 09:07:08
 * @LastEditors: JC9527
 * @LastEditTime: 2024-03-25 14:18:03
-->
<template>
  <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 {
      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>