Project-Annex/operationSupport/src/views/patrolManagement/popups/schedulingAdd.vue

<template>
    <el-form class="timeNewStyle" label-width="100px" :model="formData" :rules="formRules" ref="formRu">
        <el-form-item label="巡更日期" v-if="!params.isSingle" prop="partrolDate">
            <el-date-picker
                v-model="formData.partrolDate"
                value-format="yyyy-MM-dd"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            ></el-date-picker>
        </el-form-item>
        <el-form-item label="巡更日期" v-else>{{ thisDay.day | dateText }}</el-form-item>
        <el-form-item label="8:30-10:00">
            <el-cascader
                ref="userName0"
                v-model="timePeriod[0].partolUserId"
                :props="defaultProps"
                :options="findUser"
                @change="findUserToggle(0)"
            ></el-cascader>
        </el-form-item>
        <el-form-item label="18:30-19:00">
            <el-cascader
                ref="userName1"
                v-model="timePeriod[1].partolUserId"
                :props="defaultProps"
                :options="findUser"
                @change="findUserToggle(1)"
            ></el-cascader>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    props: ['params'],
    data() {
        return {
            timePeriod: [
                {
                    partolName: '',
                    partolUserId: '',
                    partrolTime: '8:30-10:00'
                },
                {
                    partolName: '',
                    partolUserId: '',
                    partrolTime: '18:30-19:00'
                }
            ],
            findUser: [],
            thisDay: {},
            defaultProps: {
                value: 'id', // 唯一标识
                label: 'label', // 标签显示
                children: 'children',
                emitPath: false
            },
            formData: {
                partrolDate: []
            },
            formRules: {
                partrolDate: [this.$valid.selectRequired('时间段')]
            }
        };
    },
    filters: {
        dateText(va) {
            if (!!va) {
                let timeAr = va.split('-');
                return `${timeAr[0]}年${timeAr[1]}月${timeAr[2]}日`;
            } else {
                return '';
            }
        }
    },
    methods: {
        findUserToggle(index) {
            this.timePeriod[index].partolName = this.$refs['userName' + index].getCheckedNodes()[0].label;
        },
        submit() {
            if (!this.params.isSingle) {
                this.$refs['formRu'].validate((valid) => {
                    if (valid) {
                        // 批量添加
                    }
                });
            } else {
                // 单个添加修改
            }
        }
    },
    created() {
        this.findUser = this.params.findUser;
        if (!!this.params.dateDe) {
            this.thisDay = this.params.dateDe;
        }
        if (!!this.params.onj) {
            console.log(this.params.onj);
        }
    },
    mounted() {}
};
</script>
<style scoped lang='scss'>
.timeNewStyle {
    /deep/ .el-date-editor--daterange.el-input__inner {
        width: 100%;
    }
}
</style>