<template>
<div class="delivery-time-setting">
<a-form
name="custom-validation"
ref="formRef"
:model="modelRef"
:rules="rules"
v-bind="layout"
@finish="handleFinish"
@finishFailed="handleFinishFailed"
>
<div class="isopen">
<a-form-item :label="$t('system.timeSetting.enable')" name="status">
<a-radio-group
v-model:value="modelRef.status"
:defaultValue="true"
@change="onChange"
>
<a-radio :value="true"> {{ $t('common.open') }}</a-radio>
<a-radio :value="false"> {{ $t('common.close') }} </a-radio>
</a-radio-group>
</a-form-item>
<div class="gray-text">({{ $t('system.timeSetting.enableTips') }})</div>
</div>
<div class="delivetyTime">
<div
class="dlfx"
v-for="(item, index) in modelRef.deliveryTimeList"
:key="index"
>
<a-form-item
:name="item.index + '.startTime'"
:rules="[
{
validator: () => validateNutrients('startTime', index),
trigger: 'change',
},
]"
>
<span class="time">{{
$t('system.timeSetting.deliverytime')
}}</span>
<a-time-picker
v-model:value="item.startTime"
format="HH:mm"
:default-open-value="moment('00:00', 'HH:mm')"
:minuteStep="30"
:allowClear="false"
:inputReadOnly="true"
@change="timechangeOne(item)"
@focus="handleFocus(index)"
@openChange="timeCheck"
valueFormat="HH:mm"
:placeholder="$t('system.timeSetting.starttime')"
popupClassName="scrll_right"
/>
<span>{{ $t('system.timeSetting.to') }}</span>
</a-form-item>
<a-form-item
:name="item.index + '.endTime'"
:rules="[
{
validator: () => validateNutrients('endTime', index),
trigger: 'change',
},
]"
>
<a-time-picker
v-model:value="item.endTime"
format="HH:mm"
:default-open-value="moment('', 'HH:mm')"
:minuteStep="30"
:allowClear="false"
:inputReadOnly="true"
@change="timechangeTwo(item)"
@focus="handleFocus(index)"
@openChange="CompareDate"
valueFormat="HH:mm"
:placeholder="$t('system.timeSetting.endtime')"
/>
</a-form-item>
<a-form-item :name="item.index + '.status'">
<div class="checkBox">
<a-checkbox
v-model:checked="item.status"
@change="onCheckBox($event, index)"
>
{{ $t('system.timeSetting.US') }}
</a-checkbox>
</div>
</a-form-item>
<a-form-item
:name="item.index + '.amount'"
:rules="[
{ validator: () => validateInput(index), trigger: 'change' },
]"
>
<a-input
v-model:value="item.amount"
:placeholder="$t('system.timeSetting.deliveryfee')"
style="width: 50%"
@change="onFieldChange(item, index)"
@input="onInput(item, index)"
:disabled="item.status == false ? true : false"
/>
{{ $t('system.timeSetting.apply') }}
<span class="delete" @click="delTime(index)">
{{ $t('common.delete') }}</span
>
</a-form-item>
</div>
<a-button type="primary" @click="addTime" class="addTime">
{{ $t('system.timeSetting.addtime') }}
</a-button>
<p class="gray-text">
({{ $t('system.timeSetting.deliverytimeTips') }})
</p>
</div>
<div class="makeTime">
<a-form-item
:label="$t('system.timeSetting.reservationtime')"
required
name="appointmentTime"
>
<span>{{ $t('system.timeSetting.Advance') }}</span>
<a-select
v-model:value="modelRef.appointmentTime"
default-value="30"
style="width: 80px"
@change="handleChange"
size="small"
>
<a-select-option value="30"> 30 </a-select-option>
<a-select-option value="60"> 60 </a-select-option>
<a-select-option value="90"> 90 </a-select-option>
<a-select-option value="120"> 120 </a-select-option>
</a-select>
{{ $t('system.timeSetting.minutes') }}
</a-form-item>
<div class="gray-text mar-bot">
({{ $t('system.timeSetting.minutesTips') }})
</div>
</div>
<div class="TimeDay">
<a-form-item
:label="$t('system.timeSetting.ShowDays')"
required
name="deliveryDays"
>
<a-select
v-model:value="modelRef.deliveryDays"
default-value="2"
style="width: 80px"
@change="handleChange"
size="small"
>
<a-select-option value="2"> 2 </a-select-option>
<a-select-option value="3"> 3 </a-select-option>
<a-select-option value="4"> 4 </a-select-option>
<a-select-option value="5"> 5 </a-select-option>
<a-select-option value="6"> 6 </a-select-option>
<a-select-option value="7"> 7 </a-select-option>
</a-select>
{{ $t('system.timeSetting.days') }}
</a-form-item>
<div class="gray-text mar-bot">
({{ $t('system.timeSetting.daysTips') }})
</div>
</div>
<a-button
type="primary"
@click="handlesubmit"
html-type="submit"
class="btn"
:loading="loading"
>
{{ $t('system.timeSetting.save') }}
</a-button>
</a-form>
</div>
</template>
<script>
import { reactive, ref, watch, toRaw, onMounted } from 'vue'
import { message,Modal } from 'ant-design-vue'
import { postDeliveryTime, queryDeliveryTimeSettingsList } from '@/apis'
import moment from 'moment'
import { useI18n } from 'vue-i18n'
import '../Delivery-times/DeliveryTime-setting.scss'
export default {
setup() {
const { t } = useI18n()
const loading = ref(false)
const formRef = ref()
const modelRef = ref({
appointmentTime: '30',
deliveryDays: '2',
status: true,
id: '',
deliveryTimeList: [
{ startTime: '', endTime: '', amount: '', status: false },
],
})
const timeIndex = reactive({
setIndex: 0,
})
const firstTime = ref('')
const endTime = ref('')
onMounted(() => {
queryData()
})
async function queryData() {
const ress = await queryDeliveryTimeSettingsList({})
if (ress.deliveryTimeList == null) {
modelRef.value
} else {
modelRef.value = ress
modelRef.value.deliveryDays = String(ress.deliveryDays)
}
}
const validateNutrients = (key, index) => {
if (!modelRef.value.deliveryTimeList[index][key]) {
return Promise.reject(t('system.timeSetting.Pleasetime'))
} else {
return Promise.resolve()
}
}
const validateInput = index => {
if (
modelRef.value.deliveryTimeList[index].status &&
!modelRef.value.deliveryTimeList[index].amount
) {
return Promise.reject(t('system.timeSetting.deliveryfreight'))
} else {
return Promise.resolve()
}
}
const onInput = (item, index) => {
if (item.amount > 1000) {
modelRef.value.deliveryTimeList[index].amount = 999.99
}
modelRef.value.deliveryTimeList[index].amount = item.amount.toString().replace(
/^\D*(\d*(?:\.\d{0,2})?).*$/g,
'$1',
)
}
const onFieldChange = (item, index) => {
modelRef.value.deliveryTimeList[index].amount = item.amount
}
const onChange = val => {
modelRef.value.status = val.target.value
}
const handleFocus = val => {
timeIndex.setIndex = val
}
const timechangeOne = item => {
firstTime.value = item.startTime
modelRef.value.deliveryTimeList[timeIndex.setIndex].startTime = item.startTime
}
const timechangeTwo = item => {
endTime.value = item.endTime
modelRef.value.deliveryTimeList[timeIndex.setIndex].endTime = item.endTime
}
const timeCheck = (val) =>{
if(val == false){
let a = firstTime.value.replace(/:/g, '')
let b = endTime.value.replace(/:/g, '')
if(b == ''){
return false
}
if(a>b){
message.warning(t('system.timeSetting.startEndtime'))
}
}
}
const CompareDate = (val) => {
if(val == false){
let a = firstTime.value.replace(/:/g, '')
let b = endTime.value.replace(/:/g, '')
if (b<=a) {
message.warning(t('system.timeSetting.startEndtime'))
}
}
}
const onCheckBox = (e, index) => {
if (e.target.checked) {
modelRef.value.deliveryTimeList[index].status = true
} else {
modelRef.value.deliveryTimeList[index].status = false
}
}
const delTime = index => {
if (index == 0) {
message.error(t('system.timeSetting.delTime'))
return
}else{
Modal.confirm({
title: () => t('common.delete'),
content:() => t('common.confirmDelete'),
okText: () => t('common.determine'),
okType: 'danger',
cancelText: () => t('common.cancel'),
onOk() {
modelRef.value.deliveryTimeList.splice(index, 1)
},
onCancel() {
console.log('Cancel');
},
});
}
}
function handlesubmit() {
let isCanSubmit = true
modelRef.value.deliveryTimeList.map((item, index) => {
if (item.status == true && item.amount == '') {
validateInput(index)
}
if (item.status == true && !item.amount) {
isCanSubmit = false
}
if (item.startTime == '' || item.endTime == '') {
isCanSubmit = false
}
})
if (isCanSubmit) {
SubmitForm()
}
}
async function SubmitForm() {
loading.value = true
const Days = Number(modelRef.value.deliveryDays)
try {
const result = await postDeliveryTime({
status: modelRef.value.status,
appointmentTime: modelRef.value.appointmentTime,
deliveryDays: Days,
id: modelRef.value.id,
deliveryTimeList: modelRef.value.deliveryTimeList,
})
if (result) {
message.success('success')
}
} catch (err) {
} finally {
loading.value = false
}
}
const addTime = () => {
modelRef.value.deliveryTimeList.push({
startTime: '',
endTime: '',
amount: '',
status: false,
})
}
return {
formRef,
modelRef,
firstTime,
endTime,
onChange,
timechangeOne,
timechangeTwo,
onCheckBox,
addTime,
validateNutrients,
handlesubmit,
handleFocus,
timeIndex,
validateInput,
CompareDate,
timeCheck,
onFieldChange,
delTime,
queryData,
SubmitForm,
loading,
onInput,
moment
}
},
}
</script>