zhouchanghao
/
ZHadmin
forked from jifuning/ZHadmin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../static/css/font.css">
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <link rel="stylesheet" href="../../static/css/style.css">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-input-inline input, .layui-input-inline textarea{
            width: 300px;
        }
        html{
            overflow-y: auto;
        }
        .a_colour{
            background: #f8f8f8;
            height: 38px;
            width: 50px;
            position: absolute;
            border: 1px solid #ddd;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
            cursor:pointer;
        }
        .a_colour span{
            width: 20px;
            height: 20px;
            display: block;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            background: red;
            text-align: center;
        }
        .a_modle span{
            width: 20px;
            height: 20px;
            display: block;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            background: red;
            text-align: center;
            cursor: pointer;
        }
        .a_colour>span{
            background: green;
            margin: auto;
            position: relative;
            top: 8px;
        }
        .a_modle{
            width: 100px;
            height: 60px;
            position: absolute;
            top: 42px;
            left: -23px;
            border: 1px solid #ddd;
            padding-left: 20px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: none;
            z-index: 100;
            background: #fff;
        }
        .a_modle span{
            display: inline-block;
            position: relative;
            top: 12px;
        }
        .a_modle span:last-child{
            margin-left: 10px;
            background: green;
        }
        .a_modle .pointedSpan{
            position: absolute;
            width: 12px;
            height: 12px;
            border-top: 1px solid rgba(120,130,140,.25);
            border-left: 1px solid rgba(120,130,140,.25);
            background-color: #fff;
            top: -6px;
            left: 36px;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        .layui-input-inline .a_steta{
            margin-left: 50px;
            width: 250px;
            border-left: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .a_delete,.a_delete1{
            position: absolute;
            top: 8px;
            right: -140px;
            font-size: 20px;
            cursor: pointer;
        }
        .a_delete i,.a_delete1 i{
            font-size: 20px;
        }
        .a_modle b{
            font-size: 12px;
            font-weight: normal;
            position: absolute;
            bottom: 5px;
        }
        .a_continue{
            left: 17px;
        }
        .a_complete{
            right: 20px;
        }
        .a_itme{
            position: relative;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
<div class="weadmin-body">
    <form class="layui-form a_formContet">
        <div class="layui-form-item">
            <label class="layui-form-label">
                状态组名称
            </label>
            <div class="layui-input-inline">
                <input type="text" id="stetaName" value="" placeholder="请输入状态组名称" name="number" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="we-red">*</span>状态项
            </label>
            <div class="layui-input-inline a_itmes">

            </div>
        </div>
    </form>
    <div class="layui-form-item" style="text-align: center;padding-top: 50px">
        <button  class="layui-btn a_addBtn" lay-submit="">添加状态</button>
    </div>
</div>
<script src="../../lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    layui.extend({
        admin: '{/}../../static/js/admin'
    });
    layui.use(['form','layer','admin','jquery'], function(){
        var form = layui.form,
            admin = layui.admin,
            layer = layui.layer,
            $=layui.jquery;
        form.render();
        // 选择进度
        $("body").on("click",'.a_colour',function () {
            $(this).parent().find(".a_modle").show();
        });
        $(document).bind("click",function(e){
            var target = $(e.target);
            var tag = $('.a_colour');
            var flag= true;
            if(target.closest(tag).length == 0 && flag == true){
                $(".a_modle").hide();
                flag = false;
            }
        });
        $("body").on("click",'.a_modle>span',function () {
            var index = $(this).index();
            console.log(index);
            if (index === 3) {
                $(this).parent().parent().find(".a_colour").find('span').css("background-color",'red');
                $(this).parent().parent().find(".a_colour").find('span').attr("color_data",'red')
            }else {
                $(this).parent().parent().find(".a_colour").find('span').css("background-color",'green');
                $(this).parent().parent().find(".a_colour").find('span').attr("color_data",'green')
            }
        });
        // 添加状态
        $(".a_addBtn").click(function () {
            var itme = `<div class="a_itme">
                    <div class="a_colour">
                        <span color_data="green"></span>
                        </div>
                        <div class="a_modle">
                            <i class="pointedSpan"></i>
                            <b class="a_continue">继续</b>
                            <b class="a_complete">完成</b>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="a_delete">
                            <i class="layui-icon layui-icon-delete"></i>
                        </div>
                        <input type="text" value="" placeholder="请输入状态名称" name="username" required="" lay-verify="required" autocomplete="off" class="layui-input a_steta">
                    </div>`;
            $(".a_itmes").append(itme);
        });
        // 删除状态
        $("body").delegate('.a_delete','click',function () {
            if ($(".a_itmes .a_itme").length === 1){
                layer.msg('原始状态不能删除', {icon: 8});
            }else {
                $(this).parent().remove();
            }
        });
    });
</script>
</body>

</html>