kehui/kehui-oa-front/src/pages/projectManagement/ProjectManagement.vue

<template>
  <div id="content-container" :class="{'expand-right': expandRight}">
    <page-loading :show="pageLoading"></page-loading>
    <!--Page Title-->
    <div id="page-title">
      <h1 class="page-header text-overflow">{{title}}</h1>
      <!--Searchbox-->
      <!--<div class="searchbox">-->
      <!--<div class="input-group custom-search-form">-->
      <!--<input type="text" class="form-control" placeholder="Search..">-->
      <!--<span class="input-group-btn">-->
      <!--<button class="text-muted" type="button"><i class="demo-pli-magnifi-glass"></i></button>-->
      <!--</span>-->
      <!--</div>-->
      <!--</div>-->
    </div>
    <!--End page title-->

    <!--Breadcrumb-->
    <!--<ol class="breadcrumb">-->
    <!--<li><a href="#">Home</a></li>-->
    <!--<li><a href="#">Layouts</a></li>-->
    <!--<li class="active">Demo</li>-->
    <!--</ol>-->
    <!--End breadcrumb-->

    <!--Page content-->
    <div class="page-content">
      <div style="margin-bottom: 10px" >
        <el-button type="primary" @click="addProjectApply" v-if="!isSuperAdmin && projectStep=='apply'">新增</el-button>
        <search-box
          :placeholderInfo="placeholderInfo"
          :placeholderInfo2="placeholderInfo2"
          :activitiShow="activitiShow"
          :searchBoxHide="searchBoxHide"
          :yearShow="yearShow"
          :searchValue2Show="searchValue2Show"
          @activitiSelectChanged="activitiSelectChanged"
          @searchValueChange="searchValueChange"
          @searchValueChange2="searchValueChange2"
          @searchClick="getProject"
          @getYearChange="getYearChange"
        ></search-box>
      </div>
      <data-table
        :totalColumnsData="tableColumnsData"
        :rowsData="tableRowsData"
        :singleOperateColumnWidth="80"
        :showSingleOperation="tableShowSingleOperation"
        :showMultipleOperation="false"
        :canFolded="true"
        :showPageCtr="true"
        :totalPage="tableTotalPage"
        :currentPage="pageNo"
        @singleCheck="tableSingleCheck"
        @singleEdit="tableSingleEdit"
        @singleAccept="tableSingleAccept"
        @singleDelete="tableSingleDelete"
        @selectPageSize="tableSelectPageSize"
        @selectPage="tableSelectPage"
        @singleAnnotation="singleAnnotation"
      >
      </data-table>
    </div>
    <!--End Page content-->
  </div>
</template>

<script type="text/ecmascript-6">
import routerData from '../../../router.json'
import PageLoading from '../../components/PageLoading.vue'
import DataForm from '../../components/form/DataForm.vue'
import DataTable from '../../components/DataTable.vue'
import Api from '../../server/index'
import {getItem} from '../../config/mUtils.js';
import SearchBox from '../../components/SearchBox.vue'

export default {
  beforeRouteEnter (to, from, next) {
    next(function (vm) {
      global.getMenuIndex(vm);
    })
  },
  data () {
    return {
      expandRight: false,
      isSuperAdmin: false,
      title: '',
      projectType: '',
      projectStep: '',
      pageLoading: true,
      tableColumnsData: [],
      tableRowsData: [],
      tableShowSingleOperation: {
        show: true,
        showStatus: true,
        showCheck: true,
        showAnnotation: true,
        showEdit: false,
        showDelete: false
      },
      tableTotalPage: 0,
      pageNo: 1,
      pageSize: 10,
      selectedRow: {},

      //搜索条件
      activitiShow: true,
      placeholderInfo: '请输入项目名称',
      placeholderInfo2: '请输入项目负责人或项目成员',
      searchBoxHide: true,
      yearShow: true,
      searchValue2Show: true,
      queryCondition: {
        activitiStatus: '-2',
        searchValue: '',
        searchValue2: '',
        year: '',
      }
    }
  },
  created () {
    this.judgeSuperAdmin();
    this.initUI();
    this.initTableColumn();
    this.getProject();
  },
  watch: {
    $route () {
      this.initUI();
      this.initTableColumn();
      this.getProject();
    },
  },
  methods: {
    //判断是否是超级管理员
    judgeSuperAdmin () {
      this.isSuperAdmin = (getItem('userId') == 0);
    },
    //初始化界面
    initUI () {
      this.projectType = this.$route.meta.type;
      this.projectStep = this.$route.meta.step;
      console.log("projectStep",this.projectStep)
      switch (this.projectType) {
        case 'portrait':
          switch (this.projectStep) {
            case 'apply':
              this.title = '项目立项';
              break;
            // case 'verify':
            //   this.title = '纵向项目评审';
            //   break;
            case 'execute':
              this.title = '纵向项目执行';
              break;
            case 'check':
              this.title = '纵向项目验收';
              break;
          }
          break;
        case 'market':
          switch (this.projectStep) {
            case 'apply':
              this.title = '市场项目申报';
              break;
            case 'execute':
              this.title = '市场项目执行';
              break;
            case 'check':
              this.title = '市场项目验收';
              break;
          }
          break;
        case 'internal':
          switch (this.projectStep) {
            case 'apply':
              this.title = '内部项目申报';
              break;
            case 'execute':
              this.title = '内部项目执行';
              break;
            case 'check':
              this.title = '内部项目验收';
              break;
          }
          break;
      }
    },
    //初始化table column
    initTableColumn () {
      this.tableColumnsData = [
        {
          label: '所属年份',
          prop: 'applyDate',
          show: true
        },
        {
          label: '项目编号',
          prop: 'projectNo',
          show: true
        },
        {
          label: '项目名称',
          prop: 'projectName',
          show: true
        },
        {
          label: '立项人',
          prop: 'ext.draftMan',
          show: true
        },
        {
          label: '项目负责人',
          prop: 'projectManagerData',
          show: true
        },
        {
          label: '项目成员',
          prop: 'permissionsPeople',
          show: true
        },
        // {
        //   label: '备注',
        //   prop: 'description',
        //   show: true
        // },
        {
          label: '项目类别',
          prop: 'openRange',
          show: true
        },
        {
          label: '审批状态',
          prop: 'activitiStatusName',
          show: true
        },
        // {
        //   label: '更新时间',
        //   prop: 'updateAt',
        //   show: true
        // },
      ];
    },
    //获取项目列表
    getProject () {
//        {
//          "activitiStatus": 0,
//          "projectCategory": "string",
//          "projectName": "string",
//          "projectStep": "string"
//        }
      let projectCategory = '';
      let projectStep = '';
      switch (this.projectType) {
        case 'portrait':
          projectCategory = 'longitudinal';
          break;
        case 'market':
          projectCategory = 'market';
          break;
        case 'internal':
          projectCategory = 'internal';
          break;
      }
      switch (this.projectStep) {
        case 'apply':
          projectStep = 'declare';
          break;
        case 'execute':
          projectStep = 'execute';
          break;
        case 'check':
          projectStep = 'accepting';
          break;
      }
      let param = {
        data: {
          projectCategory: "init",
          activitiStatus: this.queryCondition.activitiStatus,
          membersList: this.queryCondition.searchValue2,
          projectName: this.queryCondition.searchValue,
          projectManagerData: this.queryCondition.searchValue2,
          applyDate: this.queryCondition.year,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
        },
      };
      this.pageLoading = true;
      let self = this;
      Api.ProjectManagement.getProject(param).then((result) => {
        console.log("result--", result);
        this.pageLoading = false;
        if (result.status === 0) {
          this.tableRowsData.splice(0, this.tableRowsData.length);
          for (let i = 0; i < result.data.ls.length; i++) {
            let project = {};
            $.extend(true, project, result.data.ls[i]);
            switch (project.ext.openRange) {
              case 1:
                project.openRange = "成果转换类"
                break;
              case 2:
                project.openRange = "市场创收类"
                break;
              case 3:
                project.openRange = "研究开发类"
                break;
              case 4:
                project.openRange = "窗口服务类"
                break;
              case 5:
                project.openRange = "平台专项类"
                break;
              case 6:
                project.openRange = "目标责任类"
                break;
              case 7:
                project.openRange = "自主研发类"
                break;
              case 8:
                project.openRange = "临时任务类"
                break;
              default:
                project.openRange = "其他类"
            }
            if (project.ext.hasOwnProperty("projectManagerData")) {
              let projectManager = project.ext.projectManagerData[1];
            }
            if (project.ext.hasOwnProperty("applyDate")) {
              let applyTime = moment(project.ext.applyDate).toDate();
              project["applyDate"] = moment(applyTime).format("YYYY");
            }
            // 把项目成员拿出来变成字符串
            if (project.ext.permissionsPeople != null) {
              project.permissionsPeople = project.ext.permissionsPeople.map(item => item.label).toString()
            }
            this.tableRowsData.push(project);
          }
          this.tableTotalPage = result.data.total;
        } else {
          this.$message.error(result.msg);
        }
      });
    },
    //新增项目申请
    addProjectApply () {
      let routerName = '';
      switch (this.projectType) {
        case 'portrait':
          switch (this.projectStep) {
            case 'apply':
              routerName = 'AddPortraitProjectApply';
              break;
            case 'verify':
              routerName = 'AddPortraitProjectVerify';
              break;
            case 'execute':
              routerName = 'AddPortraitProjectExecute';
              break;
            case 'check':
              routerName = 'AddPortraitProjectCheck';
              break;
          }
          break;
        case 'market':
          switch (this.projectStep) {
            case 'apply':
              routerName = 'AddMarketProjectApply';
              break;
            case 'execute':
              routerName = 'AddMarketProjectExecute';
              break;
            case 'check':
              routerName = 'AddMarketProjectCheck';
              break;
          }
          break;
        case 'internal':
          switch (this.projectStep) {
            case 'apply':
              routerName = 'AddInternalProjectApply';
              break;
            case 'execute':
              routerName = 'AddInternalProjectExecute';
              break;
            case 'check':
              routerName = 'AddInternalProjectCheck';
              break;
          }
          break;
      }
      this.$router.push({name: routerName});
    },
    /*
     * table相关回调方法
     */
    tableSingleCheck (index) {
      this.$router.push({name: "PortraitProjectApplyDetail", params: {id: this.tableRowsData[index].id}});
    },
    tableSingleDelete (data) {
      // this.$router.push({name: "PortraitProjectApplyDetail", params: {id: this.tableRowsData[index].id}});
    },
    tableSelectPageSize (param) {
      this.pageSize = param;
      this.getProject();
    },
    tableSelectPage (param) {
      this.pageNo = param;
      this.getProject();
    },
    tableSingleEdit (index) {
      let routerName = '';
      switch (this.projectType) {
        case 'portrait':
          routerName = 'PortraitProjectExecuteEditDetail';
          break;
        case 'market':
          routerName = 'MarketProjectExecuteEditDetail';
          break;
        case 'internal':
          routerName = 'InternalProjectExecuteEditDetail';
          break;
      }
      this.$router.push({name: routerName, params: {id: this.tableRowsData[index].id}});
    },
    tableSingleAccept (index) {
      let routerName = '';
      switch (this.projectType) {
        case 'portrait':
          routerName = 'PortraitProjectCheckAcceptDetail';
          break;
        case 'market':
          routerName = 'MarketProjectCheckAcceptDetail';
          break;
        case 'internal':
          routerName = 'InternalProjectCheckAcceptDetail';
          break;
      }
      this.$router.push({name: routerName, params: {id: this.tableRowsData[index].id}});
    },
    activitiSelectChanged (data) {
      this.queryCondition.activitiStatus = data;
    },
    searchValueChange (data) {
      this.queryCondition.searchValue = data
    },
    searchValueChange2 (data) {
      this.queryCondition.searchValue2 = data
    },
    getYearChange (data) {
      this.queryCondition.year = data ? moment(data).format("YYYY") : '';
    },
    singleAnnotation (index, value) {
      Api.Common.addAnnotation(this.tableRowsData[index].id, value, "project").then((result) => {
        if (result.status === 0) {
          this.$message.success("添加批注成功！");
        } else {
          this.$message.error(result.msg);
        }
      })
    }
  },
  components: {
    PageLoading, DataTable, SearchBox
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
.expand-right {
  @media (min-width: 768px) {
    padding-left: 0 !important;
  }
}

.page-content {
  padding: 15px;
}
</style>