{extend name="common/common2" /}
{block name="main"}
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<!--{if condition="$isCalendar neq 1 && $type neq 1"}-->
<!--<div class="ibox-title">-->
<!--<h5>{$meta_title}</h5>-->
<!--<div class="ibox-tools">-->
<!--<a class="toback" href="{:url('index',['mode'=>$mode])}">-->
<!--返回上一页-->
<!--</a>-->
<!--</div>-->
<!--</div>-->
<!--{/if}-->
<div class="ibox-content">
<form method="post" action="{:url('add',['mode'=>$mode])}" class="form-horizontal">
<input type="hidden" name="id" value="{$info['id']|default='0'}">
<input type="hidden" name="type" value="{$type|default='0'}">
<input type="hidden" name="isCalendar" value="{$isCalendar|default='0'}">
<input type="hidden" name="patrol_mode" value="{$mode|default=''}">
<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" name="title" value="{$info.title|default=''}" placeholder="请输入任务名称">
</div>
</div>
<div id="vue-plan">
<div class="form-group" {if $mode==4} style="display: block" {else} style="display: none" {/if}>
<input type="hidden" name="cate_id" v-model="cate">
<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">
<input type="hidden" name="addrs" value="" id="addrForms">
<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="250"
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="130">-->
<!--<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>
<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="200"
@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
ref="singleTable2"
:data="forms"
height="200"
@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="dialogVisibleAddr = false">取 消</el-button>
<el-button type="primary" @click="saveForm">确 定</el-button>
</span>
</el-dialog>
</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;">
<input type="hidden" name="in_order" value="" id="inOrder">
<el-radio v-model="inOrder" :label="0">否</el-radio>
<el-radio v-model="inOrder" :label="1">是</el-radio>
</div>
</div>
<input type="hidden" name="lines" value="" id="addrFormsLines">
<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 class="form-group">
<label class="col-sm-2 control-label">检查人员<span class="text-danger">*</span></label>
<div class="col-sm-8">
{:widget_view('common/multiselect',['name'=>'user_ids','lists' =>$user, 'val' =>isset($info)?$info['task_user']:[]])}
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">开始时间<span class="text-danger">*</span></label>
<div class="col-sm-8">
<input class="form-control" id="date" readonly name="start_time" value="{$info.start_time|default=$start}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">结束时间<span class="text-danger">*</span></label>
<div class="col-sm-8">
<input class="form-control" id="date-one" readonly name="end_time" value="{$info.end_time|default=$end}">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<button class="btn btn-primary ajax-post" target-form="form-horizontal" data-layer_c="1" type="submit">确 定</button>
{if $type==1}
{if $isCalendar==1}
<a href="{:url('calendar',['mode'=>$mode])}" class="btn btn-default">取 消</a>
{else}
<button class="btn cancel-btn btn-default" type="button">取 消</button>
{/if}
{else}
<button class="btn cancel-btn btn-default" type="button">取 消</button>
<!--<a href="{:url('index',['mode'=>$mode])}" class="btn btn-default">取 消</a>-->
{/if}
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="/static/layDate-v5.0.9/laydate.js"></script>
<script>
var time =new Date();
//日期时间选择器
laydate.render({
elem: '#date',
type: 'datetime',
format:'yyyy-MM-dd HH:mm',
trigger: 'click' ,
theme:'#148d8f'
// value:dateFormat(),
});
laydate.render({
elem: '#date-one',
type: 'datetime',
trigger: 'click' ,
format:'yyyy-MM-dd HH:mm',
theme:'#148d8f'
// value:dateFormatH(),
});
//当前日期格式化
function dateFormat() {
var year=time.getFullYear();
var mouth=time.getMonth()+ 1;
if(mouth < 10){
var mouths='0'+mouth;
}else {
var mouths=mouth;
}
var day=time.getDate();
if(day < 10){
var days='0'+day;
}else {
var days=day;
}
var hour=time.getHours();
if(hour < 10){
var hours='0'+hour;
}else {
var hours=hour;
}
var minute=time.getMinutes();
if(minute < 10){
var minutes='0'+minute;
}else {
var minutes=minute;
}
var dateStr=year+'-'+mouths+'-'+days+' '+hours+':'+minutes;
return dateStr;
}
function dateFormatH() {
var year=time.getFullYear();
var mouth=time.getMonth()+ 1;
if(mouth < 10){
var mouths='0'+mouth;
}else {
var mouths=mouth;
}
var day=time.getDate();
if(day < 10){
var days='0'+day;
}else {
var days=day;
}
var hour=time.getHours();
if(hour < 10){
var hours='0'+hour;
}else {
var hours=hour;
}
var minute=time.getMinutes()+20;
var dateStr=year+'-'+mouths+'-'+days+' '+hours+':'+minute;
return dateStr;
}
var ads = {:json_encode($address)};
var frs = {:json_encode($patrolForm)};
var addrForms = {:json_encode($info['addrForms'])};
var cateList = {:json_encode($cateList)};
var lis = {:json_encode($info['lines'])};
console.log(addrForms);
var info = {:json_encode($info)};
new Vue({
el: '#vue-plan',
data: function() {
return {
title: '',
dialogVisible: false,
step: 0,
date: '',
tableData: addrForms,
selAddrForms: [], // 选择的地址表单
addrs: ads,
selAddrs:[], // 选择地址
dialogVisibleAddr: false,
addrkeyword: '',
forms: frs,
selForm: null,
formkeyword: '',
dialogVisibleForm: false,
lines: lis,
inOrder: {$info.in_order},
cateList:cateList,
cate:[],
frs:frs
}
},
watch: {
cate: function (newVal, oldVal) {
var that = this;
$.post('{:url("PatrolForm/getByCate")}',{id:newVal},function (res) {
that.frs = res.data;
})
},
nTableData(){
console.log('nTableData1111');
$('#addrForms').val(JSON.stringify(this.tableData));
},
nLines(){
$('#addrFormsLines').val(JSON.stringify(this.lines));
},
inOrder(){
$('#inOrder').val(this.inOrder);
},
addrIds() { // 以保存的地址id
console.log('tableData',this.tableData);
let lines1 = [];
if(this.tableData.length >= 2){
for (let i in this.tableData){
if(i < this.tableData.length - 1){
lines1.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(lines1));
console.log('lines2222',this.lines);
},
},
computed: {
addrIds() { // 以保存的地址id
console.log('111ssss');
let ids = [];
this.tableData.forEach((item) => {
ids.push(item.addrId);
});
return ids;
},
nTableData() { // 以保存的地址id
return JSON.parse(JSON.stringify(this.tableData));
},
nLines() { // 以保存的地址id
return JSON.parse(JSON.stringify(this.lines));
},
},
created(){
// this.tableData = addrForms;
this.cate = info.cate_id;
$('#addrForms').val(JSON.stringify(this.tableData));
$('#addrFormsLines').val(JSON.stringify(this.lines));
$('#inOrder').val(this.inOrder);
this.frsList();
},
methods: {
frsList: function () {
var that = this;
$.post('{:url("PatrolForm/getByCate")}',{id:that.cate},function (res) {
that.frs = res.data;
})
},
handleSelectionChange(val){
console.log(val);
this.selAddrForms = val;
},
handleClose(){
this.dialogVisibleAddr = false;
},
handleSelectionChangeAddr(val){
console.log(val);
this.selAddrs = val;
},
selectAddr(){
console.log('aaaaaaaaaaa');
this.dialogVisibleAddr = true;
this.addrkeyword = '';
this.addrs = ads.filter((item) => {
return !this.addrIds.includes(item.id);
});
this.selAddrs = [];
console.log('bbbbbbbbb',this.addrs);
},
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': []
});
}
});
this.dialogVisibleAddr = false;
this.$nextTick(() => {
this.tableData = tbs;
});
},
moveUp(idx,obj){
console.log(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){ // 下移
console.log(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 = [];
});
console.log(this.selAddrForms,sids,this.tableData);
},
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));
});
},
handleCurrentChange(val){ // 选中检查内容
console.log(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(){
console.log('1111');
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;
});
},
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 = this.frs;
this.selForm = null;
},
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}