修改列表操作布局

jeecgboot-vue3-master/src/components/Table/src/components/TableAction.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[prefixCls, getAlign]" @click="onCellClick">
+  <div :class="[prefixCls, getAlign]" @click="onCellClick" class="setting">
     <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
       <template v-if="action.slot">
         <slot name="customButton"></slot>
@@ -19,183 +19,198 @@
 
       <Divider type="vertical" class="action-divider" v-if="divider && index < getActions.length - 1" />
     </template>
-    <Dropdown :trigger="['hover']" :dropMenuList="getDropdownList" popconfirm v-if="dropDownActions && getDropdownList.length > 0">
+    <Dropdown :trigger="['hover']" :dropMenuList="getDropdownList" popconfirm
+      v-if="dropDownActions && getDropdownList.length > 0">
       <slot name="more"></slot>
       <a-button type="link" size="small" v-if="!$slots.more"> 更多 <Icon icon="mdi-light:chevron-down"></Icon> </a-button>
     </Dropdown>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, PropType, computed, toRaw, unref } from 'vue';
-  import { MoreOutlined } from '@ant-design/icons-vue';
-  import { Divider, Tooltip, TooltipProps } from 'ant-design-vue';
-  import Icon from '/@/components/Icon/index';
-  import { ActionItem, TableActionType } from '/@/components/Table';
-  import { PopConfirmButton } from '/@/components/Button';
-  import { Dropdown } from '/@/components/Dropdown';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useTableContext } from '../hooks/useTableContext';
-  import { usePermission } from '/@/hooks/web/usePermission';
-  import { isBoolean, isFunction, isString } from '/@/utils/is';
-  import { propTypes } from '/@/utils/propTypes';
-  import { ACTION_COLUMN_FLAG } from '../const';
-
-  export default defineComponent({
-    name: 'TableAction',
-    components: { Icon, PopConfirmButton, Divider, Dropdown, MoreOutlined, Tooltip },
-    props: {
-      actions: {
-        type: Array as PropType<ActionItem[]>,
-        default: null,
-      },
-      dropDownActions: {
-        type: Array as PropType<ActionItem[]>,
-        default: null,
-      },
-      divider: propTypes.bool.def(true),
-      outside: propTypes.bool,
-      stopButtonPropagation: propTypes.bool.def(false),
+import { defineComponent, PropType, computed, toRaw, unref } from 'vue';
+import { MoreOutlined } from '@ant-design/icons-vue';
+import { Divider, Tooltip, TooltipProps } from 'ant-design-vue';
+import Icon from '/@/components/Icon/index';
+import { ActionItem, TableActionType } from '/@/components/Table';
+import { PopConfirmButton } from '/@/components/Button';
+import { Dropdown } from '/@/components/Dropdown';
+import { useDesign } from '/@/hooks/web/useDesign';
+import { useTableContext } from '../hooks/useTableContext';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { isBoolean, isFunction, isString } from '/@/utils/is';
+import { propTypes } from '/@/utils/propTypes';
+import { ACTION_COLUMN_FLAG } from '../const';
+
+export default defineComponent({
+  name: 'TableAction',
+  components: { Icon, PopConfirmButton, Divider, Dropdown, MoreOutlined, Tooltip },
+  props: {
+    actions: {
+      type: Array as PropType<ActionItem[]>,
+      default: null,
     },
-    setup(props) {
-      const { prefixCls } = useDesign('basic-table-action');
-      let table: Partial<TableActionType> = {};
-      if (!props.outside) {
-        table = useTableContext();
-      }
+    dropDownActions: {
+      type: Array as PropType<ActionItem[]>,
+      default: null,
+    },
+    divider: propTypes.bool.def(true),
+    outside: propTypes.bool,
+    stopButtonPropagation: propTypes.bool.def(false),
+  },
+  setup(props) {
+    const { prefixCls } = useDesign('basic-table-action');
+    let table: Partial<TableActionType> = {};
+    if (!props.outside) {
+      table = useTableContext();
+    }
 
-      const { hasPermission } = usePermission();
-      function isIfShow(action: ActionItem): boolean {
-        const ifShow = action.ifShow;
+    const { hasPermission } = usePermission();
+    function isIfShow(action: ActionItem): boolean {
+      const ifShow = action.ifShow;
 
-        let isIfShow = true;
+      let isIfShow = true;
 
-        if (isBoolean(ifShow)) {
-          isIfShow = ifShow;
-        }
-        if (isFunction(ifShow)) {
-          isIfShow = ifShow(action);
-        }
-        return isIfShow;
+      if (isBoolean(ifShow)) {
+        isIfShow = ifShow;
       }
+      if (isFunction(ifShow)) {
+        isIfShow = ifShow(action);
+      }
+      return isIfShow;
+    }
 
-      const getActions = computed(() => {
-        return (toRaw(props.actions) || [])
-          .filter((action) => {
-            return hasPermission(action.auth) && isIfShow(action);
-          })
-          .map((action) => {
-            const { popConfirm } = action;
-            return {
-              getPopupContainer: () => unref((table as any)?.wrapRef.value) ?? document.body,
-              type: 'link',
-              size: 'small',
-              ...action,
-              ...(popConfirm || {}),
-              onConfirm: popConfirm?.confirm,
-              onCancel: popConfirm?.cancel,
-              enable: !!popConfirm,
-            };
-          });
-      });
-
-      const getDropdownList = computed((): any[] => {
-        //过滤掉隐藏的dropdown,避免出现多余的分割线
-        const list = (toRaw(props.dropDownActions) || []).filter((action) => {
+    const getActions = computed(() => {
+      return (toRaw(props.actions) || [])
+        .filter((action) => {
           return hasPermission(action.auth) && isIfShow(action);
-        });
-        return list.map((action, index) => {
-          const { label, popConfirm } = action;
+        })
+        .map((action) => {
+          const { popConfirm } = action;
           return {
+            getPopupContainer: () => unref((table as any)?.wrapRef.value) ?? document.body,
+            type: 'link',
+            size: 'small',
             ...action,
-            ...popConfirm,
+            ...(popConfirm || {}),
             onConfirm: popConfirm?.confirm,
             onCancel: popConfirm?.cancel,
-            text: label,
-            divider: index < list.length - 1 ? props.divider : false,
+            enable: !!popConfirm,
           };
         });
-      });
+    });
 
-      const getAlign = computed(() => {
-        const columns = (table as TableActionType)?.getColumns?.() || [];
-        const actionColumn = columns.find((item) => item.flag === ACTION_COLUMN_FLAG);
-        return actionColumn?.align ?? 'left';
+    const getDropdownList = computed((): any[] => {
+      //过滤掉隐藏的dropdown,避免出现多余的分割线
+      const list = (toRaw(props.dropDownActions) || []).filter((action) => {
+        return hasPermission(action.auth) && isIfShow(action);
       });
-
-      function getTooltip(data: string | TooltipProps): TooltipProps {
+      return list.map((action, index) => {
+        const { label, popConfirm } = action;
         return {
-          getPopupContainer: () => unref((table as any)?.wrapRef.value) ?? document.body,
-          placement: 'bottom',
-          ...(isString(data) ? { title: data } : data),
+          ...action,
+          ...popConfirm,
+          onConfirm: popConfirm?.confirm,
+          onCancel: popConfirm?.cancel,
+          text: label,
+          divider: index < list.length - 1 ? props.divider : false,
         };
-      }
+      });
+    });
+
+    const getAlign = computed(() => {
+      const columns = (table as TableActionType)?.getColumns?.() || [];
+      const actionColumn = columns.find((item) => item.flag === ACTION_COLUMN_FLAG);
+      return actionColumn?.align ?? 'left';
+    });
+
+    function getTooltip(data: string | TooltipProps): TooltipProps {
+      return {
+        getPopupContainer: () => unref((table as any)?.wrapRef.value) ?? document.body,
+        placement: 'bottom',
+        ...(isString(data) ? { title: data } : data),
+      };
+    }
 
-      function onCellClick(e: MouseEvent) {
-        if (!props.stopButtonPropagation) return;
-        const path = e.composedPath() as HTMLElement[];
-        const isInButton = path.find((ele) => {
-          return ele.tagName?.toUpperCase() === 'BUTTON';
-        });
-        isInButton && e.stopPropagation();
-      }
+    function onCellClick(e: MouseEvent) {
+      if (!props.stopButtonPropagation) return;
+      const path = e.composedPath() as HTMLElement[];
+      const isInButton = path.find((ele) => {
+        return ele.tagName?.toUpperCase() === 'BUTTON';
+      });
+      isInButton && e.stopPropagation();
+    }
 
-      return { prefixCls, getActions, getDropdownList, getAlign, onCellClick, getTooltip };
-    },
-  });
+    return { prefixCls, getActions, getDropdownList, getAlign, onCellClick, getTooltip };
+  },
+});
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-table-action';
+@prefix-cls: ~'@{namespace}-basic-table-action';
+
+.@{prefix-cls} {
+  display: flex;
+  align-items: center;
+  /* update-begin-author:taoyan date:2022-11-18 for: 表格默认行高比官方示例多出2px*/
+  height: 22px;
+  /* update-end-author:taoyan date:2022-11-18 for: 表格默认行高比官方示例多出2px*/
 
-  .@{prefix-cls} {
+  .action-divider {
+    display: table;
+  }
+
+  &.left {
+    justify-content: flex-start;
+  }
+
+  &.center {
+    justify-content: center;
+  }
+
+  &.right {
+    justify-content: flex-end;
+  }
+
+  button {
     display: flex;
     align-items: center;
-    /* update-begin-author:taoyan date:2022-11-18 for: 表格默认行高比官方示例多出2px*/
-    height: 22px;
-    /* update-end-author:taoyan date:2022-11-18 for: 表格默认行高比官方示例多出2px*/
-    
-    .action-divider {
-      display: table;
-    }
 
-    &.left {
-      justify-content: flex-start;
+    span {
+      margin-left: 0 !important;
     }
+  }
 
-    &.center {
-      justify-content: center;
+  button.ant-btn-circle {
+    span {
+      margin: auto !important;
     }
+  }
 
-    &.right {
-      justify-content: flex-end;
-    }
+  .ant-divider,
+  .ant-divider-vertical {
+    margin: 0 2px;
+  }
 
-    button {
-      display: flex;
-      align-items: center;
+  .icon-more {
+    transform: rotate(90deg);
 
-      span {
-        margin-left: 0 !important;
-      }
+    svg {
+      font-size: 1.1em;
+      font-weight: 700;
     }
+  }
+}
 
-    button.ant-btn-circle {
-      span {
-        margin: auto !important;
-      }
-    }
+.setting {
 
-    .ant-divider,
-    .ant-divider-vertical {
-      margin: 0 2px;
-    }
+  width: 100%;
 
-    .icon-more {
-      transform: rotate(90deg);
+  height: 100%;
 
-      svg {
-        font-size: 1.1em;
-        font-weight: 700;
-      }
-    }
-  }
+  display: flex;
+
+  flex-wrap: wrap;
+
+  align-items: center;
+
+}
 </style>

jeecgboot-vue3-master/src/views/annualCompPoint/committee/AnnualCompPointList.vue

@@ -105,7 +105,7 @@
       canResize: false,
       useSearchForm: false,
       actionColumn: {
-        width: 550,
+        width: 220,
         fixed: 'right',
       },
       beforeFetch: (params) => {

jeecgboot-vue3-master/src/views/annualCompPoint/superAdmin/AnnualCompPointListPass.vue

@@ -336,4 +336,7 @@ function setFieldsValue(map) {
     text-align: center
   }
 }
+::v-deep(.ant-table-row) {
+    height: 120px !important;
+  }
 </style>