商丘市柘城县——前端

Work-Seach.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
  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,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link href="../css/mui.min.css" rel="stylesheet" />
  10. <!--<link rel="stylesheet" href="css/app.css" />-->
  11. <link href="../css/mui.picker.css" rel="stylesheet" />
  12. <link href="../css/mui.poppicker.css" rel="stylesheet" />
  13. <link rel="stylesheet" href="../css/iconfont.css" />
  14. <link rel="stylesheet" href="../css/inits.css" />
  15. <style>
  16. body{
  17. font-size: 14px;
  18. }
  19. input{
  20. font-size: 14px;
  21. }
  22. .mui-bar-popover {
  23. width: 30%;
  24. }
  25. .mui-popover.mui-bar-popover .mui-table-view {
  26. width: 100%;
  27. }
  28. .mui-table-view .mui-table-view-cell>a:not(.mui-btn) {
  29. text-align: center;
  30. }
  31. .mui-table-view-cell {
  32. padding: 1px 15px!important;
  33. }
  34. .san {
  35. font-size: 14px;
  36. margin-right: 5px
  37. }
  38. .nav_a {
  39. border-right: 1px solid #ccc;
  40. }
  41. .radio_box {
  42. display: inline-block;
  43. }
  44. .mui-radio input[type=radio]:before {
  45. font-size: 20px;
  46. vertical-align: middle;
  47. }
  48. .mui-radio.mui-left input[type=radio] {
  49. line-height: 24px!important;
  50. }
  51. .mui-radio.mui-left label {
  52. padding-right: 1px!important;
  53. padding-left: 51px!important;
  54. }
  55. .ztext {
  56. width: 100%;
  57. margin: 0;
  58. border: 0;
  59. }
  60. .action {
  61. padding: 5px 15px;
  62. }
  63. .type_down {
  64. float: right!important;
  65. display: inline-block!important;
  66. vertical-align: middle!important;
  67. line-height: 42px;
  68. }
  69. .type_con {
  70. width: 55%!important;
  71. float: left!important;
  72. vertical-align: middle!important;
  73. display: inline-block!important;
  74. padding: 10px 0!important;
  75. }
  76. .label {
  77. width: 30%!important;
  78. padding: 11px 0px!important;
  79. }
  80. .get_yzm {
  81. padding: 5px!important;
  82. width: auto!important;
  83. }
  84. .yzm_con {
  85. float: left!important;
  86. width: 40%!important;
  87. }
  88. .mui-bar-nav {
  89. background-color: #00a1cb;
  90. }
  91. .mui-input-row label {
  92. text-align: -webkit-right;
  93. }
  94. .mui-btn-block {
  95. padding: 10px;
  96. width: 100%;
  97. }
  98. .mui-title {
  99. color: #fff;
  100. }
  101. .mui-action-back {
  102. color: #fff;
  103. }
  104. </style>
  105. </head>
  106. <body>
  107. <header class="mui-bar mui-bar-nav " style="padding-right: 15px;color: #fff;">
  108. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="font-size: 24px!important;"></a>
  109. <h1 class="mui-center mui-title">查询工单</h1>
  110. </header>
  111. <div class="mui-content">
  112. <ul class="mui-table-view">
  113. <li class="mui-table-view-cell">
  114. <div class="mui-input-row">
  115. <label class="label">工单号:</label>
  116. <input type="text" id="wid" placeholder="请填工单号">
  117. </div>
  118. </li>
  119. <li class="mui-table-view-cell">
  120. <div class="mui-input-row">
  121. <label class="label">投诉人:</label>
  122. <input type="text" id="LXR" placeholder="请填写您的称呼">
  123. </div>
  124. </li>
  125. <li class="mui-table-view-cell">
  126. <div class="mui-input-row">
  127. <label class="label">投诉电话:</label>
  128. <input type="text" id="LXRphone" placeholder="请填写联系电话">
  129. </div>
  130. </li>
  131. <li class="mui-table-view-cell" id="ZX">
  132. <div class="mui-input-row">
  133. <label class="label">坐席:</label>
  134. <input type="text" id='ZXResult' class="ui-alert type_con" data-index="" readonly="readonly" />
  135. <a href=""><span class="type_down mui-icon mui-icon-arrowdown mui-pull-right"></span></a>
  136. </div>
  137. </li>
  138. <li class="mui-table-view-cell" id="showZhuTiPicker">
  139. <div class="mui-input-row">
  140. <label class="label">主题词:</label>
  141. <input type="text" id='zhuTiResult' class="ui-alert type_con" data-index="" readonly="readonly" />
  142. <a href=""><span class="type_down mui-icon mui-icon-arrowdown mui-pull-right"></span></a>
  143. </div>
  144. </li>
  145. <li class="mui-table-view-cell" id="showUserPicker">
  146. <div class="mui-input-row">
  147. <label class="label">诉求类型:</label>
  148. <input type="text" id='userResult' class="ui-alert type_con" data-index="" readonly="readonly" />
  149. <a href=""><span class="type_down mui-icon mui-icon-arrowdown mui-pull-right"></span></a>
  150. </div>
  151. </li>
  152. <li class="mui-table-view-cell" id="DW">
  153. <div class="mui-input-row">
  154. <label class="label">交办单位:</label>
  155. <input type="text" id='DWResult' class="ui-alert type_con" data-index="" readonly="readonly" />
  156. <a href=""><span class="type_down mui-icon mui-icon-arrowdown mui-pull-right"></span></a>
  157. </div>
  158. </li>
  159. </ul>
  160. <!--<button type="button" class="mui-btn mui-btn-primary mui-btn-block block_button">提交</button>-->
  161. <div style="padding: 10px; ">
  162. <button type="button"style="background-color: #00a1cb; border: none;" data-loading-text="提交中" class="mui-btn mui-btn-primary mui-btn-block block_button submit">提交</button>
  163. </div>
  164. </div>
  165. <script src="../js/mui.min.js?"></script>
  166. <script src="../js/mui.picker.js"></script>
  167. <script src="../js/mui.poppicker.js"></script>
  168. <script src="../js/zepto.js"></script>
  169. <script src="../js/huayi.config.js"></script>
  170. <script type="text/javascript">
  171. mui.init({
  172. swipeBack: false,
  173. })
  174. mui.plusReady(function() {
  175. var wv = plus.webview.currentWebview();
  176. var token = localStorage.getItem("token");
  177. // var Index=wv.indexs;
  178. // var Tap_= wv.tab;
  179. var wid;//工单号
  180. var LXR;//联系人
  181. var LXRphone;//联系电话
  182. var ZXResult;//坐席
  183. var zhuTiResult;//主题
  184. var userResult;//诉求类型
  185. var DWResult;//交办单位
  186. var Type;//工单状态
  187. // alert(Index)
  188. plus.nativeUI.closeWaiting();
  189. //显示当前页面
  190. mui.currentWebview.show();
  191. //提交按钮
  192. $('.submit').on('tap', function() {
  193. Submit()
  194. })
  195. //工单状态
  196. //坐席
  197. var zxList = [];
  198. $.ajax({
  199. type: "get",
  200. url: huayi.config.callcenter_url + 'UserAccount/GetSeatList',
  201. async: false,
  202. data: {
  203. token: token
  204. },
  205. dataType: 'json',
  206. success: function(data) {
  207. var type_data = data.data;
  208. $(type_data).each(function(i, n) {
  209. var obj = {};
  210. obj.value = n.F_UserCode;
  211. obj.text = n.F_UserName;
  212. zxList.push(obj)
  213. })
  214. }
  215. });
  216. //交办单位
  217. var dwList;
  218. $.ajax({
  219. type: "get",
  220. url: huayi.config.callcenter_url + 'Department/GetDeptListtree',
  221. async: false,
  222. data: {
  223. token: token
  224. },
  225. dataType: 'json',
  226. success: function(data) {
  227. dwList = data.data;
  228. console.log(dwList);
  229. }
  230. });
  231. //工单类型
  232. var typeList = [];
  233. $.ajax({
  234. type: "get",
  235. url: huayi.config.callcenter_url + 'Dictionary/GetDicValueListById?',
  236. async: false,
  237. data: {
  238. token: token,
  239. id: 2
  240. },
  241. dataType: 'json',
  242. success: function(data) {
  243. var type_data = data.data;
  244. $(type_data).each(function(i, n) {
  245. var obj = {};
  246. obj.value = n.F_ValueId;
  247. obj.text = n.F_Value;
  248. typeList.push(obj)
  249. })
  250. }
  251. });
  252. //主题词
  253. var keyList = [];
  254. $.ajax({
  255. type: "get",
  256. url: huayi.config.callcenter_url + 'Dictionary/GetDicValueListById?',
  257. async: false,
  258. data: {
  259. token: token,
  260. id: 3
  261. },
  262. dataType: 'json',
  263. success: function(data) {
  264. var key_data = data.data;
  265. $(key_data).each(function(i, n) {
  266. var obj = {};
  267. obj.value = n.F_ValueId;
  268. obj.text = n.F_Value;
  269. keyList.push(obj)
  270. })
  271. }
  272. });
  273. function Submit() {
  274. wid = $("#wid").val();
  275. LXR = $("#LXR").val();
  276. LXRphone = $("#LXRphone").val();
  277. ZXResult = $("#ZXResult").attr('data-index');
  278. zhuTiResult = $("#zhuTiResult").attr('data-index');
  279. userResult = $("#userResult").attr('data-index');
  280. DWResult = $("#DWResult").attr('data-index');
  281. //跳转 网络单位跳转
  282. mui.openWindow({
  283. id: 'Work-list',
  284. url: 'Work-list.html',
  285. show: {
  286. aniShow: 'pop-in'
  287. },
  288. styles: {
  289. popGesture: 'hide'
  290. },
  291. waiting: {
  292. autoShow: true
  293. },
  294. extras: {
  295. wids: wid,
  296. LXRs: LXR,
  297. LXRphones: LXRphone,
  298. ZXResults: ZXResult,
  299. zhuTiResults: zhuTiResult,
  300. userResults: userResult,
  301. DWResults: DWResult,
  302. token: token,
  303. test:"123"
  304. }
  305. });
  306. Clean();
  307. }
  308. (function($, doc) {
  309. $.init();
  310. $.ready(function() {
  311. //诉求类型
  312. var userPicker = new $.PopPicker();
  313. userPicker.setData(typeList);
  314. var showUserPickerButton = doc.getElementById('showUserPicker');
  315. var userResult = doc.getElementById('userResult');
  316. showUserPickerButton.addEventListener('tap', function(event) {
  317. userPicker.show(function(items) {
  318. console.log(items)
  319. userResult.value = items[0].text;
  320. userResult.setAttribute("data-index", items[0].value);
  321. //返回 false 可以阻止选择框的关闭
  322. //return false;
  323. });
  324. }, false);
  325. //主题词
  326. var zhuTiPicker = new $.PopPicker();
  327. zhuTiPicker.setData(keyList);
  328. var showZhuTiPickerButton = doc.getElementById('showZhuTiPicker');
  329. var zhuTiResult = doc.getElementById('zhuTiResult');
  330. showZhuTiPickerButton.addEventListener('tap', function(event) {
  331. zhuTiPicker.show(function(items) {
  332. console.log(items)
  333. zhuTiResult.value = items[0].text;
  334. zhuTiResult.setAttribute("data-index", items[0].value);
  335. //返回 false 可以阻止选择框的关闭
  336. //return false;
  337. });
  338. }, false);
  339. //坐席
  340. var ZTiPicker = new $.PopPicker();
  341. ZTiPicker.setData(zxList);
  342. var ZX = doc.getElementById('ZX');
  343. var ZXResult = doc.getElementById('ZXResult');
  344. ZX.addEventListener('tap', function(event) {
  345. ZTiPicker.show(function(items) {
  346. console.log(items)
  347. ZXResult.value = items[0].text;
  348. ZXResult.setAttribute("data-index", items[0].value);
  349. //返回 false 可以阻止选择框的关闭
  350. //return false;
  351. });
  352. }, false);
  353. //交办单位
  354. var ZTiPickers = new $.PopPicker({
  355. layer: 3
  356. });
  357. ZTiPickers.setData(dwList);
  358. var ZXs = doc.getElementById('DW');
  359. var ZXResults = doc.getElementById('DWResult');
  360. ZXs.addEventListener('tap', function(event) {
  361. ZTiPickers.show(function(items) {
  362. console.log(items)
  363. ZXResults.value = items[2].text;
  364. ZXResults.setAttribute("data-index", items[2].id);
  365. //返回 false 可以阻止选择框的关闭
  366. //return false;
  367. });
  368. }, false);
  369. })
  370. })(mui, document);
  371. //清除
  372. function Clean(){
  373. $("#wid").val('');
  374. $("#LXR").val('');
  375. $("#LXRphone").val('');
  376. $("#ZXResult").val('');
  377. $("#zhuTiResult").val('');
  378. $("#userResult").val('');
  379. $("#DWResult").val('');
  380. $('#WorkType').val('');
  381. }
  382. });
  383. </script>
  384. </body>
  385. </html>