How to apply filter search for the Treeview component | Vue Forums

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

曾深爱过的大白菜 · 驗證 (Validation) · ...· 2 周前 ·

刚毅的围巾 · Instance created by ...· 2 周前 ·

迷茫的领结 · Logstash-input-beats ...· 2 周前 ·

个性的上铺 · Help - Infinite blank ...· 1 周前 ·

胡子拉碴的椰子 · HTML input type="email"· 1 周前 ·

年轻有为的海龟 · Android Retrofit ...· 3 月前 ·

魁梧的羊肉串 · 銆€銆€鐧藉笣鑲栭潤绡?銆€銆€浣滆€咃細鎷 ...· 4 月前 ·

俊逸的奔马 · FFmpeg ...· 6 月前 ·

胆小的电影票 · Virgne’s Aprillady ...· 8 月前 ·

大方的台灯 · How to Push to GitLab· 1 年前 ·

Hi Team,

As I am using the Treeview Component for the selection of checkboxes with the Treeview structure, so so many levels are present at the service level. need to implement the custom input search filter for the same.

Can u please provide the search option for the Treeview Structure.

Thanks and Regards,

Punith BN

Attachment: Search_2a699538.zip

Greetings from Syncfusion support.

We have checked with your reported requirement for filtering in TreeView. Based on your attached video, we have noticed that the filtering is not working properly in your sample. We have created a sample for the same.

Refer to the sample link:

https://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeView-Filtering1182640215

If the issue persists, please share your code snippets where filtering was tried from your end, else please compare the above sample with your code and make the required changes.

Please get back to us if you need any further assistance.

Regards,

Sharon Sanchez S.

Hi Team,

As I am using the above code in my project code, but am getting the Type error shown in the below screenshot.

Can u please provide the solution for the above error.

Thanks and Regards,

Punith BN

Code sample:

<div>

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

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

<h5>General Information</h5>

</div>

<label for="exampleFormControlInput1">{{ $t('outletwallet.status') }}</label>

<select

class="form-control form-control-sm"

id="selOutletType"

disabled="disabled"

v-model="outletDataJson.CustomerStatus"

<option value="1">Active</option>

<option value="0">In Active</option>

</select>

</div>

<label for="exampleFormControlInput1">{{ $t('outlet.aprovalstatus') }}</label>

<b-badge variant="warning" v-if="outletDataJson.AprovalStatus === 0" title="Draft">Draft</b-badge>

<b-badge variant="success" v-if="outletDataJson.AprovalStatus === 2" title="Approved">Approved</b-badge>

<b-badge variant="danger" v-if="outletDataJson.AprovalStatus === 3" title="Rejected">Rejected</b-badge>

<b-badge variant="info" v-if="outletDataJson.AprovalStatus === 1" title="Sent for approval">Sent for approval</b-badge>

</div>

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

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

<label for="exampleFormControlInput1">{{ $t('outlet.outlettype') }}</label>

<select

class="form-control form-control-sm"

id="selOutletType"

v-model="outletDataJson.OutletType"

v-bind="enableInput('OUTLET_OUTLETTYPE')"

<option value="0">Is Sub DB Attribute</option>

<option value="1">Is Tertiary Outlet</option>

</select>

</div>

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

<label for="exampleFormControlInput1">{{ $t('outlet.hierarchycode') }}</label>

<input

type="text"

class="form-control form-control-sm"

v-bind="enableInput('OUTLET_HIERARCHYCODE')"

aria-describedby="button-addon2"

v-model="hrchyCode"

<button

class="btn btn-sm btn-outline-secondary"

type="button"

id="button-addon2"

data-toggle="modal"

data-target="#hierarchyCode"

@click="openHierarchyFilter()"

</button>

</div>

<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="1">Credit</option>

</select>

</div>

<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="1">Cheque(P002 )</option>

</select>

</div>

<input

type="text"

class="form-control form-control-sm"

v-model="outletDataJson.CustomerNameA"

maxlength="100"

v-bind="enableInput('OUTLET_CUSTOMERNAMEA')"

</div>

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

<label for="exampleFormControlInput1">{{ $t('outlet.templateid') }}</label>

<input type="text" class="form-control form-control-sm" v-model="outletDataJson.TemplateID"

v-bind="enableInput('OUTLET_TEMPLATEID')"/>

</div>

<label for="exampleFormControlInput1">{{ $t('outlet.authorizeditemlistkey') }}</label>

<select

class="form-control form-control-sm"

v-model="outletDataJson.AuthorizedItemListKey"

v-bind="enableInput('OUTLET_AUTHORIZEDITEMLISTKEY')"

<option

v-for="(option, index) in authorizedProductDropDownValues"

:key="index"

:value="option.IDNumber"

>{{ option.CodeAndDesc }}></option

</select>

</div>

<label for="exampleFormControlInput1">{{ $t('outlet.customerprinciplecode') }}</label>

</div>

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

<label class="form-check-label" for="exampleCheck1">{{ $t('outlet.billtooutlet') }}</label>

<input type="text" class="form-control form-control-sm" v-model="outletDataJson.BillToCustomer"

v-bind="enableInput('OUTLET_BILLTOOUTLET')">

</div>

<h5 class="mb-3">Location</h5>

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

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

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

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

<input

type="text"

class="form-control form-control-sm"

v-model="outletDataJson.City"

v-bind="enableInput('OUTLET_CITY')"

name="txtCity"

</div>

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

<input

type="text"

class="form-control form-control-sm"

v-model="outletDataJson.Zip"

v-bind="enableInput('OUTLET_ZIP')"

name="txtZip"

</div>

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

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

<h5 class="mb-3">Contact</h5>

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

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

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

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

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

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

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

<h5 class="mb-3">Promotions</h5>

<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')"

</select>

</div>

<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')"

</select>

</div>

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

<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')"

</select>

</div>

<label for="exampleFormControlInput1">Discount %</label>

<input

type="text"

class="form-control form-control-sm"

id="exampleFormControlInput1"

v-model="outletDataJson.CashDiscountPerc"

</div>

<label for="exampleFormControlInput1">Margin %</label>

<input

type="text"

class="form-control form-control-sm"

id="exampleFormControlInput1"

placeholder=""

v-model="outletDataJson.MarginPerc"

</div>

<h5 class="mb-3">Pricing</h5>

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

<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

v-for="(option, index) in pricingDropDownValues"

:key="index"

:value="option.IDNumber"

>{{ option.CodeAndDesc }}></option

</select>

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

<h5 class="mb-3">Categories</h5>

<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

v-for="(option, index) in customCategoryOptions(1)"

:key="index"

:value="option.CategoryNumber"

>{{ option.CategoryCodeAndDescription }}></option

</select>

</div>

<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

v-for="(option, index) in customCategoryOptions(2)"

:key="index"

:value="option.CategoryNumber"

>{{ option.CategoryCodeAndDescription }}></option

</select>

</div>

<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

v-for="(option, index) in customCategoryOptions(3)"

:key="index"

:value="option.CategoryNumber"

>{{ option.CategoryCodeAndDescription }}></option

</select>

</div>

<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

v-for="(option, index) in customCategoryOptions(4)"

:key="index"

:value="option.CategoryNumber"

>{{ option.CategoryCodeAndDescription }}></option

</select>

</div>

<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

v-for="(option, index) in customCategoryOptions(5)"

:key="index"

:value="option.CategoryNumber"

>{{ option.CategoryCodeAndDescription }}></option

</select>

</div>

<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

v-for="(option, index) in customCategoryOptions(6)"

:key="index"

:value="option.CategoryNumber"

>{{ option.CategoryCodeAndDescription }}></option

</select>

</div>

<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

v-for="(option, index) in customCategoryOptions(7)"

:key="index"

:value="option.CategoryNumber"

>{{ option.CategoryCodeAndDescription }}></option

</select>

</div>

<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

v-for="(option, index) in customCategoryOptions(8)"

:key="index"

:value="option.CategoryNumber"

>{{ option.CategoryCodeAndDescription }}></option

</select>

</div>

<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

v-for="(option, index) in customCategoryOptions(9)"

:key="index"

:value="option.CategoryNumber"

>{{ option.CategoryCodeAndDescription }}></option

</select>

</div>

<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

v-for="(option, index) in customCategoryOptions(10)"

:key="index"

:value="option.CategoryNumber"

>{{ option.CategoryCodeAndDescription }}></option

</select>

</div>

<h5 class="mb-3">Attributes</h5>

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

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

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

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

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

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

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

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

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

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

<h5 class="mb-3">Calculated Attribute</h5>

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

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

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

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

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

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

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

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

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

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

<h5 class="mb-3">Outlet Hierarchy</h5>

<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_HIERARCHYCODE1 }}</label>

<input

type="text"

class="form-control form-control-sm"

v-bind="enableInput('OUTLET_HIERARCHYCODE1')"

aria-describedby="button-addon2"

v-model="hrchyCode1"

<button

class="btn btn-sm btn-outline-secondary"

type="button"

id="button-addon2"

data-toggle="modal"

data-target="#hierarchyCode"

@click="openHierarchyStructure(1)"

</button>

</div>

<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_HIERARCHYCODE2 }}</label>

<input

type="text"

class="form-control form-control-sm"

aria-describedby="button-addon2"

v-bind="enableInput('OUTLET_HIERARCHYCODE1')"

v-model="hrchyCode2"

<button

class="btn btn-sm btn-outline-secondary"

type="button"

id="button-addon2"

data-toggle="modal"

data-target="#hierarchyCode"

@click="openHierarchyStructure(2)"

</button>

</div>

<label for="exampleFormControlInput1">{{ outletlabels.OUTLET_HIERARCHYCODE3 }}</label>

<input

type="text"

class="form-control form-control-sm"

v-bind="enableInput('OUTLET_HIERARCHYCODE1')"

aria-describedby="button-addon2"

v-model="hrchyCode3"

<button

class="btn btn-sm btn-outline-secondary"

type="button"

id="button-addon2"

data-toggle="modal"

data-target="#hierarchyCode"

@click="openHierarchyStructure(3)"

</button>

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

<h5 class="mb-3">Tax Details</h5>

<input

type="checkbox"

class="form-check-input"

id="my-checkbox"

v-model="outletDataJson.TCS_Status"

@change="changeCheckBoxValue"

<label class="form-check-label" for="exampleCheck1">{{ $t('Auditlog.TCS_Status') }}</label>

</div>

<label for="exampleFormControlInput1">TCS SalesAmount</label>

<input

type="text"

class="form-control form-control-sm"

id="exampleFormControlInput1"

placeholder=""

disabled="disabled"

</div>

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

</select>

</div>

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

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

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

<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="0">Unregistered</option>

<option value="1">Registered</option>

<option value="2">Composite</option>

</select>

</div>

<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

v-for="(option, index) in taxRegionDropDownValues"

:key="index"

:value="option.StateID"

>{{ option.StateName + '(' + option.StateCode + ')' }}></option

</select>

</div>

<label for="exampleFormControlInput1">TaxAdminOffice</label>

<input

type="text"

class="form-control form-control-sm"

id="exampleFormControlInput1"

readOnly="true"

</div>

<label for="exampleFormControlInput1">e Inovice Enabled</label>

<input

type="text"

class="form-control form-control-sm"

id="exampleFormControlInput1"

readOnly="true"

</div>

<label for="exampleFormControlInput1">E invoice PK alias Email id </label>

<input

type="text"

class="form-control form-control-sm"

id="exampleFormControlInput1"

readOnly="true"

</div>

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

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

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

<h5 class="mb-3">Credit details</h5>

<label for="exampleFormControlInput1">Deposit Amt</label>

<input

type="number"

class="form-control form-control-sm"

id="exampleFormControlInput1"

v-model="outletDataJson.DepositAmount"

onkeypress="return validateRegex(event);"

</div>

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

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

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

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

<label for="exampleFormControlInput1">Credit Intradays</label>

<input

type="number"

class="form-control form-control-sm"

id="exampleFormControlInput1"

v-model="outletDataJson.IntradayCreditLimit"

onkeypress="return validateRegex(event);"

placeholder=""

</div>

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

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

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

<h5 class="mb-3">General information</h5>

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

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

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

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

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

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

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

<input

type="text"

class="form-control form-control-sm"

id="exampleFormControlInput1"

placeholder=""

v-model="outletDataJson.AverageTurnOver"

</div>

<label for="exampleFormControlInput1">{{ $t('outlet.dateofregistration') }}</label>

<ejs-datetimepicker

id="datetimepicker"

:placeholder="waterMarkText"

:value="date"

:format="dateFormat"

v-model="outletDataJson.DateofRegistration"

></ejs-datetimepicker>

</div>

<label for="exampleFormControlInput1">{{ $t('outlet.dateofbirth') }}</label>

<ejs-datetimepicker

id="datetimepicker"

:placeholder="waterMarkText"

:value="date"

:format="dateFormat"

v-model="outletDataJson.DateofBirth"

></ejs-datetimepicker>

</div>

<label for="exampleFormControlInput1">Aniversary date</label>

<ejs-datetimepicker

id="datetimepicker"

:placeholder="waterMarkText"

:value="date"

:format="dateFormat"

v-model="outletDataJson.AnniversaryDate"

></ejs-datetimepicker>

</div>

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

<h5 class="mb-3">Messages</h5>

<label for="exampleFormControlInput1">{{ $t('outlet.messagekey1') }}</label>

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

</select>

<button

class="btn btn-outline-secondary btn-sm"

type="button"

id="button-addon2"

data-toggle="modal"

data-target="#exampleModal"

@click="openModal(1)"

</button>

</div>

<label for="exampleFormControlInput1">{{ $t('outlet.messagekey2') }}</label>

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

</select>

<button

class="btn btn-outline-secondary btn-sm"

type="button"

id="button-addon2"

data-toggle="modal"

data-target="#exampleModal"

@click="openModal(2)"

</button>

</div>

<label for="exampleFormControlInput1">{{ $t('outlet.messagekey3') }}</label>

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

</select>

<button

class="btn btn-outline-secondary btn-sm"

type="button"

id="button-addon2"

data-toggle="modal"

data-target="#exampleModal"

@click="openModal(3)"

</button>

</div>

<label for="exampleFormControlInput1">{{ $t('outlet.messagekey4') }}</label>

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

</select>

<button

class="btn btn-outline-secondary btn-sm"

type="button"

id="button-addon2"

data-toggle="modal"

data-target="#exampleModal"

@click="openModal(4)"

</button>

</div>

<h5 class="mb-3">License</h5>

<label for="exampleFormControlInput1">Drug License</label>

<input

type="text"

class="form-control form-control-sm"

id="exampleFormControlInput1"

placeholder=""

v-model="outletDataJson.LicenseNumber"

</div>

<label for="exampleFormControlInput1">Drug License Exp</label>

<ejs-datetimepicker

id="datetimepicker"

:placeholder="waterMarkText"

:value="date"

:format="dateFormat"

v-model="outletDataJson.LicenseExpiryDate"

></ejs-datetimepicker>

</div>

<label for="exampleFormControlInput1">Insecticide License</label>

<input

type="text"

class="form-control form-control-sm"

id="exampleFormControlInput1"

placeholder=""

v-model="outletDataJson.LicenseNumber1"

</div>

<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.LicenseExpiryDate1"

></ejs-datetimepicker>

</div>

</b-container>

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

<!-- <template #tabs-end>

<b-nav-item role="presentation" @click.prevent="newTab" rel='nofollow' href="#"><b>+</b></b-nav-item>

</template> -->

<!-- <template #empty>

There are no open tabs<br />

Open a new tab using the <b>+</b> button above.

</div>

</template> -->

</b-tabs>

</b-card>

</div>

<div

id="postedpanel_divFilter"

class="ck-popup"

style="top: 515px; left: 320px; width: 325px; height: 400px; overflow: scroll;"

<label>Filter: </label>

<ejs-maskedtextbox

id="maskObj"

:change="searchNodes"

placeholder="Enter the tree node to search"

></ejs-maskedtextbox>

</div>

</button>

</div>

<ejs-treeview

id="treeview"

:fields="fields"

:autoCheck="false"

:showCheckBox="true"

:nodeChecked="nodeCheckedFilter"

:nodeChecking="nodeChecking"

:checkedNodes="checkedNodes"

></ejs-treeview>

</div>

<div

id="postedpanel_divFilter"

class="ck-popup"

style="top: 505px; right: 270px; width: 325px; height: 400px; overflow: scroll;"

<label>Filter: </label>

</div>

</button>

</div>

<ejs-treeview

id="treeview"

:fields="fields"

:autoCheck="false"

:showCheckBox="true"

:nodeChecked="nodeCheckedFilter1"

:nodeChecking="nodeChecking"

:checkedNodes="checkedNodes1"

></ejs-treeview>

</div>

<div

id="postedpanel_divFilter"

class="ck-popup"

style="top: 505px; right: 270px; width: 325px; height: 400px; overflow: scroll;"

<label>Filter: </label>

</div>

</button>

</div>

<ejs-treeview

id="treeview"

:fields="fields"

:autoCheck="false"

:showCheckBox="true"

:nodeChecked="nodeCheckedFilter2"

:nodeChecking="nodeChecking"

:checkedNodes="checkedNodes2"

></ejs-treeview>

</div>

<div

id="postedpanel_divFilter"

class="ck-popup"

style="top: 505px; right: 270px; width: 325px; height: 400px; overflow: scroll;"

<label>Filter: </label>

</div>

</button>

</div>

<ejs-treeview

id="treeview"

:fields="fields"

:autoCheck="false"

:showCheckBox="true"

:nodeChecked="nodeCheckedFilter3"

:nodeChecking="nodeChecking"

:checkedNodes="checkedNodes3"

></ejs-treeview>

</div>

<orderstatus-modal ref="orderStatusModal" @outletStatusChanged="outletStatusChanged"></orderstatus-modal>

</div>

</template>

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'

import {MaskedTextBoxPlugin } from '@syncfusion/ej2-vue-inputs';

import { DataManager, Query, Predicate } from "@syncfusion/ej2-data";

Vue.use(TreeViewPlugin)

Vue.use(DateTimePickerPlugin)

Vue.use(MaskedTextBoxPlugin);

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,

CustomerStatus: 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: [],

hrchyCode: '',

hrchyCode1: '',

hrchyCode2: '',

hrchyCode3: '',

hierarchyfilter: false,

hierarchyfilter1: false,

hierarchyfilter2: false,

hierarchyfilter3: false,

checkedNodes: [],

checkedNodes1: [],

checkedNodes2: [],

checkedNodes3: []

}

mounted() {

if (this.outletId) {

this.getOutletDetails()

}

methods: {

myFunction() {

var input, filter, ul, li, div, span, i, txtValue

input = document.getElementById('myInput')

filter = input.value.toUpperCase()

ul = document.getElementsByClassName('e-list-parent e-ul')

li = ul[0].getElementsByTagName('li')

div = li[0].getElementsByClassName('e-text-content e-icon-wrapper')

console.log('div list-->', div)

for (i = 0; i < div.length; i++) {

span = div[i].getElementsByTagName('span')[0]

txtValue = span.textContent || span.innerText

if (txtValue.toUpperCase().indexOf(filter) > -1) {

// span[i].style.display = "";

// } else {

// span[i].style.display = "none";

}

nodeChecking: function(args) {

if (args.action === 'check' && args.isInteracted) {

var tree = document.getElementById('treeview').ej2_instances[0]

tree.uncheckAll(tree.checkedNodes)

}

nodeCheckedFilter: function() {

var treeObj = document.getElementById('treeview').ej2_instances[0]

this.customerHierarchyForFilter.CustomerHierarchy.map(item => {

if (item.ParentID == treeObj.checkedNodes) {

this.hrchyCode = item.HierarchyName

this.checkedNodes = treeObj.checkedNodes

this.outletDataJson.HierarchyCode = treeObj.checkedNodes[0]

}

})

nodeCheckedFilter1() {

var tree1Obj = document.getElementById('treeview').ej2_instances[0]

this.customerHierarchyForFilter.CustomerHierarchy1.map(item => {

if (item.ParentID == tree1Obj.checkedNodes) {

this.hrchyCode1 = item.HierarchyName

this.checkedNodes1 = tree1Obj.checkedNodes

this.outletDataJson.HierarchyCode1 = tree1Obj.checkedNodes[0]

}

})

nodeCheckedFilter2() {

var tree2Obj = document.getElementById('treeview').ej2_instances[0]

this.customerHierarchyForFilter.CustomerHierarchy2.map(item => {

if (item.ParentID == tree2Obj.checkedNodes) {

this.hrchyCode2 = item.HierarchyName

this.checkedNodes2 = tree2Obj.checkedNodes

this.outletDataJson.HierarchyCode2 = tree2Obj.checkedNodes[0]

}

})

nodeCheckedFilter3() {

var tree3Obj = document.getElementById('treeview').ej2_instances[0]

this.customerHierarchyForFilter.CustomerHierarchy3.map(item => {

if (item.ParentID == tree3Obj.checkedNodes) {

this.hrchyCode3 = item.HierarchyName

this.checkedNodes3 = tree3Obj.checkedNodes

this.outletDataJson.HierarchyCode3 = tree3Obj.checkedNodes[0]

}

})

hierarchyDataSource(table) {

var data = []

if (table) {

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

openHierarchyStructure(n) {

if (n == 1) {

this.hierarchyfilter1 = true

this.hierarchyDataSource(this.customerHierarchyForFilter.CustomerHierarchy1)

} else if (n == 2) {

this.hierarchyfilter2 = true

this.hierarchyDataSource(this.customerHierarchyForFilter.CustomerHierarchy2)

} else if (n == 3) {

this.hierarchyfilter3 = true

this.hierarchyDataSource(this.customerHierarchyForFilter.CustomerHierarchy3)

}

openHierarchyFilter() {

this.hierarchyfilter = true

this.hierarchyDataSource(this.customerHierarchyForFilter.CustomerHierarchy)

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

}

changeDataSource: function (data) {

this.fields = {

dataSource: data,

id: 'ParentID',

level: 'HierarchyLevel',

code: 'HierarchyCode',

parentID: 'HierarchyID',

text: 'HierarchyName',

child: 'subChild'

};

searchNodes: function () {

var maskObj = document.getElementById("maskObj").ej2_instances[0];

var _text = maskObj.element.value;

var predicats = [],

_array = [],

_filter = [];

if (_text === "") {

this.changeDataSource(this.fields.dataSource);

} else {

var predicate = new Predicate("name", "startswith", _text, true);

var filteredList = new DataManager(this.fields.dataSource).executeLocal(

new Query().where(predicate)

);

console.log(filteredList);

for (var j = 0; j < filteredList.length; j++) {

_filter.push(filteredList[j]["id"]);

let filters = this.getFilterItems(filteredList[j], this.fields.dataSource);

for (let i = 0; i < filters.length; i++) {

if (_array.indexOf(filters[i]) === -1 && filters[i] != null) {

_array.push(filters[i]);

predicats.push(new Predicate("id", "equal", filters[i], false));

}

if (predicats.length === 0) {

this.changeDataSource([]);

} else {

var query = new Query().where(Predicate.or(predicats));

var newList = new DataManager(this.fields.dataSource).executeLocal(query);

this.changeDataSource(newList);

setTimeout(function () {

var treeObj = document.getElementById("treeview").ej2_instances[0];

treeObj.expandAll();

}, 1000);

}

getFilterItems(fList, list) {

var nodes = [];

nodes.push(fList["id"]);

var query2 = new Query().where("id", "equal", fList["pid"], false);

var fList1 = new DataManager(list).executeLocal(query2);

if (fList1.length !== 0) {

let pNode = this.getFilterItems(fList1[0], list);

for (let i = 0; i < pNode.length; i++) {

if (nodes.indexOf(pNode[i]) === -1 && pNode[i] != null)

nodes.push(pNode[i]);

}

return nodes;

}

return nodes;

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: new Date().getTime(),

rows: 100,

page: 1,

sidx: 'Code',

sord: 'asc',

_: new Date().getTime(),

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.CustomerStatus = editJson.CustomerStatus ? editJson.CustomerStatus : 1

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

editJson.GSTRegistrationType = editJson.GSTRegistrationType ? editJson.GSTRegistrationType.toString() : ''

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.checkedNodes[0] = editJson.HierarchyCode ? editJson.HierarchyCode : ''

vm.checkedNodes1[0] = editJson.HierarchyCode1 ? editJson.HierarchyCode1 : ''

vm.checkedNodes2[0] = editJson.HierarchyCode2 ? editJson.HierarchyCode2 : ''

vm.checkedNodes3[0] = editJson.HierarchyCode3 ? editJson.HierarchyCode3 : ''

vm.hrchyCode = editJson.OutletHierarchyName ? editJson.OutletHierarchyName: ''

vm.hrchyCode1 = editJson.HierarchyCode1Name ? editJson.HierarchyCode1Name: ''

vm.hrchyCode2 = editJson.HierarchyCode2Name ? editJson.HierarchyCode2Name: ''

vm.hrchyCode3 = editJson.HierarchyCode3Name ? editJson.HierarchyCode3Name: ''

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

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>

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

}

.outlet-section label {

font-size: small;

color: #8a8a8a;

overflow: hidden;

text-overflow: ellipsis;

width: 125px;

white-space: nowrap;

}

</style>

Package.json:

    
     {
    
     "name"
    
     :
    
     "fuji"
    
     ,
    
     "version"
    
     :
    
     "0.1.0"
    
     ,
    
     "private"
    
     :
    
     true
    
     ,
    
     "scripts"
    
     : {
    
     "serve"
    
     :
    
     "vue-cli-service serve"
    
     ,
    
     "build"
    
     :
    
     "vue-cli-service build"
    
     ,
    
     "lint"
    
     :
    
     "vue-cli-service lint"
    
     },
    
     "dependencies"
    
     : {
    
     "@syncfusion/ej2-vue-calendars"
    
     :
    
     "^19.3.53"
    
     ,
    
     "@syncfusion/ej2-vue-dropdowns"
    
     :
    
     "^19.3.53"
    
     ,
    
     "@syncfusion/ej2-vue-grids"
    
     :
    
     "^19.3.54"
    
     ,
    
     "@syncfusion/ej2-vue-inputs"
    
     :
    
     "^19.3.53"
    
     ,
    
     "@syncfusion/ej2-vue-navigations"
    
     :
    
     "^19.3.54"
    
     ,
    
     "@syncfusion/ej2-vue-treegrid"
    
     :
    
     "^19.3.53"
    
     ,
    
     "axios"
    
     :
    
     "^0.21.4"
    
     ,
    
     "bootstrap"
    
     :
    
     "4.5.3"
    
     ,
    
     "bootstrap-vue"
    
     :
    
     "^2.21.2"
    
     ,
    
     "core-js"
    
     :
    
     "^3.19.1"
    
     ,
    
     "font-awesome"
    
     :
    
     "^4.7.0"
    
     ,
    
     "moment"
    
     :
    
     "^2.29.1"
    
     ,
    
     "vue"
    
     :
    
     "^2.6.14"
    
     ,
    
     "vue-autosuggest"
    
     :
    
     "^2.2.0"
    
     ,
    
     "vue-class-component"
    
     :
    
     "^8.0.0-rc.1"
    
     ,
    
     "vue-good-table"
    
     :
    
     "^2.21.11"
    
     ,
    
     "vue-i18n"
    
     :
    
     "^8.26.7"
    
     ,
    
     "vue-loading-overlay"
    
     :
    
     "^4.0.4"
    
     ,
    
     "vue-router"
    
     :
    
     "^3.5.3"
    
     ,
    
     "vuex"
    
     :
    
     "^3.6.2"
    
     },
    
     "devDependencies"
    
     : {
    
     "@vue/cli-plugin-babel"
    
     :
    
     "^4.5.15"
    
     ,
    
     "@vue/cli-plugin-eslint"
    
     :
    
     "^4.5.15"
    
     ,
    
     "@vue/cli-service"
    
     :
    
     "^4.5.15"
    
     ,
    
     "babel-eslint"
    
     :
    
     "^10.1.0"
    
     ,
    
     "eslint"
    
     :
    
     "^6.7.2"
    
     ,
    
     "eslint-plugin-vue"
    
     :
    
     "^6.2.2"
    
     ,
    
     "vue-template-compiler"
    
     :
    
     "^2.6.14"
    
     },
    
     "eslintConfig"
    
     : {
    
     "root"
    
     :
    
     true
    
     ,
    
     "env"
    
     : {
    
     "node"
    
     :
    
     true
    
     },
    
     "extends"
    
     : [
    
     "plugin:vue/essential"
    
     ,
    
     "eslint:recommended"
    
     ],
    
     "parserOptions"
    
     : {
    
     "parser"
    
     :
    
     "babel-eslint"
    
     },
    
     "rules"
    
     : {}
    
     },
    
     "browserslist"
    
     : [
    
     "> 1%"
    
     ,
    
     "last 2 versions"
    
     ,
    
     "not dead"
    
     ]
    
     }

   Error am getting in the console while page loa
  

Hi Punith,

We have validated your reported problem using your shared code. But, we were unable to run it in our local sample as your code has external dependant codes.

So, we request you to replicate your reported problem in our last shared sample or share your complete project with dependencies(if possible). It would help us to validate your problem and to provide you the prompt solution.

Regards,

Shameer Ali Baig S.

Hi team,

As I am working on the requirement for filtering in TreeView. I used the same code provided by the syncfusion team.

For the above code Getting the console error, so providing a clear document to provide the solution in the below zip

file.

So please provide the solution for the above requirement asap. It will help us a lot in the project

Thanks and Regards,

Punith BN

Attachment: Tree_view_Filtering_58c9eac9.zip

Thanks for sharing the issue details.

We have used your shared code in your application and try to replicate it. But, your reported problem in not reproducing to us as the TreeView’s filtering sample working without any issues.

We have attached the sample with your shared code for your reference. If you still face the problem, then please revert by replicating your reported problem in the attached application. It would help us to provide you the prompt solution.

Sample: https://www.syncfusion.com/downloads/support/forum/170637/ze/Vue_treeview-1682987332

Regards,

Shameer Ali Baig S.