manHourHousekeeper/fhKeeper/formulahousekeeper/octopus/src/views/workReport/review.vue

<template>
    <section>
        <el-col :span="24" class="toolbar" style="">
            <div style="display:flex;justify-content: left;align-items: center;">
                <el-input id="contractAmount" v-model="paramCompanyName" placeholder="输入公司名称" @keyup.native="restrictNumber('contractAmount')" style="width:200px" clearable size="small">
                    <el-button slot="append" size="small" icon="el-icon-search" @click="toolbarSelect()"></el-button>
                </el-input>
                
                <el-date-picker 
                v-model="dateArray" 
                type="daterange" 
                range-separator="至" 
                :clearable="false" 
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                size="small" 
                style="margin-left:20px"
                @change="toolbarSelect()"
                ></el-date-picker>
                
            </div>
        </el-col>
        
        <el-table :data="tableList" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;">
            <el-table-column prop="companyName" label="公司名称" min-width="160"></el-table-column>
            <el-table-column prop="moduleName" label="模块" min-width="80"></el-table-column>
            <el-table-column prop="operatorName" label="操作人" min-width="100"></el-table-column>
            <el-table-column prop="time" label="操作时间" min-width="200"></el-table-column>
            <el-table-column prop="content" label="操作内容" min-width="500">
                <template slot-scope="scope">
                    <div v-for="item,index in contentString(scope.row.content)" :key="index">{{item}}</div>
                    <!-- <span>{{contentString(scope.row.content)}}</span> -->
                    <!-- <span>{{scope.row.content}}</span> -->
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[20, 50 , 80 , 100]"
                :page-size="20"
                :current-page="page"
                layout="total, sizes, prev, pager, next"
                :total="total"
                style="float:right;"
            ></el-pagination>
        </el-col>
        
    </section>
</template>
<script>
    export default {
        data() {
            return {
                listLoading: false,
                tableHeight: 0,
                page: 1,
                size: 20,
                total: 0,

                tableList: [],
                dateArray: [],
                paramCompanyName: ''
            }
        },
        created() {
            let height = window.innerHeight;
            this.tableHeight = height - 180;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 180;
            };

            let date = new Date()
            let datemonth = date.getMonth() + 1
            let dateday = date.getDate()
            let datestr1 = date.getFullYear()+'-'+(datemonth<10?'0'+datemonth:datemonth)+'-'+(dateday<10?'0'+dateday:dateday)

            let date2 = new Date(date.getFullYear(),date.getMonth(),date.getDate()-7)
            let date2month = date2.getMonth() + 1
            let date2day = date2.getDate()
            let datestr2 = date2.getFullYear()+'-'+(date2month<10?'0'+date2month:date2month)+'-'+(date2day<10?'0'+date2day:date2day)
            this.dateArray = [datestr2,datestr1]
        },
        mounted() {
            this.getTableList()
        },
        methods: {

            toolbarSelect(){
                this.page = 1
                this.getTableList()
            },
            getTableList(){
                this.listLoading = true
                this.http.post('/operation-record/getList',{
                    startDate: this.dateArray[0],
                    endDate: this.dateArray[1],
                    companyName: this.paramCompanyName,
                    pageIndex: this.page,
                    pageSize: this.size,
                },res => {
                    this.listLoading = false
                    if(res.code == 'ok'){
                        this.total = res.data ? res.data.total : 0
                        this.tableList = res.data ? res.data.record : []
                    }else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        })
                    }
                },err => {
                    this.listLoading = false
                    this.$message({
                        message: err,
                        type: 'error'
                    })
                })
            },
            contentString(string){
                return string.split('\n')
            },

            handleSizeChange(val){
                this.size = val;
                this.page = 1
                this.getTableList();
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getTableList();
            },
            restrictNumber(targetId){
                // let inpu = document.getElementById(targetId);
                // inpu.value = inpu.value.replace(/\D/g,'')
            }
        },
    };
</script>

<style lang="scss" scoped>
.classification {
    width: 120px;
    border-right: 1px solid #f2f2f2;
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
    .on {
        color: #409EFF;
    }
    p{
        width: 120px;
        text-align: center;
        line-height: 50px;
        margin: 0;
        cursor: pointer;
    }
    p:hover{
        background: #dddddd;
    }
}
</style>