y-admin-pro 0.0.1

package/packages/ele-crud/props.ts

@@ -0,0 +1,84 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { UserComponent } from '../ele-app/types';
+import type { EleMessageOptions } from '../ele-app/plus';
+import type { DataItem } from '../ele-data-table/types';
+import type { Datasource } from '../ele-pro-table/types';
+import type { ProFormItemTypeData, ScreenSize } from '../ele-pro-form/types';
+import type {
+  CrudField,
+  ListConfig,
+  SearchConfig,
+  EditConfig,
+  PageConfig,
+  DeleteApi,
+  EditApi,
+  TreeListApi,
+  CrudLocale
+} from './types';
+
+/**
+ * 属性
+ */
+export const crudProps = {
+  /** 字段数据 */
+  fields: Array as PropType<CrudField[]>,
+  /** 列表配置 */
+  listConfig: Object as PropType<ListConfig>,
+  /** 搜索栏配置 */
+  searchConfig: {
+    type: [Object, Boolean] as PropType<SearchConfig | boolean>,
+    default: () => {
+      return null;
+    }
+  },
+  /** 添加配置 */
+  addConfig: {
+    type: [Object, Boolean] as PropType<EditConfig | boolean>,
+    default: () => {
+      return null;
+    }
+  },
+  /** 修改配置 */
+  editConfig: {
+    type: [Object, Boolean] as PropType<EditConfig | boolean>,
+    default: () => {
+      return null;
+    }
+  },
+  /** 页面配置 */
+  pageConfig: Object as PropType<PageConfig>,
+  /** 高级表单组件 */
+  proFormComponent: [String, Object, Function] as PropType<UserComponent>,
+  /** 表格数据接口 */
+  listApi: [Array, Function, String] as PropType<Datasource | string>,
+  /** 删除数据接口 */
+  deleteApi: [Function, String] as PropType<DeleteApi | string>,
+  /** 添加数据接口 */
+  addApi: [Function, String] as PropType<EditApi | string>,
+  /** 修改数据接口 */
+  editApi: [Function, String] as PropType<EditApi | string>,
+  /** 侧栏树组件数据接口 */
+  treeListApi: [Array, Function, String] as PropType<
+    Array<Record<string, any>> | TreeListApi | string
+  >,
+  /** 消息提示组件属性 */
+  messageOptions: Object as PropType<EleMessageOptions>,
+  /** 高级表单组件类型数据 */
+  itemTypeData: Array as PropType<ProFormItemTypeData[]>,
+  /** 远程数据源请求工具 */
+  httpRequest: [Object, Function],
+  /** 屏幕尺寸 */
+  screenSize: String as PropType<ScreenSize>,
+  /** 国际化 */
+  locale: Object as PropType<Partial<CrudLocale>>
+};
+
+export type CrudProps = ExtractPropTypes<typeof crudProps>;
+
+/**
+ * 事件
+ */
+export const crudEmits = {
+  /** 表格多选数据改变事件 */
+  tableSelectionsChange: (_selections: DataItem[]) => true
+};

package/packages/ele-crud/style/index.scss

@@ -0,0 +1,50 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+/* 折叠面板 */
+.ele-crud-split-panel.ele-split-panel {
+  height: 100%;
+
+  &.is-flex-table {
+    overflow: hidden;
+  }
+
+  & > .ele-split-panel-wrap > .ele-split-panel-side {
+    border-width: 0 1px 0 0;
+  }
+
+  &.is-responsive > .ele-split-panel-wrap > div.ele-split-panel-side {
+    background: none;
+  }
+
+  & > .ele-split-panel-body {
+    overflow: hidden;
+  }
+
+  &.is-collapse > .ele-split-collapse-button {
+    margin-left: 2px;
+  }
+}
+
+/* 侧栏搜索栏 */
+.ele-crud-search-bar {
+  flex-shrink: 0;
+  padding: 16px 16px 12px 16px;
+  box-sizing: border-box;
+
+  & > .el-input .el-input__prefix-inner > .el-input__icon {
+    transform: translateY(-0.5px);
+  }
+}
+
+/* 侧栏树组件 */
+.ele-crud-tree-wrapper {
+  flex: 1;
+  padding: 0 16px 16px 16px;
+  box-sizing: border-box;
+  overflow: auto;
+
+  & > .ele-crud-tree {
+    #{eleVarName('tree', 'item-height')}: 34px;
+  }
+}

package/packages/ele-crud/style/index.ts

@@ -0,0 +1,17 @@
+import 'element-plus/es/components/button/style/index';
+import 'element-plus/es/components/link/style/index';
+import 'element-plus/es/components/divider/style/index';
+import 'element-plus/es/components/input/style/index';
+import 'element-plus/es/components/tree/style/index';
+import 'element-plus/es/components/empty/style/index';
+import 'element-plus/es/components/message-box/style/index';
+import '../../ele-page/style/index';
+import '../../ele-card/style/index';
+import '../../ele-pro-table/style/index';
+import '../../ele-pro-form/style/index';
+import '../../ele-modal/style/index';
+import '../../ele-loading/style/index';
+import '../../ele-split-panel/style/index';
+import '../../ele-popconfirm/style/index';
+import '../../ele-app/style/message/index';
+import './index.scss';

package/packages/ele-crud/types.ts

@@ -0,0 +1,248 @@
+import type { ComponentProps } from '../ele-app/types';
+import type {
+  ElButtonProps,
+  ElLinkProps,
+  ElTreeProps,
+  ElInputProps,
+  ElEmptyProps
+} from '../ele-app/el';
+import type {
+  ElePageProps,
+  EleCardProps,
+  EleProTableProps,
+  EleProFormProps,
+  EleSplitPanelProps,
+  EleLoadingProps,
+  EleModalProps,
+  ElePopconfirmProps,
+  EleMessageBoxOptions
+} from '../ele-app/plus';
+import type { ProFormItemProps } from '../ele-pro-form/types';
+import type { DataItem, DataKey, Column } from '../ele-data-table/types';
+
+/**
+ * 字段
+ */
+export interface CrudField {
+  /** 唯一值 */
+  key?: string;
+  /** 属性名 */
+  prop: string;
+  /** 字段名 */
+  label?: string;
+  /** 不显示在列表中 */
+  hideInList?: boolean | 'flat';
+  /** 不显示在搜索栏中 */
+  hideInSearch?: boolean | 'flat';
+  /** 不显示在添加中 */
+  hideInAdd?: boolean | 'flat';
+  /** 不显示在修改中 */
+  hideInEdit?: boolean | 'flat';
+  /** 表格列属性 */
+  columnProps?: Column;
+  /** 搜索表单项属性 */
+  searchItemProps?: ProFormItemProps;
+  /** 添加表单项属性 */
+  addItemProps?: ProFormItemProps;
+  /** 修改表单项属性 */
+  editItemProps?: ProFormItemProps;
+  /** 子级 */
+  children?: Array<Partial<CrudField>>;
+}
+
+/**
+ * 删除确认框属性
+ */
+export type DelConfirmProps = ElePopconfirmProps | EleMessageBoxOptions;
+
+/**
+ * 删除气泡确认框属性
+ */
+export type DelPopConfirmProps = DelConfirmProps & {
+  /** 是否是气泡确认框 */
+  isPopConfirm?: boolean;
+};
+
+/**
+ * 列表配置
+ */
+export interface ListConfig {
+  /** 卡片属性 */
+  cardProps?: boolean | EleCardProps;
+  /** 卡片插槽 */
+  cardSlots?: Record<string, string>;
+  /** 表格属性 */
+  tableProps?: EleProTableProps;
+  /** 表格插槽 */
+  tableSlots?: Record<string, any>;
+  /** 表格多选列属性 */
+  selectionColumnProps?: boolean | Column;
+  /** 表格序号列属性 */
+  indexColumnProps?: boolean | Column;
+  /** 表格操作列属性 */
+  actionColumnProps?: boolean | Column;
+  /** 添加按钮属性 */
+  addBtnProps?: boolean | ElButtonProps;
+  /** 批量删除按钮属性 */
+  delBtnProps?: boolean | ElButtonProps;
+  /** 修改按钮属性 */
+  editLinkProps?: boolean | ElLinkProps;
+  /** 删除按钮属性 */
+  delLinkProps?: boolean | ElLinkProps;
+  /** 删除气泡确认框属性 */
+  delPopConfirmProps?: boolean | DelPopConfirmProps;
+  /** 删除确认框属性 */
+  delConfirmProps?: boolean | EleMessageBoxOptions;
+}
+
+/**
+ * 搜索栏配置
+ */
+export interface SearchConfig {
+  /** 卡片属性 */
+  cardProps?: boolean | EleCardProps;
+  /** 卡片插槽 */
+  cardSlots?: Record<string, string>;
+  /** 表单属性 */
+  formProps?: EleProFormProps;
+  /** 表单插槽 */
+  formSlots?: Record<string, string>;
+}
+
+/**
+ * 修改配置
+ */
+export interface EditConfig {
+  /** 弹窗属性 */
+  modalProps?: EleModalProps;
+  /** 弹窗插槽 */
+  modalSlots?: Record<string, string>;
+  /** 表单属性 */
+  formProps?: EleProFormProps;
+  /** 表单插槽 */
+  formSlots?: Record<string, string>;
+  /** 取消按钮属性 */
+  cancelBtnProps?: boolean | ElButtonProps;
+  /** 保存按钮属性 */
+  saveBtnProps?: boolean | ElButtonProps;
+}
+
+/**
+ * 侧栏配置
+ */
+export interface SideConfig {
+  /** 搜索栏属性 */
+  searchProps?: boolean | ComponentProps<{}>;
+  /** 搜索输入框属性 */
+  searchInputProps?: ElInputProps;
+  /** 搜索输入框插槽 */
+  searchInputSlots?: Record<string, string>;
+  /** 树组件属性 */
+  treeProps?: ElTreeProps;
+  /** 树组件插槽 */
+  treeSlots?: Record<string, string>;
+  /** 加载组件属性 */
+  loadingProps?: EleLoadingProps;
+  /** 空组件属性 */
+  emptyProps?: ElEmptyProps;
+}
+
+/**
+ * 页面配置
+ */
+export interface PageConfig {
+  /** 页面容器组件属性 */
+  pageProps?: boolean | ElePageProps;
+  /** 卡片属性 */
+  cardProps?: boolean | EleCardProps;
+  /** 卡片插槽 */
+  cardSlots?: Record<string, string>;
+  /** 分割面板属性 */
+  splitPanelProps?: boolean | EleSplitPanelProps;
+  /** 分割面板插槽 */
+  splitPanelSlots?: Record<string, string>;
+  /** 侧栏配置 */
+  sideConfig?: SideConfig;
+  /** 侧栏对表格筛选的字段名 */
+  tableFilterField?: string;
+}
+
+/**
+ * 操作按钮点击动作
+ */
+export type BtnClickAction =
+  | 'add'
+  | 'edit'
+  | 'del'
+  | 'delSelections'
+  | 'delConfirm';
+
+/**
+ * 删除气泡配置
+ */
+export interface DeletePopOption {
+  /** 删除气泡数据 */
+  item?: DataItem;
+  /** 删除气泡触发节点 */
+  triggerEl?: any;
+  /** 删除气泡属性 */
+  confirmProps?: DelPopConfirmProps;
+}
+
+/**
+ * 删除数据接口
+ */
+export type DeleteApi = (
+  dataKeys: DataKey[],
+  data: DataItem[]
+) => Promise<string | undefined>;
+
+/**
+ * 修改数据接口
+ */
+export type EditApi = (data: DataItem) => Promise<string | undefined>;
+
+/**
+ * 侧栏树组件数据接口
+ */
+export type TreeListApi = (
+  searchValue?: string
+) => Promise<Array<Record<string, any>> | undefined>;
+
+/**
+ * 获取并缓存代码解析结果的方法
+ */
+export type GetFieldsFormItemsFunction = (
+  fields?: CrudField[]
+) => ProFormItemProps[];
+
+/**
+ * 获取并缓存代码解析结果的方法
+ */
+export type GetAndCacheCodeFunction = (code: string, codeResult?: any) => any;
+
+/**
+ * 国际化
+ */
+export interface CrudLocale {
+  save: string;
+  cancel: string;
+  action: string;
+  add: string;
+  edit: string;
+  delete: string;
+  deleteConfirm: string;
+  deleteConfirmTitle: string;
+  deleteBatch: string;
+  deleteBatchConfirm: string;
+  deleteBatchConfirmTitle: string;
+  deleteBatchTip: string;
+  deleteLoading: string;
+  deleteSuccess: string;
+  deleteError: string;
+  editSuccess: string;
+  editError: string;
+  addSuccess: string;
+  addError: string;
+  search: string;
+}

package/packages/ele-crud/util.ts

@@ -0,0 +1,147 @@
+import type { EleProFormProps } from '../ele-app/plus';
+import { mapTree } from '../utils/common';
+import type { ProFormItemProps } from '../ele-pro-form/types';
+import type { CrudField, SideConfig } from './types';
+
+/**
+ * 代码字符串前缀
+ */
+export const codeStringPrefix = '/*__PRO_CRUD__*/';
+
+/**
+ * 获取搜索表单默认属性
+ */
+export function getDefaultSearchFormProps() {
+  const config: EleProFormProps = {
+    grid: { lg: 6, md: 8, sm: 12, xs: 24 },
+    footer: true,
+    footerProps: { labelWidth: 16 },
+    autoFooterCol: true
+  };
+  return config;
+}
+
+/**
+ * 获取字段数据对应的搜索表单项数据
+ * @param fields 字段数据
+ */
+export function getFieldsSearchFormItems(fields?: CrudField[]) {
+  return mapTree<CrudField, ProFormItemProps>(
+    fields || [],
+    (field, index) => {
+      if (field.hideInSearch === 'flat') {
+        return 'flatChildren';
+      } else if (!field.hideInSearch) {
+        return {
+          key: field.key ?? `${index}-${field.prop}`,
+          prop: field.prop,
+          label: field.label,
+          ...(field.searchItemProps || {})
+        };
+      }
+    },
+    'children',
+    'children',
+    (item) => {
+      return {
+        type: item.children?.length ? 'div' : 'input',
+        ...item
+      };
+    }
+  );
+}
+
+/**
+ * 获取字段数据对应的添加表单项数据
+ * @param fields 字段数据
+ */
+export function getFieldsAddFormItems(fields?: CrudField[]) {
+  return mapTree<CrudField, ProFormItemProps>(
+    fields || [],
+    (field, index) => {
+      if (field.hideInAdd === 'flat') {
+        return 'flatChildren';
+      } else if (!field.hideInAdd) {
+        return {
+          key: field.key ?? `${index}-${field.prop}`,
+          prop: field.prop,
+          label: field.label,
+          ...(field.addItemProps || {})
+        };
+      }
+    },
+    'children',
+    'children',
+    (item) => {
+      return {
+        type: item.children?.length ? 'div' : 'input',
+        ...item
+      };
+    }
+  );
+}
+
+/**
+ * 获取字段数据对应的修改表单项数据
+ * @param fields 字段数据
+ */
+export function getFieldsEditFormItems(fields?: CrudField[]) {
+  return mapTree<CrudField, ProFormItemProps>(
+    fields || [],
+    (field, index) => {
+      if (field.hideInEdit === 'flat') {
+        return 'flatChildren';
+      } else if (!field.hideInEdit) {
+        return {
+          key: field.key ?? `${index}-${field.prop}`,
+          prop: field.prop,
+          label: field.label,
+          ...(field.editItemProps || {})
+        };
+      }
+    },
+    'children',
+    'children',
+    (item) => {
+      return {
+        type: item.children?.length ? 'div' : 'input',
+        ...item
+      };
+    }
+  );
+}
+
+/**
+ * 树组件默认的节点值字段名
+ */
+export const defaultTreeNodeKey = 'value';
+
+/**
+ * 获取树组件数据值的字段名
+ * @param sideConfig 侧栏配置
+ */
+export function getTreeValueField(sideConfig?: SideConfig): string {
+  return sideConfig?.treeProps?.nodeKey ?? defaultTreeNodeKey;
+}
+
+/**
+ * 获取树组件显示文本的字段名
+ * @param sideConfig 侧栏配置
+ */
+export function getTreeLabelField(sideConfig?: SideConfig): string {
+  const field = sideConfig?.treeProps?.props?.label;
+  return typeof field === 'string' ? field : 'label';
+}
+
+/**
+ * 执行代码字符串
+ * @param code 代码字符串
+ * @param httpRequest 远程数据源请求工具
+ */
+export function getCodeResult(code: string, httpRequest?: any) {
+  try {
+    return new Function('httpRequest', `return (${code})`)(httpRequest);
+  } catch (e) {
+    console.error(e);
+  }
+}