Работа над расширенным поиском

client/components/Search/SelectExtSearchDialog/SelectExtSearchDialog.vue

@@ -8,12 +8,31 @@
             </div>
         </template>
 
-        <div ref="box" class="column q-mt-xs overflow-auto no-wrap" style="width: 200px; padding: 0px 10px 10px 10px;">
+        <div ref="box" class="column q-mt-xs overflow-auto" style="max-width: 700px; padding: 0px 10px 10px 10px;">
+            <div class="row">
+                <div v-for="f in recStruct" :key="f.field" class="row">
+                    <div class="q-mx-xs" />
+                    <q-input
+                        v-model="search[f.field]" :maxlength="5000"
+                        class="q-mt-xs" style="width: 150px;" :label="`${f.field} (${f.type == 'N' ? 'число' : 'строка'})`"
+                        :bg-color="bgColor[f.field] || 'white'"
+                        stack-label outlined dense clearable
+                    >
+                        <q-tooltip v-if="search[f.field]" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
+                            {{ search[f.field] }}
+                        </q-tooltip>
+                    </q-input>
+                </div>
+            </div>
+            <div class="row q-mt-xs q-ml-sm" style="color: red" v-html="error" />
         </div>
 
         <template #footer>
+            <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps :disabled="error !== ''" @click="apply">
+                Применить
+            </q-btn>
             <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick">
-                OK
+                Закрыть
             </q-btn>
         </template>
     </Dialog>
@@ -36,6 +55,15 @@ const componentOptions = {
         dialogVisible(newValue) {
             this.$emit('update:modelValue', newValue);
         },
+        extSearch(newValue) {
+            this.search = newValue;
+        },
+        search: {
+            handler() {
+                this.validate();
+            },
+            deep: true,
+        },
     }
 };
 class SelectExtSearchDialog {
@@ -46,6 +74,9 @@ class SelectExtSearchDialog {
     };
 
     dialogVisible = false;
+    search = {};
+    bgColor = {};
+    error = '';
 
     created() {
         this.commit = this.$store.commit;
@@ -54,9 +85,44 @@ class SelectExtSearchDialog {
     mounted() {
     }
 
+    get config() {
+        return this.$store.state.config;
+    }
+
+    get recStruct() {
+        if (this.config.dbConfig && this.config.dbConfig.inpxInfo.recStruct)
+            return this.config.dbConfig.inpxInfo.recStruct;
+        else
+            return [];
+    }
+
+    validate() {
+        const validNumValue = (n) => {
+            return false;
+        };
+
+        let error = [];
+        const s = this.search;
+        for (const f of this.recStruct) {
+            if (f.type == 'N' && s[f.field] && !validNumValue(s[f.field])) {
+                error.push(`Недопустимое значение поля ${f.field}`);
+                this.bgColor[f.field] = 'red-2';
+            } else {
+                this.bgColor[f.field] = '';//default
+            }
+        }
+
+        this.error = error.join('<br>');
+    }
+
     okClick() {
         this.dialogVisible = false;
     }
+
+    apply() {
+        this.validate();
+        this.dialogVisible = false;
+    }
 }
 
 export default vueComponent(SelectExtSearchDialog);