|
@@ -10,7 +10,7 @@
|
|
|
label-position="right"
|
|
label-position="right"
|
|
|
>
|
|
>
|
|
|
<el-row :gutter="20">
|
|
<el-row :gutter="20">
|
|
|
- <el-col :span="10" :offset="0">
|
|
|
|
|
|
|
+ <el-col :xs="24" :md="10" :offset="0">
|
|
|
<el-form-item label="Display Name:" prop="nickName">
|
|
<el-form-item label="Display Name:" prop="nickName">
|
|
|
<el-input
|
|
<el-input
|
|
|
:disabled="isDispatch"
|
|
:disabled="isDispatch"
|
|
@@ -18,24 +18,17 @@
|
|
|
></el-input>
|
|
></el-input>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
- <el-col :span="10" :offset="2">
|
|
|
|
|
- <el-form-item label="Company:" prop="fleetCompanyId">
|
|
|
|
|
- <el-select
|
|
|
|
|
|
|
+ <el-col :xs="24" :md="10" >
|
|
|
|
|
+ <el-form-item label="PDVL:" prop="pdvLicence">
|
|
|
|
|
+ <el-input
|
|
|
:disabled="isDispatch"
|
|
:disabled="isDispatch"
|
|
|
- v-model="form.fleetCompanyId"
|
|
|
|
|
- >
|
|
|
|
|
- <el-option
|
|
|
|
|
- v-for="(item) in options.fleetCompany"
|
|
|
|
|
- :key="item.fleetCompanyId"
|
|
|
|
|
- :label="item.fleetCompanyName"
|
|
|
|
|
- :value="item.fleetCompanyId"
|
|
|
|
|
- ></el-option>
|
|
|
|
|
- </el-select>
|
|
|
|
|
|
|
+ v-model="form.pdvLicence"
|
|
|
|
|
+ ></el-input>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
</el-row>
|
|
</el-row>
|
|
|
<el-row :gutter="20">
|
|
<el-row :gutter="20">
|
|
|
- <el-col :span="10" :offset="0">
|
|
|
|
|
|
|
+ <el-col :xs="24" :md="10" :offset="0">
|
|
|
<el-form-item label="Email Address:" prop="email">
|
|
<el-form-item label="Email Address:" prop="email">
|
|
|
<el-input
|
|
<el-input
|
|
|
:disabled="isDispatch"
|
|
:disabled="isDispatch"
|
|
@@ -43,30 +36,49 @@
|
|
|
></el-input>
|
|
></el-input>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
- <el-col :span="10" :offset="2">
|
|
|
|
|
- <el-form-item label="PDVL:" prop="pdvLicence">
|
|
|
|
|
- <el-input
|
|
|
|
|
|
|
+ <el-col :xs="24" :md="10">
|
|
|
|
|
+ <el-form-item label="Company:" prop="fleetCompanyId">
|
|
|
|
|
+ <el-select
|
|
|
:disabled="isDispatch"
|
|
:disabled="isDispatch"
|
|
|
- v-model="form.pdvLicence"
|
|
|
|
|
- ></el-input>
|
|
|
|
|
|
|
+ v-model="form.fleetCompanyId">
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="(item) in options.fleetCompany"
|
|
|
|
|
+ :key="item.fleetCompanyId"
|
|
|
|
|
+ :label="item.fleetCompanyName"
|
|
|
|
|
+ :value="item.fleetCompanyId"
|
|
|
|
|
+ ></el-option>
|
|
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
</el-row>
|
|
</el-row>
|
|
|
<el-row :gutter="20">
|
|
<el-row :gutter="20">
|
|
|
- <el-col :span="10" :offset="0">
|
|
|
|
|
|
|
+ <el-col :xs="24" :md="10">
|
|
|
|
|
+ <el-form-item label="Country:" prop="phone">
|
|
|
|
|
+ <el-select
|
|
|
|
|
+ :disabled="isDispatch"
|
|
|
|
|
+ v-model="form.countryCode">
|
|
|
|
|
+ <el-option
|
|
|
|
|
+ v-for="item in options.countryList"
|
|
|
|
|
+ :key="item.value"
|
|
|
|
|
+ :label="item.name"
|
|
|
|
|
+ :value="item.value"
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col :xs="24" :md="10" :offset="0">
|
|
|
<el-form-item label="Phone Number:" prop="phone">
|
|
<el-form-item label="Phone Number:" prop="phone">
|
|
|
<el-row :gutter="0">
|
|
<el-row :gutter="0">
|
|
|
<el-col :span="7">
|
|
<el-col :span="7">
|
|
|
<el-select
|
|
<el-select
|
|
|
:disabled="isDispatch"
|
|
:disabled="isDispatch"
|
|
|
- v-model="form.callingCode"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ v-model="form.callingCode">
|
|
|
<el-option
|
|
<el-option
|
|
|
v-for="item in options.callingCode"
|
|
v-for="item in options.callingCode"
|
|
|
:key="item.callingCode"
|
|
:key="item.callingCode"
|
|
|
:label="'+' + item.callingCode"
|
|
:label="'+' + item.callingCode"
|
|
|
:value="item.callingCode"
|
|
:value="item.callingCode"
|
|
|
- ></el-option>
|
|
|
|
|
|
|
+ />
|
|
|
</el-select>
|
|
</el-select>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
<el-col :span="16" :offset="1">
|
|
<el-col :span="16" :offset="1">
|
|
@@ -83,54 +95,47 @@
|
|
|
></el-input-->
|
|
></el-input-->
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
- <el-col :span="10" :offset="2">
|
|
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+ <el-row :gutter="20">
|
|
|
|
|
+ <el-col :span="24">
|
|
|
<el-form-item label="PDVL:" class="pdvl" prop="pdvLicencePictures">
|
|
<el-form-item label="PDVL:" class="pdvl" prop="pdvLicencePictures">
|
|
|
<template v-slot:label>
|
|
<template v-slot:label>
|
|
|
- PDVL: <br> (Front & Back)
|
|
|
|
|
|
|
+ PDVL Photos: <br> (Front & Back)
|
|
|
</template>
|
|
</template>
|
|
|
- <el-row :gutter="0">
|
|
|
|
|
- <el-col :span="12" :offset="0">
|
|
|
|
|
- <el-upload
|
|
|
|
|
- :disabled="isDispatch"
|
|
|
|
|
- class="avatar-uploader"
|
|
|
|
|
- accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
|
|
|
|
|
- :action="action"
|
|
|
|
|
- :headers="headers"
|
|
|
|
|
- :show-file-list="false"
|
|
|
|
|
- :on-success="handleAvatarSuccessFirst"
|
|
|
|
|
- :before-upload="beforeAvatarUpload"
|
|
|
|
|
- >
|
|
|
|
|
- <el-image
|
|
|
|
|
- style="width: 100px; height: 100px"
|
|
|
|
|
- v-if="form.pdvLicencePictures.front"
|
|
|
|
|
- :src="form.pdvLicencePictures.front | imageSrc"
|
|
|
|
|
- :preview-src-list="isDispatch ? previewSrcList : []"
|
|
|
|
|
- ></el-image>
|
|
|
|
|
- <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
|
|
- </el-upload>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="12" :offset="0">
|
|
|
|
|
- <el-upload
|
|
|
|
|
- :disabled="isDispatch"
|
|
|
|
|
- class="avatar-uploader"
|
|
|
|
|
- accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
|
|
|
|
|
- :action="action"
|
|
|
|
|
- :headers="headers"
|
|
|
|
|
- :show-file-list="false"
|
|
|
|
|
- :on-success="handleAvatarSuccessSecond"
|
|
|
|
|
- :before-upload="beforeAvatarUpload"
|
|
|
|
|
- >
|
|
|
|
|
- <el-image
|
|
|
|
|
- style="width: 100px; height: 100px"
|
|
|
|
|
- v-if="form.pdvLicencePictures.back"
|
|
|
|
|
- :src="form.pdvLicencePictures.back | imageSrc"
|
|
|
|
|
- :preview-src-list="isDispatch ? previewSrcList : []"
|
|
|
|
|
- ></el-image>
|
|
|
|
|
- <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
|
|
- </el-upload>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- </el-row>
|
|
|
|
|
-
|
|
|
|
|
|
|
+ <div class="flexcr">
|
|
|
|
|
+ <el-upload
|
|
|
|
|
+ :disabled="isDispatch"
|
|
|
|
|
+ class="avatar-uploader"
|
|
|
|
|
+ accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
|
|
|
|
|
+ :action="action"
|
|
|
|
|
+ :headers="headers"
|
|
|
|
|
+ :show-file-list="false"
|
|
|
|
|
+ :on-success="handleAvatarSuccessFirst"
|
|
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
|
|
+ <el-image
|
|
|
|
|
+ style="width: 150px; height: 100px"
|
|
|
|
|
+ v-if="form.pdvLicencePictures.front"
|
|
|
|
|
+ :src="form.pdvLicencePictures.front | imageSrc"
|
|
|
|
|
+ :preview-src-list="isDispatch ? previewSrcList : []"/>
|
|
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
|
|
+ </el-upload>
|
|
|
|
|
+ <el-upload
|
|
|
|
|
+ :disabled="isDispatch"
|
|
|
|
|
+ class="avatar-uploader"
|
|
|
|
|
+ accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
|
|
|
|
|
+ :action="action"
|
|
|
|
|
+ :headers="headers"
|
|
|
|
|
+ :show-file-list="false"
|
|
|
|
|
+ :on-success="handleAvatarSuccessSecond"
|
|
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
|
|
+ <el-image
|
|
|
|
|
+ style="width: 150px; height: 100px"
|
|
|
|
|
+ v-if="form.pdvLicencePictures.back"
|
|
|
|
|
+ :src="form.pdvLicencePictures.back | imageSrc"
|
|
|
|
|
+ :preview-src-list="isDispatch ? previewSrcList : []"/>
|
|
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
|
|
+ </el-upload>
|
|
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
</el-row>
|
|
</el-row>
|
|
@@ -185,6 +190,7 @@ import {
|
|
|
updateDriver
|
|
updateDriver
|
|
|
} from '@/http/api/driver'
|
|
} from '@/http/api/driver'
|
|
|
import { baseURL } from '@/http/http'
|
|
import { baseURL } from '@/http/http'
|
|
|
|
|
+import site from '../../http/api/site'
|
|
|
import { getToken } from '@/utils/auth'
|
|
import { getToken } from '@/utils/auth'
|
|
|
import {getCountryList} from '../../utils/index.js'
|
|
import {getCountryList} from '../../utils/index.js'
|
|
|
|
|
|
|
@@ -205,6 +211,7 @@ export default {
|
|
|
driverStatus: "",
|
|
driverStatus: "",
|
|
|
email: "",
|
|
email: "",
|
|
|
phone: "",
|
|
phone: "",
|
|
|
|
|
+ countryCode: 'SG',
|
|
|
callingCode: "65",
|
|
callingCode: "65",
|
|
|
fleetCompanyId: "",
|
|
fleetCompanyId: "",
|
|
|
pdvLicence: "",
|
|
pdvLicence: "",
|
|
@@ -214,6 +221,7 @@ export default {
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
options: {
|
|
options: {
|
|
|
|
|
+ countryList: [],
|
|
|
callingCode: [],
|
|
callingCode: [],
|
|
|
fleetCompany: [],
|
|
fleetCompany: [],
|
|
|
},
|
|
},
|
|
@@ -308,7 +316,8 @@ export default {
|
|
|
this.form.fleetCompanyId = data.fleetCompanyId
|
|
this.form.fleetCompanyId = data.fleetCompanyId
|
|
|
this.form.nickName = data.nickName
|
|
this.form.nickName = data.nickName
|
|
|
this.form.pdvLicence = data.pdvLicence
|
|
this.form.pdvLicence = data.pdvLicence
|
|
|
- this.form.callingCode = data.callingCode
|
|
|
|
|
|
|
+ this.form.countryCode = data.countryCode || 'SG'
|
|
|
|
|
+ this.form.callingCode = "" + data.callingCode
|
|
|
this.form.phone = data.phone
|
|
this.form.phone = data.phone
|
|
|
this.form.userPk = data.userPk
|
|
this.form.userPk = data.userPk
|
|
|
if (data.pdvLicencePictures) {
|
|
if (data.pdvLicencePictures) {
|
|
@@ -348,7 +357,6 @@ export default {
|
|
|
this.options.fleetCompany = data
|
|
this.options.fleetCompany = data
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
async onClickApproveButton() {
|
|
async onClickApproveButton() {
|
|
|
const params = { userPk: this.getDriverId() }
|
|
const params = { userPk: this.getDriverId() }
|
|
|
this.approveButtonLoading = true
|
|
this.approveButtonLoading = true
|
|
@@ -390,6 +398,7 @@ export default {
|
|
|
front,
|
|
front,
|
|
|
back,
|
|
back,
|
|
|
},
|
|
},
|
|
|
|
|
+ countryCode,
|
|
|
callingCode,
|
|
callingCode,
|
|
|
phone,
|
|
phone,
|
|
|
...others
|
|
...others
|
|
@@ -403,12 +412,14 @@ export default {
|
|
|
result = await updateDriver({
|
|
result = await updateDriver({
|
|
|
pdvLicencePictures,
|
|
pdvLicencePictures,
|
|
|
phone,
|
|
phone,
|
|
|
|
|
+ countryCode,
|
|
|
callingCode,
|
|
callingCode,
|
|
|
...others,
|
|
...others,
|
|
|
})
|
|
})
|
|
|
} else {
|
|
} else {
|
|
|
result = await addDriver({
|
|
result = await addDriver({
|
|
|
pdvLicencePictures,
|
|
pdvLicencePictures,
|
|
|
|
|
+ countryCode,
|
|
|
callingCode,
|
|
callingCode,
|
|
|
phone,
|
|
phone,
|
|
|
...others,
|
|
...others,
|
|
@@ -427,12 +438,18 @@ export default {
|
|
|
})
|
|
})
|
|
|
this.confirmButtonLoading = false
|
|
this.confirmButtonLoading = false
|
|
|
},
|
|
},
|
|
|
|
|
+ getCountryOptions() {
|
|
|
|
|
+ site.getCountryList().then(({ data }) => {
|
|
|
|
|
+ this.options.countryList = data
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
async created() {
|
|
async created() {
|
|
|
this.getFleetCompanyOptions()
|
|
this.getFleetCompanyOptions()
|
|
|
if (this.isEdit) {
|
|
if (this.isEdit) {
|
|
|
this.getDriverDetail()
|
|
this.getDriverDetail()
|
|
|
}
|
|
}
|
|
|
|
|
+ this.getCountryOptions()
|
|
|
getCountryList(list => {
|
|
getCountryList(list => {
|
|
|
this.options.callingCode = list
|
|
this.options.callingCode = list
|
|
|
})
|
|
})
|
|
@@ -454,11 +471,12 @@ export default {
|
|
|
padding: 45px 100px;
|
|
padding: 45px 100px;
|
|
|
.pdvl {
|
|
.pdvl {
|
|
|
::v-deep .el-form-item__label {
|
|
::v-deep .el-form-item__label {
|
|
|
- padding: 12px 0;
|
|
|
|
|
|
|
+ padding: 12px;
|
|
|
line-height: 16px;
|
|
line-height: 16px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.avatar-uploader {
|
|
.avatar-uploader {
|
|
|
|
|
+ margin-right: 10px;
|
|
|
.avatar-uploader-icon {
|
|
.avatar-uploader-icon {
|
|
|
border: 1px dashed #d9d9d9;
|
|
border: 1px dashed #d9d9d9;
|
|
|
border-radius: 6px;
|
|
border-radius: 6px;
|
|
@@ -479,13 +497,6 @@ export default {
|
|
|
|
|
|
|
|
.buttons {
|
|
.buttons {
|
|
|
padding: 0 45px;
|
|
padding: 0 45px;
|
|
|
- .cancelButton {
|
|
|
|
|
- color: #555;
|
|
|
|
|
- background: #FFFFFF;
|
|
|
|
|
- border: 1px solid #001489;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- border-radius: 4px;
|
|
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|