jili2/application/admin/view/patrol_plan/add.html

{extend name="common/common2" /}
{block name="main"}
<style>
    .ctable td{
        min-width: 150px!important;
        max-width: 300px!important;
    }
</style>
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
           <!-- <div class="ibox-title">
                <h5>{$meta_title}</h5>
                <div class="ibox-tools">
                    <a class="toback" href="{:url('index',['mode'=>$mode])}">
                        返回上一页
                    </a>
                </div>
            </div>-->
            <div class="ibox-content" id="vue-plan">
                <p><br></p>
                <div class="row">
                    <div class="col-xs-6 col-xs-offset-3">
                        <el-steps :active="step" align-center finish-status="success">
                            <el-step title="配置地点"></el-step>
                            <el-step title="配置排班"></el-step>
                            <el-step title="任务确认"></el-step>
                        </el-steps>
                    </div>
                </div>
                <p><br></p>

                <form method="post" class="form-horizontal">
                    <div v-if="step == 0">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">任务名称<span class="text-danger">*</span></label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" v-model="title" value="" placeholder="请输入任务名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">计划时间<span class="text-danger">*</span></label>
                            <div class="col-sm-8">
                                <el-date-picker
                                        style="width: 100%"
                                        size="small"
                                        v-model="date"
                                        type="daterange"
                                        range-separator="至"
                                        value-format="yyyy-MM-dd"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                        </div>

                        <div class="form-group"  {if $mode==4} style="display: block" {else} style="display: none" {/if}>
                            <label class="col-sm-2 control-label">选择分类<span class="text-danger">*</span></label>
                            <div class="col-sm-8">
                                <el-select clearable multiple filterable v-model="cate" placeholder="请选择分类">
                                    <el-option
                                            v-for="item in cateList"
                                            :key="item.id"
                                            :label="item.title"
                                            :value="item.id.toString()">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">地点<span class="text-danger">*</span></label>
                            <div class="col-sm-8">
                                <button class="btn btn-sm btn-primary" type="button" @click="selectAddr()">添加地点</button>
                                <button class="btn btn-sm btn-primary" type="button" @click="selectForm()">设置检查内容</button>
                                <button class="btn btn-sm btn-danger" type="button" @click="delAddrs">移除</button>
                                <button class="btn btn-sm btn-primary" type="button" @click="sortAddrs">确定排序</button>

                                <el-table
                                        v-if="tableData.length > 0"
                                        :data="tableData"
                                        height="350"
                                        border
                                        @selection-change="handleSelectionChange"
                                        style="width: 100%">
                                    <el-table-column
                                            type="selection"
                                            width="60">
                                    </el-table-column>
                                    <el-table-column
                                            prop="addrTitle"
                                            label="地点名称"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column prop="formTitle" label="检查内容">
                                        <template slot-scope="scope">
                                            <span v-for="(item,index) in scope.row.forms" :key="index">{{item.title}};</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="sorts" label="排序">
                                        <template slot-scope="scope">
                                            <input type="number" step="1" class="form-control" v-model="scope.row.sorts">
                                        </template>
                                    </el-table-column>
<!--                                    <el-table-column label="操作" width="180">-->
<!--                                        <template slot-scope="scope">-->
<!--                                            <button class="btn btn-sm" type="button" @click="moveUp(scope.$index, scope.row)">上移</button>-->
<!--                                            <button class="btn btn-sm" type="button" @click="moveDown(scope.$index, scope.row)">下移</button>-->
<!--                                        </template>-->
<!--                                    </el-table-column>-->
                                </el-table>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">是否按顺序执行<span class="text-danger">*</span></label>
                            <div class="col-sm-8" style="padding-top: 7px;">
                                <el-radio v-model="inOrder" :label="0">否</el-radio>
                                <el-radio v-model="inOrder" :label="1">是</el-radio>
                            </div>
                        </div>

                        <div class="form-group" v-if="inOrder === 1 && lines.length > 0">
                            <label class="col-sm-2 control-label">路线时间设置</label>
                            <div class="col-sm-8" style="padding-top: 7px;">
                                <table class="table table-bordered ctable text-center">
                                    <tr>
                                        <th class="text-center">路线</th>
                                        <th class="text-center">时间跨度(分钟)</th>
                                        <th class="text-center">浮动时间(分钟)</th>
                                    </tr>
                                    <tr v-for="(item,index) in lines" :key="index">
                                        <td>{{item.st}} ~ {{item.et}}</td>
                                        <td><el-input type="number" v-model="item.kd" size="small" style="width: 140px" placeholder=""></el-input></td>
                                        <td><el-input type="number" v-model="item.fd" size="small" style="width: 140px" placeholder=""></el-input></td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                    </div>

                    <div v-if="step == 1">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">设置执行人员<span class="text-danger">*</span></label>
                            <div class="col-sm-8">
                                <el-select
                                        clearable filterable
                                        v-model="userIds"
                                        multiple
                                        collapse-tags
                                        style="width: 100%"
                                        size="small"
                                        placeholder="请选择">
                                    <el-option
                                            v-for="item in users"
                                            :key="item.id"
                                            :label="item.title"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">时间段配置<span class="text-danger">*</span></label>
                            <div class="col-sm-8">
                                每
                                <el-select v-model="dateType" placeholder="请选择" style="width: 100px;" size="small">
                                    <el-option
                                            v-for="item in dateTypes"
                                            :key="item.id"
                                            :label="item.title"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                                的
                                <span v-if="dateType == 3">
                                    <el-date-picker
                                            style="width: 130px"
                                            size="small"
                                            v-model="dateFrom"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="请选择日期">
                                    </el-date-picker>
                                    开始，工作
                                    <el-input type="number" @input="changePlay" v-model="datePlay" size="small" style="width: 80px;" placeholder="请输入天数"></el-input>
                                    天，
                                    暂停
                                    <el-input type="number" @input="changePause" v-model="datePause" size="small" style="width: 80px;" placeholder="请输入天数"></el-input>
                                    天，每天的
                                </span>
                                <button v-if="dateType == 2" class="btn btn-sm btn-default" type="button" @click="selectWeek">添加周</button>
                                <button class="btn btn-sm btn-default" type="button" @click="selectTime">添加时间段</button>
                                开始任务
                                <div v-if="dateType == 2" style="padding: 5px 0">
                                    已选择周：
                                    <el-tag
                                            style="margin-right: 5px;cursor: pointer"
                                            v-for="item in dateWeeks"
                                            size="small"
                                            :key="item.id"
                                            :type="item.type"
                                            effect="dark"
                                    >
                                        {{ item.title }}
                                    </el-tag>
                                </div>
                                <div style="padding: 5px 0">
                                    已选择时间段：
                                    <el-tag
                                            style="margin-right: 5px;margin-bottom: 5px"
                                            :key="index"
                                            v-for="(item,index) in dateTimes"
                                            size="small"
                                    >
                                        {{item.stime}} ~ <span v-if="item.stype == 1">{{item.sday}}天后</span>{{item.etime}}
                                    </el-tag>
                                </div>
                                <el-button @click="createClass" size="small">生成任务表</el-button>
                                <div style="padding: 5px 0">
                                    <div class="table-responsive" v-if="tasks.list.length > 0">
                                        <table class="table table-bordered ctable text-center">
                                            <tr>
                                                <td></td>
                                                <td v-for="(item,index) in tasks.days" :key="index">{{item}}</td>
                                            </tr>
                                            <tr v-for="(vo,idx) in tasks.list" :key="idx">
                                                <td>{{vo.time.stime}} ~ <span v-if="vo.time.stype == 1">{{vo.time.sday}}天后</span>{{vo.time.etime}}</td>
                                                <td v-for="(item,index) in tasks.days" :key="index">
                                                    <template v-for="(v,id) in vo.list">
                                                        <span v-if="item == v.day" :key="id">{{v.userNames}}</span>
                                                    </template>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-if="step == 2">
                        <div style="padding: 5px 0">
                            <div class="table-responsive" v-if="tasks.list.length > 0">
                                <table class="table table-bordered ctable text-center">
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td v-for="(item,index) in tasks.days" :key="index"><a href="javascript:;" @click="delDay(item)">删除列</a></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td v-for="(item,index) in tasks.days" :key="index">{{item}}</td>
                                    </tr>
                                    <tr v-for="(vo,idx) in tasks.list" :key="idx">
                                        <td><a href="javascript:;" @click="delTimes(vo.time)">删除行</a></td>
                                        <td>{{vo.time.stime}} ~ <span v-if="vo.time.stype == 1">{{vo.time.sday}}日后</span>{{vo.time.etime}}</td>
                                        <td v-for="(item,index) in tasks.days" :key="index">
                                            <template v-for="(v,id) in vo.list">
                                                <span v-if="item == v.day" :key="id">{{v.userNames}}</span>
                                            </template>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>


                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <div class="col-sm-6 col-sm-offset-2">
                            <button v-if="step == 2" class="btn btn-primary" target-form="form-horizontal" type="button" id="saveSubmit" @click="saveSubmit">保 存</button>
                            <button v-if="step == 1||step == 2" class="btn btn-default" type="button" @click="pre">上一步</button>
                            <button v-if="step == 0||step == 1" class="btn btn-info" type="button" @click="next">下一步</button>
                        </div>
                    </div>
                </form>

                <el-dialog
                        title="选择地点"
                        :visible.sync="dialogVisibleAddr"
                        width="500px"
                        :before-close="handleClose"
                >
                    <el-input
                            placeholder="请输入"
                            v-model="addrkeyword"
                            @input="searchAddr"
                            clearable>
                    </el-input>
                    <el-table
                            ref="singleTable"
                            :data="addrs"
                            height="300"
                            @selection-change="handleSelectionChangeAddr"
                            style="width: 100%">
                        <el-table-column
                                type="selection"
                                width="60">
                        </el-table-column>
                        <el-table-column
                                property="title"
                                label="名称"
                        >
                        </el-table-column>
                    </el-table>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisibleAddr = false">取 消</el-button>
                        <el-button type="primary" @click="saveAddr">确 定</el-button>
                    </span>
                </el-dialog>

                <el-dialog
                        title="选择检查内容"
                        :visible.sync="dialogVisibleForm"
                        width="500px"
                        :before-close="handleCloseForm"
                >
                    <el-input
                            placeholder="请输入"
                            v-model="formkeyword"
                            @input="searchForm"
                            clearable>
                    </el-input>
                    <el-table
                            v-if="dialogVisibleForm"
                            ref="singleTable2"
                            :data="forms"
                            height="300"
                            @selection-change="handleCurrentChange"
                            style="width: 100%">
                        <el-table-column
                                type="selection"
                                width="60">
                        </el-table-column>
                        <el-table-column
                                property="title"
                                label="名称"
                        >
                        </el-table-column>
                    </el-table>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="handleCloseForm">取 消</el-button>
                        <el-button type="primary" @click="saveForm">确 定</el-button>
                    </span>
                </el-dialog>

                <el-dialog
                        title="选择周"
                        :visible.sync="dialogVisibleWeek"
                        width="500px"
                        :before-close="handleCloseWeek"
                >
                    <div class="text-center">
                        <el-tag
                                style="margin-right: 5px;cursor: pointer"
                                v-for="item in weeks"
                                size="small"
                                :key="item.id"
                                :type="item.type"
                                effect="dark"
                                @click="handleWeek(item)"
                        >
                            {{ item.title }}
                        </el-tag>
                    </div>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisibleWeek = false">取 消</el-button>
                        <el-button type="primary" @click="saveWeek">确 定</el-button>
                    </span>
                </el-dialog>
                <el-dialog
                        title="时间段选择"
                        :visible.sync="dialogVisibleTime"
                        width="700px"
                        :before-close="handleCloseTime"
                >
                    <div style="padding: 5px 0">
                        <el-tabs v-model="activeTabName">
                            <el-tab-pane label="逐个添加" name="first"></el-tab-pane>
                            <el-tab-pane label="批量添加" name="second"></el-tab-pane>
                        </el-tabs>
                    </div>
                    <div style="padding: 5px 0">
                        选择时段：
                        <span v-if="activeTabName === 'first'">
                            <el-time-picker style="width:130px" v-model="stime" format="HH:mm" value-format="HH:mm" size="small" key="first01" placeholder="请选择时间"></el-time-picker>
                            至
                            <el-select style="width:80px" v-model="stype" placeholder="请选择" size="small">
                                <el-option label="今日" :value="0"></el-option>
                                <el-option label="其他" :value="1"></el-option>
                            </el-select>
                            <el-input v-if="stype == 1" @input="changeSday" type="number" v-model="sday" size="small" style="width: 70px;" placeholder="天数"></el-input> 天后
                            <el-time-picker style="width:130px" v-model="etime" format="HH:mm" value-format="HH:mm" size="small"  key="first02" placeholder="请选择时间"></el-time-picker>
                            <el-button @click="addTime" size="small">添加</el-button>
                        </span>
                        <span v-if="activeTabName === 'second'">
                            <el-time-picker
                                    style="width:290px"
                                    is-range
                                    v-model="setime"
                                    key="second01"
                                    format="HH:mm"
                                    value-format="HH:mm"
                                    size="small"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    placeholder="选择时间范围"
                            ></el-time-picker>
                            每隔
                            <el-input type="number" v-model="snums" size="small" style="width: 70px;" placeholder="天数"></el-input> 小时执行一次
                            <el-button @click="addBatchTime" size="small">添加</el-button>
                        </span>

                    </div>
                    <div style="padding: 5px 0">
                        已选择时间段：
                        <el-tag
                                style="margin-right: 5px;margin-bottom: 5px"
                                size="small"
                                :key="index"
                                v-for="(item,index) in selTimes"
                                closable
                                @close="handleCloseTimes(item)">
                            {{item.stime}} ~ <span v-if="item.stype == 1">{{item.sday}}天后</span>{{item.etime}}
                        </el-tag>
                    </div>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisibleTime = false">取 消</el-button>
                        <el-button type="primary" @click="saveTime">确 定</el-button>
                    </span>
                </el-dialog>

            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var ads = {:json_encode($address)};
    var frs = {:json_encode($patrolForm)};
    var us = {:json_encode($user)};
    var cateList = {:json_encode($cateList)};
    var mode = {$mode};
    {empty name="info"}
    var info = null;
    {else /}
        var info = {:json_encode($info)};
        {/empty}

            new Vue({
                el: '#vue-plan',
                data: function() {
                    return {
                        title: '',
                        dialogVisible: false,
                        step: 0,
                        date: '',
                        tableData: [],
                        selAddrForms: [], // 选择的地址表单
                        addrs: ads,
                        selAddrs:[], // 选择地址
                        dialogVisibleAddr: false,
                        addrkeyword: '',
                        forms: frs,
                        selForm: [],
                        formkeyword: '',
                        dialogVisibleForm: false,
                        users: us, // 人员列表
                        userIds:[], // 选择的人员
                        dateTypes: [
                            {id: 1,title: '天'},
                            {id: 2,title: '周'},
                            {id: 4,title: '月'},
                            {id: 3,title: '自定义'},
                        ],
                        dateType: 1,
                        dateFrom: '', // 自定义类型从哪天开始
                        datePlay: 1,
                        datePause: 1,
                        dateWeeks: [], // 已选择的周
                        dateTimes: [], // 已添加的时间段
                        weeks: [
                            {id:1,title:'周一',type: 'info'},
                            {id:2,title:'周二',type: 'info'},
                            {id:3,title:'周三',type: 'info'},
                            {id:4,title:'周四',type: 'info'},
                            {id:5,title:'周五',type: 'info'},
                            {id:6,title:'周六',type: 'info'},
                            {id:0,title:'周日',type: 'info'},
                        ],
                        selWeeks: [],
                        dialogVisibleWeek: false,
                        dialogVisibleTime: false,
                        stime: '',
                        etime: '',
                        stype: 0,
                        sday: 1,
                        selTimes: [], // 弹框已选的时间段
                        tasks: { // 任务
                            days: [],
                            list: [],
                        },
                        activeTabName: 'first',
                        setime: '',
                        snums: 1,
                        inOrder: 0,
                        lines: [],
                        cateList:cateList,
                        cate:[],
                        frs:frs
                    }
                },
                watch: {

                    cate: function (newVal, oldVal) {

                        if(parseInt('{$mode}')==4){

                            var that = this;
                            $.post('{:url("PatrolForm/getByCate")}',{id:newVal},function (res) {
                                that.frs = res.data;

                            })
                       }

                    },
                    addrIds() { // 以保存的地址id
                        console.log('tableData',this.tableData);
                        let lines = [];
                        if(this.tableData.length >= 2){
                            for (let i in this.tableData){
                                if(i < this.tableData.length - 1){
                                    lines.push({
                                        s: this.tableData[i].addrId,
                                        st: this.tableData[i].addrTitle,
                                        e: this.tableData[Number(i)+1].addrId,
                                        et: this.tableData[Number(i)+1].addrTitle,
                                        kd: 0,
                                        fd: 0,
                                    })
                                }
                            }
                        }

                        this.lines = JSON.parse(JSON.stringify(lines));
                        console.log('lines',this.lines);
                    },
                },
                computed: {
                    addrIds() { // 以保存的地址id
                        let ids = [];
                        this.tableData.forEach((item) => {
                            ids.push(item.addrId);
                        });
                        return ids;
                    },
                },
                created(){
                    if(info){
                        this.title = info.title;
                        this.date = [info.start_time,info.end_time];
                        this.cate = info.cate_id;
                        this.tableData = info.content.addrForms;
                        this.userIds = info.content.userIds;
                        this.dateType = info.content.dateType;
                        this.dateForm = info.content.dateForm;
                        this.datePlay = info.content.datePlay;
                        this.datePause = info.content.datePause;
                        this.dateWeeks = info.content.dateWeeks;
                        this.dateTimes = info.content.dateTimes;
                        this.datePause = info.content.datePause;
                        this.datePause = info.content.datePause;
                        this.lines = info.lines;
                        this.inOrder = info.in_order;
                    }
                },
                methods: {
                    next() {
                        if(this.step == 0){ // 检查必填项
                            if(!this.title){
                                this.$message.error('请输入任务名称');
                                return false;
                            }
                            if(!this.date){
                                this.$message.error('请选择任务时间');
                                return false;
                            }
                            if(this.tableData.length == 0){
                                this.$message.error('请选择任务地点');
                                return false;
                            }
                            let ff = false;
                            this.tableData.forEach((item) => {
                                if(item.forms.length == 0){
                                    ff = true;
                                }
                            });
                            if(ff){
                                this.$message.error('任务地点未配置检查内容');
                                return false;
                            }
                        } else if(this.step == 1){
                            if(this.userIds.length <= 0){
                                this.$message.error('未设置人员');
                                return false;
                            }
                            if(this.dateType == 2 && this.dateWeeks.length <= 0){ // 周
                                this.$message.error('未选择周');
                                return false;
                            }
                            if(this.dateTimes.length <= 0){
                                this.$message.error('未选择时间段');
                                return false;
                            }
                            if(this.dateType == 3){ // 自定义
                                if(!this.dateFrom){
                                    this.$message.error('未选择自定义开始日期');
                                    return false;
                                }
                                if(this.datePlay <= 0){
                                    this.$message.error('任务天数必须大于0');
                                    return false;
                                }
                                if(this.datePause < 0){
                                    this.$message.error('暂停天数必须大于等于0');
                                    return false;
                                }
                            }
                            // 重新生成任务
                            this.createClass();
                        }
                        if (this.step++ > 2) this.step = 0;
                    },
                    pre() {
                        if (this.step-- < 0) this.step = 2;
                    },
                    handleSelectionChange(val){
                        this.selAddrForms = val;
                        console.log('selAddrForms',this.selAddrForms);
                    },
                    handleClose(){
                        this.dialogVisibleAddr = false;
                    },
                    handleSelectionChangeAddr(val){
                        this.selAddrs = val;
                    },
                    selectAddr(){
                        this.dialogVisibleAddr = true;
                        this.addrkeyword = '';
                        this.addrs = ads.filter((item) => {
                            return !this.addrIds.includes(item.id);
                        });
                        this.selAddrs = [];
                    },
                    sortAddrs(){
                        let ll = JSON.parse(JSON.stringify(this.tableData));
                        ll.sort((a, b) => {
                            return Number(a.sorts) > Number(b.sorts) ? 1 : -1;
                        });
                        console.log('ll',ll);
                        this.tableData = [];
                        this.$nextTick(() => {
                            this.tableData = JSON.parse(JSON.stringify(ll));
                        });
                    },
                    searchAddr(){
                        this.addrs= [];
                        this.$nextTick(() => {
                            if(this.addrkeyword){
                                this.addrs = ads.filter((item) => {
                                    return item.title.indexOf(this.addrkeyword) !== -1;
                                });
                            }else{
                                this.addrs = ads;
                            }
                        });
                    },
                    saveAddr(){
                        const tbs = this.tableData;
                        this.selAddrs.forEach((item) => {
                            if(!this.addrIds.includes(item.id)){
                                tbs.push({
                                    'addrId': item.id,
                                    'addrTitle': item.title,
                                    'forms': [],
                                    'sorts': 0
                                });
                            }
                        });
                        this.dialogVisibleAddr = false;
                        this.$nextTick(() => {
                            this.tableData = tbs;
                        });
                    },
                    moveUp(idx,obj){
                        if(idx > 0){
                            let old = JSON.parse(JSON.stringify(this.tableData[idx]));
                            let up = JSON.parse(JSON.stringify(this.tableData[idx - 1]));
                            let tbs = this.tableData;
                            this.tableData = [];
                            this.$nextTick(() => {
                                tbs[idx] = up;
                                tbs[idx - 1] = old;
                                this.tableData = tbs;
                            })
                        }
                    },
                    moveDown(idx,obj){ // 下移
                        let length = this.tableData.length;
                        if(idx < length - 1){
                            let old = JSON.parse(JSON.stringify(this.tableData[idx]));
                            let up = JSON.parse(JSON.stringify(this.tableData[idx + 1]));
                            let tbs = this.tableData;
                            this.tableData = [];
                            this.$nextTick(() => {
                                tbs[idx] = up;
                                tbs[idx + 1] = old;
                                this.tableData = tbs;
                            })
                        }
                    },
                    delAddrs(){ // 移除
                        let sids = [];
                        this.selAddrForms.forEach((item) => {
                            sids.push(item.addrId);
                        });
                        if(sids.length == 0){
                            this.$message.error('未选择地点');
                            return false;
                        }
                        let tbs = this.tableData;
                        this.tableData = [];
                        this.$nextTick(() => {
                            this.tableData = tbs.filter((item) => {
                                return !sids.includes(item.addrId);
                            });
                            this.selAddrForms = [];
                        });
                    },
                    handleCurrentChange(val){ // 选中检查内容
                        this.selForm = val;
                    },
                    handleCloseForm(){
                        this.dialogVisibleForm = false;
                    },
                    searchForm(){
                        this.forms= [];
                        this.$nextTick(() => {
                            if(this.formkeyword){
                                this.forms = this.frs.filter((item) => {
                                    return item.title.indexOf(this.formkeyword) !== -1;
                                });
                            }else{
                                this.forms = this.frs;
                            }
                        });
                    },
                    saveForm(){
                        const tbs = this.tableData;
                        this.tableData = [];

                        let sids = [];
                        this.selAddrForms.forEach((item) => {
                            sids.push(item.addrId);
                        });

                        tbs.forEach((item) => {
                            if(sids.includes(item.addrId)){
                                // item.formId = this.selForm?this.selForm.id:0;
                                // item.formTitle = this.selForm?this.selForm.title:'';
                                const ffs = [];
                                this.selForm.forEach((fitem) => {
                                    ffs.push({
                                        id: fitem.id,
                                        title: fitem.title
                                    });
                                });
                                item.forms = JSON.parse(JSON.stringify(ffs));
                            }
                        });

                        this.dialogVisibleForm = false;
                        this.$nextTick(() => {
                            this.tableData = tbs;
                            this.selAddrForms = [];
                        });
                    },
                    selectForm(){
                        let sids = [];
                        this.selAddrForms.forEach((item) => {
                            sids.push(item.addrId);
                        });
                        if(sids.length == 0){
                            this.$message.error('未选择地点');
                            return false;
                        }
                        console.log('ss',this.selAddrForms);
                        this.dialogVisibleForm = true;
                        this.forms = this.frs;
                        this.selForm = null;
                    },
                    handleCloseWeek(){
                        this.dialogVisibleWeek = false;
                    },
                    saveWeek(){
                        let ll = [];
                        this.weeks.forEach((item) => {
                            if(this.selWeeks.includes(item.id)){
                                ll.push({
                                    id: item.id,
                                    title: item.title,
                                    type: 'primary'
                                })
                            }
                        });
                        this.dateWeeks = ll;
                        this.dialogVisibleWeek = false;
                    },
                    handleWeek(obj){
                        console.log(obj);
                        if(this.selWeeks.includes(obj.id)){
                            this.selWeeks = this.selWeeks.filter((item) => {
                                return item !== obj.id;
                            });
                        }else{
                            this.selWeeks.push(obj.id);
                        }
                        this.weeks.forEach((item) => {
                            if(this.selWeeks.includes(item.id)){
                                item.type = 'primary';
                            }else{
                                item.type = 'info';
                            }
                        });
                    },
                    selectWeek(){
                        this.selWeeks = [];
                        this.dateWeeks.forEach((item) => {
                            this.selWeeks.push(item.id);
                        });
                        this.weeks.forEach((item) => {
                            if(this.selWeeks.includes(item.id)){
                                item.type = 'primary';
                            }else{
                                item.type = 'info';
                            }
                        });
                        this.dialogVisibleWeek = true;
                    },
                    handleCloseTime(){
                        this.dialogVisibleTime = false;
                    },
                    addTime(){
                        if(!this.stime || !this.etime){
                            this.$message.error('请选择时间段');
                            return false;
                        }
                        if(this.stype == 0 && this.stime >= this.etime){
                            this.$message.error('时间段错误');
                            return false;
                        }
                        if(this.stype == 1 && this.sday < 1){
                            this.$message.error('天数必须大于0');
                            return false;
                        }
                        // 检查时间段是否重复
                        let ff = false;
                        this.selTimes.forEach((item) => {
                            if(item.stype == this.stype &&item.sday == this.sday && item.stime == this.stime && item.etime == this.etime){
                                ff = true;
                            }
                        });
                        if(ff){
                            this.$message.error('该时间段已存在');
                            return false;
                        }
                        this.selTimes.push({
                            stime: this.stime,
                            etime: this.etime,
                            stype: this.stype,
                            sday: this.sday
                        })
                    },
                    addBatchTime(){
                        if(!this.setime || this.setime.length !== 2){
                            this.$message.error('请选择时间段');
                            return false;
                        }
                        if(this.snums <= 0){
                            this.$message.error('请输入间隔小时数');
                            return false;
                        }

                        // let min = 0;
                        // let max = 23*50 + 59;
                        let st = this.timeToNum(this.setime[0]);
                        let et = this.timeToNum(this.setime[1]);
                        let times = [];
                        let start = this.timeToNum(this.setime[0]);
                        let end = this.timeToNum(this.setime[0]);
                        let i = 1;
                        while (true){
                            end = this.timeToNum(this.setime[0]) + 60*this.snums*i;
                            let jg = et - start;
                            if(end > et && jg < 10){
                                break;
                            }else if(end > et && jg > 10){
                                end = et;
                            }

                            this.stime = this.numToTime(start);
                            this.etime = this.numToTime(end);
                            this.stype = 0;
                            this.sday = 0;

                            // 检查时间段是否重复
                            let ff = false;
                            this.selTimes.forEach((item) => {
                                if(item.stype == this.stype &&item.sday == this.sday && item.stime == this.stime && item.etime == this.etime){
                                    ff = true;
                                }
                            });
                            if(ff){
                                this.$message.error('该时间段已存在');
                                return false;
                            }
                            this.selTimes.push({
                                stime: this.stime,
                                etime: this.etime,
                                stype: this.stype,
                                sday: this.sday
                            });

                            start = this.timeToNum(this.setime[0]) + 60*this.snums*i;
                            i++;
                        }

                        console.log('this.selTimes',this.selTimes);

                    },
                    timeToNum(time){ // time格式12:30
                        let ts = time.split(':');
                        if(ts.length !== 2){
                            return 0;
                        }
                        return Number(ts[0])*60 + Number(ts[1]);
                    },
                    numToTime(num){ // 数字转时间
                        let h = parseInt(num/60);
                        let m = num - h*60;
                        let str = '';
                        if(h < 10){
                            str += '0' + h + ':';
                        }else{
                            str += h + ':';
                        }
                        if(m < 10){
                            str += '0' + m;
                        }else{
                            str += m;
                        }
                        return str;
                    },
                    saveTime(){
                        this.dateTimes = JSON.parse(JSON.stringify(this.selTimes));
                        this.handleCloseTime();
                    },
                    handleCloseTimes(obj){
                        this.selTimes = this.selTimes.filter((item) => {
                            return item.stime != obj.stime || item.etime != obj.etime || item.stype != obj.stype || item.sday != obj.sday;
                        })
                    },
                    selectTime(){
                        this.dialogVisibleTime = true;
                        this.selTimes = JSON.parse(JSON.stringify(this.dateTimes));
                        this.stime = '';
                        this.etime = '';
                        this.stype = 0;
                        this.sday = 1;
                    },
                    changeSday(){
                        if (this.sday) {
                            // 限制整数
                            this.sday = this.sday.replace(/[^\d]/g, '');
                        }
                    },
                    createClass(){
                        if(this.userIds.length <= 0){
                            this.$message.error('未设置人员');
                            return false;
                        }
                        if(this.dateType == 2 && this.dateWeeks.length <= 0){ // 周
                            this.$message.error('未选择周');
                            return false;
                        }
                        if(this.dateTimes.length <= 0){
                            this.$message.error('未选择时间段');
                            return false;
                        }
                        if(this.dateType == 3){ // 自定义
                            if(!this.dateFrom){
                                this.$message.error('未选择自定义开始日期');
                                return false;
                            }
                            if(this.datePlay <= 0){
                                this.$message.error('任务天数必须大于0');
                                return false;
                            }
                            if(this.datePause < 0){
                                this.$message.error('暂停天数必须大于等于0');
                                return false;
                            }
                        }
                        let days = this.formatDays();
                        this.formatTasks(days);
                    },
                    formatTasks(days){
                        this.tasks = {
                            days: days,
                            list: [],
                        };
                        let list = [];
                        this.dateTimes.forEach((item) => {
                            let ts = [];
                            days.forEach((item2) => {
                                ts.push({
                                    day: item2,
                                    userIds: this.userIds,
                                    userNames: this.getUserNames(),
                                });
                            });
                            list.push({
                                time: item,
                                list: ts,
                            })
                        });
                        this.tasks = {
                            days: days,
                            list: list,
                        };
                        console.log('tasks',this.tasks);
                    },
                    delDay(day){ // 删除列
                        let ts = JSON.parse(JSON.stringify(this.tasks));
                        this.tasks = null;
                        let days = ts.days.filter((item) => {
                            return item != day;
                        });
                        this.formatTasks(days);
                    },
                    delTimes(obj){ // 删除行
                        let days = JSON.parse(JSON.stringify(this.tasks.days));
                        this.tasks = null;
                        this.dateTimes = this.dateTimes.filter((item) => {
                            return item.stime != obj.stime || item.etime != obj.etime || item.stype != obj.stype || item.sday != obj.sday;
                        });
                        this.formatTasks(days);
                    },
                    saveSubmit(){  // 表单提交
                        if(this.tasks.days.length <= 0||this.tasks.list.length <= 0){
                            this.$message.error('未设置任务');
                            return false;
                        }
                        let content = {
                            addrForms: this.tableData,
                            userIds: this.userIds,
                            dateType: this.dateType,
                            dateFrom: this.dateType == 3?this.dateFrom:'',
                            datePlay: this.dateType == 3?this.datePlay:0,
                            datePause: this.dateType == 3?this.datePause:0,
                            dateWeeks: this.dateType == 2?this.dateWeeks:[],
                            dateTimes: this.dateTimes,
                            tasks: this.tasks,
                        };
                        let json = {
                            title: this.title,
                            start_time: this.date[0],
                            end_time: this.date[1],
                            content: JSON.stringify(content),
                            mode: mode,
                            cate_id:this.cate.join(','),
                            in_order: this.inOrder,
                            lines: this.lines.length > 0?JSON.stringify(this.lines):''
                        };
                        let that = this;
                        $('#saveSubmit').attr("disabled", true).html('保 存 中');
                        $.ajax({
                            url: "{:url('PatrolPlan/add')}",
                            type: 'POST',
                            data: json,
                            success: function(ret){
                                if(ret.code == 1){
                                    that.$message.success('操作成功');
                                    parent.layer.closeAll();

                                    window.location.href = "{:url('index',['mode'=>$mode])}";
                                }else{
                                    that.$message.error(ret.msg);
                                }
                                $('#saveSubmit').attr("disabled", false).html('保 存');
                            },
                            error: function (){
                                that.$message.error('请求失败');
                                $('#saveSubmit').attr("disabled", false).html('保 存');
                            }
                        });
                    },
                    getUserNames(){
                        let ns = [];
                        this.userIds.forEach((item) => {
                            this.users.forEach((item2) => {
                                if(item2.id == item){
                                    ns.push(item2.title);
                                }
                            });
                        });
                        return ns.join(',');
                    },
                    formatDays(){ // 格式化任务日期
                        let days = this.getDateAll(this.date[0],this.date[1]);
                        let nday = [];
                        let ws = [];
                        this.dateWeeks.forEach((item) => {
                            ws.push(item.id);
                        });
                        let i = 0;
                        let j = 0;
                        if(this.dateType==4){
                           days = this.dateCutByMonth(this.date[0],this.date[1]);
                        }
                        days.forEach((item) => {
                            if(this.dateType == 1){ // 日
                                nday.push(item);
                            }else if(this.dateType == 2){ // 周
                                let ww = this.getWeekByDay(item);
                                if(ws.includes(ww)){
                                    nday.push(item);
                                }
                            }else if(this.dateType == 3){ // 自定义
                                if(this.dateFrom <= item){
                                    if(i + j < this.datePlay){
                                        nday.push(item);
                                        i++;
                                    }else if((i + j) >= this.datePlay && (i+j) < this.datePause){
                                        j++;
                                    }else{
                                        i = 0;
                                        j = 0;
                                    }
                                }
                            }else if(this.dateType == 4){ // 月
                               nday.push(item);
                        }
                        });
                        return nday;
                    },
                    changePlay(){
                        if (this.datePlay) {
                            // 限制整数
                            this.datePlay = this.datePlay.replace(/[^\d]/g, '');
                        }
                    },
                    changePause(){
                        if (this.datePause) {
                            // 限制整数
                            this.datePause = this.datePause.replace(/[^\d]/g, '');
                        }
                    },
                    getDateAll(starDay, endDay) { // 获取两个时间段的所有日期
                        var arr = [];
                        var dates = [];
                        // 设置两个日期UTC时间
                        var db = new Date(starDay);
                        var de = new Date(endDay);
                        // 获取两个日期GTM时间
                        var s = db.getTime() - 24 * 60 * 60 * 1000;
                        var d = de.getTime() - 24 * 60 * 60 * 1000;
                        // 获取到两个日期之间的每一天的毫秒数
                        for (var i = s; i <= d; ) {
                            i = i + 24 * 60 * 60 * 1000;
                            arr.push(parseInt(i));
                        }
                        // 获取每一天的时间  YY-MM-DD
                        for (var j in arr) {
                            var time = new Date(arr[j]);
                            var year = time.getFullYear(time);
                            var mouth =
                                time.getMonth() + 1 >= 10
                                    ? time.getMonth() + 1
                                    : "0" + (time.getMonth() + 1);
                            var day =
                                time.getDate() >= 10
                                    ? time.getDate()
                                    : "0" + time.getDate();
                            var YYMMDD = year + "-" + mouth + "-" + day;
                            dates.push(YYMMDD);
                        }
                        return dates;
                    },
                    getWeekByDay(dateString,t=0) { // 获取某天是周几
                        var dateArray = dateString.split("-");
                        date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
                        if(t == 1){
                            return "周" + "日一二三四五六".charAt(date.getDay());
                        }else{
                            return date.getDay();
                        }
                    },
                    dateCutByMonth(beginDate, endDate) {
                        //分割好的数组
                        var dateCutList = new Array();

                        var b_date = new Date(beginDate);
                        var e_date = new Date(endDate);
                        //获取各个的年份
                        var b_year = parseInt(b_date.getFullYear());
                        var e_year = parseInt(e_date.getFullYear());
                        //获取各个的月份
                        var b_month = parseInt(b_date.getMonth()) + 1;
                        var e_month = parseInt(e_date.getMonth()) + 1;

                        //获取日期之间想差的月数；
                        var month_list = this.monthList();

                        //按月份分割日期
                        if(month_list.length==1){
                            dateCutList.push(beginDate+'~'+endDate);

                        }else {
                            for (var i = 0; i < month_list.length; i++) {
                                //当前月开始日期：第一天
                                var i_b_date = new Date(month_list[i]);
                                i_b_date.setDate(1);
                                //当前月最后一天
                                var i_e_date = new Date(month_list[i]);
                                i_e_date.setMonth(i_e_date.getMonth() + 1);
                                i_e_date.setDate(1);
                                i_e_date.setDate(i_e_date.getDate() - 1);

                                //第一次循环：开始月份
                                if (i == 0) {
                                    var i_e_ymd = this.parseTime(i_e_date).split(" ")[0];
                                    dateCutList.push(beginDate+'~'+i_e_ymd);

                                    //除第一次和最后一次循环：中间月份
                                } else if (i != 0 && i != month_list.length - 1) {
                                    var i_b_ymd = this.parseTime(i_b_date).split(" ")[0];
                                    var i_e_ymd = this.parseTime(i_e_date).split(" ")[0];
                                    dateCutList.push(i_b_ymd+'~'+i_e_ymd);

                                    //   //最后一次循环：结束月份
                                } else if (i == month_list.length - 1) {
                                    var i_b_ymd = this.parseTime(i_b_date).split(" ")[0];
                                    dateCutList.push(i_b_ymd+'~'+endDate);

                                }
                            }
                         }

                        return dateCutList;
                    },
                    monthList() {

                        //相差的月份总数
                        var result = new Array();
                        var b_date = new Date(this.date[0]);
                        var e_date = new Date(this.date[1]);
                        //获取各个的年份
                        var b_year = parseInt(b_date.getFullYear());
                        var e_year = parseInt(e_date.getFullYear());
                        //获取各个的月份
                        var b_month = parseInt(b_date.getMonth()) + 1;
                        var e_month = parseInt(e_date.getMonth()) + 1;
                        var b = new Date(b_year, b_month - 1, 1);
                        var e = new Date(e_year, e_month - 1, 1);
                        while (b < e) {
                            result.push(b.getFullYear() + "-" + (b.getMonth() + 1));
                            b.setMonth(b.getMonth() + 1);
                        }
                        result.push(e_year + "-" + e_month);
                        return result;
                    },
                    parseTime(time, pattern) {
                        if (arguments.length === 0 || !time) {
                            return null
                        }
                        const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
                        let date
                        if (typeof time === 'object') {
                            date = time
                        } else {
                            if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
                                time = parseInt(time)
                            } else if (typeof time === 'string') {
                                time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm),'');
                            }
                            if ((typeof time === 'number') && (time.toString().length === 10)) {
                                time = time * 1000
                            }
                            date = new Date(time)
                        }
                        const formatObj = {
                            y: date.getFullYear(),
                            m: date.getMonth() + 1,
                            d: date.getDate(),
                            h: date.getHours(),
                            i: date.getMinutes(),
                            s: date.getSeconds(),
                            a: date.getDay()
                        }
                        const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
                            let value = formatObj[key]
                            // Note: getDay() returns 0 on Sunday
                            if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
                        if (result.length > 0 && value < 10) {
                            value = '0' + value
                        }
                        return value || 0
                    })
                        return time_str
                    }

                }
            })

</script>

{/block}