fleet-contractor/Site/SystemSettings/ManageDepartments.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/SystemSettings/SysSettingMasterPage.master" AutoEventWireup="true" CodeFile="ManageDepartments.aspx.cs" Inherits="ManageDepartments" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style type="text/css">
        ::-ms-clear, ::-ms-reveal {
            display: none;
        }

        .selectinput {
            width: 150px;
            margin-right: 10px;
        }

        .dialog-content table {
            border-collapse: collapse;
            width: 100%;
        }

            .dialog-content table td.label {
                width: 120px;
                text-align: right;
                padding-right: 10px;
                line-height: 30px;
                height: 24px;
                vertical-align: top;
            }

            .dialog-content table td input,
            .dialog-content table td textarea {
                border: 1px solid #a9a9a9;
                width: 200px;
                height: 18px;
                padding: 1px;
            }

                .dialog-content table td input[type="checkbox"] {
                    border: none;
                }

            .dialog-content table td textarea {
                height: 100px;
                /*max-width: 200px;*/
            }

        #dialogdatatb td {
            padding-top: 30px;
        }

        .a {
            text-decoration: none;
            color: #2140fb;
        }
    </style>
    <script type="text/javascript" src="<%=GetFileUrlWithVersion("../js/vue.min.js")%>"></script>
    <script>Vue.config.productionTip = false; Vue.config.silent = true;</script>
    <script type="text/javascript" src="<%=GetFileUrlWithVersion("../js/components/datagrid.js")%>"></script>

    <script type="text/javascript">        
        var DataGrid = window.DataGrid || window['g5-datagrid'];

        function departmentrequest(method, param, callback, error) {
            _network.request("SystemSettings/ManageDepartments.aspx", -1, method, param, callback, error || function (e) {
                showmaskbg(false, true);
                showAlert(GetTextByKey('P_SET_QUERY', 'An unknown error occurred.  Please refresh page.'), GetTextByKey('P_SET_QUERY', 'Query'));
            });
        }

        function OnAdd(pid) {
            departmentID = undefined;
            pID = pid;

            $('#dialog_code').val('');
            $('#dialog_name').val('');
            $('#dialog_notes').val('');
            $('#dialog_department .dialog-title span.title').text(GetTextByKey("P_SET_ADDDEPARTMENT", "Add Department"));

            showmaskbg(true);
            $('#dialog_department')
                .css({
                    'top': (document.documentElement.clientHeight - $('#dialog_department').height()) / 3,
                    'left': (document.documentElement.clientWidth - $('#dialog_department').width()) / 2
                }).showDialogfixed();
            $('#dialog_name').focus();
        }

        var departmentID;
        var pID;
        function OnEdit() {
            var index = vue.$refs.grid.selectedIndex;
            if (index < 0) {
                showAlert(GetTextByKey("P_SET_PLEASESELECTDEPARTMENT", "Please select Department."), GetTextByKey("P_SET_EDITLOCATIONS", "Edit Department")); return;
            }
            var department = vue.$refs.grid.source[index];
            if (!department) {
                departmentID = undefined;
                pID = undefined;
                return;
            }

            departmentID = department.Id;
            pID = department.PId;
            $('#dialog_code').val(department.Code);
            $('#dialog_name').val(department.Name);
            $('#dialog_notes').val(department.Notes);
            $('#dialog_department .dialog-title span.title').text(GetTextByKey("P_SET_EDITDEPARTMENT", "Edit Department"));
            showmaskbg(true);
            $('#dialog_department')
                .css({
                    'top': (document.documentElement.clientHeight - $('#dialog_department').height()) / 3,
                    'left': (document.documentElement.clientWidth - $('#dialog_department').width()) / 2
                }).showDialogfixed();
            $('#dialog_name').focus();
        }

        function OnDblClick(e) {
            OnEdit();
        }

        function OnDelete() {
            var index = vue.$refs.grid.selectedIndex;
            if (index < 0) {
                return;
            }
            var dep = vue.$refs.grid.source[index];
            if (!dep) {
                return;
            }
            showConfirm(GetTextByKey("P_SET_DOYOUWANTTODELETETHEDEPARTMENT", 'Do you want to delete the department?'), GetTextByKey("P_SET_DELETEDEPARTMENT", "Delete Department"), function () {
                departmentrequest("DeleteDepartment", dep.Id, function (data) {
                    if (typeof (data) === "string")
                        showAlert(data, GetTextByKey("P_SET_DELETEDEPARTMENT", "Delete Department"));
                    else
                        OnRefresh();
                }, function (err) {
                    showAlert(GetTextByKey("P_SET_FAILEDTODELETETHISDEPARTMENT", 'Failed to delete this Department.'), GetTextByKey("P_SET_DELETEDEPARTMENT", "Delete Department"));
                });
            });
        }

        function OnRefresh() {
            showloading(true);

            departmentrequest("GetDepartments", "", function (data) {
                showloading(false);
                if (typeof (data) === "string") {
                    showAlert(data, GetTextByKey("P_SET_ERROR", 'Error'));
                    return;
                }

                if (data)
                    showDepartments(data);

            }, function (err) {
                showloading(false);
            });
        }

        function showDepartments(data) {
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
            }
            vue.source = data;
        }

        var vue;
        //加载表格
        function initGrid() {
            showmaskbg(true);
            vue = new Vue({
                el: "#departmentlist",
                components: {
                    'data-grid': DataGrid
                },
                data: {
                    columns: CreateStyleColumn(),
                    source: [],
                    totalRow: null
                },
                methods: {
                    rowdblclick: function () {
                        OnEdit();
                    }
                }

            });
            showmaskbg(false);
        }
        //创建列表的行
        function CreateStyleColumn() {
            var list_columns = [
                { name: 'Name', caption: GetTextByKey("P_SET_DEPARTMENTNAME", "Department Name"), valueIndex: 'Name', type: 0, css: { 'width': 200, 'text-align': 'left' } },
                { name: 'Code', caption: GetTextByKey("P_SET_CODE", "Code"), valueIndex: 'Code', type: 0, css: { 'width': 200, 'text-align': 'left' } },
                { name: 'Notes', caption: GetTextByKey("P_SET_NOTES", "Notes"), valueIndex: 'Notes', type: 0, css: { 'width': 280, 'text-align': 'left' } },
                { name: 'AddSub', caption: "", valueIndex: 'Add', type: 5, css: { 'width': 30, 'text-align': 'center' } },
                { name: 'Edit', caption: "", valueIndex: 'Edit', type: 5, css: { 'width': 30, 'text-align': 'center' } },
                { name: 'Delete', caption: "", valueIndex: 'Delete', type: 5, css: { 'width': 30, 'text-align': 'center' } }
            ];
            var columns = [];
            // head
            for (var hd in list_columns) {
                var col = {};
                col.name = list_columns[hd].name;
                col.caption = list_columns[hd].caption;
                col.type = list_columns[hd].type;
                col.enabled = true;
                col.width = list_columns[hd].css.width;
                col.align = list_columns[hd].css["text-align"]
                col.key = list_columns[hd].valueIndex;
                col.sortable = false;

                if (col.name === "Name") {
                    col.styleFilter = function (e) {
                        if (e.PId > 0)
                            return { 'padding-left': '24px' };
                        else
                            return { 'font-weight': 'bold' };
                    }
                }
                else if (col.name === "AddSub") {
                    col.onclick = function (e) {
                        var index = vue.$refs.grid.selectedIndex;
                        if (index < 0) return;
                        var dep = vue.$refs.grid.source[index];
                        OnAdd(dep.Id);
                    };
                    col.filter = function (e) {
                        if (e.PId > 0)
                            return "";
                        else
                            return "\uf067";
                    }
                    col.styleFilter = function (e) {
                        if (e.PId > 0)
                            return { 'dispaly': 'none' };
                        else
                            return {
                                'font-family': 'FontAwesome',
                                'cursor': 'pointer',
                                'color': 'rgb(123, 28, 33)'
                            };
                    }
                    col.attrs = { 'title': GetTextByKey("P_SET_ADD", 'Add') };
                }
                else if (col.name === "Edit") {
                    col.filter = function () {
                        return '\uf044';
                    };
                    col.onclick = function (e) {
                        OnEdit();
                    };
                    col.styleFilter = function (e) {
                        return {
                            'font-family': 'FontAwesome',
                            'cursor': 'pointer',
                            'color': 'rgb(123, 28, 33)'
                        };
                    }
                    col.attrs = { 'title': GetTextByKey("P_SET_EDIT", 'Edit') };
                }
                else if (col.name === "Delete") {
                    col.filter = function () {
                        return '\uf00d';
                    };
                    col.onclick = function (e) {
                        OnDelete();
                    };
                    col.styleFilter = function (e) {
                        return {
                            'font-family': 'FontAwesome',
                            'cursor': 'pointer',
                            'color': 'rgb(123, 28, 33)'
                        };
                    }
                    col.attrs = { 'title': GetTextByKey("P_SET_DELETE", 'Delete') };
                }
                columns.push(col);
            }
            return columns;
        }

        function OnDialogOK() {
            var item = {
                'Code': $.trim($('#dialog_code').val()),
                'Name': $.trim($('#dialog_name').val()),
                'Notes': $.trim($('#dialog_notes').val())
            };
            var alerttitle;
            if (departmentID) {
                item.Id = departmentID;
                item.PId = pID;
                alerttitle = GetTextByKey("P_SET_EDITDEPARTMENT", "Edit Department");
            } else {
                item.Id = -1;
                item.PId = pID;
                alerttitle = GetTextByKey("P_SET_ADDDEPARTMENT", "Add Department");
            }

            if (!item.Code || item.Code.length == 0) {
                showAlert(GetTextByKey("P_SET_CODECANNOTBEEMPTY", 'Code cannot be empty.'), alerttitle);
                $('#dialog_code').focus();
                return;
            }

            if (!item.Name || item.Name.length == 0) {
                showAlert(GetTextByKey("P_SET_DEPARTMENTNAMECANNOTBEEMPTY", 'Department name cannot be empty.'), alerttitle);
                $('#dialog_name').focus();
                return;
            }

            departmentrequest("SaveDepartment", htmlencode(JSON.stringify(item)), function (data) {
                if (typeof (data) === "string") {
                    showAlert(data, GetTextByKey("P_SET_ERROR", 'Error'));
                    return;
                }

                showmaskbg(false);
                $('#dialog_department').hideDialog();
                OnRefresh();
            }, function (err) {
                showmaskbg(false);
            });
        }

        $(function () {
            setPageTitle(GetTextByKey("P_SET_MANAGEDEPARTMENTS", 'Manage Departments'), true);
            initGrid();

            OnRefresh();

            $('#dialog_department').dialog(function () {
                showmaskbg(false);
            });

            $(window).resize(function () {
                $("#departmentlist").css("height", $(window).height() - $("#departmentlist").offset().top - 4);
            }).resize();

        });
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="recordcontent" style="padding: 0px; margin: 0px;">
        <div class="page_title" data-lgid="P_SET_MANAGEDEPARTMENTS">Manage Departments</div>
        <div class="function_title">
            <span class="sbutton iconadd" onclick="OnAdd();" data-lgid="P_SET_ADD">Add</span>
            <span class="sbutton iconrefresh" onclick="OnRefresh();" data-lgid="P_SET_REFRESH">Refresh</span>
        </div>
        <div class="clear"></div>
        <div id="departmentlist">
            <data-grid ref="grid" v-bind:columns="columns" v-bind:source="source" v-bind:allow-editing="true" v-on:rowdblclick="rowdblclick"
                v-bind:allow-auto-new-row="false" v-bind:total-row="totalRow" body-class="autoHeightBody">
            </data-grid>
        </div>
        <%--<div id="departmentlist"></div>--%>
    </div>
    <div id="mask_bg" style="display: none;"><div class="loading c-spin"></div></div>

    <div class="dialog" id="dialog_department" style="display: none; width: 500px;">
        <div class="dialog-title"><span class="title" data-lgid="P_SET_ADDLOCATIONS">Add Department</span><em class="dialog-close"></em></div>
        <div class="dialog-content">
            <table>
                <tr>
                    <td class="label" data-lgid="P_SET_DEPARTMENTNAME_COLON">Department Name:</td>
                    <td>
                        <input type="text" id="dialog_name" maxlength="200" tabindex="1" style="width: 320px;" autocomplete="off" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_SET_CODE_COLON">Code:</td>
                    <td>
                        <input type="text" id="dialog_code" maxlength="20" tabindex="1" style="width: 320px;" autocomplete="off" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_SET_NOTES_COLON">Notes:</td>
                    <td>
                        <textarea id="dialog_notes" maxlength="1000" tabindex="1" style="width: 320px;"></textarea></td>
                </tr>
            </table>
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_SET_CANCEL" class="dialog-close" tabindex="8" />
            <input type="button" onclick="OnDialogOK();" value="OK" data-lgid="P_SET_OK" tabindex="7" />
            <div class="clear"></div>
        </div>
    </div>
</asp:Content>