Browse Source

Merge pull request '提示框优化' (#12) from wpd_alert into master

Reviewed-on: #12
pull/13/head
pengda 7 months ago
parent
commit
d0ffc12629
  1. 59
      view/templates/admin/formula_add.html
  2. 108
      view/templates/admin/formula_list.html

59
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}

108
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 width="50">录方者uid</th>
<th width="200">药方名称</th>
<th width="200">药方来源</th>
<th width="200">药方详情</th>
<th width="200">状态</th>
<th width="50">操作</th>
<th style="width: 2%">ID</th>
<th style="width: 15%;">药方名称</th>
<th style="width: 10%">药方来源</th>
<th style="width: 50%;">药方详情</th>
<th style="width: 8%">状态</th>
<th style="width: 8%">操作</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>
<div style="display: flex;flex-wrap: wrap;border-bottom: 1px dashed #ccc;padding-bottom: 15px">
{foreach from=$item.formula item=value}
<span style="margin-right: 20px">{$value.name}{if $value.desc}({$value.desc}){/if} {$value.num_str}</span>
<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.uid==0}
{if $item.is_delete == 0} 审核通过 {/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("确定要操作吗?")) {
return false;
}
$("#check_div").hide();
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>

Loading…
Cancel
Save