{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="addGroup">添加检查内容</button>
<!-- <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="检查内容">
</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 class="col-sm-12">
<input type="hidden" name="group" value="" id="groupbox">
<table class="table table-bordered">
<thead>
<tr>
<th style="width: 25%">检查内容</th>
<th style="width: 25%">检查项</th>
<th style="width: 15%">关联业务</th>
<th style="width: 25%">业务项</th>
<th style="width: 10%" class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in groups" :key="index">
<td>
<textarea v-model="item.title" rows="1" class="form-control" style="height: 100%"></textarea>
</td>
<td>
<button type="button" :id="`formsbtn${index}`" :url="`{:url('QualityForm/selectforms',[],false,false)}/idx/${index}`" onclick="selectForms(this)" class="btn btn-sm btn-primary">选择表单项</button>
<div v-if="item.forms.length > 0">
<div v-for="(vo,idx) in item.forms" :key="idx" class="alert alert-success alert-dismissable" style="padding: 5px;margin-bottom: 5px;width: 90%;">
<button class="close" @click="delForms(index,vo.id)" type="button">×</button>
<span v-if="Number(vo.type) == 1">
[选择框]{{vo.title}}
</span>
<span v-if="Number(vo.type) == 0">
[输入框]{{vo.title}}
</span>
</div>
</div>
</td>
<td>
<select v-model="item.type" class="form-control" @change="changeType(index,item)">
<option value="0">不关联业务</option>
<option value="1">巡更</option>
<option value="2">巡视</option>
<option value="3">巡查</option>
<option value="4">巡检</option>
<option value="5">日常工作</option>
<option value="6">设备台账</option>
</select>
</td>
<td>
<button type="button" :id="`bussbtn${index}`" url="" onclick="selectBuss(this)" class="btn btn-sm btn-primary">选择关联项</button>
<div v-if="item.buss.length > 0">
<div v-for="(vo,idx) in item.buss" :key="idx" class="alert alert-success alert-dismissable" style="padding: 5px;margin-bottom: 5px;width: 90%;">
<button class="close" @click="delBuss(index,vo.id)" type="button">×</button>
{{vo.title}}
</div>
</div>
</td>
<td class="text-center">
<a href="javascript:;" @click="delGroup(index)" class="btn btn-danger btn-sm">删除</a>
</td>
</tr>
</tbody>
</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
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($patrolForm)};
var frs = [];
var us = {:json_encode($user)};
{empty name="info"}
var info = null;
{else /}
var info = {:json_encode($info)};
{/empty}
localStorage.removeItem("selectids");
var vm = 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: 5,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: [],
groups: []
}
},
watch: {
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);
},
allgroups(){
if(this.groups.length > 0){
$('#groupbox').val(JSON.stringify(this.groups));
}else{
$('#groupbox').val('');
}
}
},
computed: {
addrIds() { // 以保存的地址id
let ids = [];
this.tableData.forEach((item) => {
ids.push(item.addrId);
});
return ids;
},
allgroups() {
return JSON.parse(JSON.stringify(this.groups));
}
},
created(){
if(info){
this.title = info.title;
this.date = [info.start_time,info.end_time];
this.groups = 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;
// }
if(this.groups.length == 0){
this.$message.error('未配置检查内容');
return false;
}
let ff = false;
this.groups.forEach((item) => {
if(!item.title){
this.$message.error('未输入检查内容');
ff = true;
return false;
}
if(item.forms.length == 0){
this.$message.error('未选择检查项');
ff = true;
return false;
}
if(Number(item.type) > 0 && item.buss.length == 0){
this.$message.error('未选择关联项');
ff = true;
return false;
}
});
if(ff){
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;
},
addGroup(){
this.groups.push({
title: '',
forms: [],
type: 0,
buss: []
});
},
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 = 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:'';
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(idx,obj){
console.log(idx,obj,this.groups);
this.groups.forEach((item,index) => {
if(Number(idx) == Number(index)){
item.forms = obj;
console.log(idx,index);
}
});
let ids = [];
obj.forEach((item) => {
ids.push(item.id.toString());
});
if(ids.length > 0){
$('#formsbtn'+idx).attr('data-ids',JSON.stringify(ids));
}else{
$('#formsbtn'+idx).attr('data-ids','');
}
localStorage.removeItem("selectids");
},
selectBuss(idx,obj){
console.log(idx,obj,this.groups);
this.groups.forEach((item,index) => {
if(Number(idx) == Number(index)){
item.buss = obj;
console.log(idx,index,item);
}
});
let ids = [];
obj.forEach((item) => {
ids.push(item.id.toString());
});
if(ids.length > 0){
$('#bussbtn'+idx).attr('data-ids',JSON.stringify(ids));
}else{
$('#bussbtn'+idx).attr('data-ids','');
}
localStorage.removeItem("selectids");
},
selectFormOld(){
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 = frs;
this.selForm = null;
},
changeType(idx,obj){
let url = "{:url('QualityPlan/buslist',[],false,false)}/idx/"+idx+"/type/"+obj.type;
console.log(obj);
this.groups.forEach((item,index) => {
if(Number(idx) == Number(index)){
item.buss = [];
}
});
$('#bussbtn'+idx).attr('data-ids','');
$('#bussbtn'+idx).attr('url',url);
},
delGroup(idx){
let ggs = JSON.parse(JSON.stringify(this.groups));
let ng = [];
ggs.forEach((item,index) => {
if(Number(idx) != Number(index)){
ng.push(item);
}
});
this.groups = JSON.parse(JSON.stringify(ng));
},
delForms(idx,fidx){
console.log(idx,fidx);
let ggs = JSON.parse(JSON.stringify(this.groups));
let ng = [];
ggs.forEach((item,index) => {
if(Number(idx) == Number(index)){
let fggs = JSON.parse(JSON.stringify(item.forms));
let fng = [];
fggs.forEach((item2,index2) => {
if(Number(fidx) != Number(item2.id)){
fng.push(item2);
}
});
item.forms = JSON.parse(JSON.stringify(fng));
}
ng.push(item);
});
this.groups = JSON.parse(JSON.stringify(ng));
},
delBuss(idx,bidx){
console.log(idx,bidx);
let ggs = JSON.parse(JSON.stringify(this.groups));
let ng = [];
ggs.forEach((item,index) => {
if(Number(idx) == Number(index)){
let fggs = JSON.parse(JSON.stringify(item.buss));
let fng = [];
fggs.forEach((item2,index2) => {
if(Number(bidx) != Number(item2.id)){
fng.push(item2);
}
});
item.buss = JSON.parse(JSON.stringify(fng));
}
ng.push(item);
});
this.groups = JSON.parse(JSON.stringify(ng));
},
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.groups,
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),
// in_order: this.inOrder,
// lines: this.lines.length > 0?JSON.stringify(this.lines):''
};
let that = this;
$('#saveSubmit').attr("disabled", true).html('保 存 中');
$.ajax({
url: "{:url('QualityPlan/add')}",
type: 'POST',
data: json,
success: function(ret){
if(ret.code == 1){
that.$message.success('操作成功');
parent.layer.closeAll();
// 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;
if(this.dateType==4){
days = this.dateCutByMonth(this.date[0],this.date[1]);
}
if(this.dateType==5){
days = this.addWeeks(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 || this.dateType == 5){ // 月
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
},
addWeeks(start,end){
let dateArr = []
let startArr = start.split('-')
let endArr = end.split('-')
let db = new Date()
db.setUTCFullYear(startArr[0], startArr[1] - 1, startArr[2])
let de = new Date()
de.setUTCFullYear(endArr[0], endArr[1] - 1, endArr[2])
let unixDb = db.getTime()
let unixDe = de.getTime()
let stamp
const oneDay = 24 * 60 * 60 * 1000;
var i=0;
var s = start;
var e = end;
var wkNum = (unixDe-unixDb)/(7*24 * 60 * 60 * 1000);
var wkNum = Math.floor(wkNum);
console.log(wkNum);
console.log(121212);
for (stamp = unixDb; stamp <= unixDe;) {
let curDay = new Date(parseInt(stamp))
if(curDay.getDay()==0 && i<=wkNum){
dateArr.push(s+'~'+this.formatTime(curDay))
// dateArr.push(this.formatTime(curDay))
cc = curDay.getTime()+24 * 60 * 60 * 1000;
let c1 = new Date(parseInt(cc));
s=this.formatTime(c1);
i++;
} else{
if(i===wkNum){
i++;
dateArr.push(s+'~'+e)
}
}
stamp = stamp + oneDay
}
return dateArr
},
formatTime(time) {
let ymd = ''
let mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1))
let day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate())
ymd += time.getFullYear() + '-' // 获取年份。
ymd += mouth + '-' // 获取月份。
ymd += day // 获取日。
return ymd // 返回日期。
}
}
});
function selectBuss(_self) {
let ids = $(_self).attr('data-ids');
if(ids){
localStorage.setItem("selectids", ids);
}else{
localStorage.removeItem("selectids");
}
let url = $(_self).attr('url');
if(!url){
layer.msg('请选择关联业务');
return false;
}
layer_open(_self,0);
}
function selectForms(_self) {
let ids = $(_self).attr('data-ids');
if(ids){
localStorage.setItem("selectids", ids);
}else{
localStorage.removeItem("selectids");
}
layer_open(_self,0);
}
</script>
{/block}