You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
295 lines
15 KiB
295 lines
15 KiB
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>简易点菜系统</title>
|
|
<link href="/css/index.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/bootstrap.min.css"
|
|
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
<style>
|
|
.order-frame {
|
|
width: 700px
|
|
}
|
|
|
|
.action {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<script th:inline="javascript">
|
|
onload = function () {
|
|
let detailList=[[${querydetail}]]
|
|
if(detailList){
|
|
console.info(detailList)
|
|
for(let index in detailList) {
|
|
let fff
|
|
if(index==="0") {
|
|
fff = document.querySelector('div[class="input-group mt-3 order-frame fff"]')
|
|
fff.innerHTML += getSelect()
|
|
}else{
|
|
plus()
|
|
fff = document.querySelector('div[class="input-group mt-3 order-frame fff"]:last-child')
|
|
}
|
|
let fenlei = fff.querySelector('select[name$=fenlei]')
|
|
fenlei.value = detailList[index].menu.fenlei
|
|
let pinmu = fenlei.parentElement.querySelector('select[name$=pinmu]')
|
|
let cailiao = fenlei.parentElement.querySelector('select[name$=cailiao]')
|
|
let zuofa = fenlei.parentElement.querySelector('input[name$=sum]')
|
|
changeFenLei(fenlei, pinmu, cailiao, detailList[index])
|
|
zuofa.value = detailList[index].sum
|
|
changePinmu(fenlei, pinmu, cailiao, detailList[index])
|
|
jine.value = [[${query.jine}]]
|
|
if(detailList.length===1) {
|
|
list.innerHTML += `<div class="input-group mt-3 order-frame" id="add">
|
|
<div class="col-3 text-right mt-auto mb-auto">
|
|
<img src="/icon/plus.svg" class="icon action" onclick="plus()"/>
|
|
</div>
|
|
</div>`
|
|
}
|
|
}
|
|
}else {
|
|
let item = document.getElementsByClassName('fff')
|
|
for (let i in item) {
|
|
item[i].innerHTML += getSelect()
|
|
}
|
|
}
|
|
}
|
|
|
|
function getSelect() {
|
|
let fenlei = [[${fenlei}]]
|
|
let fenleistr = ''
|
|
let disabled=[[${span_name}]]==='详细画面'||[[${span_name}]]==='支付画面'
|
|
for (let item in fenlei) {
|
|
fenleistr += `<option value="${fenlei[item]}">${fenlei[item]}</option>`
|
|
}
|
|
let count=document.querySelectorAll('select[name$=cailiao]').length
|
|
return `<select class="custom-select" ${disabled?'disabled':''} name="diancans[${count}].fenlei" onchange="changeFenLei(this,this.parentElement.querySelector('select[name$=pinmu]'),this.parentElement.querySelector('select[name$=cailiao]'))">
|
|
<option value="">请选择分类</option>
|
|
${fenleistr}
|
|
</select>
|
|
|
|
<select class="custom-select" ${disabled?'disabled':''} name="diancans[${count}].pinmu" onchange="changePinmu(this.parentElement.querySelector('select[name$=fenlei]'),this,this.parentElement.querySelector('select[name$=cailiao]'))">
|
|
<option value="">请选择品目</option>
|
|
</select>
|
|
|
|
<select class="custom-select" ${disabled?'disabled':''} name="diancans[${count}].cailiao" required oninvalid="setCustomValidity('请选择材料')" onchange="changeCailiao(document.querySelectorAll('select[name$=cailiao]'))">
|
|
<option value="">请选择材料</option>
|
|
</select>
|
|
|
|
<input type="text" ${disabled?'readonly':''} class="form-control" name="diancans[${count}].sum" placeholder="做法或数量" onchange="changeCailiao(document.querySelectorAll('select[name$=cailiao]'))" oninput="changeCailiao(document.querySelectorAll('select[name$=cailiao]'))">`
|
|
}
|
|
|
|
function plus() {
|
|
let div = document.createElement('div')
|
|
div.classList.add('input-group', 'mt-3', 'order-frame','fff')
|
|
div.innerHTML = `<div class="col-3 text-right mt-auto mb-auto">
|
|
<img src="/icon/plus.svg" class="icon action" onclick="plus()"/>
|
|
<img src="/icon/minus.svg" class="icon action" onclick="minus(this)"/>
|
|
</div>
|
|
${getSelect()}
|
|
`
|
|
list.appendChild(div)
|
|
if (list.childElementCount > 1) {
|
|
add.classList.add('d-none')
|
|
}
|
|
}
|
|
|
|
function minus(s) {
|
|
list.removeChild(s.parentElement.parentElement)
|
|
if (list.childElementCount === 1) {
|
|
add.classList.remove('d-none')
|
|
}
|
|
|
|
changeCailiao(document.querySelectorAll('select[name$=cailiao]'))
|
|
}
|
|
|
|
function changeFenLei(fenlei, pinmu, cailiao,item) {
|
|
pinmu.innerHTML = '<option value="">请选择品目</option>'
|
|
cailiao.innerHTML = '<option value="">请选择材料</option>'
|
|
fetch(new Request('/api/getPinMu?fenlei=' + fenlei.value)).then(res => res.json()).then(res => {
|
|
for (let index in res) {
|
|
if(item&&res[index]===item.menu.pinmu) {
|
|
pinmu.innerHTML += `<option selected value="${res[index]}">${res[index]}</option>`
|
|
} else {
|
|
pinmu.innerHTML += `<option value="${res[index]}">${res[index]}</option>`
|
|
}
|
|
}
|
|
})
|
|
let sum=fenlei.parentElement.querySelector('input[name$=sum]')
|
|
if (fenlei.value === '正菜') {
|
|
sum.setAttribute('type', 'text')
|
|
} else {
|
|
sum.setAttribute('type', 'number')
|
|
sum.value=1
|
|
}
|
|
|
|
changeCailiao(document.querySelectorAll('select[name$=cailiao]'))
|
|
}
|
|
|
|
function changePinmu(fenlei, pinmu, cailiao,item) {
|
|
cailiao.innerHTML = '<option value="">请选择材料</option>'
|
|
let pinmuval=item?item.menu.pinmu:pinmu.value
|
|
fetch(new Request(`/api/getMenu?fenlei=${fenlei.value}&pinmu=${pinmuval}`)).then(res => res.json()).then(res => {
|
|
for (let index in res) {
|
|
if(item&&res[index].id===item.menu.id) {
|
|
cailiao.innerHTML += `<option selected value="${res[index].id}" jine="${res[index].jiage}">${res[index].cailiao}</option>`
|
|
}else{
|
|
cailiao.innerHTML += `<option value="${res[index].id}" jine="${res[index].jiage}">${res[index].cailiao}</option>`
|
|
}
|
|
}
|
|
})
|
|
|
|
changeCailiao(document.querySelectorAll('select[name$=cailiao]'))
|
|
}
|
|
|
|
function changeCailiao(cailiao) {
|
|
let sum = 0
|
|
for (let index in cailiao) {
|
|
if (cailiao[index].value !== '' && cailiao[index].selectedIndex) {
|
|
if(cailiao[index].selectedIndex!==0){
|
|
cailiao[index].setCustomValidity('')
|
|
}
|
|
let option = cailiao[index].childNodes[cailiao[index].selectedIndex]
|
|
let value=cailiao[index].parentElement.querySelector('input[name$=sum]').value
|
|
sum += parseInt(option.getAttribute('jine'))*(/^\d+$/.test(value)?value:1)
|
|
}
|
|
}
|
|
jine.value = sum
|
|
}
|
|
|
|
function birthdayValid(shijian) {
|
|
shijian.removeAttribute('required')
|
|
shijian.setCustomValidity('')
|
|
}
|
|
|
|
function changeBirthday(shijian) {
|
|
shijian.setAttribute('required','required')
|
|
}
|
|
|
|
function hasYuding(zhuohao) {
|
|
fetch(new Request(`/api/hasYuding?zhuohao=${zhuohao.value}`)).then(res=>res.json()).then(res=>{
|
|
if(res){
|
|
zhuohao.classList.add("is-invalid")
|
|
}else{
|
|
zhuohao.classList.remove("is-invalid")
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
function checkMobie() {
|
|
let mobie=document.querySelector('input[name=tel]')
|
|
if(mobie.value.length>0&&!/^\d{11}$/.test(mobie.value)){
|
|
mobie.setCustomValidity('手机号不合法')
|
|
}else {
|
|
mobie.setCustomValidity('')
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="frame">
|
|
<span th:text="${span_name}"></span>
|
|
<form method="post" th:action="${action_name}" action="/api/order" th:object="${query}">
|
|
<div class="input-group mt-3">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">桌号</span>
|
|
</div>
|
|
<input type="text" th:field="*{zhuohao}" th:readonly="*{zhuohao ne null}" class="form-control col-4" required oninvalid="setCustomValidity('桌号不能为空')" oninput="setCustomValidity('');hasYuding(this)">
|
|
<div class="invalid-feedback mt-3 mb-3 text-center font-weight-bold">桌号已预定</div>
|
|
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">客人姓名</span>
|
|
</div>
|
|
<input type="text" th:readonly="${span_name} eq '详细画面' or ${span_name} eq '支付画面'" th:field="*{xingming}" class="form-control col-4" oninvalid="setCustomValidity('姓名不能为空')" oninput="setCustomValidity('');" required maxlength="15">
|
|
</div>
|
|
|
|
<div class="input-group mt-3">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">用餐时间</span>
|
|
</div>
|
|
<div class="custom-control custom-radio custom-control-inline mt-auto mb-auto">
|
|
<input type="radio" th:disabled="${span_name} eq '详细画面' or ${span_name} eq '支付画面'" id="customRadioInline1" name="birthday"
|
|
class="custom-control-input" value="1" th:checked="*{birthday eq null}" onclick="birthdayValid(this.parentElement.parentElement.querySelector('input[name=shijian]'))">
|
|
<label class="custom-control-label" for="customRadioInline1">及时单</label>
|
|
</div>
|
|
<div class="custom-control custom-radio custom-control-inline mt-auto mb-auto">
|
|
<input type="radio" th:disabled="${span_name} eq '详细画面' or ${span_name} eq '支付画面'" id="customRadioInline2" value="2" th:checked="*{birthday ne null}" name="birthday" class="custom-control-input" onclick="changeBirthday(this.parentElement.parentElement.querySelector('input[name=shijian]'))">
|
|
<label class="custom-control-label" for="customRadioInline2">指定</label>
|
|
</div>
|
|
|
|
<input type="text" th:readonly="${span_name} eq '详细画面' or ${span_name} eq '支付画面'" th:value="${#dates.format(query.birthday, 'yyyyMMdd HHmm')}" name="shijian" oninput="setCustomValidity('')" oninvalid="setCustomValidity('时间不能为空')" class="form-control col-4">
|
|
</div>
|
|
|
|
<div class="input-group mt-3">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">用餐人数</span>
|
|
</div>
|
|
|
|
<input type="number" th:readonly="${span_name} eq '详细画面' or ${span_name} eq '支付画面'" th:field="*{renshu}" class="form-control col-4">
|
|
</div>
|
|
|
|
<div class="input-group mt-3">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">联系方式(手机)</span>
|
|
</div>
|
|
|
|
<input type="text" th:readonly="${span_name} eq '详细画面' or ${span_name} eq '支付画面'" th:field="*{tel}" oninput="checkMobie()" class="form-control col-4">
|
|
</div>
|
|
|
|
<div class="input-group mt-3 order-frame fff">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">点餐区</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="list">
|
|
<div th:if="${querydetail} eq null" class="input-group mt-3 order-frame d-none" id="add">
|
|
<div class="col-3 text-right mt-auto mb-auto">
|
|
<img src="/icon/plus.svg" class="icon action" onclick="plus()"/>
|
|
</div>
|
|
</div>
|
|
<div class="input-group mt-3 order-frame fff" th:if="${querydetail} eq null">
|
|
<div class="col-3 text-right mt-auto mb-auto">
|
|
<img src="/icon/plus.svg" class="icon action" onclick="plus()"/>
|
|
<img src="/icon/minus.svg" class="icon action" onclick="minus(this)"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group mt-3 justify-content-end">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">预结金额</span>
|
|
</div>
|
|
<input type="text" id="jine" name="jine" class="form-control col-2" readonly>
|
|
</div>
|
|
|
|
<div class="input-group mt-3" th:if="${span_name!='支付画面'}">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">备注</span>
|
|
</div>
|
|
<textarea class="form-control" th:readonly="${span_name} eq '详细画面' or ${span_name} eq '支付画面'" th:field="*{beizhu}" aria-label="With textarea"></textarea>
|
|
</div>
|
|
|
|
<div class="mt-3 text-right" th:if="${span_name=='修改画面'||span_name=='点餐画面'}">
|
|
<button class="btn btn-secondary col-3">提交</button>
|
|
</div>
|
|
<div class="mt-3 text-right" th:if="${span_name=='详细画面'}">
|
|
<a th:href="@{'/api/order/pay/'+${query.zhuohao}}" class="btn btn-secondary col-3">买单</a>
|
|
<a th:href="@{'/api/order/'+${query.zhuohao}}" class="btn btn-secondary col-3">修改</a>
|
|
<a href="/api/index" class="btn btn-secondary col-3">返回</a>
|
|
</div>
|
|
<div class="mt-3 text-right" th:if="${span_name=='支付画面'}">
|
|
<a th:href="@{'/api/order/'+${query.zhuohao}}" class="btn btn-secondary col-3">修改</a>
|
|
<a href="/api/index" class="btn btn-secondary col-3">完成</a>
|
|
</div>
|
|
|
|
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |