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

<template>
    <!-- 电力调度日志 -->
    <div class="electric">
        <div class="box">
            <p class="bt">电力调度日志</p>
            <div class="box-top-gjl">
                <div style="float:right; text-align: right;">
                    <el-button size="small" type="primary" @click="dataSave" :loading="loading">保存</el-button>
                </div>
            </div>
            <el-form
                :model="dialog.form.data"
                ref="dialog_form"
                :rules="dialog.form.rules"
                label-width="90px"
                size="mini"
            >
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="日志日期" prop="clock">
                            <el-date-picker
                                v-model="dialog.form.data.clock"
                                style="width: 100%;"
                                type="date"
                                @change="getMd"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="交班人" prop="turnUser">
                            <el-input v-model.trim="dialog.form.data.turnUser" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="总值班长" prop="leader">
                            <el-input v-model.trim="dialog.form.data.leader" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="调度类型" prop="dtype">
                            <el-input v-model.trim="dialog.form.data.dtype" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="接班人" prop="carryUser">
                            <el-input v-model.trim="dialog.form.data.carryUser" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班次" prop="inorder">
                            <el-input v-model.trim="dialog.form.data.inorder" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="编制时间" prop="tim">
                            <el-date-picker
                                v-model="dialog.form.data.tim"
                                style="width: 100%;"
                                type="datetime"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <p class="bt">电力调度日志详细信息</p>
                <el-form-item label-width="0px">
                    <div class="text-box">
                        <span class="label">主要作业实绩</span>
                        <div class="text">
                            <textarea v-model.trim="dialog.form.data.elog" :maxlength="300" clearable></textarea>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { getCookie, formatDate } from '@/utils/util.js';
export default {
    name: 'electric',
    data () {
        return {
            loading: false,
            dialog: {
                form: {
                    data: {
                        clock: '',
                        turnUser: getCookie('loginName'), // 交班人
                        carryUser: '', // 接班人
                        tim: new Date(), // 编制时间
                        dtype: '', // 调度类型
                        leader: '', // 总值班长
                        inorder: '', // 班次
                        elog: '' // 动力日志
                    },
                    rules: {
                        clock: [
                            { required: true, message: '该项不能为空', trigger: 'change' }
                        ],
                        tim: [
                            { required: true, message: '该项不能为空', trigger: 'change' }
                        ],
                        turnUser: [],
                        dtype: [],
                        leader: [],
                        carryUser: [],
                        inorder: [],
                        elog: []
                    }
                }
            }
        }
    },
    mounted () {
        let that = this;
        that.dialog.form.data.clock = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1);
        that.getMd(that.dialog.form.data.clock);
    },
    methods: {
        dataSave () {
            let that = this;
            let SubmitData = {
                clock: formatDate(that.dialog.form.data.clock, 'yyyy-MM-dd'),
                tim: formatDate(that.dialog.form.data.tim, 'yyyy-MM-dd HH:mm:ss'),
                turnUser: that.dialog.form.data.turnUser,
                carryUser: that.dialog.form.data.carryUser,
                dtype: that.dialog.form.data.dtype,
                leader: that.dialog.form.data.leader,
                inorder: that.dialog.form.data.inorder,
                elog: that.dialog.form.data.elog
            };
            that.$refs['dialog_form'].validate((valid) => {
                if (valid) {
                    that.loading = true;
                    that.axios.put('pass/ems/v1/dispatchelogs/', SubmitData)
                        .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.dialog.form.data.tim = new Date();
            that.dialog.form.data.turnUser = getCookie('loginName');
            that.dialog.form.data.carryUser = '';
            that.dialog.form.data.dtype = '';
            that.dialog.form.data.leader = '';
            that.dialog.form.data.inorder = '';
            that.dialog.form.data.elog = '';
            let url = 'pass/ems/v1/dispatchelogs/' + formatDate(val, 'yyyy-MM-dd');
            that.axios.get(url).then(function (res) {
                if (res.code === '0') {
                    if (res.data != null) {
                        let item = res.data;
                        that.dialog.form.data.tim = new Date(item.tim);
                        that.dialog.form.data.turnUser = item.turnUser;
                        that.dialog.form.data.carryUser = item.carryUser;
                        that.dialog.form.data.dtype = item.dtype;
                        that.dialog.form.data.leader = item.leader;
                        that.dialog.form.data.inorder = item.inorder;
                        that.dialog.form.data.elog = item.elog;
                    }
                } else {
                    that.$message.error(res.message);
                }
            }).catch(function () {
            });
        }
    }
}
</script>

<style lang="less">
.electric {
    min-width: 800px;
    height: 100%;
    .box {
        width: 800px;
        margin: 0  0 0 1px;
        .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: 168px;
            .label {
                width: 90px;
                line-height: 168px;
                padding-right: 8px;
                display: block;
                text-align: right;
                float: left;
            }
            .text {
                height: 100%;
                margin-left: 90px;
                textarea {
                    width: 100%;
                    height: 100%;
                    padding: 5px 8px;
                    border: 1px #c0c4cc solid;
                    border-radius: 4px;
                }
            }
        }
    }
}
</style>