组件属性重命名及拆分属性

io.sc.platform.core.frontend/src/components/index.ts

@@ -14,6 +14,7 @@ import grid from '@/views/likm/Grid.vue';
 import toolbar from '@/views/likm/Toolbar.vue';
 import quasarGrid from '@/views/likm/QuasarGrid.vue';
 import gridLayout from '@/views/likm/GridLayout.vue';
+import likmTreeGrid from '@/views/likm/TreeGrid.vue';
 
 const localComponents = {
   'component.testcase.dialog': dialog,
@@ -28,6 +29,7 @@ const localComponents = {
   'component.testcase.toolbar': toolbar,
   'component.testcase.quasarGrid': quasarGrid,
   'component.testcase.gridLayout': gridLayout,
+  'component.testcase.likmTreeGrid': likmTreeGrid,
 };
 
 export default localComponents;

io.sc.platform.core.frontend/src/menus/menus.json

@@ -135,5 +135,14 @@
     "titleI18nKey": "grid布局测试",
     "icon": "bi-palette",
     "routeName": "route.testcase.likm.gridLayout"
+  },
+  {
+    "type": "ROUTE",
+    "order": 800,
+    "parentId": "menu.testcase.likm",
+    "id": "menu.testcase.likm.likmTreeGrid",
+    "titleI18nKey": "treeGrid测试",
+    "icon": "bi-palette",
+    "routeName": "route.testcase.likm.likmTreeGrid"
   }
 ]

io.sc.platform.core.frontend/src/platform/components/form/WForm.vue

@@ -13,8 +13,14 @@
                 : ' col-span-1')
             "
           >
-            <component :is="field.type" v-if="field.name" v-model="formData[field.name]" v-bind="field" :form-data="formData"></component>
+            <component
-            <component :is="field.type" v-else :form-ref="formRef" v-bind="field" :form-data="formData"></component>
+              :is="fiedType[field.type] || field.type"
+              v-if="field.name"
+              v-model="formData[field.name]"
+              v-bind="field"
+              :form-data="formData"
+            ></component>
+            <component :is="fiedType[field.type] || field.type" v-else :form-ref="formRef" v-bind="field" :form-data="formData"></component>
           </div>
         </template>
       </div>
@@ -48,6 +54,16 @@ const formModel: any = {};
 const formFieldsMap = new Map();
 // 不同屏幕尺寸下 colsNum 为 0 时一行显示的字段个数
 const screenCols = { xs: 1, sm: 2, md: 3, lg: 4, xl: 6 };
+const fiedType = {
+  checkbox: 'w-checkbox',
+  date: 'w-date',
+  number: 'w-number',
+  select: 'w-select',
+  text: 'w-text',
+  textarea: 'w-textarea',
+  'text-btn': 'w-text-btn',
+  password: 'w-password',
+};
 
 const defaultValueHandler = (field) => {
   if (field.hasOwnProperty('defaultValue') && field.defaultValue !== null && field.defaultValue !== undefined) {

io.sc.platform.core.frontend/src/platform/components/form/elements/WPassword.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <q-input
+      v-show="!hideIfComputed"
+      :hide-bottom-space="true"
+      :hide-hint="true"
+      :outlined="true"
+      :dense="true"
+      v-bind="attrs"
+      type="password"
+      :rules="rulesComputed"
+      :readonly="readonlyIfComputed"
+      :disable="disableIfComputed"
+    >
+      <template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }}</template>
+    </q-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps, useAttrs } from 'vue';
+import { FormValidators } from '@/platform/components';
+
+const attrs = useAttrs();
+const inRules = attrs.rules;
+const props = defineProps({
+  hideIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  requiredIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  readonlyIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+});
+
+const rulesComputed = computed(() => {
+  let rules = inRules || <any>[];
+  if (!hideIfComputed.value && requiredIfComputed.value) {
+    rules.push(FormValidators.required());
+  } else {
+    rules.splice(rules.length - 1, 1);
+  }
+  return rules;
+});
+
+const hideIfComputed = computed(() => {
+  return props.hideIf();
+});
+const requiredIfComputed = computed(() => {
+  return props.requiredIf();
+});
+const readonlyIfComputed = computed(() => {
+  return props.readonlyIf();
+});
+const disableIfComputed = computed(() => {
+  return props.disableIf();
+});
+</script>

io.sc.platform.core.frontend/src/platform/components/grid/TableRow.vue

@@ -42,9 +42,9 @@ const props = defineProps({
     },
   },
   data: {
-    type: Array,
+    type: Object,
     default: () => {
-      return [];
+      return {};
     },
   },
 });

io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue

@@ -24,8 +24,8 @@
         <q-resize-observer @resize="onResize" />
         <div class="col">
           <w-form ref="queryFormRef" v-bind="props.queryFormAttrs" :fields="table.queryFormFields" :cols-num="queryFormColsNum">
-            <div class="pt-2.5 flex flex-nowrap">
+            <div class="pt-2.5 flex flex-nowrap items-end">
-              <div class="flex-none text-[18px] pt-[9px]">{{ title }}</div>
+              <div class="flex-none">{{ title }}</div>
               <div class="flex-1">
                 <w-toolbar
                   v-bind="toolbarConfigre"
@@ -78,9 +78,7 @@
         </template>
         <template v-else>
           <q-tr :props="scope">
-            <q-th v-if="attrs.selection || attrs.selection === 'multiple'">
+            <q-th v-if="attrs.selection || attrs.selection === 'multiple'" style="padding: 0; width: 50px"> <q-checkbox v-model="scope.selected" flat /></q-th>
-              <q-checkbox v-model="scope.selected" />
-            </q-th>
             <q-th v-else-if="!attrs.selection || attrs.selection !== 'none'"></q-th>
             <q-th v-for="col in scope.cols" :key="col.name" :props="scope" :style="col.style" :class="col.classes">
               {{ col.label }}
@@ -90,8 +88,8 @@
       </template>
       <template #body="scope">
         <q-tr :props="scope" @click="rowClick($el, scope.row, scope.rowIndex)" @dblclick="rowDbClick($el, scope.row, scope.rowIndex)">
-          <q-td v-if="!attrs.selection || attrs.selection !== 'none'" class="text-center">
+          <q-td v-if="!attrs.selection || attrs.selection !== 'none'" class="text-center" style="padding: 0; width: 50px">
-            <q-checkbox v-model="scope.selected" />
+            <q-checkbox v-model="scope.selected" flat />
           </q-td>
           <template v-if="draggable">
             <q-td
@@ -1716,6 +1714,9 @@ defineExpose({
 </script>
 
 <style scoped lang="css">
+:deep(.q-table__top) {
+  padding: 8px 8px;
+}
 :deep(.q-table th) {
   border-left-width: 0px;
   border-right-width: 1px;

io.sc.platform.core.frontend/src/platform/components/index.ts

@@ -23,6 +23,7 @@ import WSelect from './form/elements/WSelect.vue';
 import WDate from './form/elements/WDate.vue';
 import WCheckbox from './form/elements/WCheckbox.vue';
 import WTextBtn from './form/elements/WTextBtn.vue';
+import WPassword from './form/elements/WPassword.vue';
 
 import WInfoPanel from './panel/WInfoPanel.vue';
 
@@ -56,6 +57,7 @@ export default {
     app.component('WDate', WDate);
     app.component('WCheckbox', WCheckbox);
     app.component('WTextBtn', WTextBtn);
+    app.component('WPassword', WPassword);
 
     app.component('WInfoPanel', WInfoPanel);
 
@@ -90,6 +92,7 @@ export {
   WDate,
   WCheckbox,
   WTextBtn,
+  WPassword,
   PlatformGrid,
   WGrid,
   PlatformGridTdDrag,

io.sc.platform.core.frontend/src/routes/routes.json

@@ -142,5 +142,17 @@
     "meta": {
       "permissions": ["/testcase/treeGrid/**/*"]
     }
+  },
+  {
+    "name": "route.testcase.likm.likmTreeGrid",
+    "path": "testcase/likm/likmTreeGrid",
+    "parent": "/",
+    "priority": 0,
+    "component": "component.testcase.likmTreeGrid",
+    "componentPath": "@/views/likm/TreeGrid.vue",
+    "redirect": null,
+    "meta": {
+      "permissions": ["/testcase/treeGrid/**/*"]
+    }
   }
 ]

io.sc.platform.core.frontend/src/views/likm/QuasarGrid.vue

@@ -1,20 +1,16 @@
 <template>
   <div>
-    <q-table
+    <q-table title="Treats" table-style="height: 500px;" :rows="rows" :columns="columns" row-key="name" :flat="true" :selection="'single'" :separator="'cell'">
-      title="Treats"
+      <template #body="bodyProps">
-      table-style="height: 500px;"
+        <TableRow :cols="bodyProps.cols" :data="bodyProps.row"></TableRow>
-      :rows="rows"
+      </template>
-      :columns="columns"
+    </q-table>
-      row-key="name"
-      :flat="true"
-      :selection="'single'"
-      :separator="'cell'"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import TableRow from '@/platform/components/grid/TableRow.vue';
 
 const columns = [
   {
@@ -35,7 +31,7 @@ const columns = [
   { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
 ];
 
-const rows = [
+const rows = ref([
   {
     name: 'Frozen Yogurt',
     calories: 159,
@@ -45,6 +41,19 @@ const rows = [
     sodium: 87,
     calcium: '14%',
     iron: '1%',
+    selected: true,
+    children: [
+      {
+        name: 'Ice cream sandwich3',
+        calories: 237,
+        fat: 9.0,
+        carbs: 37,
+        protein: 4.3,
+        sodium: 129,
+        calcium: '8%',
+        iron: '1%',
+      },
+    ],
   },
   {
     name: 'Ice cream sandwich',
@@ -97,7 +106,7 @@ const rows = [
     iron: '0%',
   },
   {
-    name: 'Lollipop',
+    name: '<span style="color: red">This should be red.</span>',
     calories: 392,
     fat: 0.2,
     carbs: 98,
@@ -136,19 +145,5 @@ const rows = [
     calcium: '12%',
     iron: '6%',
   },
-];
+]);
-
-const separator = ref('vertical');
 </script>
-
-<style scoped lang="css">
-:deep(.q-table) {
-  border-collapse: collapse;
-}
-.q-table--vertical-separator td,
-.q-table--vertical-separator th,
-.q-table--cell-separator td,
-.q-table--cell-separator th {
-  border-bottom-width: 1px !important;
-}
-</style>

io.sc.platform.core.frontend/src/views/likm/TreeGrid.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <w-grid
+      :title="testGrid.title"
+      draggable
+      sort-no
+      tree
+      :row-key="testGrid.rowKey"
+      :data-url="testGrid.dataUrl"
+      :columns="testGrid.tableColumns"
+      :toolbar-actions="testGrid.toolbar"
+      :query-form-fields="testGrid.queryFormFields"
+      :query-form-cols-num="3"
+      :table-pagination="testGrid.pagination"
+    ></w-grid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { axios, Environment } from '@/platform';
+import EnableIcon from '@/platform/components/grid/EnableIcon.vue';
+import { IconEnum } from '@/platform/enums';
+
+const { t } = useI18n();
+
+const testGrid = {
+  title: '菜单列表',
+  rowKey: 'id',
+  dataUrl: Environment.apiContextPath('api/system/menu/allMenus'),
+  pagination: {
+    sortBy: 'lastModifyDate',
+    descending: true,
+    reqPageStart: 0,
+    rowsPerPage: 0,
+  },
+  toolbar: [
+    ['query', 'separator', 'moreQuery'],
+    'reset',
+    'refresh',
+    'separator',
+    {
+      name: 'custBtn',
+      extend: 'add',
+      icon: undefined,
+      label: '自定义按钮',
+      enableIf: (selected) => {
+        if (selected && selected.length > 0) {
+          return true;
+        }
+        return false;
+      },
+      // beforeClick: (selected, context, gridRefs) => {
+      //   console.info('先执行before');
+      //   context.aaa = '111';
+      // },
+      click: (selected, context, _click, gridRefs) => {
+        _click();
+      },
+      afterClick: (selected, context, gridRefs) => {
+        gridRefs.addEditFormRef.setFieldValue('userName', '李四');
+      },
+    },
+    [
+      {
+        name: 'op',
+        icon: 'difference',
+        label: '操作',
+      },
+      'add',
+      'edit',
+      'clone',
+      'remove',
+      'separator',
+      'view',
+      'export',
+    ],
+    'separator',
+  ],
+  queryFormFields: [
+    { label: '菜单名称', name: 'name', type: 'password' },
+    { label: '菜单类型', name: 'userName', type: 'select' },
+    { label: '是否可用', name: 'enable', type: 'select' },
+  ],
+  tableColumns: [
+    {
+      name: 'name',
+      label: '菜单名称',
+      // style: 'width:100%',
+      format: (val, row) => {
+        return t(val);
+      },
+    },
+    {
+      name: 'icon',
+      label: '图标',
+      format: (val, row) => {
+        return {
+          componentsType: 'q-icon',
+          attrs: {
+            name: val,
+            size: 'sm',
+          },
+        };
+      },
+    },
+    { name: 'type', label: '菜单类型' },
+    { name: 'order', label: '排序号' },
+    {
+      name: 'enable',
+      label: '是否可用',
+      align: 'center',
+      format: (val, row) => {
+        return {
+          componentsType: 'q-icon',
+          attrs: {
+            name: val ? IconEnum.是状态 : IconEnum.否状态,
+            color: val ? 'green' : 'red',
+            size: 'sm',
+          },
+        };
+      },
+    },
+    { name: 'lastModifier', label: '最后修改人' },
+    { name: 'lastModifyDate', label: '最后修改时间' },
+  ],
+};
+
+onMounted(() => {
+  // testGridRef.value.replaceRowsFun([{ typeName: '股权投资信息', typeDesc: '股权投资信息', lastModifier: 'admin', lastModifyDate: '2023-12-26' }]);
+});
+</script>