How to control the checkbox selection to single checkbox in Treeview Component
Hi Team,
As I am working Vue js project using syncfusion there I find the difficulty, where I need to control the checkbox selection to single checkbox selection. please provide the solution
Find the bellow code used
Thanks and Regards,
Punith BN
<template>
<div>
<div id="divControlBtn" class="d-flex justify-content-end mt-2">
<span class="special-btn p-1 mr-4 text-primary cpointer" @click="saveCustomerOutlet()"
><small
><span class="mr-2">{{ $t('common.save') }}</span> <i class="fas fa-save"></i
></small>
</span>
<span class="special-btn p-1 mr-4 text-danger cpointer" @click="cancelButton()"
><small>
<span class="mr-2">{{ $t('common.cancel') }}</span>
<i class="fas fa-times-circle"></i
></small>
</span>
</div>
<div class="outlet-form mt-2">
<b-card no-body>
<b-tabs card>
<b-tab title="Basic" class="mainBasicTab">
<b-container fluid class="bv-example-row mb-3">
<div
class="tab-pane fade show active pt-4"
id="nav-basic"
role="tabpanel"
aria-labelledby="nav-basic-tab"
>
<div class="row">
<div class="col-md-12 col-lg-6 mb-4">
<div class="outlet-section">
<div class="row align-items-center mb-3">
<div class="col-6">
<h5>General Information</h5>
</div>
<div class="col-6">
<span class="badge badge-pill badge-warning align-self-end">Status</span>
</div>
</div>
<div class="row">
<div class="form-group col-2">
<label for="exampleFormControlInput1">{{ $t('outlet.aprovalstatus') }}</label>
<input
type="text"
class="form-control form-control-sm form-control form-control-sm-sm"
id="exampleFormControlInput1"
placeholder=""
/>
</div>
<div class="form-group col-4">
<label for="exampleFormControlInput1"
>{{ $t('outlet.outletcode') }}<span class="mandatory-field"></span
></label>
<input
type="text"
class="form-control form-control-sm form-control form-control-sm-sm"
id="txtOutletCode"
v-model="outletDataJson.CustomerCode"
maxlength="24"
name="txtOutletCode"
v-bind="enableInput('OUTLET_CUSTOMERCODE')"
/>
</div>
<div class="form-group col-3">
<label for="exampleFormControlInput1"
>{{ $t('outlet.outletname') }}<span class="mandatory-field"></span
></label>
<input
type="text"
class="form-control form-control-sm form-control form-control-sm-sm"
v-model="outletDataJson.CustomerName"
v-bind="enableInput('OUTLET_CUSTOMERNAME')"
maxlength="100"
/>
</div>
<div class="form-group col-3">
<label for="exampleFormControlInput1">{{ $t('outlet.outlettype') }}</label>
<select
class="form-control form-control-sm"
id="selOutletType"
value=""
v-bind="enableInput('OUTLET_OUTLETTYPE')"
>
<option value=""></option>
<option value="0">Is Sub DB Attribute</option>
<option value="1">Is Tertiary Outlet</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-3">
<label for="exampleFormControlInput1">{{ $t('outlet.salesgroupcode') }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="24"
v-bind="enableInput('OUTLET_SALESGROUPCODE')"
name="txtSalesGroupCode"
v-model="outletDataJson.SalesGroupCodeByOutlet"
/>
</div>
<div class="form-group col-3">
<label for="exampleFormControlInput1">{{ $t('outlet.hierarchycode') }}</label>
<select class="form-control form-control-sm" id="exampleFormControlSelect3">
<option></option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group col-3">
<label for="exampleFormControlInput1">{{ $t('outlet.salesmode') }}</label>
<select
class="form-control form-control-sm"
id="ddlSalesMode"
v-model="outletDataJson.SalesMode"
v-bind="enableInput('OUTLET_SALESMODE')"
>
<option value="0">Cash</option>
<option value="1">Credit</option>
</select>
</div>
<div class="form-group col-3">
<label for="exampleFormControlInput1">{{ $t('outlet.paymenttype') }}</label>
<select
class="form-control form-control-sm"
id="ddlPaymentType"
v-model="outletDataJson.PaymentType"
v-bind="enableInput('OUTLET_PAYMENTTYPE')"
>
<option value="0">Cash(P001 )</option>
<option value="1">Cheque(P002 )</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-4">
<label for="exampleFormControlInput1">Name(A)</label>
<input
type="text"
class="form-control form-control-sm"
v-model="outletDataJson.CustomerNameA"
maxlength="100"
v-bind="enableInput('OUTLET_CUSTOMERNAMEA')"
/>
</div>
<div class="form-group col-4">
<label for="exampleFormControlInput1">{{ $t('outlet.ownername') }}</label>
<input
type="text"
class="form-control form-control-sm"
id="txtOwnerName"
v-model="outletDataJson.OwnerName"
v-bind="enableInput('OUTLET_OWNERNAME')"
/>
</div>
<div class="form-group col-4">
<label for="exampleFormControlInput1">{{ $t('outlet.templateid') }}</label>
<input
type="text"
class="form-control form-control-sm"
value=""
v-model="outletDataJson.TemplateID"
v-bind="enableInput('OUTLET_TEMPLATEID')"
/>
</div>
</div>
<div class="row align-items-end">
<div class="form-group col-3">
<label for="exampleFormControlInput1">{{ $t('outlet.authorizeditemlistkey') }}</label>
<select
class="form-control form-control-sm"
v-model="outletDataJson.AuthorizedItemListKey"
v-bind="enableInput('OUTLET_AUTHORIZEDITEMLISTKEY')"
>
<option value=""></option>
<option
v-for="(option, index) in authorizedProductDropDownValues"
:key="index"
:value="option.IDNumber"
>{{ option.CodeAndDesc }}></option
>
</select>
</div>
<div class="form-group col-3">
<label for="exampleFormControlInput1">{{ $t('outlet.customerprinciplecode') }}</label>
<input type="text" class="form-control" disabled="disabled" />
</div>
<div class="form-group form-check col-3">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1"
v-model="outletDataJson.OfficeAccount"
v-bind="enableInput('OUTLET_OFFICEACCOUNT')"
/>
<label class="form-check-label" for="exampleCheck1">{{ $t('outlet.officeaccount') }}</label>
</div>
<div class="form-group form-check col-3">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1"
v-model="outletDataJson.BillToCustomer"
v-bind="enableInput('OUTLET_BILLTOOUTLET')"
name="txtBillToCode"
/>
<label class="form-check-label" for="exampleCheck1">{{ $t('outlet.billtooutlet') }}</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-6 mb-4">
<div class="outlet-section">
<h5 class="mb-3">Location</h5>
<div class="row">
<div class="form-group col-6">
<label for="exampleFormControlInput1">Address 1<span class="mandatory-field"></span></label>
<input
type="text"
class="form-control form-control-sm"
v-model="outletDataJson.Address1"
name="txtAddress1"
v-bind="enableInput('OUTLET_ADDRESS1')"
/>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">Address 2</label>
<input
type="text"
class="form-control form-control-sm"
v-model="outletDataJson.Address2"
v-bind="enableInput('OUTLET_ADDRESS2')"
name="txtAddress2"
/>
</div>
</div>
<div class="row">
<div class="form-group col-6">
<label for="exampleFormControlInput1">Address 3</label>
<input
type="text"
class="form-control form-control-sm"
v-model="outletDataJson.Address3"
v-bind="enableInput('OUTLET_ADDRESS3')"
name="txtAddress3"
/>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">Address 4</label>
<input
type="text"
class="form-control form-control-sm"
v-model="outletDataJson.Address4"
v-bind="enableInput('OUTLET_ADDRESS4')"
name="txtAddress4"
/>
</div>
</div>
<div class="row">
<div class="form-group col-4">
<label for="exampleFormControlInput1">City</label>
<input
type="text"
class="form-control form-control-sm"
v-model="outletDataJson.City"
v-bind="enableInput('OUTLET_CITY')"
name="txtCity"
/>
</div>
<div class="form-group col-4">
<label for="exampleFormControlInput1">State</label>
<input
type="text"
class="form-control form-control-sm"
v-model="outletDataJson.State"
v-bind="enableInput('OUTLET_STATE')"
name="txtState"
/>
</div>
<div class="form-group col-4">
<label for="exampleFormControlInput1">Zip</label>
<input
type="text"
class="form-control form-control-sm"
v-model="outletDataJson.Zip"
v-bind="enableInput('OUTLET_ZIP')"
name="txtZip"
/>
</div>
</div>
<div class="row">
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.geocodex') }}</label>
<input
type="number"
class="form-control form-control-sm"
v-model="outletDataJson.GeoCodeX"
onkeypress="return validateRegex(event);"
maxlength="10"
v-bind="enableInput('OUTLET_GEOCODEX')"
/>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.geocodey') }}</label>
<input
type="number"
class="form-control form-control-sm"
v-model="outletDataJson.GeoCodeY"
onkeypress="return validateRegex(event);"
maxlength="10"
v-bind="enableInput('OUTLET_GEOCODEY')"
/>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-md-12 col-lg-6 mb-4">
<div class="outlet-section">
<h5 class="mb-3">Contact</h5>
<div class="row">
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.contactperson') }}</label>
<input
type="text"
class="form-control form-control-sm"
v-model="outletDataJson.ContactPerson"
v-bind="enableInput('OUTLET_CONTACTPERSON')"
/>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.mobile') }}</label>
<input
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
v-model="outletDataJson.Mobile"
v-bind="enableInput('OUTLET_MOBILE')"
/>
</div>
</div>
<div class="row">
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.phone') }}</label>
<input
type="text"
class="form-control form-control-sm"
v-model="outletDataJson.Phone"
v-bind="enableInput('OUTLET_PHONE')"
/>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.telephone') }}</label>
<input
type="text"
class="form-control form-control-sm"
v-model="outletDataJson.Telephone"
v-bind="enableInput('OUTLET_TELEPHONE')"
/>
</div>
</div>
<div class="row">
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.fax') }}</label>
<input
type="text"
class="form-control form-control-sm"
v-model="outletDataJson.Fax"
v-bind="enableInput('OUTLET_FAX')"
/>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.email') }}</label>
<input
type="text"
class="form-control form-control-sm"
v-model="outletDataJson.Email"
v-bind="enableInput('OUTLET_EMAIL')"
/>
</div>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">{{ $t('outlet.website') }}</label>
<input
type="text"
class="form-control form-control-sm"
v-model="outletDataJson.Website"
v-bind="enableInput('OUTLET_WEBSITE')"
/>
</div>
</div>
</div>
<div class="col-md-12 col-lg-3 mb-4">
<div class="outlet-section">
<h5 class="mb-3">Promotions</h5>
<div class="row">
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.salespromotionkey') }}</label>
<select
class="form-control form-control-sm"
id="exampleFormControlSelect1"
v-model="outletDataJson.SalesPromotionKey"
v-bind="enableInput('OUTLET_SALESPROMOTIONKEY')"
>
<option value="-1"></option>
</select>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.returnpromotionkey') }}</label>
<select
class="form-control form-control-sm"
id="exampleFormControlSelect1"
v-model="outletDataJson.ReturnPromotionkey"
v-bind="enableInput('OUTLET_RETURNPROMOTIONKEY')"
>
<option value="-1"></option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.pointsaccumulated') }}</label>
<input
type="number"
class="form-control form-control-sm"
onkeypress="return validateRegex(event);"
v-model="outletDataJson.LoyaltyPoints"
maxlength="10"
v-bind="enableInput('OUTLET_POINTSACCUMULATED')"
/>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.surveykey') }}</label>
<select
class="form-control form-control-sm"
id="exampleFormControlSelect1"
v-model="outletDataJson.ReturnPromotionkey"
v-bind="enableInput('OUTLET_RETURNPROMOTIONKEY')"
>
<option value="-1"></option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-6">
<label for="exampleFormControlInput1">Discount %</label>
<input
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
v-model="outletDataJson.CashDiscountPerc"
/>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">Margin %</label>
<input
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
v-model="outletDataJson.MarginPerc"
/>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-3 mb-4">
<div class="outlet-section">
<h5 class="mb-3">Pricing</h5>
<div class="form-group">
<label for="exampleFormControlInput1">{{ $t('outlet.customerpricelevel') }}</label>
<select
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
v-model="outletDataJson.CustomerPriceLevel"
v-bind="enableInput('OUTLET_CUSTOMERPRICELEVEL')"
placeholder=""
>
<option value=""></option>
<option value="0">Sales Price(0)</option>
<option value="1">Price Level 1(1)</option>
<option value="2">Price Level 2(2)</option>
<option value="3">Price Level 3(3)</option>
<option value="4">Price Level 4(4)</option>
<option value="5">Price Level 5(5)</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">{{ $t('outlet.customerpricingkey') }}</label>
<select
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
v-model="outletDataJson.CustomerPricingKey"
v-bind="enableInput('OUTLET_CUSTOMERPRICINGKEY')"
>
<option value=""></option>
<option
v-for="(option, index) in pricingDropDownValues"
:key="index"
:value="option.IDNumber"
>{{ option.CodeAndDesc }}></option
>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</b-container>
</b-tab>
<b-tab title="Classifications" @click="categoriesTabClicked">
<b-container fluid class="bv-example-row mb-3">
<div
class="tab-pane fade show active pt-4"
id="nav-categorie"
role="tabpanel"
aria-labelledby="nav-categorie-tab"
>
<div class="row">
<div class="col-6">
<div class="outlet-section">
<h5 class="mb-3">Categories</h5>
<div class="row">
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE1 }}</label>
<select
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
v-model="outletDataJson.CategoryCode1"
v-bind="enableInput('OUTLET_CATEGORYCODE1')"
>
<option value=""></option>
<option
v-for="(option, index) in customCategoryOptions(1)"
:key="index"
:value="option.CategoryNumber"
>{{ option.CategoryCodeAndDescription }}></option
>
</select>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE2 }}</label>
<select
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
v-model="outletDataJson.CategoryCode2"
v-bind="enableInput('OUTLET_CATEGORYCODE2')"
>
<option value=""></option>
<option
v-for="(option, index) in customCategoryOptions(2)"
:key="index"
:value="option.CategoryNumber"
>{{ option.CategoryCodeAndDescription }}></option
>
</select>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE3 }}</label>
<select
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
v-model="outletDataJson.CategoryCode3"
v-bind="enableInput('OUTLET_CATEGORYCODE3')"
>
<option value=""></option>
<option
v-for="(option, index) in customCategoryOptions(3)"
:key="index"
:value="option.CategoryNumber"
>{{ option.CategoryCodeAndDescription }}></option
>
</select>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE4 }}</label>
<select
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
v-model="outletDataJson.CategoryCode4"
v-bind="enableInput('OUTLET_CATEGORYCODE4')"
>
<option value=""></option>
<option
v-for="(option, index) in customCategoryOptions(4)"
:key="index"
:value="option.CategoryNumber"
>{{ option.CategoryCodeAndDescription }}></option
>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE5 }}</label>
<select
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
v-model="outletDataJson.CategoryCode5"
v-bind="enableInput('OUTLET_CATEGORYCODE5')"
>
<option value=""></option>
<option
v-for="(option, index) in customCategoryOptions(5)"
:key="index"
:value="option.CategoryNumber"
>{{ option.CategoryCodeAndDescription }}></option
>
</select>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE6 }}</label>
<select
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
v-model="outletDataJson.CategoryCode6"
v-bind="enableInput('OUTLET_CATEGORYCODE6')"
>
<option value=""></option>
<option
v-for="(option, index) in customCategoryOptions(6)"
:key="index"
:value="option.CategoryNumber"
>{{ option.CategoryCodeAndDescription }}></option
>
</select>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE7 }}</label>
<select
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
v-model="outletDataJson.CategoryCode7"
v-bind="enableInput('OUTLET_CATEGORYCODE7')"
>
<option value=""></option>
<option
v-for="(option, index) in customCategoryOptions(7)"
:key="index"
:value="option.CategoryNumber"
>{{ option.CategoryCodeAndDescription }}></option
>
</select>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE8 }}</label>
<select
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
v-model="outletDataJson.CategoryCode8"
v-bind="enableInput('OUTLET_CATEGORYCODE8')"
>
<option value=""></option>
<option
v-for="(option, index) in customCategoryOptions(8)"
:key="index"
:value="option.CategoryNumber"
>{{ option.CategoryCodeAndDescription }}></option
>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE9 }}</label>
<select
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
v-model="outletDataJson.CategoryCode9"
v-bind="enableInput('OUTLET_CATEGORYCODE9')"
>
<option value=""></option>
<option
v-for="(option, index) in customCategoryOptions(9)"
:key="index"
:value="option.CategoryNumber"
>{{ option.CategoryCodeAndDescription }}></option
>
</select>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CATEGORYCODE10 }}</label>
<select
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
v-model="outletDataJson.CategoryCode10"
v-bind="enableInput('OUTLET_CATEGORYCODE10')">
<option value=""></option>
<option
v-for="(option, index) in customCategoryOptions(10)"
:key="index"
:value="option.CategoryNumber"
>{{ option.CategoryCodeAndDescription }}></option
>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="outlet-section">
<h5 class="mb-3">Attributes</h5>
<div class="row">
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE1 }}</label>
<input
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE1')"
v-model="outletDataJson.Attribute1"
/>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE2 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE2')"
v-model="outletDataJson.Attribute2"
/>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE3 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE3')"
v-model="outletDataJson.Attribute3"
/>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE4 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE4')"
v-model="outletDataJson.Attribute4"
/>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE5 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE5')"
v-model="outletDataJson.Attribute5"
/>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE6 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE6')"
v-model="outletDataJson.Attribute6"
/>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE7 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE7')"
v-model="outletDataJson.Attribute7"
/>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE8 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE8')"
v-model="outletDataJson.Attribute8"
/>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE9 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE9')"
v-model="outletDataJson.Attribute9"
/>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_ATTRIBUTE10 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE10')"
v-model="outletDataJson.Attribute10"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row pt-4">
<div class="col-6">
<div class="outlet-section">
<h5 class="mb-3">Calculated Attribute</h5>
<div class="row">
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE1 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE1')"
v-model="outletDataJson.CalculatedAttribute1"
/>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE2 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE2')"
v-model="outletDataJson.CalculatedAttribute2"
/>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE3 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE3')"
v-model="outletDataJson.CalculatedAttribute3"
/>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE4 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE4')"
v-model="outletDataJson.CalculatedAttribute4"
/>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE5 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE5')"
v-model="outletDataJson.CalculatedAttribute5"
/>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE6 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE6')"
v-model="outletDataJson.CalculatedAttribute6"
/>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE7 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE7')"
v-model="outletDataJson.CalculatedAttribute7"
/>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE8 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE8')"
v-model="outletDataJson.CalculatedAttribute8"
/>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_CALCULATEDATTRIBUTE9 }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE9')"
v-model="outletDataJson.CalculatedAttribute9"
/>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="exampleFormControlInput1">{{
outletlabels.OUTLET_CALCULATEDATTRIBUTE10
}}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="100"
v-bind="enableInput('OUTLET_ATTRIBUTE10')"
v-model="outletDataJson.CalculatedAttribute10"
/>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="outlet-section">
<h5 class="mb-3">Outlet Hierarchy</h5>
<div class="row">
<div class="col-3">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_HIERARCHYCODE1 }}</label>
<div class="input-group mb-3">
<input
type="text"
class="form-control form-control-sm"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="button-addon2"
/>
<div class="input-group-append">
<button
class="btn btn-sm btn-outline-secondary"
type="button"
id="button-addon2"
data-toggle="modal"
data-target="#hierarchyCode"
@click="openHierarchyStructure()"
>
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
<div class="col-3">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_HIERARCHYCODE2 }}</label>
<div class="input-group mb-3">
<input
type="text"
class="form-control form-control-sm"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="button-addon2"
/>
<div class="input-group-append">
<button
class="btn btn-sm btn-outline-secondary"
type="button"
id="button-addon2"
data-toggle="modal"
data-target="#hierarchyCode"
>
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
<div class="col-3">
<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_HIERARCHYCODE3 }}</label>
<div class="input-group mb-3">
<input
type="text"
class="form-control form-control-sm"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="button-addon2"
/>
<div class="input-group-append">
<button
class="btn btn-sm btn-outline-secondary"
type="button"
id="button-addon2"
data-toggle="modal"
data-target="#hierarchyCode"
>
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</b-container>
</b-tab>
<b-tab title="Finance">
<b-container fluid class="bv-example-row mb-3">
<div
class="tab-pane fade show active pt-4"
id="nav-credit"
role="tabpanel"
aria-labelledby="nav-credit-tab"
>
<div class="row">
<div class="col-6">
<div class="outlet-section">
<h5 class="mb-3">Tax Details</h5>
<div class="row m-0">
<div class="form-group col-6 mb-0">
<input
type="checkbox"
class="form-check-input"
id="my-checkbox"
v-model="outletDataJson.TCS_Status"
/>
<label class="form-check-label" for="exampleCheck1">{{ $t('Auditlog.TCS_Status') }}</label>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">TCS SalesAmount</label>
<input
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
/>
</div>
</div>
<div class="row">
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.taxtype') }}</label>
<select
type="text"
class="form-control form-control-sm"
v-bind="enableInput('OUTLET_TAXTYPE')"
v-model="outletDataJson.TaxType"
>
<option value=""></option>
<option value="1">NON-VAT (1)</option>
<option value="0">VAT (0)</option>
</select>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.tinnumber') }}</label>
<input
type="text"
class="form-control form-control-sm"
v-bind="enableInput('OUTLET_TINNUMBER')"
value=""
maxlength="50"
v-model="outletDataJson.TINNumber"
/>
</div>
</div>
<div class="row">
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.gstnumber') }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="50"
v-bind="enableInput('OUTLET_GSTNUMBER')"
v-model="outletDataJson.GSTNumber"
/>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.pancardnumber') }}</label>
<input
type="text"
class="form-control form-control-sm"
v-bind="enableInput('OUTLET_PANCARDNUMBER')"
v-model="outletDataJson.PANCardNumber"
/>
</div>
</div>
<div class="row">
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.gstregistrationtype') }}</label>
<select
type="text"
class="form-control form-control-sm"
v-bind="enableInput('OUTLET_GSTREGISTRATIONTYPE')"
v-model="outletDataJson.GSTRegistrationType"
>
<option value=""></option>
<option value="0">Unregistered</option>
<option value="1">Registered</option>
<option value="2">Composite</option>
</select>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.taxregioncode') }}</label>
<select
type="text"
class="form-control form-control-sm"
v-bind="enableInput('OUTLET_STATEID')"
v-model="outletDataJson.StateID"
>
<option value=""></option>
<option
v-for="(option, index) in taxRegionDropDownValues"
:key="index"
:value="option.StateID"
>{{ option.StateName + '(' + option.StateCode + ')' }}></option
>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-6">
<label for="exampleFormControlInput1">TaxAdminOffice</label>
<input
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
/>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">e Inovice Enabled</label>
<input
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
/>
</div>
</div>
<div class="row">
<div class="form-group col-6">
<label for="exampleFormControlInput1">E invoice PK alias Email id </label>
<input
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
/>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.taxnumber') }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="50"
v-bind="enableInput('OUTLET_TAXNUMBER')"
v-model="outletDataJson.TaxNumber"
/>
</div>
</div>
<div class="row">
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.istaxable') }}</label>
<input
type="text"
class="form-control form-control-sm"
v-bind="enableInput('OUTLET_ISTAXABLE')"
v-model="outletDataJson.IsTaxable"
/>
</div>
<div class="form-group col-6">
<label for="exampleFormControlInput1">{{ $t('outlet.cstnumber') }}</label>
<input
type="text"
class="form-control form-control-sm"
maxlength="50"
v-bind="enableInput('OUTLET_CSTNUMBER')"
v-model="outletDataJson.CSTNumber"
/>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="outlet-section">
<h5 class="mb-3">Credit details</h5>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="exampleFormControlInput1">Deposit Amt</label>
<input
type="number"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
onkeypress="return validateRegex(event);"
/>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="exampleFormControlInput1">{{ $t('outlet.creditlimit') }}</label>
<input
type="number"
class="form-control form-control-sm"
v-model="outletDataJson.CreditLimit"
onkeypress="return validateRegex(event);"
maxlength="25"
/>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="exampleFormControlInput1">{{ $t('outlet.totalnumberofinvoices') }}</label>
<input
type="number"
class="form-control form-control-sm"
id="txtCreditLimit"
onkeypress="return validateRegex(event);"
v-model="outletDataJson.TotalNumberofInvoices"
maxlength="25"
/>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="exampleFormControlInput1">{{ $t('outlet.totaldaysofinvoices') }}</label>
<input
type="number"
class="form-control form-control-sm"
id="txtTotalNumberofInvoices"
onkeypress="return validateRegex(event);"
v-model="outletDataJson.TotalDaysOfInvoices"
maxlength="25"
/>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-check col-6" style="margin: 1rem 0rem 2.5rem 0.5rem">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1"
name="chkBlocked"
v-model="outletDataJson.Blocked"
style="border:none"
/>
<label class="form-check-label" for="exampleCheck1">{{ $t('outlet.blocked') }}</label>
</div>
<div class="col-6">
<div class="form-group">
<label for="exampleFormControlInput1">Credit Intradays</label>
<input
type="number"
class="form-control form-control-sm"
id="exampleFormControlInput1"
onkeypress="return validateRegex(event);"
placeholder=""
/>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="exampleFormControlInput1">{{ $t('outlet.InvoiceCreditLimit') }}</label>
<input
type="number"
class="form-control form-control-sm"
onkeypress="return validateRegex(event);"
v-model="outletDataJson.InvoiceCreditLimit"
maxlength="25"
/>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="exampleFormControlInput1">{{ $t('outlet.collimit') }}</label>
<input
type="number"
class="form-control form-control-sm"
onkeypress="return validateRegex(event);"
v-model="outletDataJson.COLLimit"
maxlength="25"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</b-container>
</b-tab>
<b-tab title="Others">
<b-container fluid class="bv-example-row mb-3">
<div
class="tab-pane fade show active pt-4"
id="nav-other"
role="tabpanel"
aria-labelledby="nav-other-tab"
>
<div class="row">
<div class="col-6">
<div class="outlet-section">
<h5 class="mb-3">General information</h5>
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-12">
<div class="form-group form-check" style="margin: 1rem 0rem 2.5rem 0rem">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1"
v-bind="enableInput('OUTLET_RELATEDPARTY')"
v-model="outletDataJson.RelatedParty"
/>
<label class="form-check-label" for="exampleCheck1">{{
$t('outlet.relatedparty')
}}</label>
</div>
</div>
<div class="col-12">
<div class="form-group form-check" style="margin: 1rem 0rem 2.5rem 0rem">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1"
v-bind="enableInput('OUTLET_ENABLEOMS')"
v-model="outletDataJson.EnableOMS"
/>
<label class="form-check-label" for="exampleCheck1">{{ $t('outlet.enableoms') }}</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group form-check" style="margin: 1rem 0rem 2.5rem 0rem">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1"
v-bind="enableInput('OUTLET_ISOUTLETOWNERFEMALE')"
style="border:none;"
v-model="outletDataJson.IsOutletOwnerFemale"
/>
<label class="form-check-label" for="exampleCheck1">{{
$t('outlet.isoutletownerfemale')
}}</label>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="exampleFormControlInput1">{{ $t('outlet.runrate') }}</label>
<input
type="number"
class="form-control form-control-sm"
v-bind="enableInput('OUTLET_RUNRATE')"
onkeypress="return validateRegex(event);"
maxlength="10"
v-model="outletDataJson.RunRate"
/>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="exampleFormControlInput1">{{ $t('common.notes') }}</label>
<textarea
type="text"
class="form-control form-control-sm"
v-bind="enableInput('OUTLET_NOTES')"
id="txtNotes"
rows="2"
v-model="outletDataJson.Notes"
>
</textarea>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="exampleFormControlInput1">{{ $t('outlet.dayoff') }}</label>
<select
type="text"
class="form-control form-control-sm"
value=""
v-bind="enableInput('OUTLET_DAYOFF')"
v-model="outletDataJson.DayOff"
>
<option value="SUNDAY" selected="selected">SUNDAY</option>
<option value="MONDAY">MONDAY</option>
<option value="TUESDAY">TUESDAY</option>
<option value="WEDNESDAY">WEDNESDAY</option>
<option value="THURSDAY">THURSDAY</option>
<option value="FRIDAY">FRIDAY</option>
<option value="SATURDAY">SATURDAY</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="exampleFormControlInput1">{{ $t('outlet.coverage') }}</label>
<select
type="text"
class="form-control form-control-sm"
value=""
v-bind="enableInput('OUTLET_COVERAGE')"
v-model="outletDataJson.Coverage"
>
<option value="Bi-weekly" selected="selected">Bi-weekly</option>
<option value="Daily">Daily</option>
<option value="Fortnightly">Fortnightly</option>
<option value="WEEKLY">WEEKLY</option>
</select>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="exampleFormControlInput1">Avg Turn Over</label>
<input
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
v-model="outletDataJson.AverageTurnOver"
/>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="exampleFormControlInput1">{{ $t('outlet.dateofregistration') }}</label>
<div id="wrapper">
<ejs-datetimepicker
id="datetimepicker"
:placeholder="waterMarkText"
:value="date"
:format="dateFormat"
v-model="outletDataJson.DateofRegistration"
></ejs-datetimepicker>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="exampleFormControlInput1">{{ $t('outlet.dateofbirth') }}</label>
<div id="wrapper">
<ejs-datetimepicker
id="datetimepicker"
:placeholder="waterMarkText"
:value="date"
:format="dateFormat"
v-model="outletDataJson.DateofBirth"
></ejs-datetimepicker>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="exampleFormControlInput1">Aniversary date</label>
<ejs-datetimepicker
id="datetimepicker"
:placeholder="waterMarkText"
:value="date"
:format="dateFormat"
v-model="outletDataJson.AnniversaryDate"
></ejs-datetimepicker>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="exampleFormControlInput1">{{ $t('outlet.divisionid') }}</label>
<select
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
v-model="outletDataJson.DivisionID"
>
<option
v-for="(option, index) in divisionDataDropDownValues"
:key="index"
:value="option.IDNumber"
>{{ option.CodeAndDesc }}</option
>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="outlet-section">
<h5 class="mb-3">Messages</h5>
<div class="row">
<div class="col-12">
<label for="exampleFormControlInput1">{{ $t('outlet.messagekey1') }}</label>
<div class="input-group mb-3">
<select
type="text"
class="form-control form-control-sm mr-2"
placeholder="Recipient's username"
v-model="outletDataJson.MessageKey1"
v-bind="enableInput('OUTLET_MESSAGEKEY1')"
>
<option v-for="(option, index) in outletMessageKey1" :key="index" :value="option.ID">
{{option.MessageText}}
</option>
</select>
<div class="input-group-append">
<button
class="btn btn-outline-secondary btn-sm"
type="button"
id="button-addon2"
data-toggle="modal"
data-target="#exampleModal"
@click="openModal(1)"
>
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<label for="exampleFormControlInput1">{{ $t('outlet.messagekey2') }}</label>
<div class="input-group mb-3">
<select
type="text"
class="form-control form-control-sm mr-2"
placeholder="Recipient's username"
v-model="outletDataJson.MessageKey2"
v-bind="enableInput('OUTLET_MESSAGEKEY2')"
>
<option v-for="(option, index) in outletMessageKey2" :key="index" :value="option.ID">
{{option.MessageText}}
</option>
</select>
<div class="input-group-append">
<button
class="btn btn-outline-secondary btn-sm"
type="button"
id="button-addon2"
data-toggle="modal"
data-target="#exampleModal"
@click="openModal(2)"
>
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<label for="exampleFormControlInput1">{{ $t('outlet.messagekey3') }}</label>
<div class="input-group mb-3">
<select
type="text"
class="form-control form-control-sm mr-2"
placeholder="Recipient's username"
v-model="outletDataJson.MessageKey3"
v-bind="enableInput('OUTLET_MESSAGEKEY3')"
>
<option v-for="(option, index) in outletMessageKey3" :key="index" :value="option.ID">
{{option.MessageText}}
</option>
</select>
<div class="input-group-append">
<button
class="btn btn-outline-secondary btn-sm"
type="button"
id="button-addon2"
data-toggle="modal"
data-target="#exampleModal"
@click="openModal(3)"
>
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<label for="exampleFormControlInput1">{{ $t('outlet.messagekey4') }}</label>
<div class="input-group mb-3">
<select
type="text"
class="form-control form-control-sm mr-2"
placeholder="Recipient's username"
v-model="outletDataJson.MessageKey4"
v-bind="enableInput('OUTLET_MESSAGEKEY4')"
>
<option v-for="(option, index) in outletMessageKey4" :key="index" :value="option.ID">
{{option.MessageText}}
</option>
</select>
<div class="input-group-append">
<button
class="btn btn-outline-secondary btn-sm"
type="button"
id="button-addon2"
data-toggle="modal"
data-target="#exampleModal"
@click="openModal(4)"
>
<i class="fas fa-plus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="outlet-section">
<h5 class="mb-3">License</h5>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="exampleFormControlInput1">Drug License</label>
<input
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
/>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="exampleFormControlInput1">Drug License Exp</label>
<input
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
/>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="exampleFormControlInput1">Insecticide License</label>
<input
type="text"
class="form-control form-control-sm"
id="exampleFormControlInput1"
placeholder=""
/>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="exampleFormControlInput1">Insecticide License Exp</label>
<ejs-datetimepicker
id="datetimepicker"
:placeholder="waterMarkText"
:value="date"
:format="dateFormat"
v-bind="enableInput('OUTLET_LICENSEEXPIRYDATE')"
v-model="outletDataJson.LicenseExpiryDate"
></ejs-datetimepicker>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</b-container>
</b-tab>
<!-- Render Tabs, supply a unique `key` to each tab -->
<!-- <b-tab v-for="i in tabs" :key="'dyn-tab-' + i" :title="'Tab ' + i">
Tab contents {{ i }}
<b-button size="sm" variant="danger" class="float-right" @click="closeTab(i)">
Close tab
</b-button>
</b-tab> -->
<!-- New Tab Button (Using tabs-end slot) -->
<!-- <template #tabs-end>
<b-nav-item role="presentation" @click.prevent="newTab" rel='nofollow' href="#"><b>+</b></b-nav-item>
</template> -->
<!-- Render this if no tabs -->
<!-- <template #empty>
<div class="text-center text-muted">
There are no open tabs<br />
Open a new tab using the <b>+</b> button above.
</div>
</template> -->
</b-tabs>
</b-card>
</div>
<div v-if="hierarchyModal">
<div
id="postedpanel_divFilter"
class="ck-popup"
style="top: 505px; right: 270px; width: 325px; height: 400px; overflow: scroll;"
>
<div class="mb-2 d-flex">
<button type="button" class="close" style="margin-left:18rem;" @click="hierarchyModal = !hierarchyModal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="control_wrapper">
<ejs-treeview id='treeview' :fields="fields" :showCheckBox='true' :nodeChecked='nodeChecked'></ejs-treeview>
</div>
</div>
</div>
<orderstatus-modal ref="orderStatusModal" @outletStatusChanged="outletStatusChanged"></orderstatus-modal>
<commonmastermodal ref="commonmasterRef" @callCommonMasterdata="callCommonMasterdata"></commonmastermodal>
</div>
</template>
<script>
import Vue from 'vue'
import api from '../service'
import orderstatusModal from './orderstatusModal.vue'
import commonmastermodal from './commonmastermodal.vue'
import { DateTimePickerPlugin } from '@syncfusion/ej2-vue-calendars'
import { TreeViewPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(TreeViewPlugin);
Vue.use(DateTimePickerPlugin)
export default {
components: { orderstatusModal, commonmastermodal },
name: 'OutletForm',
props: ['pageConfigRes', 'outletId', 'mode', 'editModeJson','customerHierarchyForFilter'],
data() {
return {
fields: { dataSource: [], id:'ParentID',level: 'HierarchyLevel', code: 'HierarchyCode', parentID: 'HierarchyID', text: 'HierarchyName', child: 'subChild' },
outletlabels: {},
waterMarkText: 'Select a date and time',
dateFormat: 'dd-MMM-yyyy',
date: new Date(),
outletDataJson: {
Address1: '',
Address2: '',
Address3: '',
Address4: '',
AllowCustomerCode: '1',
AlternateAddress1: '',
AlternateAddress2: '',
AlternateAddress3: '',
AnniversaryDate: '',
AprovalStatus: 0,
Attribute1: '',
Attribute2: '',
Attribute3: '',
Attribute4: '',
Attribute5: '',
Attribute6: '',
Attribute7: '',
Attribute8: '',
Attribute9: '',
Attribute10: '',
AuthorizedItemListKey: '',
AverageTurnOver: '',
BankID1: '',
BankID2: '',
BarcodeCheckDigit: '',
BillToCustomer: '',
Blocked: 0,
BranchID1: '',
BranchID2: '',
COLLimit: '',
CSTNumber: '',
CalculatedAttribute1: '',
CalculatedAttribute2: '',
CalculatedAttribute3: '',
CalculatedAttribute4: '',
CalculatedAttribute5: '',
CalculatedAttribute6: '',
CalculatedAttribute7: '',
CalculatedAttribute8: '',
CalculatedAttribute9: '',
CalculatedAttribute10: '',
CashDiscountPerc: '',
CategoryCode1: '',
CategoryCode2: '',
CategoryCode3: '',
CategoryCode4: '',
CategoryCode5: '',
CategoryCode6: '',
CategoryCode7: '',
CategoryCode8: '',
CategoryCode9: '',
CategoryCode10: '',
City: '',
ContactPerson: '',
Coverage: 'Bi-weekly',
CreditLimit: '0',
CstID: 0,
CustomerBalanceDue: '',
CustomerCode: '',
CustomerID: 0,
CustomerName: 'Sample outlet',
CustomerNameA: '',
CustomerPriceLevel: '',
CustomerPricingKey: '',
// CustomerPrincipleCode: '',
DateofBirth: '',
DateofRegistration: '',
DayOff: 'SUNDAY',
DepositAmount: '',
DivisionID: 9,
Email: '',
EnableOMS: 0,
Fax: '',
GSTNumber: '',
GSTRegistrationType: '',
GeoCodeX: '0',
GeoCodeY: '0',
HierarchyCode: '',
HierarchyCode1: '',
HierarchyCode2: '',
HierarchyCode3: '',
IntradayCreditLimit: '',
InvoiceCreditLimit: '',
IsActive: 1,
IsBillable: 0,
IsChild: 0,
IsOutletOwnerFemale: 0,
IsTaxable: 1,
LicenseExpiryDate: '',
LicenseExpiryDate1: '',
LicenseExpiryDate2: '',
LicenseNumber: '',
LicenseNumber1: '',
LicenseNumber2: '',
LoyaltyPoints: '0',
MarginPerc: '',
MessageKey1: '',
MessageKey2: '',
MessageKey3: '',
MessageKey4: '',
Mobile: '',
Notes: '',
OfficeAccount: 0,
OwnerName: '',
// OutletType: '',
PANCardNumber: '',
PaymentType: 0,
Phone: '',
RelatedParty: 0,
ReturnPromotionkey: '',
RouteKey: 0,
RunRate: '',
SalesGroupCode: '',
SalesMode: 0,
SalesPromotionKey: '',
SevicedByOutlet: 0,
ShipCity: '',
ShipState: '',
ShipZip: '',
State: '',
StateID: '',
SurveyKey: '',
TINNumber: '',
TaxID: null,
TaxNumber: '',
TaxRegionCode: '',
TaxType: 1,
TCS_Status: 0,
Telephone: '',
TemplateID: '',
TerritoryHierarchy: '',
TotalDaysOfInvoices: '',
TotalNumberofInvoices: '',
TradeIDNumber: '',
Website: '',
Zip: '',
cache: false
},
CustomerCategory: [],
authorizedProductDropDownValues: [],
pricingDropDownValues: [],
taxRegionDropDownValues: [],
divisionDataDropDownValues: [],
commonMasterDataMsg:[],
customerDataMessageKey:[],
outletMessageKey1:[],
outletMessageKey2: [],
outletMessageKey3: [],
outletMessageKey4:[],
hierarchyModal:false,
filteredData: []
}
},
mounted() {
if (this.outletId) {
this.getOutletDetails()
}
},
methods: {
nodeChecked: function() {
var treeObj = document.getElementById('treeview').ej2_instances[0];
console.log("The checked node's id: " + treeObj.checkedNodes)
// let attachedString = []
// let arraylist = (treeObj.checkedNodes.toString()).split(',')
// arraylist.map((item)=>{
// this.filteredData.map((data)=>{
// if(data.id == item && data.pid != undefined){
// attachedString.push(data.pid + ' ' + item + ' ')
// }else if(data.id == item){
// attachedString.push(item + ' ')
// }
// })
// })
// console.log("after concating the parent: " + attachedString.toString())
// const client = api()
// client
// .get('customer', {
// params: {
// _search: false,
// nd: new Date().getTime(),
// rows: 100,
// page: 1,
// sidx: 'CustomerName',
// sord: 'asc',
// hierarchylist: attachedString.toString(),
// NotINhierarchylist: false,
// _: new Date().getTime(),
// requesttype: 0,
// }
// })
// .then(response => {
// console.log(response.data)
// })
// .catch(error => {
// console.error(error)
// })
// .finally(() => {
// console.log('executing finally!')
// })
},
hierarchyDataSource() {
var data = [];
if (this.customerHierarchyForFilter) {
this.customerHierarchyForFilter.map((row)=> {
if (row.HierarchyLevel == 1) {
data.push({ HierarchyCode: row.HierarchyCode, HierarchyID: row.HierarchyID, HierarchyName: row.HierarchyName, ParentID: row.ParentID,HierarchyLevel: row.HierarchyLevel });
}
else if (row.HierarchyLevel == 2) {
if (data.length > 0) {
if (!data[data.length - 1].subChild)
data[data.length - 1].subChild = [];
data[data.length - 1].subChild.push({ HierarchyCode: row.HierarchyCode, HierarchyID: row.HierarchyID, HierarchyName: row.HierarchyName, ParentID: row.ParentID, HierarchyLevel: row.HierarchyLevel });
}
}
else {
var obj = data[data.length - 1];
if (obj != undefined) {
for (var i = 1; i < row.HierarchyLevel; i++) {
if (i != row.HierarchyLevel - 1) {
if (obj.subChild) {
obj = obj.subChild[obj.subChild.length - 1];
}
}
else {
if (obj.subChild) {
obj = obj.subChild
}
else {
obj = obj.subChild = [];
}
}
}
obj.push({ HierarchyCode: row.HierarchyCode, HierarchyID: row.HierarchyID, HierarchyName: row.HierarchyName, ParentID: row.ParentID, HierarchyLevel: row.HierarchyLevel });
}
}
});
}
this.fields.dataSource = data;
},
// this.filteredData = []
// let splitpids = []
// let level1 = []
// let level2 = []
// let level3 = []
// this.customerHierarchyForFilter.map((item1)=>{
// if(item1.HierarchyLevel == 1){
// level1.push(item1)
// }
// if(item1.HierarchyLevel == 2){
// level2.push(item1)
// }
// if(item1.HierarchyLevel == 3){
// level3.push(item1)
// }
// })
// // console.log("levels are",level1,level2,level3)
// level3.map((child1)=>{
// splitpids = child1.ParentID.split(' ')
// // console.log("splitpids--->",splitpids)
// level2.map((ch)=>{
// if((splitpids[7] != "DHABARASHIGHAZIABADR" && splitpids[7] != "DHABARASHIGHAZIABAD") && (ch.HierarchyCode == splitpids[1]) || (ch.HierarchyCode == splitpids[2]) || (ch.HierarchyCode == splitpids[3]) || (ch.HierarchyCode == splitpids[4]) || (ch.HierarchyCode == splitpids[5]) || (ch.HierarchyCode == splitpids[6]) || (ch.HierarchyCode == splitpids[7]) || (ch.HierarchyCode == splitpids[8])){
// console.log("level2 subchild")
// if(ch.subChild == undefined){
// ch.subChild = []
// }
// ch.subChild.push(child1)
// }
// })
// })
// level2.map((child1)=>{
// splitpids = child1.ParentID.split(' ')
// level1.map((ch)=>{
// if(ch.HierarchyCode == splitpids[0]){
// // console.log("level1 subchild")
// if(ch.subChild == undefined){
// ch.subChild = []
// }
// ch.subChild.push(child1)
// }
// })
// })
// console.log("level 1--->",level1)
// this.customerHierarchyForFilter.map((item)=>{
// let json = {}
// json.id = item.HierarchyCode
// json.name = item.HierarchyName
// if(item.HierarchyLevel == 1 && item.ParentID){
// json.hasChild = true
// } else if(item.HierarchyLevel == 2 && item.ParentID){
// json.hasChild = true
// let text = item.ParentID
// let myArray = text.split(" ");
// if(isNaN(parseInt(myArray[0])) === true){
// let parentId = myArray[0].split(item.HierarchyCode);
// json.pid = parentId[0]
// }else {
// json.pid = parseInt(myArray[0])
// }
// }
// this.filteredData.push(json)
// })
// this.fields.dataSource = level1
openHierarchyStructure() {
this.hierarchyModal = true
this.hierarchyDataSource()
},
changeCheckBoxValue(){
// check if checkbox is checked
if (document.querySelector('#my-checkbox').checked) {
// if checked
this.outletDataJson.TCS_Status = 1
} else {
// if unchecked
this.outletDataJson.TCS_Status = 0
}
},
validateRegex(e) {
var keyCode = e.keyCode || e.which;
var regex = /(^-?0\.[0-9]*[1-9]+[0-9]*$)|(^-?[1-9]+[0-9]*((\.[0-9]*[1-9]+[0-9]*$)|(\.[0-9]+)))|(^-?[1-9]+[0-9]*$)|(^0$){1}/
var isValid = regex.test(String.fromCharCode(keyCode));
return isValid;
},
openModal(n) {
this.commonmasterData()
this.commonmasterModelData(n)
setTimeout(() => {
this.$refs.commonmasterRef.openCommonMastermodal(this.commonMasterDataMsg,n)
},500)
},
callCommonMasterdata(index) {
this.commonmasterModelData(index)
this.getCustomerMasterdata()
},
getCustomerMasterdata() {
this.outletMessageKey1 = []
this.outletMessageKey2 = []
this.outletMessageKey3 = []
this.outletMessageKey4 = []
const client = api()
client
.get('customer', {
params: {
requesttype: 4,
_: new Date().getTime()
}
})
.then(response => {
this.customerDataMessageKey = response.data.MessageKey
if(this.customerDataMessageKey) {
this.customerDataMessageKey.map((msg)=>{
if(msg.MessageTypeCode == 1) {
this.outletMessageKey1.push(msg)
}
if(msg.MessageTypeCode == 2) {
this.outletMessageKey2.push(msg)
}
if(msg.MessageTypeCode == 3) {
this.outletMessageKey3.push(msg)
}
if(msg.MessageTypeCode == 4) {
this.outletMessageKey4.push(msg)
}
})
}
})
.catch(error => {
console.error(error)
})
.finally(() => {
console.log('executing finally!')
})
},
commonmasterData() {
const client = api()
client
.get('commonmaster' + '/' + 8, {
params: {
_: new Date().getTime()
}
})
.then(response => {
console.log(response.data)
})
.catch(error => {
console.error(error)
})
.finally(() => {
console.log('executing finally!')
})
},
commonmasterModelData(keyIndex) {
const client = api()
client
.get('commonmaster' + '/' + keyIndex, {
params: {
_search: false,
nd: 1635332692319,
rows: 100,
page: 1,
sidx: 'Code',
sord: 'asc',
_: 1635332692319,
requesttype: 0,
BankID:'',
}
})
.then(response => {
this.commonMasterDataMsg = response.data.CommonMasterList
this.$refs.commonmasterRef.updateTableData(response.data.CommonMasterList)
})
.catch(error => {
console.error(error)
})
.finally(() => {
console.log('executing finally!')
})
},
changeOutletStatus() {
this.$refs.orderStatusModal.openOutletStatusModal()
},
outletStatusChanged() {
const client = api()
let customerId = this.outletId
console.log('while changing outlet status-->', this.outletId)
client
.put('customer' + '/' + customerId, this.outletDataJson)
.then(response => {
console.log(response.data)
})
.catch(error => {
console.error(error)
})
.finally(() => {
console.log('executing finally!')
})
},
getOutletDetails() {
const client = api()
let customerId = this.outletId
client
.get('customer' + '/' + customerId, {
params: {
requesttype: 6,
_: new Date().getTime()
}
})
.then(response => {
this.fetchOutletDetails(response.data.CustomerMaster[0])
})
.catch(error => {
console.error(error)
})
.finally(() => {
console.log('executing finally!')
})
},
fetchOutletDetails(editJson) {
let vm = this
vm.outletDataJson.Address1 = editJson.Address1 ? editJson.Address1 : ''
vm.outletDataJson.Address2 = editJson.Address2 ? editJson.Address2 : ''
vm.outletDataJson.Address3 = editJson.Address3 ? editJson.Address3 : ''
vm.outletDataJson.Address4 = editJson.Address4 ? editJson.Address4 : ''
vm.outletDataJson.AllowCustomerCode = editJson.AllowCustomerCode ? editJson.AllowCustomerCode : '1'
vm.outletDataJson.AlternateAddress1 = editJson.AlternateAddress1 ? editJson.AlternateAddress1 : ''
vm.outletDataJson.AlternateAddress2 = editJson.AlternateAddress2 ? editJson.AlternateAddress2 : ''
vm.outletDataJson.AlternateAddress3 = editJson.AlternateAddress3 ? editJson.AlternateAddress3 : ''
vm.outletDataJson.AnniversaryDate = editJson.AnniversaryDate ? editJson.AnniversaryDate : ''
vm.outletDataJson.AprovalStatus = editJson.AprovalStatus ? editJson.AprovalStatus : 0
vm.outletDataJson.Attribute1 = editJson.Attribute1 ? editJson.Attribute1 : ''
vm.outletDataJson.Attribute2 = editJson.Attribute2 ? editJson.Attribute2 : ''
vm.outletDataJson.Attribute3 = editJson.Attribute3 ? editJson.Attribute3 : ''
vm.outletDataJson.Attribute4 = editJson.Attribute4 ? editJson.Attribute4 : ''
vm.outletDataJson.Attribute5 = editJson.Attribute5 ? editJson.Attribute5 : ''
vm.outletDataJson.Attribute6 = editJson.Attribute6 ? editJson.Attribute6 : ''
vm.outletDataJson.Attribute7 = editJson.Attribute7 ? editJson.Attribute7 : ''
vm.outletDataJson.Attribute8 = editJson.Attribute8 ? editJson.Attribute8 : ''
vm.outletDataJson.Attribute9 = editJson.Attribute9 ? editJson.Attribute9 : ''
vm.outletDataJson.Attribute10 = editJson.Attribute10 ? editJson.Attribute10 : ''
vm.outletDataJson.AuthorizedItemListKey = editJson.AuthorizedItemListKey ? editJson.AuthorizedItemListKey : ''
vm.outletDataJson.AverageTurnOver = editJson.AverageTurnOver ? editJson.AverageTurnOver : ''
vm.outletDataJson.BankID1 = editJson.BankID1 ? editJson.BankID1 : ''
vm.outletDataJson.BankID2 = editJson.BankID2 ? editJson.BankID2 : ''
vm.outletDataJson.BarcodeCheckDigit = editJson.BarcodeCheckDigit ? editJson.BarcodeCheckDigit : ''
vm.outletDataJson.BillToCustomerByNameByName = editJson.BillToCustomerByNameByName ? editJson.BillToCustomer : ''
vm.outletDataJson.Blocked = editJson.Blocked ? editJson.Blocked : 0
vm.outletDataJson.BranchID1 = editJson.BranchID1 ? editJson.BranchID1 : ''
vm.outletDataJson.BranchID2 = editJson.BranchID2 ? editJson.BranchID2 : ''
vm.outletDataJson.COLLimit = editJson.COLLimit ? editJson.COLLimit : ''
vm.outletDataJson.CSTNumber = editJson.CSTNumber ? editJson.CSTNumber : ''
vm.outletDataJson.CalculatedAttribute1 = editJson.CalculatedAttribute1 ? editJson.CalculatedAttribute1 : ''
vm.outletDataJson.CalculatedAttribute2 = editJson.CalculatedAttribute2 ? editJson.CalculatedAttribute2 : ''
vm.outletDataJson.CalculatedAttribute3 = editJson.CalculatedAttribute3 ? editJson.CalculatedAttribute3 : ''
vm.outletDataJson.CalculatedAttribute4 = editJson.CalculatedAttribute4 ? editJson.CalculatedAttribute4 : ''
vm.outletDataJson.CalculatedAttribute5 = editJson.CalculatedAttribute5 ? editJson.CalculatedAttribute5 : ''
vm.outletDataJson.CalculatedAttribute6 = editJson.CalculatedAttribute6 ? editJson.CalculatedAttribute6 : ''
vm.outletDataJson.CalculatedAttribute7 = editJson.CalculatedAttribute7 ? editJson.CalculatedAttribute7 : ''
vm.outletDataJson.CalculatedAttribute8 = editJson.CalculatedAttribute8 ? editJson.CalculatedAttribute8 : ''
vm.outletDataJson.CalculatedAttribute9 = editJson.CalculatedAttribute9 ? editJson.CalculatedAttribute9 : ''
vm.outletDataJson.CalculatedAttribute10 = editJson.CalculatedAttribute10 ? editJson.CalculatedAttribute10 : ''
vm.outletDataJson.CashDiscountPerc = editJson.CashDiscountPerc ? editJson.CashDiscountPerc : ''
vm.outletDataJson.CategoryCode1 = editJson.CategoryCode1 ? editJson.CategoryCode1 : ''
vm.outletDataJson.CategoryCode2 = editJson.CategoryCode2 ? editJson.CategoryCode2 : ''
vm.outletDataJson.CategoryCode3 = editJson.CategoryCode3 ? editJson.CategoryCode3 : ''
vm.outletDataJson.CategoryCode4 = editJson.CategoryCode4 ? editJson.CategoryCode4 : ''
vm.outletDataJson.CategoryCode5 = editJson.CategoryCode5 ? editJson.CategoryCode5 : ''
vm.outletDataJson.CategoryCode6 = editJson.CategoryCode6 ? editJson.CategoryCode6 : ''
vm.outletDataJson.CategoryCode7 = editJson.CategoryCode7 ? editJson.CategoryCode7 : ''
vm.outletDataJson.CategoryCode8 = editJson.CategoryCode8 ? editJson.CategoryCode8 : ''
vm.outletDataJson.CategoryCode9 = editJson.CategoryCode9 ? editJson.CategoryCode9 : ''
vm.outletDataJson.CategoryCode10 = editJson.CategoryCode10 ? editJson.CategoryCode10 : ''
vm.outletDataJson.City = editJson.City ? editJson.City : ''
vm.outletDataJson.ContactPerson = editJson.ContactPerson ? editJson.ContactPerson : ''
vm.outletDataJson.Coverage = editJson.Coverage ? editJson.Coverage : 'Bi-weekly'
vm.outletDataJson.CreditLimit = editJson.CreditLimit ? editJson.CreditLimit : '0'
vm.outletDataJson.CstID = editJson.CstID ? editJson.CstID : 0
vm.outletDataJson.CustomerBalanceDue = editJson.CustomerBalanceDue ? editJson.CustomerBalanceDue : ''
vm.outletDataJson.CustomerCode = editJson.CustomerCode ? editJson.CustomerCode : ''
vm.outletDataJson.CustomerID = editJson.CustomerID ? editJson.CustomerID : 0
vm.outletDataJson.CustomerName = editJson.CustomerName ? editJson.CustomerName : ''
vm.outletDataJson.CustomerNameA = editJson.CustomerNameA ? editJson.CustomerNameA : ''
vm.outletDataJson.CustomerPriceLevel = editJson.CustomerPriceLevel ? editJson.CustomerPriceLevel : ''
vm.outletDataJson.CustomerPricingKey = editJson.CustomerPricingKey ? editJson.CustomerPricingKey : ''
// vm.outletDataJson.CustomerPrincipleCode = editJson.CustomerPrincipleCode ? editJson.CustomerPrincipleCode : ''
vm.outletDataJson.DateofBirth = editJson.DateofBirth ? editJson.DateofBirth : ''
vm.outletDataJson.DateofRegistration = editJson.DateofRegistration ? editJson.DateofRegistration : ''
vm.outletDataJson.DayOff = editJson.DateofRegistration ? editJson.DateofRegistration : 'SUNDAY'
vm.outletDataJson.DepositAmount = editJson.DepositAmount ? editJson.DepositAmount : ''
vm.outletDataJson.DivisionID = editJson.DivisionID ? editJson.DivisionID : 9
vm.outletDataJson.Email = editJson.Email ? editJson.Email : ''
vm.outletDataJson.EnableOMS = editJson.EnableOMS ? editJson.EnableOMS : 0
vm.outletDataJson.Fax = editJson.Fax ? editJson.Fax : ''
vm.outletDataJson.GSTNumber = editJson.GSTNumber ? editJson.GSTNumber : ''
vm.outletDataJson.GSTRegistrationType = editJson.GSTRegistrationType ? editJson.GSTRegistrationType : ''
vm.outletDataJson.GeoCodeX = editJson.GeoCodeX ? editJson.GeoCodeX : '0'
vm.outletDataJson.GeoCodeY = editJson.GeoCodeY ? editJson.GeoCodeY : '0'
vm.outletDataJson.HierarchyCode = editJson.HierarchyCode ? editJson.HierarchyCode : ''
vm.outletDataJson.HierarchyCode1 = editJson.HierarchyCode1 ? editJson.HierarchyCode1 : ''
vm.outletDataJson.HierarchyCode2 = editJson.HierarchyCode2 ? editJson.HierarchyCode2 : ''
vm.outletDataJson.HierarchyCode3 = editJson.HierarchyCode3 ? editJson.HierarchyCode3 : ''
vm.outletDataJson.IntradayCreditLimit = editJson.IntradayCreditLimit ? editJson.IntradayCreditLimit : ''
vm.outletDataJson.InvoiceCreditLimit = editJson.InvoiceCreditLimit ? editJson.InvoiceCreditLimit : ''
vm.outletDataJson.IsActive = editJson.IsActive ? editJson.IsActive : 1
vm.outletDataJson.IsBillable = editJson.IsBillable ? editJson.IsBillable : 0
vm.outletDataJson.IsChild = editJson.IsChild ? editJson.IsChild : 0
vm.outletDataJson.IsOutletOwnerFemale = editJson.IsOutletOwnerFemaleIsOutletOwnerFemale ? editJson.IsChild : 0
vm.outletDataJson.IsTaxable = editJson.IsTaxable ? editJson.IsTaxable : 1
vm.outletDataJson.LicenseExpiryDate = editJson.LicenseExpiryDate ? editJson.LicenseExpiryDate : ''
vm.outletDataJson.LicenseExpiryDate1 = editJson.LicenseExpiryDate1 ? editJson.LicenseExpiryDate1 : ''
vm.outletDataJson.LicenseExpiryDate2 = editJson.LicenseExpiryDate2 ? editJson.LicenseExpiryDate2 : ''
vm.outletDataJson.LicenseNumber = editJson.LicenseNumber ? editJson.LicenseNumber : ''
vm.outletDataJson.LicenseNumber1 = editJson.LicenseNumber1 ? editJson.LicenseNumber1 : ''
vm.outletDataJson.LicenseNumber2 = editJson.LicenseNumber2 ? editJson.LicenseNumber2 : ''
vm.outletDataJson.LoyaltyPoints = editJson.LoyaltyPoints ? editJson.LoyaltyPoints : '0'
vm.outletDataJson.MarginPerc = editJson.MarginPerc ? editJson.MarginPerc : ''
vm.outletDataJson.MessageKey1 = editJson.MessageKey1 ? editJson.MessageKey1 : ''
vm.outletDataJson.MessageKey2 = editJson.MessageKey2 ? editJson.MessageKey2 : ''
vm.outletDataJson.MessageKey3 = editJson.MessageKey3 ? editJson.MessageKey3 : ''
vm.outletDataJson.MessageKey4 = editJson.MessageKey4 ? editJson.MessageKey4 : ''
vm.outletDataJson.Mobile = editJson.Mobile ? editJson.Mobile : ''
vm.outletDataJson.Notes = editJson.Notes ? editJson.Notes : ''
vm.outletDataJson.OfficeAccount = editJson.OfficeAccount ? editJson.OfficeAccount : 0
vm.outletDataJson.OwnerName = editJson.OwnerName ? editJson.OwnerName : ''
// vm.outletDataJson.OutletType = editJson.OutletType ? editJson.OutletType : '1'
vm.outletDataJson.PANCardNumber = editJson.PANCardNumber ? editJson.PANCardNumber : ''
vm.outletDataJson.PaymentType = editJson.PaymentType ? editJson.PaymentType : 0
vm.outletDataJson.Phone = editJson.Phone ? editJson.Phone : ''
vm.outletDataJson.RelatedParty = editJson.RelatedParty ? editJson.RelatedParty : 0
vm.outletDataJson.ReturnPromotionkey = editJson.ReturnPromotionkey ? editJson.ReturnPromotionkey : ''
vm.outletDataJson.RouteKey = editJson.RouteKey ? editJson.RouteKey : 0
vm.outletDataJson.RunRate = editJson.RunRate ? editJson.RunRate : ''
vm.outletDataJson.SalesGroupCode = editJson.SalesGroupCode ? editJson.SalesGroupCode : ''
vm.outletDataJson.SalesMode = editJson.SalesMode ? editJson.SalesMode : 0
vm.outletDataJson.SalesPromotionKey = editJson.SalesPromotionKey ? editJson.SalesPromotionKey : ''
vm.outletDataJson.SevicedByOutlet = editJson.SevicedByOutlet ? editJson.SevicedByOutlet : 0
vm.outletDataJson.ShipCity = editJson.ShipCity ? editJson.ShipCity : ''
vm.outletDataJson.ShipState = editJson.ShipState ? editJson.ShipState : ''
vm.outletDataJson.ShipZip = editJson.ShipZip ? editJson.ShipZip : ''
vm.outletDataJson.State = editJson.State ? editJson.State : ''
vm.outletDataJson.StateID = editJson.StateID ? editJson.StateID : ''
vm.outletDataJson.SurveyKey = editJson.SurveyKey ? editJson.SurveyKey : ''
vm.outletDataJson.TINNumber = editJson.TINNumber ? editJson.TINNumber : ''
vm.outletDataJson.TaxID = editJson.TaxID ? editJson.TaxID : null
vm.outletDataJson.TaxNumber = editJson.TaxNumber ? editJson.TaxNumber : ''
vm.outletDataJson.TaxRegionCode = editJson.TaxRegionCode ? editJson.TaxRegionCode : ''
vm.outletDataJson.TaxType = editJson.TaxType ? editJson.TaxType : 1
vm.outletDataJson.Telephone = editJson.Telephone ? editJson.Telephone : ''
vm.outletDataJson.TemplateID = editJson.TemplateID ? editJson.TemplateID : ''
vm.outletDataJson.TCS_Status = editJson.TCS_Status ? editJson.TCS_Status : ''
vm.outletDataJson.TerritoryHierarchy = editJson.TerritoryHierarchy ? editJson.TerritoryHierarchy : ''
vm.outletDataJson.TotalDaysOfInvoices = editJson.TotalDaysOfInvoices ? editJson.TotalDaysOfInvoices : ''
vm.outletDataJson.TotalNumberofInvoices = editJson.TotalNumberofInvoices ? editJson.TotalNumberofInvoices : ''
vm.outletDataJson.TradeIDNumber = editJson.TradeIDNumber ? editJson.TradeIDNumber : ''
vm.outletDataJson.Website = editJson.Website ? editJson.Website : ''
vm.outletDataJson.Zip = editJson.Zip ? editJson.Zip : ''
vm.outletDataJson.cache = editJson.cache ? editJson.cache : false
},
customCategoryOptions(value) {
let customerCategoryType = []
this.CustomerCategory.map(item => {
if (item.CategoryType == value) {
customerCategoryType.push(item)
}
})
return customerCategoryType
},
fetchCustomerCode(resp) {
if (resp) {
this.outletDataJson.CustomerCode = resp.DocumentPrefix + resp.DocumentNumber
}
},
// closeTab(x) {
// for (let i = 0; i < this.tabs.length; i++) {
// if (this.tabs[i] === x) {
// this.tabs.splice(i, 1)
// }
// }
// },
cancelButton() {
this.$emit('cancelOutletForm')
},
// newTab() {
// this.tabs.push(this.tabCounter++)
// },
categoriesTabClicked() {
this.outletlabels = this.pageConfigRes.UDFLabelList
},
enableInput(type) {
if (
this.pageConfigRes &&
this.pageConfigRes.DataFieldPermissionList &&
this.pageConfigRes.DataFieldPermissionList[type] != 'undefined'
) {
if (this.pageConfigRes.DataFieldPermissionList[type] === "disabled='disabled'") {
return { disabled: 'disabled' }
} else {
return ''
}
}
},
validateOutletFields() {
if (this.outletDataJson.CustomerCode === '') {
this.$bvToast.toast('CustomerCode is required field', {
title: 'Validations',
solid: true,
toaster: 'b-toaster-top-center'
})
return false
}
if (this.outletDataJson.CustomerName === '') {
this.$bvToast.toast('CustomerName is required field', {
title: 'Validations',
solid: true,
toaster: 'b-toaster-top-center'
})
return false
}
if (this.outletDataJson.Address1 === '') {
this.$bvToast.toast('CustomerAddress is required field', {
title: 'Validations',
solid: true,
toaster: 'b-toaster-top-center'
})
return false
}
return true
},
saveCustomerOutlet() {
let validate = this.validateOutletFields()
if (!validate) {
return
}
const client = api()
if (this.outletId) {
let customerId = this.outletId
client
.put('customer' + '/' + customerId, this.outletDataJson)
.then(response => {
this.$emit('closeEditTab', customerId)
if (response.data) {
this.$bvToast.toast('Record Updated Successfully', {
title: 'Update',
solid: true,
toaster: 'b-toaster-top-center'
})
}
})
.catch(error => {
console.error(error)
})
.finally(() => {
console.log('executing finally!')
})
} else {
if(this.outletDataJson.TCS_Status) {
this.outletDataJson.TCS_Status = 1
}else {
this.outletDataJson.TCS_Status = 0
}
client
.post('customer', this.outletDataJson)
.then(response => {
console.log('adding outlet response--->', JSON.stringify(response))
if (response.data) {
let event = {}
event.data = this.outletDataJson
this.$bvToast.toast('Record Update Successfully', {
title: 'Update',
solid: true,
toaster: 'b-toaster-top-center'
})
this.cancelButton()
event.data.CustomerID = response.data
this.$emit("actionSelected",event)
this.outletDataJson = event
}
})
.catch(error => {
console.error(error)
})
.finally(() => {
console.log('executing finally!')
})
}
},
fetchCustorCategoryCodes() {
const client = api()
client
.get('customer', {
params: {
requesttype: 2,
_: new Date().getTime()
}
})
.then(response => {
this.CustomerCategory = response.data.CustomerCategory
})
.catch(error => {
console.error(error)
})
.finally(() => {
console.log('executing finally!')
})
},
fetchdropDownValues() {
const client = api()
client
.get('customer', {
params: {
requesttype: 3,
_: new Date().getTime()
}
})
.then(response => {
this.authorizedProductDropDownValues = response.data.AuthorizedItemControlData.AuthorizedItemControl
this.pricingDropDownValues = response.data.PricingControlData.PricingControl
this.taxRegionDropDownValues = response.data.TaxRegionData.StateMaster
this.divisionDataDropDownValues = response.data.DivisionData.DivisionList
})
.catch(error => {
console.error(error)
})
.finally(() => {
console.log('executing finally!')
})
}
}
}
</script>
<style scoped>
.xj-form .label {
text-align: initial;
}
.mainBasicTab {
padding: 0px;
}
.iplusSquareClass {
font-size: 18px;
cursor: pointer;
color: #ccc;
float: left;
padding: 2px 10px;
}
.ck-btn {
border-radius: 3px;
padding-right: 16px;
padding-left: 16px;
cursor: pointer;
text-align: center;
font-size: 9pt;
height: 26px;
font-weight: bold;
}
.blue-btn {
background-color: #007bff;
color: #ffffff;
border: 1px solid #007bff;
}
.ck-btn-txt {
background-color: transparent;
padding-right: 10px;
padding-left: 10px;
cursor: pointer;
text-align: center;
font-size: 9pt;
height: 30px;
border: 0 !important;
color: #2a80b9;
}
.redborder {
border: 1px solid red;
}
.control_wrapper {
display: block;
max-width: 350px;
max-height: 350px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
</style>
Attachment: singlecheckbox_abc3f9ed.zip
Based on your query, we could understand that you need to check only one checkbox at a time in TreeView. You can achieve your requirement by unchecking the previously checked nodes using uncheckAll method in nodeChecking event of TreeView as demonstrated in the below code snippet.
|
<template>
<ejs-treeview
id="treeview"
:showCheckBox="true"
:nodeChecking="nodeChecking"
:autoCheck="false"
:fields="fields"
></ejs-treeview>
</template>
<script>
import { TreeViewComponent } from "@syncfusion/ej2-vue-navigations";
export default {
data() {
methods: {
nodeChecking: function (args) {
if (args.action === "check" && args.isInteracted) {
var tree = document.getElementById("treeview").ej2_instances[0];
tree.uncheckAll(tree.checkedNodes);
} },
},
};
</script> |
Please find the below sample for your reference.
Sample: https://codesandbox.io/s/treeview-check-forked-tgskp?file=/src/App.vue:1657-1730
KB: https://www.syncfusion.com/kb/12822/enable-checkbox-for-single-selection-mode-in-treeview-component
API Link: https://ej2.syncfusion.com/vue/documentation/api/treeview/#uncheckall
Please get back to us if you need further assistance.
Regards,
Hi Shalini,
I tried the above solution provided for the single checkbox selection query, query got resolved
thanks very much to you and syncfusion team for the support.
Thanks,
Punith BN
- 3 Replies
- 3 Participants
-
PB Punith B N
- Nov 17, 2021 01:24 PM UTC
- Nov 24, 2021 05:32 AM UTC
