saber/src/views/manager/projectinfo/list.vue

<template>
  <basic-container>
    <div>
      <div class="pd-b-20 border-grey-b">
        <span class="mg-r-10">选择项目名称</span>
        <el-select v-model="projectId" @change="projectChange" placeholder="请选择">
          <el-option  v-for="item in projectList"  :key="item.id" :label="item.projectName" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="pd-t-20">
        <el-row :gutter="20"  style="height:calc(100vh - 290px)">
          <el-col :span="6" v-for="(item,index) in projectPageList" :key="item.id" style="height:20%;" class="mg-b-20 box-size-bb">
            <el-card @click.native="projectClick(item)" class="box-card h-100p flex flex-center project_name" :class="getBg(index)">
              {{item.projectAlias}}
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-pagination
          layout="prev, pager, next" class="text-align-c"
          @current-change="handleCurrentChange"
          :current-page.sync="page.currentPage"
          :total="page.total" :page-size="page.pageSize">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="项目信息" :visible.sync="projectVisible" width="800px" append-to-body>
      <div class="flex jc-sb pd-b-10">
        <span>{{curProjiect.projectName}}</span>
        <div>
          <el-button size="small" type="success">WBS树管理</el-button>
          <el-button size="small" type="primary">编辑项目信息</el-button>
          <el-button size="small" type="info">创建新合同段</el-button>
          <el-button size="small" @click="projectVisible = false">返回</el-button>
        </div>
      </div>
      <div style="height:400px;overflow: auto;" v-if="contractList.length > 0">
        <el-card shadow="never" v-for="(item) in contractList" :key="item.id">
          <div class="flex jc-sb">
            <div class="flex jc-al-c">
              <el-avatar :size="50" :class="getAvatarBg(item.contractType)">{{getFont(item.contractType)}}</el-avatar>
              <span class="mg-l-10">{{item.contractName}}</span>
            </div>
            <div class="flex jc-al-c">
              <el-link type="primary" >编辑合同段信息</el-link>
              <el-link type="primary" class="mg-l-10">分配WBS</el-link>
              <el-link type="primary" class="mg-l-10">分配项目人员</el-link>
              <el-link type="primary" class="mg-l-10">删除</el-link>
            </div>
          </div>
        </el-card>
      </div>
      <div class="text-align-c pd-t-20" v-else>
        暂无合同段，请先创建合同段
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {getProjectList} from "@/api/manager/projectinfo";
  import {findContractByProjectId} from "@/api/manager/contractinfo";
  import {getDictionary} from "@/api/system/dict";
  import {mapGetters} from "vuex";
  export default {
    data() {
      return {
        projectId:'',
        curProjiect:{},
        projectList:[],
        projectPageList:[],

        projectVisible:false,
        contractList:[],

        page:{
          currentPage:1,
          pageSize:16,
          total:0
        }
      }
    },
    computed: {
      ...mapGetters(["userInfo"]),
    },
    created() {
      this.init();
      //console.log(this.userInfo)
    },
    methods: {
      init(){
        this.getProjectList();
        this.getProjectPageList();
      },

      getProjectList(){
        getProjectList(1,999).then((res)=>{
          this.projectList = res.data.data.records;
        })
      },
      getProjectPageList(){
        getProjectList(this.page.currentPage,this.page.pageSize).then((res)=>{
          this.projectPageList = res.data.data.records;
          this.page.total = res.data.data.total;
        })
      },

      projectClick(item){
        this.curProjiect = item;
        findContractByProjectId(this.curProjiect.id).then((res)=>{
          this.contractList = res.data.data;
        })
        this.projectVisible = true;
      },

      handleCurrentChange(val){
        this.getProjectPageList();
        this.page.currentPage = val;
      },

      projectChange(id){
        for (let i = 0; i < this.projectList.length; i++) {
          if(id == this.projectList[i].id){
            this.curProjiect = this.projectList[i];
            findContractByProjectId(this.curProjiect.id).then((res)=>{
              this.contractList = res.data.data;
            })
            this.projectVisible = true;
            return;
          }
        }
      },

      getFont(type){
        if(type == 1){
          return '施';
        }else if(type == 2){
          return '监';
        }else if(type == 3){
          return '业';
        }
        return '';
      },
      getAvatarBg(type){
        if(type == 1){
          return {'abg1':true};
        }else if(type == 2){
          return {'abg2':true};
        }else if(type == 3){
          return {'abg3':true};
        }
        return {};
      },
      getBg(index){
        let num = Math.trunc(index/4);
        if((num%2)===0){//判定条件余数为0时为偶数
          return{
            'bg1':true
          }
        }else{
          return{
            'bg2':true
          }
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  .project_name{
    font-size: 20px;
    cursor: pointer;
  }
  .bg1{
    background-color: rgb(127, 164, 221);
    border-color: rgb(187, 187, 187);
    box-shadow: rgba(0, 0, 0, .4) 0px 2px 6px 0px;
  }
  .bg2{
    background-color: rgb(239, 240, 229);
    border-color: rgb(187, 187, 187);
    box-shadow: rgba(0, 0, 0, .4) 0px 2px 6px 0px;
  }
  .abg1{
    background-color: rgb(42, 155, 121);
  }
  .abg2{
    background-color: rgb(155, 108, 42);
  }
  .abg3{
    background-color: rgb(42, 53, 155);
  }
</style>