guangan/plugs/think-plugs-ticket/src/view/approval/form.html

<form class="layui-form layui-card" action="{:sysuri()}" data-auto="true" method="post" autocomplete="off" data-table-id="ticketTable">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
        <div class="layui-form-item">
            <label class="layui-form-label">流程名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" value="{$vo.name|default=''}" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">流程类型</label>
            <div class="layui-input-block">
                <select class="layui-select" name="type" required>
                    <option value="GDSH" {if isset($vo.type) && $vo.type == 'GDSH'}selected{/if}>工单审核</option>
                    <option value="HSSH" {if isset($vo.type) && $vo.type == 'HSSH'}selected{/if}>核实工单审核</option>
                    <option value="WXSH" {if isset($vo.type) && $vo.type == 'WXSH'}selected{/if}>维修工单审核</option>
                    <option value="YSSH" {if isset($vo.type) && $vo.type == 'YSSH'}selected{/if}>验收工单审核</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">审批步骤</label>
            <div class="layui-input-block" id="approval-steps">
                <table class="layui-hide" id="processStepTable" lay-filter="processStepTable"></table>
                <button type="button" class="layui-btn layui-btn-normal add-step">添加步骤</button>
            </div>
        </div>
        <input type="hidden" name="steps" value='{$vo.steps|default=[]|raw|json_encode}'>
        {notempty name='vo.id'}<input type="hidden" name="id" value="{$vo.id}">{/notempty}
    </div>
    <div class="layui-form-item text-center">
        <button class="layui-btn layui-btn-normal" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>
</form>
<script type="text/html" id="editToolbar">
    <a class="layui-btn layui-btn-danger layui-btn-xs remove-step">删除</a>
</script>
<script type="text/html" id="approverType">
    <select class="layui-select" lay-filter="approverType" required>
        <option value="0" {{# if (d.approver_type == 0) {}} selected {{# } }}>固定审批人</option>
        <option value="3" {{# if (d.approver_type == 3) {}} selected {{# } }}>自由指定审批人</option>
    </select>
</script>
<script type="text/html" id="approverId">
    {{# if (d.approver_type == 0) { }}
    <select class="layui-select" lay-filter="approverId" required lay-search>
        <option value="">请选择审批人</option>
        {foreach $users as $user}
        <option value="{$user.id}" {{# if (d.approver_id == {$user.id}) {}} selected {{# } }}>{$user.username}</option>
        {/foreach}
    </select>
    {{# } else { }}
    用户自行选择
    {{# } }}
</script>
<style>
    .layui-table-cell {
        overflow: visible !important;
    }
</style>
<script>
$(function () {
    layui.use(['table', 'form'], function () {
        var table = layui.table,
            form = layui.form;
        // 回显步骤数据
        var stepsData = JSON.parse($('input[name="steps"]').val());
        table.render({
            height: '400',
            title: '步骤列表',
            cols: [[
                {field:'title', title:'步骤名称', width:160, edit: true},
                {field:'approver_type', title:'审批人类型', width:160, templet: '#approverType'},
                {field:'approver_id', title:'选择审批人', width:160, templet: '#approverId'},
                {align: 'center', toolbar: '#editToolbar', title: '操作', width: 200}
            ]],
            data: stepsData,
            page: false,
            id: 'processStepTable',
            elem: '#processStepTable',
        })
        form.on('select(approverType)', function (data, item) {
            var index = $(this).closest('tr').data('index');
            const currData = table.cache['processStepTable'] || [];
            currData[index].approver_type = data.value;
            $('input[name="steps"]').val(JSON.stringify(currData))
            table.reload('processStepTable', {
                data: currData
            });
        });
        form.on('select(approverId)', function (data, item) {
            var index = $(this).closest('tr').data('index');
            const currData = table.cache['processStepTable'] || [];
            currData[index].approver_id = data.value;
            $('input[name="steps"]').val(JSON.stringify(currData))
            table.reload('processStepTable', {
                data: currData
            });
        });
        table.on('tool(processStepTable)', function (obj) {
            if (obj.event === 'remove') {
                obj.del();
            }
        });
        table.on('edit(processStepTable)', function (obj) {
            const currData = table.cache['processStepTable'] || [];
            $('input[name="steps"]').val(JSON.stringify(currData))

        })
        // 添加步骤
        $('.add-step').on('click', function () {
            const currData = table.cache['processStepTable'] || [];
            currData.push({
                title: '',
                approver_type: 0,
            })
            table.reload('processStepTable', {
                data: currData
            });
        });

        // 删除步骤
        $('#approval-steps').on('click', '.remove-step', function () {
            var index = $(this).closest('tr').data('index');
            const currData = table.cache['processStepTable'] || [];
            currData.splice(index, 1);
            table.reload('processStepTable', {
                data: currData
            });
        });
    });

});
</script>