category.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>商品分类</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport"
  9. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  10. <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  11. <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  12. <style type="text/css">
  13. .seach_items {
  14. float: right;
  15. margin-left: 10px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div class="layui-fluid">
  21. <div class="layui-card">
  22. <div class="layui-card-body" pad15>
  23. <div class="layui-row layui-col-space15">
  24. <div class="layui-col-md4">
  25. <div class="LAY-btns" style="margin-bottom: 10px;">
  26. <div class="layui-col-xs2">
  27. <button class="layui-btn" id="level_add"><i
  28. class="layui-icon layui-icon-add-circle"></i>添加大类
  29. </button>
  30. </div>
  31. <form class="layui-form" lay-filter="query-form-element1">
  32. <div class="seach_items">
  33. <button class="layui-btn" lay-submit lay-filter="query-form-element1"><i
  34. class="layui-icon layui-icon-search"></i>查询
  35. </button>
  36. </div>
  37. <div class="seach_items">
  38. <input type="text" name="name" autocomplete="off" class="layui-input"
  39. placeholder="大类名称"/>
  40. </div>
  41. </form>
  42. <div style="clear: both;"></div>
  43. </div>
  44. <table class="layui-hide" id="level_datagrid" lay-filter="level-operate"></table>
  45. <script type="text/html" id="level-operate-bar">
  46. <div class="layui-btn-group">
  47. <a class="layui-btn layui-btn-xs" lay-event="level_edit"
  48. >修改</a>
  49. </div>
  50. </script>
  51. </div>
  52. <div class="layui-col-md4">
  53. <div class="LAY-btns" style="margin-bottom: 10px;">
  54. <div class="layui-col-xs2">
  55. <button class="layui-btn" id="category_add"><i
  56. class="layui-icon layui-icon-add-circle"></i>添加品种
  57. </button>
  58. </div>
  59. <form class="layui-form" lay-filter="query-form-element2">
  60. <div class="seach_items">
  61. <button class="layui-btn" lay-submit lay-filter="query-form-element2"><i
  62. class="layui-icon layui-icon-search"></i>查询
  63. </button>
  64. </div>
  65. <div class="seach_items">
  66. <input type="text" name="category_name" autocomplete="off" class="layui-input"
  67. placeholder="大类名称"/>
  68. </div>
  69. </form>
  70. <div style="clear: both;"></div>
  71. </div>
  72. <table class="layui-hide" id="category_datagrid" lay-filter="category-operate"></table>
  73. <script type="text/html" id="category-operate-bar">
  74. <div class="layui-btn-group">
  75. <a class="layui-btn layui-btn-xs" lay-event="category_edit"
  76. >修改</a>
  77. </div>
  78. </script>
  79. </div>
  80. <div class="layui-col-md4">
  81. <div class="LAY-btns" style="margin-bottom: 10px;">
  82. <div class="layui-col-xs2">
  83. <button class="layui-btn" id="subject_add"><i
  84. class="layui-icon layui-icon-add-circle"></i>添加科目
  85. </button>
  86. </div>
  87. <form class="layui-form" lay-filter="query-form-element3">
  88. <div class="seach_items">
  89. <button class="layui-btn" lay-submit lay-filter="query-form-element3"><i
  90. class="layui-icon layui-icon-search"></i>查询
  91. </button>
  92. </div>
  93. <div class="seach_items">
  94. <input type="text" name="category_name" autocomplete="off" class="layui-input"
  95. placeholder="品种名称"/>
  96. </div>
  97. </form>
  98. <div style="clear: both;"></div>
  99. </div>
  100. <table class="layui-hide" id="subject_datagrid" lay-filter="subject-operate"></table>
  101. <script type="text/html" id="subject-operate-bar">
  102. <div class="layui-btn-group">
  103. <a class="layui-btn layui-btn-xs" lay-event="subject_edit"
  104. >修改</a>
  105. </div>
  106. </script>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. <div id="id_level" style="display: none">
  113. <div class="layui-card-body" pad15>
  114. <form class="layui-form" lay-filter="form-level">
  115. <div class="layui-row layui-col-space10 layui-form-item">
  116. <div class="layui-col-lg6">
  117. <label class="layui-form-label"><font color='red' size="4">*</font>大类名称:</label>
  118. <div class="layui-input-block">
  119. <input type="text" name="name" lay-verify="required" placeholder="请输入名称"
  120. autocomplete="off" class="layui-input">
  121. </div>
  122. </div>
  123. <div class="layui-col-lg6">
  124. <label class="layui-form-label">是否在用:</label>
  125. <div class="layui-input-block">
  126. <input type="checkbox" name="enable" lay-skin="switch" lay-text="是|否" checked=""
  127. value="1">
  128. </div>
  129. </div>
  130. <div class="layui-form-item" style="text-align:right">
  131. <button class="layui-btn" lay-submit id="level_btn" lay-filter="form-level"
  132. style="display: none">保存
  133. </button>
  134. </div>
  135. </div>
  136. </form>
  137. </div>
  138. </div>
  139. <div id="id_category" style="display: none">
  140. <div class="layui-card-body" pad15>
  141. <form class="layui-form" lay-filter="form-category">
  142. <div class="layui-row layui-col-space10 layui-form-item">
  143. <div>
  144. <label class="layui-form-label"><font color='red' size="4">*</font>大类:</label>
  145. <div class="layui-input-block">
  146. <select id="id_category_select" name="category" lay-verify="required">
  147. </select>
  148. </div>
  149. </div>
  150. <div>
  151. <label class="layui-form-label"><font color='red' size="4">*</font>品种名称:</label>
  152. <div class="layui-input-block">
  153. <input type="text" name="name" lay-verify="required" placeholder="请输入名称"
  154. autocomplete="off" class="layui-input">
  155. </div>
  156. </div>
  157. <div>
  158. <label class="layui-form-label">是否在用:</label>
  159. <div class="layui-input-block">
  160. <input type="checkbox" name="enable" lay-skin="switch" lay-text="是|否" checked=""
  161. value="1">
  162. </div>
  163. </div>
  164. <div class="layui-form-item" style="text-align:right">
  165. <button class="layui-btn" lay-submit id="category_btn" lay-filter="form-category"
  166. style="display: none">保存
  167. </button>
  168. </div>
  169. </div>
  170. </form>
  171. </div>
  172. </div>
  173. <div id="id_subject" style="display: none">
  174. <div class="layui-card-body" pad15>
  175. <form class="layui-form" lay-filter="form-subject">
  176. <div class="layui-row layui-col-space10 layui-form-item">
  177. <div>
  178. <label class="layui-form-label"><font color='red' size="4">*</font>品种:</label>
  179. <div class="layui-input-block">
  180. <select id="id_subject_select" name="category" lay-verify="required">
  181. </select>
  182. </div>
  183. </div>
  184. <div>
  185. <label class="layui-form-label"><font color='red' size="4">*</font>科目名称:</label>
  186. <div class="layui-input-block">
  187. <input type="text" name="name" lay-verify="required" placeholder="请输入名称"
  188. autocomplete="off" class="layui-input">
  189. </div>
  190. </div>
  191. <div>
  192. <label class="layui-form-label">是否在用:</label>
  193. <div class="layui-input-block">
  194. <input type="checkbox" name="enable" lay-skin="switch" lay-text="是|否" checked=""
  195. value="1">
  196. </div>
  197. </div>
  198. <div class="layui-form-item" style="text-align:right">
  199. <button class="layui-btn" lay-submit id="subject_btn" lay-filter="form-subject"
  200. style="display: none">保存
  201. </button>
  202. </div>
  203. </div>
  204. </form>
  205. </div>
  206. </div>
  207. <script src="../../layuiadmin/layui/layui.js?t=1"></script>
  208. <script>
  209. layui.config({
  210. base: '../../../layuiadmin/' //静态资源所在路径
  211. }).extend({
  212. index: 'lib/index' //主入口模块
  213. }).use(['index', 'table', 'form'], function () {
  214. var $ = layui.$;
  215. var table = layui.table
  216. , form = layui.form
  217. , admin = layui.admin;
  218. admin.req({
  219. url: '/option/get_category/',
  220. done: function (res) {
  221. var level = res.data.level;
  222. var level_node = $('#id_category_select');
  223. for (var i in level) {
  224. var pid = level[i].id;
  225. var value = level[i].value;
  226. level_node.append("<option value='" + pid + "'>" + value + "</option>");
  227. }
  228. var category = res.data.category;
  229. var category_node = $('#id_subject_select');
  230. for (var i in category) {
  231. var pid = category[i].id;
  232. var value = category[i].value;
  233. category_node.append("<option value='" + pid + "'>" + value + "</option>");
  234. }
  235. form.render();
  236. }
  237. });
  238. // 大类级别
  239. table.render({
  240. elem: '#level_datagrid'
  241. , url: '/option/category/?level=1'
  242. , cols: [[
  243. {field: 'name', title: '名称', width: 150}
  244. , {field: 'enable_text', title: '在用', width: 80}
  245. , {width: 110, align: 'center', fixed: 'right', toolbar: '#level-operate-bar'}
  246. ]]
  247. , page: true
  248. , height: 'full-108'
  249. , done: function () {
  250. layui.index.removeNoPermButtons()
  251. }
  252. });
  253. // 品种
  254. table.render({
  255. elem: '#category_datagrid'
  256. , url: '/option/category/?level=2'
  257. , cols: [[
  258. {field: 'name', title: '名称', width: 150}
  259. , {field: 'category_text', title: '大类', width: 150}
  260. , {field: 'enable_text', title: '在用', width: 80}
  261. , {width: 110, align: 'center', fixed: 'right', toolbar: '#category-operate-bar'}
  262. ]]
  263. , page: true
  264. , height: 'full-108'
  265. , done: function () {
  266. layui.index.removeNoPermButtons()
  267. }
  268. });
  269. // 科目
  270. table.render({
  271. elem: '#subject_datagrid'
  272. , url: '/option/category/?level=3'
  273. , cols: [[
  274. {field: 'name', title: '名称', width: 150}
  275. , {field: 'category_text', title: '品种', width: 150}
  276. , {field: 'enable_text', title: '在用', width: 80}
  277. , {width: 110, align: 'center', fixed: 'right', toolbar: '#subject-operate-bar'}
  278. ]]
  279. , page: true
  280. , height: 'full-108'
  281. , done: function () {
  282. layui.index.removeNoPermButtons()
  283. }
  284. });
  285. var level_id = '', category_id = '', subject_id = ''
  286. //级别大类
  287. table.on('tool(level-operate)', function (obj) {
  288. // table.editdata = obj.data;
  289. form.val("form-level", obj.data);
  290. level_id = obj.data.id
  291. if (obj.event === 'level_edit') {
  292. layer.open({
  293. type: 1,
  294. title: '编辑大类',
  295. area: ['40%', '60%'],
  296. btn: ['保存', '取消'],
  297. yes: function (index, dom) {
  298. $('#level_btn').click();
  299. },
  300. btn2: function (index, layero) {
  301. layer.close(index);//关闭当前按钮
  302. },
  303. content: $('#id_level')
  304. });
  305. }
  306. });
  307. form.on('submit(form-level)', function (data) {
  308. data.field.level = 1
  309. if (level_id) {
  310. var url = '/option/category/' + level_id + '/'
  311. var type = 'put'
  312. } else {
  313. var url = '/option/category/'
  314. var type = 'post'
  315. }
  316. admin.req({
  317. url: url
  318. , data: data.field
  319. , type: type
  320. , done: function (res) {
  321. layer.closeAll();
  322. table.reload('level_datagrid', {});
  323. }
  324. });
  325. return false;
  326. });
  327. //品种
  328. table.on('tool(category-operate)', function (obj) {
  329. form.val("form-category", obj.data);
  330. category_id = obj.data.id
  331. if (obj.event === 'category_edit') {
  332. layer.open({
  333. type: 1,
  334. title: '编辑品种',
  335. area: ['40%', '60%'],
  336. btn: ['保存', '取消'],
  337. yes: function (index, dom) {
  338. $('#category_btn').click();
  339. },
  340. btn2: function (index, layero) {
  341. layer.close(index);//关闭当前按钮
  342. },
  343. content: $('#id_category')
  344. });
  345. }
  346. });
  347. form.on('submit(form-category)', function (data) {
  348. data.field.level = 2
  349. if (category_id) {
  350. var url = '/option/category/' + category_id + '/'
  351. var type = 'put'
  352. } else {
  353. var url = '/option/category/'
  354. var type = 'post'
  355. }
  356. admin.req({
  357. url: url
  358. , data: data.field
  359. , type: type
  360. , done: function (res) {
  361. layer.closeAll();
  362. table.reload('category_datagrid');
  363. }
  364. });
  365. return false;
  366. });
  367. // 科目
  368. table.on('tool(subject-operate)', function (obj) {
  369. form.val("form-subject", obj.data);
  370. subject_id = obj.data.id
  371. if (obj.event === 'subject_edit') {
  372. layer.open({
  373. type: 1,
  374. title: '编辑科目',
  375. area: ['40%', '60%'],
  376. btn: ['保存', '取消'],
  377. yes: function (index, dom) {
  378. $('#subject_btn').click();
  379. },
  380. btn2: function (index, layero) {
  381. layer.close(index);//关闭当前按钮
  382. },
  383. content: $('#id_subject')
  384. });
  385. }
  386. });
  387. form.on('submit(form-subject)', function (data) {
  388. data.field.level = 3
  389. if (subject_id) {
  390. var url = '/option/category/' + subject_id + '/'
  391. var type = 'put'
  392. } else {
  393. var url = '/option/category/'
  394. var type = 'post'
  395. }
  396. admin.req({
  397. url: url
  398. , data: data.field
  399. , type: type
  400. , done: function (res) {
  401. layer.closeAll();
  402. table.reload('subject_datagrid', {});
  403. }
  404. });
  405. return false;
  406. });
  407. form.on('submit(query-form-element1)', function (data) {
  408. data.field.level=1
  409. table.reload('level_datagrid', {
  410. where: data.field
  411. , page: {curr: 1}
  412. });
  413. layer.closeAll();
  414. return false
  415. });
  416. form.on('submit(query-form-element2)', function (data) {
  417. data.field.level=2
  418. table.reload('category_datagrid', {
  419. where: data.field
  420. , page: {curr: 1}
  421. });
  422. layer.closeAll();
  423. return false
  424. });
  425. form.on('submit(query-form-element3)', function (data) {
  426. data.field.level=3
  427. table.reload('subject_datagrid', {
  428. where: data.field
  429. , page: {curr: 1}
  430. });
  431. layer.closeAll();
  432. return false
  433. });
  434. $('#level_add').on('click', function () {
  435. form.render(null, 'form-level');
  436. layer.open({
  437. type: 1,
  438. title: '编辑大类',
  439. area: ['40%', '60%'],
  440. btn: ['保存', '取消'],
  441. yes: function (index, dom) {
  442. $('#level_btn').click();
  443. },
  444. btn2: function (index, layero) {
  445. layer.close(index);//关闭当前按钮
  446. },
  447. content: $('#id_level')
  448. });
  449. });
  450. $('#category_add').on('click', function () {
  451. form.val('form-category', {});
  452. layer.open({
  453. type: 1,
  454. title: '添加品种',
  455. area: ['40%', '60%'],
  456. btn: ['保存', '取消'],
  457. yes: function (index, dom) {
  458. $('#category_btn').click();
  459. },
  460. btn2: function (index, layero) {
  461. layer.close(index);//关闭当前按钮
  462. },
  463. content: $('#id_category')
  464. });
  465. });
  466. $('#subject_add').on('click', function () {
  467. form.render(null, 'form-subject');
  468. layer.open({
  469. type: 1,
  470. title: '添加科目',
  471. area: ['40%', '60%'],
  472. btn: ['保存', '取消'],
  473. yes: function (index, dom) {
  474. $('#subject_btn').click();
  475. },
  476. btn2: function (index, layero) {
  477. layer.close(index);//关闭当前按钮
  478. },
  479. content: $('#id_subject')
  480. });
  481. });
  482. });
  483. </script>
  484. </body>
  485. </html>