xt-ems-front/src/views/energyScheduling/components/dispatchingLog/energyDispatch.vue

<template>
    <!-- 能源调度日志 -->
    <div class="energyDispatch">
        <div class="box">
            <p class="bt">能源调度日志</p>
            <div class="box-top-gjl">
            </div>
            <el-row>
                <el-col :span="8">
                    <div class="text-box">
                        <span class="label">日志日期</span>
                        <div class="text">
                            <el-date-picker
                                size="mini"
                                v-model="clock"
                                style="width: 100%;"
                                type="date"
                                @change="getMd"
                            ></el-date-picker>
                        </div>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div style="float:right; text-align: right;">
                        <el-button size="small" type="primary" @click="dataSave" :loading="loading">保存</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                    <el-form
                            size="mini"
                            ref="dialog_form_arr"
                            label-width="0px"
                        >
                        <el-table stripe
                            :data="tableData"
                            style="width: 100%;"
                            :height="'500px'"
                            border
                            size="mini"
                        >
                            <el-table-column
                                sortable
                                prop="time"
                                label="时间"
                                width="190px"
                            >
                                <template slot-scope="scope">
                                    <el-date-picker
                                        @change="checkt"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        type="datetime"
                                        v-model="scope.row.tim"
                                        size="mini"
                                        style="width: 100%;"
                                    ></el-date-picker>
                                </template>
                            </el-table-column>
                            <el-table-column
                                sortable
                                prop="actLog"
                                label="工作实绩"
                                min-width="100px"
                            >
                                <template slot-scope="scope">
                                    <el-input clearable
                                        v-model="scope.row.actLog"
                                        size="mini"
                                        style="width: 100%;"
                                    ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                sortable
                                prop="dataLog"
                                label="数据"
                                min-width="100px"
                            >
                                <template slot-scope="scope">
                                    <el-input clearable
                                        v-model="scope.row.dataLog"
                                        size="mini"
                                        style="width: 100%;"
                                    ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="70" align="center">
                                <template slot-scope="scope">
                                    <el-button @click.native.prevent="deleteRow(scope.$index, scope.row)" type="text" size="small">移除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form>
                </el-col>
                <el-col :span="8">
                    <div class="text">
                        <p class="label">上级命令：</p>
                        <textarea v-model="orderLog" :maxlength="300" clearable></textarea>
                    </div>
                    <div class="text">
                        <p class="label">重要记事：</p>
                        <textarea v-model="dLog" :maxlength="300" clearable></textarea>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { getCookie, formatDate } from '@/utils/util.js';
export default {
    name: 'energyDispatch',
    data () {
        return {
            clock: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1),
            orderLog: '', // 上级命令
            dLog: '', // 重要记事
            loading: false,
            tableData: [
                // {
                //     tim: '2019-08-23 18:00:00',
                //     actLog: 'actLog',
                //     dataLog: 'dataLog'
                // }
            ]
        }
    },
    mounted () {
        let that = this;
        that.clock = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1);
        that.getMd(that.clock);
    },
    methods: {
        dataSave () {
            let that = this;
            if (!that.clock) {
                this.$message.error('请填写日志日期');
                return true;
            }
            let SubmitData = {
                clock: formatDate(that.clock, 'yyyy-MM-dd'),
                dLog: that.dLog,
                orderLog: that.orderLog,
                data: that.tableData
            };
            that.loading = true;
            that.axios.post('pass/ems/v1/dispatchenergylogs/', SubmitData, {contentType: 'application/json'})
                .then(function (res) {
                    if (res.code === '0') {
                        that.$message({
                            message: '数据保存成功',
                            type: 'success'
                        });
                    } else {
                        that.$message.error(res.message);
                    }
                    that.loading = false;
                }).catch(function () {
                    that.loading = false;
                });
        },
        // 获取日志信息
        getMd (val) {
            if (!val) {
                return true;
            }
            let that = this;
            that.tableData = [];
            that.orderLog = '';
            that.dLog = '';
            let url = 'pass/ems/v1/dispatchenergylogs/' + formatDate(val, 'yyyy-MM-dd');
            that.axios.get(url).then(function (res) {
                if (res.code === '0') {
                    if (res.data != null) {
                        that.orderLog = res.data.orderLog;
                        that.dLog = res.data.dLog;
                        let tdata = res.data.list;
                        if (tdata.length < 1 || tdata.slice(-1)[0].tim) {
                            tdata.splice(tdata.length, 0, {tim: '', actLog: '', dataLog: ''});
                        }
                        that.tableData = tdata;
                    }
                } else {
                    that.$message.error(res.message);
                }
            }).catch(function () {
            });
        },
        checkt () {
            let that = this;
            // 添加一行
            if (that.tableData.slice(-1)[0].tim) {
                that.tableData.splice(that.tableData.length, 0, {tim: '', actLog: '', dataLog: ''});
            }
        },
        deleteRow (index, row) {
            let that = this;
            // 最后一行
            if (that.tableData.length === index + 1) {
                that.tableData.splice(index, 1, {tim: '', actLog: '', dataLog: ''});
            } else {
                that.tableData.splice(index, 1);
            }
        }
    }
}
</script>

<style lang="less">
.energyDispatch {
    min-width: 1000px;
    height: 100%;
    .box {
        width: 1000px;
        margin: 0  0 0 10px;
        .bt {
            font-size: 16px;
            font-weight: 600;
            text-align: center;
            padding: 20px 10px 2px 10px;
        }
        .box-top-gjl {
            overflow: hidden;
            padding: 0 0 10px 0;
        }
        .text-box {
            height: 32px;
            .label {
                width: 80px;
                line-height: 32px;
                padding-right: 8px;
                display: block;
                text-align: right;
                float: left;
            }
            .text {
                height: 100%;
                margin:0 0 0 80px;
                padding:0;
                border: none;
            }
        }
        .text {
            height: 245px;
            position: relative;
            padding-top: 25px;
            margin: 0 0 10px 20px;
            border: 1px #c0c4cc solid;
            // border-radius: 4px;
            overflow: hidden;
            .label {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 25px;
                padding: 1px 5px;
                background-color: #45A4F9;
                color: #FFF;
            }
            textarea {
                width: 100%;
                height: 100%;
                padding: 5px 8px;
                border: none;
            }
        }
    }
}
</style>