index.html 18 KB

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