初始化

2026-03-26 20:18:20 +08:00
commit 120a5b4dfd
368 changed files with 35926 additions and 0 deletions
--- a/src/components/custom/business-table-action-cell.tsx
+++ b/src/components/custom/business-table-action-cell.tsx
@@ -0,0 +1,111 @@
+import { computed, defineComponent, ref } from 'vue';
+import type { PropType } from 'vue';
+import { ElButton, ElPopover } from 'element-plus';
+import { $t } from '@/locales';
+
+export type BusinessTableAction = {
+  key: string;
+  label: string;
+  buttonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  disabled?: boolean;
+  onClick: () => void | Promise<void>;
+};
+
+export default defineComponent({
+  name: 'BusinessTableActionCell',
+  props: {
+    actions: {
+      type: Array as PropType<BusinessTableAction[]>,
+      required: true
+    }
+  },
+  setup(props) {
+    const popoverVisible = ref(false);
+
+    const directActions = computed(() => {
+      if (props.actions.length <= 2) {
+        return props.actions;
+      }
+
+      return props.actions.slice(0, 1);
+    });
+
+    const moreActions = computed(() => {
+      if (props.actions.length <= 2) {
+        return [];
+      }
+
+      return props.actions.slice(1);
+    });
+
+    async function handleAction(action: BusinessTableAction) {
+      if (action.disabled) {
+        return;
+      }
+
+      popoverVisible.value = false;
+      await action.onClick();
+    }
+
+    return () => (
+      <div class="business-table-action-cell" onClick={event => event.stopPropagation()}>
+        {directActions.value.map(action => (
+          <ElButton
+            key={action.key}
+            plain
+            size="small"
+            type={action.buttonType}
+            disabled={action.disabled}
+            class="business-table-action-button"
+            onClick={() => handleAction(action)}
+          >
+            {action.label}
+          </ElButton>
+        ))}
+
+        {moreActions.value.length > 0 && (
+          <ElPopover
+            v-model:visible={popoverVisible.value}
+            placement="bottom-end"
+            trigger="click"
+            width={120}
+            show-arrow={false}
+          >
+            {{
+              reference: () => (
+                <ElButton
+                  plain
+                  size="small"
+                  class="business-table-action-button"
+                  onClick={event => event.stopPropagation()}
+                >
+                  <span class="inline-flex items-center gap-4px">
+                    {$t('common.more')}
+                    <icon-mdi-chevron-down class="text-14px" />
+                  </span>
+                </ElButton>
+              ),
+              default: () => (
+                <div class="business-table-action-menu">
+                  {moreActions.value.map(action => (
+                    <ElButton
+                      key={action.key}
+                      plain
+                      size="small"
+                      type={action.buttonType}
+                      disabled={action.disabled}
+                      class="business-table-action-menu__button"
+                      onClick={() => handleAction(action)}
+                    >
+                      {action.label}
+                    </ElButton>
+                  ))}
+                </div>
+              )
+            }}
+          </ElPopover>
+        )}
+      </div>
+    );
+  }
+});