表单换成element-plus组件

This commit is contained in:
fujiao
2022-10-21 09:45:41 +08:00
parent 1d73a49e26
commit 9f05faf7dd
+44 -12
View File
@@ -189,7 +189,7 @@ export default {
<div class="row">
<div class="mb-3">
<label class="flex-space">Check Date(*):<a href="javascript:void();" @click="goLink()" class="link-a">{{$t('navbar.link.text')}}</a></label>
<input
<!-- <input
v-model="typeform.dateVisaInterview"
type="date"
name="dateVisaInterview"
@@ -197,6 +197,14 @@ export default {
:class="{
'is-invalid': typesubmit && v$.typeform.dateVisaInterview.$error,
}"
/> -->
<el-date-picker
v-model="typeform.dateVisaInterview"
type="date"
placeholder="yyyy-MM-dd"
:class="{
'is-invalid': typesubmit && v$.typeform.dateVisaInterview.$error,
}"
/>
<div
v-for="(item, index) in v$.typeform.dateVisaInterview.$errors"
@@ -211,21 +219,30 @@ export default {
<div class="col-md-4">
<div class="mb-3">
<label>VISA TYPE:</label>
<select class="form-control" v-model="typeform.visaCategory">
<!-- <select class="form-control" v-model="typeform.visaCategory">
<option v-for="item in dictionaryCategory['VISA_TYPE']" :value="item.value" :key="item.id">{{item.value}}</option>
</select>
</select> -->
<el-select v-model="typeform.visaCategory" placeholder="VISA TYPE">
<el-option v-for="item in dictionaryCategory['VISA_TYPE']" clearable :label="item.value" :value="item.value" :key="item.id" />
</el-select>
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label>VISA ENTRY(*):</label>
<select class="form-control" v-model="typeform.visaEntry"
<!-- <select class="form-control" v-model="typeform.visaEntry"
:class="{
'is-invalid': typesubmit && v$.typeform.visaEntry.$error,
}"
>
<option v-for="item in dictionaryCategory['VISA_ENTRY']" :value="item.value" :key="item.id">{{item.value}}</option>
</select>
</select> -->
<el-select v-model="typeform.visaEntry" placeholder="VISA ENTRY"
:class="{
'is-invalid': typesubmit && v$.typeform.visaEntry.$error,
}">
<el-option v-for="item in dictionaryCategory['VISA_ENTRY']" clearable :label="item.value" :value="item.value" :key="item.id" />
</el-select>
<div
v-for="(item, index) in v$.typeform.visaEntry.$errors"
:key="index"
@@ -238,32 +255,42 @@ export default {
<div class="col-md-4">
<div class="mb-3">
<label>US CONSULATE:</label>
<select class="form-control" v-model="typeform.embassyConsulate">
<!-- <select class="form-control" v-model="typeform.embassyConsulate">
<option v-for="item in dictionaryCategory['US_CONSULATE']" :value="item.value" :key="item.id">{{item.value}}</option>
</select>
</select> -->
<el-select v-model="typeform.embassyConsulate" placeholder="US CONSULATE">
<el-option v-for="item in dictionaryCategory['US_CONSULATE']" clearable :label="item.value" :value="item.value" :key="item.id" />
</el-select>
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label>Major</label>
<input
<!-- <input
v-model="typeform.major"
type="text"
name="major"
class="form-control"
/>
/> -->
<el-input v-model="typeform.major" placeholder="Major" />
</div>
</div>
<div class="col-md-4">
<div class="mb-3">
<label>VISA STATUS(*):</label>
<select class="form-control" v-model="typeform.visaStatus"
<!-- <select class="form-control" v-model="typeform.visaStatus"
:class="{
'is-invalid': typesubmit && v$.typeform.visaStatus.$error,
}"
>
<option v-for="item in dictionaryCategory['VISA_STATUS']" :value="item.value" :key="item.id">{{item.value}}</option>
</select>
</select> -->
<el-select v-model="typeform.visaStatus" placeholder="VISA STATUS"
:class="{
'is-invalid': typesubmit && v$.typeform.visaStatus.$error,
}">
<el-option v-for="item in dictionaryCategory['VISA_STATUS']" clearable :label="item.value" :value="item.value" :key="item.id" />
</el-select>
<div
v-for="(item, index) in v$.typeform.visaStatus.$errors"
:key="index"
@@ -277,11 +304,16 @@ export default {
<div class="mb-3">
<label>Complete Date:</label>
<!-- <datepicker v-model="typeform.dateVisaCheckCompleted" :first-day-of-week="1" :lang="$i18n.locale" class="form-control"></datepicker> -->
<input
<!-- <input
v-model="typeform.dateVisaCheckCompleted"
type="date"
name="dateVisaCheckCompleted"
class="form-control"
/> -->
<el-date-picker
v-model="typeform.dateVisaCheckCompleted"
type="date"
placeholder="yyyy-MM-dd"
/>
</div>
</div>