y-admin-pro 0.0.1

package/packages/ele-tree-select/props.ts

@@ -0,0 +1,107 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import type { ElInputProps, ElTagProps } from '../ele-app/el';
+import type { EleTooltipProps } from '../ele-app/plus';
+import type { SelectValue, SingleValue } from '../ele-basic-select/types';
+import type { ShowCheckedStrategy, TreeData, TreeProps } from './types';
+
+/**
+ * 属性
+ */
+export const treeSelectProps = {
+  /** 选中值 */
+  modelValue: {
+    type: [String, Number, Boolean, Array] as PropType<SelectValue>,
+    default: () => {
+      return null;
+    }
+  },
+  /** 是否多选 */
+  multiple: Boolean,
+  /** 是否禁用 */
+  disabled: Boolean,
+  /** 尺寸 */
+  size: String as PropType<ElInputProps['size']>,
+  /** 是否支持清除 */
+  clearable: Boolean,
+  /** 无选中时提示文本 */
+  placeholder: String,
+  /** 缓存数据 */
+  cacheData: Array as PropType<TreeData>,
+  /** 树配置 */
+  treeProps: {
+    type: Object as PropType<TreeProps>,
+    required: true
+  },
+  /** 多选标签显示策略 */
+  showCheckedStrategy: String as PropType<ShowCheckedStrategy>,
+  /** 多选值绑定策略 */
+  checkedValueStrategy: Boolean,
+  /** 多选标签最大显示数量 */
+  maxTagCount: Number,
+  /** 多选标签最大显示文本长度 */
+  maxTagTextLength: Number,
+  /** 多选标签类型 */
+  tagType: {
+    type: String as PropType<ElTagProps['type']>,
+    default: 'info'
+  },
+  /** 是否在输入框获得焦点后自动弹出选项菜单 */
+  automaticDropdown: Boolean,
+  /** 是否可以筛选 */
+  filterable: Boolean,
+  /** 是否将下拉框插入 body */
+  teleported: {
+    type: Boolean,
+    default: true
+  },
+  /** 始终渲染下拉框 */
+  persistent: {
+    type: Boolean,
+    default: true
+  },
+  /** 下拉框位置 */
+  placement: {
+    type: String as PropType<EleTooltipProps['placement']>,
+    default: 'bottom-start'
+  },
+  /** 下拉框渐变动画 */
+  transition: {
+    type: String,
+    default: 'el-zoom-in-top'
+  },
+  /** popper.js 参数 */
+  popperOptions: Object as PropType<EleTooltipProps['popperOptions']>,
+  /** 下拉框类名 */
+  popperClass: String,
+  /** 下拉框宽度 */
+  popperWidth: [Number, String],
+  /** 自定义样式 */
+  selectStyle: Object as PropType<StyleValue>,
+  /** 自定义输入框样式 */
+  inputStyle: Object as PropType<StyleValue>,
+  /** 自定义多选标签容器样式 */
+  selectTagsStyle: Object as PropType<StyleValue>
+};
+
+export type TreeSelectProps = ExtractPropTypes<typeof treeSelectProps>;
+
+/**
+ * 事件
+ */
+export const treeSelectEmits = {
+  /** 更新选中值 */
+  'update:modelValue': (_value: SelectValue) => true,
+  /** 选中值改变事件 */
+  change: (_value: SelectValue) => true,
+  /** 下拉框展开状态改变事件 */
+  visibleChange: (_visible: boolean) => true,
+  /** 多选标签移除事件 */
+  removeTag: (_value: SingleValue) => true,
+  /** 清空事件 */
+  clear: () => true,
+  /** 获取焦点事件 */
+  focus: (_e: FocusEvent) => true,
+  /** 失去焦点事件 */
+  blur: (_e: FocusEvent) => true
+};

package/packages/ele-tree-select/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 树下拉选择主题变量 */
+@mixin set-tree-select-var($var) {
+  .ele-tree-select-popper {
+    @include set-ele-var('tree-select', $var);
+  }
+}

package/packages/ele-tree-select/style/index.scss

@@ -0,0 +1,30 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-tree-select-var($ele);
+
+.ele-tree-select-popper {
+  .el-tree {
+    background: none;
+  }
+
+  .el-vl__wrapper {
+    padding: eleVar('tree-select', 'padding');
+  }
+
+  .el-tree-node__label.is-disabled {
+    color: eleVar('tree-select', 'item-disabled-color');
+    cursor: not-allowed;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 3;
+    }
+  }
+}

package/packages/ele-tree-select/style/index.ts

@@ -0,0 +1,3 @@
+import 'element-plus/es/components/tree-v2/style/index';
+import '../../ele-basic-select/style/index';
+import './index.scss';

package/packages/ele-tree-select/types.ts

@@ -0,0 +1,34 @@
+import type { ElTreeV2Props } from '../ele-app/el';
+
+/**
+ * 多选标签显示策略
+ */
+export type ShowCheckedStrategy = 'all' | 'parent' | 'child';
+
+/**
+ * 树配置选项
+ */
+export type TreeOption = Required<Exclude<ElTreeV2Props['props'], undefined>>;
+
+/**
+ * 树数据
+ */
+export type TreeData = Exclude<ElTreeV2Props['data'], undefined>;
+
+/**
+ * 树数据项
+ */
+export type DataItem = TreeData[number];
+
+/**
+ * 树数据请求函数
+ */
+export type TreeDataFunction = () => Promise<TreeData>;
+
+/**
+ * 树组件属性
+ */
+export interface TreeProps extends Omit<ElTreeV2Props, 'data'> {
+  /** 树组件数据 */
+  data?: TreeData | TreeDataFunction;
+}

package/packages/ele-tree-select/util.ts

@@ -0,0 +1,224 @@
+import { eachTree } from '../utils/common';
+import { isEmptyValue } from '../ele-basic-select/util';
+import type { MultipleValue, SelectedItem } from '../ele-basic-select/types';
+import type { TreeData } from './types';
+
+/**
+ * 获取平铺后的数据值和数据
+ * @param data 数据
+ * @param valueKey 数据值字段名
+ * @param childrenKey 子级字段名
+ */
+export function getKeysAndList(
+  data: TreeData | undefined,
+  valueKey: string,
+  childrenKey: string
+): [MultipleValue, TreeData] {
+  const keys: MultipleValue = [];
+  const list: TreeData = [];
+  eachTree(
+    data,
+    (d) => {
+      keys.push(d[valueKey]);
+      list.push(d);
+    },
+    childrenKey
+  );
+  return [keys, list];
+}
+
+/**
+ * 获取普通结构的多选选中标签
+ * @param data 树数据
+ * @param checkedKeys 多选选中值
+ * @param valueKey 值键名
+ * @param labelKey 名称键名
+ * @param childrenKey 子级数据键名
+ * @param cacheData 缓存的数据
+ * @param checkedData 树选中的数据
+ */
+export function getNormalSelectedItems(
+  data: TreeData | undefined,
+  checkedKeys: MultipleValue | null | undefined,
+  valueKey: string,
+  labelKey: string,
+  childrenKey: string,
+  cacheData?: TreeData,
+  checkedData?: TreeData
+) {
+  const selected: SelectedItem[] = [];
+  if (isEmptyValue(checkedKeys) || !(checkedKeys as MultipleValue).length) {
+    return selected;
+  }
+  const cacheKeys = cacheData ? cacheData.map((d) => d[valueKey]) : [];
+  const ckKeys = checkedData ? checkedData.map((d) => d[valueKey]) : [];
+  const [dataKeys, list] = getKeysAndList(data, valueKey, childrenKey);
+  (checkedKeys as MultipleValue).forEach((key) => {
+    const index = cacheKeys.indexOf(key);
+    let item = cacheData && index !== -1 ? cacheData[index] : void 0;
+    if (index === -1 && checkedData) {
+      const tIndex = ckKeys.indexOf(key);
+      if (tIndex !== -1) {
+        item = checkedData[tIndex];
+      }
+    }
+    if (!item && data) {
+      const i = dataKeys.indexOf(key);
+      if (i !== -1) {
+        item = list[i];
+      }
+    }
+    selected.push({ value: key, label: item ? item[labelKey] : String(key) });
+  });
+  return selected;
+}
+
+/**
+ * 获取树结构的多选选中标签
+ * @param data 树数据
+ * @param checkedKeys 多选选中值
+ * @param valueKey 值键名
+ * @param labelKey 名称键名
+ * @param childrenKey 子级数据键名
+ * @param showParent 只显示父级(否则只显示子级)
+ */
+export function getTreeSelectedItems(
+  data: TreeData | undefined,
+  checkedKeys: MultipleValue | null | undefined,
+  valueKey: string,
+  labelKey: string,
+  childrenKey: string,
+  showParent: boolean,
+  hide?: boolean
+) {
+  const selected: SelectedItem[] = [];
+  if (isEmptyValue(checkedKeys) || !(checkedKeys as MultipleValue).length) {
+    return selected;
+  }
+  if (data) {
+    data.forEach((d) => {
+      const value = d[valueKey];
+      const children = d[childrenKey];
+      const checked = (checkedKeys as MultipleValue).includes(value);
+      if (showParent) {
+        if (checked) {
+          selected.push({ value, label: d[labelKey], hide });
+        }
+        getTreeSelectedItems(
+          children,
+          checkedKeys,
+          valueKey,
+          labelKey,
+          childrenKey,
+          showParent,
+          checked ? true : hide
+        ).forEach((item) => {
+          selected.push(item);
+        });
+      } else {
+        const hasChildren = !!(children && children.length);
+        if (checked) {
+          selected.push({ value, label: d[labelKey], hide: hasChildren });
+        }
+        if (hasChildren) {
+          getTreeSelectedItems(
+            children,
+            checkedKeys,
+            valueKey,
+            labelKey,
+            childrenKey,
+            showParent
+          ).forEach((item) => {
+            selected.push(item);
+          });
+        }
+      }
+    });
+  }
+  return selected;
+}
+
+/**
+ * 检查并补充多选选中标签
+ * @param selected 标签数据
+ * @param checkedKeys 多选选中值
+ * @param valueKey 值键名
+ * @param labelKey 名称键名
+ * @param cacheData 缓存的数据
+ */
+export function checkSelectedItems(
+  selected: SelectedItem[],
+  checkedKeys: MultipleValue | null | undefined,
+  valueKey: string,
+  labelKey: string,
+  cacheData?: TreeData
+) {
+  const selectedValues = selected.map((s) => s.value);
+  const cacheKeys = cacheData ? cacheData.map((d) => d[valueKey]) : [];
+  (checkedKeys as MultipleValue).forEach((key) => {
+    if (!selectedValues.includes(key)) {
+      const index = cacheKeys.indexOf(key);
+      const item = cacheData && index !== -1 ? cacheData[index] : void 0;
+      selected.push({ value: key, label: item ? item[labelKey] : String(key) });
+    }
+  });
+  return selected;
+}
+
+/**
+ * 判断是否全选
+ * @param data 数据
+ * @param checkedKeys 选中值
+ * @param valueKey 值键名
+ * @param childrenKey 子级数据键名
+ * @param disabledKey 禁用键名
+ */
+export function isCheckAll(
+  data: TreeData | null | undefined,
+  checkedKeys: MultipleValue | null | undefined,
+  valueKey: string,
+  childrenKey: string,
+  disabledKey: string
+) {
+  if (!data || !data.length || !checkedKeys || !checkedKeys.length) {
+    return false;
+  }
+  return data.every((d) => {
+    if (d[disabledKey] || checkedKeys.includes(d[valueKey])) {
+      return true;
+    }
+    if (d[childrenKey] && d[childrenKey].length) {
+      return isCheckAll(
+        d[childrenKey],
+        checkedKeys,
+        valueKey,
+        childrenKey,
+        disabledKey
+      );
+    }
+    return false;
+  });
+}
+
+/**
+ * 获取选中值
+ * @param keys 全部选中节点值
+ * @param selected 选中的标签数据
+ * @param checkedValueStrategy 多选值绑定策略
+ */
+export function getModelValue(
+  keys: MultipleValue,
+  selected: SelectedItem[],
+  checkedValueStrategy?: boolean
+) {
+  if (!checkedValueStrategy) {
+    return keys;
+  }
+  const ids: MultipleValue = [];
+  selected.forEach((d) => {
+    if (!d.hide) {
+      ids.push(d.value);
+    }
+  });
+  return ids;
+}

package/packages/ele-tree-table/components/table-body.vue

@@ -0,0 +1,83 @@
+<!-- 树表格主体 -->
+<template>
+  <div>
+    <TableRow
+      v-for="(row, rowIndex) in data"
+      :key="row.key ?? rowIndex"
+      :rowIndex="rowIndex"
+      :hasChildren="!!(row.children && row.children.length)"
+      :indexColWidth="indexColWidth"
+      :level="level"
+      :depth="depth"
+    >
+      <template #cells>
+        <div
+          v-for="col in columns"
+          :key="col.key ?? col.prop"
+          :style="col.style"
+          :class="col.class"
+          class="ele-tree-table-cell"
+        >
+          <slot
+            name="bodyCell"
+            :row="row"
+            :rowIndex="rowIndex"
+            :column="col"
+            :treeLevel="level"
+          >
+            {{ col.prop != null ? row[col.prop] : void 0 }}
+          </slot>
+        </div>
+      </template>
+      <TableBody
+        v-if="row.children && row.children.length"
+        :data="row.children"
+        :columns="columns"
+        :level="level + 1"
+        :depth="depth"
+        :indexColWidth="indexColWidth"
+        class="ele-tree-table-children"
+      >
+        <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+          <slot :name="name" v-bind="slotProps || {}"></slot>
+        </template>
+      </TableBody>
+    </TableRow>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import type { TreeTableDataItem, TreeTableColumn } from '../types';
+  import TableRow from './table-row.vue';
+
+  defineOptions({ name: 'TableBody' });
+
+  defineProps({
+    /** 数据 */
+    data: {
+      type: Array as PropType<TreeTableDataItem[]>,
+      required: true
+    },
+    /** 列配置 */
+    columns: {
+      type: Array as PropType<TreeTableColumn[]>,
+      required: true
+    },
+    /** 序号列宽度 */
+    indexColWidth: {
+      type: Number,
+      required: true
+    },
+    /** 所处深度 */
+    level: {
+      type: Number,
+      required: true
+    },
+    /** 最大深度 */
+    depth: {
+      type: Number,
+      required: true
+    }
+  });
+</script>

package/packages/ele-tree-table/components/table-row.vue

@@ -0,0 +1,87 @@
+<!-- 树表格行 -->
+<template>
+  <div :class="['ele-tree-table-row', { 'is-collapse': isCollapse }]">
+    <div
+      :style="{
+        width: `${indexColWidth}px`,
+        left: `${(level - 1) * indexColWidth}px`
+      }"
+      :class="[
+        'ele-tree-table-cell is-tree-index is-fixed-left',
+        { 'is-fixed-left-last': depth === level }
+      ]"
+    >
+      {{ rowIndex + 1 }}
+    </div>
+    <div class="ele-tree-table-row-body">
+      <div class="ele-tree-table-cells">
+        <div
+          v-for="num in depth - level"
+          :key="num"
+          :style="{
+            width: `${indexColWidth}px`,
+            left: `${(level - 1 + num) * indexColWidth}px`,
+            textAlign: hasChildren && num === 1 ? 'left' : void 0
+          }"
+          :class="[
+            'ele-tree-table-cell is-tree-index is-placeholder is-fixed-left',
+            { 'is-fixed-left-last': num === depth - level }
+          ]"
+        >
+          <div
+            v-if="hasChildren && num === 1"
+            :class="['ele-tree-table-expand', { 'is-collapse': isCollapse }]"
+            @click="handleExpandClick"
+          >
+            <ElIcon>
+              <ArrowDown />
+            </ElIcon>
+          </div>
+        </div>
+        <slot name="cells"></slot>
+      </div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { ElIcon } from 'element-plus';
+  import { ArrowDown } from '../../icons/index';
+
+  defineOptions({ name: 'TableRow' });
+
+  defineProps({
+    /** 行索引 */
+    rowIndex: {
+      type: Number,
+      required: true
+    },
+    /** 是否有子级 */
+    hasChildren: Boolean,
+    /** 序号列宽度 */
+    indexColWidth: {
+      type: Number,
+      required: true
+    },
+    /** 所处深度 */
+    level: {
+      type: Number,
+      required: true
+    },
+    /** 最大深度 */
+    depth: {
+      type: Number,
+      required: true
+    }
+  });
+
+  /** 是否折叠 */
+  const isCollapse = ref(false);
+
+  /** 折叠状态切换 */
+  const handleExpandClick = () => {
+    isCollapse.value = !isCollapse.value;
+  };
+</script>