|
|
@@ -7,91 +7,147 @@
|
|
|
label-position="right"
|
|
|
label-width="150px"
|
|
|
style="width: 100%;">
|
|
|
- <div class="content">
|
|
|
- <div class="section-title">Service Provider</div>
|
|
|
- <el-form-item
|
|
|
- label="Provider Name:"
|
|
|
- prop="providerName">
|
|
|
- <el-input
|
|
|
- class="add-text"
|
|
|
- maxlength="30"
|
|
|
- v-model="form.providerName"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="Country:"
|
|
|
- prop="countryCode">
|
|
|
- <el-select
|
|
|
- v-model="form.countryCode"
|
|
|
- class="add-text">
|
|
|
- <el-option
|
|
|
- v-for="item in options.country"
|
|
|
- :key="item.countryCode"
|
|
|
- :label="item.countryName"
|
|
|
- :value="item.countryCode"/>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="Contact Person:"
|
|
|
- prop="providerContactPerson">
|
|
|
- <el-input
|
|
|
- class="add-text"
|
|
|
- maxlength="50"
|
|
|
- v-model="form.providerContactPerson"/>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="Contact Number:"
|
|
|
- prop="providerContactPhoneNumber">
|
|
|
- <div class="add-text flexc">
|
|
|
+ <div class="flexr">
|
|
|
+ <div class="content flex1">
|
|
|
+ <div class="section-title">Service Provider</div>
|
|
|
+ <el-form-item
|
|
|
+ label="Provider Name:"
|
|
|
+ prop="providerName">
|
|
|
+ <el-input
|
|
|
+ class="add-text"
|
|
|
+ maxlength="30"
|
|
|
+ v-model="form.providerName"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Country:"
|
|
|
+ prop="countryCode">
|
|
|
<el-select
|
|
|
- style="min-width: 75px; max-width: 80px;"
|
|
|
- v-model="form.providerContactCallingCode">
|
|
|
+ v-model="form.countryCode"
|
|
|
+ class="add-text">
|
|
|
<el-option
|
|
|
v-for="item in options.country"
|
|
|
- :key="item.callingCode"
|
|
|
- :label="'+' + item.callingCode"
|
|
|
- :value="item.callingCode"/>
|
|
|
+ :key="item.countryCode"
|
|
|
+ :label="item.countryName"
|
|
|
+ :value="item.countryCode"/>
|
|
|
</el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Party ID:"
|
|
|
+ prop="partyId">
|
|
|
+ <el-input
|
|
|
+ class="add-text"
|
|
|
+ maxlength="3"
|
|
|
+ v-model="form.partyId"
|
|
|
+ @blur="changePartyId"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Contact Person:"
|
|
|
+ prop="providerContactPerson">
|
|
|
<el-input
|
|
|
- v-model="form.providerContactPhoneNumber"
|
|
|
- style="margin-left: 10px;"
|
|
|
- maxlength="15"/>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="Payment Gateway:"
|
|
|
- prop="paymentGateway">
|
|
|
- <el-select
|
|
|
- v-model="form.paymentGateway"
|
|
|
- class="add-text">
|
|
|
- <el-option
|
|
|
- v-for="item in options.payment"
|
|
|
- :key="item.key"
|
|
|
- :label="item.value"
|
|
|
- :value="item.key"/>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="Provider Logo:"
|
|
|
- class="is-required">
|
|
|
- <el-upload
|
|
|
- class="logo-upload"
|
|
|
- action
|
|
|
- :limit="1"
|
|
|
- :show-file-list="false"
|
|
|
- :file-list="[]"
|
|
|
- :on-remove="file => removeLogo(file)"
|
|
|
- :http-request="file => uploadLogo(file)"
|
|
|
- accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
|
|
|
- v-loading="loading.upload">
|
|
|
- <el-image
|
|
|
- v-if="logos.length > 0"
|
|
|
- :src="logos[0].url"
|
|
|
- title="Click to update logo"/>
|
|
|
- <i v-else
|
|
|
- class="el-icon-plus avatar-uploader-icon"
|
|
|
- title="Click to select file"/>
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
+ class="add-text"
|
|
|
+ maxlength="50"
|
|
|
+ v-model="form.providerContactPerson"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Contact Number:"
|
|
|
+ prop="providerContactPhoneNumber">
|
|
|
+ <div class="add-text flexc">
|
|
|
+ <el-select
|
|
|
+ style="min-width: 75px; max-width: 80px;"
|
|
|
+ v-model="form.providerContactCallingCode">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options.country"
|
|
|
+ :key="item.callingCode"
|
|
|
+ :label="'+' + item.callingCode"
|
|
|
+ :value="item.callingCode"/>
|
|
|
+ </el-select>
|
|
|
+ <el-input
|
|
|
+ v-model="form.providerContactPhoneNumber"
|
|
|
+ style="margin-left: 10px;"
|
|
|
+ maxlength="15"/>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Payment Gateway:"
|
|
|
+ prop="paymentGateway">
|
|
|
+ <el-select
|
|
|
+ v-model="form.paymentGateway"
|
|
|
+ class="add-text">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options.payment"
|
|
|
+ :key="item.key"
|
|
|
+ :label="item.value"
|
|
|
+ :value="item.key"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Provider Logo:"
|
|
|
+ class="is-required">
|
|
|
+ <el-upload
|
|
|
+ class="logo-upload"
|
|
|
+ action
|
|
|
+ :limit="1"
|
|
|
+ :show-file-list="false"
|
|
|
+ :file-list="[]"
|
|
|
+ :on-remove="file => removeLogo(file)"
|
|
|
+ :http-request="file => uploadLogo(file)"
|
|
|
+ accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
|
|
|
+ v-loading="loading.upload">
|
|
|
+ <el-image
|
|
|
+ v-if="logos.length > 0"
|
|
|
+ :src="logos[0].url"
|
|
|
+ title="Click to update logo"/>
|
|
|
+ <i v-else
|
|
|
+ class="el-icon-plus avatar-uploader-icon"
|
|
|
+ title="Click to select file"/>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="content flex1">
|
|
|
+ <div class="section-title">Company Details</div>
|
|
|
+ <el-form-item
|
|
|
+ label="Company Name:"
|
|
|
+ prop="company.companyName">
|
|
|
+ <el-input
|
|
|
+ class="add-text"
|
|
|
+ maxlength="50"
|
|
|
+ v-model="form.company.companyName"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Company UEN:"
|
|
|
+ prop="company.companyUen">
|
|
|
+ <el-input
|
|
|
+ class="add-text"
|
|
|
+ maxlength="15"
|
|
|
+ v-model="form.company.companyUen"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Company Email:"
|
|
|
+ prop="company.companyEmail">
|
|
|
+ <el-input
|
|
|
+ class="add-text"
|
|
|
+ maxlength="50"
|
|
|
+ v-model="form.company.companyEmail"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Company Website:"
|
|
|
+ prop="company.companyWebsit">
|
|
|
+ <el-input
|
|
|
+ class="add-text"
|
|
|
+ maxlength="50"
|
|
|
+ v-model="form.company.companyWebsit"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="Company Address:"
|
|
|
+ prop="company.companyAddress">
|
|
|
+ <el-input
|
|
|
+ class="add-text"
|
|
|
+ maxlength="100"
|
|
|
+ v-model="form.company.companyAddress"
|
|
|
+ type="textarea"
|
|
|
+ :autosize="autoSize"/>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="content flexcr">
|
|
|
<div class="buttons">
|
|
|
@@ -141,6 +197,7 @@ export default {
|
|
|
payment: []
|
|
|
},
|
|
|
form: {
|
|
|
+ partyId: "",
|
|
|
providerPk: "",
|
|
|
providerName: "",
|
|
|
countryCode: setting.defaultCountry,
|
|
|
@@ -148,7 +205,15 @@ export default {
|
|
|
paymentGateway: "",
|
|
|
providerContactPerson: "",
|
|
|
providerContactCallingCode: Number(setting.defaultCalling),
|
|
|
- providerContactPhoneNumber: ""
|
|
|
+ providerContactPhoneNumber: "",
|
|
|
+ company: {
|
|
|
+ companyUen: "",
|
|
|
+ companyName: "",
|
|
|
+ companyEmail: "",
|
|
|
+ companyWebsit: "",
|
|
|
+ companyAddress: "",
|
|
|
+ providerCompanyPk: ""
|
|
|
+ }
|
|
|
},
|
|
|
rule: {
|
|
|
providerName: {
|
|
|
@@ -175,9 +240,33 @@ export default {
|
|
|
required: true,
|
|
|
trigger: 'blur',
|
|
|
message: 'Please type contact number'
|
|
|
+ },
|
|
|
+ partyId: {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Please type party Id'
|
|
|
+ },
|
|
|
+ "company.companyName": {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Please type company name'
|
|
|
+ },
|
|
|
+ "company.companyUen": {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Please type company UEN'
|
|
|
+ },
|
|
|
+ "company.companyAddress": {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: 'Please type company address'
|
|
|
}
|
|
|
},
|
|
|
- logos: []
|
|
|
+ logos: [],
|
|
|
+ autoSize: {
|
|
|
+ minRows: 3,
|
|
|
+ maxRows: 8
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -311,6 +400,11 @@ export default {
|
|
|
type: 'error'
|
|
|
})
|
|
|
});
|
|
|
+ },
|
|
|
+ changePartyId() {
|
|
|
+ if (this.form.partyId) {
|
|
|
+ this.form.partyId = this.form.partyId.toUpperCase();
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
