<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>财务人员管理</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <script th:src="@{/layui/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/common.js}"></script>

    <style>
        body {
            background: #f2f2f2
        }

        #boxDiv {
            background: #ffffff
        }

        #titleDiv {
            overflow: visible;
        }

        .content {
            padding: 0 8px;
        }

        .tableTitle {
            height: 20px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .tableTitle > * {
            height: 20px;
            line-height: 20px;
            display: inline-block;
            margin-right: 5px;
        }

        .tableName {
            border-left: 3px solid #0000FF;
            padding-left: 5px;
            font-size: 16px;
            font-weight: bold;
        }

        .layui-table-page {
            height: 81px;
        }
    </style>
</head>
<body class="layui-layout-body">
<div id="boxDiv" style="left:8px;right: 8px;bottom:8px;top:8px;position:absolute;">
    <div class="toolbar" id="titleDiv">
        <div style="display: inline-block;">
            <form class="layui-form">
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline formWidthTwo">
                        <input type="text" class="layui-input" id="name" placeholder="请输入姓名">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">微信名</label>
                    <div class="layui-input-inline formWidthTwo">
                        <input type="text" class="layui-input" id="wechatName" placeholder="请输入微信名">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-inline formWidthTwo">
                        <input type="text" class="layui-input" id="phone" placeholder="请输入手机号">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline formWidthTwo">
                        <select id="isActive">
                            <option value="">全部</option>
                            <option value="1">启用</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm layui-btn-normal" data-type="search" id="search" onclick="search()"><i
                    class="layui-icon layui-icon-search"></i>查询
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="addFinanceUser()"><i class="layui-icon">&#xe654;</i>新增
            </button>
        </div>
    </div>
    <div class="content">
        <div class="tableTitle">
            <span class="tableName">财务人员管理</span>
        </div>
        <table id="demo" lay-filter="test"></table>
    </div>
</div>

<!-- 新增/编辑财务人员弹窗 -->
<div id="financeUserForm" style="display:none;">
    <form id="financeUserFormData" class="layui-form" style="margin-top:20px;">
        <input type="hidden" id="id">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" id="formName" required lay-verify="required" autocomplete="off"
                       placeholder="请输入姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">微信名</label>
            <div class="layui-input-block">
                <input type="text" id="formWechatName" autocomplete="off"
                       placeholder="请输入微信名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" id="formPhone" autocomplete="off"
                       placeholder="请输入手机号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="formIsActive" value="1" title="启用" checked>
                <input type="radio" name="formIsActive" value="0" title="禁用">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea id="formRemark" placeholder="请输入备注" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</div>

<script>
    let layer, table, form;

    layui.use(['element', 'table', 'layer', 'form'], function () {
        layer = layui.layer;
        table = layui.table;
        form = layui.form;

        //表格加载
        table.render({
            elem: '#demo',
            height: 'full-' + ($(".toolbar").height() + 60),
            title: '财务人员管理',
            page: true,//开启分页
            limit: 20,
            limits: [20, 30, 50],
            defaultToolbar: [],
            id: 'test',
            even: 'true',
            cols: [
                [
                    {field: 'name', align: 'center', title: '姓名', width: 120, sort: false},
                    {field: 'wechatName', align: 'center', title: '微信名', width: 150, sort: false},
                    {field: 'phone', align: 'center', title: '手机号', width: 120, sort: false},
                    {field: 'openId', align: 'center', title: 'OpenID', width: 200, sort: false, 
                     templet: function (d) {
                         return d.openId ? d.openId.substring(0, 10) + '...' : '未获取';
                     }},
                    {
                        field: 'isActive', align: 'center', title: '状态', width: 80, sort: false,
                        templet: function (d) {
                            return d.isActive === '1' ? '<span style="color: green;">启用</span>' : '<span style="color: red;">禁用</span>';
                        }
                    },
                    {field: 'createTime', align: 'center', title: '创建时间', width: 150, sort: false},
                    {field: 'remark', align: 'center', title: '备注', width: 200, sort: false},
                    {
                        field: 'id', align: 'center', title: '操作', width: 200, sort: false,
                        templet: function (d) {
                            return '<button class="layui-btn layui-btn-xs" onclick="editFinanceUser(\'' + d.id + '\')">编辑</button>' +
                                '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteFinanceUser(\'' + d.id + '\')">删除</button>';
                        }
                    }
                ]
            ],
            data: []
        });

        // 初始加载数据
        search();
    });
    
    //查询
    function search(num) {
        num = num === null ? 1 : num;
        let url = "/financeUser/findFinanceUserPageList";
        let param = {};

        param.name = $("#name").val();
        param.wechatName = $("#wechatName").val();
        param.phone = $("#phone").val();
        param.isActive = $("#isActive").val();

        table.reload('test', {
            method: 'get',
            url: url,
            where: param,
            page: {
                curr: num
            }
        });
    }
    
    //新增财务人员
    function addFinanceUser() {
        clearForm();
        layer.open({
            type: 1,
            title: "新增财务人员",
            shade: 0,
            area: ['500px', '500px'],
            offset: 'auto',
            content: $("#financeUserForm"),
            btn: ['确定', '取消'],
            btnAlign: 'c',
            yes: function (index, layero) {
                saveFinanceUser();
            },
            btn2: function () {
                layer.closeAll();
            }
        });
    }
    
    //编辑财务人员
    function editFinanceUser(id) {
        let url = "/financeUser/findFinanceUserById?id=" + id;

        $.ajax({
            type: "get",
            url: url,
            success: function (data) {
            if (data.code === 0) {
                let financeUser = data.data;
                $("#id").val(financeUser.id);
                $("#formName").val(financeUser.name);
                $("#formWechatName").val(financeUser.wechatName);
                $("#formPhone").val(financeUser.phone);
                $("#formRemark").val(financeUser.remark);
                
                //设置状态
                $("input[name='formIsActive'][value='" + financeUser.isActive + "']").prop("checked", true);
                form.render('radio');

                layer.open({
                    type: 1,
                    title: "编辑财务人员",
                    shade: 0,
                    area: ['500px', '500px'],
                    offset: 'auto',
                    content: $("#financeUserForm"),
                    btn: ['确定', '取消'],
                    btnAlign: 'c',
                    yes: function (index, layero) {
                        saveFinanceUser();
                    },
                    btn2: function () {
                        layer.closeAll();
                    }
                });
            } else {
                layer.alert(data.msg);
            }
            },
            error: function(xhr, status, error) {
                layer.alert("查询失败: " + error);
            }
        });
    }
    
    //保存财务人员
    function saveFinanceUser() {
        let id = $("#id").val();
        let url = id ? "/financeUser/updateFinanceUser" : "/financeUser/addFinanceUser";

        let param = {
            id: id,
            name: $("#formName").val(),
            wechatName: $("#formWechatName").val(),
            phone: $("#formPhone").val(),
            isActive: $("input[name='formIsActive']:checked").val(),
            remark: $("#formRemark").val()
        };

        AjaxPostJson(url, param, function (data) {
            if (data.code === 0) {
                layer.msg(data.msg, {time: 1000}, function () {
                    layer.closeAll();
                    search();
                });
            } else {
                layer.alert(data.msg);
            }
        });
    }
    
    //删除财务人员
    function deleteFinanceUser(id) {
        layer.confirm('确定要删除这个财务人员吗？', {icon: 3, title: '提示'}, function (index) {
            let url = "/financeUser/deleteFinanceUser?id=" + id;

            $.ajax({
                type: "post",
                url: url,
                success: function (data) {
                    if (data.code === 0) {
                        layer.msg(data.msg, {time: 1000}, function () {
                            search();
                        });
                    } else {
                        layer.alert(data.msg);
                    }
                },
                error: function(xhr, status, error) {
                    layer.alert("删除失败: " + error);
                }
            });
            layer.close(index);
        });
    }
    
    //清空表单
    function clearForm() {
        $("#id").val("");
        $("#formName").val("");
        $("#formWechatName").val("");
        $("#formPhone").val("");
        $("#formRemark").val("");
        $("input[name='formIsActive'][value='1']").prop("checked", true);
        form.render('radio');
    }
</script>
</body>
</html>
