表格优化提交

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

@@ -525,7 +525,7 @@ const queryFormFieldsComputed = computed(() => {
 });
 const toolbarButtonsComputed = computed(() => {
   localFlag.value;
-  return buttons_;
+  return buttons_.value;
 });
 
 const table = reactive({
@@ -551,13 +551,6 @@ const table = reactive({
 });
 provide('table', table);
 
-const expandIconComputed = computed(() => {
-  return table.treeExpand ? 'expand_less' : 'expand_more';
-});
-const expandLabelI18nKeyComputed = computed(() => {
-  return table.treeExpand ? 'action.expandUp' : 'action.expandDown';
-});
-
 const remove = () => {
   const ids = <any>[];
   if (getTickedRowsComputed.value && getTickedRowsComputed.value.length > 0) {
@@ -814,9 +807,12 @@ const buttonObj = reactive({
   },
   expand: {
     name: 'expand',
-    icon: expandIconComputed,
-    labelI18nKey: expandLabelI18nKeyComputed,
-    label: t(expandLabelI18nKeyComputed.value),
+    icon: (args) => {
+      return table.treeExpand ? 'expand_less' : 'expand_more';
+    },
+    label: (args) => {
+      return table.treeExpand ? t('action.collapseAll') : t('action.expandAll');
+    },
     click: () => {
       expandFun(table.rows, table.treeExpand);
       table.treeExpand = !table.treeExpand;
@@ -853,7 +849,7 @@ const expandFun = (arr, treeExpand) => {
 };
 
 // 处理toobar
-const buttons_ = <any>[];
+const buttons_ = ref(<any>[]);
 const handleChildrenBtn = (arr) => {
   const tempArr = <any>[];
   for (let i = 0; i < arr.length; i++) {
@@ -874,17 +870,17 @@ const handleChildrenBtn = (arr) => {
   return tempArr;
 };
 const handleToolbarActions = () => {
-  buttons_.splice(0, buttons_.length);
+  buttons_.value.splice(0, buttons_.value.length);
   props.toolbarActions.forEach((btn: any, index) => {
     if (typeof btn === 'string' && buttonObj[btn]) {
-      buttons_.push(buttonObj[btn]);
+      buttons_.value.push(buttonObj[btn]);
     } else if (Array.isArray(btn) && btn.length > 0) {
-      buttons_.push(handleChildrenBtn(btn));
+      buttons_.value.push(handleChildrenBtn(btn));
     } else if (typeof btn === 'object' && btn.extend && buttonObj[btn.extend]) {
       // 继承内置按钮
-      buttons_.push({ ...buttonObj[btn.extend], ...btn, _click: buttonObj[btn.extend].click });
+      buttons_.value.push({ ...buttonObj[btn.extend], ...btn, _click: buttonObj[btn.extend].click });
     } else {
-      buttons_.push(btn);
+      buttons_.value.push(btn);
     }
   });
 };
@@ -1831,7 +1827,7 @@ const stickyHeaderColumn = (time = 500) => {
     tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 50 + 'px');
     tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomButtonHeight', 40 + 'px');
   }
-  if (props.title || buttons_.length > 0 || props.configButton) {
+  if (props.title || buttons_.value.length > 0 || props.configButton) {
     tableRef.value.$el.getElementsByClassName('q-table__top')[0].style.setProperty('--tableTopPadding', '8px');
   } else {
     tableRef.value.$el.getElementsByClassName('q-table__top')[0].style.setProperty('--tableTopPadding', '0px');
@@ -2223,7 +2219,7 @@ const handlerQueryFormShowField = () => {
     });
   } else {
     // 一行应该显示的字段个数
-    const rowColsNum = queryFormRef.value.getColsNum() * (props.queryFormRowNum || 1);
+    const rowColsNum = (Tools.isUndefinedOrNull(queryFormRef.value) ? 4 : queryFormRef.value.getColsNum()) * (props.queryFormRowNum || 1);
     let currRowColsNum = 0;
     props.queryFormFields.forEach((item: any) => {
       if (Tools.hasOwnProperty(item, 'colSpan')) {

io.sc.platform.core.frontend/src/platform/components/toolbar/ChildrenBtn.vue

@@ -14,7 +14,7 @@
     "
   >
     <q-item-section>
-      <q-item-label><q-icon v-if="button[0].icon" :name="button[0].icon" left size="20px"></q-icon> {{ button[0].label }}</q-item-label>
+      <q-item-label><q-icon v-if="button[0].icon" :name="getIcon(button[0].icon)" left size="20px"></q-icon> {{ getLabel(button[0].label) }}</q-item-label>
     </q-item-section>
     <q-item-section side>
       <q-icon name="keyboard_arrow_right" />
@@ -31,6 +31,8 @@
             :button="childrenBtn"
             :grid="grid"
             :button-click="buttonClick"
+            :get-icon="getIcon"
+            :get-label="getLabel"
           ></ChildrenBtn>
           <template v-else>
             <q-item
@@ -58,7 +60,9 @@
               @click="buttonClick(childrenBtn)"
             >
               <q-item-section>
-                <q-item-label><q-icon v-if="childrenBtn.icon" :name="childrenBtn.icon" left size="20px"></q-icon> {{ childrenBtn.label }}</q-item-label>
+                <q-item-label
+                  ><q-icon v-if="childrenBtn.icon" :name="getIcon(childrenBtn.icon)" left size="20px"></q-icon> {{ getLabel(childrenBtn.label) }}</q-item-label
+                >
               </q-item-section>
             </q-item>
           </template>
@@ -88,6 +92,18 @@ const props = defineProps({
       return () => {};
     },
   },
+  getIcon: {
+    type: Function,
+    default: () => {
+      return () => {};
+    },
+  },
+  getLabel: {
+    type: Function,
+    default: () => {
+      return () => {};
+    },
+  },
   dense: { type: Boolean, default: false },
 });
 const firstSelectedComputed = computed(() => {

io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="w-toolbar">
     <div
       ref="containerRef"
       :class="'flex ' + (align === 'left' ? 'justify-start' : align === 'center' ? 'justify-center' : 'justify-end') + ' gap-x-[' + props.xGap + 'px]'"
@@ -9,12 +9,14 @@
         <q-separator v-if="typeof btn.data === 'string' && btn.data === 'separator'" vertical class="class-action-item" />
         <q-btn-dropdown
           v-else-if="Array.isArray(btn.data) && btn.data.length > 0"
-          :padding="dense ? '0px 0px' : undefined"
           unelevated
+          :dense="dense"
           outline
+          no-wrap
+          no-caps
           v-bind="btn.data[0]"
-          :label="dense ? '' : btn.data[0].label"
-          :icon="dense ? undefined : btn.data[0].icon"
+          :label="dense ? '' : getLabel(btn.data[0].label)"
+          :icon="dense ? undefined : getIcon(btn.data[0].icon)"
           :split="btn.data[0].click ? true : false"
           :disable="
             btn.data[0].enableIf
@@ -28,12 +30,13 @@
               : false
           "
           class="class-action-item"
+          content-class="w-toolbar-btn-dropdown"
           @click="buttonClick(btn.data[0])"
         >
           <template v-if="dense" #label>
-            <div :style="btn.data[0].click ? 'padding: 0px 8px' : 'padding: 0px 0px 0px 8px'">
-              <q-icon v-if="btn.data[0].icon" :name="btn.data[0].icon" size="xs"></q-icon>
-              <span style="padding-left: 3px">{{ btn.data[0].label }}</span>
+            <div :style="btn.data[0].click ? 'padding: 0px 8px' : 'padding: 0px 5px 0px 8px'">
+              <q-icon v-if="btn.data[0].icon" :name="getIcon(btn.data[0].icon)" size="xs"></q-icon>
+              <span style="padding-left: 3px">{{ getLabel(btn.data[0].label) }}</span>
             </div>
           </template>
           <q-list>
@@ -46,6 +49,8 @@
                   :button="childrenBtn"
                   :grid="grid"
                   :button-click="buttonClick"
+                  :get-icon="getIcon"
+                  :get-label="getLabel"
                   :dense="dense"
                 ></ChildrenBtn>
                 <q-item
@@ -66,7 +71,10 @@
                   @click="buttonClick(childrenBtn)"
                 >
                   <q-item-section>
-                    <q-item-label><q-icon v-if="childrenBtn.icon" :name="childrenBtn.icon" left size="20px"></q-icon> {{ childrenBtn.label }}</q-item-label>
+                    <q-item-label
+                      ><q-icon v-if="childrenBtn.icon" :name="getIcon(childrenBtn.icon)" left size="20px"></q-icon>
+                      {{ getLabel(childrenBtn.label) }}</q-item-label
+                    >
                   </q-item-section>
                 </q-item>
               </template>
@@ -92,14 +100,14 @@
           outline
           v-bind="btn.data"
           align="center"
-          :icon="dense ? undefined : btn.data.icon"
-          :label="dense ? '' : btn.data.label"
+          :icon="dense ? undefined : getIcon(btn.data.icon)"
+          :label="dense ? '' : getLabel(btn.data.label)"
           class="class-action-item"
           @click="buttonClick(btn.data)"
         >
           <div v-if="dense">
-            <q-icon v-if="btn.data.icon" :name="btn.data.icon" size="xs"></q-icon>
-            <span style="padding-left: 3px">{{ btn.data.label }}</span>
+            <q-icon v-if="btn.data.icon" :name="getIcon(btn.data.icon)" size="xs"></q-icon>
+            <span style="padding-left: 3px">{{ getLabel(btn.data.label) }}</span>
           </div>
         </q-btn>
       </template>
@@ -110,13 +118,15 @@
         unelevated
         outline
         label=""
+        no-wrap
+        no-caps
         :icon="undefined"
-        padding="0px 0px"
         :dense="dense"
         class="class-action-item"
+        content-class="w-toolbar-btn-dropdown"
       >
         <template #label>
-          <div style="padding: 0px 8px">
+          <div style="padding: 0px 5px 0px 8px">
             <span>{{ $t('more') }}</span>
           </div>
         </template>
@@ -128,6 +138,8 @@
               :button="childrenBtn.data"
               :grid="grid"
               :button-click="buttonClick"
+              :get-icon="getIcon"
+              :get-label="getLabel"
               :dense="dense"
             ></ChildrenBtn>
             <q-item
@@ -149,7 +161,8 @@
             >
               <q-item-section>
                 <q-item-label
-                  ><q-icon v-if="childrenBtn.data.icon" :name="childrenBtn.data.icon" left size="20px"></q-icon> {{ childrenBtn.data.label }}</q-item-label
+                  ><q-icon v-if="childrenBtn.data.icon" :name="getIcon(childrenBtn.data.icon)" left size="20px"></q-icon>
+                  {{ getLabel(childrenBtn.data.label) }}</q-item-label
                 >
               </q-item-section>
             </q-item>
@@ -161,7 +174,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, reactive, computed, nextTick, onUpdated } from 'vue';
+import { ref, reactive, computed, nextTick, onUpdated, watch } from 'vue';
 import { eventBus } from '@/platform';
 import { Tools } from '@/platform/utils';
 import ChildrenBtn from './ChildrenBtn.vue';
@@ -348,11 +361,6 @@ const moreActionsComputed = computed(() => {
   return moreActions.value;
 });
 
-// onUpdated(() => {
-//   nextTick(() => {
-//     console.info('buttons=====', props.buttons);
-//   });
-// });
 eventBus.on('onLocaleChanged', () => {
   nextTick(() => {
     extractButton(props.buttons);
@@ -362,6 +370,15 @@ eventBus.on('onLocaleChanged', () => {
     isActionWidthInitializedRef.value = false;
   });
 });
+// onUpdated(() => {
+//   console.info('onupdated====', props.buttons);
+// });
+// watch(
+//   () => props.buttons.map((item) => item['label']),
+//   (newVal, oldVal) => {
+//     console.info('watch====', newVal);
+//   },
+// );
 
 const loadingComputed = computed(() => {
   return function (btn) {
@@ -372,6 +389,36 @@ const loadingComputed = computed(() => {
     }
   };
 });
+const getIcon = (icon) => {
+  if (Tools.isUndefinedOrNull(icon)) {
+    return undefined;
+  } else if (typeof icon === 'function') {
+    return icon({
+      selected: firstSelectedComputed.value,
+      selecteds: selectedComputed.value,
+      ticked: firstTickedComputed.value,
+      tickeds: tickedComputed.value,
+      grid: props.grid,
+    });
+  } else {
+    return icon;
+  }
+};
+const getLabel = (label) => {
+  if (Tools.isUndefinedOrNull(label)) {
+    return '';
+  } else if (typeof label === 'function') {
+    return label({
+      selected: firstSelectedComputed.value,
+      selecteds: selectedComputed.value,
+      ticked: firstTickedComputed.value,
+      tickeds: tickedComputed.value,
+      grid: props.grid,
+    });
+  } else {
+    return label;
+  }
+};
 const firstSelectedComputed = computed(() => {
   if (Object.keys(props.grid).length > 0 && props.grid.getSelectedRows().length > 0) {
     return props.grid.getSelectedRows()[0];
@@ -429,13 +476,16 @@ const buttonClick = async (button) => {
 };
 </script>
 
-<style scoped lang="css">
-.q-btn.disabled {
+<style lang="css">
+.w-toolbar-btn-dropdown .q-btn.disabled {
   opacity: 0.7 !important;
   color: #a8a8a8;
 }
-.q-item.disabled {
+.w-toolbar-btn-dropdown .q-item.disabled {
   opacity: 0.6 !important;
   color: #a8a8a8;
 }
+.w-toolbar .q-btn-dropdown__arrow {
+  margin-left: 0px !important;
+}
 </style>

io.sc.platform.core.frontend/src/platform/i18n/messages.json

@@ -141,8 +141,8 @@
   "action.export": "Export",
   "action.export.failed": "Export Failed",
   "action.submit": "Submit",
-  "action.expandUp": "Expand Up",
-  "action.expandDown": "Expand Down",
+  "action.expandAll": "Expand All",
+  "action.collapseAll": "Collapse All",
 
   "tip.noData": "No Data",
   "tip.dataLoading": "Data Loading",

io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json

@@ -141,8 +141,8 @@
   "action.export": "導出",
   "action.export.failed": "導出失敗",
   "action.submit": "提交",
-  "action.expandUp": "全部收起",
-  "action.expandDown": "全部展开",
+  "action.expandAll": "全部展开",
+  "action.collapseAll": "全部收起",
 
   "tip.noData": "未查找到任何數據",
   "tip.dataLoading": "數據加載中",

io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json

@@ -141,8 +141,8 @@
   "action.export": "导出",
   "action.export.failed": "导出失败",
   "action.submit": "提交",
-  "action.expandUp": "全部收起",
-  "action.expandDown": "全部展开",
+  "action.expandAll": "全部展开",
+  "action.collapseAll": "全部收起",
 
   "tip.noData": "未查找到任何数据",
   "tip.dataLoading": "数据加载中",