create.php 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. {extend name="public/container"}
  2. {block name='head_top'}
  3. <style>
  4. .layui-form-item .special-label i{display: inline-block;width: 18px;height: 18px;font-size: 18px;color: #fff;}
  5. .layui-form-item .label-box p{line-height: inherit;}
  6. .m-t-5{margin-top:5px;}
  7. #app .layui-barrage-box{margin-bottom: 10px;margin-top: 10px;margin-left: 10px;border: 1px solid #0092DC;border-radius: 5px;cursor: pointer;position: relative;}
  8. #app .layui-barrage-box.border-color{border-color: #0bb20c;}
  9. #app .layui-barrage-box .del-text{position: absolute;top: 0;left: 0;background-color: rgba(0,0,0,0.5);color: #ffffff;width: 92%;text-align: center;}
  10. #app .layui-barrage-box p{padding:5px 5px; }
  11. #app .layui-empty-text{text-align: center;font-size: 18px;}
  12. #app .layui-empty-text p{padding: 10px 10px;}
  13. </style>
  14. {/block}
  15. {block name="content"}
  16. <div class="layui-fluid">
  17. <div class="layui-row layui-col-space15" id="app" v-cloak>
  18. <div class="layui-col-md12">
  19. <div class="layui-card">
  20. <div class="layui-card-body">
  21. <form action="" class="layui-form">
  22. <div class="layui-form-item">
  23. <div class="layui-form-item">
  24. <div class="layui-inline">
  25. <label class="layui-form-label required">分类名称:</label>
  26. <div class="layui-input-inline">
  27. <input type="text" name="title" v-model.trim="formData.title" autocomplete="off" placeholder="最多6个字" class="layui-input" maxlength="6">
  28. </div>
  29. </div>
  30. <div class="layui-inline">
  31. <label class="layui-form-label">顶级分类:</label>
  32. <div class="layui-input-inline">
  33. <select name="pid" v-model="formData.pid" lay-search="" lay-filter="pid">
  34. <option v-for="item in cateList" :value="item.id">{{item.title}}</option>
  35. </select>
  36. </div>
  37. </div>
  38. </div>
  39. <div class="layui-form-item">
  40. <div class="layui-inline">
  41. <label class="layui-form-label">排序:</label>
  42. <div class="layui-input-inline">
  43. <input type="number" name="sort" v-model="formData.sort" autocomplete="off" class="layui-input" v-sort>
  44. </div>
  45. </div>
  46. <div class="layui-inline">
  47. <label class="layui-form-label">状态:</label>
  48. <div class="layui-input-inline">
  49. <input type="radio" name="is_show" value="1" title="显示" v-model="formData.is_show" lay-filter="is_show" >
  50. <input type="radio" name="is_show" value="0" title="隐藏" v-model="formData.is_show" lay-filter="is_show">
  51. </div>
  52. </div>
  53. </div>
  54. <div class="layui-form-item">
  55. <div class="layui-input-block">
  56. <div class="layui-btn-container">
  57. <button class="layui-btn layui-btn-normal" type="button" @click="save">{{id ? '立即修改':'立即提交'}}</button>
  58. <button class="layui-btn layui-btn-primary clone" type="button" @click="clone_form">取消</button>
  59. </div>
  60. </div>
  61. </div>
  62. </form>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. <script type="text/javascript" src="{__ADMIN_PATH}js/request.js"></script>
  69. <script type="text/javascript" src="{__ADMIN_PATH}js/layuiList.js"></script>
  70. {/block}
  71. {block name='script'}
  72. <script>
  73. var id={$id},cate=<?=isset($cate) ? $cate : []?>;
  74. require(['vue'],function(Vue) {
  75. new Vue({
  76. el: "#app",
  77. directives: {
  78. sort: {
  79. bind: function (el, binding, vnode) {
  80. var vm = vnode.context;
  81. el.addEventListener('change', function () {
  82. if (!this.value || this.value < 0) {
  83. vm.formData.sort = 0;
  84. } else if (this.value > 9999) {
  85. vm.formData.sort = 9999;
  86. } else {
  87. vm.formData.sort = parseInt(this.value);
  88. }
  89. });
  90. }
  91. }
  92. },
  93. data: {
  94. cateList:[],
  95. formData:{
  96. title:cate.title || '',
  97. pid:Number(cate.pid) || 0,
  98. sort:Number(cate.sort) || 0,
  99. is_show:cate.is_show || 1
  100. }
  101. },
  102. watch: {
  103. 'formData.pid': function (v) {
  104. this.$nextTick(function () {
  105. layList.form.render();
  106. });
  107. }
  108. },
  109. methods:{
  110. clone_form: function (id) {
  111. var that = this;
  112. if (parseInt(id) == 0) {
  113. parent.layer.closeAll();
  114. }
  115. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  116. parent.layer.close(index); //再执行关闭
  117. },
  118. //获取分类
  119. get_subject_list: function () {
  120. var that = this;
  121. layList.baseGet(layList.U({a: 'get_cate_list'}), function (res) {
  122. that.$set(that, 'cateList', res.data);
  123. that.$nextTick(function () {
  124. layList.form.render('select');
  125. })
  126. });
  127. },
  128. save:function () {
  129. var that=this;
  130. if(!that.formData.title) return layList.msg('请输入分类名称');
  131. layList.loadFFF();
  132. layList.basePost(layList.U({a:'save',q:{id:id}}),that.formData,function (res) {
  133. layList.loadClear();
  134. if(parseInt(id) == 0) {
  135. layList.layer.confirm('添加成功,您要继续添加分类吗?', {
  136. btn: ['继续添加', '立即提交'] //按钮
  137. }, function (index) {
  138. layList.layer.close(index);
  139. }, function () {
  140. parent.layer.closeAll();
  141. });
  142. }else{
  143. layList.msg('修改成功',function () {
  144. parent.layer.closeAll();
  145. })
  146. }
  147. },function (res) {
  148. layList.msg(res.msg);
  149. layList.loadClear();
  150. });
  151. }
  152. },
  153. mounted:function () {
  154. var that=this;
  155. window.changeIMG = that.changeIMG;
  156. that.get_subject_list();
  157. this.$nextTick(function () {
  158. layList.form.render();
  159. layList.select('pid', function (obj) {
  160. if(id==obj.value && id>0){
  161. layList.msg('上级分类不能是自己',function () {
  162. location.reload();
  163. });
  164. }else{
  165. that.formData.pid = obj.value;
  166. }
  167. });
  168. layList.form.on('radio(is_show)',function (data) {
  169. that.formData.is_show=data.value;
  170. });
  171. });
  172. }
  173. })
  174. })
  175. </script>
  176. {/block}