erp/template/erp/beihuogl_dyapplyadd.html

{Template header}
<style>
    /* 整个表格容器 — 自适应滚动 + 适度居中 */
    .table-wrapper {
        max-width: 1280px;
        margin: 0 auto;
        background: #ffffff;
        border-radius: 0px;    /* 彻底直角，更素净，也可稍圆角1px？保留直边更简约 */
        overflow-x: auto;
        box-shadow: none;       /* 无阴影，绝对不花哨 */
    }

    /* 简约表格核心样式：细边框 + 清晰可读 */
    .simple-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
        line-height: 1.5;
        background-color: #fff;
        table-layout: auto;      /* 让列宽根据内容自动适应，保持自然 */
        min-width: 560px;        /* 保证宽屏舒适，但允许滚动 */
    }

    /* 所有单元格共用边框与内边距 */
    .simple-table th,
    .simple-table td {
        border: 1px solid #e2e6e9;   /* 极浅灰边框，干净不突兀 */
        padding: 12px 12px;
        vertical-align: middle;
        text-align: left;
    }

    /* 表头样式：浅灰底 + 半粗体 + 适中字号 */
    .simple-table th {
        background-color: #f2f4f7;
        font-weight: 600;
        font-size: 0.85rem;
        letter-spacing: 0.3px;
        color: #1f3a4b;
        white-space: nowrap;
    }

    /* 表格行数据：默认纯白底，不额外加花纹，保持极简 */
    .simple-table td {
        background-color: #ffffff;
        color: #1f2f3a;
    }

    /* 轻微行区分：提升可读性但依然克制（不花哨，仅轻微底色交替） */
    .simple-table tbody tr:nth-child(even) td {
        background-color: #fafbfc;
    }

    /* 可选轻量悬浮效果：增加操作反馈但不张扬（符合简约但现代交互） */
    .simple-table tbody tr:hover td {
        background-color: #f5f7fa;
        transition: background 0.15s ease;
    }

    /* ---------- 输入框样式：干净，适应单元格 ---------- */
    .simple-table input {
        width: 100%;
        box-sizing: border-box;
        font-family: inherit;
        font-size: 0.85rem;
        padding: 8px 10px;
        border: 1px solid #cfdde6;
        border-radius: 4px;          /* 轻微圆角，不过于锐利，但算不上花哨，符合基础UI */
        background-color: #ffffff;
        transition: border 0.1s ease, background 0.1s;
        line-height: 1.4;
        margin: 0;
        color: #0e2a38;
    }

    /* 数字输入框统一对齐（保留原生控件，但视觉一致） */
    .simple-table input[type="number"] {
        -moz-appearance: textfield;
    }
    .simple-table input[type="number"]::-webkit-inner-spin-button,
    .simple-table input[type="number"]::-webkit-outer-spin-button {
        opacity: 0.5;
    }

    /* 聚焦效果：维持简洁，只改变边框颜色，无外发光 */
    .simple-table input:focus {
        outline: none;
        border-color: #7b8c9e;
        background-color: #ffffff;
    }

    /* placeholder 字体颜色柔和 */
    .simple-table input::placeholder {
        color: #b0bec5;
        font-weight: normal;
        font-size: 0.8rem;
    }

    /* 为了单元格内文本与input对齐协调，文本列自然 */
    .simple-table td span.text-muted {
        font-weight: normal;
        color: #2c4b5e;
    }

    /* 注脚小提示（可选，不干扰表格主体） */
    .table-note {
        max-width: 1280px;
        margin: 1rem auto 0 auto;
        padding: 0.6rem 0.8rem;
        font-size: 0.75rem;
        color: #6c7e8f;
        background-color: transparent;
        border-top: none;
        text-align: left;
        letter-spacing: 0.2px;
    }
</style>
<body>
<div class="warp">
<div class="title winnone">添加</div>

<form id="formdata">
<ul class="setting">

<li>
<em>申请店铺：</em>
<select name="shop_id" class="service select class" onChange="gradeChange()">
<option value="0"  platid="0">无</option>
{loop usershop() as $val}
<option value="{$val['id']}" platid="{$val['type']}">{$val['shopname']}</option>
{/loop}
</select>
</li>
<li>
<em>申请平台：</em>
<select name="plat_id" class="service select class"  style="pointer-events: none;">
<option value="0" >无</option>
{loop $plat_list as $val}
<option value="{$val['id']}" >{$val['title']}</option>
{/loop}
</select>
</li>
<li >
    <em>申请人：</em>
    <input value="" name="sqr" type="text" >
</li>
<li >
    <em>预期完成时间：</em>
    <input id="yqwc_time"  value="" name="yqwc_time" type="text" onClick="laydate({istime: true,format:'YYYY-MM-DD hh:mm'})"  autocomplete="off">
</li>
<li class="length">
    <em>备注：</em>
    <textarea name="remark" style="height:50px;"></textarea>
</li>
<li class="length" style="padding: 10px;">
    <a href="javascript:void(0)" style=" padding: 8px 16px ;color:#fff;background-color:#0099cc;font-size:16px;border-radius:5px;cursor:pointer;" onclick="addGoods()">+添加</a>
    <a href="javascript:void(0)" style=" padding: 8px 16px ;color:#fff;background-color:#A52A2A;font-size:16px;border-radius:5px;cursor:pointer;" onclick="selectGood()">+料品列表选择</a>
</li>



<div style="clear:both;"></div>

<div class="table-wrapper">
    <table class="simple-table">
        <!-- 简约表头：含必要列，其中包含两个输入域列 -->
        <thead>
            <tr>
                <th>品名(必填)</th>
                <th>sku</th>
                <th style="width:80px;">数量(必填)</th>
                <th style="width:40px;">操作</th>
            </tr>
        </thead>
        <tbody id="goodsList">
            <tr>
                <td> <input type="text" placeholder="请输入中文品名" value="" name="title[]"> </td>
                <td> <input type="text" placeholder="请输入库存对应的sku" value="" name="sku[]"> </td>
                <td> <input type="number" value="1" step="1" min="0" placeholder="调整数量" name="sq_num[]"> </td>
                <td>
                    <button onclick="delGoods(this)">删除</button>
                </td>
            </tr>
           
        </tbody>
    </table>
</div>

</ul>
</form>

<div class="button"><font class="expressdata">提 交</font> <font class="fh">关 闭</font></div>
</div>
<script>
 
    var addedit="/beihuogl/dyapplyadd/";
    function gradeChange(that){
        let platid = $("select[name='shop_id']").find('option:selected').attr('platid');
        $("select[name='plat_id']").val(platid);
    }

    function addGoods(){
        let tplStr = document.getElementById('edit_content').innerHTML;
   
        // 4. 传递数据进行渲染，并将结果插入 DOM
        //let outputHtml = compiledTemplate.fetch({ data: data });
        let data = [];
        let outputHtml =  ejs.render(tplStr, {data: data});
        $("#goodsList").append(outputHtml)
    }
    function delGoods(that){
        let len = $('#goodsList tr').length;
        if(len <= 1){
            layx.msg("至少保留一条录入数据!", {
                dialogIcon: 'warn',
                position: 'cc'
            });
           return  ;
        }
        $(that).closest('tr').remove();
    }
    $(".expressdata").on('click',function(){
        let sqr = $("input[name='sqr']").val();
        if(sqr.length == 0){
            $(".ts p").text("申报人不能为空");
            $(".ts").show();
            setTimeout('$(".ts").fadeOut()', 1600);
            return false;
        }
        
        $("input[name='title[]']").each(function(index){
            let k = index+1;
            if($(this).val().length == 0){
                $(".ts p").text("第"+k+"行品名不能为空");
                $(".ts").show();
                setTimeout('$(".ts").fadeOut()', 1600);
                return false;
            }
        })

        $("input[name='sq_num[]']").each(function(index){
            let k = index+1;
            if($(this).val().length == 0){
                $(".ts p").text("第"+k+"行数量不能为空");
                $(".ts").show();
                setTimeout('$(".ts").fadeOut()', 1600);
                return false;
            }
        })
      
        var data = $("#formdata").serializeArray();
        $.post(addedit, data, function(res){
            if(res.code == 1){
                $(".ts").hide();
                $(".express p:eq(0)").html(res.msg+"是否关闭？");
				$(".express p:eq(1)").html("<font class='fh'>确 定</font><font class='esc'>取 消</font>");
                $(".express").show();
            }else{
                $(".ts").hide();
                $(".ts p").html(res.msg);
                $(".ts").fadeIn();
                setTimeout('$(".ts").fadeOut()', 800);
            }
        },'json')
    })
    function selectGood(){
        layx.iframe('childWindowDemo', '选择申报单', "/goodimglibrary/selectgood", {
            width: '100%',          // 关键：宽度设为父窗口的100%
            height: 600,    // 设置窗口大小
            shade: 0.3,                 // 设置遮罩
        });
        
    }
    window.addEventListener('message', function(event) {
        // 建议添加来源验证，提高安全性
        // if (event.origin !== "https://你的域名.com") return;
        if (event.data.type === 'SAVE_EVENT') {
            console.log('收到子页面保存消息', event.data.data);
            let tplStr = document.getElementById('edit_content_data').innerHTML;
   
            // 4. 传递数据进行渲染，并将结果插入 DOM
            //let outputHtml = compiledTemplate.fetch({ data: data });
            
            let outputHtml =  ejs.render(tplStr, {data: event.data.data});
            $("#goodsList").append(outputHtml)
        }
    });
</script>
<script type="text/javascript" src="{$theme}js/ejs.min.js"></script>
<script id="edit_content" type="text/html">
    <tr>
        <td> <input type="text" placeholder="请输入中文品名" value="" name="title[]"> </td>
        <td> <input type="text" placeholder="请输入库存对应的sku" value="" name="sku[]"> </td>
        <td> <input type="number" value="1" step="1" min="0" placeholder="调整数量" name="sq_num[]"> </td>
        <td>
            <button onclick="delGoods(this)">删除</button>
        </td>
    </tr>
</script>
<script id="edit_content_data" type="text/html">
    <% for(let key in data) { %>
    <tr>
        <td> <input type="text" placeholder="请输入中文品名" value="<%= data[key]['zh'] %>" name="title[]"> </td>
        <td> <input type="text" placeholder="请输入库存对应的sku" value="<%= data[key]['sku'] %>" name="sku[]"> </td>
        <td> <input type="number" value="1" step="1" min="0" placeholder="调整数量" name="sq_num[]"> </td>
        <td>
            <button onclick="delGoods(this)">删除</button>
        </td>
    </tr>
    <% } %>
</script>
<script type="text/javascript" src="{$theme}js/laydate.js"></script>
{Template footer}