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.
250 lines
8.3 KiB
250 lines
8.3 KiB
<template>
|
|
<div>
|
|
<div class="element tw-mt-[16px]">
|
|
<div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[190px_215px_auto] xl:tw-grid-cols-[190px_215px_auto] tw-gap-[10px]">
|
|
<label class="tw-font-normal "><span>{{ $t('Mobilization date') }}
|
|
<span class="required">*</span></span></label>
|
|
<selectDate @selected="selectDates = $event"></selectDate>
|
|
</div>
|
|
</div>
|
|
<div class="element tw-mt-[16px]">
|
|
<div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[190px_215px_auto] xl:tw-grid-cols-[190px_215px_auto] tw-gap-[10px]">
|
|
<label class="tw-font-normal "><span>{{ $t('Mobilization time') }}
|
|
<span class="required">*</span></span></label>
|
|
<elementTimePicker></elementTimePicker>
|
|
</div>
|
|
</div>
|
|
<div class="element tw-mt-[16px]">
|
|
<div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[190px_215px_auto] xl:tw-grid-cols-[190px_215px_auto] tw-gap-[10px]">
|
|
<label class="tw-font-normal tw-mb-[20px] md:tw-mb-0"><span>{{ $t('Exit date') }}
|
|
<span class="required">*</span></span></label>
|
|
<selectDate @selected="selectDates = $event"></selectDate>
|
|
</div>
|
|
</div>
|
|
<div class="element tw-mt-[16px]">
|
|
<div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[190px_215px_auto] xl:tw-grid-cols-[190px_215px_auto] tw-gap-[10px]">
|
|
<label class="tw-font-normal "><span>{{ $t('Exit time') }}
|
|
<span class="required">*</span></span></label>
|
|
<elementTimePicker></elementTimePicker>
|
|
</div>
|
|
</div>
|
|
<div class="element tw-mt-[16px]">
|
|
<div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[190px_215px_auto] xl:tw-grid-cols-[190px_215px_auto] tw-gap-[10px]">
|
|
<div class="tw-flex tw-items-center">
|
|
<label class="tw-font-normal ">
|
|
<span>{{ $t("Booth No")}}</span><span class="required">*</span>
|
|
</label>
|
|
</div>
|
|
<ElementInputNew
|
|
:input="{
|
|
id: 'BoothNo',
|
|
required: true,
|
|
type: 'text',
|
|
placeholder: '例：32332',
|
|
}"
|
|
:validation="validation.booth_no"
|
|
@change="formData.booth_no = $event"
|
|
></ElementInputNew>
|
|
</div>
|
|
</div>
|
|
<div class="element tw-mt-[16px]">
|
|
<div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[190px_215px_auto] xl:tw-grid-cols-[190px_215px_auto] tw-gap-[10px]">
|
|
<div class="tw-flex tw-items-center">
|
|
<label class="tw-font-normal ">
|
|
<span>{{ $t("Site contact person")}}</span><span class="required">*</span>
|
|
</label>
|
|
</div>
|
|
<ElementInputNew
|
|
:input="{
|
|
id: 'SiteContactPerson',
|
|
required: true,
|
|
type: 'text',
|
|
placeholder: '例：張曉明',
|
|
}"
|
|
:validation="validation.site_contact_person"
|
|
@change="formData.site_contact_person = $event"
|
|
>
|
|
</ElementInputNew>
|
|
</div>
|
|
</div>
|
|
<div class="element tw-mt-[16px]">
|
|
<div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[190px_215px_auto] xl:tw-grid-cols-[190px_215px_auto] tw-gap-[10px]">
|
|
<div class="tw-flex tw-items-center">
|
|
<label class="tw-font-normal ">
|
|
<span>{{ $t("Site contact mobile phone")}}</span><span class="required">*</span>
|
|
</label>
|
|
</div>
|
|
<ElementInputNew
|
|
:input="{
|
|
id: 'SiteContactMobilePhone',
|
|
required: true,
|
|
type: 'text',
|
|
placeholder: '例：0912-345-678',
|
|
}"
|
|
:validation="validation.site_contact_mobile_phone"
|
|
@change="formData.site_contact_mobile_phone = $event"
|
|
>
|
|
</ElementInputNew>
|
|
</div>
|
|
</div>
|
|
<div class="element tw-mt-[16px]">
|
|
<elementTextarea
|
|
:input="{
|
|
id: 'remark',
|
|
label: 'remark',
|
|
required: false,
|
|
placeholder: '留言你想告訴我的話',
|
|
}"
|
|
:default="''"
|
|
:validation="true"
|
|
:maxlength="500"
|
|
@change="formData.Memo = $event"
|
|
></elementTextarea>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import ElementTextarea from "@/components/newComponent/form/ElementTextarea";
|
|
import ElementInputNew from "@/components/newComponent/form/ElementInputNew";
|
|
import selectDate from "@/components/service/content/selectDate.vue";
|
|
import ElementSelect from "@/components/newComponent/form/ElementSelect.vue";
|
|
import elementTimePicker from "@/components/newComponent/form/ElementTimePicker";
|
|
import is from "is_js";
|
|
export default {
|
|
name: "OrderingDetails",
|
|
components: {
|
|
ElementTextarea,
|
|
ElementInputNew,
|
|
ElementSelect,
|
|
elementTimePicker,
|
|
is,
|
|
selectDate,
|
|
},
|
|
data() {
|
|
return {
|
|
selectList:[
|
|
{
|
|
id:'1',
|
|
name: '01',
|
|
},{
|
|
id:'2',
|
|
name: '02',
|
|
}
|
|
],
|
|
selectDates: '',
|
|
start: '2023-02-06',
|
|
end: '2023-06-06',
|
|
formData: {
|
|
mobilization_date: "",
|
|
mobilization_time: "",
|
|
exit_date: "",
|
|
exit_time: "",
|
|
booth_no: "",
|
|
site_contact_person: "",
|
|
site_contact_mobile_phone: "",
|
|
memo: "",
|
|
},
|
|
validation: {
|
|
mobilization_date: true,
|
|
mobilization_time: true,
|
|
exit_date: true,
|
|
exit_time: true,
|
|
booth_no: true,
|
|
site_contact_person: true,
|
|
site_contact_mobile_phone: true,
|
|
memo: true,
|
|
},
|
|
errors: null,
|
|
};
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
reset() {
|
|
this.formData = {
|
|
mobilization_date: "",
|
|
mobilization_time: "",
|
|
exit_date: "",
|
|
exit_time: "",
|
|
booth_no: "",
|
|
site_contact_person: "",
|
|
site_contact_mobile_phone: "",
|
|
memo: "",
|
|
};
|
|
},
|
|
save() {
|
|
let isPass = this.validators();
|
|
return isPass;
|
|
},
|
|
validators() {
|
|
if (is.empty(this.formData.mobilization_date)) {
|
|
this.validation.mobilization_date = false;
|
|
} else {
|
|
this.validation.mobilization_date = true;
|
|
}
|
|
if (is.empty(this.formData.mobilization_time)) {
|
|
this.validation.mobilization_time = false;
|
|
} else {
|
|
this.validation.mobilization_time = true;
|
|
}
|
|
if (is.empty(this.formData.exit_date)) {
|
|
this.validation.exit_date = false;
|
|
} else {
|
|
this.validation.exit_date = true;
|
|
}
|
|
if (
|
|
is.empty(this.formData.exit_time)
|
|
) {
|
|
this.validation.exit_time = false;
|
|
} else {
|
|
this.validation.exit_time = true;
|
|
}
|
|
if (is.empty(this.formData.booth_no)) {
|
|
this.validation.booth_no = false;
|
|
} else {
|
|
this.validation.booth_no = true;
|
|
}
|
|
if (is.empty(this.formData.site_contact_person)) {
|
|
this.validation.site_contact_person = false;
|
|
} else {
|
|
this.validation.site_contact_person = true;
|
|
}
|
|
if (is.empty(this.formData.site_contact_mobile_phone) && is.not.number(this.formData.site_contact_mobile_phone)) {
|
|
this.validation.site_contact_mobile_phone = false;
|
|
} else {
|
|
this.validation.site_contact_mobile_phone = true;
|
|
}
|
|
if (
|
|
is.empty(this.formData.memo)
|
|
) {
|
|
this.validation.memo = false;
|
|
} else {
|
|
this.validation.memo = true;
|
|
}
|
|
this.errors = Object.entries(this.validation).filter(
|
|
(e) => e[1] == false
|
|
);
|
|
if (this.errors.length > 0) {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
},
|
|
selectItem(){
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
select {
|
|
-moz-appearance: none;
|
|
/* Firefox */
|
|
-webkit-appearance: none;
|
|
/* Safari and Chrome */
|
|
appearance: none;
|
|
background-image: url("~/assets/svg/down-arrow.svg");
|
|
background-size: 9px 6px;
|
|
background-position: right 20px center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
</style>
|
|
|