ibsp-fg-page 4.0.2

package/src/views/designer/modules/ibsp-config/configComponentLibs/DragTabs.vue

@@ -0,0 +1,836 @@
+<script setup>
+import { reactive, ref, onMounted, watch, onDeactivated, computed, nextTick } from 'vue'
+import { ArrowLeft, ArrowRight, CirclePlus, CopyDocument, Delete, Expand, InfoFilled } from '@element-plus/icons-vue'
+import { cloneDeep } from 'lodash-es';
+
+import Draggable from '@/libs/vuedraggable/vuedraggable.js'
+import { treePropsToData } from '@/utils'
+import { getUuid } from '@/utils';
+
+const props = defineProps({
+  itemConfig: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  configValue: {
+    type: Object,
+    default: () => ({})
+  },
+  activeComponent: {
+    type: Object,
+    default: () => ({})
+  },
+  parentConfigValue: {
+    type: Object,
+    default: () => ({})
+  },
+  builtinComponents: {
+    type: Object,
+    default: () => ({})
+  },
+  page: {
+    type: Object,
+    default: () => ({})
+  }
+})
+/**
+ * 清除所有的active
+ */
+const clearAllActive = (item) => {
+  props.itemConfig?.tabChildren?.forEach(item => {
+    item.active = false
+  })
+  item.active = true
+}
+
+const currentTabItem = ref({})
+const dragRef = ref(null)
+const concatProps = computed(()=>{
+  return {
+    label: 'label',
+    key: 'key',
+    show: 'show',
+    sort: 'sort',
+    ...(props.itemConfig?.componentProps?.concatProps || [])
+  }
+})
+
+/**
+ * 选择列
+ * @param item 选中的列
+ */
+const onSelectColumn = (item) => {
+  // const key = Object.keys(props.configValue[props.itemConfig.key])[index]
+  // const newItem = props.itemConfig.tabChildren.find(i => i.key === key)
+
+  clearAllActive(item)
+  currentTabItem.value = item
+
+  document.getElementById('drag-col-' + item._key)?.scrollIntoView?.({
+    behavior: 'smooth',
+    block: 'center',
+    inline: 'center'
+  })
+
+  props.itemConfig?.componentEvent?.change?.({
+    activeComponent: props.activeComponent,
+    item: item,
+    config: props.itemConfig,
+    configValue: props.configValue,
+    page: props.page
+  })
+
+
+};
+
+
+/**
+ * 添加列
+ */
+const onAddColumn = () => {
+  const key = 'column' + getUuid()
+  currentTabItem.value = reactive({
+    active: true,
+    componentType: 'tabColumn',
+    _show: true,
+    children: cloneDeep(props.itemConfig?.baseConfig),
+    _key: key,
+    [concatProps.value.label || 'label']: '新建列',
+    [concatProps.value.key || 'key']: key,
+    [concatProps.value.show || 'show']: true,
+    [concatProps.value.sort || 'sort']: props.itemConfig.tabChildren.length
+  })
+  clearAllActive(currentTabItem.value)
+  /**
+   * 如果当前tab没有配置过，则直接赋值
+   */
+  if ((props.configValue[props.itemConfig.key] === '') || (!(props.configValue[props.itemConfig.key]))) {
+    props.configValue[props.itemConfig.key] = reactive({
+      [key]: {
+        ...(treePropsToData(currentTabItem.value.children, {
+          builtinComponents: props.builtinComponents
+        }) || []),
+        key
+      }
+    })
+  } else {
+    props.configValue[props.itemConfig.key][key] = {
+      ...(treePropsToData(currentTabItem.value.children, {
+        builtinComponents: props.builtinComponents
+      }) || []),
+      key
+    }
+  }
+  props.configValue[props.itemConfig.key][key]._isCustom = true
+
+  props.configValue[props.itemConfig.key][key].sort = props.itemConfig.tabChildren.length
+
+  props.itemConfig.tabChildren.push(currentTabItem.value)
+
+  nextTick(()=>{
+    setTimeout(()=>{
+      document.getElementById(`drag-col-${key}`).scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center'
+      })
+    }, 50)
+  })
+
+  /**
+ * 抛出添加列事件
+ */
+  props.itemConfig?.componentEvent?.addColumn?.({
+    activeComponent: props.activeComponent,
+    newColumn: currentTabItem.value,
+    config: props.itemConfig,
+    configValue: props.configValue,
+    page: props.page
+  })
+}
+
+/**
+ * 删除列
+ */
+const onDeleteColumn = ()=>{
+
+
+  const index = props.itemConfig.tabChildren?.findIndex(item=>item.key === currentTabItem.value?.key)
+  /**
+   * 抛出删除列事件
+   */
+  props.itemConfig?.componentEvent?.deleteColumn?.({
+    activeComponent: props.activeComponent,
+    deleteColumn: props.itemConfig.tabChildren[index],
+    config: props.itemConfig,
+    configValue: props.configValue,
+    page: props.page
+  })
+  /**
+   * 删除配置项
+   */
+  props.itemConfig.tabChildren.splice(index, 1)
+
+  /**
+   * 删除值
+   */
+  delete props?.configValue[props.itemConfig?.key]?.[currentTabItem.value?.key]
+  /**
+   * 设置第一个为选中
+   */
+  currentTabItem.value = props.itemConfig?.tabChildren?.[0]
+
+
+}
+
+/**
+ * 复制列
+ */
+const onCopyColumn = ()=>{
+  const key = 'column' + getUuid()
+
+  /**
+   * 复制配置项
+   */
+  const copyItem = cloneDeep(currentTabItem.value)
+  copyItem.key = key
+
+  /**
+   * 赋值配置项值
+   */
+  const copyItemvalue = cloneDeep(props.configValue[props.itemConfig.key][currentTabItem.value.key])
+  props.configValue[props.itemConfig.key][key] = copyItemvalue
+
+  /**
+   * 添加到配置项中
+   */
+  const currentItemIndex = props.itemConfig?.tabChildren?.findIndex(item=>item.key === currentTabItem.value?.key)
+  props.itemConfig.tabChildren.splice(currentItemIndex + 1, 0, copyItem)
+  currentTabItem.value = copyItem
+
+
+  clearAllActive(currentTabItem.value)
+
+  /**
+   * 抛出复制列事件
+   */
+  props.itemConfig?.componentEvent?.copyColumn?.({
+    activeComponent: props.activeComponent,
+    copyColumn: currentTabItem.value,
+    config: props.itemConfig,
+    configValue: props.configValue,
+    page: props.page
+  })
+
+}
+
+/**
+ * 向左移动
+ */
+const onArrowLeft = ()=>{
+
+  const index = props.itemConfig?.tabChildren?.findIndex(item=>item.key === currentTabItem.value?.key)
+  if (index === 0) return
+  currentTabItem.value = props.itemConfig?.tabChildren?.[index - 1]
+  clearAllActive(currentTabItem.value)
+  nextTick(()=>{
+    setTimeout(()=>{
+      document.getElementById('drag-col-' + currentTabItem.value._key)?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center'
+      })
+    }, 10)
+  })
+}
+
+/**
+ * 向右移动
+ */
+const onArrowRight = ()=>{
+
+  const index = props.itemConfig?.tabChildren?.findIndex(item=>item.key === currentTabItem.value?.key)
+  if (index === props.itemConfig?.tabChildren?.length - 1) return
+  currentTabItem.value = props.itemConfig?.tabChildren?.[index + 1]
+  clearAllActive(currentTabItem.value)
+  nextTick(()=>{
+    setTimeout(()=>{
+      document.getElementById('drag-col-' + currentTabItem.value._key)?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center'
+      })
+    }, 10)
+  })
+}
+
+
+onMounted(() => {
+
+  currentTabItem.value = props.itemConfig?.tabChildren?.find(item => item.active)
+
+  /**
+   * 新建列时, 如果当前tab没有配置过, 则将当前tab设置为选中
+   */
+  watch(()=>props.itemConfig?.tabChildren?.[0], (val)=>{
+    if (val?.active) {
+      currentTabItem.value = val
+    }
+  })
+
+
+})
+
+
+const getCurrentTabItem = computed(()=>{
+  return props.itemConfig.tabChildren?.find(item=>item.active)
+})
+const currentConfigValue = computed(()=>{
+  return props.configValue[props.itemConfig.key]?.[currentTabItem.value?.key || currentTabItem.value?._key]
+})
+
+
+const onDragChange = ({ moved })=>{
+  const element = moved.element
+  let i = 0
+  const tabChildren = props.itemConfig?.tabChildren ?? []
+  for (const item of tabChildren) {
+    i++
+    item.sort = i
+    props.configValue[props.itemConfig.key][item.key].sort = i
+  }
+  props.itemConfig.tabChildren = tabChildren
+
+}
+
+const tabChildren = computed(()=>{
+  return props.itemConfig?.tabChildren ?? []
+})
+
+
+const configValues = computed(()=>{
+  const values = props.itemConfig?.componentProps?.configValues
+  if (typeof values === 'function') {
+    return values({
+      configValue: props.configValue,
+      itemConfig: props.itemConfig,
+      activeComponent: props.activeComponent,
+      parentConfigValue: props.parentConfigValue
+    })
+  }
+  if (!values || !Array.isArray(values)) return []
+  return values
+})
+
+const getConfigList = ()=>{
+  let result = []
+
+  // 删除不是自定义的列
+  const configValueList = props.configValue[props.itemConfig.key]
+  if (Object.values(configValueList)?.length) {
+    const keys = Object.keys(configValueList)
+    for (const key of keys) {
+      const item = configValueList[key]
+      if (!item._isCustom) {
+        delete props.configValue[props.itemConfig.key][key]
+      }
+    }
+  }
+
+  const baseConfig = props.itemConfig?.baseConfig || []
+  const itemConfigValue = props.configValue[props.itemConfig.key]
+
+  const baseConfigValue = treePropsToData(baseConfig)
+
+  const key = concatProps.value.key
+  const label = concatProps.value.label
+  const show = concatProps.value.show
+  const sort = concatProps.value.sort
+
+  for (const key in itemConfigValue) {
+    const item = itemConfigValue[key]
+    itemConfigValue[key] = {
+      ...baseConfigValue,
+      ...item
+    }
+
+  }
+
+  // }
+  // debugger
+  let count = 1
+  for (const item of configValues.value) {
+    count++
+    const itemValue = itemConfigValue?.[item[key]]
+    if (itemValue) {
+      if (itemValue?.[sort] === undefined || itemValue?.[sort] === null) {
+        itemValue[sort] = itemValue._sort ?? count
+      }
+      result.push({
+        label: itemValue[label],
+        key: itemValue[key],
+        active: false,
+        componentType: 'tabColumn',
+        children: baseConfig,
+        show: itemValue?.[show] ?? itemValue._show ?? true,
+        sort: itemValue[sort],
+        _key: getUuid()
+      })
+    } else {
+      if (item[sort] === undefined || item[sort] === null) {
+        item[sort] = count
+      }
+      result.push({
+        label: item[label],
+        key: item[key],
+        active: false,
+        componentType: 'tabColumn',
+        children: baseConfig,
+        show: item?.[show] ?? item._show ?? true,
+        sort: item[sort],
+        _key: getUuid()
+      })
+      itemConfigValue[item[key]] = item
+    }
+  }
+  // 处理自定义的列
+
+  result.push(...Object.values(itemConfigValue).filter(item=>{
+    if (item._isCustom) return true
+    if (!configValues.value.find(i=>i[key] === item[key])) return true
+    return false
+  })
+    .map(item=>{
+      if (item[sort] === undefined || item[sort] === null) {
+        item[sort] = count
+      }
+      return {
+        label: item[label],
+        key: item[key],
+        active: false,
+        componentType: 'tabColumn',
+        children: baseConfig,
+        show: item?.[show] ?? item._show ?? true,
+        sort: item[sort],
+        _key: getUuid()
+      }
+    }))
+  result = result.sort((a, b)=>{
+    return itemConfigValue[a.key]?.[sort] - itemConfigValue[b.key]?.[sort]
+  })
+  // eslint-disable-next-line no-unused-expressions
+  result?.length && (result[0].active = true)
+  props.itemConfig.tabChildren = result
+}
+
+
+const baseConfig = props.itemConfig?.baseConfig || []
+const baseConfigValue = treePropsToData(baseConfig)
+
+const newGetConfigList = ()=>{
+  const _configValues = configValues.value
+  let result = []
+  const itemConfigValues = props.configValue[props.itemConfig.key] || {}
+  const resItemConfigValues = {}
+  const key = concatProps.value.key
+  const label = concatProps.value.label
+  const show = concatProps.value.show
+  const sort = concatProps.value.sort
+  for (const key in itemConfigValues) {
+    const item = itemConfigValues[key]
+    itemConfigValues[key] = {
+      ...baseConfigValue,
+      ...item
+    }
+  }
+
+  const disabledAdd = !(props.itemConfig?.componentProps?.disabledAdd ?? false)
+  const customConfigValuesList = Object.values(itemConfigValues).filter(item=>item._isCustom || disabledAdd)
+
+
+  if (Array.isArray(_configValues) && _configValues.length) {
+
+    // 处理已存在的列
+    for (let index = 0; index < _configValues.length; index++) {
+      const item = _configValues[index];
+      const exitItem = itemConfigValues[item[key]]
+      const t_key = item[key] || item.key
+      if (exitItem) {
+        result.push({
+          label: exitItem[label],
+          key: t_key,
+          active: false,
+          componentType: 'tabColumn',
+          children: baseConfig,
+          show: exitItem?.[show] ?? item._show ?? true,
+          sort: exitItem[sort] ?? index,
+          _key: getUuid()
+        })
+        resItemConfigValues[t_key] = exitItem
+      } else {
+        result.push({
+          label: item[label],
+          key: t_key,
+          active: false,
+          componentType: 'tabColumn',
+          children: baseConfig,
+          show: item?.[show] ?? item._show ?? true,
+          sort: item[sort] ?? index,
+          _key: getUuid()
+        })
+        resItemConfigValues[t_key] = item
+      }
+    }
+
+  } else {
+    // const noCustomList = Object.values(itemConfigValues).filter(item=>!item._isCustom)
+
+    // result = result.concat(noCustomList.map((item, index)=>{
+    //   const t_key = item[key] || item.key
+    //   resItemConfigValues[t_key] = item
+    //   return {
+    //     label: item[label],
+    //     key: t_key,
+    //     active: false,
+    //     componentType: 'tabColumn',
+    //     children: baseConfig,
+    //     show: item?.[show] ?? item._show ?? true,
+    //     sort: item[sort] ?? result.length + index,
+    //     _key: getUuid(),
+    //   }
+    // }))
+  }
+
+
+  // 处理自定义的列
+  result = result.concat(customConfigValuesList.map((item, index)=>{
+    const t_key = item[key] || item.key
+    resItemConfigValues[t_key] = item
+    return {
+      label: item[label],
+      key: t_key,
+      active: false,
+      componentType: 'tabColumn',
+      children: baseConfig,
+      show: item?.[show] ?? item._show ?? true,
+      sort: item[sort] ?? result.length + index,
+      _key: getUuid(),
+      _isCustom: true
+    }
+  }))
+
+  result = result.sort((a, b)=>{
+    return (a?.sort || 2) - (b?.sort || 1)
+  })
+
+  // 去除相同的key的列
+  result = result.filter((item, index, arr)=>{
+    return arr.findIndex(i=>i.key === item.key) === index
+  })
+
+  if (result.length > 0) {
+    result[0].active = true
+  }
+
+  props.itemConfig.tabChildren = result
+  props.configValue[props.itemConfig.key] = resItemConfigValues
+
+}
+
+// let componentId;
+watch(()=>props.activeComponent?.id, (val)=>{
+  if (val) {
+    if (props.itemConfig?._isUpdated) {
+      return
+    }
+    newGetConfigList()
+    props.itemConfig._isUpdated = true
+  }
+
+}, {
+  immediate: true
+})
+
+
+watch(()=>currentConfigValue.value?.[concatProps.value.show], (val)=>{
+  if (val !== undefined) {
+    if (val.expression && val.value !== undefined) {
+      currentTabItem.value.show = val.value
+    } else {
+      currentTabItem.value.show = val
+    }
+  }
+  props.itemConfig.tabChildren = props.itemConfig.tabChildren.sort((a, b)=>{
+    return b.show - a.show
+  })
+}, {
+  deep: true
+})
+
+watch(()=>configValues.value, (val)=>{
+  newGetConfigList()
+}, {
+  immediate: true
+})
+
+const onClickDropDown = ()=>{
+  props.itemConfig._isDropDown = !props.itemConfig?._isDropDown
+
+}
+
+defineExpose({
+  refreshConfig: newGetConfigList
+})
+
+
+const getLabel = computed(()=>{
+  return currentConfigValue.value?.[concatProps.value.label] ?? '新建列'
+})
+
+</script>
+
+<template>
+  <div class="drag-tabs">
+    <header>
+      <div v-if="itemConfig?.tabChildren.length" class="left">
+        <el-icon @click="onArrowLeft" v-if="itemConfig?.tabChildren?.length">
+          <ArrowLeft/>
+        </el-icon>
+        <Draggable
+          :animation="400"
+          :disabled="false"
+          :list="tabChildren"
+          :class="{
+            'nav-list':true,
+            'item-drop-down':props.itemConfig?._isDropDown,
+          }"
+          ghostClass="ghost"
+          group="description"
+          item-key="_key"
+          ref="dragRef"
+          @change="onDragChange"
+        >
+          <template #item="{element:item }">
+            <div
+              :key="item._key"
+              :class="{ 'is-active': item.active,
+                        'nav-item':true,
+                        'disabled':!(item.show?? item._show),
+              }"
+              :id="`drag-col-${item._key}`"
+              @click="onSelectColumn(item)"
+            >
+              <span>{{ configValue[itemConfig.key][item.key || item._key]?.[concatProps.label] || '新建列' }}</span>
+            </div>
+          </template>
+        </Draggable>
+        <el-icon @click="onArrowRight" v-if="props.itemConfig?.tabChildren?.length">
+          <ArrowRight/>
+        </el-icon>
+        <el-tooltip v-if="itemConfig?.componentProps?.tooltip"
+                    :content="itemConfig?.componentProps?.tooltip"
+                    placement="top">
+          <el-icon><InfoFilled  /></el-icon>
+        </el-tooltip>
+      </div>
+      <div v-else class="left"><span>暂无配置 请添加</span></div>
+      <span class="right">
+        <el-icon @click="onClickDropDown"
+                 :style="{
+                   'transform': props.itemConfig?._isDropDown ? 'rotate(90deg)':'rotate(0deg)'
+                 }"><Expand /></el-icon>
+        <el-icon @click="onAddColumn"
+                 v-if=" (!(itemConfig?.componentProps?.disabledAdd ?? false))"
+        ><CirclePlus/></el-icon>
+        <el-icon v-if="!(itemConfig.componentProps?.disabledCopy ?? false)" @click="onCopyColumn"><CopyDocument/></el-icon>
+        <el-icon v-if="!(itemConfig.componentProps?.disabledDelete ?? false)" @click="onDeleteColumn"><Delete/></el-icon>
+      </span>
+    </header>
+    <main>
+      <slot :currentTabItem="getCurrentTabItem" :key="currentTabItem?.key || currentTabItem?._key "></slot>
+    </main>
+
+
+  </div>
+
+</template>
+
+<style lang="less" scoped>
+.drag-tabs {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  header{
+    padding:5px 10px;
+
+    display: flex;
+  border-bottom: 1px solid var(--theme-gl-bg);
+  align-content: space-between;
+  .el-icon {
+    display: inline-block;
+    // height: 22px;
+    // line-height: 22px;
+    cursor: pointer;
+    margin-right: 8px;
+    font-size: 18px;
+    vertical-align: sub;
+
+    &:first-child {
+      margin-right: 0px;
+    }
+  }
+
+  .nav-list {
+    // display: inline-block;
+    overflow: auto;
+    display: flex;
+    width: max-content;
+    &::-webkit-scrollbar{
+         display:none
+    }
+
+  }
+
+  .left {
+    flex: auto;
+    display: flex;
+    white-space: nowrap;
+    overflow-y: scroll;
+
+    .item-drop-down{
+      flex-wrap: wrap;
+      >div{
+        margin: 1px !important;
+      }
+    }
+
+    &::-webkit-scrollbar{
+         display:none
+    }
+    >div{
+      display: flex;
+    width: 100%;
+    overflow: auto;
+    &::-webkit-scrollbar{
+         display:none
+    }
+    .nav-item {
+      flex-shrink: 0;
+      display: inline-block;
+      max-width: 200px;
+      padding: 0 5px;
+      text-align: center;
+      cursor: pointer;
+      transition: background-color .3s;
+      // 超出省略号
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      border-radius: 2px;
+      margin: 0 1px;
+    }
+
+    .disabled{
+      background-color: #999;
+      color: #fff;
+    }
+    }
+  }
+
+  .right {
+    // width: 40px;
+    // min-width: 40px;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    // margin-right: 5px;
+    &::before {
+      position: absolute;
+      height: 15px;
+      width: 1px;
+      background-color: var(--theme-gl-bg);
+      content: '';
+      left: 0;
+      top: 2px;
+    }
+
+    // i {
+    //   padding: 0 10px;
+    //   // vertical-align: sub;
+    // }
+    .el-icon {
+      margin-left: 8px;
+      margin-right: 0;
+    }
+  }
+  }
+
+  main{
+    flex: 1;
+  }
+
+
+}
+.el-icon{
+  font-size: 17px;
+    vertical-align: text-bottom;
+  :deep(svg){
+    color: var(--theme-gl-bg);
+  }
+}
+.is-active {
+  background-color: var(--theme-gl-bg) !important;
+  color: var(--theme-active-color) !important;
+}
+
+.flip-list-move {
+  transition: transform 0.5s;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+
+.no-move {
+  transition: transform 0s;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+.list-group {
+  min-height: 20px;
+}
+
+.list-group-item {
+  cursor: move;
+}
+
+.list-group-item i {
+  cursor: pointer;
+}
+</style>
+
+<style>
+.dragFade-move,
+.dragFade-enter-active,
+.dragFade-leave-active {
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.dragFade-enter-from,
+.dragFade-leave-to {
+  opacity: 0;
+  transform: scaleY(0.01) translate(30px, 0);
+}
+
+.dragFade-leave-active {
+  position: absolute;
+}
+</style>