dingding/application/approve/view/approve_flow/form.html

{extend name='admin@main'}

{block name="button"}

<button class="layui-btn layui-btn-sm layui-btn-primary" type='button' onclick="javascript:history.back()">返回</button>

{/block}

{block name="content"}
<div class="think-box-shadow">
    <form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
        <div class="layui-card-body">

            {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
            <input type='hidden' value='{$get_user_type_list_json}' id='get_user_type_list_json'>
            <input type='hidden' value='{$user_list_json}' id='user_list_json'>

            <div class="layui-form-item">
                <label class="layui-form-label color-green font-w7">模块</label>
                <div class="layui-input-block">
                    <input name="" placeholder="" value="{$get_module_list[$vo.module]}" class="layui-input layui-bg-gray" disabled>
                    <p class="help-block"></p>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label color-green font-w7">审批流类型</label>
                <div class="layui-input-block">
                    <input name="" placeholder="" value="{$get_type_list[$vo.flow_type]}" class="layui-input layui-bg-gray" disabled>
                    <p class="help-block"></p>
                </div>
            </div>

            {eq name='vo.flow_item' value='0' }
            {else}
            <div class="layui-form-item">
                <label class="layui-form-label color-green font-w7">审批流项</label>
                <div class="layui-input-block">
                    <input name="" placeholder="" value="{$get_item_list[$vo.flow_item]}" class="layui-input layui-bg-gray" disabled>
                    <p class="help-block"></p>
                </div>
            </div>
            {/eq}

            <div class="layui-form-item">
                <label class="layui-form-label color-green font-w7">审批层级</label>
                <div class="layui-input-block"></div>
            </div>
            <div class="paramsData">
                {foreach name="vo.user_data_text" item="val" key="key"}
                <div class="layui-form-item paramsItem{$key}">
                    <label class="layui-form-label">第{$key+1}级：</label>
                    <div class="layui-input-block">
                        <div class="layui-input-inline">
                            <select class="layui-select select1" name="user_data[{$key}][user_type]" id="c-user_type-{$key}" lay-filter="user_type">
                                {foreach $get_user_type_list as $kk=>$vv}
                                {eq name='val.user_type' value='$kk.""'}
                                <option selected value="{$kk}">{$vv}</option>
                                {else}
                                <option value="{$kk}">{$vv}</option>
                                {/eq}
                                {/foreach}
                            </select>
                        </div>
                        <div class="layui-input-inline paramsItemvalue paramsItemvalue{$key}" {eq name='val.user_type' value='1'}style="display:none" {/eq}>
                            <select class="layui-select select2" name="user_data[{$key}][userid]" id="c-userid-{$key}">
                                <option value="">请选择员工</option>
                                {foreach $user_list as $k=>$v}
                                {eq name='val.userid' value='$v.userid.""'}
                                <option selected value="{$v.userid}">{$v.name}</option>
                                {else}
                                <option value="{$v.userid}">{$v.name}</option>
                                {/eq}
                                {/foreach}
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="delParams('{$key}');">删除</button>
                        </div>
                    </div>
                </div>
                {/foreach}
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label color-green font-w7"></label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" onclick="addParams();">+ 添加审批层级</button>
                </div>
            </div>
        </div>
        <div class="hr-line-dashed"></div>
        <div class="layui-form-item text-center">
            <button class="layui-btn" type='submit'>保存数据</button>
<!--            <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>-->
        </div>
    </form>
<script>
    window.form.render();
</script>
</div>
{/block}
{block name="style"}{/block}
{block name='script'}
<script>

    form.on('select(user_type)', function(data){
        var str = data.elem.id;
        var arr = str.split("-");
        var key = arr[2];
        console.log(arr);
        if(data.value == 1){
            $('.paramsItemvalue'+key).hide();
        } else{
            $('.paramsItemvalue'+key).show();
        }
    });

    function addParams() {
        var length = $('.paramsData').children().length;
        var key = length;
        var count = length+1;
        var get_user_type_list_json = $.parseJSON($("#get_user_type_list_json").val());
        var get_user_type_list_html = "";
        var get_user_type_list_html2 = "";
        var get_user_list_json = $.parseJSON($("#user_list_json").val());
        var get_user_list_html = "";
        var get_user_list_html2 = "";
        $.each(get_user_type_list_json,function (index,element) {
            get_user_type_list_html += '<option value='+index+'>'+element+'</option>';
            if(index == 1){
                get_user_type_list_html2 += '<dd lay-value='+index+' class="layui-this">'+element+'</dd>';
            } else{
                get_user_type_list_html2 += '<dd lay-value='+index+' class="">'+element+'</dd>';
            }
        })
        $.each(get_user_list_json,function (index,element) {
            get_user_list_html += '<option value='+element.userid+'>'+element.name+'</option>';
            get_user_list_html2 += '<dd lay-value='+element.userid+' class="">'+element.name+'</dd>';
        })
        var html = '<div class="layui-form-item paramsItem'+key+'"> ' +
            '<label class="layui-form-label">第'+count+'级：</label> ' +
            '<div class="layui-input-block"> ' +
            '<div class="layui-input-inline"> ' +
            '<select class="layui-select select1" name="user_data['+key+'][user_type]" id="c-user_type-'+key+'" lay-filter="user_type">'+get_user_type_list_html+'</select> ' +
            '<div class="layui-unselect layui-form-select">' +
            '<div class="layui-select-title">' +
            '<input type="text" placeholder="请选择" value="负责人主管" readonly="" class="layui-input layui-unselect">' +
            '<i class="layui-edge"></i>' +
            '</div> ' +
            '<dl class="layui-anim layui-anim-upbit">'+get_user_type_list_html2+'</dl>' +
            '</div>'+
            '</div> ' +
            '<div class="layui-input-inline paramsItemvalue paramsItemvalue'+key+'" style="display:none"> ' +
            '<select class="layui-select select2" name="user_data['+key+'][userid]" id="c-userid-'+key+'"><option value="">请选择员工</option> ' +get_user_list_html+' </select> ' +
            '<div class="layui-unselect layui-form-select">' +
            '<div class="layui-select-title">' +
            '<input type="text" placeholder="请选择员工" value="" readonly="" class="layui-input layui-unselect">' +
            '<i class="layui-edge"></i>' +
            '</div> ' +
            '<dl class="layui-anim layui-anim-upbit">'+get_user_list_html2+'</dl>' +
            '</div>'+
            '</div> ' +
            '<div class="layui-input-inline"> ' +
            '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="delParams('+key+');">删除</button> ' +
            '</div> ' +
            '</div> ' +
            '</div>';
        $(".paramsData").append(html);
        form.render();
    }
    
    function delParams(key) {
        var length = $('.paramsData').children().length;
        var count = length-1;
        console.log(length);
        if(key > 0 && key == count){
            //删除的是最后一步(不是唯一一步)
            $(".paramsItem" + key).remove();
        } else{
            //删除的是中间的一步，所有步骤序号重新排列
            $(".paramsItem" + key).remove();
            for(var i=key;i < length;i++){
                var ii = i-1;
                $(".paramsData .layui-form-item").eq(ii).attr("class","layui-form-item paramsItem"+ii);
                $(".paramsData .layui-form-item").eq(ii).find(".layui-form-label").html("第"+i+"级：");
                $(".paramsData .layui-form-item").eq(ii).find(".select1").attr("id","c-user_type-"+ii);
                $(".paramsData .layui-form-item").eq(ii).find(".select1").attr('name',"user_data["+ii+"][user_type]");
                $(".paramsData .layui-form-item").eq(ii).find(".select2").attr("id","c-userid-"+ii);
                $(".paramsData .layui-form-item").eq(ii).find(".select2").attr('name',"user_data["+ii+"][userid]");
                $(".paramsData .layui-form-item").eq(ii).find(".paramsItemvalue").attr("class","layui-input-inline paramsItemvalue paramsItemvalue"+ii);
                $(".paramsData .layui-form-item").eq(ii).find(".layui-btn-danger").attr("onclick","delParams("+ii+");");
            }
        }
    }
</script>
{/block}