<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="{$smarty.const.CSS_URL}/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="{$smarty.const.CSS_URL}/js/jquery.form.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>首页</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
{literal}
<style>
#prescription-form{
width: 500px;
margin-left: 100px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 10px;
}
.form-group input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
.form-group textarea {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
.ingredient-list {
margin-top: 20px;
}
.add-button{
width: 20px;
height: 20px;
background-color: #DD4B38;
border: none;
border-radius: 50px;
color: #fff;
float: right;
}
.submit-btn{
margin-top: 50px;
width: 150px;
height: 45px;
background-color: #DD4B38;
border: none;
border-radius:5px;
color: #fff;
}
.herb_item{
width: 500px;
position: relative;
display: flex;
line-height: 50px;
margin-top: 15px;
}
.herb_item button{
position: absolute;
left:420px;
top:15px;
width: 20px;
height: 20px;
background-color: #C28A2F;
border: none;
border-radius: 30px;
color: #fff;
}
.herb_input{
width: 450px;
}
.herb_input input{
height: 50px;
margin-right: 30px;
text-indent: 10px;
}
</style>
<script>
// 动态添加药材输入字段
function addIngredient() {
const ingredientList = document.getElementById('ingredient-list');
const ingredientDiv = document.createElement('div');
ingredientDiv.classList.add('herb_item');
ingredientDiv.innerHTML = `
<div class="herb_input">
<input type="text" name="herb_name[]" placeholder="药材名" required />
<input type="number" name="herb_num[]" placeholder="药材重量 (克)" required min="0" step="0.1" />
</div>
<button class="" type="button" onclick="removeIngredient(this)">X</button>
`;
ingredientList.appendChild(ingredientDiv);
}
// 移除药材输入字段
function removeIngredient(button) {
button.parentElement.remove();
}
function submitForm(e) {
e.preventDefault(); // 阻止默认表单提交
const form = document.getElementById('prescription-form');
const formData = new FormData(form);
const data = {
id: formData.get('id'),
name: formData.get('name'),
source: formData.get('source'),
original: formData.get('original'),
method: formData.get('method'),
herbs: []
};
// 收集所有药材名称和重量
const herb_name = formData.getAll('herb_name[]');
const herb_num = formData.getAll('herb_num[]');
herb_name.forEach((name, index) => {
data.herbs.push({
name: name,
num: herb_num[index]
});
});
if(data.id.length>0){
$.ajax({
url: 'ajax_update_case', // 替换为你的服务器端处理文件
type: 'POST',
data: data,
dataType: 'json',
success: function(response) {
alert(response.info);
if (response.status==true) {
window.location.reload();
}
},
error: function(xhr, status, error) {
console.error('错误:', error);
alert('提交失败，请重试。');
}
});
}else{
$.ajax({
url: 'ajax_save_case', // 替换为你的服务器端处理文件
type: 'POST',
data: data,
dataType: 'json',
success: function(response) {
alert(response.info);
if (response.status==true) {
window.location.reload();
}
},
error: function(xhr, status, error) {
console.error('错误:', error);
alert('提交失败，请重试。');
}
});
}
}
</script>
{/literal}
</head>
<body>
<h2 style="margin-left: 100px">添加药方</h2>
<form id="prescription-form" onsubmit="submitForm(event)">
<input id="id" name="id" type="hidden" value="{$data.case.id}">
<div class="form-group">
<label for="name">药方名称:</label>
<input type="text" id="name" name="name" value="{$data.case.name}" required>
</div>
<div class="form-group">
<label for="source">药方来源:</label>
<textarea id="source" name="source" rows="4" required>{$data.case.source}</textarea>
</div>
<div class="form-group">
<label for="original">原方:</label>
<textarea id="original" name="original" rows="4" required>{$data.case.original}</textarea>
</div>
<div class="form-group">
<label for="method">用法:</label>
<textarea id="method" name="method" rows="4" required>{$data.case.method}</textarea>
</div>
<h3>药材 <button class="add-button" type="button" onclick="addIngredient()">+</button></h3>
<div id="ingredient-list" class="ingredient-list">
<!-- 动态添加药材输入字段 -->
{foreach from=$data.case_herb key=key item=item}
<div class="herb_item">
<div class="herb_input">
<input type="text" name="herb_name[]" value="{if $data.herb[$item.herb_id]}{$data.herb[$item.herb_id].name}{/if}" placeholder="药材名" required />
<input type="number" name="herb_num[]" value="{$item.num}" placeholder="药材重量 (克)" required min="0" step="0.1" />
</div>
<button class="" type="button" onclick="removeIngredient(this)">X</button>
</div>
{/foreach}
</div>
<div class="form-group" style="text-align: center">
<button class="submit-btn" type="submit">提交药方</button>
</div>
</form>
</body>
</html>