1
0

listing.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479
  1. {extend name="public/layout" /} {block name="title"}素材库列表{/block} {block name="body"}
  2. <style type="text/css">
  3. html,
  4. body {
  5. display: block;
  6. min-width: 1100px;
  7. }
  8. .layui-fluid {
  9. display: block;
  10. box-shadow: 0 0 4px 0 #B6CADE;
  11. border-radius: 5px;
  12. margin: 15px;
  13. background-color: #ffffff;
  14. }
  15. .layui-tab {
  16. padding: 15px;
  17. height: 100%;
  18. }
  19. .layui-form-item {
  20. width: 100%;
  21. }
  22. .layui-form-item .layui-inline {
  23. display: block;
  24. float: left;
  25. width: 145px;
  26. height: 38px;
  27. line-height: 38px;
  28. background: #FFFFFF;
  29. margin-right: 16px;
  30. }
  31. .layui-form-item .layui-input-inline {
  32. width: 145px;
  33. height: 38px;
  34. line-height: 38px;
  35. margin-bottom: 0;
  36. }
  37. .layui-form-item .layui-input-inline .layui-input {
  38. border: 1px solid #9DB6CF;
  39. border-radius: 5px;
  40. }
  41. .layui-form-select dl dd.layui-this {
  42. background-color: #249EFB;
  43. }
  44. .layui-form-item div.searchBox {
  45. width: 320px;
  46. background: #FFFFFF;
  47. border: 1px solid #B6CADE;
  48. border-radius: 24px;
  49. height: 38px;
  50. overflow: hidden;
  51. padding-left: 18px;
  52. position: relative;
  53. margin-bottom: 0px;
  54. float: right;
  55. }
  56. .searchBox .inputBox {
  57. width: 240px;
  58. float: left;
  59. height: 36px;
  60. line-height: 36px;
  61. border-width: 0;
  62. }
  63. .searchBtn {
  64. position: absolute;
  65. top: 0;
  66. right: 0;
  67. width: 51px;
  68. height: 38px;
  69. background-color: #fff;
  70. }
  71. .searchBtn img {
  72. position: absolute;
  73. width: 26px;
  74. top: 6px;
  75. left: 0;
  76. }
  77. </style>
  78. <body>
  79. <div class="layui-fluid">
  80. <div class="layui-tab" lay-filter="tabletab">
  81. <ul class="layui-tab-title">
  82. <li class="layui-this" lay-id="anli">装修案例</li>
  83. <li lay-id="evidence">客户见证</li>
  84. <li lay-id="wx">朋友圈</li>
  85. <!-- <li lay-id="talkskill">话术</li>-->
  86. </ul>
  87. <div class="layui-tab-content">
  88. <div class="layui-tab-item layui-show">
  89. <div class="layui-form-item clearfix">
  90. </div>
  91. <table id="anli-table" lay-filter="anli-table"></table>
  92. </div>
  93. <div class="layui-tab-item">
  94. <div class="layui-form-item clearfix">
  95. </div>
  96. <table id="evidence-table" lay-filter="evidence-table"></table>
  97. </div>
  98. <div class="layui-tab-item">
  99. <div class="layui-form-item clearfix">
  100. </div>
  101. <table id="wxshow-table" lay-filter="wxshow-table"></table>
  102. </div>
  103. <!-- <div class="layui-tab-item">-->
  104. <!-- <div class="layui-form-item clearfix">-->
  105. <!-- </div>-->
  106. <!-- <table id="talkskill-table" lay-filter="talkskill-table"></table>-->
  107. <!-- </div>-->
  108. </div>
  109. </div>
  110. </div>
  111. </body>
  112. {/block} {block name="js"}
  113. <script type="text/html" id="cover_img">
  114. {{# if(d.cover_img != ''){ }}
  115. <img src="{{d.cover_img}}" style="width: 30px;height: 30px;"/>
  116. {{# } }}
  117. </script>
  118. <script type="text/html" id="community_name">
  119. <span>{{d.community.name}}</span>
  120. </script>
  121. <script type="text/html" id="designer_name">
  122. <span>{{d.designer.name}}</span>
  123. </script>
  124. <script type="text/html" id="style_name">
  125. <span>{{d.decostyle.name}}</span>
  126. </script>
  127. <script type="text/html" id="table-anli-action">
  128. {auth:check name="m_material_edit"}
  129. <a class="layui-btn layui-btn-xs" lay-event="anli-details"><i class="layui-icon layui-icon-edit"></i>编辑</a>
  130. {/auth:check}
  131. <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="anli-clue-list"><i class="layui-icon layui-icon-form"></i>线索记录</a>
  132. {auth:check name="m_material_del" }
  133. <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="anli-delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
  134. {/auth:check}
  135. </script>
  136. <script type="text/html" id="table-evidence-action">
  137. <a class="layui-btn layui-btn-xs" lay-event="evi-details"><i class="layui-icon layui-icon-edit"></i>详情</a>
  138. <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="evidence-clue-list"><i class="layui-icon layui-icon-form"></i>线索记录</a>
  139. {auth:check name="m_material_del" }
  140. <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="evidence-delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
  141. {/auth:check}
  142. </script>
  143. <script type="text/html" id="table-wxshow-action">
  144. <a class="layui-btn layui-btn-xs" lay-event="wx-details"><i class="layui-icon layui-icon-edit"></i>详情</a>
  145. <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="wx-clue-list"><i class="layui-icon layui-icon-form"></i>线索记录</a>
  146. {auth:check name="m_material_del" }
  147. <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="wx-delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
  148. {/auth:check}
  149. </script>
  150. <!--<script type="text/html" id="table-talkskill-action">-->
  151. <!-- <a class="layui-btn layui-btn-xs" lay-event="talkskill-edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>-->
  152. <!--</script>-->
  153. <script type="text/html" id="evidence_num">
  154. <span>{{d.picnum}}</span>
  155. </script>
  156. <script>
  157. layui.config({
  158. base: '__LAYUI__/',
  159. urlbase: '/sys'
  160. }).extend({
  161. index: 'lib/index' //主入口模块
  162. }).use(['index', 'table', 'element'], function() {
  163. var $ = layui.$,
  164. form = layui.form,
  165. element = layui.element,
  166. table = layui.table;
  167. ///default entery
  168. var firstTabTableLoad = function(){
  169. //装修案例列表
  170. table.render({
  171. elem: '#anli-table',
  172. autoSort: false,
  173. url: "{:url('material/caselist')}",
  174. cols: [
  175. [{
  176. type: 'numbers',
  177. field: 'id',
  178. width: 80,
  179. title: '序号',
  180. sort: true
  181. }, {
  182. templet: '#cover_img',
  183. title: '封面图',
  184. }, {
  185. field: 'title',
  186. title: '案例标题',
  187. minWidth: 100
  188. }, {
  189. title: '小区',
  190. templet: '#community_name'
  191. }, {
  192. title: '设计师',
  193. templet: '#designer_name'
  194. }, {
  195. title: '风格',
  196. templet: '#style_name'
  197. }, {
  198. field: 'room',
  199. title: '卧室',
  200. width: 60
  201. }, {
  202. field: 'hall',
  203. title: '客厅',
  204. width: 60
  205. }, {
  206. field: 'toilet',
  207. title: '卫生间',
  208. width: 60
  209. }, {
  210. field: 'addtime',
  211. title: '时间',
  212. minWidth: 100
  213. }, {
  214. title: '操作',
  215. width: 240,
  216. align: 'center',
  217. fixed: 'right',
  218. templet: "#table-anli-action"
  219. }]
  220. ],
  221. page: true,
  222. limit: 30,
  223. height: 'full-220',
  224. text: '对不起,加载出现异常!'
  225. });
  226. //监听列表
  227. table.on('tool(anli-table)', function(obj) {
  228. var data = obj.data;
  229. console.log(data.id);
  230. if(obj.event === 'anli-details') {
  231. layer.open({
  232. type: 2,
  233. title: '备注信息状态',
  234. content: "{:url('material/casedetail')}?id=" + data.id,
  235. maxmin: true,
  236. area: ['800px', '600px']
  237. });
  238. }
  239. if(obj.event === 'anli-clue-list') {
  240. layer.open({
  241. type: 2,
  242. title: '素材线索数据',
  243. content: "{:url('data/cluedata')}?type=case&id=" + data.id,
  244. maxmin: true,
  245. area: ['900px', '600px']
  246. });
  247. }
  248. if(obj.event === 'anli-delete') {
  249. layer.confirm('确定要删除此素材么?', function () {
  250. $.get("{:url('material/apicasedelete')}?id=" + data.id, function (res) {
  251. if (res.code === 0) {
  252. layer.msg(res.msg, {anim: 0,time: 400},function () {
  253. table.reload('anli-table');
  254. });
  255. } else {
  256. layer.msg(res.msg, {anim: 6,time: 400});
  257. }
  258. });
  259. });
  260. }
  261. });
  262. };
  263. firstTabTableLoad();
  264. element.on('tab(tabletab)', function() {
  265. var tabname = this.getAttribute('lay-id');
  266. // location.hash = 'tabletab='+ this.getAttribute('lay-id');
  267. if(tabname == 'anli') {
  268. firstTabTableLoad();
  269. }
  270. if(tabname == 'evidence') {
  271. //客户见证列表
  272. table.render({
  273. elem: '#evidence-table',
  274. autoSort: false,
  275. url: "{:url('material/evidencelist')}",
  276. cols: [
  277. [{
  278. type: 'numbers',
  279. field: 'id',
  280. width: 80,
  281. title: '序号',
  282. sort: true
  283. }, {
  284. field: 'title',
  285. title: '客户见证'
  286. }, {
  287. title: '见证数目',
  288. templet: '#evidence_num'
  289. }, {
  290. field: 'addtime',
  291. title: '时间',
  292. minWidth: 100
  293. }, {
  294. title: '操作',
  295. width: 240,
  296. align: 'center',
  297. fixed: 'right',
  298. toolbar: '#table-evidence-action'
  299. }]
  300. ],
  301. page: true,
  302. limit: 30,
  303. height: 'full-220',
  304. text: '对不起,加载出现异常!'
  305. });
  306. //监听列表
  307. table.on('tool(evidence-table)', function(obj) {
  308. var data = obj.data;
  309. console.log(data.id);
  310. if(obj.event === 'evidence-clue-list') {
  311. layer.open({
  312. type: 2,
  313. title: '素材线索数据',
  314. content: "{:url('data/cluedata')}?type=evidence&id=" + data.id,
  315. maxmin: true,
  316. area: ['900px', '600px']
  317. });
  318. }
  319. if(obj.event === 'evidence-delete') {
  320. layer.confirm('确定要删除此素材么?', function () {
  321. $.get("{:url('material/apievidelete')}?id=" + data.id, function (res) {
  322. if (res.code === 0) {
  323. layer.msg(res.msg, {anim: 0,time: 400},function () {
  324. table.reload('evidence-table');
  325. });
  326. } else {
  327. layer.msg(res.msg, {anim: 6,time: 400});
  328. }
  329. });
  330. });
  331. }
  332. });
  333. }
  334. if(tabname == 'wx') {
  335. //朋友圈列表
  336. table.render({
  337. elem: '#wxshow-table',
  338. autoSort: false,
  339. url: "{:url('material/wxshowlist')}",
  340. cols: [
  341. [{
  342. type: 'numbers',
  343. field: 'id',
  344. width: 80,
  345. title: '序号',
  346. sort: true
  347. }, {
  348. field: 'content',
  349. title: '内容'
  350. }, {
  351. field: 'addtime',
  352. title: '时间',
  353. minWidth: 100
  354. }, {
  355. title: '类型',
  356. templet: function(d) {
  357. if(d.type == 1) {
  358. return '视频';
  359. } else if(d.type == 2) {
  360. return '图片';
  361. }else{
  362. return '文字';
  363. }
  364. }
  365. }, {
  366. title: '操作',
  367. width: 240,
  368. align: 'center',
  369. fixed: 'right',
  370. toolbar: '#table-wxshow-action'
  371. }]
  372. ],
  373. page: true,
  374. limit: 30,
  375. height: 'full-220',
  376. text: '对不起,加载出现异常!'
  377. });
  378. //监听列表
  379. table.on('tool(wxshow-table)', function(obj) {
  380. var data = obj.data;
  381. console.log(data.id);
  382. if(obj.event === 'wx-clue-list') {
  383. layer.open({
  384. type: 2,
  385. title: '素材线索数据',
  386. content: "{:url('data/cluedata')}?type=wx&id=" + data.id,
  387. maxmin: true,
  388. area: ['900px', '600px']
  389. });
  390. }
  391. if(obj.event === 'wx-delete') {
  392. layer.confirm('确定要删除此素材么?', function () {
  393. $.get("{:url('material/apiwxdelete'}?id=" + data.id, function (res) {
  394. if (res.code === 0) {
  395. layer.msg(res.msg, {anim: 0,time: 400},function () {
  396. table.reload('wxshow-table');
  397. });
  398. } else {
  399. layer.msg(res.msg, {anim: 6,time: 400});
  400. }
  401. });
  402. });
  403. }
  404. });
  405. }
  406. });
  407. var field = {};
  408. form.on('select(state)', function(data) {
  409. field['state'] = data.value;
  410. table.reload('anli-table', {
  411. where: field
  412. ,page: {curr:1}
  413. });
  414. });
  415. form.on('select(user_id)', function(data) {
  416. field['user_id'] = data.value;
  417. table.reload('anli-table', {
  418. where: field
  419. ,page: {curr:1}
  420. });
  421. });
  422. form.on('select(means)', function(data) {
  423. field['means'] = data.value;
  424. table.reload('anli-table', {
  425. where: field
  426. ,page: {curr:1}
  427. });
  428. });
  429. form.on('select(date)', function(data) {
  430. field['date'] = data.value;
  431. table.reload('anli-table', {
  432. where: field
  433. ,page: {curr:1}
  434. });
  435. });
  436. //备注
  437. $('body').on('mouseover', '.remarksInfo', function() {
  438. var type = $(this).data('type');
  439. layer.tips(type, this, {
  440. tips: [1, '#3595CC'],
  441. time: 2000
  442. });
  443. });
  444. });
  445. </script>
  446. {/block}