updateState.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  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" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  9. <link rel="stylesheet" href="../../static/css/font.css">
  10. <link rel="stylesheet" href="../../static/css/weadmin.css">
  11. <link rel="stylesheet" href="../../static/css/style.css">
  12. <!-- 让IE8/9支持媒体查询,从而兼容栅格 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  15. <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  16. <![endif]-->
  17. <style>
  18. .layui-input-inline input, .layui-input-inline textarea{
  19. width: 300px;
  20. }
  21. html{
  22. overflow-y: auto;
  23. }
  24. .a_colour{
  25. background: #f8f8f8;
  26. height: 38px;
  27. width: 50px;
  28. position: absolute;
  29. border: 1px solid #ddd;
  30. -webkit-box-sizing: border-box;
  31. -moz-box-sizing: border-box;
  32. box-sizing: border-box;
  33. border-top-left-radius: 2px;
  34. border-bottom-left-radius: 2px;
  35. cursor:pointer;
  36. }
  37. .a_colour span{
  38. width: 20px;
  39. height: 20px;
  40. display: block;
  41. -webkit-border-radius: 50%;
  42. -moz-border-radius: 50%;
  43. border-radius: 50%;
  44. background: red;
  45. text-align: center;
  46. }
  47. .a_modle span{
  48. width: 20px;
  49. height: 20px;
  50. display: block;
  51. -webkit-border-radius: 50%;
  52. -moz-border-radius: 50%;
  53. border-radius: 50%;
  54. background: red;
  55. text-align: center;
  56. cursor: pointer;
  57. }
  58. .a_colour>span{
  59. background: green;
  60. margin: auto;
  61. position: relative;
  62. top: 8px;
  63. }
  64. .a_modle{
  65. width: 100px;
  66. height: 60px;
  67. position: absolute;
  68. top: 42px;
  69. left: -23px;
  70. border: 1px solid #ddd;
  71. padding-left: 20px;
  72. -webkit-box-sizing: border-box;
  73. -moz-box-sizing: border-box;
  74. box-sizing: border-box;
  75. display: none;
  76. z-index: 100;
  77. background: #fff;
  78. }
  79. .a_modle span{
  80. display: inline-block;
  81. position: relative;
  82. top: 12px;
  83. }
  84. .a_modle span:last-child{
  85. margin-left: 10px;
  86. background: green;
  87. }
  88. .a_modle .pointedSpan{
  89. position: absolute;
  90. width: 12px;
  91. height: 12px;
  92. border-top: 1px solid rgba(120,130,140,.25);
  93. border-left: 1px solid rgba(120,130,140,.25);
  94. background-color: #fff;
  95. top: -6px;
  96. left: 36px;
  97. -webkit-transform: rotate(45deg);
  98. -moz-transform: rotate(45deg);
  99. -ms-transform: rotate(45deg);
  100. -o-transform: rotate(45deg);
  101. transform: rotate(45deg);
  102. }
  103. .layui-input-inline .a_steta{
  104. margin-left: 50px;
  105. width: 250px;
  106. border-left: 0;
  107. border-top-left-radius: 0;
  108. border-bottom-left-radius: 0;
  109. }
  110. .a_delete,.a_delete1{
  111. position: absolute;
  112. top: 8px;
  113. right: -140px;
  114. font-size: 20px;
  115. cursor: pointer;
  116. }
  117. .a_delete i,.a_delete1 i{
  118. font-size: 20px;
  119. }
  120. .a_modle b{
  121. font-size: 12px;
  122. font-weight: normal;
  123. position: absolute;
  124. bottom: 5px;
  125. }
  126. .a_continue{
  127. left: 17px;
  128. }
  129. .a_complete{
  130. right: 20px;
  131. }
  132. .a_itme{
  133. position: relative;
  134. margin-bottom: 20px;
  135. }
  136. </style>
  137. </head>
  138. <body>
  139. <div class="weadmin-body">
  140. <form class="layui-form a_formContet">
  141. <div class="layui-form-item">
  142. <label class="layui-form-label">
  143. 状态组名称
  144. </label>
  145. <div class="layui-input-inline">
  146. <input type="text" id="stetaName" value="" placeholder="请输入状态组名称" name="number" autocomplete="off" class="layui-input">
  147. </div>
  148. </div>
  149. <div class="layui-form-item">
  150. <label class="layui-form-label">
  151. <span class="we-red">*</span>状态项
  152. </label>
  153. <div class="layui-input-inline a_itmes">
  154. </div>
  155. </div>
  156. </form>
  157. <div class="layui-form-item" style="text-align: center;padding-top: 50px">
  158. <button class="layui-btn a_addBtn" lay-submit="">添加状态</button>
  159. </div>
  160. </div>
  161. <script src="../../lib/layui/layui.js" charset="utf-8"></script>
  162. <script type="text/javascript">
  163. layui.extend({
  164. admin: '{/}../../static/js/admin'
  165. });
  166. layui.use(['form','layer','admin','jquery'], function(){
  167. var form = layui.form,
  168. admin = layui.admin,
  169. layer = layui.layer,
  170. $=layui.jquery;
  171. form.render();
  172. // 选择进度
  173. $("body").on("click",'.a_colour',function () {
  174. $(this).parent().find(".a_modle").show();
  175. });
  176. $(document).bind("click",function(e){
  177. var target = $(e.target);
  178. var tag = $('.a_colour');
  179. var flag= true;
  180. if(target.closest(tag).length == 0 && flag == true){
  181. $(".a_modle").hide();
  182. flag = false;
  183. }
  184. });
  185. $("body").on("click",'.a_modle>span',function () {
  186. var index = $(this).index();
  187. console.log(index);
  188. if (index === 3) {
  189. $(this).parent().parent().find(".a_colour").find('span').css("background-color",'red');
  190. $(this).parent().parent().find(".a_colour").find('span').attr("color_data",'red')
  191. }else {
  192. $(this).parent().parent().find(".a_colour").find('span').css("background-color",'green');
  193. $(this).parent().parent().find(".a_colour").find('span').attr("color_data",'green')
  194. }
  195. });
  196. // 添加状态
  197. $(".a_addBtn").click(function () {
  198. var itme = `<div class="a_itme">
  199. <div class="a_colour">
  200. <span color_data="green"></span>
  201. </div>
  202. <div class="a_modle">
  203. <i class="pointedSpan"></i>
  204. <b class="a_continue">继续</b>
  205. <b class="a_complete">完成</b>
  206. <span></span>
  207. <span></span>
  208. </div>
  209. <div class="a_delete">
  210. <i class="layui-icon layui-icon-delete"></i>
  211. </div>
  212. <input type="text" value="" placeholder="请输入状态名称" name="username" required="" lay-verify="required" autocomplete="off" class="layui-input a_steta">
  213. </div>`;
  214. $(".a_itmes").append(itme);
  215. });
  216. // 删除状态
  217. $("body").delegate('.a_delete','click',function () {
  218. if ($(".a_itmes .a_itme").length === 1){
  219. layer.msg('原始状态不能删除', {icon: 8});
  220. }else {
  221. $(this).parent().remove();
  222. }
  223. });
  224. });
  225. </script>
  226. </body>
  227. </html>