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

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

@@ -6,52 +6,82 @@
         <span :style="`width:${27 * props.level}px;`"></span>
         <!--展开按钮-->
         <q-btn
-          v-if="data.children && data.children.length > 0"
+          v-if="props_.row.children && props_.row.children.length > 0"
           flat
           size="16px"
           dense
           padding="0px 0px"
-          :icon="data.expand ? 'bi-dash' : 'bi-plus'"
+          :icon="props_.row.expand ? 'bi-dash' : 'bi-plus'"
-          @click="data.expand = !data.expand"
+          @click="props_.row.expand = !props_.row.expand"
         />
         <!--展开按钮占位符-->
         <span v-else style="width: 27px"></span>
         <!--选择框-->
-        <q-checkbox v-model="data.selected" flat size="40px" dense />
+        <q-checkbox v-model="props_.row.selected" flat size="40px" dense />
         <!--文件夹图标-->
-        <q-icon v-if="data.children && data.children.length > 0" :name="data.expand ? 'folder_open' : 'folder'" color="amber" size="20px" class="px-1"></q-icon>
+        <q-icon v-if="props_.row.children && props_.row.children.length > 0" :name="'folder'" color="amber" size="20px" class="px-1"></q-icon>
         <!--文件图标-->
-        <q-icon v-else name="bi-file-earmark" size="16px" class="px-1"></q-icon>
+        <q-icon v-else name="note" size="20px" class="px-1"></q-icon>
       </div>
     </q-td>
-    <q-td v-for="col in cols" :key="col.name" :style="{ 'padding-left': '7px' }">
+    <q-td v-for="(col, index) in props_.cols" :key="col.name" :style="{ 'padding-left': '7px' }">
       <div class="flex flex-nowrap items-center">
-        <div v-dompurify-html="col.format ? col.format(data[col.name], data) : col.value"></div>
+        <template v-if="col.name === '_sortNo_'">
+          {{ index + 1 }}
+        </template>
+        <template v-else-if="col.value && typeof col.value === 'object' && col.value.componentType">
+          <component :is="col.value.componentType" v-bind="col.value.attrs"></component>
+        </template>
+        <template v-else>
+          {{ col.value }}
+        </template>
       </div>
     </q-td>
   </q-tr>
-  <template v-for="child in data.children" :key="child.id">
+  <template v-for="child in props_.row.children" :key="child.id">
-    <TreeGridRow v-if="data.expand" :cols="cols" :data="child" :level="props.level + 1"></TreeGridRow>
+    <TreeGridRow v-if="props_.row.expand" :props="propsHandler(child)" :columns-map="columnsMap" :level="props.level + 1"></TreeGridRow>
   </template>
 </template>
 <script setup lang="ts">
 const props = defineProps({
   level: { type: Number, default: 0 },
-  cols: {
+  props: {
-    type: Array,
+    type: Object,
     default: () => {
-      return [];
+      return {};
     },
   },
-  data: {
+  columnsMap: {
-    type: Object,
+    type: Map,
     default: () => {
-      return {};
+      return new Map();
     },
   },
 });
-const cols = props.cols;
-const data = props.data;
 
-console.info('cols===============', cols);
+const props_ = { ...props.props };
+const propsHandler = (child) => {
+  const cols = <any>[];
+  props_.cols.forEach((col) => {
+    if (props.columnsMap.get(col.name) && props.columnsMap.get(col.name).format) {
+      cols.push({ ...col, value: props.columnsMap.get(col.name).format(child[col.name]) });
+    } else {
+      cols.push({ ...col, value: child[col.name] });
+    }
+  });
+  return {
+    key: child.id,
+    row: child,
+    pageIndex: props.props.pageIndex,
+    __trClass: props.props.__trClass,
+    cols: cols,
+    colsMap: props.props.colsMap,
+    rowIndex: props.props.rowIndex,
+    color: props.props.color,
+    dark: props.props.dark,
+    dense: props.props.dense,
+    selected: props.props.selected,
+    expand: props.props.expand,
+  };
+};
 </script>

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

@@ -2,21 +2,21 @@
   <div>
     <q-table
       ref="tableRef"
+      v-bind="attrs"
       v-model:pagination="table.pagination"
       v-model:selected="table.selected"
-      :flat="true"
+      flat
       binary-state-sort
-      :selection="'single'"
+      selection="single"
-      :separator="'cell'"
+      separator="cell"
+      :no-data-label="table.noDataLabel"
+      :loading-label="table.loadingLabel"
       :rows="table.rows"
       :columns="extractTableColumns"
       :rows-per-page-options="pagination.rowsPerPage && table.refHeightWidth.middleWidth > 600 ? table.pagination.rowsPerPageOptions : []"
       :loading="table.loading"
-      :no-data-label="table.noDataLabel"
-      :loading-label="table.loadingLabel"
       :class="tableClassComputed"
       :table-style="tableHeightComputed"
-      v-bind="attrs"
       @request="onRequest"
       @fullscreen="tableFullscreenFun"
     >
@@ -88,7 +88,7 @@
       </template>
       <template #body="scope">
         <template v-if="tree">
-          <TreeGridRow :cols="scope.cols" :data="scope.row"></TreeGridRow>
+          <TreeGridRow :props="scope" :columns-map="tableColumnsMap"></TreeGridRow>
         </template>
         <q-tr v-else :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" style="padding: 0; width: 50px">
@@ -110,8 +110,8 @@
               <template v-if="col.name === '_sortNo_'">
                 {{ scope.rowIndex + 1 }}
               </template>
-              <template v-else-if="col.value && typeof col.value === 'object' && col.value.componentsType">
+              <template v-else-if="col.value && typeof col.value === 'object' && col.value.componentType">
-                <component :is="col.value.componentsType" v-bind="col.value.attrs"></component>
+                <component :is="col.value.componentType" v-bind="col.value.attrs"></component>
               </template>
               <template v-else>
                 {{ col.value }}
@@ -123,8 +123,8 @@
               <template v-if="col.name === '_sortNo_'">
                 {{ scope.rowIndex + 1 }}
               </template>
-              <template v-else-if="col.value && typeof col.value === 'object' && col.value.componentsType">
+              <template v-else-if="col.value && typeof col.value === 'object' && col.value.componentType">
-                <component :is="col.value.componentsType" v-bind="col.value.attrs"></component>
+                <component :is="col.value.componentType" v-bind="col.value.attrs"></component>
               </template>
               <template v-else>
                 {{ col.value }}
@@ -205,6 +205,10 @@ const tableHeadBgColor = gc.theme.dark ? darkBgColor : gc.theme?.grid?.headBgCol
 const tableBorderColor = gc.theme?.grid?.borderColor || 'rgba(0, 0, 0, 0.12)';
 const stickyBgColor = gc.theme.dark ? darkBgColor : gc.theme?.grid?.stickyBgColor || '#ffffff';
 
+const aaa = (a) => {
+  console.info('a============', a);
+  return '111';
+};
 const props = defineProps({
   height: { type: Number, default: 0 }, // 表格高度
   title: { type: String, default: '' }, // 表格标题

io.sc.platform.core.frontend/src/platform/components/panel/WInfoPanel.vue

@@ -7,8 +7,8 @@
             <template v-for="(tdItem, tdIndex) in trItem as any" :key="tdIndex">
               <td :class="labelAlignClassComputed">{{ tdItem.label }}</td>
               <td :class="valueAlignClassComputed">
-                <template v-if="tdItem.value && typeof tdItem.value === 'object' && tdItem.value.componentsType">
+                <template v-if="tdItem.value && typeof tdItem.value === 'object' && tdItem.value.componentType">
-                  <component :is="tdItem.value.componentsType" v-bind="tdItem.value.attrs"></component>
+                  <component :is="tdItem.value.componentType" v-bind="tdItem.value.attrs"></component>
                 </template>
                 <template v-else>
                   {{ tdItem.value }}

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

@@ -87,7 +87,6 @@ const testGrid = {
     {
       name: 'name',
       label: '菜单名称',
-      // style: 'width:100%',
       format: (val, row) => {
         return t(val);
       },
@@ -97,7 +96,7 @@ const testGrid = {
       label: '图标',
       format: (val, row) => {
         return {
-          componentsType: 'q-icon',
+          componentType: 'q-icon',
           attrs: {
             name: val,
             size: 'sm',
@@ -113,7 +112,7 @@ const testGrid = {
       align: 'center',
       format: (val, row) => {
         return {
-          componentsType: 'q-icon',
+          componentType: 'q-icon',
           attrs: {
             name: val ? IconEnum.是状态 : IconEnum.否状态,
             color: val ? 'green' : 'red',