387 lines
15 KiB
Plaintext
387 lines
15 KiB
Plaintext
<%@ 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>
|