oa/app/project/view/index/add.html

{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<form class="layui-form p-page">
	<h3 class="pb-3">新建项目</h3>
	<table class="layui-table layui-table-form">
		<tr>
			<td class="layui-td-gray">项目名称<font>*</font></td>
			<td colspan="3"><input type="text" name="name" lay-verify="required" lay-reqText="请输入项目名称" placeholder="请输入项目名称" class="layui-input" value=""></td>
			<td class="layui-td-gray">项目类别<font>*</font></td>
			<td>
				<select name="cate_id" lay-filter="cate" lay-verify="required" lay-reqText="请选择项目类别">
					<option value="">请选择</option>
					{volist name = ":get_base_data('ProjectCate')" id="vo"}
					<option value="{$vo.id}">{$vo.title}</option>
					{/volist}
				</select>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">项目经理<font>*</font></td>
			<td>
				<input type="text" name="director_name" placeholder="请选择项目经理(负责人)" readonly class="layui-input" value="" lay-verify="required" readonly lay-reqText="请选择项目经理(负责人)">
				<input type="hidden" name="director_uid" value="0">
				<input type="hidden" name="did" value="0">
			</td>
			<td class="layui-td-gray">归属部门<font>*</font></td>
			<td><input type="text" name="department" value="" autocomplete="off" readonly class="layui-input"></td>
			<td class="layui-td-gray">始止日期<span style="color: red">*</span></td>
			<td><input type="text" name="range_time" class="layui-input tool-time" data-range="到" readonly placeholder="开始 到 结束" lay-verify="required" lay-reqText="请选择计划完成周期"></td>
		</tr>
		<tr>
			<td class="layui-td-gray">项目成员<span style="color: red">*</span></td>
			<td colspan="5">
				<input type="text" name="team_admin_names"  placeholder="请选择项目成员" readonly class="layui-input picker-admin" data-type="2" value="" lay-verify="required" lay-reqText="请完善项目成员">
				<input type="hidden" name="team_admin_ids" class="layui-input" value="">
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">关联合同</td>
			<td colspan="5">
				<input type="text" class="layui-input picker-oa" data-types="contract" name="contract_name" placeholder="请选择需要关联的合同" readonly value="">		
				<input type="hidden" class="layui-input" name="contract_id" value="0">
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray">项目简介</td>
			<td colspan="5">
				<textarea name="content" class="layui-textarea"></textarea>
			</td>
		</tr>
		<tr>
			<td colspan="6" style="background-color:#FAFAFA;">
				<strong>项目阶段</strong><span style="color: red">*</span>
				<span class="layui-btn layui-btn-sm" id="stepAdd">+ 添加阶段</span>				
			</td>
		</tr>
		<tr>
			<td colspan="6">
				<table id="stepTable" class="layui-table layui-table-min" style="margin:0">
					<tr>
						<th width="60">序号</th>
						<th width="200">阶段名称</th>
						<th width="80">阶段负责人</th>
						<th width="180">阶段成员</th>
						<th width="162">阶段周期</th>
						<th>阶段说明</th>
						<th width="120">操作</th>
					</tr>
					{volist name = ":get_base_data('step')" id="vo" key="k"}
					<tr class="step-tr">
						<td class="step-key">第 <strong>{$k}</strong> 阶段</td>
						<td>
							<div class="layui-input-group">
								<input type="text" name="step_title[]" value="{$vo.title}" class="layui-input" lay-verify="required" lay-reqText="请输入阶段名称">
								<div class="layui-input-split layui-input-suffix picker-diy" style="cursor: pointer;"><i class="layui-icon layui-icon-search"></i></div>
							</div>							
						</td>
						<td>
							<input type="text" value="" class="layui-input layui-input-readonly picker-admin" lay-verify="required" lay-reqText="请选择阶段负责人" readonly>
							<input type="hidden" name="step_director_uid[]" value="0" readonly>
						</td>
						<td>
							<input type="text" value="" class="layui-input layui-input-readonly picker-admin" data-type="2">
							<input type="hidden" name="step_uids[]" value="">
						</td>
						<td><input type="text" name="step_cycle_time[]" value="" class="layui-input layui-input-readonly tool-time" data-range="到" lay-verify="required" lay-reqText="请选择阶段周期" readonly></td>
						<td><input type="text" name="step_remark[]" value="" class="layui-input"></td>
						<td>
							<input type="hidden" name="step_id[]" value="0" class="layui-input">
							<div class="layui-btn-group">
								<span class="layui-btn layui-btn-xs step-up">上移</span>
								<span class="layui-btn layui-btn-normal layui-btn-xs step-down">下移</span>
								<span class="layui-btn layui-btn-danger layui-btn-xs step-del" data-id="0">删除</span>
							</div>
						</td>
					</tr>
					{/volist}
				</table>
			</td>
		</tr>
	</table>
	<div class="pt-3">
		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">立即提交</button>
		<button type="reset" class="layui-btn layui-btn-primary">重置</button>
	</div>
</form>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
	var moduleInit = ['tool','oaPicker'];

	function gouguInit() {
		var form = layui.form, tool = layui.tool,oaPicker = layui.oaPicker;
		//选择项目经理
		$('body').on('click','[name="director_name"]',function () {
			var ids=$('[name="director_uid"]').val(),names=$('[name="director_name"]').val();
			oaPicker.employeeInit({
				ids:ids,
				names:names,
				type:1,
				callback:function(data){
					let select_id=[],select_name=[],select_did=[],select_dname=[];
					for(var a=0; a<data.length;a++){
						select_id.push(data[a].id);
						select_name.push(data[a].name);
						select_did.push(data[a].did);
						select_dname.push(data[a].department);
					}
					$('[name="director_uid"]').val(select_id.join(','));
					$('[name="director_name"]').val(select_name.join(','));
					$('[name="did"]').val(select_did.join(','));
					$('[name="department"]').val(select_dname.join(','));
				}
			});
		});
		
		//添加阶段信息表格
		$('#stepAdd').on('click',function(){
			var html = '';
			html += '<tr class="step-tr">\
						<td class="step-key">第 <strong>0</strong> 阶段</td>\
						<td>\
							<div class="layui-input-group">\
								<input type="text" name="step_title[]" value="" class="layui-input" lay-verify="required" lay-reqText="请输入阶段名称">\
								<div class="layui-input-split layui-input-suffix picker-diy" style="cursor: pointer;"><i class="layui-icon layui-icon-search"></i></div>\
							</div>\
						</td>\
						<td>\
							<input type="text" value="" class="layui-input layui-input-readonly picker-admin" lay-verify="required" lay-reqText="请选择阶段负责人" readonly>\
							<input type="hidden" name="step_director_uid[]" value="0" readonly>\
						</td>\
						<td>\
							<input type="text" value="" class="layui-input layui-input-readonly picker-admin" data-type="2">\
							<input type="hidden" name="step_uids[]" value="">\
						</td>\
						<td><input type="text" name="step_cycle_time[]" value="" class="layui-input layui-input-readonly tool-time" data-range="到" lay-verify="required" lay-reqText="请选择服务周期" readonly></td>\
						<td><input type="text" name="step_remark[]" value="" class="layui-input"></td>\
						<td>\
							<input type="hidden" name="step_id[]" value="0" class="layui-input">\
							<div class="layui-btn-group">\
								<span class="layui-btn layui-btn-xs step-up">上移</span>\
								<span class="layui-btn layui-btn-normal layui-btn-xs step-down">下移</span>\
								<span class="layui-btn layui-btn-danger layui-btn-xs step-del" data-id="0">删除</span>\
							</div>\
						</td>\
					</tr>';
			$('#stepTable').append(html).find('.tr-none').remove();
			$('#stepTable').find('.step-key').each(function(index,item){
				$(this).html('第 <strong>'+(index+1)+'</strong> 阶段');
			})
			form.render();
		});
		$('#stepTable').on('click','.step-del',function(){
			if($('.step-tr').length<2){
				layer.msg('至少保留一个项目阶段');
				return false;
			}
			$(this).parents('.step-tr').remove();
			$('#stepTable').find('.step-key').each(function(index,item){
				$(this).html('第 <strong>'+(index+1)+'</strong> 阶段');
			})
		});
		
		$('#stepTable').on('click','.step-up',function(e){
			let obj = $(e.target).closest('tr');
            tr_pre($(obj[0]));
		})
		
		$('#stepTable').on('click','.step-down',function(e){
			var obj = $(e.target).closest('tr');
            tr_next($(obj[0]));
		})
		
		
		function tr_pre(o) {
			var pres = o.prevAll('tr.step-tr');
			if (pres.length > 0) {
				var tmp = o.clone(true);
				var oo = pres[0];
				o.remove();
				$(oo).before(tmp);
				$('#stepTable').find('.step-key').each(function(index,item){
					$(this).html('第 <strong>'+(index+1)+'</strong> 阶段');
				})
			}
			else{
				layer.msg('已经第一个了');
			}
		}

		function tr_next(o) {
			var nexts = o.nextAll('tr.step-tr');
			if (nexts.length > 0) {
				var tmp = o.clone(true);
				var oo = nexts[0];
				o.remove();
				$(oo).after(tmp);
				$('#stepTable').find('.step-key').each(function(index,item){
					$(this).html('第 <strong>'+(index+1)+'</strong> 阶段');
				})
			}else{
				layer.msg('已经最后一个了');
			}
		}
		
		$('body').on('click','.picker-diy',function () {
			let that = $(this),ids = [],titles=[],map = {};
			let callback = function(data){
				for ( var i = 0; i <data.length; i++){
					ids.push(data[i].id);
					titles.push(data[i].title);
				}
				that.prev().val(titles.join(','));
			}
			let opts={
					"title":"选择项目阶段",
					"url": "/project/api/get_project_step",
					"ids":"",
					"titles":"",
					"area": ['600px', '580px'],
					"cols":[{field: 'id',width: 80,title:'序号',align:'center'},{field:'title',title:'项目阶段'}]
		   }
			oaPicker.picker(opts,1,callback,map);//单选
		});

		
		//监听提交
		form.on('submit(webform)', function (data) {
			let callback = function (e) {
				layer.msg(e.msg);
				if (e.code == 0) {
					tool.sideClose(1000);
				}
			}
			let clickbtn = $(this);
			tool.post("/project/index/add", data.field, callback,clickbtn);
			return false;
		});
	}
</script>
{/block}
<!-- /脚本 -->