mingde-bd/application/admin/view/green_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')}">
                        返回上一页
                    </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">
                            <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>

                                <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="表单内容"
                                    >
                                    </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>

                    <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
                                        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"
                            highlight-current-row
                            height="300"
                            @current-change="handleCurrentChange"
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                label="序号"
                                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-time-picker style="width:130px" v-model="stime" format="HH:mm" value-format="HH:mm" size="small" 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" placeholder="请选择时间"></el-time-picker>
                        <el-button @click="addTime" size="small">添加</el-button>
                    </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($greenForm)};
    var us = {:json_encode($user)};
    {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: null,
                formkeyword: '',
                dialogVisibleForm: false,
                users: us, // 人员列表
                userIds:[], // 选择的人员
                dateTypes: [
                    {id: 1,title: '天'},
                    {id: 2,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: [],
                },
            }
        },
        watch: {

        },
        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.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;
            }
        },
        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.formId == 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;
            },
            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 = [];
            },
            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,
                            'formId': 0,
                            'formTitle': '',
                        });
                    }
                });
                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;
                    })
                }
                console.log(this.tableData);
            },
            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);
                    });
                });

                console.log(this.selAddrForms,sids,this.tableData);
            },
            handleCurrentChange(val){ // 选中检查内容
                this.selForm = val;
            },
            handleCloseForm(){
                this.dialogVisibleForm = false;
            },
            searchForm(){
                this.forms= [];
                this.$nextTick(() => {
                    if(this.formkeyword){
                        this.forms = frs.filter((item) => {
                            return item.title.indexOf(this.formkeyword) !== -1;
                        });
                    }else{
                        this.forms = 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:'';
                    }
                });

                this.dialogVisibleForm = false;
                this.$nextTick(() => {
                    this.tableData = tbs;
                });
            },
            selectForm(){
                let sids = [];
                this.selAddrForms.forEach((item) => {
                    sids.push(item.addrId);
                });
                if(sids.length == 0){
                    this.$message.error('未选择地点');
                    return false;
                }

                this.dialogVisibleForm = true;
                this.forms = 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
                })
            },
            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),
                };
                let that = this;
                $('#saveSubmit').attr("disabled", true).html('保 存 中');
                $.ajax({
                    url: "{:url('GreenPlan/add')}",
                    type: 'POST',
                    data: json,
                    success: function(ret){
                        if(ret.code == 1){
                            window.location.href = "{:url('index')}";
                        }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;
                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;
                            }
                        }
                    }
                });
                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();
                }
            }
        }
    })

</script>

{/block}