caiping/app/admin/view/project/cost_company/add.html

{extend name="common/base"/}
{block name="style"}
<style>
	.footer{
		width: 100%;
		height: 25px;
		text-align: center;
		margin-bottom: 0 !important;
		display: none;
	}

	.heading th {
		text-align: center;
	}

	.form td {
		text-align: center;
	}


	/* 日志 */
	.log_top {
		padding-left: 1vw;
	}

	.log_top span {
		margin: 0 0.5vw;
	}

	/* 1,1,1 */
	.log_commentary {
		color: rgb(0, 176, 80);
	}

	.log_company {
		color: rgb(255, 33, 0);
	}

	.log_content {
		width: fit-content;

		margin: 0.3vw 1.5vw 1vw 1.5vw;
		padding: 0.5vw 0vw;
		text-indent: 1.2em;
		line-height: 2.1vh;
		background-color: rgb(255, 255, 255);
		border-radius: 0.5vw;
		box-shadow: 0.19vw 0.16vw 0.4vw 0.03vw rgba(0, 0, 0, 0.13);
	}

	.log_content_color {
		/* background-color: rgb(250,250,250); */
	}

	.log_content_img img {

		/* width: 10%; */
		height: 150px;
		border-radius: 0.5vw;
		margin: 0.3vw 0;
		padding-right: 18px;
		padding-bottom: 7px;
		padding-left: 2px;
	}

	.log_item_top {
		height: 70%;
		overflow: scroll;
	}

	.log_item_top {
		height: 60vh;

	}

	.log_item_bottom {
		display: flex;
		/* height: 17vh; */
		/* border-top: 1px solid #eee; */
		margin: 0 1.5vw;
		/* background-color: rgb(250,250,250); */
	}

	.log_input input {
		width: 55vw;
		height: 10vh;
		border: #eee 1px solid;
	}

	.log_bottom_img {
		/* height: 5vh; */
	}

	.log_bottom_img img {
		height: 4vw;
		width: 6vw;
		border-radius: 0.5vw;
		margin: 0.5vw 0vw 0.5vw 0.3vw;
	}

	.log_bottom_left {
		width: 100%;
		margin-top: 1.5vh;
	}

	.log_bottom_right {
		width: 5%;
	}

	/* 上传图片 */
	.layui-upload-drag-self {
		background-color: #fbfdff;
		border: 1px dashed #c0ccda;
		border-radius: 6px;
		box-sizing: border-box;
		line-height: 4vw;
		vertical-align: top;
		display: inline-block;
		text-align: center;
		cursor: pointer;
		outline: 0;
		margin-right: 13px;
		float: left;
	}

	.layui-input-inlines-self {
		position: relative;
		margin-left: 90px;
		min-height: 36px;
		text-align: left;
	}

	.layui-upload-drag-self .layui-icon {
		font-size: 28px;
		color: #8c939d
	}

	.layui-upload-drag-self .img {
		position: relative;
		height: 148px;
		width: 148px;
	}

	.layui-upload-img {
		width: 148px;
		height: 148px;
		border-radius: 6px;
		margin-top: -3px;
		margin-left: -2px;
	}


	.handle {
		position: absolute;
		width: 148px;
		height: 100%;
		z-index: 100;
		border-radius: 6px;
		top: 0;
		background: rgba(59, 60, 61, 0.6);
		text-align: center;
	}

	.handle .icon-myself {
		z-index: 999;
		transition: all .3s;
		cursor: pointer;
		font-size: 25px;
		width: 25px;
		color: rgba(255, 255, 255, 0.91);
		margin: 0 4px;
	}

	.log_textarea {
		width: 89vw;
		height: 8vh;
		padding: 0.5vw;
		/* margin-right: 2vw; */
		margin: 1vw;
	}

	.log_button_img {
		width: 2vw;
	}

	.log_card {
		border: none !important;
	}

	/* 点击图片放大 */
	.content_img img {
		max-width: 100%;
		cursor: pointer;
	}

	.overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		justify-content: center;

		z-index: 1;
	}

	.overlay img {
		margin-top: 4%;
		max-width: 90%;
		max-height: 90%;
		object-fit: contain;
	}

	.p-4 {
		background-color: rgb(255, 255, 255);
	}


	/*表格*/
	#tabniubi {
		width: 100%;
		margin: 10px 0;
		background-color: #fff;
		color: #5f5f5f;

	}

	#tabniubi th {
		padding: 9px 15px;
		min-height: 20px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		/* font-size: 14px; */
		border-width: 1px;
		border-style: solid;
		border-color: #e2e2e2;
		font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
	}

	#tabniubi tr:first-child {
		padding: 0;
		min-height: 0;
		line-height: 0;
		border-width: 0;
		border-style: none;
		border-color: #fff;
		font-size: 0;
	}

	#tabniubi tr:first-child th {
		padding: 0;
		min-height: 0;
		line-height: 0;
		border-width: 0;
		border-style: none;
		border-color: #fff;
		font-size: 0;
	}

	.form-title {
		background-color: rgb(241, 241, 241);
		color: rgb(95, 95, 95);
		border-color: rgb(241, 241, 241);
		font-weight: 600;
	}





	.forleft {
		text-align: left !important;
	}

	/*  .forright{
        text-align:right  !important;
    } */

	.layui-form-select dl dd.layui-this {
		background-color: #f8f8f8;
		color: rgb(23, 145, 233);
		font-weight: 700;
	}

	.layui-input, .layui-textarea {
		/* padding-left: 3.75vw; */
		color: #5f5f5f;
	}


	.upimg {
		width: 250px;
		height: 250px;
	}

	.filelist{
		width: 100%;
		overflow: auto;
		justify-content:flex-start;
		align-content: space-between;
		flex-direction: column-reverse;
		flex-wrap: wrap;
		display: flex;

	}
	.filelist li{
		padding: 0.5vw 0.8vw 0.5vw 0.8vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
		border-right: 1px solid #e2e2e2;
		float: left;
	}


	.filelist p{
		margin: 3px 0 5px 0;
		width: 7vw;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}

	#filesBox2 li{
		padding: 0.5vw 0.8vw 0.5vw 0.8vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
		border-right: 1px solid #e2e2e2;
		float: left;
	}

</style>
{/block}
<!-- 主体 -->
{block name="body"}
<form class="layui-form p-4">
    <h3 class="pb-3">新建造价项目</h3>
	<table id="tabniubi" cellpadding="1" cellspacing="1">
		<tr>
			<th style="width: 10%;height: 0;"></th>
			<th style="width: 10%;height: 0;"></th>
			<th style="width: 10%;height: 0;"></th>
			<th style="width: 10%;height: 0;"></th>
			<th style="width: 10%;height: 0;"></th>
			<th style="width: 10%;height: 0;"></th>
			<th style="width: 10%;height: 0;"></th>
			<th style="width: 10%;height: 0;"></th>
			<th style="width: 10%;height: 0;"></th>
		</tr>
		<tr border="1">
			<th class="form-title">项目名称 <font style="color: red !important;">*</font></th>
			<th colspan="2">
				<input type="text" name="project_name"  lay-verify="required" lay-reqText="请完善项目名称" value="" autocomplete="off" placeholder="请输入项目名称" class="layui-input">
			</th>

			<th class="form-title">项目编号 <font style="color: red !important;">*</font></th>
			<th colspan="2">
				<input type="text" name="project_num"  lay-verify="required" lay-reqText="请完善项目编号" value="" autocomplete="off" placeholder="请输入项目编号" class="layui-input">
			</th>

			<th class="form-title">项目周期 <font style="color: red !important;">*</font></th>
			<th id="date" colspan="2">
				<div class="layui-input-inline" style="width: 47%;display: inline-flex;">
					<input type="text" id="start_time" name="project_start_time" readonly lay-verify="required" lay-reqText="请选择开始时间" placeholder="请选择" class="layui-input" value="">
				</div>
				-
				<div class="layui-input-inline" style="width: 47%;display: inline-flex;">
					<input type="text" id="end_time" name="project_end_time" readonly lay-verify="required" lay-reqText="请选择结束时间" placeholder="请选择" class="layui-input" value="">
				</div>
			</th>
		</tr>

		<tr>
			<th class="form-title">项目类型 <font style="color: red !important;">*</font></th>
			<th colspan="2">
				<div>
					<select name="engineering_type1" lay-verify="required" >
						<option value="">请选择项目类型</option>
						<option value="1" >预算</option>
						<option value="2" >结算</option>
						<option value="3">概算</option>
                        <option value="4">决算</option>
                        <option value="5">工程总承包（EPC）</option>
					</select>
				</div>
			</th>
			<th class="form-title">——</th>
			<th colspan="2">
				<div>
					<select name="engineering_type2" lay-verify="required" >
						<option value="">请选择项目类型</option>
						<option value="1" >审核</option>
						<option value="2" >编制</option>
					</select>
				</div>
			</th>
			<th class="form-title">工程类别</th>
			<th colspan="2">
				<select name="engineering_category" lay-verify="engineering_category" >
					<option value="">请选择工程类型</option>
					<option value="建筑物" >建筑物</option>
					<option value="交通" >交通</option>
					<option value="水利" >水利</option>
					<option value="土地整治" >土地整治</option>
					<option value="市政园林" >市政园林</option>
					<option value="信息网络" >信息网络</option>
					<option value="其他" >其他</option>
				</select>
			</th>
		</tr>

		<tr>
			<th class="form-title">项目区域</th>
			<th colspan="2">
				<div>
					<div class="layui-form-item"
						 style="margin-bottom: 0;display: flex;flex-direction: row;justify-content: space-between;">
						<div class="layui-input-inline" style="width: 6.5vw;">

							<select id="province" lay-filter="province" name="province"></select>

						</div>
						<div class="layui-input-inline area" style="width: 6.5vw;">

							<select id="city" lay-filter="city" name="city"></select>

						</div>
						<div class="layui-input-inline area" style="width: 6.5vw;">

							<select id="area" lay-filter="area" name="area"></select>
						</div>
					</div>

				</div>
			</th>
		</tr>

		<!-- <tr>

			<th class="form-title">资金性质</th>
			<th>
				<div>
					<select name="fiscal_nature" lay-filter="aihao">
					<option value="">请选择资金性质</option>
					<option value="财政资金">财政资金</option>
					<option value="非财政资金">非财政资金</option>
					</select>
				</div>
			</th>



			<th class="form-title">项目规模</th>
			<th colspan="3">
				<input type="text" name="project_scale" value="" autocomplete="off" placeholder="请输入项目规模" class="layui-input">
			</th>



			<th class="form-title">收费标准</th>
			<th colspan="2">
				<input type="text" name="charge_standard" value="" autocomplete="off" placeholder="请输入收费标准" class="layui-input">
			</th>

		</tr>


		<tr>
			<th colspan="9" class="forleft">金额详情</th>
		</tr>
		<tr>

			<th class="form-title" colspan="1">送审金额（元）</th>
			<th colspan="3">
				<input type="text" id="sent_review_amount" name="sent_review_amount" onkeyup="Add()" value="" autocomplete="off" placeholder="请输入送审金额" class="layui-input">
			</th>



			<th class="form-title" colspan="1">审定金额（元）</th>
			<th colspan="4" style="text-align: left;">
				<input type="text" id="authorize_amount" name="authorize_amount" value="" onkeyup="Add()" autocomplete="off" placeholder="请输入审定金额" class="layui-input">
			</th>

		</tr>
		<tr>

			<th class="form-title" colspan="1">审增减额（元）</th>
			<th colspan="1">
				<span id="review_add_reduce_amount"></span>
				<input type="hidden" name="review_add_reduce_amount" value="" autocomplete="off" placeholder="请输入审增减额" class="layui-input">

			</th>



			<th class="form-title" colspan="1">审增减率（%）</th>
			<th colspan="1">
				<span id="review_add_reduce_rate"></span>
				<input type="hidden" name="review_add_reduce_rate" value="" autocomplete="off" placeholder="请输入审增减率" class="layui-input">
			</th>



			<th class="form-title" colspan="1">送审服务费 (元)</th>
			<th colspan="4" style="text-align: left;">
				<input type="text" name="sent_review_cost" value="" autocomplete="off" placeholder="请输入送审服务费" class="layui-input">
			</th>

		</tr> -->

		<!-- <tr>
             <th class="form-title" colspan="1">报告时间</th>
             <th colspan="8" style="text-align: left;"></th>
         </tr>-->


		<tr>
			<th colspan="9" class="forleft">相关附件
				<button class="layui-btn layui-btn-xs layui-btn-danger" style="float: right;" type="button"
						id="uploadBtn">上传附件
				</button>
			</th>
		</tr>

		<tr>
            <th colspan="9" class="fujianimg" >
                <div id="filesBox2">
                    <div class="filelist" id="filesBigBox">
                        <ul id="filesBox">
                            <div id="nofile" class="layui-data-none">暂无附件</div>
                        </ul>
                    </div>
    
                </div>
            </th>
        </tr>

	</table>

	<div class="py-3">
		<input type="hidden" name="id" value=""/>
		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="save">保存</button>

	</div>


</form>
{/block}
<!-- /主体 -->

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

	if(province==''){
		province = '广西';city = '南宁市'; area = '青秀区';
	}

	function Add(){
		var input1 = 0,input2 = 0;
		input1 = parseInt(document.getElementById("sent_review_amount").value);
		input2 = parseInt(document.getElementById("authorize_amount").value);
		if (input1 && input2) {
			var aa= input2-input1;
			var bb = aa/input1*100;
			bb = bb.toFixed(2);
			$('[name="review_add_reduce_amount"]').val(aa);
			$('[name="review_add_reduce_rate"]').val(bb );
			$('#review_add_reduce_amount').html(aa );
			$('#review_add_reduce_rate').html(bb)
		}else {
			$('[name="review_add_reduce_amount"]').val('');
			$('[name="review_add_reduce_rate"]').val('' );
			$('#review_add_reduce_amount').html('' );
			$('#review_add_reduce_rate').html('')
		}
		// 总审定金额-总送审金额

	}
	function gouguInit() {
		var form = layui.form, tool = layui.tool, oaTool = layui.oaTool;

		let adress;
		//日期选择
		layui.laydate.render({
			elem: '#date',
			range: ['#start_time', '#end_time'],
			rangeLinked: true
		});

		let c = 1;

		//监听提交
		form.on('submit(save)', function (data) {
			if(c){
				let callback = function (e) {
					c = 1
					layer.msg(e.msg);
					if (e.code == 0) {
						tool.sideClose(1000);
					}
				}
				var engineering_type1 ='';
				if(data.field.engineering_type1==1){
					engineering_type1 ='预算';
				}else if(data.field.engineering_type1==2){
					engineering_type1 ='结算';
				}
				var engineering_type2 = '';
				if(data.field.engineering_type2==1){
					engineering_type2 ='审核';
				}else if(data.field.engineering_type2==2) {
					engineering_type2 = '编制';
				}
				if(engineering_type1!==""&&engineering_type2!==""){
					data.field.engineering_type = engineering_type1 + "-" + engineering_type2;
				}
				data.field.file_ids = file_ids;

				tool.post("/admin/project.cost_company/add", data.field, callback);
			}

			c = 0
			return false;
		});
		var file_ids = [];
		$('#filesBox').on('click','.file-del',function(){
			let id = $(this).parent().parent().data('id');
			layer.confirm('确定要删除该文件吗？', { icon: 3, title: '提示' }, function () {
				layer.closeAll();
				var index = file_ids.indexOf(id);

				if (index > -1) {
					file_ids.splice(index, 1);
				}
				if(file_ids.length == 0){
					$("#filesBox").append('<div id="nofile" class="layui-data-none" >暂无附件</div>');
				}
				console.log(file_ids);

				$("#" + id).remove();
			});
		})

		//上传文件数组
		function fileCard(item){
			var host = window.location.host;
			var li = '';
			if(item.length>0){
				for(var a=0;a<item.length;a++){

					let image = ['jpg','jpeg','png','gif'];
					let doc = ['doc','docx','xls','xlsx','ppt','pptx','txt','pdf','zip','rar','7z'];
					// let down = '<a href="'+item[a].filepath+'" target="_blank" class="layui-btn layui-btn-xs layui-btn-normal" download="'+item[a].name+'">下载</a>';
					let down ='<a href="https://view.officeapps.live.com/op/view.aspx?src=https://' + host + item[a]['filepath'] + '" target="_blank" class="layui-btn layui-btn-xs layui-btn-normal" download="' + item[a]['name'] + '">预览</a>';
					// 判断元素是否在数组中
					let path='/static/home/images/icon/file.png';
					if (image.includes(item[a].fileext)) {
						path=item[a].filepath;
						down = '<span data-href="'+item[a].filepath+'" class="layui-btn layui-btn-xs layui-btn-normal file-view-img">预览</span>';
					} else if (doc.includes(item[a].fileext)){
						path='/static/home/images/icon/'+item[a].fileext+'.png';
					}

					if(item[a].fileext == 'pdf'){
						down = '<span data-href="'+item[a].filepath+'" class="layui-btn layui-btn-xs layui-btn-normal file-view-pdf">预览</span>';
					}
					li += '<li id="'+item[a].id+'" data-id="'+item[a].id+'" data-title="'+item[a].name+'" data-ext="'+item[a].fileext+'"><img src="'+path+'" alt="'+item[a].filename+
							'" style="object-fit: contain;" class="file-item"><p title="'+item[a].name+'">'+item[a].name+
							'</p><div class="layui-btn-group">'+ down +
							'<span class="layui-btn layui-btn-xs layui-btn-danger file-del">删除</span></div></li>';
				}

				return li;
			}
		}

		oaTool.addFile({
			type: 1,
			isSave: true,
			ajaxSave: function (res) {
				let callback = function (e) {
					if (e.hasOwnProperty("msg")) {
						layer.msg(e.msg);
					}else{
						layer.msg('上传成功！')
					}
					$('#nofile').remove();
					$("#filesBox").append(fileCard(e));
					file_ids.push(e[0].id)

				}
				tool.post("/admin/project.api/add_file", {

					'file_id': res.data.id,
				}, callback);
			}
		});
		$('#filesBox2').on('click', '.file-del', function () {
			let id = $(this).parent().parent().data('id');
			layer.confirm('确定要删除该文件吗？请慎重', {icon: 3, title: '提示'}, function () {
				var index = file_ids.indexOf(id);
                layer.closeAll();
				if (index > -1) {
					file_ids.splice(index, 1);
				}
				if(file_ids.length == 0){
					$("#filesBox").append('<div id="nofile" class="layui-data-none" >暂无附件</div>');
				}
				console.log(file_ids);

				$("#" + id).remove();
			});
		})
		layui.use(['form', 'jquery'], function () {


			var form = layui.form;
			const $ = layui.jquery;
			let adress;
			$.ajax({
				type: "get", //使用get方式
				url: "/static/assets/layui/adress.json", //json文件相对于这个HTML的路径
				dataType: "json",
				async: false,
				success: function (data) {
					//这个data就是json数据
					adress = data
					var province = Object.keys(adress)
					var proStrs= '<option value="">省</option>';
					for (var i=0; i<province.length;i++){
						proStrs += '<option value="' + province[i] + '">' + province[i] + '</option>';
					}

					$("#province").html(proStrs);
					layui.form.render("select")

				},
				error: function () {
					layer.alert("地址请求失败！！ ");
				}
			});

			function getFirstAttr(obj) {

				for (var k in obj) return k;
			}

			function selectOption(selectedProvince, selectedCity='', selectedArea='') {
				var proStr = '<option value="">省</option>', cityStr = '<option value="">市</option>', areaStr = '<option value="">县</option>';
				var pro = adress[selectedProvince], ci = adress[selectedProvince][selectedCity];
				for (var province in adress) {
					if (province == selectedProvince) proStr += '<option value="' + province + '" selected>' + province + '</option>';
					else proStr += '<option value="' + province + '">' + province + '</option>';
				}
				$("#province").html(proStr);

				for (var city in pro) {

					if (city == selectedCity) cityStr += '<option value="' + city + '" selected>' + city + '</option>';
					else cityStr += '<option value="' + city + '">' + city + '</option>';
				}
				$("#city").html(cityStr);

				for (var area in ci) {
					if (area == "remove") {
						continue;
					}

					if (ci[area] == selectedArea) areaStr += '<option value="' + ci[area] + '" selected>' + ci[area] + '</option>';
					else areaStr += '<option value="' + ci[area] + '">' + ci[area] + '</option>';
				}
				$("#area").html(areaStr);

				form.render();
			}


			/*selectOption(1,2, 3);*/

			form.on('select(province)', function (data) {
				let thisProvince = data.value;
				let thisCity = getFirstAttr(adress[thisProvince]);

				selectOption(data.value);
			});

			form.on('select(city)', function (data) {

				selectOption($("#province").val(), data.value, getFirstAttr(data.value));
			});




		})
	}
</script>

{/block}
<!-- /脚本 -->