category.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521
  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="home_show" lay-skin="switch" lay-text="是|否" checked=""
  161. value="1">
  162. </div>
  163. </div>
  164. <div>
  165. <label class="layui-form-label">是否在用:</label>
  166. <div class="layui-input-block">
  167. <input type="checkbox" name="enable" lay-skin="switch" lay-text="是|否" checked=""
  168. value="1">
  169. </div>
  170. </div>
  171. <div class="layui-form-item" style="text-align:right">
  172. <button class="layui-btn" lay-submit id="category_btn" lay-filter="form-category"
  173. style="display: none">保存
  174. </button>
  175. </div>
  176. </div>
  177. </form>
  178. </div>
  179. </div>
  180. <div id="id_subject" style="display: none">
  181. <div class="layui-card-body" pad15>
  182. <form class="layui-form" lay-filter="form-subject">
  183. <div class="layui-row layui-col-space10 layui-form-item">
  184. <div>
  185. <label class="layui-form-label"><font color='red' size="4">*</font>品种:</label>
  186. <div class="layui-input-block">
  187. <select id="id_subject_select" name="category" lay-verify="required">
  188. </select>
  189. </div>
  190. </div>
  191. <div>
  192. <label class="layui-form-label"><font color='red' size="4">*</font>科目名称:</label>
  193. <div class="layui-input-block">
  194. <input type="text" name="name" lay-verify="required" placeholder="请输入名称"
  195. autocomplete="off" class="layui-input">
  196. </div>
  197. </div>
  198. <div>
  199. <label class="layui-form-label">是否在用:</label>
  200. <div class="layui-input-block">
  201. <input type="checkbox" name="enable" lay-skin="switch" lay-text="是|否" checked=""
  202. value="1">
  203. </div>
  204. </div>
  205. <div class="layui-form-item" style="text-align:right">
  206. <button class="layui-btn" lay-submit id="subject_btn" lay-filter="form-subject"
  207. style="display: none">保存
  208. </button>
  209. </div>
  210. </div>
  211. </form>
  212. </div>
  213. </div>
  214. <script src="../../layuiadmin/layui/layui.js?t=1"></script>
  215. <script>
  216. layui.config({
  217. base: '../../../layuiadmin/' //静态资源所在路径
  218. }).extend({
  219. index: 'lib/index' //主入口模块
  220. }).use(['index', 'table', 'form'], function () {
  221. var $ = layui.$;
  222. var table = layui.table
  223. , form = layui.form
  224. , admin = layui.admin;
  225. admin.req({
  226. url: '/option/get_category/',
  227. done: function (res) {
  228. var level = res.data.level;
  229. var level_node = $('#id_category_select');
  230. for (var i in level) {
  231. var pid = level[i].id;
  232. var value = level[i].value;
  233. level_node.append("<option value='" + pid + "'>" + value + "</option>");
  234. }
  235. var category = res.data.category;
  236. var category_node = $('#id_subject_select');
  237. for (var i in category) {
  238. var pid = category[i].id;
  239. var value = category[i].value;
  240. category_node.append("<option value='" + pid + "'>" + value + "</option>");
  241. }
  242. form.render();
  243. }
  244. });
  245. // 大类级别
  246. table.render({
  247. elem: '#level_datagrid'
  248. , url: '/option/category/?level=1'
  249. , cols: [[
  250. {field: 'name', title: '名称', width: 150}
  251. , {field: 'enable_text', title: '在用', width: 80}
  252. , {width: 110, align: 'center', fixed: 'right', toolbar: '#level-operate-bar'}
  253. ]]
  254. , page: true
  255. , height: 'full-108'
  256. , done: function () {
  257. layui.index.removeNoPermButtons()
  258. }
  259. });
  260. // 品种
  261. table.render({
  262. elem: '#category_datagrid'
  263. , url: '/option/category/?level=2'
  264. , cols: [[
  265. {field: 'name', title: '名称', width: 150}
  266. , {field: 'category_text', title: '大类', width: 120}
  267. , {field: 'enable_text', title: '在用', width: 60}
  268. , {field: 'home_show_text', title: '首页显示', width: 100}
  269. , {width: 80, align: 'center', fixed: 'right', toolbar: '#category-operate-bar'}
  270. ]]
  271. , page: true
  272. , height: 'full-108'
  273. , done: function () {
  274. layui.index.removeNoPermButtons()
  275. }
  276. });
  277. // 科目
  278. table.render({
  279. elem: '#subject_datagrid'
  280. , url: '/option/category/?level=3'
  281. , cols: [[
  282. {field: 'name', title: '名称', width: 150}
  283. , {field: 'category_text', title: '品种', width: 150}
  284. , {field: 'enable_text', title: '在用', width: 80}
  285. , {width: 110, align: 'center', fixed: 'right', toolbar: '#subject-operate-bar'}
  286. ]]
  287. , page: true
  288. , height: 'full-108'
  289. , done: function () {
  290. layui.index.removeNoPermButtons()
  291. }
  292. });
  293. var level_id = '', category_id = '', subject_id = ''
  294. //级别大类
  295. table.on('tool(level-operate)', function (obj) {
  296. // table.editdata = obj.data;
  297. form.val("form-level", obj.data);
  298. level_id = obj.data.id
  299. if (obj.event === 'level_edit') {
  300. layer.open({
  301. type: 1,
  302. title: '编辑大类',
  303. area: ['40%', '60%'],
  304. btn: ['保存', '取消'],
  305. yes: function (index, dom) {
  306. $('#level_btn').click();
  307. },
  308. btn2: function (index, layero) {
  309. layer.close(index);//关闭当前按钮
  310. },
  311. content: $('#id_level')
  312. });
  313. }
  314. });
  315. form.on('submit(form-level)', function (data) {
  316. data.field.level = 1
  317. if (level_id) {
  318. var url = '/option/category/' + level_id + '/'
  319. var type = 'put'
  320. } else {
  321. var url = '/option/category/'
  322. var type = 'post'
  323. }
  324. admin.req({
  325. url: url
  326. , data: data.field
  327. , type: type
  328. , done: function (res) {
  329. layer.closeAll();
  330. table.reload('level_datagrid', {});
  331. }
  332. });
  333. return false;
  334. });
  335. //品种
  336. table.on('tool(category-operate)', function (obj) {
  337. form.val("form-category", obj.data);
  338. category_id = obj.data.id
  339. if (obj.event === 'category_edit') {
  340. layer.open({
  341. type: 1,
  342. title: '编辑品种',
  343. area: ['40%', '60%'],
  344. btn: ['保存', '取消'],
  345. yes: function (index, dom) {
  346. $('#category_btn').click();
  347. },
  348. btn2: function (index, layero) {
  349. layer.close(index);//关闭当前按钮
  350. },
  351. content: $('#id_category')
  352. });
  353. }
  354. });
  355. form.on('submit(form-category)', function (data) {
  356. data.field.level = 2
  357. if (category_id) {
  358. var url = '/option/category/' + category_id + '/'
  359. var type = 'put'
  360. } else {
  361. var url = '/option/category/'
  362. var type = 'post'
  363. }
  364. admin.req({
  365. url: url
  366. , data: data.field
  367. , type: type
  368. , done: function (res) {
  369. layer.closeAll();
  370. table.reload('category_datagrid');
  371. }
  372. });
  373. return false;
  374. });
  375. // 科目
  376. table.on('tool(subject-operate)', function (obj) {
  377. form.val("form-subject", obj.data);
  378. subject_id = obj.data.id
  379. if (obj.event === 'subject_edit') {
  380. layer.open({
  381. type: 1,
  382. title: '编辑科目',
  383. area: ['40%', '60%'],
  384. btn: ['保存', '取消'],
  385. yes: function (index, dom) {
  386. $('#subject_btn').click();
  387. },
  388. btn2: function (index, layero) {
  389. layer.close(index);//关闭当前按钮
  390. },
  391. content: $('#id_subject')
  392. });
  393. }
  394. });
  395. form.on('submit(form-subject)', function (data) {
  396. data.field.level = 3
  397. if (subject_id) {
  398. var url = '/option/category/' + subject_id + '/'
  399. var type = 'put'
  400. } else {
  401. var url = '/option/category/'
  402. var type = 'post'
  403. }
  404. admin.req({
  405. url: url
  406. , data: data.field
  407. , type: type
  408. , done: function (res) {
  409. layer.closeAll();
  410. table.reload('subject_datagrid', {});
  411. }
  412. });
  413. return false;
  414. });
  415. form.on('submit(query-form-element1)', function (data) {
  416. data.field.level=1
  417. table.reload('level_datagrid', {
  418. where: data.field
  419. , page: {curr: 1}
  420. });
  421. layer.closeAll();
  422. return false
  423. });
  424. form.on('submit(query-form-element2)', function (data) {
  425. data.field.level=2
  426. table.reload('category_datagrid', {
  427. where: data.field
  428. , page: {curr: 1}
  429. });
  430. layer.closeAll();
  431. return false
  432. });
  433. form.on('submit(query-form-element3)', function (data) {
  434. data.field.level=3
  435. table.reload('subject_datagrid', {
  436. where: data.field
  437. , page: {curr: 1}
  438. });
  439. layer.closeAll();
  440. return false
  441. });
  442. $('#level_add').on('click', function () {
  443. form.render(null, 'form-level');
  444. layer.open({
  445. type: 1,
  446. title: '编辑大类',
  447. area: ['40%', '60%'],
  448. btn: ['保存', '取消'],
  449. yes: function (index, dom) {
  450. $('#level_btn').click();
  451. },
  452. btn2: function (index, layero) {
  453. layer.close(index);//关闭当前按钮
  454. },
  455. content: $('#id_level')
  456. });
  457. });
  458. $('#category_add').on('click', function () {
  459. form.val('form-category', {});
  460. layer.open({
  461. type: 1,
  462. title: '添加品种',
  463. area: ['40%', '60%'],
  464. btn: ['保存', '取消'],
  465. yes: function (index, dom) {
  466. $('#category_btn').click();
  467. },
  468. btn2: function (index, layero) {
  469. layer.close(index);//关闭当前按钮
  470. },
  471. content: $('#id_category')
  472. });
  473. });
  474. $('#subject_add').on('click', function () {
  475. form.render(null, 'form-subject');
  476. layer.open({
  477. type: 1,
  478. title: '添加科目',
  479. area: ['40%', '60%'],
  480. btn: ['保存', '取消'],
  481. yes: function (index, dom) {
  482. $('#subject_btn').click();
  483. },
  484. btn2: function (index, layero) {
  485. layer.close(index);//关闭当前按钮
  486. },
  487. content: $('#id_subject')
  488. });
  489. });
  490. });
  491. </script>
  492. </body>
  493. </html>