Shulou(Shulou.com)06/02 Report--

This article is about how JavaScript implements the voice queuing and dialing system. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Introduction

Voice queuing system is widely used in banks, catering, hospitals and other scenes. The system uses Layui framework to complete, the front-end experience is good, based on the role to achieve the rights management, to achieve the unlimited expansion of the database menu and menu link dynamic control, the system to achieve code scanning queuing, voice calling and other functions.

Development language: C #

Database: sql server2017

Development tool: vs2019

Technology: asp.net+layui

Main function

Login interface with CAPTCHA, the background can be replaced.

Role-based rights management.

The system has the function of printing and exporting data tables.

Support for filtering columns and combining queries.

The system realizes the function of skin change.

Effect display

The key code Nighthawk queuing system v1.0 searches for information service types: All personal business to public business Keyword  search Add edit delete view call number completed expired view layui.use (['form' 'table'], function () {var $= layui.jquery Form = layui.form; table = layui.table; layer = layui.layer Table.render ({elem:'# currentTableId', url:'.. / Ajax.ashx?rnum=2', toolbar:'# toolbarDemo', defaultToolbar: ['filter',' exports', 'print', {title:' prompt', layEvent: 'LAYTABLE_TIPS'' Icon: 'layui-icon-tips'}], cellMinWidth: 80, cols: [{type: "checkbox", width: 50}, {field:' ID', width: 80, title: 'ID'}, {field:' CreateTime', width: 200, title: 'creation time'} {field: 'CustName', width: 100, title:' customer name'}, {field: 'CustIDCard', width:200, title:' ID card'}, {field: 'CustTel', width: 120, title:' customer phone', edit: 'text'}, {field:' LineNum', width: 60, title: 'ranking'} {field: 'WindowNumStr', width: 120, title:' current window'}, {field: 'BuType', title:' type, width: 120 BuTypeStr', title hide: true}, {field: 'BuTypeStr', title:' type, width: 120}, {field: 'BuStatusStr', width: 80, title:' status'} {field: 'Memo', title:' remarks (click on the cell to change comments), event: 'setMemo'}, {field:' CallTime', title: 'last call time', hide: true}, {field: 'FinishTime', title:' business completion time, hide: true} {field: 'OptName', title:' business managers', hide: true}, {field: 'OptUserId', title:' business managers ID', hide: true}, {field: 'WindowNum', title:' window slogans', hide: true}, {field: 'LineNum', title:' queue number', hide: true} {title: 'operation', width:300, toolbar:'# currentTableBar', align: "center"}]], limits: [10,15,20,25,50,100], limit: 10, page: true, skin: 'line', done (res, curr, count) {let data = res.data Data.forEach ((value, I) = > {/ / console.log (value.BuStatus)) / / set the background color of the current line if (value.BuStatus = = "1") {$('.layui-table tr [data-index= "' + I +']') .css ({'background-color':' red','color':'#fff'}) according to the status field of each line } else if (value.BuStatus = = "2") {$('.layui-table tr [data-index= "' + I +']') .css ({'background-color':' # 3cb371, 'color':' # fff'}) } else if (value.BuStatus = = "3") {$('.layui-table tr [data-index= "' + I +'"]') .css ({'background-color':' # ccc', 'color':' # fff'});});}}) / / listen to the search operation form.on ('submit (data-search-btn)', function (data) {/ / perform search overload table.reload ('currentTableId', {page: {curr: 1}) Where: {BuType: data.field.BuType, SearchKey: data.field.SearchKey}}, 'data') Return false;}) / * toolbar snooping event * / table.on ('toolbar (currentTableFilter)', function (obj) {if (obj.event = 'add') {/ / snooping add operation var index = layer.open ({title:' new users', type: 2 ZIndex: layer.zIndex, id: 'LAY_layuiproadd', / / set an id Prevent repeated popups of shade: 0.1, maxmin: true, / / shadeClose: true, area: ['60% blank, '520px'], content:'.. / page/table/TbLineUpAdd.aspx', success: function (layero) Index) {layer.setTop (layero) }}); $_ (window) .on ("resize", function () {layer.full (index);});} else if (obj.event = = 'delete') {/ / listen delete operation var checkStatus = table.checkStatus (' currentTableId') Var dataarray = checkStatus.data; var ids = "0"; for (var I = 0; I

< dataarray.length; i++) { ids += "," + dataarray[i].ID; } ids += ",0"; layer.confirm('确定删除该记录吗？一旦删除不能恢复!', { icon: 3, title: '提示' }, function (index) { $.ajax({ url: '../Ajax.ashx', //要请求的url地址 type: 'POST', //请求方法 GET or POST async: true, //是否使用异步请求的方式 timeout: 5000, //请求超时的时间，以毫秒计 data: { rnum: 10, ids: ids }, dataType: 'json', success: function (data) { console.log(obj); layer.alert("删除成功"); table.reload('currentTableId', {}) } }); }); } else if (obj.event === 'edit') { var checkStatus = table.checkStatus('currentTableId'); var dataarray = checkStatus.data; console.log(dataarray); if (dataarray.length >

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.