完善牧安云哨-前端

2025-12-29 16:30:04 +08:00
parent d78d3be5e0
commit cd7aa35960
7 changed files with 167 additions and 18 deletions
@@ -61,6 +61,148 @@ setupVbenVxeTable({
        );
      },
    });
+    /**
+     * 可扩展操作列渲染器
+     * - 支持普通操作（edit）
+     * - 支持确认型操作（delete / 自定义）
+     */
+    vxeUI.renderer.add('CellOperationEx', {
+      renderTableDefault({ attrs, options, props }, { column, row }) {
+        const defaultProps = { size: 'small', type: 'link', ...props };
+
+        /** 对齐方式 */
+        let align = 'end';
+        switch (column.align) {
+          case 'center':
+            align = 'center';
+            break;
+          case 'left':
+            align = 'start';
+            break;
+          default:
+            align = 'end';
+        }
+
+        /** 预置操作 */
+        const presets: Recordable<Recordable<any>> = {
+          edit: {
+            code: 'edit',
+            text: $t('common.edit'),
+          },
+          delete: {
+            code: 'delete',
+            text: $t('common.delete'),
+            danger: true,
+            confirm: true,
+            confirmTitle: () =>
+              $t('ui.actionTitle.delete', [attrs?.nameTitle || '']),
+            confirmMessage: (row: any) =>
+              $t('ui.actionMessage.deleteConfirm', [
+                row[attrs?.nameField || 'name'],
+              ]),
+          },
+        };
+
+        /** 生成操作配置 */
+        const operations = (options || ['edit', 'delete'])
+          .map((opt) => {
+            if (typeof opt === 'string') {
+              return presets[opt]
+                ? { ...defaultProps, ...presets[opt] }
+                : {
+                  ...defaultProps,
+                  code: opt,
+                  text: opt,
+                };
+            }
+            return {
+              ...defaultProps,
+              ...presets[opt.code],
+              ...opt,
+            };
+          })
+          .map((opt) => {
+            const resolved: Recordable<any> = {};
+            Object.keys(opt).forEach((key) => {
+              resolved[key] =
+                typeof opt[key] === 'function' ? opt[key](row) : opt[key];
+            });
+            return resolved;
+          })
+          .filter((opt) => opt.show !== false);
+
+        /** 普通按钮 */
+        function renderBtn(opt: Recordable<any>, listen = true) {
+          return h(
+            Button,
+            {
+              ...opt,
+              icon: undefined,
+              onClick: listen
+                ? () =>
+                  attrs?.onClick?.({
+                    code: opt.code,
+                    row,
+                  })
+                : undefined,
+            },
+            { default: () => opt.text },
+          );
+        }
+
+        /** 确认型按钮 */
+        function renderConfirm(opt: Recordable<any>) {
+          let viewportWrapper: HTMLElement | null = null;
+
+          return h(
+            Popconfirm,
+            {
+              getPopupContainer(el) {
+                viewportWrapper = el.closest('.vxe-table--viewport-wrapper');
+                return document.body;
+              },
+              placement: 'topLeft',
+              title: opt.confirmTitle,
+              icon: undefined,
+              onOpenChange(open: boolean) {
+                if (open) {
+                  viewportWrapper?.style.setProperty('pointer-events', 'none');
+                } else {
+                  viewportWrapper?.style.removeProperty('pointer-events');
+                }
+              },
+              onConfirm() {
+                attrs?.onClick?.({
+                  code: opt.code,
+                  row,
+                });
+              },
+            },
+            {
+              default: () => renderBtn(opt, false),
+              description: () =>
+                opt.confirmMessage
+                  ? h('div', { class: 'truncate' }, opt.confirmMessage)
+                  : null,
+            },
+          );
+        }
+
+        /** 根据是否需要确认选择渲染方式 */
+        const btns = operations.map((opt) =>
+          opt.confirm ? renderConfirm(opt) : renderBtn(opt),
+        );
+
+        return h(
+          'div',
+          {
+            class: 'flex table-operations',
+            style: { justifyContent: align },
+          },
+          btns,
+        );
+      },
+    });

    /**
     * 注册表格的操作按钮渲染器