<!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 >