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.projectAlias"
            :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 class="flex1 mg-r-20">{{curProjiect.projectName}}</span>
        <div>
          <el-button
            size="small"
            @click="editTree"
            type="success"
          >WBS树管理</el-button>
          <el-button
            size="small"
            @click="editProject"
            type="primary"
          >编辑项目信息</el-button>
          <el-button
            size="small"
            @click="addContract"
            type="info"
          >创建新合同段</el-button>
          <el-button
            size="small"
            @click="dellProject"
            type="danger"
          >删除项目</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,index) in contractList"
          :key="item.id"
        >
          <div class="flex jc-sb">
            <div class="flex jc-al-c flex1">
              <el-avatar
                :size="50"
                :class="getAvatarBg(item.contractType)"
              >{{getFont(item.contractType)}}</el-avatar>
              <span class="mg-l-10 flex1 mg-r-10">{{item.contractName}}</span>
            </div>
            <div class="flex jc-al-c">
              <el-link
                type="primary"
                @click="editContract(item)"
              >编辑合同段信息</el-link>
              <el-link
                type="primary"
                class="mg-l-10"
                @click="contractDetail(item,'2')"
              >分配WBS</el-link>
              <el-link
                type="primary"
                class="mg-l-10"
                @click="contractDetail(item,'3')"
              >分配项目人员</el-link>
              <el-link
                type="primary"
                class="mg-l-10"
                @click="delContract(item,index)"
              >删除</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, removeProject } from "@/api/manager/projectinfo";
import { findContractByProjectId, removeContractInfo } 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;
        }
      }
    },

    addContract () {
      this.$router.push({
        path: '/contract/detail',
        query: { pid: this.curProjiect.id }
      });
    },
    editContract (item) {
      this.$router.push({
        path: '/contract/detail',
        query: {
          pid: item.pid,
          cid: item.id,
        }
      });
    },
    editProject () {
      this.$router.push({
        path: '/manager/projectinfo/detail',
        query: {
          id: this.curProjiect.id
        }
      });
    },
    contractDetail (item, type) {
      this.$router.push({
        path: '/contract/detail',
        query: {
          pid: item.pid,
          cid: item.id,
          type,
        }
      });
    },
    editTree () {
      this.$router.push({
        path: '/project/tree',
        query: {
          pid: this.curProjiect.id,
          wbsid: this.curProjiect.referenceWbsTemplateId
        }
      });
    },

    delContract (item, index) {
      this.$confirm('是否删除【' + item.contractName + '】?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeContractInfo(item.id).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.contractList.splice(index, 1);
        })
      })
    },
    dellProject () {
      if (this.contractList.length) {
        this.$message({
          type: "warning",
          message: "只能删除下面无合同段的项目!"
        });
        return;
      }

      this.$confirm('是否删除【' + this.curProjiect.projectName + '】?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeProject(this.curProjiect.id).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.init();
          this.projectVisible = false;
        })
      })
    },

    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
        }
      }
    },
    wbsManage () {//wbs树管理按钮
      this.$router.push('/manager/privateWBS/' + 111)
    },
  }
};
</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, 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, 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>