ShowEasyFrontEnd/FrontEnd/components/service/OrderingDetails.vue

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