ci-plus 1.0.1

package/src/sortableTable/sortableTable.vue

@@ -0,0 +1,221 @@
+<template>
+  <el-table v-bind="table || {}" :data="data" :header-cell-class-name="setClass" ref="elTableRef">
+    <slot></slot>
+    <sortable-table-column-cell
+      v-if="props.modelValue"
+      v-for="v in rowValue"
+      :key="v.id"
+      :data="v"
+    />
+  </el-table>
+</template>
+<script setup lang="ts">
+defineOptions({ name: 'cc-table' })
+import { CellCls, ElTable } from 'element-plus'
+import Sortable from 'sortablejs'
+import { computed, onBeforeMount, onMounted, ref } from 'vue'
+import { SortableTableIns, SortColumn } from './utils/interface'
+import sortableTableColumnCell from './utils/sortableTableColumnCell.vue'
+import { cloneDeep } from 'lodash'
+let props = defineProps<SortableTableIns>()
+const elTableRef = ref<InstanceType<typeof ElTable>>()
+const emits = defineEmits(['update:modelValue', 'update:data'])
+const rowValue = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emits('update:modelValue', value)
+  }
+})
+const data = computed({
+  get() {
+    return props.data
+  },
+  set(value) {
+    emits('update:data', value)
+  }
+})
+
+onBeforeMount(() => {})
+onMounted(() => {
+  columnDrop(elTableRef.value?.$el)
+})
+const columnDrop = (elem?: HTMLTableElement) => {
+  // 如果没有传入elem，则返回
+  if (!elem) return
+  // 获取表格的表头元素
+  const header = elem.querySelector('.el-table__header-wrapper')
+  // 如果没有表头元素，则返回
+  if (!header) return
+  // 设置延时执行函数
+  setTimeout(() => {
+    // 获取表头中的所有行元素
+    const trs = header.querySelectorAll('thead > tr')
+    // 遍历行元素
+    trs.forEach((v) => {
+      let tr = v as HTMLElement
+      // 创建拖拽排序对象
+      Sortable.create(tr, {
+        // 动画时间
+        animation: 180,
+        // 延迟时间
+        delay: 0,
+        // 拖拽元素
+        draggable: '.sortable',
+        // 过滤器
+        filter: (evt, item) => !getLocation(item),
+        // 拖拽排序时触发的函数
+        onMove: ({ dragged, related }) => {
+          // 获取拖拽元素的排序位置
+          let location = getLocation(dragged)
+          // 如果没有排序位置，则返回false
+          if (!location) return false
+          // 获取排序位置的数组
+          const locationArr = location.split('_').slice(1).map(Number)
+          // 判断拖拽元素是否在相关元素之前
+          return inChildren(locationArr[0], getIndex(tr, dragged), getIndex(tr, related))
+        },
+        // 拖拽排序后的函数
+        onUpdate({ oldIndex, newIndex }) {
+          // 如果没有排序值，则返回
+          if (!rowValue.value) return
+          // 如果没有旧的索引和新的索引，则返回
+          if (oldIndex === void 0 || newIndex === void 0) return
+          // 获取旧的th元素
+          let oldTh = tr.children[oldIndex]
+          // 获取新的th元素
+          let newTh = tr.children[newIndex]
+          // 获取旧的排序位置
+          let oldLocation = getLocation(oldTh)
+          // 获取新的排序位置
+          let newLocation = getLocation(newTh)
+          // 如果没有旧的排序位置或者新的排序位置，则返回false
+          if (!oldLocation || !newLocation) return false
+          // 获取旧的排序位置的数组
+          let oldLocationArr = oldLocation.split('_').slice(1).map(Number)
+          // 如果旧的排序位置的第一个元素为1，则减去count
+          if (oldLocationArr[0] === 1) {
+            let count = tr.querySelectorAll('.el-table-fixed-column--left').length
+            newIndex -= count
+            oldIndex -= count
+          }
+          // 获取新的排序位置的数组
+          let newLocationArr = newLocation.split('_').slice(1).map(Number)
+          // 获取旧的路径
+          let oldPath = getPath(oldLocationArr[0], oldIndex)
+          // 获取新的路径
+          let newPath = getPath(newLocationArr[0], newIndex)
+          // 如果没有旧的路径或者新的路径，则返回false
+          if (!oldPath || !newPath) return false
+          // 克隆排序值
+          let tem = cloneDeep(rowValue.value)
+          // 设置新的路径和新的排序值
+          setValue(cloneDeep(getValue(oldPath)), newPath, tem)
+          // 设置旧的路径和旧的排序值
+          setValue(cloneDeep(getValue(newPath)), oldPath, tem)
+          // 设置新的排序值
+          rowValue.value = tem
+        }
+      })
+    })
+  })
+}
+const getIndex = (father: HTMLElement, child: HTMLElement) =>
+  Array.from(father.children).indexOf(child)
+// 获取元素的路径
+const getLocation = (dom: Element) => dom && dom.className.match(/sortable_[0-9]+_[0-9]+/g)?.[0]
+// 判断当前元素是否在当前行中
+const inChildren = (level: number, from: number, to: number) => {
+  if (!rowValue.value) return false
+  if (level === 1) return true
+  let item = levelFlat(level - 1).filter((v) => !v.hide)
+  return getColumnFatherIndex(item, from) === getColumnFatherIndex(item, to)
+}
+// 获取当前元素的父级元素的索引
+const getColumnFatherIndex = (item: SortColumn[], end: number) => {
+  let i = 0
+  while (end >= 0) {
+    const v = item[i]
+    i++
+    if (v.hide) continue
+    let children = v.children
+    if (!children) return false
+    end -= children.length
+  }
+  return i
+}
+// 获取当前元素的路径
+const getPath = (level: number, end: number) => {
+  if (!rowValue.value) return
+  end += hideCount(level, end)
+  if (level === 1) return [end]
+  let path = Array.from({ length: level }).map((v) => 0)
+  if (!end) {
+    f(rowValue.value, 0)
+    path[level - 1] = 0
+  } else
+    while (end > 0) {
+      f(rowValue.value, 0)
+      end--
+    }
+  function f(data: SortColumn[], depth: number) {
+    let flag = 0
+    for (let i = 0; i < data.length; i++) {
+      let v = data[i]
+      if (depth === level - 1) {
+        if (flag !== i) {
+          flag = i
+          path[depth] = 0
+        }
+        path[depth] += 1
+      } else if (v.children) return f(v.children, depth + 1)
+      else path[depth] += 1
+    }
+  }
+  return path
+}
+// 获取当前元素的值
+const getValue = (
+  path: number[],
+  parent?: boolean,
+  data: SortColumn[] = rowValue.value
+): SortColumn => {
+  if (!path.length) path[0] = 0
+  if (path.length <= (parent ? 2 : 1)) return data[path[0]]
+  return getValue(path.slice(1), parent, data[path[0]].children)
+}
+// 设置当前元素的值
+const setValue = (data: SortColumn, path: number[], value: SortColumn[]): SortColumn[] => {
+  if (path.length) {
+    let tem = value[path[0]]
+    if (path.length === 1) value[path[0]] = data
+    else if (tem.children) value[path[0]].children = setValue(data, path.slice(1), tem.children)
+  }
+  return value
+}
+// 计算当前元素的隐藏数量
+const hideCount = (level: number, index: number) =>
+  levelFlat(level)
+    .slice(0, index + 1)
+    .filter((v) => v.hide).length
+// 获取当前行的数据
+const levelFlat = (level: number, data = rowValue.value): SortColumn[] => {
+  if (level > 1)
+    return levelFlat(
+      level - 1,
+      data.filter((v) => v.children).flatMap((v) => v.children) as SortColumn[]
+    )
+  return data
+}
+// 设置当前元素的类名
+const setClass: CellCls<typeof props.data> = ({ column }) => {
+  let className = props.table?.headerCellClassName || ''
+  if (!column.fixed && column.id) {
+    className += ` sortable sortable_${column.level}_${column.no}`
+  }
+  return className as string
+}
+defineExpose({ table: elTableRef })
+</script>
+<style scoped></style>

package/src/sortableTable/sortableTableDialog.vue

@@ -0,0 +1,109 @@
+<template>
+  <el-dialog
+    v-model="state"
+    v-bind="config"
+    draggable
+  >
+    <div class="container">
+      <b>
+        按住
+        <el-icon><Rank /></el-icon>
+        进行移动，点击表头名字进行隐藏, 点击确定进行保存，点击
+        <!-- <Star style="width: 1em; height: 1em; margin-right: 8px" /> -->
+        <svg-icon
+          name="regular-center"
+          size="14"
+        ></svg-icon>
+        固定，点击
+        <!-- <StarFilled style="width: 1em; height: 1em; margin-right: 8px" /> -->
+        <svg-icon
+          name="regular-left"
+          size="14"
+          color="#2C93FF"
+        ></svg-icon>
+        或
+        <svg-icon
+          name="regular-right"
+          size="14"
+          color="#2C93FF"
+        ></svg-icon>
+        取消固定
+
+        <el-popover
+          placement="bottom-start"
+          title="提示"
+          :width="200"
+          trigger="hover"
+          content="点击保存会将本表头的配置存储到数据库，下次登录还是你保存的配置,不保存的话，只在本次配置有效"
+        >
+          <template #reference>
+            <el-icon style="font-size: 14px"><QuestionFilled /></el-icon>
+          </template>
+        </el-popover>
+      </b>
+      <sortable-table-drag-item
+        style="flex-grow: 1; overflow: auto"
+        scroll-fensitivity="0"
+        v-model="modelValue"
+        show-pin
+      />
+
+      <el-tooltip
+        content="将表头配置保存到数据库"
+        placement="top-end"
+      >
+        <el-button
+          type="primary"
+          style="width: 100%; margin-top: 10px"
+          @click="$emit('submit', modelValue)"
+        >
+          保存
+        </el-button>
+      </el-tooltip>
+    </div>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { SortableTableDialog } from './utils/interface'
+import sortableTableDragItem from './utils/sortableTableDragItem.vue'
+import { Rank } from '@element-plus/icons-vue'
+import SvgIcon from '@/components/SvgIcon.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+const emits = defineEmits(['update:modelValue', 'update:data', 'submit'])
+const state = ref(false)
+const props = defineProps<SortableTableDialog>()
+const modelValue = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emits('update:modelValue', value)
+  },
+})
+defineExpose({
+  open: () => {
+    state.value = true
+  },
+  close: () => {
+    state.value = false
+  },
+  state,
+})
+</script>
+<style scoped lang="scss">
+.container {
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  > b {
+    padding-right: 20px;
+  }
+}
+</style>

package/src/sortableTable/utils/dataOpt.ts

@@ -0,0 +1,65 @@
+import { SortColumn, SortColumnSend } from './interface'
+export const setId = (data: SortColumn[]) => {
+  let i = 1
+  const idSet = new Set()
+  const _set = (id: number): number => {
+    if (idSet.has(id)) {
+      return _set(id + 1)
+    }
+    return id
+  }
+  const f = (data: SortColumn[]) => {
+    data.forEach((v) => {
+      if (v.id !== undefined && v.id !== null) return idSet.add(v.id)
+      v.id = _set(i)
+      i = v.id + 1
+      if (v.children && v.children.length) f(v.children)
+    })
+    return data
+  }
+  return f(data)
+}
+export const getSend = (data: SortColumn[]): SortColumnSend[] => {
+  return data.map((v) => {
+    const tem = {
+      hide: Boolean(v.hide),
+      id: v.id,
+      prop: v.col.prop,
+      title: v.col.label,
+      fixed: v.col.fixed,
+      ban: Boolean(v.ban),
+    } as SortColumnSend
+    if (v.children && v.children.length) tem.children = getSend(v.children)
+    return tem
+  })
+}
+export const sort = (
+  data: SortColumn[],
+  send?: SortColumnSend[],
+): SortColumn[] => {
+  if (!send || !send.length) return data
+  const tem = [] as SortColumn[]
+  const ids: Record<number, number> = {}
+  data.forEach((v, i) => {
+    if (v.id) ids[v.id] = i
+  })
+  send.forEach((v) => {
+    const item = data.find((vv) => vv.id === v.id)
+    if (!item || !item.id) return
+    delete ids[item.id]
+    if (v.ban) return
+    item.hide = v.hide
+    item.col.fixed = v.fixed
+    if (v.children && item.children)
+      item.children = sort(item.children, v.children)
+    tem.push(item)
+  })
+  Object.keys(ids).forEach((k) => {
+    const i = ids[k]
+    const item = data.find((v) => v.id === Number(k))
+    if (!item) return
+    if (tem.length <= i) tem.push(item)
+    else tem.splice(i, 0, item)
+  })
+  return tem
+}

package/src/sortableTable/utils/dateShortcuts.ts

@@ -0,0 +1,72 @@
+import { ref } from 'vue'
+export type Shortcuts = { text: string; value: Date | (() => Date) }
+export type DefaltShortcuts = Record<ShortcutsKey, Shortcuts>
+export type ShortcutsKey =
+  | 'today'
+  | 'tomorrow'
+  | 'yesterday'
+  | 'nextweek'
+  | 'nextmonth'
+  | 'prevmonth'
+export const defaltShortcuts = {
+  today: {
+    text: '今天',
+    value: new Date(),
+  },
+  tomorrow: {
+    text: '明天',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() + 3600 * 1000 * 24)
+      return date
+    },
+  },
+  yesterday: {
+    text: '昨天',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24)
+      return date
+    },
+  },
+  nextweek: {
+    text: '下周',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
+      return date
+    },
+  },
+  nextmonth: {
+    text: '下个月',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() + 3600 * 1000 * 24 * 30)
+      return date
+    },
+  },
+  prevmonth: {
+    text: '上个月',
+    value: () => {
+      const date = new Date()
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
+      return date
+    },
+  },
+} as DefaltShortcuts
+
+export const shortcuts = (keys?: ShortcutsKey[], is_ref = false) => {
+  if (!keys) {
+    if (!is_ref) return defaltShortcuts
+    return ref(defaltShortcuts)
+  } else {
+    const tem = [] as Shortcuts[]
+    keys.forEach((key) => {
+      if (defaltShortcuts[key]) {
+        tem.push(defaltShortcuts[key])
+      }
+    })
+    if (!is_ref) return tem
+    return ref(tem)
+  }
+}

package/src/sortableTable/utils/filter.vue

@@ -0,0 +1,30 @@
+<!-- @format -->
+
+<template>
+  <svg
+    t="1702537913405"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="1520"
+    width="14"
+    height="14"
+  >
+    <path
+      d="M0 0l204.8 409.6v512l307.2 102.4V409.6l204.8-409.6H0zM614.4 819.2h409.6v102.4h-409.6zM614.4 614.4h409.6v102.4h-409.6z"
+      :fill="color || '#b3b3b3'"
+      p-id="1521"
+    ></path>
+    <path
+      d="M614.4 409.6h409.6v102.4h-409.6z"
+      :fill="color || '#b3b3b3'"
+      p-id="1522"
+    ></path>
+  </svg>
+</template>
+<script lang="ts" setup>
+const props = defineProps<{
+  color?: string
+}>()
+</script>

package/src/sortableTable/utils/filterIcon.vue

@@ -0,0 +1,8 @@
+<!-- @format -->
+
+<template>
+  <filterVue style="cursor: pointer" />
+</template>
+<script setup lang="ts">
+import filterVue from './filter.vue'
+</script>

package/src/sortableTable/utils/headerPopover.vue

@@ -0,0 +1,92 @@
+<!-- @format -->
+
+<template>
+  <el-popover
+    :visible="show"
+    placement="bottom"
+    :width="width || 230"
+    :trigger="trigger"
+    @hide="emits('close')"
+    @show="emits('open')"
+  >
+    <template #reference>
+      <slot
+        name="reference"
+        :open="open"
+        :close="close"
+        :toggle="toggle"
+      />
+    </template>
+    <div
+      style="display: flex; align-items: center; justify-content: center"
+      v-loading="loading"
+    >
+      <div style="flex-grow: 1">
+        <slot :closeF="close" />
+      </div>
+      <div style="margin-left: 5px">
+        <div>
+          <el-button
+            type="primary"
+            size="small"
+            @click="submit"
+          >
+            确认
+          </el-button>
+        </div>
+        <div style="margin-top: 5px">
+          <el-button
+            size="small"
+            @click="emits('clear')"
+          >
+            清空
+          </el-button>
+        </div>
+        <div style="margin-top: 5px">
+          <el-button
+            type="warning"
+            size="small"
+            @click="close"
+          >
+            关闭
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElPopover, TooltipTriggerType } from 'element-plus'
+const props = defineProps<{
+  width?: number
+  trigger?: TooltipTriggerType
+  loading?: boolean
+}>()
+const emits = defineEmits(['confirm', 'clear', 'close', 'open'])
+const show = ref(false)
+
+// 打开
+const open = () => (show.value = true)
+// 关闭
+const close = () => {
+  show.value = false
+}
+const toggle = () => {
+  show.value = !show.value
+}
+// 面板确定按钮
+const submit = () => {
+  emits('confirm')
+  close()
+}
+defineExpose({
+  open,
+  close,
+  toggle,
+  submit,
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/sortableTable/utils/index.d.ts

@@ -0,0 +1,11 @@
+// GlobalComponents for Volar
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    'sortable-table': (typeof import('../sortableTable.vue'))['default']
+    'sortable-table-dialog': (typeof import('../sortableTableDialog.vue'))['default']
+    'sortable-table-column-cell': (typeof import('./sortableTableColumnCell.vue'))['default']
+    'sortable-table-drag-item': (typeof import('./sortableTableDragItem.vue'))['default']
+    'header-popover': (typeof import('./headerPopover.vue'))['default']
+  }
+}
+export {}

package/src/sortableTable/utils/interface.ts

@@ -0,0 +1,52 @@
+import { ColumnCls, TableColumnInstance, TableInstance } from 'element-plus'
+import ElDialog from 'element-plus/es/components/dialog'
+import { Component, Ref, h } from 'vue'
+export interface Scope<T> {
+  row: T
+  $index: number
+  column: ColumnCls<T>
+}
+
+export type Mutable<T> = {
+  -readonly [P in keyof T]: T[P]
+}
+export type Props<T> = Mutable<
+  Partial<Omit<T, `$${string}` | `_${string}` | '$' | '_'>>
+>
+export type anyObj = { [key: string | number | symbol]: any }
+export interface SortColumn {
+  hide?: boolean
+  ban?: boolean
+  id?: number
+  key?: string
+  col: Props<TableColumnInstance>
+  scope?(props: any): string
+  component?: (createVNode: typeof h, data: Scope<any>) => Component
+  header?: (
+    createVNode: typeof h,
+    data: Pick<Scope<any>, '$index' | 'column'>,
+  ) => Component
+  children?: SortColumn[]
+}
+export type SortColumnSend = Pick<SortColumn, 'id' | 'hide'> & {
+  children?: SortColumnSend[]
+  fixed: TableColumnInstance['fixed']
+  ban: boolean
+}
+export interface SortableTableIns
+  extends /* @vue-ignore */ Omit<
+    Props<TableInstance>,
+    'data' | 'ref' | 'headerCellClassName'
+  > {
+  table?: /* @vue-ignore */
+  Props<TableInstance> | /* @vue-ignore */ Ref<Props<TableInstance>>['value']
+  modelValue: SortColumn[] | Ref<SortColumn[]>['value']
+  data: anyObj[] | Ref<anyObj[]>['value']
+  noMove?: boolean
+}
+export interface SortableTableDialog {
+  config?: /* @vue-ignore */
+  | Props<InstanceType<typeof ElDialog>>
+    | /* @vue-ignore */ Ref<Props<InstanceType<typeof ElDialog>>>['value']
+  modelValue: SortColumn[] | Ref<SortColumn[]>['value']
+}

package/src/sortableTable/utils/removeParamsFilters.ts

@@ -0,0 +1,9 @@
+//用来给筛选面板中清除按钮清除store中列的缓存赛选条件：传入params.filters数组和列名
+export const removeParamsFilters = (cArr: any[], column: string) => {
+  if (cArr.length === 0) return
+  cArr.forEach((item, index) => {
+    if (item.column === column) {
+      cArr.splice(index, 1)
+    }
+  })
+}