kehui/kehui-oa-front/src/pages/projectManagements/weekly/ExpenseClaimApply.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">周报填报</h1>
    </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="addExpApply" v-if="!isSuper">新增</el-button>
      </div>
      <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>
    <!--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.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,
        },
        //分页
        pageNo: 1,
        pageSize: 10,
        tableTotalPage: 1,
        tableColumnsData: [],
        tableRowsData: [],
        isSuper: false
      }
    },
    created () {
      this.initTableColumns();
      this.init();
    },
    methods: {
      addExpApply () {
        this.$router.push({name: 'AddClaimApply'})
      },
      init () {
        let userId = getItem('userId');
        if (userId === '0') {
          this.isSuper = true;
        }
        this.pageLoading = true;
        Api.FinanceManagement.getReimburseList(this.pageNo, this.pageSize).then(result => {
          this.pageLoading = false;
          this.tableRowsData = [];
          if (result.status === 0) {
            this.isEdit = result.data.isEdit;
            this.tableTotalPage = result.data.total
            let dataList = result.data.ls;
            for (let i=0; i<dataList.length; i++) {
              let deptName = '';
              for (let j=0; j<dataList[i].userInfo.dept.length; j++) {
                deptName += dataList[i].userInfo.dept[j].orgName;
                if (j < dataList[i].userInfo.dept.length - 1) {
                  deptName += '>';
                }
              }
              this.tableRowsData.push({
                status: dataList[i].status,
                id: dataList[i].id,
                userInfoName: dataList[i].userInfo.userInfoName,
                category: '报销',
                deptName: deptName
              })
            }
          } else {
            this.$message.error(`${result.msg}`);
          }
        })
      },
      //初始化tableColumns
      initTableColumns () {
        this.tableColumnsData = [
          {
            label: '姓名',
            prop: 'userInfoName',
            show: true
          },
          {
            label: '部门',
            prop: 'deptName',
            show: true
          },
          {
            label: '分类',
            prop: 'category',
            show: true
          },
          {
            label: '状态',
            prop: 'status',
            show: true
          }
        ];
      },
      tableSelectPage (param){
        this.pageNo = param;
        this.init();
      },
      tableSingleCheck (index){
        this.$router.push({
          name: "ExpenseClaimApplyCheck",
          params: {id: this.tableRowsData[index].id}
        })
      },
      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>