shared-ritm 1.2.54 → 1.2.56

package/src/common/app-table/AppTable.vue

@@ -1,241 +1,244 @@
-<script setup lang="ts">
-import { defineProps, defineEmits, ref, computed, watch } from 'vue'
-import type { Ref } from 'vue'
-import FilterIcon from '@/icons/components/table-filter-icon.vue'
-
-interface FilterOption {
-  id: string
-  name: string
-}
-
-interface TableEmits {
-  'toggle-filter-value': [colName: string, value: string]
-  'clear-filter': [colName: string]
-  'open-filter-menu': [colName: string, isOpen: boolean]
-  'row-click': [row: Record<string, any>]
-  'update:selectedRows': [rows: any[]]
-}
-
-const emit = defineEmits<TableEmits>()
-
-const props = defineProps<{
-  rows: any[]
-  columns: any[]
-  columnFilters: Ref<Record<string, string | string[] | undefined>>
-  filterMenus: Ref<Record<string, boolean>>
-  filtersOptions: Record<string, FilterOption[]>
-  meta: Ref<{ currentPage: number; perPage: number }>
-  enableMultiSelect?: boolean
-  selectedRows: any[]
-}>()
-
-const localSearches = ref<Record<string, string>>({})
-
-const filteredOptions = computed(() => {
-  const result: Record<string, FilterOption[]> = {}
-  for (const col of props.columns) {
-    const search = localSearches.value[col.name]?.toLowerCase() || ''
-    const options = props.filtersOptions[col.name] || []
-    result[col.name] = options.filter(opt => opt.name.toLowerCase().includes(search))
-  }
-  return result
-})
-const selected = ref<any[]>([])
-
-watch(
-  () => props.selectedRows,
-  val => {
-    selected.value = val
-  },
-  { immediate: true },
-)
-
-watch(
-  selected,
-  val => {
-    emit('update:selectedRows', val)
-  },
-  { deep: true },
-)
-</script>
-
-<template>
-  <q-page class="flex flex-col" style="min-height: 100%">
-    <q-table
-      v-model:selected="selected"
-      :rows="rows"
-      :columns="columns"
-      row-key="id"
-      flat
-      bordered
-      hide-bottom
-      class="full-width"
-      :rows-per-page-options="[0]"
-      :selection="props.enableMultiSelect ? 'multiple' : 'none'"
-      @row-click="(_, row) => emit('row-click', row)"
-    >
-      <template #header-selection="scope">
-        <q-toggle v-model="scope.selected" />
-      </template>
-
-      <template #body-selection="scope">
-        <q-toggle v-model="scope.selected" />
-      </template>
-
-      <template #body-cell-index="props">
-        <q-td :props="props" class="text-center">
-          {{ props.rowIndex + 1 + (meta.value.currentPage - 1) * meta.value.perPage }}
-        </q-td>
-      </template>
-
-      <template v-for="col in columns" :key="col.name" #[`header-cell-${col.name}`]="propsSlot">
-        <q-th :props="propsSlot" :class="{ 'cursor-pointer': col.filterType }">
-          <div
-            v-if="col.filterType"
-            class="row items-center no-wrap"
-            @click.stop="emit('open-filter-menu', col.name, !filterMenus.value[col.name])"
-          >
-            <filter-icon class="q-mr-xs" />
-            <span>{{ col.label }}</span>
-            <template v-if="col.filterType === 'multi' && columnFilters.value[col.name]?.length">
-              <div class="label-length">- {{ columnFilters.value[col.name]?.length }}</div>
-            </template>
-          </div>
-          <div v-else>{{ col.label }}</div>
-
-          <q-menu
-            v-if="col.filterType"
-            :model-value="filterMenus.value[col.name]"
-            fit
-            max-height="300px"
-            class="filter-menu"
-            @update:model-value="isOpen => emit('open-filter-menu', col.name, isOpen)"
-          >
-            <div class="filter-content">
-              <q-input v-model="localSearches[col.name]" dense outlined placeholder="Поиск" class="q-mb-sm" clearable />
-              <q-scroll-area style="height: 200px">
-                <q-list style="min-width: 200px">
-                  <q-item v-for="option in filteredOptions[col.name]" :key="`${col.name}-${option.id}`" tag="label">
-                    <q-item-section avatar>
-                      <q-checkbox
-                        v-if="col.filterType === 'multi'"
-                        dense
-                        :model-value="
-                          Array.isArray(columnFilters.value[col.name]) &&
-                          columnFilters.value[col.name]?.includes(option.name)
-                        "
-                        @update:model-value="() => emit('toggle-filter-value', col.name, option.name)"
-                      />
-                      <q-radio
-                        v-else
-                        dense
-                        :model-value="columnFilters.value[col.name]"
-                        :val="option.name"
-                        @update:model-value="emit('toggle-filter-value', col.name, $event)"
-                      />
-                    </q-item-section>
-                    <q-item-section>{{ option.name }}</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-scroll-area>
-
-              <div class="filter-footer">
-                <q-btn color="negative" flat dense label="Сбросить фильтр" @click="emit('clear-filter', col.name)" />
-              </div>
-            </div>
-          </q-menu>
-        </q-th>
-      </template>
-
-      <template #body-cell="props">
-        <q-td :props="props">
-          <q-badge
-            v-if="props.col.badge && typeof props.value === 'boolean'"
-            :color="
-              props.col.badge.colorTrue && props.value
-                ? props.col.badge.colorTrue
-                : props.col.badge.colorFalse && !props.value
-                ? props.col.badge.colorFalse
-                : props.value
-                ? 'green'
-                : 'red'
-            "
-            outline
-            class="text-bold"
-          >
-            {{ props.value ? props.col.badge.true ?? 'Да' : props.col.badge.false ?? 'Нет' }}
-          </q-badge>
-          <span v-else-if="props.col.html" v-html="props.value"></span>
-          <span v-else>{{ props.value }}</span>
-        </q-td>
-      </template>
-    </q-table>
-  </q-page>
-</template>
-
-<style scoped lang="scss">
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.filter-menu {
-  padding: 10px;
-}
-.label-length {
-  margin-left: 5px;
-}
-.filter-content {
-  display: flex;
-  flex-direction: column;
-  color: #1d425d;
-  .q-item {
-    padding: 0 5px;
-    min-height: 40px;
-  }
-  .q-item__section {
-    min-width: 30px;
-    padding: 0px;
-  }
-  ::v-deep(.q-radio__inner),
-  ::v-deep(.q-checkbox__inner) {
-    color: #a4b4cf;
-  }
-}
-
-.filter-footer {
-  border-top: 1px solid #eee;
-  display: flex;
-  justify-content: center;
-}
-
-::v-deep(.q-table thead) {
-  background: #f2f7fb;
-}
-
-::v-deep(.q-table th) {
-  font-family: NunitoSansFont, sans-serif;
-  color: #a4b4cf;
-  font-size: 15px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 20px;
-  height: 61px;
-}
-
-::v-deep(.q-table tbody td) {
-  height: 61px;
-  font-size: 14px;
-}
-
-::v-deep(.q-table tbody) {
-  font-family: NunitoSansFont, sans-serif;
-  border-color: #d7e0ef;
-  color: #1d425d;
-  line-height: 20px;
-  font-size: 14px;
-}
-
-::v-deep(.q-table tbody tr:last-child td) {
-  border-bottom: 1px solid #d7e0ef;
-}
-</style>
+<script setup lang="ts">
+import { defineProps, defineEmits, ref, computed, watch } from 'vue'
+import type { Ref } from 'vue'
+import FilterIcon from '@/icons/components/table-filter-icon.vue'
+
+interface FilterOption {
+  id: string
+  name: string
+}
+
+interface TableEmits {
+  'toggle-filter-value': [colName: string, value: string]
+  'clear-filter': [colName: string]
+  'open-filter-menu': [colName: string, isOpen: boolean]
+  'row-click': [row: Record<string, any>]
+  'update:selectedRows': [rows: any[]]
+}
+
+const emit = defineEmits<TableEmits>()
+
+const props = defineProps<{
+  rows: Ref<any[]>
+  columns: any[]
+  columnFilters: Ref<Record<string, string | string[] | undefined>>
+  filterMenus: Ref<Record<string, boolean>>
+  filtersOptions: Record<string, FilterOption[]>
+  meta: Ref<{ currentPage: number; perPage: number }>
+  enableMultiSelect?: boolean
+  selectedRows: any[]
+}>()
+
+const localSearches = ref<Record<string, string>>({})
+
+const filteredOptions = computed(() => {
+  const result: Record<string, FilterOption[]> = {}
+  for (const col of props.columns) {
+    const search = localSearches.value[col.name]?.toLowerCase() || ''
+    const options = props.filtersOptions[col.name] || []
+    result[col.name] = options.filter(opt => opt.name.toLowerCase().includes(search))
+  }
+  return result
+})
+const selected = ref<any[]>([])
+
+watch(
+  () => props.selectedRows,
+  val => {
+    selected.value = val
+  },
+  { immediate: true },
+)
+
+watch(
+  selected,
+  val => {
+    emit('update:selectedRows', val)
+  },
+  { deep: true },
+)
+</script>
+
+<template>
+  <q-page class="flex flex-col" style="min-height: 100%">
+    <q-table
+      v-model:selected="selected"
+      :rows="rows.value"
+      :columns="columns"
+      row-key="id"
+      flat
+      bordered
+      hide-bottom
+      class="full-width"
+      :rows-per-page-options="[0]"
+      :selection="props.enableMultiSelect ? 'multiple' : 'none'"
+      @row-click="(_, row) => emit('row-click', row)"
+    >
+      <template #header-selection="scope">
+        <q-toggle v-model="scope.selected" />
+      </template>
+
+      <template #body-selection="scope">
+        <q-toggle v-model="scope.selected" />
+      </template>
+
+      <template #body-cell-index="props">
+        <q-td :props="props" class="text-center">
+          {{ props.rowIndex + 1 + (meta.value.currentPage - 1) * meta.value.perPage }}
+        </q-td>
+      </template>
+
+      <template v-for="col in columns" :key="col.name" #[`header-cell-${col.name}`]="propsSlot">
+        <q-th :props="propsSlot" :class="{ 'cursor-pointer': col.filterType }">
+          <div
+            v-if="col.filterType"
+            class="row items-center no-wrap"
+            @click.stop="emit('open-filter-menu', col.name, !filterMenus.value[col.name])"
+          >
+            <filter-icon class="q-mr-xs" />
+            <span>{{ col.label }}</span>
+            <div
+              v-if="['multi', 'single'].includes(col.filterType) && columnFilters.value[col.name]?.length"
+              class="label-length"
+            >
+              - {{ col.filterType === 'multi' ? columnFilters.value[col.name]?.length : 1 }}
+            </div>
+          </div>
+          <div v-else>{{ col.label }}</div>
+
+          <q-menu
+            v-if="col.filterType"
+            :model-value="filterMenus.value[col.name]"
+            fit
+            max-height="300px"
+            class="filter-menu"
+            @update:model-value="isOpen => emit('open-filter-menu', col.name, isOpen)"
+          >
+            <div class="filter-content">
+              <q-input v-model="localSearches[col.name]" dense outlined placeholder="Поиск" class="q-mb-sm" clearable />
+              <q-scroll-area style="height: 200px">
+                <q-list style="min-width: 200px">
+                  <q-item v-for="option in filteredOptions[col.name]" :key="`${col.name}-${option.id}`" tag="label">
+                    <q-item-section avatar>
+                      <q-checkbox
+                        v-if="col.filterType === 'multi'"
+                        dense
+                        :model-value="
+                          Array.isArray(columnFilters.value[col.name]) &&
+                          columnFilters.value[col.name]?.includes(option.name)
+                        "
+                        @update:model-value="() => emit('toggle-filter-value', col.name, option.name)"
+                      />
+                      <q-radio
+                        v-else
+                        dense
+                        :model-value="columnFilters.value[col.name]"
+                        :val="option.name"
+                        @update:model-value="emit('toggle-filter-value', col.name, $event)"
+                      />
+                    </q-item-section>
+                    <q-item-section>{{ option.name }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-scroll-area>
+
+              <div class="filter-footer">
+                <q-btn color="negative" flat dense label="Сбросить фильтр" @click="emit('clear-filter', col.name)" />
+              </div>
+            </div>
+          </q-menu>
+        </q-th>
+      </template>
+
+      <template #body-cell="props">
+        <q-td :props="props">
+          <q-badge
+            v-if="props.col.badge && typeof props.value === 'boolean'"
+            :color="
+              props.col.badge.colorTrue && props.value
+                ? props.col.badge.colorTrue
+                : props.col.badge.colorFalse && !props.value
+                ? props.col.badge.colorFalse
+                : props.value
+                ? 'green'
+                : 'red'
+            "
+            outline
+            class="text-bold"
+          >
+            {{ props.value ? props.col.badge.true ?? 'Да' : props.col.badge.false ?? 'Нет' }}
+          </q-badge>
+          <span v-else-if="props.col.html" v-html="props.value"></span>
+          <span v-else>{{ props.value }}</span>
+        </q-td>
+      </template>
+    </q-table>
+  </q-page>
+</template>
+
+<style scoped lang="scss">
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.filter-menu {
+  padding: 10px;
+}
+.label-length {
+  margin-left: 5px;
+}
+.filter-content {
+  display: flex;
+  flex-direction: column;
+  color: #1d425d;
+  .q-item {
+    padding: 0 5px;
+    min-height: 40px;
+  }
+  .q-item__section {
+    min-width: 30px;
+    padding: 0px;
+  }
+  ::v-deep(.q-radio__inner),
+  ::v-deep(.q-checkbox__inner) {
+    color: #a4b4cf;
+  }
+}
+
+.filter-footer {
+  border-top: 1px solid #eee;
+  display: flex;
+  justify-content: center;
+}
+
+::v-deep(.q-table thead) {
+  background: #f2f7fb;
+}
+
+::v-deep(.q-table th) {
+  font-family: NunitoSansFont, sans-serif;
+  color: #a4b4cf;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+  height: 61px;
+}
+
+::v-deep(.q-table tbody td) {
+  height: 61px;
+  font-size: 14px;
+}
+
+::v-deep(.q-table tbody) {
+  font-family: NunitoSansFont, sans-serif;
+  border-color: #d7e0ef;
+  color: #1d425d;
+  line-height: 20px;
+  font-size: 14px;
+}
+
+::v-deep(.q-table tbody tr:last-child td) {
+  border-bottom: 1px solid #d7e0ef;
+}
+</style>