feat(VnTable): refs #6825 addInWhere

src/components/VnTable/VnFilter.vue

@@ -89,11 +89,15 @@ const components = {
 
 async function addFilter(value) {
     if (value && typeof value === 'object') value = model.value;
-    value = value === '' ? null : value;
+    value = value === '' ? undefined : value;
     let field = columnFilter.value?.name ?? $props.column.name;
-    const toFilter = { [field]: value };
 
-    await arrayData.addFilter({ params: toFilter });
+    let params = { [field]: value };
+    if (columnFilter.value?.inWhere) {
+        if (columnFilter.value.prefix) field = columnFilter.value.prefix + '.' + field;
+        params = { filter: { where: params } };
+    }
+    await arrayData.addFilter({ params });
 }
 
 function alignRow() {

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -75,11 +75,17 @@ const columns = computed(() => [
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.credit'),
         name: 'credit',
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
         name: 'creditInsurance',
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
@@ -98,6 +104,9 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.mobile'),
         name: 'mobile',
         cardVisible: true,
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
@@ -108,12 +117,29 @@ const columns = computed(() => [
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.countryFk'),
-        name: 'country',
+        name: 'countryFk',
+        columnFilter: {
+            component: 'select',
+            inWhere: true,
+            prefix: 'c',
+            attrs: {
+                url: 'Countries',
+            },
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.country),
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
         name: 'provinceFk',
+        component: 'select',
+        attrs: {
+            url: 'Provinces',
+        },
+        columnField: {
+            component: null,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.province),
     },
     {
         align: 'left',