提示框优化

view/templates/admin/formula_add.html

@@ -22,9 +22,11 @@
 
                         <ul class="tabs">
                             <li class="active"><a href="javascript:;">添加药方</a></li>
+                            {if $data.id}
                             <div style="display:inline-block;float: right;">
                                 <button class="button link" onclick="to_delete({$data.id},1)">删除</button>
                             </div>
+                            {/if}
                         </ul>
                     </div>
                 </div>
@@ -130,14 +132,17 @@
             data: data,
             dataType: 'json',
             success: function (response) {
-                alert(response.info);
                 if (response.status == true) {
-                    window.location.href = "/admin/formula_list";
+                    showAlert('删除成功',"/admin/formula_list")
+                    return true;
                 }
 
                 if(response.data.code == 40002){
-                    window.location.href = "/admin/login";
+                    showAlert(response.info,"/admin/login")
+                    return true;
                 }
+
+                showAlert(response.info)
             },
             error: function (xhr, status, error) {
                 console.error('错误:', response);
@@ -169,12 +174,33 @@
         button.parentElement.parentElement.remove();
     }
 
+    function showAlert(text,href = ""){
+        // 创建提示框元素
+        var $alertBox = $('<div class="custom-alert">'+text+'</div>');
+
+        // 将提示框添加到页面中
+        $("#page").append($alertBox);
+
+        //2秒后自动隐藏并移除提示框
+        setTimeout(function() {
+            $alertBox.css("opacity", "0");
+            if(href){
+                window.location.href = href;
+            }
+            setTimeout(function() {
+                $alertBox.remove();
+            }, 500); // 给提示框一些时间淡出，然后再移除
+        }, 500);
+    }
+
     function submitForm(e) {
         e.preventDefault(); // 阻止默认表单提交
 
         const form = document.getElementById('prescription-form');
         const formData = new FormData(form);
 
+        const id = formData.get('id')
+
         const data = {
             id: formData.get('id'),
             name: formData.get('name'),
@@ -204,14 +230,21 @@
             data: data,
             dataType: 'json',
             success: function (response) {
-                alert(response.info);
                 if (response.status == true) {
-                    window.location.href = "/admin/formula_list"
+                    if(id){
+                        showAlert('保存成功',"/admin/formula_list")
+                    }else{
+                        showAlert('添加成功',"/admin/formula_list")
+                    }
+                    return true;
                 }
 
                 if(response.data.code == 40002){
-                    window.location.href = "/admin/login";
+                    showAlert(response.info,"/admin/login")
+                    return true;
                 }
+
+                showAlert(response.info)
             },
             error: function (xhr, status, error) {
                 console.error('错误:', response);
@@ -230,6 +263,20 @@
         border-radius: 50px;
         color: #fff;
     }
+    /* 提示框的样式 */
+    .custom-alert {
+        position: fixed;
+        top: 30%;
+        right: 50%;
+        background-color: #787878;
+        color: white;
+        padding: 15px;
+        border-radius: 5px;
+        z-index: 1000;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        opacity: 1;
+        transition: opacity 0.5s ease;
+    }
 </style>
 {/literal}
 

view/templates/admin/formula_list.html

@@ -79,37 +79,42 @@
                     <table class="table table-striped table-bordered table-condensed">
                         <thead>
                         <tr>
-                            <th width="50">ID</th>
+                            <th style="width: 2%">ID</th>
-                            <th width="50">录方者uid</th>
+                            <th style="width: 15%;">药方名称</th>
-                            <th width="200">药方名称</th>
+                            <th style="width: 10%">药方来源</th>
-                            <th width="200">药方来源</th>
+                            <th style="width: 50%;">药方详情</th>
-                            <th width="200">药方详情</th>
+                            <th style="width: 8%">状态</th>
-                            <th width="200">状态</th>
+                            <th style="width: 8%">操作</th>
-                            <th width="50">操作</th>
                         </tr>
                         </thead>
                         <tbody>
                         {foreach from=$list key=key item=item}
-                        <tr>
+                        <tr class="{if $item.uid>0}disabled-row{/if}">
                             <td>{$item.id}</td>
-                            <td>{if $item.uid eq 0}-{else}{$item.uid}{/if}</td>
                             <td>{$item.name}</td>
                             <td>{$item.source}</td>
-                            <td style="display: flex;flex-wrap: wrap">
+                            <td>
-                                {foreach from=$item.formula item=value}
+                                <div style="display: flex;flex-wrap: wrap;border-bottom: 1px dashed #ccc;padding-bottom: 15px">
-                                    <span style="margin-right: 20px">{$value.name}{if $value.desc}（{$value.desc}）{/if}  {$value.num_str}</span>
+                                    {foreach from=$item.formula item=value}
-                                {/foreach}
+                                    <span class="item" style="flex-basis: auto;white-space: nowrap;padding-left:20px">{$value.name}{if $value.desc}（{$value.desc}）{/if}  {$value.num_str}</span>
+                                    {/foreach}
+                                </div>
+                                <p style="padding:20px 20px 0">{$item.method}</p>
                             </td>
                             <td>
-                                {if $item.is_delete == 0} 审核通过 {/if}
+                                {if $item.uid==0}
-                                {if $item.is_delete == 2} 待审核 {/if}
+                                    {if $item.is_delete == 0} 审核通过 {/if}
-                                {if $item.is_delete == 3} 审核不通过 {/if}
+                                    {if $item.is_delete == 2} 待审核 {/if}
+                                    {if $item.is_delete == 3} 审核不通过 {/if}
+                                {/if}
                             </td>
                             <td>
                                 {if $item.uid == 0}
-                                <a href="javascript:;" onclick="to_check({$item.id})">审核</a>
+                                <a href="javascript:;" onclick="to_check({$item.id},{$item.is_delete})">审核</a>
+                                {if $item.is_delete != 0}
                                 <a href="/admin/formula_add/id/{$item.id}">编辑</a>
                                 {/if}
+                                {/if}
                             </td>
                         </tr>
                         {/foreach}
@@ -146,6 +151,25 @@
 
 {literal}
 <script type="text/javascript">
+    function showAlert(text,href = ""){
+        // 创建提示框元素
+        var $alertBox = $('<div class="custom-alert">'+text+'</div>');
+
+        // 将提示框添加到页面中
+        $("#page").append($alertBox);
+
+        //2秒后自动隐藏并移除提示框
+        setTimeout(function() {
+            $alertBox.css("opacity", "0");
+            if(href){
+                window.location.href = href;
+            }
+            setTimeout(function() {
+                $alertBox.remove();
+            }, 500); // 给提示框一些时间淡出，然后再移除
+        }, 500);
+    }
+
     function searchList() {
         var status = $('#status').val();
         var is_all = $('#is_all').val();
@@ -162,8 +186,13 @@
     function to_add(){
         location.href = '/admin/formula_add';
     }
-    function to_check(id){
+    function to_check(id,status){
         $('#check_id').val(id);
+        if(status == 3){
+            $('input[name="status"][value="3"]').prop("checked", true);
+        }else{
+            $('input[name="status"][value="0"]').prop("checked", true);
+        }
         $('#check_div').show()
     }
     $("#close_tip").click(function(){
@@ -171,9 +200,7 @@
     });
 
     function to_status() {
-        if (!confirm("确定要操作吗？")) {
+        $("#check_div").hide();
-            return false;
-        }
 
         let id = $('#check_id').val()
         let status = $('input[name="status"]:checked').val()
@@ -189,14 +216,18 @@
             data: data,
             dataType: 'json',
             success: function (response) {
-                alert(response.info);
                 if (response.status == true) {
-                    window.location.reload();
+                    showAlert('操作成功', window.location.href)
+                    // window.location.reload()
+                    return true;
                 }
 
                 if(response.data.code == 40002){
-                    window.location.href = "/admin/login";
+                    showAlert('操作成功','/admin/login')
+                    return true;
                 }
+
+                showAlert(response.info)
             },
             error: function (xhr, status, error) {
                 console.error('错误:', response);
@@ -204,7 +235,46 @@
             }
         });
     }
+
+    window.onload = function() {
+        const items = document.querySelectorAll('.item');
+        let maxWidth = 0;
+
+        // 获取每个子项的宽度，并计算最大宽度
+        items.forEach(item => {
+            const itemWidth = item.offsetWidth;
+            if (itemWidth > maxWidth) {
+                maxWidth = itemWidth;
+            }
+        });
+
+        // 设置所有子项的宽度为最大内容宽度
+        items.forEach(item => {
+            item.style.flexBasis = maxWidth + 'px';
+        });
+    };
 </script>
+<style>
+    /* 提示框的样式 */
+    .custom-alert {
+        position: fixed;
+        top: 30%;
+        right: 50%;
+        background-color: #787878;
+        color: white;
+        padding: 15px;
+        border-radius: 5px;
+        z-index: 2000000;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        opacity: 1;
+        transition: opacity 0.5s ease;
+    }
+    .disabled-row{
+        background-color: #f2f2f2; /* 变灰 */
+        color: #aaa; /* 文字颜色变淡 */
+        cursor: not-allowed; /* 禁用手型指针 */
+    }
+</style>
 {/literal}
 
 </body>