@extends('admin/site/side_layout')
@section('header_extend')
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
<link href="{{asset('js/plugins/jquery-pretty-radio-checkbox/css/jquery-labelauty.css')}}" rel="stylesheet">
<style>
.ul-content {
margin: 0;
padding: 0;
list-style-type: none;
}
.ul-content li {
padding: 20px 10px 10px;
display: none;
}
.ul-content .active {
display: block;
}
.my-table {
margin-top: 10px;
width: 100%;
}
.my-table tr {
border: 1px solid #f1f1f1;
}
.my-table td {
padding: 8px;
}
.operateAdd, .operateDel {
font-weight: 600;
cursor: pointer;
text-align: center;
}
.mainStep {
/*border: 1px solid #999;*/
padding: 12px;
margin-top: 20px;
}
.mainStepText {
display: inline-block;
width: 180px;
}
.my-select {
/*width: 60% !important;*/
}
.radio-label,
.radio-check {
display: inline-block;
position: relative;
}
.radio-label input[type="checkbox"] {
appearance: none; /*清楚默认样式*/
-webkit-appearance: none;
/* opacity: 0; */
outline: none;
position: absolute;
z-index: 2;
width: 6px;
height: 6px;
top: 10px;
left: 10px;
border-radius: 50%;
background: #b4b4b4;
}
.radio-label label {
display: inline-block;
min-width: 50px;
height: 24px;
line-height: 24px;
text-align: center;
padding-right: 10px;
border-radius: 5px;
padding-left: 25px;
color: #fff;
background-color: #c9c9c9;
}
.radio-label input[type="checkbox"]:checked {
opacity: 0;
}
.radio-label input[type="checkbox"]:checked + label {
color: #fff;
background-color: #3597db;
}
.radio-label input[type="checkbox"]:checked + label::after {
content: "";
position: absolute;
left: 12px;
top: 5px;
width: 5px;
height: 12px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: rotate(45deg);
}
</style>
@endsection
@section('right')
<ul class="ul-content">
<li class="active">
<form id="form">
<main id="main">
<button type="button" class="btn btn-success" onclick="utils.saveFlow()"
style="position: fixed;right: 50px;top:50px">保存
</button>
<div class="mainStep">
<div>
<table class="my-table">
<colgroup>
<col style="width: 5%">
<col style="width: 15%">
<col style="width: 25%">
<col style="width: 10%">
<col style="width: 15%">
<col style="width: 15%">
<col style="width: 15%">
</colgroup>
<thead>
<tr>
<td class="operateAdd">
<a href="javascript:;" onclick="utils.add(this)"> <i class="fa fa-plus"
aria-hidden="true"
style="font-size: 18px"></i></a>
</td>
<td>标题</td>
<td>内容</td>
<td>是否完成</td>
<td>安排时间</td>
<td>完成时间</td>
<td>人员</td>
</tr>
</thead>
<tbody>
@foreach($tasksList as $item)
<tr>
<td class="operateDel" onclick="utils.del(this)"><i class="fa fa-times"
aria-hidden="true"
style="font-size: 18px"></i>
</td>
<td>
<input type="text" class="form-control" name="title"
value="{{$item['title']??''}}">
</td>
<td>
<input type="text" class="form-control" name="data"
value="{{$item['data']??''}}">
</td>
<td>
<select class="form-control" id="fulfil" name="fulfil">
<option value="1" @if ($item['fulfil']==1) selected @endif>未完成
</option>
<option value="2" @if ($item['fulfil']==2) selected @endif>完成
</option>
</select>
</td>
<td>
<input type="text" class="form-control my-date"
onclick="utils.bindDate(this)" autocomplete="off"
name="initial_date" value="{{$item['initial_date']??''}}">
</td>
<td>
<input type="text" class="form-control my-date"
onclick="utils.bindDate(this)" autocomplete="off"
name="flow_except_date" value="{{$item['flow_except_date']?? $date}}">
</td>
<td>
<select name="personnel" id="personnel" class="my-select"
data-container="body" data-live-search="true">
<option value="0" selected>请选择人员</option>
@foreach($optimizationPersonnel as $role)
<option value="{{$role->id}}"
@if (!empty($item['personnel']) && $role->id==$item['personnel']) selected @endif>{{$role->nickname}}
</option>
@endforeach
</select>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</main>
</form>
</li>
</ul>
@endsection
@section('footer_extend')
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
<script src="{{asset('js/plugins/layDate-v5.0.9/laydate/laydate.js')}}"></script>
<script>
$(function () {
$(".my-date").trigger('click'); //触发laydate绑定
$('.my-select').selectpicker();
});
var utils = {
add: function (_this) {
var rowspan = $(_this).parent().next().attr('rowspan');
$(_this).parent().next().attr('rowspan', rowspan + 1);
var str =
'<tr>' +
'<td class="operateDel" onclick="utils.del(this)"><i class="fa fa-times" aria-hidden="true" style="font-size:18px"></i></td>' +
'<td>' +
'<input type="text" class="form-control" name="title">' +
'</td>' +
'<td>' +
'<input type="text" class="form-control" name="data">' +
'</td>' +
'<td>' +
'<select class="form-control" id="fulfil" name="fulfil">' +
'<option value="1" >未完成</option>' +
'<option value="2" >完成</option>' +
'</select>' +
'</td>' +
'<td>' +
'<input type="text" class="form-control my-date" name="initial_date" onclick="utils.bindDate(this)" autocomplete="off" value="{{$date}}">' +
'</td>' +
'<td>' +
'<input type="text" class="form-control my-date" name="flow_except_date" onclick="utils.bindDate(this)" autocomplete="off">' +
'</td>' +
'<td>' +
'<select name="personnel" id="personnel" class="my-select" data-container="body" data-live-search="true">' +
' <option value="0" selected>请选择人员</option>' +
' @foreach($optimizationPersonnel as $role)' +
' <option value="{{$role->id}}">{{$role->nickname}}</option>' +
' @endforeach' +
'</select>' +
'</td>' +
'</tr>';
$(_this).parent().parent().parent().next().prepend(str);
$(".my-date").trigger('click');
$('.my-select').selectpicker();
},
del: function (_this) {
$(_this).parent().remove();
},
saveFlow: function () {
var flowData = [];
var infoList = [];
$('input[name="info"]:checked').each(function () {
infoList.push($(this).val());
});
var list = infoList.toString();
$(".my-table").each(function () {
$(this).find("tbody tr").each(function () {
var title = $(this).find("[name=title]").val();
var data = $(this).find("[name=data]").val();
var flow_except_date = $(this).find("[name=flow_except_date]").val();
var initial_date = $(this).find("[name=initial_date]").val();
var fulfil = $(this).find("[name=fulfil]").val();
var personnel = $(this).find("[name=personnel]").val();
var temp = {
title: title,
data: data,
fulfil: fulfil,
flow_except_date: flow_except_date,
initial_date: initial_date,
personnel: personnel
}
;
flowData.push(temp);
});
});
var ajaxConfig = {
url: '/admin/work-task/save/siteId/{{$siteId}}/status/{{$siteStatus}}',
type: 'post',
data: {
infoList: list,
dataList: flowData
},
success: function () {
layer.msg('操作成功', {
icon: 1,
time: 1500 //2秒关闭（如果不配置，默认是3秒）
}, function () {
window.location.reload()
});
}
};
tips.ajax(ajaxConfig);
},
bindDate: function (that) {
var routeTime = {
type: 'date',
elem: that
};
laydate.render(routeTime);
}
};
</script>
@endsection