{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')}">
返回上一页
</a>
</div>
</div>
{/if}
<div class="ibox-content">
<form method="post" action="{:url('add')}" 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'}">
<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 class="form-group" id="vue-plan">
<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>
<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="检查内容"
>
</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"
highlight-current-row
height="200"
@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="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">
{: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"{if $type==1 && $isCalendar!=1} data-layer="1"{/if} type="submit">确 定</button>
{if $type==1}
{if $isCalendar==1}
<a href="{:url('calendar')}" class="btn btn-default">取 消</a>
{else}
<button class="btn cancel-btn btn-default" type="button">取 消</button>
{/if}
{else}
<a href="{:url('index')}" 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:'#6eb7ff'
// value:dateFormat(),
});
laydate.render({
elem: '#date-one',
type: 'datetime',
trigger: 'click' ,
format:'yyyy-MM-dd HH:mm',
theme:'#6eb7ff'
// 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($greenForm)};
var addrForms = {:json_encode($info['addrForms'])};
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,
}
},
watch: {
nTableData(){
console.log('nTableData1111');
$('#addrForms').val(JSON.stringify(this.tableData));
}
},
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));
},
},
created(){
this.tableData = addrForms;
},
methods: {
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,
'formId': 0,
'formTitle': '',
});
}
});
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);
});
});
console.log(this.selAddrForms,sids,this.tableData);
},
handleCurrentChange(val){ // 选中检查内容
console.log(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(){
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:'';
}
});
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;
},
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}