update

erm.frontend/src/views/appetite/spread/SpreadDialog copy.vue

@@ -1,98 +0,0 @@
-<template>
-  <w-dialog ref="dialogRef" :title="$t('erm.appetite.spread.detail.dialog.title')" width="1200px" height="700px" :can-maximize="false">
-    <q-tabs v-model="selectedTabRef" inline-label active-bg-color="primary" active-color="white">
-      <q-tab name="businessObject" icon="bi-graph-up-arrow" :label="$t('erm.appetite.spread.businessObject.grid.title')" no-caps> </q-tab>
-      <q-tab name="industry" icon="bi-grid-3x3-gap" :label="$t('erm.appetite.spread.industry.grid.title')" no-caps> </q-tab>
-      <q-tab name="shareholder" icon="bi-people" :label="$t('erm.appetite.spread.shareholder.grid.title')" no-caps> </q-tab>
-      <q-tab name="supervision" icon="bi-stoplights" :label="$t('erm.appetite.spread.supervision.grid.title')" no-caps> </q-tab>
-      <q-tab name="coreIndicator" icon="bi-speedometer2" :label="$t('erm.appetite.spread.coreIndicator.grid.title')" no-caps> </q-tab>
-    </q-tabs>
-    <q-tab-panels v-model="selectedTabRef" swipeable vertical transition-prev="jump-up" transition-next="jump-up">
-      <q-tab-panel name="businessObject">
-        <SpreadBusinessObject :relation-id="currentIdRef"></SpreadBusinessObject>
-      </q-tab-panel>
-      <q-tab-panel name="industry">
-        <SpreadIndustry :relation-id="currentIdRef"></SpreadIndustry>
-      </q-tab-panel>
-      <q-tab-panel name="shareholder">
-        <SpreadShareholder :relation-id="currentIdRef"></SpreadShareholder>
-      </q-tab-panel>
-      <q-tab-panel name="supervision">
-        <SreadSupervision :relation-id="currentIdRef"></SreadSupervision>
-      </q-tab-panel>
-      <q-tab-panel name="coreIndicator">
-        <SreadCoreIndicator :relation-id="currentIdRef"></SreadCoreIndicator>
-      </q-tab-panel>
-    </q-tab-panels>
-    <!--
-    <div class="p-2">
-      <q-list padding bordered class="rounded-borders" dense>
-        <q-expansion-item expand-separator icon="bi-geo-alt" :label="$t('erm.appetite.spread.businessObject.grid.title')" default-opened class="bg-neutral-200">
-          <q-card>
-            <q-card-section class="p-0">
-              <SpreadBusinessObject :relation-id="currentIdRef"></SpreadBusinessObject>
-            </q-card-section>
-          </q-card>
-        </q-expansion-item>
-        <q-expansion-item expand-separator icon="bi-geo-alt" :label="$t('erm.appetite.spread.industry.grid.title')" default-opened class="bg-neutral-200">
-          <q-card>
-            <q-card-section class="p-0">
-              <SpreadIndustry :relation-id="currentIdRef"></SpreadIndustry>
-            </q-card-section>
-          </q-card>
-        </q-expansion-item>
-        <q-expansion-item expand-separator icon="bi-geo-alt" :label="$t('erm.appetite.spread.shareholder.grid.title')" default-opened class="bg-neutral-200">
-          <q-card>
-            <q-card-section class="p-0">
-              <SpreadShareholder :relation-id="currentIdRef"></SpreadShareholder>
-            </q-card-section>
-          </q-card>
-        </q-expansion-item>
-        <q-expansion-item expand-separator icon="bi-geo-alt" :label="$t('erm.appetite.spread.supervision.grid.title')" default-opened class="bg-neutral-200">
-          <q-card>
-            <q-card-section class="p-0">
-              <SreadSupervision :relation-id="currentIdRef"></SreadSupervision>
-            </q-card-section>
-          </q-card>
-        </q-expansion-item>
-        <q-expansion-item expand-separator icon="bi-geo-alt" :label="$t('erm.appetite.spread.coreIndicator.grid.title')" default-opened class="bg-neutral-200">
-          <q-card>
-            <q-card-section class="p-0">
-              <SreadCoreIndicator :relation-id="currentIdRef"></SreadCoreIndicator>
-            </q-card-section>
-          </q-card>
-        </q-expansion-item>
-      </q-list>
-    </div>
-    -->
-  </w-dialog>
-</template>
-<script setup lang="ts">
-import { ref, onUpdated } from 'vue';
-import { axios, Environment, NotifyManager, Tools, DictionaryTools } from 'platform-core';
-import SpreadBusinessObject from './SpreadBusinessObject.vue';
-import SpreadIndustry from './SpreadIndustry.vue';
-import SpreadShareholder from './SpreadShareholder.vue';
-import SreadSupervision from './SreadSupervision.vue';
-import SreadCoreIndicator from './SreadCoreIndicator.vue';
-
-const dialogRef = ref();
-const selectedTabRef = ref('businessObject');
-const currentIdRef = ref('');
-
-const open = (id: string) => {
-  currentIdRef.value = id;
-  dialogRef.value.show();
-};
-
-const close = () => {
-  dialogRef.value.hide();
-};
-
-defineExpose({
-  open,
-  close,
-});
-
-const BANK_BUSINESS = await DictionaryTools.fetch('BANK_BUSINESS');
-</script>

erm.frontend/src/views/appetite/spread/SpreadDialog.vue

@@ -0,0 +1,98 @@
+<template>
+  <w-dialog ref="dialogRef" :title="$t('erm.appetite.spread.detail.dialog.title')" width="1200px" height="700px" :can-maximize="false">
+    <q-tabs v-model="selectedTabRef" inline-label active-bg-color="primary" active-color="white">
+      <q-tab name="businessObject" icon="bi-graph-up-arrow" :label="$t('erm.appetite.spread.businessObject.grid.title')" no-caps> </q-tab>
+      <q-tab name="industry" icon="bi-grid-3x3-gap" :label="$t('erm.appetite.spread.industry.grid.title')" no-caps> </q-tab>
+      <q-tab name="shareholder" icon="bi-people" :label="$t('erm.appetite.spread.shareholder.grid.title')" no-caps> </q-tab>
+      <q-tab name="supervision" icon="bi-stoplights" :label="$t('erm.appetite.spread.supervision.grid.title')" no-caps> </q-tab>
+      <q-tab name="coreIndicator" icon="bi-speedometer2" :label="$t('erm.appetite.spread.coreIndicator.grid.title')" no-caps> </q-tab>
+    </q-tabs>
+    <q-tab-panels v-model="selectedTabRef" swipeable vertical transition-prev="jump-up" transition-next="jump-up">
+      <q-tab-panel name="businessObject">
+        <SpreadBusinessObject :relation-id="currentIdRef"></SpreadBusinessObject>
+      </q-tab-panel>
+      <q-tab-panel name="industry">
+        <SpreadIndustry :relation-id="currentIdRef"></SpreadIndustry>
+      </q-tab-panel>
+      <q-tab-panel name="shareholder">
+        <SpreadShareholder :relation-id="currentIdRef"></SpreadShareholder>
+      </q-tab-panel>
+      <q-tab-panel name="supervision">
+        <SreadSupervision :relation-id="currentIdRef"></SreadSupervision>
+      </q-tab-panel>
+      <q-tab-panel name="coreIndicator">
+        <SreadCoreIndicator :relation-id="currentIdRef"></SreadCoreIndicator>
+      </q-tab-panel>
+    </q-tab-panels>
+    <!--
+    <div class="p-2">
+      <q-list padding bordered class="rounded-borders" dense>
+        <q-expansion-item expand-separator icon="bi-geo-alt" :label="$t('erm.appetite.spread.businessObject.grid.title')" default-opened class="bg-neutral-200">
+          <q-card>
+            <q-card-section class="p-0">
+              <SpreadBusinessObject :relation-id="currentIdRef"></SpreadBusinessObject>
+            </q-card-section>
+          </q-card>
+        </q-expansion-item>
+        <q-expansion-item expand-separator icon="bi-geo-alt" :label="$t('erm.appetite.spread.industry.grid.title')" default-opened class="bg-neutral-200">
+          <q-card>
+            <q-card-section class="p-0">
+              <SpreadIndustry :relation-id="currentIdRef"></SpreadIndustry>
+            </q-card-section>
+          </q-card>
+        </q-expansion-item>
+        <q-expansion-item expand-separator icon="bi-geo-alt" :label="$t('erm.appetite.spread.shareholder.grid.title')" default-opened class="bg-neutral-200">
+          <q-card>
+            <q-card-section class="p-0">
+              <SpreadShareholder :relation-id="currentIdRef"></SpreadShareholder>
+            </q-card-section>
+          </q-card>
+        </q-expansion-item>
+        <q-expansion-item expand-separator icon="bi-geo-alt" :label="$t('erm.appetite.spread.supervision.grid.title')" default-opened class="bg-neutral-200">
+          <q-card>
+            <q-card-section class="p-0">
+              <SreadSupervision :relation-id="currentIdRef"></SreadSupervision>
+            </q-card-section>
+          </q-card>
+        </q-expansion-item>
+        <q-expansion-item expand-separator icon="bi-geo-alt" :label="$t('erm.appetite.spread.coreIndicator.grid.title')" default-opened class="bg-neutral-200">
+          <q-card>
+            <q-card-section class="p-0">
+              <SreadCoreIndicator :relation-id="currentIdRef"></SreadCoreIndicator>
+            </q-card-section>
+          </q-card>
+        </q-expansion-item>
+      </q-list>
+    </div>
+    -->
+  </w-dialog>
+</template>
+<script setup lang="ts">
+import { ref, onUpdated } from 'vue';
+import { axios, Environment, NotifyManager, Tools, DictionaryTools } from 'platform-core';
+import SpreadBusinessObject from './SpreadBusinessObject.vue';
+import SpreadIndustry from './SpreadIndustry.vue';
+import SpreadShareholder from './SpreadShareholder.vue';
+import SreadSupervision from './SreadSupervision.vue';
+import SreadCoreIndicator from './SreadCoreIndicator.vue';
+
+const dialogRef = ref();
+const selectedTabRef = ref('businessObject');
+const currentIdRef = ref('');
+
+const open = (id: string) => {
+  currentIdRef.value = id;
+  dialogRef.value.show();
+};
+
+const close = () => {
+  dialogRef.value.hide();
+};
+
+defineExpose({
+  open,
+  close,
+});
+
+const BANK_BUSINESS = await DictionaryTools.fetch('BANK_BUSINESS');
+</script>

io.sc.platform.core.frontend/src/platform/components/layout/WVExpandDiv.vue

@@ -9,12 +9,13 @@
   </div>
 </template>
 <script setup lang="ts">
-import { inject, ref, onMounted, watch } from 'vue';
+import { inject, ref, onMounted, watch, nextTick, onUpdated } from 'vue';
 import { useQuasar } from 'quasar';
 import { Environment } from '@/platform/plugin/environment';
 
 const props = defineProps({
   minHeight: { type: Number, default: 100 },
+  expand: { type: String, default: 'main' },
 });
 
 const gc = Environment.getConfigure();
@@ -23,29 +24,45 @@ const containerRef = ref<HTMLElement>();
 const containerHeightRef = ref(props.minHeight);
 
 onMounted(() => {
-  watch(gc, (newValue) => {
-    changeDivHeight();
-  });
-  changeDivHeight();
   const eventBus = inject('eventBus');
   eventBus.on('onWindowResize', () => {
     changeDivHeight();
   });
+  watch(gc, (newValue) => {
+    changeDivHeight();
+  });
+  changeDivHeight();
+});
+
+onUpdated(() => {
+  changeDivHeight();
 });
 
 const changeDivHeight = () => {
   if (containerRef.value) {
-    const y = containerRef.value.getBoundingClientRect().y;
+    if (props.expand === 'main') {
-    if (y >= q.screen.height) {
+      const availableHeight = q.screen.height;
-      containerHeightRef.value = 0;
+      const y = Math.ceil(containerRef.value.getBoundingClientRect().y);
-    } else {
+      if (y >= availableHeight) {
-      let height = q.screen.height - y;
+        containerHeightRef.value = 0;
-      height -= gc.theme.main.containerPaddingBottom;
+      } else {
-      if (gc.theme.footer.enable) {
+        let height = availableHeight - y;
-        height -= gc.theme.footer.height;
+        height -= gc.theme.main.containerPaddingBottom;
+        if (gc.theme.footer.enable) {
+          height -= gc.theme.footer.height;
+        }
+        containerHeightRef.value = height > 0 ? height : 0;
+      }
+    } else if (props.expand === 'parent') {
+      const parentElement = containerRef.value.parentElement;
+      const availableHeight = Math.floor(parentElement.getBoundingClientRect().y) + Math.floor(parentElement.clientHeight);
+      const y = Math.ceil(containerRef.value.getBoundingClientRect().y);
+      if (y >= availableHeight) {
+        containerHeightRef.value = 0;
+      } else {
+        let height = availableHeight - y;
+        containerHeightRef.value = height > 0 ? height : 0;
       }
-      containerHeightRef.value = height > 0 ? height : 0;
-      return height > 0 ? height : 0;
     }
   }
 };

io.sc.platform.core.frontend/src/views/FormElements.vue

@@ -1,59 +1,258 @@
 <template>
-  <q-splitter v-model="splitWidthRef">
+  <div class="q-pa-md">
-    <template #before>
+    <q-table flat bordered separator="cell" title="Treats" :rows="rows2" :columns="columns" row-key="name" hide-no-data>
-      <q-tabs v-model="selectedTab" vertical no-caps>
+      <template v-if="rows && rows.length > 0" #header="props">
-        <q-tab name="formElements" label="All Form Elements" />
+        <q-tr :props="props">
-        <q-tab name="codemirror" label="code-mirror" />
+          <q-th v-for="col in props.cols" :key="col.name" :props="props" class="text-italic text-purple">
-      </q-tabs>
+            {{ col.label }}
-    </template>
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-else #header="props">
+        <q-tr :props="props">
+          <q-th v-for="col in props.cols" :key="col.name" :props="props" class="text-italic text-purple">
+            {{ col.label }}
+          </q-th>
+        </q-tr>
+        <q-tr :props="props" style="height: 300px"> </q-tr>
+      </template>
 
-    <template #after>
+      <template #body="props">
-      <q-tab-panels v-model="selectedTab" animated swipeable vertical transition-prev="jump-up" transition-next="jump-up">
+        <q-tr :props="props">
-        <q-tab-panel name="formElements">
+          <q-td key="name" :props="props">
-          <w-form
+            {{ props.row.name }}
-            :cols-num="1"
+          </q-td>
-            :fields="[
+          <q-td key="calories" :props="props">
-              { name: 'color', label: 'please select color', type: 'color-input', outlined: true, dense: true },
+            <q-badge color="green">
-              { name: 'colorPalette', label: 'please select color palette', type: 'color-input-palette', outlined: true, dense: true },
+              {{ props.row.calories }}
-              {
+            </q-badge>
-                name: 'codemirror',
+          </q-td>
-                label: 'please input SQL',
+          <q-td key="fat" :props="props">
-                type: 'code-mirror',
+            <q-badge color="purple">
-                outlined: true,
+              {{ props.row.fat }}
-                lang: 'sql',
+            </q-badge>
-                dense: true,
+          </q-td>
-                rows: 5,
+          <q-td key="carbs" :props="props">
-                readonlyIf: () => {
+            <q-badge color="orange">
-                  return true;
+              {{ props.row.carbs }}
-                },
+            </q-badge>
-              },
+          </q-td>
-              { name: 'cron', label: 'please input cron expression', type: 'cron', outlined: true, dense: true },
+          <q-td key="protein" :props="props">
-              { name: 'position', label: 'please select position', type: 'position', outlined: true, dense: true, readOnly: true },
+            <q-badge color="primary">
-              { name: 'icon', label: 'please select icon', type: 'icon', outlined: true, dense: true },
+              {{ props.row.protein }}
-              { name: 'dataComeFrom', label: '', type: 'select', options: Options.enum(DataComeFromEnums.DataComeFrom) },
+            </q-badge>
-              { name: 'dataComeFrom', label: '', type: 'select', options: Options.enum(DataComeFromEnums.UrlOpenType) },
+          </q-td>
-            ]"
+          <q-td key="sodium" :props="props">
-          >
+            <q-badge color="teal">
-          </w-form>
+              {{ props.row.sodium }}
-        </q-tab-panel>
+            </q-badge>
-        <q-tab-panel name="codemirror">
+          </q-td>
-          <q-input v-model="valueRef" label="please input number 1:" outlined dense clearable></q-input>
+          <q-td key="calcium" :props="props">
-          <w-code-mirror v-model="valueRef" label="please input SQL:" lang="sql" outlined dense></w-code-mirror>
+            <q-badge color="accent">
-          <q-input v-model="valueRef" label="please input number 2:" outlined dense clearable></q-input>
+              {{ props.row.calcium }}
-          <w-icon v-model="iconValueRef" label="please select icon:" lang="sql" outlined dense></w-icon>
+            </q-badge>
-        </q-tab-panel>
+          </q-td>
-      </q-tab-panels>
+          <q-td key="iron" :props="props">
-    </template>
+            <q-badge color="amber">
-  </q-splitter>
+              {{ props.row.iron }}
+            </q-badge>
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+  </div>
 </template>
-<script setup lang="ts">
-import { ref } from 'vue';
-import { EnumTools, Options } from '@/platform';
 
-const selectedTab = ref('codemirror');
+<script>
-const splitWidthRef = ref(20);
+import { ref } from 'vue';
-const valueRef = ref('xxxx');
+const columns = [
-const iconValueRef = ref('8k_plus');
+  {
+    name: 'name',
+    required: true,
+    label: 'Dessert (100g serving)',
+    align: 'left',
+    field: (row) => row.name,
+    format: (val) => `${val}`,
+    sortable: true,
+  },
+  { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
+  { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
+  { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
+  { name: 'protein', label: 'Protein (g)', field: 'protein' },
+  { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
+  { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
+  { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
+];
+const rows = [];
+const rows2 = [
+  {
+    name: 'Frozen Yogurt',
+    calories: 159,
+    fat: 6.0,
+    carbs: 24,
+    protein: 4.0,
+    sodium: 87,
+    calcium: '14%',
+    iron: '1%',
+  },
+  {
+    name: 'Ice cream sandwich',
+    calories: 237,
+    fat: 9.0,
+    carbs: 37,
+    protein: 4.3,
+    sodium: 129,
+    calcium: '8%',
+    iron: '1%',
+  },
+  {
+    name: 'Eclair',
+    calories: 262,
+    fat: 16.0,
+    carbs: 23,
+    protein: 6.0,
+    sodium: 337,
+    calcium: '6%',
+    iron: '7%',
+  },
+  {
+    name: 'Cupcake',
+    calories: 305,
+    fat: 3.7,
+    carbs: 67,
+    protein: 4.3,
+    sodium: 413,
+    calcium: '3%',
+    iron: '8%',
+  },
+  {
+    name: 'Gingerbread',
+    calories: 356,
+    fat: 16.0,
+    carbs: 49,
+    protein: 3.9,
+    sodium: 327,
+    calcium: '7%',
+    iron: '16%',
+  },
+  {
+    name: 'Jelly bean',
+    calories: 375,
+    fat: 0.0,
+    carbs: 94,
+    protein: 0.0,
+    sodium: 50,
+    calcium: '0%',
+    iron: '0%',
+  },
+  {
+    name: 'Lollipop',
+    calories: 392,
+    fat: 0.2,
+    carbs: 98,
+    protein: 0,
+    sodium: 38,
+    calcium: '0%',
+    iron: '2%',
+  },
+  {
+    name: 'Honeycomb',
+    calories: 408,
+    fat: 3.2,
+    carbs: 87,
+    protein: 6.5,
+    sodium: 562,
+    calcium: '0%',
+    iron: '45%',
+  },
+  {
+    name: 'Donut',
+    calories: 452,
+    fat: 25.0,
+    carbs: 51,
+    protein: 4.9,
+    sodium: 326,
+    calcium: '2%',
+    iron: '22%',
+  },
+  {
+    name: 'KitKat',
+    calories: 518,
+    fat: 26.0,
+    carbs: 65,
+    protein: 7,
+    sodium: 54,
+    calcium: '12%',
+    iron: '6%',
+  },
+  {
+    name: 'KitKat',
+    calories: 518,
+    fat: 26.0,
+    carbs: 65,
+    protein: 7,
+    sodium: 54,
+    calcium: '12%',
+    iron: '6%',
+  },
+  {
+    name: 'KitKat',
+    calories: 518,
+    fat: 26.0,
+    carbs: 65,
+    protein: 7,
+    sodium: 54,
+    calcium: '12%',
+    iron: '6%',
+  },
+  {
+    name: 'KitKat',
+    calories: 518,
+    fat: 26.0,
+    carbs: 65,
+    protein: 7,
+    sodium: 54,
+    calcium: '12%',
+    iron: '6%',
+  },
+  {
+    name: 'KitKat',
+    calories: 518,
+    fat: 26.0,
+    carbs: 65,
+    protein: 7,
+    sodium: 54,
+    calcium: '12%',
+    iron: '6%',
+  },
+  {
+    name: 'KitKat',
+    calories: 518,
+    fat: 26.0,
+    carbs: 65,
+    protein: 7,
+    sodium: 54,
+    calcium: '12%',
+    iron: '6%',
+  },
+  {
+    name: 'KitKat',
+    calories: 518,
+    fat: 26.0,
+    carbs: 65,
+    protein: 7,
+    sodium: 54,
+    calcium: '12%',
+    iron: '6%',
+  },
+];
 
-const DataComeFromEnums = await EnumTools.fetch(['io.sc.platform.orm.api.enums.DataComeFrom', 'io.sc.platform.system.enums.UrlOpenType']);
+export default {
+  setup() {
+    return {
+      columns,
+      rows,
+    };
+  },
+};
 </script>