index.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7. <title>行政机构</title>
  8. <link rel="stylesheet" href="../../../assets/libs/layui/css/layui.css"/>
  9. <link rel="stylesheet" href="../../../assets/module/admin.css?v=312"/>
  10. <link rel="stylesheet" href="../../../assets/module/city-picker/city-picker.css" />
  11. <link rel="stylesheet" href="../../../assets/module/uParas.css?v=312"/>
  12. <link rel="stylesheet" href="../../../assets/module/zTree/css/metroStyle/metroStyle.css?v=312"/>
  13. </head>
  14. <body>
  15. <!-- 页面加载loading -->
  16. <div class="page-loading">
  17. <div class="ball-loader">
  18. <span></span><span></span><span></span><span></span>
  19. </div>
  20. </div>
  21. <!-- 正文开始 -->
  22. <div class="layui-fluid">
  23. <div class="layui-card">
  24. <div class="layui-card-body">
  25. <div class="layui-form toolbar">
  26. <div class="layui-form-item text-right">
  27. <div class="layui-inline pull-left">
  28. <button id="btnAddTop" class="layui-btn icon-btn"><i class="layui-icon layui-icon-add-1"></i>机构</button>
  29. </div>
  30. <div class="layui-inline pull-right">
  31. <button id="btnRefresh" class="layui-btn icon-btn"><i class="layui-icon layui-icon-refresh"></i></button>
  32. </div>
  33. </div>
  34. </div>
  35. <table class="layui-table" id="datatable" lay-filter="datatable"></table>
  36. </div>
  37. </div>
  38. </div>
  39. <!-- 表格操作列 -->
  40. <script type="text/html" id="optionTpl">
  41. <div class="layui-btn-group">
  42. <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
  43. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" >删除</a>
  44. <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addSub" >添加下级</a>
  45. {{# if(d.orgAdminId > 0){ }}
  46. <a class="layui-btn layui-btn-radius layui-btn-xs" lay-event="resetAdminPwd" >重置管理员密码</a>
  47. {{# } }}
  48. </div>
  49. </script>
  50. <!-- 表单弹窗 -->
  51. <script type="text/html" id="modelOrgTpl">
  52. <form id="thisform" lay-filter="thisform" class="layui-form model-form">
  53. <div class="layui-form-item">
  54. <label class="layui-form-label">机构名称</label>
  55. <div class="layui-input-block">
  56. <input type="hidden" class="layui-input" id="orgId" name="orgId" value="" />
  57. <input type="hidden" class="layui-input" id="ogiId" name="ogiId" value="" />
  58. <input type="hidden" class="layui-input" id="orgParentId" name="orgParentId" value="0" />
  59. <input type="hidden" class="layui-input" id="orgRootId" name="orgRootId" value="0" />
  60. <input type="text" class="layui-input" id="orgName" name="orgName" placeholder="请输入机构名称"
  61. maxlength="50" lay-verType="tips" lay-verify="required" required/>
  62. </div>
  63. </div>
  64. <div class="layui-form-item">
  65. <label class="layui-form-label">机构代码</label>
  66. <div class="layui-input-block">
  67. <input type="text" id="orgCode" name="orgCode" placeholder="请输入机构代码" class="layui-input"/>
  68. </div>
  69. </div>
  70. <div class="layui-form-item">
  71. <label class="layui-form-label">机构类型</label>
  72. <div class="layui-input-block" >
  73. <select id="orgTypeId" name="orgTypeId" class="layui-select" lay-verType="tips" lay-verify="required" required>
  74. </select>
  75. </div>
  76. </div>
  77. <div class="layui-form-item">
  78. <label class="layui-form-label">行政区划</label>
  79. <div class="layui-input-block" >
  80. <input type="text" autocomplete="on" class="layui-input" id="orgAreaName" name="orgAreaName"
  81. readonly="readonly" data-toggle="city-picker" placeholder="请选择">
  82. </div>
  83. </div>
  84. <div class="layui-form-item text-right">
  85. <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
  86. <button class="layui-btn" lay-filter="modelSubmit" lay-submit>保存</button>
  87. </div>
  88. </form>
  89. </script>
  90. <script type="text/html" id="orgAdminTpl">
  91. {{# if(d.orgAdminId > 0){ }}
  92. <a class="layui-table-link" lay-event="editAdmin"><i class="layui-icon layui-icon-friends" ></i>{{d.accountName}}</a>
  93. {{# } else { }}
  94. <a class="layui-btn layui-btn-radius layui-btn-xs" lay-event="addAdmin"><i class="layui-icon layui-icon-add-1"></i>管理员</a>
  95. {{# } }}
  96. </script>
  97. <script type="text/html" id="orgIndustryTpl">
  98. {{# if(d.industryNameList != ""){ }}
  99. <a class="layui-table-link" lay-event="addIndustry">{{d.industryNameList}}</a>
  100. {{# } else { }}
  101. <a class="layui-btn layui-btn-radius layui-btn-xs" lay-event="addIndustry"><i class="layui-icon layui-icon-add-1"></i>行业 </a>
  102. {{# } }}
  103. </script>
  104. <!-- js部分 -->
  105. <script type="text/javascript" src="../../../assets/module/city-picker/city-picker.data.js"></script>
  106. <script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
  107. <script type="text/javascript" src="../../../assets/js/common.js?v=312"></script>
  108. <script>
  109. layui.use(['layer' ,'element' ,'form' ,'table' ,'admin' ,'treetable', 'uParas' ,'citypicker' ,'zTree'] ,function(){
  110. var $ = layui.jquery;
  111. var layer = layui.layer;
  112. var form = layui.form ;
  113. var table = layui.table;
  114. var admin = layui.admin;
  115. var treetable = layui.treetable;
  116. var uParas = layui.uParas;
  117. var citypicker = layui.citypicker;
  118. // 渲染表格
  119. function renderTable() {
  120. var url = uParas.baseUrl+'/sys/org/getOrgList' ;
  121. treetable.render({
  122. treeColIndex: 1,
  123. treeSpid : 0,
  124. treeIdName : 'orgId',
  125. treePidName : 'orgParentId',
  126. elem : '#datatable',
  127. treeDefaultClose: false,
  128. url : url,
  129. cellMinWidth: 100,
  130. toolbar: '#toolbar',
  131. defaultToolbar: ['filter'],
  132. cols: [[
  133. {type : 'numbers' ,title: '#' , align: 'center'},
  134. {field: 'orgName' ,title: '机构名称' , align: 'left' , width: 380},
  135. {field: 'orgTypeTitle' ,title: '类型' , align: 'center' , width:120},
  136. {field: 'orgAreaName' ,title: '行政区划' , align: 'left' , width:200},
  137. {field: 'orgCode' ,title: '组织机构代码', align: 'center' , width:120},
  138. {field: 'industryNameList',title: '监管行业' , align: 'center' , width: 150 ,templet: '#orgIndustryTpl' },
  139. {field: 'accountName' ,title: '管理员账号' , align: 'center' , width:150 ,templet: '#orgAdminTpl' },
  140. {templet: '#optionTpl' ,title: '操作' , align: 'center' , width:450}
  141. ]]
  142. });
  143. }
  144. renderTable();
  145. // 添加按钮点击事件
  146. $('#btnAddTop').click(function(){
  147. showAddModel({orgParentId :0 ,orgRootId :0});
  148. });
  149. // 添加按钮点击事件
  150. $('#btnRefresh').click(function(){
  151. renderTable();
  152. });
  153. // 工具条点击事件
  154. table.on('tool(datatable)',function (obj) {
  155. var data = obj.data;
  156. var layEvent = obj.event;
  157. if (layEvent == 'edit') { // 修改
  158. showEditModel(data);
  159. }else if (layEvent == 'del') { // 删除
  160. doDel(data);
  161. }else if (layEvent == 'addSub'){
  162. showAddModel({orgParentId: data.orgId, orgRootId: data.orgRootId});
  163. }else if(layEvent == 'addAdmin'){
  164. addAdmin(data);
  165. }else if(layEvent == 'editAdmin'){
  166. editAdmin(data);
  167. }else if(layEvent == 'resetAdminPwd'){
  168. resetAdminPwd(data);
  169. }else if(layEvent == 'addIndustry'){
  170. addIndustry(data);
  171. }
  172. });
  173. //行业树选择配置
  174. var IndustryTreesetting = {
  175. check: {
  176. enable: false,
  177. chkboxType: {"Y": "", "N": ""}
  178. },
  179. view: {
  180. dblClickExpand: false
  181. },
  182. data: {
  183. simpleData: {
  184. enable: true,
  185. idKey : "industryCode",
  186. pIdKey: "industryParentId",
  187. rootPId: 0
  188. },
  189. key: {
  190. name : "industryName",
  191. title: "industryName"
  192. }
  193. },
  194. callback: {
  195. onClick : industryTreeClick
  196. }
  197. };
  198. //行业树选择
  199. function industryTreeClick(e, d, node) {
  200. var industryName = node.industryName;
  201. var industryId = node.industryId;
  202. $("#industryName").val(industryName);
  203. $("#industryId").val(industryId);
  204. hideMenu("menuContent");
  205. }
  206. function hideMenu(id) {
  207. $("#"+id).fadeOut("fast");
  208. $("body").unbind("mousedown", onBodyDown);
  209. }
  210. function onBodyDown(event) {
  211. if (!( event.target.id == "industryName"
  212. || event.target.id == "menuContent"
  213. || $(event.target).parents("#menuContent").length > 0)) {
  214. hideMenu("menuContent");
  215. }
  216. }
  217. //添加管理员
  218. function addAdmin(data){
  219. admin.open({
  220. type: 2,
  221. title: '配置管理员信息',
  222. content: "./addAdmin.html?orgId="+data.orgId,
  223. area : ['600px' ,'500px'],
  224. success: function(layero ,dIndex){
  225. layer.setTop(layero);
  226. },
  227. end: function(){
  228. renderTable();
  229. }
  230. });
  231. }
  232. //添加管理员
  233. function editAdmin(data){
  234. admin.open({
  235. type: 2,
  236. title: '配置管理员信息',
  237. content: "./editAdmin.html?orgId="+data.orgId,
  238. area : ['600px' ,'500px'],
  239. success: function(layero ,dIndex){
  240. layer.setTop(layero);
  241. },
  242. end: function(){
  243. renderTable();
  244. }
  245. });
  246. }
  247. //重置密码员密码
  248. function resetAdminPwd(data){
  249. admin.open({
  250. type: 2,
  251. title: '重置管理员密码',
  252. content: "./resetAdminPwd.html?orgId="+data.orgId,
  253. area : ['600px' ,'500px'],
  254. success: function(layero ,dIndex){
  255. layer.setTop(layero);
  256. },
  257. });
  258. }
  259. // 删除
  260. function doDel(obj) {
  261. layer.confirm('确定要删除“' + obj.orgName + '”吗?', {
  262. skin :'layui-layer-admin',
  263. shade:.1
  264. }
  265. ,function (i) {
  266. layer.close(i);
  267. layer.load();
  268. var url = uParas.baseUrl + '/sys/org/delete/'+ obj.orgId;
  269. admin.req(url ,{} ,function (resp) {
  270. layer.closeAll('loading');
  271. if (resp.code == 1) {
  272. layer.msg(resp.msg);
  273. renderTable();
  274. } else {
  275. layer.msg(resp.msg);
  276. }
  277. },'GET');
  278. });
  279. }
  280. //配置监管行业列表
  281. function addIndustry(data){
  282. admin.open({
  283. type: 2,
  284. title: '配置监管行业信息',
  285. content: "./orgIndustry.html?orgId="+data.orgId,
  286. area : ['800px' ,'500px'],
  287. btn : ['关闭'],
  288. yes : function(){
  289. layer.closeAll();
  290. renderTable();
  291. },
  292. success: function(layero ,dIndex){
  293. layer.setTop(layero);
  294. },
  295. end: function(){
  296. renderTable();
  297. }
  298. });
  299. }
  300. // 显示新增弹窗
  301. function showAddModel(data) {
  302. var orgParentId = data.orgParentId;
  303. var orgRootId = data.orgRootId;
  304. admin.open({
  305. type : 1,
  306. title : '添加机构',
  307. content: $('#modelOrgTpl').html(),
  308. area : ['400px' ,'500px'],
  309. success: function (layero ,dIndex) {
  310. var orgAreaPicker = new citypicker("#orgAreaName",{
  311. provincename: "provinceId",
  312. cityname : "cityId",
  313. districtname: "districtId",
  314. level: 'districtId',
  315. });
  316. orgAreaPicker.setValue("陕西省/渭南市/临渭区");
  317. form.val('thisform' ,{
  318. 'orgParentId' : orgParentId,
  319. 'orgRootId' : orgRootId,
  320. }); // 回显数据
  321. var url = "/admin/common/getOrgTypeList";
  322. uParas.initSimpleSelect("orgTypeId" ,'thisform' ,url ,"orgTypeTitle" ,"orgTypeId" ,data.orgTypeId);
  323. /**
  324. * 初始化行业树
  325. */
  326. admin.req(uParas.baseUrl + '/sys/company/getIndustryTree', {}, function (resp) {
  327. if (resp.code == 1) {
  328. var zNodes = resp.data;
  329. var zTree =$.fn.zTree.init($('#industryTree') ,IndustryTreesetting ,zNodes);
  330. zTree.expandAll(true);
  331. layer.closeAll('loading');
  332. hideMenu();
  333. }
  334. }, 'get');
  335. $("#industryName").click(function () {
  336. $("#menuContent").width($("#industryName").width());
  337. $("#menuContent").slideDown("fast");
  338. $("body").bind("mousedown", onBodyDown);
  339. });
  340. var url = uParas.baseUrl + '/sys/org/save';
  341. // 保存处理
  342. form.on('submit(modelSubmit)', function(data) {
  343. layer.load();
  344. admin.req(url, data.field, function(resp) {
  345. layer.closeAll('loading');
  346. if (resp.code == 1) {
  347. layer.close(dIndex);
  348. layer.msg(resp.msg);
  349. renderTable();
  350. } else {
  351. layer.msg(resp.msg);
  352. }
  353. },'POST');
  354. return false;
  355. });
  356. }
  357. });
  358. }
  359. // 显示表单弹窗
  360. function showEditModel(data) {
  361. admin.open({
  362. type: 1,
  363. title: '编辑机构信息',
  364. content: $('#modelOrgTpl').html(),
  365. area : ['400px' ,'500px'],
  366. success: function (layero, dIndex) {
  367. var orgAreaPicker = new citypicker("#orgAreaName",{
  368. provincename: "provinceId",
  369. cityname : "cityId",
  370. districtname: "districtId",
  371. level: 'districtId',
  372. });
  373. $("#industryName").click(function () {
  374. $("#menuContent").width($("#industryName").width());
  375. $("#menuContent").slideDown("fast");
  376. $("body").bind("mousedown", onBodyDown);
  377. });
  378. /**
  379. * 初始化行业树
  380. */
  381. admin.req(uParas.baseUrl + '/sys/company/getIndustryTree', {}, function (resp) {
  382. if (resp.code == 1) {
  383. var zNodes = resp.data;
  384. var zTree =$.fn.zTree.init($('#industryTree') ,IndustryTreesetting ,zNodes);
  385. zTree.expandAll(true);
  386. layer.closeAll('loading');
  387. hideMenu();
  388. }
  389. }, 'get');
  390. var url1 = uParas.baseUrl + '/sys/org/get/'+ data.orgId;
  391. admin.req(url1 ,{} ,function(resp) {
  392. if (resp.code == 1) {
  393. form.val('thisform' ,resp.data); // 回显数据
  394. var url = "/admin/common/getOrgTypeList";
  395. uParas.initSimpleSelect("orgTypeId" ,'thisform' ,url ,"orgTypeTitle" ,"orgTypeId" ,resp.data.orgTypeId);
  396. orgAreaPicker.setValue(resp.data.orgAreaName);
  397. } else {
  398. layer.msg(resp.msg)
  399. }
  400. },'GET');
  401. var url = uParas.baseUrl + '/sys/org/update';
  402. // 表单提交事件
  403. form.on('submit(modelSubmit)' ,function (data) {
  404. layer.load();
  405. $("#orgAreaName").val(orgAreaPicker.getVal());
  406. $("#orgAreaCode").val(orgAreaPicker.getPosition());
  407. orgAreaPicker.getPosition()
  408. admin.req(url ,data.field ,function(resp) {
  409. layer.closeAll('loading');
  410. if (resp.code == 1) {
  411. layer.close(dIndex);
  412. layer.msg(resp.msg);
  413. renderTable();
  414. } else {
  415. layer.msg(resp.msg);
  416. }
  417. },'POST');
  418. return false;
  419. });
  420. }
  421. });
  422. }
  423. });
  424. </script>
  425. </body>
  426. </html>