csc-szls-vue/shanXiPlatform/src/views/home/gzjftable.vue

<template>
    <div class="global">
        <div class="contentContainerGg">
            <div class="container">
                <el-form :inline="true">
                    <el-form-item label="时间:">
                        <el-date-picker @change="timechange" id="getWeek" v-model="datetime" type="month" format="yyyy-MM" placeholder="选择月">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" type="success" plain @click="getList()">
                            查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table border :data="tableList" highlight-current-row style="width:100%" :header-cell-style="{background:'#f8f8f8'}">
                    <el-table-column property="sTime" label="时间" align="center" >
                        <template slot-scope="scope">
                            {{ scope.row.sTime.slice(0,7) }}
                        </template>
                    </el-table-column>
                    <el-table-column property="depotName" label="公司" align="center" min-width="150">
                        <template slot-scope="scope">
                            {{ depotDic[scope.row.depotId] }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="monthlyWorkQuantity" label="月工作总数(项)" align="center" />
                    <el-table-column prop="finishOnTime" label="按时完成(项)" align="center" />
                    <el-table-column prop="lateCompletion" label="逾期完成(项)" align="center" />
                    <el-table-column prop="soverdue" label="逾期未完成(项)" align="center" />
                    <el-table-column prop="sscore" label="得分(分)" align="center" >
                      <template slot-scope="scope">
                        {{scope.row.sscore}} 分
                      </template>
                    </el-table-column>
                    <el-table-column property="operation" label="操作" align="center" width='250'>
                        <template slot-scope="scope">
                          <div v-show="depotChild.includes(scope.row.depotId)">
                            <el-button size="mini" type="detailbtn" @click="detailbtn(scope.$index, scope.row)">查看库内工作情况排名</el-button>
                          </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[10,20,30,40]" :total="total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getcf } from "@/api/organizationalStructureManagement/index.js"
import { getmorejfqk ,getAllDepotChild} from "@/api/branchoff/index.js"
export default {
    data() {
        return {
            datetime: "",
            // 列表数据
            tableList: [],
            // 分页
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 10
            },
            roleList: [],
            depotDic: [],
            depotId:'',
            depotChild:[]
        }
    },
    created() {
        this.getList()
        this.depotDic = JSON.parse(localStorage.getItem("deportDic"))
        this.depotId = JSON.parse(localStorage.getItem("userInfo")).depotId
        // console.log(this.depotId,'this.depotid')
    },
    mounted() {

      this.getNewDate()
      this.getDepotChild()
    },
    methods: {
        //获取特定格式的日期时间  "yyyy-MM-dd HH:MMM:SS"
         getNewDate() {
            var date = new Date();
            // console.log(date);
            var transverse = "-";
            var Verticalpoint = ":";
            var year = date.getFullYear() //获取年份
            var month = date.getMonth() + 1;//获取月份
            var strDate = date.getDate();//获取具体的日期
            var strHour = date.getHours();//获取...钟点
            var strMinute = date.getMinutes();//获取分钟数
            var strSeconde = date.getSeconds();//获取秒钟数
            //判断获取月份 、 具体的日期 、...钟点、分钟数、秒钟数 是否在1~9
            //如果是则在前面加“0”
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            // console.log(month);
            if (strDate >= 1 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            if (strHour >= 1 && strHour <=9) {
                strHour = "0" + strHour
            }
            // console.log(strHour);
            if (strMinute >= 1 && strMinute <= 9) {
                strMinute = "0" + strMinute;
            }

            if (strSeconde >= 1 && strSeconde <= 9) {
                strSeconde = "0" + strSeconde;
            }
            if(month == '01' ){ //当在每一年的1月份是，返回的是上一年的12月份
            console.log(month,'000000')
              year = year -1
              month = 12
              console.log(year +'-'+month)
            }else{
              if (month >= 1 && month <= 9) {
                month = "0" +( month-1);
            }else{
               month = month-1;
            }
            }
            //时间日期字符串拼接
            var NewDate =year + transverse + month /* + transverse + strDate + " " +
               strHour + Verticalpoint + strMinute + Verticalpoint + strSeconde */;
            //返回拼接字符串
            this.datetime = NewDate
            // return NewDate;
        },

        timechange() {
            this.$nextTick(() => {
                let week = document.querySelector("#getWeek").value
                this.checkYear = week

            })
        },
        // 获取当前库及下所属库
        getDepotChild(){
          getAllDepotChild(this.depotId).then(res =>{
            // console.log(res,'resmmmmmmmmm')
            this.depotChild = res.data
            // console.log(this.depotChild,'this.depotChild')
          }).catch(err =>{
            console.log(err)
          })
        },
        getList() {
            var condition = {
                // depotId: this.$store.state.depotId,
                depotId: this.$route.query.depotId,
                sTime: this.checkYear,
                groupBy:1,
                type:''
            }
            condition = JSON.stringify(condition)
            let data = {
                condition: condition,
                pageIndex: this.listQuery.page,
                pageSize: this.listQuery.limit
            }
            getmorejfqk(data)
                .then(res => {
                    if (res.code == 200) {
                        this.tableList = res.data.records
                        this.listQuery.limit = res.data.size
                        this.total = res.data.total
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        },
        sizeChange(v) {
            this.listQuery.limit = v
            this.getList()
        },
        pageChange(v) {
            this.listQuery.page = v
            this.getList()
        },
        detailbtn( index, row  ) {
              this.$router.push({
                name: "kngzjftable",
                query: {
                    depotId: row.depotId,
                    midprovinceName: this.$route.query.midprovinceName
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.top {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
}
.container {
    padding: 10px;
}
.pagination-container {
    margin-top: 10px;
    margin-right: 20px;
    text-align: right;
}
</style>