fit2cloud-ui-plus 0.0.1-beta.0

package/src/components/steps/Stepper.ts

@@ -0,0 +1,188 @@
+import { useLocale } from "@/hooks"
+const { t } = useLocale()
+
+interface StepperOptions {
+  steps: string
+  index: number
+  activeSet: any
+  isLoading?: string
+  cancelButtonText: string
+  finishButtonText: string
+  prevButtonText: string
+  nextButtonText: string
+  buttonSize: string
+  footerAlign: string
+  showCancel: any
+  beforeActive: Function
+  beforeLeave: Function
+  height: string
+}
+
+export class Stepper {
+  steps: string
+  index: number
+  activeSet: any
+  isLoading: string
+  cancelButtonText: string
+  finishButtonText: string
+  prevButtonText: string
+  nextButtonText: string
+  buttonSize: string
+  footerAlign: string
+  showCancel: any
+  beforeActive: Function
+  beforeLeave: Function
+  height: string
+  constructor(options?: StepperOptions) {
+    options = options || ({} as StepperOptions)
+    // 所有步骤节点(Step对象数组)
+    this.steps = options.steps
+    // 正在执行的节点的索引
+    this.index = options.index === undefined ? 0 : options.index
+    // 激活过的节点的索引
+    this.activeSet = new Set()
+    // loading状态
+    this.isLoading = options.isLoading
+    // footer 属性
+    this.cancelButtonText = options.cancelButtonText || t("fu.steps.cancel")
+    this.finishButtonText = options.finishButtonText || t("fu.steps.finish")
+    this.prevButtonText = options.prevButtonText || t("fu.steps.prev")
+    this.nextButtonText = options.nextButtonText || t("fu.steps.next")
+    this.buttonSize = options.buttonSize
+    this.footerAlign = options.footerAlign || 'flex'
+    // 是否显示取消按钮
+    this.showCancel = options.showCancel === undefined ? false : options.showCancel
+    // 激活前钩子
+    this.beforeActive = options.beforeActive
+    // 离开前钩子
+    this.beforeLeave = options.beforeLeave
+    // 高度
+    this.height = options.height
+  }
+
+  // index是否为第一个节点
+  isFirst(index: number) {
+    return index === 0;
+  }
+
+  // index是否为最后一个节点
+  isLast(index: number) {
+    return index === this.steps.length - 1;
+  }
+
+  // index的节点是否激活过
+  isActive(index: number) {
+    return this.activeSet.has(index);
+  }
+
+  // index的节点是否为正在激活的节点
+  isCurrent(index: number) {
+    return this.index === index
+  }
+
+  // 激活
+  active(index: number) {
+    // 在节点范围内，并且不等于当前节点
+    const isValid = index >= 0 && index < this.steps.length && this.index !== index
+    const forward = index > this.index
+    if (isValid) {
+      // 离开前钩子返回false，则不执行激活
+      if (this.executeHook("beforeLeave", this.index, forward) !== false) {
+        // 激活前钩子返回false，则不执行激活
+        if (this.executeHook("beforeActive", index, forward) !== false) {
+          // 激活
+          this.index = index
+          this.activeSet.add(index)
+        }
+      }
+    }
+  }
+
+  // 反激活
+  inactive(index: number) {
+    this.activeSet.delete(index)
+  }
+
+  // 下一步
+  next() {
+    if (!this.isLast(this.index)) {
+      this.active(this.index + 1)
+    }
+  }
+
+  // 上一步
+  prev() {
+    if (!this.isFirst(this.index)) {
+      this.active(this.index - 1)
+    }
+  }
+
+  // 使用索引获取Step对象
+  getStep(index: number) {
+    if (this.steps && this.steps.length > index) {
+      return this.steps[index]
+    }
+  }
+
+  // 使用ID获取节点索引
+  getIndex(id: string) {
+    if (this.steps) {
+      for (let i = 0; i < this.steps.length; i++) {
+        let step = this.steps[i];
+        if (id === step.id) {
+          return i;
+        }
+      }
+    }
+    return -1;
+  }
+
+  executeHook(functionName: string, index: number, forward: boolean) {
+    const step: any = this.getStep(index)
+    // 如果节点定义了钩子方法，执行节点的
+    if (step[functionName]) {
+      return step[functionName](step, forward)
+    }
+
+    // 节点没定义，则执行Steps的钩子方法
+    if (this[functionName]) {
+      return this[functionName](step, forward)
+    }
+  }
+}
+
+interface StepOptions {
+  id: string
+  index: number
+  beforeActive: Function
+  beforeLeave: Function
+  title: string
+  description: string
+  icon: string
+  status: string
+}
+
+export class Step {
+  id: string
+  index: number
+  beforeActive: Function
+  beforeLeave: Function
+  title: string
+  description: string
+  icon: string
+  status: string
+  constructor(options?: StepOptions) {
+    options = options || ({} as StepOptions)
+    this.id = options.id
+    this.index = options.index
+    // 激活前钩子
+    this.beforeActive = options.beforeActive
+    // 离开前钩子
+    this.beforeLeave = options.beforeLeave
+    // el-step 属性
+    this.title = options.title
+    this.description = options.description
+    this.icon = options.icon
+    this.status = options.status
+  }
+}

package/src/components/steps/index.ts

@@ -0,0 +1,11 @@
+import FuSteps from './FuSteps.vue';
+import FuStep from './FuStep.vue';
+
+import type {App} from 'vue'
+
+export default {
+  install: (app: App): void => {
+    // app.component(FuStep.name, FuStep);
+    // app.component(FuSteps.name, FuSteps);
+  }
+};

package/src/components/table/FuTable.vue

@@ -0,0 +1,145 @@
+<template>
+  <el-table class="fu-table" v-bind="$attrs" :key="key" header-row-class-name="fu-table-header">
+    <fu-table-body name="table-body" :columns="columns">
+      <slot />
+    </fu-table-body>
+  </el-table>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, useSlots, ref, watch, computed, onUpdated, provide } from "vue";
+import FuTableBody from "@/components/table/FuTableBody";
+defineOptions({ name: "FuTable" });
+const props = defineProps({
+  columns: Array,
+  refresh: {
+    type: Boolean,
+    default: true,
+  },
+  localKey: String, // 如果需要记住选择的列，则这里添加一个唯一的Key
+
+});
+
+const slots = useSlots()
+
+const key = ref(0);
+
+
+const prefix = "FU-T-"
+
+const isFix = (node: any) => {
+  const includeTag = node.type.name.indexOf("FuTableColumnDropdown") >= 0
+  const { fix } = node.props
+  let { type } = node.props
+  return (fix !== undefined && fix !== false) || ["selection", "index", "expand"].includes(type) || includeTag
+}
+
+const getLabel = (node: any) => {
+  if (node.props.label) return node.props.label
+  const includeTag = node.type.name.indexOf("FuTableColumnDropdown") >= 0
+  let { label, type } = node.props
+  if (includeTag) label = prefix + "dropdown"
+  label ??= node.props.label
+  label ??= prefix + type
+  return label;
+}
+
+const cleanColumns = (columns: any) => {
+  columns.splice(0, columns.length)
+}
+
+const updateNodes = (nodes: any) => {
+  nodes.forEach((node: any) => {
+    if (!node.type.key) {
+      node.type.key = getLabel(node)
+    }
+  })
+}
+
+const initColumns = (nodes: any, columns: any) => {
+  nodes.forEach((node: any) => {
+    const label = getLabel(node)
+    const fix = isFix(node);
+    const { show } = node.props
+    if (!label && !fix) {
+      throw new Error("unfixed column's label is required.")
+    }
+    columns.push({ label, show, fix })
+  })
+}
+
+const copyColumns = (source: any, target: any) => {
+  source.forEach((col: any) => {
+    target.push(col)
+  })
+}
+
+const updateColumns = (nodes: any, columns: any) => {
+  if (columns === undefined) return
+  // 如果保存的列跟实际的列冲突则以实际的为准
+  if (nodes.length !== columns.length) {
+    cleanColumns(columns)
+    initColumns(nodes, columns)
+  }
+  if (columns.some((col: any) => col.label === undefined)) {
+    columns.forEach((col: any, i: any) => {
+      col.label ??= getLabel(nodes[i])
+    })
+  }
+}
+
+
+const columnsKey = computed(() => {
+  return prefix + props.localKey
+})
+// 去掉v-if=false的node
+const children = slots.default?.().filter((c: any) => c.type.name !== undefined)
+watch(() => props.columns,
+  () => {
+    // 设置refresh，可以避免抖动或闪烁，但是table会更新一次
+    if (props.refresh) {
+      key.value++;
+    }
+    if (props.localKey) {
+      localStorage.setItem(columnsKey.value, JSON.stringify(props.columns));
+    }
+
+  },
+  { deep: true }
+)
+// 之前的created
+onMounted(() => {
+  updateNodes(children)
+  // 表格没有内容或者不需要选列
+  if (!children || !props.columns) return
+
+  // 需要读取localStorage
+  if (props.localKey) {
+    let str = localStorage.getItem(columnsKey.value)
+    if (str) {
+      try {
+        const columns = JSON.parse(str)
+        cleanColumns(props.columns)
+        copyColumns(columns, props.columns)
+        updateColumns(children, props.columns)
+        return
+      } catch (e) {
+        console.error("get columns error", e)
+      }
+    }
+  }
+
+  if (props.columns.length === 0) {
+    initColumns(children, props.columns)
+  }
+})
+
+
+provide("localKey", props.localKey)
+
+onUpdated(() => {
+  updateNodes(children)
+  updateColumns(children, props.columns)
+})
+
+</script>

package/src/components/table/FuTableBody.ts

@@ -0,0 +1,40 @@
+import { h } from 'vue'
+
+const isFix = (node: any) => {
+  const includeTag = node.type.name.indexOf("FuTableColumnDropdown") >= 0
+  const { fix } = node.props
+  let { type } = node.props
+  return (fix !== undefined && fix !== false) || ["selection", "index", "expand"].includes(type) || includeTag
+}
+
+const getLabel = (node: any) => {
+  if (node.props.label) return node.props.label
+  const prefix = "FU-T-"
+  const includeTag = node.type.name.indexOf("FuTableColumnDropdown") >= 0
+  let { label, type } = node.props
+  if (includeTag) label = prefix + "dropdown"
+  label ??= node.props.label
+  label ??= prefix + type
+  return label;
+}
+const FuTableBody = (props: any, context: any) => {
+  const slots = context.slots.default()
+  const nodes: any = [];
+  let { columns } = props
+  const children = slots[0].children.filter((c: any) => c.type.name !== undefined)
+  if (!children) return nodes
+  if (!columns || columns?.length === 0) return children
+  columns.forEach((col: any) => {
+    let node = children.find((child: any) => {
+      return col.label === getLabel(child)
+    })
+    if (node && (isFix(node) || col.show !== false)) {
+      nodes.push(node);
+    }
+  })
+  return nodes
+}
+
+export default FuTableBody;
+
+

package/src/components/table/FuTablePagination.vue

@@ -0,0 +1,42 @@
+<template>
+  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
+    :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
+  </el-pagination>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: "FuTablePagination" });
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  pageSize: {
+    type: Number,
+    default: 5
+  },
+  pageSizes: {
+    type: Array,
+    default: function () {
+      return [5, 10, 20, 50, 100]
+    }
+  },
+  total: {
+    type: Number,
+    default: 0
+  },
+
+});
+const emit = defineEmits(["size-change", "current-change", "change", "update:pageSize", "update:currentPage"])
+
+function handleSizeChange(size: number) {
+  emit('update:pageSize', size)
+  emit("size-change");
+  emit("change"); // 兼容历史版本
+}
+function handleCurrentChange(current: number) {
+  emit('update:currentPage', current)
+  emit("current-change");
+  emit("change"); // 兼容历史版本
+}
+</script>

package/src/components/table/index.ts

@@ -0,0 +1,15 @@
+import FuTable from "./FuTable.vue"
+import FuTableColumnSelect from "./table-column-select"
+import FuTablePagination from "./FuTablePagination.vue"
+import FuTableOperations from "./table-operations"
+import FuTableColumnDropdown from "./table-column-dropdown"
+
+import type { App } from 'vue'
+FuTable.install = (app: App): void => {
+  app.component(FuTable.name, FuTable);
+  app.component(FuTablePagination.name, FuTablePagination)
+  app.use(FuTableOperations.install)
+  app.use(FuTableColumnSelect.install)
+  app.use(FuTableColumnDropdown.install)
+};
+export default FuTable;

package/src/components/table/table-column-dropdown/FuTableColumnDropdown.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-table-column class-name="fu-table-column-dropdown" :width="width" :resizable="false" align="center"
+    v-bind="$attrs">
+    <template #default="scope">
+      <el-dropdown @command="handleCommand" :trigger="trigger" :class="showType === 'hover' ? 'fu-show-icon' : ''"
+        v-if="isShow(scope.row)" placement="bottom" :ref="`dropdown${scope.$index}`">
+        <span class="fu-dropdown-link">
+          <slot name="icon">
+            <el-icon class="fu-icon-more">
+              <MoreFilled />
+            </el-icon>
+          </slot>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <slot name="title">
+              <div class="fu-table-column-dropdown__title" v-if="title">
+                {{ title }}
+              </div>
+            </slot>
+            <slot v-bind="scope">
+              <el-dropdown-item v-for="(item, i) in menus" :key="i" :icon="item.icon"
+                :disabled="disabled(item, scope.row)" :divided="item.divided" :command="composeValue(item, scope.row)">
+                {{ item.label }}
+              </el-dropdown-item>
+            </slot>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </template>
+
+  </el-table-column>
+</template>
+<script lang="ts" setup>
+import { computed, getCurrentInstance } from "vue";
+defineOptions({ name: "FuTableColumnDropdown" });
+const props = defineProps({
+  showType: {
+    type: String,
+    default: "always",
+    validator: (value: string) => ["always", "hover", "selected"].includes(value),
+  },
+  menus: {
+    type: Array,
+    default: () => [],
+  },
+  title: String,
+  trigger: {
+    type: String,
+    default: "click",
+  },
+  width: {
+    type: String,
+    default: "40",
+  },
+
+});
+
+const instance = getCurrentInstance()
+
+
+const isShow = computed(() => {
+  return function (row: any) {
+    if (props.showType === "selected") {
+      const selection = instance?.parent?.parent?.store?.getSelectionRows()
+      return selection.includes(row) && true;
+    } else {
+      return true;
+    }
+  };
+});
+
+const disabled = computed(() => {
+  return function (item: any, row: any) {
+    return typeof item.disabled === "function"
+      ? item.disabled(row)
+      : item.disabled;
+  };
+});
+
+
+function handleCommand({ item, row }: any) {
+  item.click(row);
+}
+function composeValue(item: any, row: any) {
+  return {
+    item,
+    row,
+  };
+}
+
+function show(index: number) {
+  instance.refs[`dropdown${index}`].handleOpen();
+}
+function hide(index: number) {
+  instance.refs[`dropdown${index}`].handleClose();
+}
+defineExpose({
+  show,
+  hide
+})
+</script>

package/src/components/table/table-column-dropdown/index.ts

@@ -0,0 +1,7 @@
+import FuTableColumnDropdown from "./FuTableColumnDropdown.vue";
+import type { App } from 'vue'
+FuTableColumnDropdown.install = (app: App): void =>{
+  app.component(FuTableColumnDropdown.name, FuTableColumnDropdown);
+};
+
+export default FuTableColumnDropdown;

package/src/components/table/table-column-select/FuTableColumnSelect.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+import { defineComponent, h } from 'vue'
+import FuTableColumnSelectPopover from "./FuTableColumnSelectPopover.vue";
+import FuTableColumnSelectDialog from "./FuTableColumnSelectDialog.vue";
+
+export default defineComponent({
+    name: 'FuTableColumnSelect',
+    props: ["type"],
+    setup(props, context) {
+        const { type } = props
+        return () => {
+            if (type === "dialog") {
+                return h(FuTableColumnSelectDialog, context.attrs, context.slots)
+            } else {
+                return h(FuTableColumnSelectPopover, context.attrs, context.slots)
+            }
+        }
+    }
+
+})
+</script>
+

package/src/components/table/table-column-select/FuTableColumnSelectDialog.vue

@@ -0,0 +1,99 @@
+<template>
+  <div style="display: inline-block">
+    <!-- :size="configSize"  -->
+    <el-button class="fu-search-bar-button" :icon="icon" @click="visible = true">{{t('fu.table.custom_table_rows')}}</el-button>
+    <el-dialog custom-class="fu-table-column-select-dialog" v-model="visible" @open="open" append-to-body>
+      <template #title>
+        <h3>
+          {{ t('fu.table.custom_table_fields') }}
+        </h3>
+        <el-alert :title="t('fu.table.custom_table_fields_desc')" type="info" :closable="false"/>
+      </template>
+
+      <el-checkbox v-for="(c, i) in cloneColumns" :key="i" v-model="c.show" :checked="c.show !== false" draggable="true"
+                   @dragstart="dragstart($event, i)" @dragenter="dragenter" @dragleave="dragleave"
+                   @dragover.prevent @dragend="dragend" @drop="drop($event, cloneColumns, i)" v-show="!c.fix">
+        {{ c.label }}
+      </el-checkbox>
+
+      <template #footer>
+        <el-button @click="reset" v-if="columnsKey">
+          {{ t('fu.table.reset') }}
+        </el-button>
+        <el-button type="primary" @click="ok">
+          {{ t('fu.table.ok') }}
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script setup lang="ts">
+import {ref, inject} from "vue";
+import {tableColumnSelect} from "./utils"
+import {useLocale} from "@/hooks"
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: "Setting"
+  },
+  trigger: {
+    type: String,
+    default: "hover",
+    validator: (value: string) => ['click', 'hover'].includes(value)
+  },
+  columns: {
+    type: Array,
+    default: () => []
+  },
+
+})
+
+const localKey = inject("localKey")
+
+const {t} = useLocale()
+
+const cloneColumn = (source: any, target: any) => {
+  source.forEach((col: any) => {
+    target.push(Object.assign({}, col))
+  })
+  return target
+}
+
+
+const {
+  columnsKey,
+  dragstart,
+  dragenter,
+  dragleave,
+  dragend,
+  drop
+} = tableColumnSelect(localKey)
+
+const cloneColumns = ref([])
+const visible = ref(false)
+
+function open() {
+  cloneColumns.value = []
+  cloneColumn(props.columns, cloneColumns.value)
+}
+
+function ok() {
+  props.columns.splice(0, props.columns.length)
+  cloneColumns.value.forEach(c => {
+    props.columns.push(c)
+  })
+  visible.value = false
+}
+
+function reset() {
+  if (columnsKey) {
+    localStorage.removeItem(columnsKey.value)
+  }
+  props.columns.splice(0, props.columns.length)
+  visible.value = false
+}
+
+</script>