@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">
<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;
}
</style>
@endsection
@section('right')
<ul class="nav nav-tabs">
<li><a href="/admin/flow/sites/{{$siteId}}">流程</a></li>
<li class="active"><a>模板</a></li>
</ul>
<ul class="ul-content">
<li class="active">
<main id="main">
<button type="button" class="btn btn-success" onclick="utils.addMain()">新增步骤</button>
<button type="button" class="btn btn-info" onclick="utils.saveFlowTpl()">保存</button>
@foreach($tplStageList as $stage)
<div class="mainStep">
<h4 style="display: inline-block">建站步骤：<input type="text" class="form-control mainStepText"
name="step_title" value="{{$stage->title}}"
data-id="{{$stage->id}}"
style="width: 260px;display: inline-block">
</h4>
<a onclick="utils.addBig(this)">添加大流程</a>
<a onclick="utils.delMain(this)">删除步骤</a>
<div>
@foreach($stage->infoTplList as $info)
<table class="my-table">
<colgroup>
<col span="3" style="width: 20%">
<col style="width: 12%">
<col style="width: 10%">
<col style="width: 18%">
</colgroup>
<thead>
<tr>
<td>具体流程 <input type="hidden" value="{{$info->id}}" name="infoId"></td>
<td>备注</td>
<td>完成时间</td>
<td>对接人</td>
<td class="operateAdd">
<a href="javascript:;" onclick="utils.add(this)">添加</a>
<a href="javascript:" onclick="utils.delBig(this)">删除大流程</a>
</td>
</tr>
</thead>
<tbody class="connectedSortable">
@foreach($info->detail_list as $item)
<tr>
<td><input type="text" class="form-control" name="flow_name"
value="{{$item['flow_name']}}"></td>
<td><input type="text" class="form-control" name="flow_remark"
value="{{$item['flow_remark']}}"></td>
<td><input type="text" class="form-control my-date"
onclick="utils.bindDate(this)" name="flow_done_date"
value="{{$item['flow_done_date']}}"></td>
<td>
<select name="duty_man" class="my-select" multiple
data-container="body">
@foreach(\App\Http\Models\FlowInfoTpl::RoleScope as $roleId=>$roleName)
<option value="{{$roleId}}"
@if(is_array($item['duty_man']) && in_array($roleId,$item['duty_man'])) selected @endif>
{{$roleName}}
</option>
@endforeach
</select>
</td>
<td class="operateDel" onclick="utils.del(this)">删除</td>
</tr>
@endforeach
</tbody>
</table>
@endforeach
</div>
</div>
@endforeach
</main>
</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 src="{{asset('js/jquery-ui-1.10.4.min.js')}}"></script>
<script>
$(function () {
$('.my-select').selectpicker({
liveSearch: true
});
$("tbody").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
$(function () {
$(".my-date").trigger('click');
$('.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>\n' +
' <td><input type="text" class="form-control" name="flow_name"></td>\n' +
' <td><input type="text" class="form-control" name="flow_remark"></td>\n' +
' <td><input type="text" class="form-control my-date" name="flow_done_date" onclick="utils.bindDate(this)"></td>\n' +
' <td>\n' +
' <select name="duty_man" class="my-select" multiple data-container="body">\n' +
@foreach(\App\Http\Models\FlowInfoTpl::RoleScope as $roleId=>$roleName)
' <option value="{{$roleId}}">{{$roleName}}</option>' +
@endforeach
' </select>' +
' </td>\n' +
' <td class="operateDel" onclick="utils.del(this)">删除</td>\n' +
' </tr>';
$(_this).parent().parent().parent().next().append(str);
$(".my-date").trigger('click');
$('.my-select').selectpicker();
},
del: function (_this) {
var mergedTd = $(_this).parent().parent().find(".mergedTd")
var rowspan = mergedTd.attr('rowspan');
mergedTd.attr('rowspan', rowspan - 1);
$(_this).parent().remove();
},
addBig: function (_this) {
var str = '<table class="my-table">\n' +
' <colgroup>\n' +
' <col span="3" style="width: 20%">\n' +
' <col style="width: 12%">\n' +
' <col style="width: 10%">\n' +
' <col style="width: 18%">\n' +
' </colgroup>\n' +
' <thead>\n' +
' <tr>\n' +
' <td>具体流程 <input type="hidden" value="0" name="infoId"> </td>\n' +
' <td>备注</td>\n' +
'\n' +
' <td>完成时间</td>\n' +
' <td>对接人</td>\n' +
' <td class="operateAdd">\n' +
' <a href="javascript:;" onclick="utils.add(this)">添加</a>\n' +
' <a href="javascript:" onclick="utils.delBig(this)">删除大流程</a>\n' +
' </td>\n' +
' </tr>\n' +
' </thead>\n' +
' <tbody>\n' +
' <tr>\n' +
' <td><input type="text" class="form-control" name="flow_name"></td>\n' +
' <td><input type="text" class="form-control" name="flow_remark"></td>\n' +
' <td><input type="text" class="form-control my-date" name="flow_done_date" onclick="utils.bindDate(this)"></td>\n' +
' <td>\n' +
' <select name="duty_man" class="my-select" multiple data-container="body">\n' +
@foreach(\App\Http\Models\FlowInfoTpl::RoleScope as $roleId=>$roleName)
' <option value="{{$roleId}}">{{$roleName}}</option>' +
@endforeach
' </select>\n' +
' </td>\n' +
' <td class="operateDel" onclick="utils.del(this)">删除</td>\n' +
' </tr>\n' +
' </tbody>\n' +
' </table>';
$(_this).next().next().append(str);
$(".my-date").trigger('click');
$('.my-select').selectpicker();
},
delBig: function (_this) {
$(_this).parent().parent().parent().parent().remove()
},
delMain: function (_this) {
$(_this).parent().remove()
},
addMain: function () {
var str = ' <div class="mainStep">\n' +
' <h4 style="display: inline-block">建站步骤：<input type="text" class="form-control mainStepText"\n' +
' name="step_title" data-id="0"></h4>\n' +
' <a onclick="utils.addBig(this)">添加大流程</a>\n' +
' <a onclick="utils.delMain(this)">删除步骤</a>\n' +
' <div>\n' +
' <table class="my-table">\n' +
' <colgroup>\n' +
' <col span="3" style="width: 20%">\n' +
' <col style="width: 12%">\n' +
' <col style="width: 10%">\n' +
' <col style="width: 18%">\n' +
' </colgroup>\n' +
' <thead>\n' +
' <tr>\n' +
' <td>具体流程 <input type="hidden" value="0" name="infoId"> </td>\n' +
' <td>备注</td>\n' +
'\n' +
' <td>完成时间</td>\n' +
' <td>对接人</td>\n' +
' <td class="operateAdd">\n' +
' <a href="javascript:;" onclick="utils.add(this)">添加</a>\n' +
' <a href="javascript:" onclick="utils.delBig(this)">删除大流程</a>\n' +
' </td>\n' +
' </tr>\n' +
' </thead>\n' +
' <tbody>\n' +
' <tr>\n' +
' <td><input type="text" class="form-control" name="flow_name"></td>\n' +
' <td><input type="text" class="form-control" name="flow_remark"></td>\n' +
' <td><input type="text" class="form-control my-date" name="flow_done_date" onclick="utils.bindDate(this)"></td>\n' +
' <td>\n' +
' <select name="duty_man" class="my-select" multiple data-container="body">\n' +
@foreach(\App\Http\Models\FlowInfoTpl::RoleScope as $roleId=>$roleName)
'<option value="{{$roleId}}">{{$roleName}}</option>' +
@endforeach
' </select>\n' +
' </td>\n' +
' <td class="operateDel" onclick="utils.del(this)">删除</td>\n' +
' </tr>\n' +
' </tbody>\n' +
' </table>\n' +
'\n' +
' </div>\n' +
' </div>';
$("#main").append(str);
$(".my-date").trigger('click');
$('.my-select').selectpicker();
},
saveFlowTpl: function () {
var flowAll = [];
var errMsg = '';
$(".mainStep").each(function () {
var step_title_obj = $(this).find("[name=step_title]")
var step_title = step_title_obj.val();
var stepId = step_title_obj.data('id');
var stepData = {step_title: step_title, step_id: stepId, children: []};
if (!step_title) {
errMsg += '建站步骤不能为空<br>';
}
$(this).find("table").each(function () {
var flowData = {
info_id: $(this).find("[name=infoId]").val(),
children: []
};
$(this).find("tbody tr").each(function () {
var flow_name = $(this).find("[name=flow_name]").val();
var flow_remark = $(this).find("[name=flow_remark]").val();
var flow_done_date = $(this).find("[name=flow_done_date]").val();
var duty_man = $(this).find("[name=duty_man]").val();
if (!flow_name) {
errMsg += '具体流程不能为空<br>';
}
var temp = {
flow_name: flow_name,
flow_remark: flow_remark,
flow_done_date: flow_done_date,
duty_man: duty_man
};
flowData.children.push(temp);
});
stepData.children.push(flowData);
});
flowAll.push(stepData);
});
if (errMsg !== '') {
layer.alert(errMsg, {icon: 5});
return;
}
var ajaxConfig = {
url: '/admin/flow-tpl-save/sites/{{$siteId}}',
type: 'post',
data: {
dataList: flowAll
}
};
tips.ajax(ajaxConfig);
},
bindDate: function (that) {
var routeTime = {
type: 'date',
elem: that
};
laydate.render(routeTime);
},
};
</script>
@endsection