y-admin-pro 0.0.1

package/packages/ele-cropper/types.ts

@@ -0,0 +1,114 @@
+import type { Component } from 'vue';
+import type Cropper from 'cropperjs';
+
+/**
+ * 上传事件参数
+ */
+export interface UploadOption {
+  /** 文件数据 */
+  data?: string | ArrayBuffer | null;
+  /** 文件类型 */
+  type: string;
+}
+
+/**
+ * 操作按钮名称
+ */
+export type ToolName =
+  | 'zoomIn'
+  | 'zoomOut'
+  | 'moveLeft'
+  | 'moveRight'
+  | 'moveUp'
+  | 'moveDown'
+  | 'rotateLeft'
+  | 'rotateRight'
+  | 'flipX'
+  | 'flipY'
+  | 'reset'
+  | 'upload'
+  | 'ok';
+
+/**
+ * 操作按钮
+ */
+export interface ToolItem {
+  /** 标识 */
+  key: string;
+  /** 名称 */
+  name: ToolName;
+  /** 图标 */
+  icon?: Component;
+  /** 类名 */
+  className?: string;
+}
+
+/**
+ * 操作按钮组
+ */
+export interface ToolGroup {
+  /** 标识 */
+  key: string;
+  /** 操作按钮 */
+  items: ToolItem[];
+}
+
+/**
+ * 裁剪组件参数
+ */
+export type CropperOptions = Partial<Cropper.Options<HTMLImageElement>> | null;
+
+/**
+ * 裁剪方法参数
+ */
+export type CroppedOptions = Partial<Cropper.GetCroppedCanvasOptions> | null;
+
+/**
+ * 实例状态
+ */
+export interface CurrentState {
+  /** 裁剪组件实例 */
+  instance?: Cropper | null;
+  /** 当前图片类型 */
+  imageType?: string;
+  /** 水平翻转值 */
+  scaleXValue: number;
+  /** 垂直翻转值 */
+  scaleYValue: number;
+}
+
+/**
+ * 上传按钮点击自定义处理的回调
+ */
+export type BeforeUploadOnResult = (
+  data: string | ArrayBuffer,
+  type?: string
+) => void;
+
+/**
+ * 上传按钮点击前的钩子
+ */
+export type BeforeUploadClick = (
+  e: MouseEvent,
+  onResult: BeforeUploadOnResult
+) => boolean | undefined | void;
+
+/**
+ * 国际化
+ */
+export interface CropperLocale {
+  zoomIn: string;
+  zoomOut: string;
+  rotateLeft: string;
+  rotateRight: string;
+  moveLeft: string;
+  moveRight: string;
+  moveUp: string;
+  moveDown: string;
+  flipX: string;
+  flipY: string;
+  reset: string;
+  upload: string;
+  ok: string;
+  title: string;
+}

package/packages/ele-cropper-modal/index.vue

@@ -0,0 +1,67 @@
+<!-- 图片裁剪弹窗 -->
+<template>
+  <EleModal
+    width="620px"
+    :title="lang.title"
+    v-bind="modalProps || {}"
+    :modelValue="modelValue"
+    @update:modelValue="updateModelValue"
+  >
+    <EleCropper
+      :height="height"
+      :src="src"
+      :imageType="imageType"
+      :accept="accept"
+      :tools="tools"
+      :preview="preview"
+      :previewWidth="previewWidth"
+      :toBlob="toBlob"
+      :options="options"
+      :croppedOptions="croppedOptions"
+      :tooltip="tooltip"
+      :tooltipProps="tooltipProps"
+      :beforeUploadClick="beforeUploadClick"
+      :responsive="responsive"
+      :locale="locale"
+      @done="handleDone"
+    />
+    <template v-if="$slots.header" #header="slotProps">
+      <slot name="header" v-bind="slotProps || {}"></slot>
+    </template>
+    <template v-if="$slots.footer" #footer="slotProps">
+      <slot name="footer" v-bind="slotProps || {}"></slot>
+    </template>
+    <template v-if="$slots.maxIcon" #maxIcon="slotProps">
+      <slot name="maxIcon" v-bind="slotProps || {}"></slot>
+    </template>
+    <template v-if="$slots.closeIcon" #closeIcon="slotProps">
+      <slot name="closeIcon" v-bind="slotProps || {}"></slot>
+    </template>
+  </EleModal>
+</template>
+
+<script lang="ts" setup>
+  import { useLocale } from '../ele-config-provider/receiver';
+  import type { CropperLocale } from '../ele-cropper/types';
+  import EleModal from '../ele-modal/index.vue';
+  import EleCropper from '../ele-cropper/index.vue';
+  import { cropperModalProps, cropperModalEmits } from './props';
+
+  defineOptions({ name: 'EleCropperModal' });
+
+  const props = defineProps(cropperModalProps);
+
+  const emit = defineEmits(cropperModalEmits);
+
+  const { lang } = useLocale<CropperLocale>('cropper', props);
+
+  /** 更新绑定值 */
+  const updateModelValue = (value: boolean) => {
+    emit('update:modelValue', value);
+  };
+
+  /** 裁剪完成 */
+  const handleDone = (result: Blob | string | null) => {
+    emit('done', result);
+  };
+</script>

package/packages/ele-cropper-modal/props.ts

@@ -0,0 +1,26 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { EleModalProps } from '../ele-app/plus';
+import { cropperProps } from '../ele-cropper/props';
+
+/**
+ * 属性
+ */
+export const cropperModalProps = {
+  ...cropperProps,
+  /** 弹窗是否显示 */
+  modelValue: Boolean,
+  /** 弹窗参数 */
+  modalProps: Object as PropType<Partial<Omit<EleModalProps, 'modelValue'>>>
+};
+
+export type CropperModalProps = ExtractPropTypes<typeof cropperModalProps>;
+
+/**
+ * 事件
+ */
+export const cropperModalEmits = {
+  /** 裁剪完成事件 */
+  done: (_result: Blob | string | null) => true,
+  /** 更新弹窗显示状态 */
+  'update:modelValue': (_value: boolean) => true
+};

package/packages/ele-cropper-modal/style/index.ts

@@ -0,0 +1,2 @@
+import '../../ele-modal/style/index';
+import '../../ele-cropper/style/index';

package/packages/ele-crud/components/edit-modal.vue

@@ -0,0 +1,252 @@
+<!-- 编辑弹窗 -->
+<template>
+  <EleModal
+    :width="460"
+    :form="true"
+    :title="title"
+    :destroyOnClose="true"
+    v-bind="editConfig?.modalProps || {}"
+    :modelValue="modelValue"
+    @update:modelValue="handleUpdateVisible"
+  >
+    <component
+      :itemTypeData="itemTypeData"
+      :httpRequest="httpRequest"
+      :screenSize="screenSize"
+      v-bind="editFormProps"
+      :is="proFormComponent || EleProForm"
+      ref="editFormRef"
+      :model="editForm"
+      @updateValue="handleUpdateEditForm"
+      @submit="handleSubmitEditForm"
+      @reset="handleResetEditForm()"
+    >
+      <template
+        v-for="[slotName, name] in getSlotsMap(
+          $slots,
+          editConfig?.formSlots,
+          [],
+          [],
+          true
+        )"
+        #[name]="slotProps"
+      >
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </component>
+    <template
+      v-if="
+        editConfig?.cancelBtnProps !== false ||
+        editConfig?.saveBtnProps !== false
+      "
+      #footer
+    >
+      <ElButton
+        v-if="editConfig?.cancelBtnProps !== false"
+        v-bind="
+          (editConfig?.cancelBtnProps === true
+            ? void 0
+            : editConfig?.cancelBtnProps) || {}
+        "
+        @click="handleCancel"
+      >
+        {{ lang.cancel }}
+      </ElButton>
+      <ElButton
+        v-if="editConfig?.saveBtnProps !== false"
+        type="primary"
+        :loading="loading"
+        v-bind="
+          (editConfig?.saveBtnProps === true
+            ? void 0
+            : editConfig?.saveBtnProps) || {}
+        "
+        @click="handleSave"
+      >
+        {{ lang.save }}
+      </ElButton>
+    </template>
+    <template
+      v-for="[slotName, name] in getSlotsMap($slots, editConfig?.modalSlots, [
+        'default',
+        'footer'
+      ])"
+      #[name]="slotProps"
+    >
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </EleModal>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import { ref, reactive, computed, watch } from 'vue';
+  import { ElButton } from 'element-plus';
+  import { getSlotsMap } from '../../utils/common';
+  import type { UserComponent } from '../../ele-app/types';
+  import type { EleProFormInstance, EleProFormProps } from '../../ele-app/plus';
+  import type { DataItem } from '../../ele-data-table/types';
+  import EleModal from '../../ele-modal/index.vue';
+  import EleProForm from '../../ele-pro-form/index.vue';
+  import {
+    setValue,
+    mergeValue,
+    getFormInitValue
+  } from '../../ele-pro-form/util';
+  import type {
+    ProFormItemTypeData,
+    ScreenSize
+  } from '../../ele-pro-form/types';
+  import { codeStringPrefix } from '../util';
+  import type {
+    EditConfig,
+    CrudField,
+    EditApi,
+    GetFieldsFormItemsFunction,
+    GetAndCacheCodeFunction,
+    CrudLocale
+  } from '../types';
+
+  defineOptions({ name: 'EditModal' });
+
+  const props = defineProps({
+    /** 弹窗是否打开 */
+    modelValue: Boolean as PropType<boolean>,
+    /** 编辑弹窗数据 */
+    data: Object as PropType<DataItem>,
+    /** 弹窗标题 */
+    title: String,
+    /** 编辑配置 */
+    editConfig: Object as PropType<EditConfig>,
+    /** 字段数据 */
+    fields: Array as PropType<CrudField[]>,
+    /** 获取字段数据对应的表单项的方法 */
+    getFieldsEditFormItems: Function as PropType<GetFieldsFormItemsFunction>,
+    /** 获取字段数据对应的表单项的方法 */
+    getAndCacheCode: {
+      type: Function as PropType<GetAndCacheCodeFunction>,
+      required: true
+    },
+    /** 高级表单组件 */
+    proFormComponent: [String, Object, Function] as PropType<UserComponent>,
+    /** 修改数据接口 */
+    editApi: [Function, String] as PropType<EditApi | string>,
+    /** 高级表单组件类型数据 */
+    itemTypeData: Array as PropType<ProFormItemTypeData[]>,
+    /** 远程数据源请求工具 */
+    httpRequest: [Object, Function],
+    /** 屏幕尺寸 */
+    screenSize: String as PropType<ScreenSize>,
+    /** 国际化 */
+    lang: {
+      type: Object as PropType<Partial<CrudLocale>>,
+      required: true
+    }
+  });
+
+  const emit = defineEmits({
+    /** 更新弹窗打开状态事件 */
+    'update:modelValue': (_visible?: boolean) => true,
+    /** 编辑保存失败事件 */
+    editError: (_e: Error) => true,
+    /** 编辑保存成功事件 */
+    editDone: (_msg?: string) => true
+  });
+
+  /** 弹窗保存按钮加载状态 */
+  const loading = ref(false);
+
+  /** 编辑表单组件 */
+  const editFormRef = ref<EleProFormInstance>(null);
+
+  /** 编辑表单数据 */
+  const editForm = reactive<Record<string, any>>({});
+
+  /** 编辑表单属性 */
+  const editFormProps = computed<EleProFormProps>(() => {
+    const formProps = props.editConfig?.formProps || {};
+    return {
+      ...formProps,
+      items: formProps.items?.length
+        ? formProps.items
+        : props.getFieldsEditFormItems?.(props.fields)
+    };
+  });
+
+  /** 更新弹窗打开状态 */
+  const handleUpdateVisible = (visible?: boolean) => {
+    emit('update:modelValue', visible);
+  };
+
+  /** 保存编辑 */
+  const handleSave = () => {
+    editFormRef.value?.validate?.((valid) => {
+      if (valid) {
+        handleSubmitEditForm(editForm);
+      }
+    });
+  };
+
+  /** 关闭弹窗 */
+  const handleCancel = () => {
+    handleUpdateVisible(false);
+    loading.value = false;
+  };
+
+  /** 更新编辑表单数据 */
+  const handleUpdateEditForm = (field: string, value: unknown) => {
+    setValue(editForm, field, value);
+  };
+
+  /** 重置编辑表单数据 */
+  const handleResetEditForm = (item?: DataItem) => {
+    Object.keys(editForm).forEach((key) => {
+      editForm[key] = void 0;
+    });
+    mergeValue(
+      editForm,
+      getFormInitValue(
+        editFormProps.value.items,
+        editFormProps.value.itemTypeData || props.itemTypeData,
+        true
+      ),
+      item
+    );
+  };
+
+  /** 提交编辑表单 */
+  const handleSubmitEditForm = (form: Record<string, any>) => {
+    if (!props.editApi) {
+      return;
+    }
+    const editApiFunc: EditApi | undefined =
+      typeof props.editApi === 'function'
+        ? props.editApi
+        : props.editApi.startsWith(codeStringPrefix)
+          ? props.getAndCacheCode(props.editApi)
+          : void 0;
+    if (!editApiFunc) {
+      return;
+    }
+    loading.value = true;
+    editApiFunc(form)
+      .then((msg) => {
+        handleCancel();
+        emit('editDone', msg);
+      })
+      .catch((e) => {
+        loading.value = false;
+        emit('editError', e);
+      });
+  };
+
+  /** 监听弹窗打开 */
+  watch(
+    () => props.modelValue,
+    (visible) => {
+      if (visible) {
+        handleResetEditForm(props.data);
+      }
+    }
+  );
+</script>

package/packages/ele-crud/components/page-side.vue

@@ -0,0 +1,159 @@
+<!-- 侧栏 -->
+<template>
+  <div
+    v-if="sideConfig?.searchProps !== false"
+    class="ele-crud-search-bar"
+    v-bind="searchBarProps"
+  >
+    <ElInput
+      placeholder="搜索"
+      :clearable="true"
+      v-model="keywords"
+      :prefixIcon="SearchOutlined"
+      v-bind="sideConfig?.searchInputProps || {}"
+    >
+      <template
+        v-for="(slotName, name) in getSlotsMap(
+          $slots,
+          sideConfig?.searchInputSlots
+        )"
+        #[name]="slotProps"
+      >
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </ElInput>
+  </div>
+  <EleLoading
+    :loading="loading"
+    class="ele-crud-tree-wrapper"
+    v-bind="sideConfig?.loadingProps || {}"
+  >
+    <ElTree
+      ref="treeRef"
+      :data="data"
+      :highlightCurrent="true"
+      :expandOnClickNode="false"
+      :defaultExpandAll="true"
+      :filterNodeMethod="filterNode"
+      class="ele-crud-tree"
+      :nodeKey="defaultTreeNodeKey"
+      v-bind="sideConfig?.treeProps || {}"
+      @node-click="handleNodeClick"
+    >
+      <template #empty>
+        <ElEmpty
+          :imageSize="68"
+          :description="errorMessage"
+          v-bind="sideConfig?.emptyProps || {}"
+        />
+      </template>
+      <template
+        v-for="(slotName, name) in getSlotsMap($slots, sideConfig?.treeSlots, [
+          'empty'
+        ])"
+        #[name]="slotProps"
+      >
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </ElTree>
+  </EleLoading>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import { ref, computed, watch, onMounted } from 'vue';
+  import { ElInput, ElTree, ElEmpty } from 'element-plus';
+  import { SearchOutlined } from '../../icons/index';
+  import type { ElTreeInstance } from '../../ele-app/el';
+  import { getSlotsMap } from '../../utils/common';
+  import EleLoading from '../../ele-loading/index.vue';
+  import {
+    defaultTreeNodeKey,
+    getTreeValueField,
+    getTreeLabelField
+  } from '../util';
+  import type { SideConfig } from '../types';
+
+  defineOptions({ name: 'PageSide' });
+
+  const props = defineProps({
+    /** 侧栏配置 */
+    sideConfig: Object as PropType<SideConfig>,
+    /** 数据 */
+    data: Array as PropType<Record<string, any>[]>,
+    /** 加载状态 */
+    loading: Boolean,
+    /** 加载错误信息 */
+    errorMessage: String,
+    /** 选中值 */
+    selectedValue: [String, Number, Boolean, Object, Array] as PropType<any>
+  });
+
+  const emit = defineEmits({
+    /** 侧栏树点击事件 */
+    treeNodeClick: (_nodeValue?: any) => true
+  });
+
+  /** 搜索关键字 */
+  const keywords = ref('');
+
+  /** 树组件 */
+  const treeRef = ref<ElTreeInstance>(null);
+
+  /** 搜索栏属性 */
+  const searchBarProps = computed(() => {
+    const searchProps = props.sideConfig?.searchProps;
+    if (!searchProps || searchProps === true) {
+      return {};
+    }
+    return {
+      class: searchProps.class,
+      style: searchProps.style
+    };
+  });
+
+  /** 设置树选中 */
+  const setTreeCurrentKey = (key: any) => {
+    if (key != null) {
+      try {
+        treeRef.value?.setCurrentKey?.(key);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+
+  /** 选择数据 */
+  const handleNodeClick = (item?: Record<string, any>) => {
+    if (item != null) {
+      emit('treeNodeClick', item[getTreeValueField(props.sideConfig)]);
+    }
+  };
+
+  /** 树过滤方法 */
+  const filterNode = (value: string, item: Record<string, any>) => {
+    if (value) {
+      const itemLabel = item[getTreeLabelField(props.sideConfig)];
+      return !!(itemLabel && itemLabel.includes(value));
+    }
+    return true;
+  };
+
+  /** 树过滤 */
+  watch(keywords, (value) => {
+    treeRef.value?.filter?.(value);
+  });
+
+  /** 更新选中 */
+  watch(
+    () => props.selectedValue,
+    (selected) => {
+      setTreeCurrentKey(selected);
+    }
+  );
+
+  /** 初始选中 */
+  onMounted(() => {
+    setTreeCurrentKey(props.selectedValue);
+  });
+</script>

package/packages/ele-crud/components/table-action.vue

@@ -0,0 +1,68 @@
+<!-- 操作列按钮 -->
+<template>
+  <ElLink
+    v-if="editLinkProps !== false"
+    type="primary"
+    underline="never"
+    v-bind="(editLinkProps === true ? void 0 : editLinkProps) || {}"
+    @click="handleEditBtnClick"
+  >
+    {{ lang.edit }}
+  </ElLink>
+  <ElDivider direction="vertical" />
+  <ElLink
+    v-if="delLinkProps !== false"
+    type="danger"
+    underline="never"
+    v-bind="(delLinkProps === true ? void 0 : delLinkProps) || {}"
+    @click="handleDelBtnClick"
+  >
+    {{ lang.delete }}
+  </ElLink>
+  <slot></slot>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import { ElLink, ElDivider } from 'element-plus';
+  import type { ElLinkProps } from '../../ele-app/el';
+  import type { DataItem } from '../../ele-data-table/types';
+  import type { BtnClickAction, CrudLocale } from '../types';
+
+  defineOptions({ name: 'TableAction' });
+
+  const props = defineProps({
+    /** 修改按钮属性 */
+    editLinkProps: [Boolean, Object] as PropType<boolean | ElLinkProps>,
+    /** 删除按钮属性 */
+    delLinkProps: [Boolean, Object] as PropType<boolean | ElLinkProps>,
+    /** 数据 */
+    item: Object as PropType<DataItem>,
+    /** 国际化 */
+    lang: {
+      type: Object as PropType<Partial<CrudLocale>>,
+      required: true
+    }
+  });
+
+  const emit = defineEmits({
+    /** 操作按钮点击事件 */
+    btnClick: (_action: BtnClickAction, _e: MouseEvent, _item?: DataItem) =>
+      true
+  });
+
+  /** 按钮点击事件 */
+  const handleBtnClick = (action: BtnClickAction, e: MouseEvent) => {
+    emit('btnClick', action, e, props.item);
+  };
+
+  /** 修改按钮点击事件 */
+  const handleEditBtnClick = (e: MouseEvent) => {
+    handleBtnClick('edit', e);
+  };
+
+  /** 除按钮点击事件 */
+  const handleDelBtnClick = (e: MouseEvent) => {
+    handleBtnClick('del', e);
+  };
+</script>