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

<template>
    <div class="main">
        <div class="blockName">
            {{ !isAdd ? '编辑' : '新增' }}巡更路线（
            <span class="show-required-icon-star"></span>为必填项）
        </div>
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="120px"
            class="formContent"
        >
            <div class="formContent-item">
                <el-form-item label="所属社区" prop="communityId">
                    <el-select
                        class="width100"
                        v-model="ruleForm.communityId"
                        placeholder="所属社区"
                        clearable
                    >
                        <el-option
                            v-for="(item, index) in $parent.communityArr"
                            :key="index"
                            :label="item.communityName"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="巡更路线名称" prop="routeName">
                    <el-input v-model="ruleForm.routeName" placeholder="请输入巡更路线名称"></el-input>
                </el-form-item>
                <el-form-item label="巡更点" prop="routePointRelationDtos">
                    <el-transfer
                        v-model="ruleForm.routePointRelationDtos"
                        ref="transferTude"
                        filterable
                        :props="{
                            key: 'id',
                            label: 'pointName',
                            lan: 'latitude',
                            lng: 'longitude'
                        }"
                        :titles="['待选列表', '已选列表']"
                        @change="handleChange"
                        :data="patrolArr"
                    ></el-transfer>
                    <map-value :point="targetData"></map-value>
                </el-form-item>
            </div>
            <div class="formContent-item">
                <el-form-item label="巡更日期" prop="startDate">
                    <el-date-picker
                        class="width100"
                        v-model="effectiveDate"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="选择开始日期"
                        end-placeholder="选择结束日期"
                        @change="effectiveDateToggle"
                        :editable="false"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="巡更时间" prop="timePeriod">
                    <div class="timeList" v-for="(item,index) in timePeriod" :key="index">
                        <el-time-select
                            class="width50"
                            placeholder="开始时间"
                            v-model="item.startTime"
                            :picker-options="{
                            start: '00:00',
                            step: '00:15',
                            end: '23:30'
                            }"
                            @change="timeChange(item,'startTime')"
                        ></el-time-select>
                        <span>至</span>
                        <el-time-select
                            placeholder="结束时间"
                            v-model="item.endTime"
                            class="width50"
                            :picker-options="{
                            start: '00:00',
                            step: '00:15',
                            end: '23:30',
                            minTime: item.startTime
                            }"
                            @change="timeChange(item,'endTime')"
                        ></el-time-select>
                        <div class="sunm" @click="addTime(index,1)">
                            <i class="zoniot_font zoniot-icon-tianjia1"></i>
                        </div>
                        <div
                            class="sunm"
                            @click="addTime(index,-1)"
                            v-if="timePeriod.length>1 && index!=0"
                        >
                            <i class="zoniot_font zoniot-icon-shanjian"></i>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="巡更周期" prop="periodValue">
                    <el-radio-group v-model="ruleForm.periodType">
                        <el-radio :label="1">每周重复</el-radio>
                        <el-radio :label="2">间隔天数重复</el-radio>
                    </el-radio-group>

                    <el-checkbox-group v-if="ruleForm.periodType == 1" v-model="periodValue">
                        <el-checkbox :label="1">周一</el-checkbox>
                        <el-checkbox :label="2">周二</el-checkbox>
                        <el-checkbox :label="3">周三</el-checkbox>
                        <el-checkbox :label="4">周四</el-checkbox>
                        <el-checkbox :label="5">周五</el-checkbox>
                        <el-checkbox :label="6">周六</el-checkbox>
                        <el-checkbox :label="7">周日</el-checkbox>
                    </el-checkbox-group>
                    <div v-else class="periodValueInput">
                        每隔
                        <el-input-number
                            v-model="ruleForm.periodValue"
                            controls-position="right"
                            :min="0"
                            :max="30"
                        ></el-input-number>天进行(输入0-30的数字，0代表每天都要进行任务)
                    </div>
                </el-form-item>
                <el-form-item label="定位距离(m)">
                    <el-input
                        v-model="ruleForm.positioningDistance"
                        placeholder="巡更定位距离，可输入1-100米，不输入则不检查定位距离"
                    ></el-input>
                </el-form-item>
                <el-form-item label="拍照/视频要求">
                    <el-select
                        class="width100"
                        v-model="ruleForm.cameraSettings"
                        placeholder="请选择拍照/视频要求"
                        clearable
                    >
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注信息">
                    <el-input
                        type="textarea"
                        placeholder="请输入备注信息"
                        resize="none"
                        :rows="4"
                        v-model="ruleForm.remark"
                        maxlength="300"
                        show-word-limit
                    ></el-input>
                </el-form-item>
            </div>
        </el-form>
        <div style="text-align: right">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="addEdit">保存</el-button>
        </div>
    </div>
</template>
<script>
import mapValue from './mapValue.vue';
export default {
    components: { mapValue },
    data() {
        return {
            ruleForm: {
                communityId: '',
                routeName: '',
                routePointRelationDtos: [],
                startDate: '',
                endDate: '',
                timePeriod: '',
                periodType: 1,
                periodValue: '',
                positioningDistance: '',
                cameraSettings: '',
                remark: ''
            },
            periodValue: [],
            timePeriod: [
                {
                    startTime: '',
                    endTime: ''
                }
            ],
            rules: {
                communityId: [this.$valid.inputRequired('社区名称')],
                routeName: [this.$valid.inputRequired('巡更路线名称')],
                routePointRelationDtos: [this.$valid.inputRequired('巡更点')],
                startDate: [this.$valid.selectRequired('巡更日期')],
                timePeriod: [this.$valid.selectRequired('巡更时间')],
                periodValue: [this.$valid.selectRequired('巡更周期')]
            },
            effectiveDate: [],
            patrolArr: [],
            targetData: []
        };
    },
    watch: {
        'ruleForm.communityId'(e) {
            this.getPoint(e);
        },
        periodValue(e) {
            this.ruleForm.periodValue = e.join();
        }
    },
    methods: {
        //保存
        addEdit() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    let url = '/sc-community/patrolRoute/add';
                    this.ruleForm;
                    let dotArr = arr => {
                        let dotObj = [];
                        arr.map((item, index) => {
                            dotObj.push({
                                pointId: item,
                                order: index
                            });
                        });
                        return dotObj;
                    };

                    let params = {
                        communityId: this.ruleForm.communityId,
                        routeName: this.ruleForm.routeName,
                        routePointRelationDtos: dotArr(this.ruleForm.routePointRelationDtos),
                        startDate: this.ruleForm.startDate,
                        endDate: this.ruleForm.endDate,
                        timePeriod: this.ruleForm.timePeriod,
                        periodType: this.ruleForm.periodType,
                        periodValue: this.ruleForm.periodValue,
                        positioningDistance: this.ruleForm.positioningDistance,
                        cameraSettings: this.ruleForm.cameraSettings,
                        remark: this.ruleForm.remark
                    };
                    this.$http
                        .post(url, params)
                        .then(({ status, msg }) => {
                            if (status == 0) {
                                this.$message.success(msg);
                                this.close();
                            } else {
                                this.$message.error(msg);
                            }
                        })
                        .catch(() => {});
                }
            });
        },
        effectiveDateToggle(va) {
            let arr = va;
            if (!arr) {
                arr = ['', ''];
            }
            this.ruleForm.startDate = arr[0];
            this.ruleForm.endDate = arr[1];
        },
        close() {
            this.$emit('initPage');
        },
        getPoint(id) {
            this.$http.get('/sc-community/patrol/point/getPointList', { id, id }).then(({ data, status, msg }) => {
                this.patrolArr = data;
            });
        },
        handleChange() {
            this.$nextTick(() => {
                this.targetData = this.$refs.transferTude.targetData;
            });
        },
        addTime(inx, sun) {
            if (sun > 0) {
                this.timePeriod.push({ startTime: '', endTime: '' });
            } else {
                this.timePeriod.splice(inx, 1);
            }
        },
        timeChange(itm, str) {
            if (!!itm['endTime'] && !!itm['startTime']) {
                let TimeArr = [];
                this.timePeriod.map((item, index) => {
                    TimeArr.push(`${item.startTime}-${item.endTime}`);
                });
                this.ruleForm.timePeriod = TimeArr.join();
            }
        }
    },
    created() {}
};
</script>
<style lang='scss' scoped>
@import '@assets/css/public-style.scss';
.main {
    padding: 20px;
    background: white;
    .blockName {
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e0e1e3;
    }
}

.show-required-icon-star {
    &:before {
        content: '*';
        color: #f56c6c;
    }
}

.formContent {
    display: flex;
    justify-content: space-between;
    .formContent-item {
        width: 49%;
    }
    .periodValueInput {
        color: #606266;
    }
    .sunm {
        width: 15px;
        text-align: center;
        display: inline-block;
        cursor: pointer;
        margin-left: 10px;
    }
    .timeList {
        margin-bottom: 10px;
        &:nth-last-child() {
            margin: 0;
        }
    }
}
.width50 {
    width: calc(50% - 40px);
    & + span {
        margin: 0 3px;
        display: inline-block;
    }
}
</style>