<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>新建</title>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<form class="layui-form" action="" lay-filter="formDemo">
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            <li class="layui-this">基本信息</li>
            <li>项目预算</li>
        </ul>
        <div class="layui-tab-content">
            <!--基本信息开始-->
            <div class="layui-tab-item layui-show">
                <form class="layui-form" action="" lay-filter="formDemo" style="height: 620px">
                    <div class="layui-form layuimini-form" style="padding-bottom: 100px">
                        <div class="layui-form-item layui-inline" style="width: 100%">
                            <label class="layui-form-label required" style="width: 90px">中文名称</label>
                            <div class="layui-input-inline" style="width: 400px">
                                <input type="text" id="zwmc" name="zwmc" lay-verify="required" lay-reqtext="中文名称不能为空"
                                       autocomplete="off" class="layui-input">
                                <!--                                <input type="text" id="zwmc" name="zwmc" placeholder="项目名称随项目类型变化" class="layui-input" readonly>-->
                            </div>
                            <label class="layui-form-label" style="width: 90px">学科分类1</label>
                            <div class="layui-input-inline" style="width: 300px">
                                <select name="xkfl1" id="xkfl1" lay-filter="xkfl">
                                    <option value="">[无]</option>
                                    <option value="-1">[浏览]</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline" style="width: 100%">
                            <label class="layui-form-label" style="width: 90px">英文名称</label>
                            <div class="layui-input-inline" style="width: 400px">
                                <input type="text" id="ywmc" name="ywmc" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label" style="width: 90px">学科分类2</label>
                            <div class="layui-input-inline" style="width: 300px">
                                <select name="xkfl2" id="xkfl2" lay-filter="xkfl">
                                    <option value="">[无]</option>
                                    <option value="-1">[浏览]</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline" style="width: 100%">
                            <label class="layui-form-label" style="width: 90px">ERP编号</label>
                            <div class="layui-input-inline" style="width: 400px">
                                <input type="text" id="erpbh" name="erpbh" class="layui-input">
                            </div>
                            <label class="layui-form-label" style="width: 90px">学科分类3</label>
                            <div class="layui-input-inline" style="width: 300px">
                                <select name="xkfl3" id="xkfl3" lay-filter="xkfl">
                                    <option value="">[无]</option>
                                    <option value="-1">[浏览]</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline" style="width: 100%">
                            <label class="layui-form-label required" style="width: 90px">项目类型</label>
                            <div class="layui-input-inline" style="width: 400px">
                                <select name="xmlx" id="xmlx" lay-filter="status">
                                    <option value="">请选择</option>
                                    <option th:each="item:${xmlxList}" th:text="${item.name}"
                                            th:value="${item.code}"></option>
                                </select>
                            </div>
                            <label class="layui-form-label" style="width: 90px">费用来源</label>
                            <div class="layui-input-inline" style="width: 300px">
                                <input type="text" id="fyly" name="fyly" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline" style="width: 100%">
                            <label class="layui-form-label required" style="width: 175px">是否国家秘密技术项目</label>
                            <div class="layui-input-inline" style="width: 280px">
                                <input type="checkbox" name="sfgjmmjsxm" lay-skin="primary">
                            </div>
                            <label class="layui-form-label" style="width: 125px">所属国民经济行业</label>
                            <div class="layui-input-inline" style="width: 300px">
                                <select name="ssgmjjhy" id="ssgmjjhy" lay-filter="gmjjhy">
                                    <option value="">[无]</option>
                                    <option value="-1">[浏览]</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline" style="width: 100%">
                            <label class="layui-form-label required" style="width: 90px">项目起止时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="qs" id="qs" lay-verify="date" placeholder="开始日期"
                                       autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline">
                                <input type="text" name="wc" id="wc" lay-verify="date" placeholder="结束日期"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <!-- 右侧悬浮按钮 -->
                        <div class="right-bottom-btn">
                            <button class="layui-btn" lay-submit lay-filter="saveBtn"><i
                                    class="layui-icon layui-icon-ok"></i>保存
                            </button>
                            <button class="layui-btn" lay-filter="cancleBtn"><i
                                    class="layui-icon layui-icon-close"></i>取消
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <!--基本信息结束-->
            <!--项目预算开始-->
            <div class="layui-tab-item" style="padding-left: 30px; padding-right: 30px">
                <form class="layui-form" action="" lay-filter="formDemo" style="min-height: 620px">
                    <div class="layui-form layuimini-form" style="padding-bottom: 100px">
                        <div class="layui-btn-group" style="padding: 0px">
                            <button type="button" class="layui-btn  layui-btn-primary layui-btn-sm" lay-filter="btnAdd">
                                <i class="layui-icon"></i>新建
                            </button>
                            <button type="button" class="layui-btn  layui-btn-primary layui-btn-sm"
                                    lay-filter="btnEdit"><i class="layui-icon"></i>编辑
                            </button>
                            <button type="button" class="layui-btn  layui-btn-primary layui-btn-sm"
                                    lay-filter="btnView"><i class="layui-icon">&#xe63c;</i>查看
                            </button>
                            <button type="button" class="layui-btn  layui-btn-primary layui-btn-sm"
                                    lay-filter="btnDelete"><i class="layui-icon"></i>删除
                            </button>
                        </div>
                        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

                        <!-- 右侧悬浮按钮 -->
                        <div class="right-bottom-btn">
                            <button class="layui-btn" lay-filter="cancleBtn">
                                <i class="layui-icon layui-icon-close"></i>关闭
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <!--项目预算结束-->
        </div>
    </div>
</form>

<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/lib/coco-message/coco-message.js}" charset="utf-8"></script>
<script th:src="@{/lib/xm-select-v1.2.2/xm-select.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" charset="utf-8"></script>

<script type="text/javascript" th:inline="javascript">
    AjaxUtil.ctx = /*[[@{/}]]*/'';
    var updateflag = 0;
    var ObjId = '0';
    var ObjName = '';
    layui.use(['form', 'table', 'treeTable', 'layCascader'], function () {
        var form = layui.form,
            laydate = layui.laydate,
            layer = layui.layer,
            treeTable = layui.treeTable;

        var isShow = true;
        var mbId = -1;
        var ysId = -1;
        var budget = [];

        //日期
        laydate.render({
            elem: '#qs'
        });
        laydate.render({
            elem: '#wc',
        });
        laydate.render({
            elem: '#cjrq'
        });

        //监听学科分类
        form.on('select(xkfl)', function (data) {
            if (data.value == "-1") {
                var index = layer.open({
                    title: '浏览',
                    type: 2,
                    shade: 0.3,
                    maxmin: false,
                    area: [layerwidth + 'px', layerheight + 'px'],
                    content: AjaxUtil.ctx + 'prjProject/xkfl',
                    end: function (index) {
                        if (ObjId != '0') {
                            $("#" + data.elem.id).append("<option value=" + ObjId + " selected>" + ObjName + "</option>");

                            ObjId = '0';
                            ObjName = '';
                        } else {
                            $("#" + data.elem.id).val(0);
                        }
                        form.render('select');
                    }
                });
            }
            return false;
        });

        //监听国民经济行业
        form.on('select(gmjjhy)', function (data) {
            if (data.value == "-1") {
                var index = layer.open({
                    title: '浏览',
                    type: 2,
                    shade: 0.3,
                    maxmin: true,
                    area: [layerwidth + 'px', layerheight + 'px'],
                    content: AjaxUtil.ctx + 'prjProject/gmjjhy',
                    end: function (index) {
                        if (ObjId != '0') {
                            $("#" + data.elem.id).append("<option value=" + ObjId + " selected>" + ObjName + "</option>");

                            ObjId = '0';
                            ObjName = '';
                        } else {
                            $("#" + data.elem.id).val("");
                        }
                        form.render('select');
                    }
                });
            }
            return false;
        });

        //监听所属部门
        form.on('select(dept)', function (data) {
            if (data.value == "-1") {
                var index = layer.open({
                    title: '浏览',
                    type: 2,
                    shade: 0.3,
                    maxmin: true,
                    area: [layerwidth + 'px', layerheight + 'px'],
                    content: AjaxUtil.ctx + 'prjProject/dept',
                    end: function (index) {
                        if (ObjId != '0') {
                            $("#" + data.elem.id).append("<option value=" + ObjId + " selected>" + ObjName + "</option>");

                            ObjId = '0';
                            ObjName = '';
                        } else {
                            $("#" + data.elem.id).val(0);
                        }
                        form.render('select');
                    }
                });
            }
            return false;
        });

        // 监听提交
        form.on('submit(saveBtn)', function (res) {
            var data = res.field;
            var index = layer.load(0, {shade: 0.1});
            AjaxUtil.post({
                url: AjaxUtil.ctx + "baseProjecttemplate/doAdd",
                data: data,
                success: function (res) {
                    layer.close(index);
                    if (0 === res.code) {
                        Message.success(1000, res.message, function () {
                            mbId = res.data.id;
                            parent.setUpdateFlag();
                        });
                    } else {
                        Message.warning(res.message, 500);
                    }
                },
                error: function (error) {
                    layer.close(index);
                    Message.error("服务器异常！", 500);
                }
            });
            return false;
        });

        // 监听取消按钮
        $("button[lay-filter='cancleBtn']").click(function () {
            var iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);
        });

        //项目预算
        var insTb = treeTable.render({
            elem: '#currentTableId',
            url: AjaxUtil.ctx + 'baseProjectbudget/list/' + mbId,
            skin: 'grid',
            tree: {
                treeColIndex: 1,
                treeSpid: "0",
                iconIndex: 1,           // 折叠图标显示在第几列
                isPidData: true,        // 是否是id、pid形式数据
                idName: 'bm',  // id字段名称
                pidName: 'fj', // pid字段名称
                arrowType: 'arrow2',
                getIcon: 'ew-tree-icon-style2'
            },
            treeDefaultClose: isShow,
            method: 'GET',
            page: false,
            // toolbar: '#toolbarDemo',
            cols: [
                [
                    {type: 'numbers'},
                    {field: 'mc', width: '50%', title: '名称'},
                    {field: 'bm', width: '20%', title: '编码'},
                    {field: 'bz', width: '23%', title: '备注'}
                ]
            ],
            done: function () {
                insTb.expandAll();// 展开全部
                if (insTb.options.data.length > 0)
                    ysId = 0;
            }
        });
        // 监听新建按钮
        $("button[lay-filter='btnAdd']").click(function () {
            if (mbId == -1)
                Message.error("请先创建项目模板并保存，然后再添加预算", 2000);
            if (insTb.options.data.length > 0 && ysId < 1)
                Message.error("请选择父节点", 1000);
            else if (ysId == -1) {
                var index = layer.open({
                    title: '新建项目预算',
                    type: 2,
                    maxmin: true,
                    shade: 0.2,
                    area: [layerwidth + 'px', layerheight + 'px'],
                    content: AjaxUtil.ctx + 'baseProjectbudget/forAdd1/' + mbId,
                    end: function () {
                        if (updateflag == 1)
                            insTb.refresh();
                        updateflag = 0;
                        layer.close(index);
                    }
                });
            } else {
                var index = layer.open({
                    title: '新建项目预算',
                    type: 2,
                    maxmin: true,
                    shade: 0.2,
                    area: [layerwidth + 'px', layerheight + 'px'],
                    content: AjaxUtil.ctx + 'baseProjectbudget/forAdd2/' + ysId,
                    end: function () {
                        if (updateflag == 1)
                            insTb.refresh();
                        updateflag = 0;
                        layer.close(index);
                    }
                });
            }
        });

        //监听行选中
        treeTable.on('row(currentTableId)', function (obj) {
            ysId = obj.data.id;
            budget = obj.data;
            obj.tr.addClass('layui-bg-blue').siblings().removeClass('layui-bg-blue');
        });

        //双击
        treeTable.on('rowDouble(currentTableId)', function (obj) {
            ysId = obj.data.id;
            budget = obj.data;
            obj.tr.addClass('layui-bg-blue').siblings().removeClass('layui-bg-blue');

            var index = layer.open({
                title: '浏览项目预算',
                type: 2,
                shade: 0.3,
                maxmin: true,
                area: [layerwidth + 'px', layerheight + 'px'],
                content: AjaxUtil.ctx + 'baseProjectbudget/forView/' + ysId,
                success: function (index) {
                },
                end: function (index) {
                }
            });
        });

        // 监听编辑按钮
        $("button[lay-filter='btnEdit']").click(function () {
            if (insTb.options.data.length > 0 && ysId < 1)
                Message.error("请选择要编辑的预算", 1000);
            else {
                layer.open({
                    type: 2,
                    shade: 0.2,
                    title: '编辑项目预算',
                    maxmin: true,
                    area: [layerwidth + 'px', layerheight + 'px'],
                    content: AjaxUtil.ctx + 'baseProjectbudget/forUpdate/' + ysId,
                    end: function (index) {
                        if (updateflag == 1)
                            insTb.refresh();
                        updateflag = 0;
                    }
                });
            }
        });
        // 监听查看按钮
        $("button[lay-filter='btnView']").click(function () {
            if (insTb.options.data.length > 0 && ysId < 1)
                Message.error("请选择要查看的预算", 1000);
            else {
                var index = layer.open({
                    title: '浏览项目预算',
                    type: 2,
                    shade: 0.3,
                    maxmin: true,
                    area: [layerwidth + 'px', layerheight + 'px'],
                    content: AjaxUtil.ctx + 'baseProjectbudget/forView/' + ysId,
                    success: function (index) {
                    },
                    end: function (index) {
                    }
                });
            }
        });
        // 监听删除按钮
        $("button[lay-filter='btnDelete']").click(function () {
            if (insTb.options.data.length > 0 && ysId < 1)
                Message.error("请选择要删除的预算", 1000);
            else {
                var dataBudget = {
                    "id": budget.id,
                    "mc": budget.mc,
                    "bm": budget.bm
                }
                var index = layer.load(0, {shade: 0.1});
                AjaxUtil.post({
                    url: AjaxUtil.ctx + 'baseProjectbudget/doDelete',
                    contentType: "application/json",
                    data: JSON.stringify(dataBudget),
                    success: function (res) {
                        layer.close(index);
                        if (0 === res.code) {
                            layer.closeAll('dialog');
                            Message.success(1000, res.message, function () {
                                // 重载表格
                                insTb.refresh();
                            });
                        } else {
                            Message.error(res.message, 1000);
                        }
                    },
                    fail: function (res) {
                        layer.close(index);
                        Message.error(res.message, 1500);
                    },
                    error: function (error) {
                        layer.close(index);
                        Message.error("服务器异常！", 1000);
                    }
                });
            }
        });
    });

    function setUpdateFlag() {
        updateflag = 1;
    }

    function setData(id, name) {
        ObjId = id;
        ObjName = name;
    }
</script>
</body>
</html>