鑫苑新版本前端代码

WelcomeWords.html 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>欢迎词语音管理</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <script src="../Script/Common/huayi.load.js"></script>
  8. <script src="../Script/Common/huayi.config.js"></script>
  9. <script src="../js/bootstrap-select/js/bootstrap-select.js"></script>
  10. <script src="../js/bootstrap-select/js/i18n/defaults-zh_CN.js"></script>
  11. <link href="../js/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
  12. <link href="../css/Table/table1.css" rel="stylesheet" />
  13. <link href="../css/init.css" rel="stylesheet" />
  14. <script src="../js/laydate/laydate.js"></script>
  15. <style>
  16. table td {
  17. word-break: break-all;
  18. word-wrap: break-word;
  19. }
  20. .add_time input {
  21. width: 50%;
  22. }
  23. .th-box {
  24. background-color: #ffffff;
  25. }
  26. #settime,#settimes{
  27. width: 228px;
  28. }
  29. .bootstrap-select .dropdown-toggle,.open .dropdown-toggle.btn-default{
  30. background: #fff!important;
  31. }
  32. .btn-default{
  33. border-color: #e5e6e7;
  34. }
  35. .bootstrap-select.btn-group .dropdown-toggle .filter-option{
  36. color: #555;
  37. }
  38. .bootstrap-select.btn-group .dropdown-menu li{
  39. width: 100%;
  40. }
  41. </style>
  42. </head>
  43. <body class="gray-bg">
  44. <div class="daoHang clearfix">
  45. <div class="dhLeft">
  46. <sapn><i class="syIcon"></i>位置:
  47. <a href="javaScript:;" id="ReIndex">首页</a>&gt;
  48. <a href="javaScript:;">话务管理</a>&gt;
  49. <a href="" style="color: #000;">欢迎词语音管理</a>
  50. </sapn>
  51. </div>
  52. <div class="dhRight">
  53. <a href="#" title="刷新"><i class="fa fa-refresh"></i></a>
  54. </div>
  55. </div>
  56. <div class="wrapper wrapper-content animated fadeInRight">
  57. <div class="th-box">
  58. <div class="form-inline clearfix th-bar">
  59. <div class="form-group time-box">
  60. <i class="tub fa fa-search"></i>
  61. <input type="text" class="form-control" id="KeyWords" placeholder="请输入关键字">
  62. </div>
  63. <div class="form-group time-box">
  64. <select class="form-control selectpicker" id="itemid" data-live-search="true">
  65. <option value="">请选择项目</option>
  66. </select>
  67. </div>
  68. <div class="form-group time-box">
  69. <i class="tub fa fa-calendar"></i>
  70. <input type="text" class="form-control" id="settime" placeholder="请选择起止时间">
  71. </div>
  72. <div class="form-group time-box">
  73. <i class="tub fa fa-calendar"></i>
  74. <input type="text" class="form-control" id="settimes" placeholder="请选择有效时间">
  75. </div>
  76. <div class="form-group time-box">
  77. <select class="form-control" id="state">
  78. <option value="">请选择状态</option>
  79. <option value="0">未启动</option>
  80. <option value="1">启动中</option>
  81. </select>
  82. </div>
  83. <div class="form-group pull-right tool_bars">
  84. <a href="download.zip" download="download.zip" title="语音合成软件" >下载语音软件</a>
  85. <input type="button" class="sc_btn" id="sceach_btn" value="搜索" />
  86. <input type="button" class="sc_btn" id="HY_add" onclick="btn_add()" value="添加" />
  87. <input type="button" class="sc_btn" id="HY_edit" onclick="btn_edit()" value="修改" />
  88. <input type="button" class="sc_btn" id="HY_delete" onclick="btn_deletes()" value="删除" />
  89. </div>
  90. </div>
  91. </div>
  92. <div style="width: 100%;padding-top: 10px;">
  93. <table id="list" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true" data-click-to-select="true">
  94. <thead>
  95. <tr>
  96. <th data-field="state" data-checkbox="true"></th>
  97. <th data-field="F_Item">项目名称</th>
  98. <th data-field="F_WavPath" data-formatter="setCode" data-align="center">录音</th>
  99. <th data-field="F_StartDate">生效时间</th>
  100. <th data-field="F_EndDate">失效时间</th>
  101. <th data-field="F_CreateTime">创建时间</th>
  102. <th data-field="F_IsState" data-formatter="formatterState">状态</th>
  103. <th data-field="F_Remark" data-formatter="formatterRemark">备注</th>
  104. </tr>
  105. </thead>
  106. <tbody id="tbody"></tbody>
  107. </table>
  108. </div>
  109. </div>
  110. <!--下载框-->
  111. <div class="t-shade">
  112. <div class="shade_k">
  113. <div class="shade_title">
  114. <span>录音播放与下载<srong class="cknum"></srong></span>
  115. <span class="setwin"><a>x</a></span>
  116. </div>
  117. <div class="shade_content">
  118. <div class="Ly_box audiojs">
  119. </div>
  120. <div class="boxCon LY_box">
  121. </div>
  122. </div>
  123. </div>
  124. </div>
  125. <script>
  126. var htmls=' <div class="ly_text">'+
  127. '<object id="WindowsMediaPlayer" style="width: 95%; height: 100px;margin:15px 2%;" classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" '+
  128. ' viewastext>'+
  129. ' <param name="URL" value="">'+
  130. '<param name="rate" value="1">'+
  131. '<param name="balance" value="0">'+
  132. '<param name="currentPosition" value="0">'+
  133. '<param name="defaultFrame" value="">'+
  134. '<param name="playCount" value="1">'+
  135. '<param name="autoStart" value="-1">'+
  136. '<param name="currentMarker" value="0">'+
  137. '<param name="invokeURLs" value="0">'+
  138. '<param name="baseURL" value="">'+
  139. '<param name="volume" value="50">'+
  140. '<param name="mute" value="0">'+
  141. '<param name="uiMode" value="mini">'+
  142. '<param name="stretchToFit" value="0">'+
  143. '<param name="windowlessVideo" value="-1">'+
  144. '<param name="enabled" value="-1">'+
  145. '<param name="enableContextMenu" value="0">'+
  146. '<param name="fullScreen" value="0">'+
  147. ' <param name="SAMIStyle" value="">'+
  148. '<param name="SAMILang" value="">'+
  149. '<param name="SAMIFilename" value="">'+
  150. ' <param name="captioningID" value="">'+
  151. '<param name="enableErrorDialogs" value="-1">'+
  152. '<param name="_cx" value="4233">'+
  153. '<param name="_cy" value="4392">'+
  154. '</object>'+
  155. '<div style="width: 95%; margin:0 auto; text-align:center;" class="xzly"></div>'+
  156. '</div>';
  157. $(document).ready(function() {
  158. laydate.render({
  159. elem: '#settime',
  160. theme: '#1ab394',
  161. calendar: true,
  162. range: '~'
  163. });
  164. laydate.render({
  165. elem: '#settimes',
  166. theme: '#1ab394',
  167. calendar: true,
  168. range: '~'
  169. });
  170. initTable();
  171. /*搜索*/
  172. $("#sceach_btn").click(function() {
  173. initTable();
  174. })
  175. $(".setwin").click(function() {
  176. $(".t-shade").removeClass("cx");
  177. $('audio')[0].pause();
  178. });
  179. GetProject($('#itemid'));//获取项目
  180. })
  181. function initTable() {
  182. //先销毁表格
  183. $('#list').bootstrapTable('destroy');
  184. //初始化表格,动态从服务器加载数据
  185. $("#list").bootstrapTable({
  186. method: "get", //使用get请求到服务器获取数据
  187. url: huayi.config.callcenter_url + "IVRWelcome/GetList", //获取数据的Servlet地址
  188. contentType: 'application/x-www-form-urlencoded',
  189. striped: true, //表格显示条纹
  190. pagination: true, //启动分页
  191. pageSize: 10, //每页显示的记录数
  192. pageNumber: 1, //当前第几页
  193. pageList: [10, 20, 50, 100], //记录数可选列表
  194. search: false, //是否启用查询
  195. showColumns: false, //显示下拉框勾选要显示的列
  196. showRefresh: false, //显示刷新按钮
  197. sidePagination: "server", //表示服务端请求
  198. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  199. //设置为limit可以获取limit, offset, search, sort, order
  200. queryParamsType: "undefined",
  201. queryParams: function queryParams(params) { //设置查询参数
  202. var param = {
  203. page: params.pageNumber,
  204. pagesize: params.pageSize,
  205. key: $("#KeyWords").val(),
  206. itemid: $("#itemid").val(),
  207. btime: $('#settime').val() && $('#settime').val().split(' ~ ')[0],
  208. etime: $('#settime').val() && $('#settime').val().split(' ~ ')[1],
  209. bytime: $('#settimes').val() && $('#settimes').val().split(' ~ ')[0],
  210. eytime: $('#settimes').val() && $('#settimes').val().split(' ~ ')[1],
  211. state:$('#state').val(),
  212. token: $.cookie("token")
  213. };
  214. return param;
  215. },
  216. onLoadSuccess: function() { //加载成功时执行
  217. //layer.msg("加载成功");
  218. },
  219. onLoadError: function() { //加载失败时执行
  220. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  221. }
  222. });
  223. }
  224. /*删除提示*/
  225. function btn_deletes(){
  226. var ids = $.map($('#list').bootstrapTable('getSelections'),
  227. function(row) {
  228. return row.F_ID;
  229. });
  230. /*判断长度*/
  231. if(ids.length <= 0) {
  232. layer.confirm('没有可删除的选项?', {
  233. btn: ['确定'] //按钮
  234. });
  235. return;
  236. }
  237. removes();
  238. }
  239. function removes() {
  240. layer.confirm('确定删除当前记录?', {
  241. btn: ['是', '否'] //按钮
  242. }, function() {
  243. /*执行删除*/
  244. var ids = $.map($('#list').bootstrapTable('getSelections'),
  245. function(row) {
  246. return row.F_ID;
  247. });
  248. /*发送请求*/
  249. $.post(huayi.config.callcenter_url + "IVRWelcome/DelIVRWords", {
  250. ids: ids,
  251. token: $.cookie("token")
  252. }, function(result) {
  253. result = JSON.parse(result);
  254. if(result.state.toLowerCase() == "success") {
  255. layer.msg("删除成功");
  256. $('#list').bootstrapTable('refresh');
  257. }
  258. })
  259. });
  260. }
  261. //添加
  262. function btn_add(){
  263. layer.open({
  264. type: 2,
  265. content: "addWelcomeWords.html",
  266. title: '添加欢迎词语音',
  267. area: ['75%', '70%'], //宽高
  268. });
  269. }
  270. //修改
  271. function btn_edit(){
  272. var ids = $.map($('#list').bootstrapTable('getSelections'),
  273. function(row) {
  274. return row.F_ID;
  275. });
  276. if(ids.length != 1) {
  277. layer.confirm('请选择一行进行修改?', {
  278. btn: ['确定'] //按钮
  279. });
  280. return;
  281. } else {
  282. layer.open({
  283. type: 2,
  284. content: "addWelcomeWords.html?id="+ids,
  285. title: '修改欢迎词语音',
  286. area: ['75%', '70%'], //宽高
  287. });
  288. }
  289. }
  290. //状态
  291. function formatterState(val,row){
  292. var str="";
  293. if(val==0){
  294. str='未启动'
  295. }else{
  296. str='启动中'
  297. }
  298. return str
  299. }
  300. //备注
  301. function formatterRemark(val){
  302. var str="";
  303. if(val) {
  304. if(val.length > 12) {
  305. str='<div title="'+ val +'">'+val.substring(0, 12) + '...</div>';
  306. }else{
  307. str='<div title="'+ val +'">'+ val + '</div>';
  308. }
  309. return str;
  310. }
  311. }
  312. //音频
  313. function setCode(val,row) {
  314. if(val) {
  315. return '<div class="imgs">' +
  316. '<img src="../img/vice.png" alt="" onclick= ck(this) item="' + val + '" Files="'+ row.F_WavFileName +'" />' +
  317. '</div>';
  318. } else {
  319. return '';
  320. }
  321. }
  322. //录音
  323. function ck(val) {
  324. if(!!window.ActiveXObject || "ActiveXObject" in window){
  325. layer.open({
  326. type: 1,
  327. content: htmls,
  328. title: '录音播放',
  329. area: ['55%', '65%'], //宽高
  330. });
  331. WindowsMediaPlayer.URL=$(val).attr('item');
  332. $('<a href="' + $(val).attr('item') + '" class="sc_btn LY "download="' + $(val).attr('item') + '">下载录音</a>').appendTo(".xzly");
  333. }else{
  334. var path = $(val).attr("item");
  335. $(".t-shade").addClass("cx");
  336. $(".Ly_box").empty();
  337. $(".LY_box").empty();
  338. $('<audio style="width:100%;"class=" " src="' + path + '" loop="loop" type="audio/v3" controls="controls"></audio>').appendTo(".Ly_box");
  339. $('<a href="' + $(val).attr('item') + '" class="sc_btn LY "download="' + $(val).attr('item') + '">下载录音</a>').appendTo(".LY_box");
  340. }
  341. }
  342. function GetProject(obj) {
  343. obj.empty();
  344. obj.append('<option selected="selected" value="">请选择项目</option>');
  345. $.getJSON(huayi.config.callcenter_url + "IVRWelcome/GetItems", function (data) {
  346. if (data.state.toLowerCase() == "success") {
  347. var content = data.data.ds;
  348. $(content).each(function (i, n) {
  349. $("<option value='" + n.projectname + "'>" + n.projectname + "</option>").appendTo(obj);
  350. })
  351. obj.selectpicker('refresh');
  352. }
  353. })
  354. }
  355. </script>
  356. </body>
  357. </html>