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>
        <template v-for="(item,index) in timePeriod">
            <el-form-item :label="item.partrolTime" :key="index">
                <el-cascader
                    :ref="`userName${index}`"
                    v-model="item.partolUserId"
                    :props="defaultProps"
                    :options="findUser"
                    @change="findUserToggle(index)"
                ></el-cascader>
            </el-form-item>
        </template>
    </el-form>
</template>
<script>
export default {
    props: ['params'],
    data() {
        return {
            timePeriod: [],
            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) {
            let thisObj = this.$refs[`userName${index}`][0].getCheckedNodes()[0];
            this.timePeriod[index].partolName = thisObj.label;
        },
        submit() {
            if (!this.params.isSingle) {
                this.$refs['formRu'].validate(valid => {
                    if (valid) {
                        this.add();
                    }
                });
            } else {
                this.add();
            }
        },
        add() {
            let data = this.params.thisObj;
            let initData = {
                communityId: data.communityId,
                patrolRouteId: data.id,
                periodType: data.periodType,
                periodValue: data.periodValue,
                rosterUserDtos: this.timePeriod,
                partrolDate: this.thisDay.day
            };
            if (!this.params.isSingle) {
                initData.partrolDate = this.formData.partrolDate[0];
                initData.partrolEndDate = this.formData.partrolDate[1];
            }
            this.$http.post('/sc-community/patrolRoute/roster', initData).then(({ data, status, msg }) => {
                if (status == 0) {
                    this.$message.success(msg);
                    this.params.callback();
                    this.$emit('close');
                } else {
                    this.$message.error(msg);
                }
            });
        }
    },
    created() {
        this.findUser = this.params.findUser;
        if (!!this.params.dateDe) {
            this.thisDay = this.params.dateDe;
        }
        if (!!this.params.onj) {
            console.log(this.params.onj);
        }
        if (!!this.params.thisObj) {
            let arrs = this.params.thisObj.timePeriod.split(',');
            arrs.map(item => {
                this.timePeriod.push({
                    partolName: '',
                    partolUserId: '',
                    partrolTime: item
                });
            });
        }
    },
    mounted() {}
};
</script>
<style scoped lang='scss'>
.timeNewStyle {
    /deep/ .el-date-editor--daterange.el-input__inner {
        width: 100%;
    }
}
</style>