kehui/kehui-oa-front/src/pages/projectManagements/departmentWeekly/DepartmentWeeklyList.vue

<!--<template>
  <div id="content-container" :class="{'expand-right': expandRight}">
    <page-loading :show="pageLoading"></page-loading>
    &lt;!&ndash;Page Title&ndash;&gt;
    <div id="page-title">
      <h1 class="page-header text-overflow">部门周报填报</h1>
    </div>
    <div class="page-content">
      <data-table
        :totalColumnsData="tableColumnsData"
        :rowsData="tableRowsData"
        :showSingleOperation="tableShowSingleOperation"
        :showMultipleOperation="false"
        :canFolded="true"
        :showPageCtr="true"
        :totalPage="tableTotalPage"
        :currentPage="pageNo"
        @selectPage="tableSelectPage"
        @singleEdit="tableSingleEdit"
        @singleCheck="tableSingleCheck"
      >
      </data-table>
    </div>
  </div>
</template>-->
<template>
  <div id="content-container" :class="{'expand-right': expandRight}">
    <page-loading :show="pageLoading"></page-loading>
  <div id="page-title">
    <h1 class="page-header text-overflow">部门周报填报</h1>
  </div>
    <div class="page-content">
  <el-table
    :data="dataList"
    style="width: 100%">
    <el-table-column
      prop="projectNo"
      label="项目编号"
     >
    </el-table-column>
    <el-table-column
      prop="projectName"
      label="项目名称"
      >
    </el-table-column>
    <el-table-column
      prop="thisWeek"
      label="本周进展"
     >
    </el-table-column>
    <el-table-column
      prop="nextWeek"
      label="下周计划"
      >
    </el-table-column>
    <el-table-column label="操作">
      <el-button type="text" size="mini" @click="showById(scope.row.id)">查看工作量</el-button>
      <el-button type="text" size="mini" @click="updateById(scope.row.id)">修改</el-button>
    </el-table-column>
  </el-table>

      <!-- 分页组件 -->
      <el-pagination
        :current-page="pageNo"
        :total="total"
        :page-size="pageSize"
        :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
        style="padding: 30px 0; text-align: center;"
        layout="sizes, prev, pager, next, jumper, ->, total, slot"
      />
<!--      查看每人工作量(人日)-->
      <el-dialog title="查看每人工作量" :visible.sync="formDataInfo" width="35%">
        <h3>每人工作量(人日)</h3>
        <div>
          <el-table :data="workLoadInfo">
            <el-table-column
              prop="userId"
              label="姓名"
            >
            </el-table-column>
            <el-table-column
              prop="workload"
              label="工作量(人日)"
            >
            </el-table-column>
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="formDataInfo = false" size="small">取 消</el-button>
      </span>
      </el-dialog>

    </div>
  </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.js'
  import {getItem} from '../../../config/mUtils.js'

  export default {
    beforeRouteEnter (to, from, next) {
      next(function (vm) {
        global.getMenuIndex(vm);
      })
    },
    data (){
      return {
        expandRight: false,
        // table单选操作
        tableShowSingleOperation: {
          show: true,
          showEdit: false,
          showDelete: false,
          showCheck: true,
        },
        dataList: [],
        workLoadInfo: [],
        formDataInfo: false,
        // 分页
        pageNo: 1, // 默认页码
        pageSize: 10, // 每页记录数
        tableTotalPage: 1,
        tableColumnsData: [],
        tableRowsData: [],
        isSuper: false
      }
    },
    created () {
      this.initTableColumns();
      this.init();
    },
    methods: {
      init () {
        let userId = getItem('userId');
        if (userId === '0') {
          this.isSuper = true;
        }
        let projectWeeklyFindReq = {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
        // this.pageLoading = true;
        Api.ProjectManagements.getWeekly(projectWeeklyFindReq).then(result=>{
          this.tableRowsData = [];
          this.pageLoading = false;
          console.log("周报填报列表",result)
          if (result.status === 0) {
            this.dataList = result.data.ls;
            for (let i=0; i<this.dataList.length; i++) {
              this.tableRowsData.push({
                projectNo: this.dataList[i].projectNo,
                projectName: this.dataList[i].projectName,
                userName: this.dataList[i].userName,
                workload: this.dataList[i].workload,
                thisWeek: this.dataList[i].thisWeek,
                nextWeek: this.dataList[i].nextWeek
              })
            }
            console.log("tableRowsData",this.tableRowsData)
          }
        })
      },
      // 初始化tableColumns
      initTableColumns () {
        this.tableColumnsData = [
          {
            label: '项目编号',
            prop: 'projectNo',
            show: true
          },
          {
            label: '项目名称',
            prop: 'projectName',
            show: true
          },
          {
            label: '本周进展',
            prop: 'thisWeek',
            show: true
          },
          {
            label: '下周计划',
            prop: 'nextWeek',
            show: true
          },
          {
            label: '工作量(人日)',
            prop: 'workload',
            show: true,
            children: [
            {prop: 'name', show: true}
            ]
          }
        ];
      },
      tableSelectPage (param){
        this.pageNo = param;
        this.init();
      },
      tableSingleCheck (index){
        this.$router.push({
          name: "ExpenseClaimApplyCheck",
          params: {id: this.tableRowsData[index].id}
        })
      },
      showById (id) {
        Api.ProjectManagements.getWorkLoad(id).then(
          response => {
            this.formDataInfo = true
            this.workLoadInfo = response.data
            console.log("workLoadInfo", this.workLoadInfo)
          }
        )
      },
      tableSingleEdit (index) {
        this.$router.push({
          name: "ExpenseClaimApplyEdit",
          params: {id: this.tableRowsData[index].id}
        })
      }
    },
    components: {
      PageLoading, DataTable, DataForm
    }
  }
</script>

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

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