|
|
@@ -0,0 +1,308 @@
|
|
|
+{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>
|
|
|
+<ul class="setting">
|
|
|
+<li >
|
|
|
+ <em>备货单号:</em>
|
|
|
+ <input value="{$info['bh_no']}" name="sku" type="text" disabled="disabled" />
|
|
|
+</li>
|
|
|
+<li class="remark">
|
|
|
+ <em>状态:</em>
|
|
|
+ <input value="{$info['status_show']}" type="text" disabled="disabled" />
|
|
|
+</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>
|
|
|
+</li>
|
|
|
+
|
|
|
+<div style="clear:both;"></div>
|
|
|
+
|
|
|
+<div class="table-wrapper">
|
|
|
+ <table class="simple-table">
|
|
|
+ <!-- 简约表头:含必要列,其中包含两个输入域列 -->
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th width="40%">中文品名</th>
|
|
|
+ <th>sku|u9料号</th>
|
|
|
+ <th style="width:80px;">数量</th>
|
|
|
+ <th>申报信息</th>
|
|
|
+ <th style="width:40px;">操作</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="goodsList">
|
|
|
+ {loop $list as $good}
|
|
|
+ <tr>
|
|
|
+ <input type="hidden" name="arr_id[]" value="{$good['id']}" />
|
|
|
+ <td>{$good['title']} </td>
|
|
|
+ <td>
|
|
|
+ {$good['sku']}
|
|
|
+ <hr style="border: none; border-top: 2px dashed #999; margin: 20px 0;">
|
|
|
+ {$good['jm']}
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span id="ccwl_num_id_{$good['id']}">{$good['ccwl_num']}</span> <i class='fa fa-edit' data-id="{$good['id']}" data-num="{$good['ccwl_num']}" onclick='edit_ccwl(this)'></i>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ 平台:{$good['plat_id']}<br/>
|
|
|
+ 店铺:{$good['shop_id']}<br/>
|
|
|
+ 申报人:{$good['sqr']}<br/>
|
|
|
+ 申报时间:{$good['public_time']}
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <button onclick="delGoods(this)" data-id="{$good['id']}" data-bh_no="{$good['bh_no']}">删除</button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ {/loop}
|
|
|
+ <!-- <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>
|
|
|
+<input type="hidden" name="id" value="{$info['id']}" />
|
|
|
+<div class="button"><font class="datasave">提 交</font> <font class="fh">关 闭</font></div>
|
|
|
+</div>
|
|
|
+<div class="boundtj">
|
|
|
+<div>
|
|
|
+<p style="padding:10px 0px"></p>
|
|
|
+<p style="padding:10px 0px"><font class="button">确 定</font><font class="esc">取 消</font></p>
|
|
|
+</div>
|
|
|
+</div>
|
|
|
+<script>
|
|
|
+var addedit="/beihuogl/ccwlbhedit/";
|
|
|
+function delGoods(that){
|
|
|
+ let bh_no = $(that).data('bh_no');
|
|
|
+ let do_id = $(that).data('id');
|
|
|
+ let obj = {
|
|
|
+ id:do_id,
|
|
|
+ bh_no:bh_no,
|
|
|
+ };
|
|
|
+ layx.confirm('提示', '确定删除吗?', function(id, button, event){
|
|
|
+ $.post("/beihuogl/ccwldelitem/", obj, function(a){
|
|
|
+ if(a.success){
|
|
|
+ $(that).closest("tr").remove();
|
|
|
+ }else{
|
|
|
+ layx.confirm('提示',a.msg,null,{
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, "json");
|
|
|
+ });
|
|
|
+}
|
|
|
+function edit_ccwl(that){
|
|
|
+ let id = $(that).data('id')
|
|
|
+ let num = $(that).data('num')
|
|
|
+ $(".boundtj div p:eq(0)").html('<label>数 量:<input value="'+num+'" name="val" type="text"></label> <input type="hidden" name="id" value="'+id+'" /><input type="hidden" name="column" value="ccwl_num" />');
|
|
|
+ $(".boundtj div p:eq(1)").html("<font class='obaddgo' onclick='doAddYcrk()'>确 定</font><font class='esc' onclick='escDo()'>取 消</font>");
|
|
|
+ $(".boundtj").show();
|
|
|
+}
|
|
|
+function doAddYcrk(){
|
|
|
+ let obj = {}
|
|
|
+ obj.id = $(".boundtj input[name='id']").val();
|
|
|
+ obj.val = $(".boundtj input[name='val']").val();
|
|
|
+ obj.column = $(".boundtj input[name='column']").val();
|
|
|
+ escDo();
|
|
|
+ $.post("/beihuogl/dyapplysave", obj, function(a){
|
|
|
+ if(a.success){
|
|
|
+ layx.confirm('提示',a.msg,null,{
|
|
|
+ buttons:[
|
|
|
+ {
|
|
|
+ label:'确定',
|
|
|
+ callback:function(id, button, event){
|
|
|
+ layx.destroy(id);
|
|
|
+ $("#ccwl_num_id_"+obj.id).closest("tr").find("span").html(obj.val);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],dialogIcon:'success',shadable:0.6
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ layx.confirm('提示',a.msg,null,{
|
|
|
+ buttons:[
|
|
|
+ {
|
|
|
+ label:'确定',
|
|
|
+ callback:function(id, button, event){
|
|
|
+ layx.destroy(id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],dialogIcon:'error',shadable:0.6
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }, "json")
|
|
|
+}
|
|
|
+function escDo(){
|
|
|
+ $(".boundtj p").html("");
|
|
|
+ $(".boundtj").hide();
|
|
|
+}
|
|
|
+function addGoods(){
|
|
|
+ layx.iframe('childWindowDemo', '选择申报单', "/beihuogl/ccwleditxzbh?id={$info['id']}&bh_no={$info['bh_no']}", {
|
|
|
+ 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);
|
|
|
+ tjxzGood(event.data.data)
|
|
|
+ }
|
|
|
+});
|
|
|
+function tjxzGood(data){
|
|
|
+ let tplStr = document.getElementById('edit_content').innerHTML;
|
|
|
+ let outputHtml = ejs.render(tplStr, {data: data});
|
|
|
+ $("#goodsList").append(outputHtml);
|
|
|
+}
|
|
|
+</script>
|
|
|
+<script type="text/javascript" src="{$theme}js/ejs.min.js"></script>
|
|
|
+<script id="edit_content" type="text/html">
|
|
|
+ <% for(let key in data) { %>
|
|
|
+ <tr>
|
|
|
+ <input type="hidden" name="arr_id[]" value="<%= data[key]['id'] %>" />
|
|
|
+ <td><%= data[key]['title'] %> </td>
|
|
|
+ <td>
|
|
|
+ <%= data[key]['sku'] %>
|
|
|
+ <hr style="border: none; border-top: 2px dashed #999; margin: 20px 0;">
|
|
|
+ <%= data[key]['jm'] %>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span id="ccwl_num_id_<%= data[key]['id'] %>"><%= data[key]['ccwl_num'] %></span> <i class='fa fa-edit' data-id="<%= data[key]['id'] %>" data-num="<%= data[key]['ccwl_num'] %>" onclick='edit_ccwl(this)'></i>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ 平台:<%= data[key]['plat_id'] %><br/>
|
|
|
+ 店铺:<%= data[key]['shop_id'] %><br/>
|
|
|
+ 申报人:<%= data[key]['sqr'] %><br/>
|
|
|
+ 申报时间:<%= data[key]['public_time'] %>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <button onclick="delGoods(this)" data-id="<%= data[key]['id'] %>" data-bh_no="<%= data[key]['bh_no'] %>">删除</button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <% } %>
|
|
|
+</script>
|
|
|
+
|
|
|
+{Template footer}
|