br-dionysus 1.8.6 → 1.9.0

package/packages/MInline/src/MInline.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="g-inline-box">
+  <div
+    class="g-inline-box"
+    :class="elGlobalClassName"
+  >
     <div
       v-if="slots.inlineBtn"
       v-show="showInlineBtnBox"
@@ -13,6 +16,7 @@
       v-if="slots.default"
       class="m-inline"
       :data-show-inline-btn="showInlineBtnBox"
+      :data-is-config-mode="isConfigMode"
       dataCover
     >
       <div
@@ -26,21 +30,56 @@
       >
         <slot name="default"></slot>
       </div>
+      <el-checkbox-group
+        class="u-check-box-group"
+        v-model="checkList"
+        @change="checkboxChange"
+      >
+        <el-checkbox
+          v-for="key in configKeyList"
+          :key="key"
+          :label="key"
+          :value="key"
+          data-class="checkbox"
+          :data-key="key"
+        >
+          <p></p>
+        </el-checkbox>
+      </el-checkbox-group>
       <div
         class="u-btn-gp"
         :style="{
           height: height + 'px'
         }"
       >
-        <slot name="submitBtn"></slot>
+        <slot
+          v-if="!isConfigMode"
+          name="submitBtn"
+        ></slot>
+        <el-button
+          v-if="isConfigMode"
+          type="primary"
+          icon="FolderChecked"
+          :size="props.size"
+          @click="saveConfig"
+        >
+          保存
+        </el-button>
         <el-icon
-          v-if="showUnfoldBtn"
+          v-if="showUnfoldBtn && !isConfigMode"
           class="u-btn-unfold"
-          @click="switchUnfold"
+          @click="switchUnfold()"
           :data-unfold="unfold"
         >
           <DArrowRight />
         </el-icon>
+        <el-icon
+          v-if="props.configKey"
+          class="u-btn-unfold"
+          @click="switchConfigMode()"
+        >
+          <Setting />
+        </el-icon>
       </div>
     </div>
   </div>
@@ -48,10 +87,11 @@
 
 <script setup lang="ts">
 import { ref, onMounted, useSlots, watch, computed, nextTick } from 'vue'
-import { Size } from 'packages/typings/enum'
+import { Size } from './../../typings/enum'
 import createHash from '../../Tool/createHash/createHash'
-import slotsToData, { SlotsToDataReturn, SlotsToDataReturnItem } from 'packages/Tool/slotsToData/slotsToData'
-import { FormInlineConfigType } from 'packages/Hook/useFormInline/useFormInline'
+import slotsToData, { SlotsToDataReturnItem } from './../../Tool/slotsToData/slotsToData'
+import { FormInlineConfigType } from './../../Hook/useFormInline/useFormInline'
+import usePackageConfig from './../../Hook/usePackageConfig/usePackageConfig'
 
 const props = withDefaults(defineProps<{
   /**
@@ -65,12 +105,15 @@ const props = withDefaults(defineProps<{
   /** 组件尺寸 */
   size?: Size,
   /** 配置key */
-  configKey?: string
+  configKey?: string,
+  /** 筛选对象 */
+  model?: Record<string, any> | null
 }>(), {
   minWidth: 290,
   maxWidth: 400,
   size: Size.DEFAULT,
-  configKey: ''
+  configKey: '',
+  model: null
 })
 
 const height = computed(() => {
@@ -81,6 +124,7 @@ const height = computed(() => {
 })
 
 const boxClassName = 'j-' + createHash(8)
+const elGlobalClassName = 'j-' + createHash(8)
 
 const init = () => {
   const boxEl: HTMLElement | null = document.querySelector('.' + boxClassName + ' [data-box]')
@@ -126,8 +170,8 @@ onMounted(() => {
 
 const unfold = ref<boolean>(false)
 
-const switchUnfold = () => {
-  unfold.value = !unfold.value
+const switchUnfold = (status = !unfold.value) => {
+  unfold.value = status
   emit('switch', unfold.value)
 }
 
@@ -165,124 +209,193 @@ onMounted(() => {
   })
 })
 
-const slotDefaultData = slotsToData(slots)
-const formItemList = slotDefaultData[0].children
-console.log('slotDefaultData', slotDefaultData)
-console.log('formItemList', formItemList)
 /**
- * 重新排列元素顺序
+ * 以下为配置化
  * */
-// const resetOrder = () => {
-//
-// }
-
-type ConfigType = FormInlineConfigType<{
-  name: string;
-  code: string;
-  time: string;
-  type: string;
-  region: string;
-  level: string;
-}>
-const config: ConfigType = {
-  name: {
-    show: true,
-    sort: 2,
-    defaultValue: ''
-  },
-  code: {
-    show: true,
-    sort: 1,
-    defaultValue: ''
-  },
-  time: {
-    show: true,
-    sort: 3,
-    defaultValue: ''
-  },
-  type: {
-    show: true,
-    sort: 4,
-    defaultValue: ''
-  },
-  region: {
-    show: true,
-    sort: 5,
-    defaultValue: ''
-  },
-  level: {
-    show: true,
-    sort: 6,
-    defaultValue: ''
-  }
+const configKey = computed(() => 'formInline' + props.configKey)
+const isConfigMode = ref<boolean>(false)
+/**
+ * 切换配置模式
+ * */
+const switchConfigMode = (status: boolean = !isConfigMode.value) => {
+  isConfigMode.value = status
+
+  if (isConfigMode.value) syncLocalDataToConfig()
+  // if (!isConfigMode.value) syncLocalDataToConfig()
+  markAttribute(config.value)
+  setDomDraggableEvent(config.value)
+  if (!isConfigMode.value) return removeDomDraggableEvent()
+
+  switchUnfold(true)
 }
-console.log('config', config)
+nextTick(() => {
+  if (!props.configKey) return
+  markAttribute(config.value)
+  setDomDraggableEvent(config.value)
+  removeDomDraggableEvent()
+  generateCheckBox()
+})
 
-const itemDomIndexToPropMap: Record<number, string> = {}
-console.log('itemDomIndexToPropMap', itemDomIndexToPropMap)
+type ConfigType = FormInlineConfigType<Record<string, any>>
 
-interface Html_Data extends HTMLElement {
-  data_sort?: number,
-  data_key?: string
+const packageConfig = usePackageConfig()
+const config = ref<ConfigType>({})
+const checkList = ref<string[]>([])
+checkList.value = Object.keys(config.value).filter(key => config.value[key as keyof typeof config.value].show)
+/**
+ * 同步本地配置数据到缓存（生效）
+ * */
+const syncLocalDataToConfig = () => {
+  if (!props.configKey) return
+  const slotDefaultData = slotsToData(slots)
+  const formItemList = slotDefaultData[0].children
+  const keyList = formItemList.map(item => item?.props?.prop).sort(item => item)
+  const cacheConfig = packageConfig.get<ConfigType>(configKey.value)
+  let count = Object.keys(cacheConfig).length
+  for (const key in props.model) {
+    if (key === 'reset' || !keyList.includes(key)) continue
+    config.value[key] = {
+      sort: cacheConfig[key] !== undefined ? cacheConfig[key].sort : count++,
+      defaultValue: cacheConfig[key] !== undefined ? cacheConfig[key].defaultValue : props.model[key],
+      show: cacheConfig[key] !== undefined ? cacheConfig[key].show : true
+    }
+  }
+  checkList.value = Object.keys(config.value).filter(key => config.value[key as keyof typeof config.value].show)
 }
+syncLocalDataToConfig()
 
 /**
- * 排序dom列表
- * @return Html_Data[]
+ * 标记dom的属性
  * */
-const domListSort = (domList: Html_Data[], configData: ConfigType): Html_Data[] => {
-  const slotChildrenList = slotDefaultData[0].children || []
+const markAttribute = (configData: ConfigType) => {
+  const slotDefaultData = slotsToData(slots)
+  const formItemList = slotDefaultData[0].children
+  const domNodeList: NodeList = document.querySelectorAll(`.${boxClassName} [data-box] [data-item]`)
+  const domList: HTMLElement[] = Array.from(domNodeList) as HTMLElement[]
+  const itemDomIndexToPropMap: Record<number, string> = {}
   domList.forEach((e, idx) => {
-    itemDomIndexToPropMap[idx] = (slotChildrenList[idx] as SlotsToDataReturnItem).props?.prop
+    itemDomIndexToPropMap[idx] = (formItemList[idx] as SlotsToDataReturnItem).props?.prop
   })
   domList.forEach((item, idx) => {
-    item.data_sort = configData[itemDomIndexToPropMap[idx] as keyof typeof configData].sort
-    item.data_key = itemDomIndexToPropMap[idx]
+    const key = item.getAttribute('data-key') || itemDomIndexToPropMap[idx] as keyof typeof configData
+    const itemConfig = configData[key] || {}
+    item.setAttribute('data-sort', String(itemConfig.sort))
+    // const a = item.querySelector('p')
+    // if (a) a.innerText = itemConfig.sort
+    item.setAttribute('data-key', key)
+    item.setAttribute('data-show', String(itemConfig.show))
   })
-  return domList.sort((a, b) => (a?.data_sort || 0) - (b?.data_sort || 0))
 }
 
+const configKeyList: string[] = Object.keys(config.value)
+const checkboxChange = () => {
+  for (const key in config.value) {
+    config.value[key as keyof typeof config.value].show = checkList.value.includes(key)
+  }
+  markAttribute(config.value)
+}
 /**
- * 设置元素的拖拽事件
+ * 生成复选框
  * */
-const setDomDraggableEvent = (formItem: SlotsToDataReturn = []) => {
-  const drop = (index: number) => {
-    console.log('index', index)
-  }
-  const dragstart = (keyName: string = '') => {
-    console.log('keyName', keyName)
+const generateCheckBox = () => {
+  const domNodeList: NodeList = document.querySelectorAll(`.${boxClassName} [data-box] [data-item]`)
+  const domList: HTMLElement[] = Array.from(domNodeList) as HTMLElement[]
+  domList.forEach(dom => {
+    const key = dom.getAttribute('data-key')
+    const checkDom = document.querySelector(`.${elGlobalClassName} [data-class='checkbox'][data-key='${key}']`)
+    if (!checkDom) return
+    dom.appendChild(checkDom)
+  })
+}
+
+const dragKey = ref<string>('')
+const dragstart = (keyName: string = '') => {
+  dragKey.value = keyName
+}
+const drop = (index: number, configData: ConfigType) => {
+  const keySort = Object.keys(configData)
+    .sort((a, b) => configData[a as keyof typeof configData].sort - configData[b as keyof typeof configData].sort)
+
+  keySort.splice(keySort.indexOf(dragKey.value), 1)
+  keySort.splice(index, 0, dragKey.value)
+
+  for (const key in configData) {
+    const _key = key as keyof typeof configData
+    config.value[_key].sort = keySort.indexOf(key)
   }
 
+  markAttribute(config.value)
+  setDomDraggableEvent(config.value)
+  const dom = document.querySelector(`.${boxClassName} [data-switch="true"]`)
+  if (!dom) return
+  dom.setAttribute('data-switch', 'false')
+  dragenterIndex.value = null
+}
+const dragover = (event: Event) => event.preventDefault()
+const dragenterIndex = ref<number | null>(null)
+const ondragenter = (index: number) => {
+  dragenterIndex.value = index
   const domNodeList: NodeList = document.querySelectorAll(`.${boxClassName} [data-box] [data-item]`)
-  const domList: HTMLElement[] = []
-  domNodeList.forEach(dom => domList.push(dom as HTMLElement))
-  for (let i = 0; i < formItem.length; i++) {
-    const item = formItem[i]
+  const domList: HTMLElement[] = Array.from(domNodeList) as HTMLElement[]
+  domList.forEach(dom => {
+    const sort = Number(dom.getAttribute('data-sort'))
+    dom.setAttribute('data-switch', String(sort === dragenterIndex.value))
+  })
+}
+/**
+ * 设置元素的拖拽事件与顺序
+ * */
+const setDomDraggableEvent = (config: ConfigType) => {
+  const formDom: HTMLDivElement | null = document.querySelector(`.${boxClassName} [data-box]`)
+  if (!formDom) return
+  formDom.ondragover = dragover
 
+  const domList: HTMLElement[] = Array.from(formDom.childNodes)
+    .filter(dom => dom.nodeType !== Node.TEXT_NODE && dom.nodeType !== Node.COMMENT_NODE) as HTMLElement[]
+
+  const newDomList = domList.sort((a, b) => {
+    const aKey = a.getAttribute('data-key') as keyof typeof config
+    const bKey = b.getAttribute('data-key') as keyof typeof config
+    return (config[aKey]?.sort || 0) - (config[bKey]?.sort || 0)
+  })
+  newDomList.forEach(dom => {
+    formDom.appendChild(dom)
+  })
+
+  for (let i = 0; i < domList.length; i++) {
     const dom = domList[i]
-    if (!dom) continue
 
     dom.draggable = true
-    dom.ondrop = () => drop(i)
-    dom.ondragstart = () => dragstart(item.props?.prop as string)
+    dom.ondrop = () => drop(i, config)
+    dom.ondragstart = () => dragstart(dom.getAttribute('data-key') as string)
+    dom.ondragenter = () => ondragenter(i)
   }
+}
+
+/**
+ * 清除元素的拖拽事件
+ * */
+const removeDomDraggableEvent = () => {
   const formDom: HTMLDivElement | null = document.querySelector(`.${boxClassName} [data-box]`)
   if (!formDom) return
-  formDom.innerHTML = ''
-  // console.log(domList)
-  const newDomList = domListSort(domList, config)
-  console.log(newDomList)
-  newDomList.forEach(dom => {
-    const clone = dom.cloneNode(true)
-    formDom.appendChild(clone)
-  })
+
+  const domList: HTMLElement[] = Array.from(formDom.childNodes)
+    .filter(dom => dom.nodeType !== Node.TEXT_NODE) as HTMLElement[]
+
+  for (let i = 0; i < domList.length; i++) {
+    const dom = domList[i]
+
+    dom.draggable = false
+  }
 }
 
-nextTick(() => {
-  setDomDraggableEvent(formItemList)
-  // const formDom: HTMLDivElement | null = document.querySelector(`.${boxClassName} [data-box]`)
-  // console.log('formDom', formDom)
-})
+const saveConfig = () => {
+  for (const key in config.value) {
+    config.value[key].defaultValue = (props.model || {})[key] === undefined ? config.value[key].defaultValue : (props.model || {})[key]
+  }
+  packageConfig.set(configKey.value, config.value)
+  switchConfigMode(false)
+}
 </script>
 
 <style scoped lang="scss">
@@ -318,6 +431,15 @@ nextTick(() => {
   }
 }
 
+.m-inline-btn + .m-inline[data-is-config-mode="false"] {
+  //[data-show="false"] {
+  //  display: none;
+  //}
+  [data-class="checkbox"] {
+    display: none;
+  }
+}
+
 .u-btn-gp {
   display: flex;
   padding-bottom: 10px;
@@ -327,6 +449,12 @@ nextTick(() => {
   box-sizing: border-box;
 }
 
+.u-check-box-group {
+  //display: flex;
+  display: none;
+  flex: 1;
+}
+
 .u-row {
   display: flex;
   overflow: hidden;
@@ -336,6 +464,10 @@ nextTick(() => {
   &[data-unfold="true"] {
     max-height: none !important;
   }
+
+  > [data-class="checkbox"] {
+    display: none;
+  }
 }
 
 .u-btn-unfold {
@@ -352,6 +484,11 @@ nextTick(() => {
     transform: rotate(270deg);
   }
 }
+
+[data-class="checkbox"] {
+  padding-left: 5px;
+  height: auto;
+}
 </style>
 
 <style lang="scss">
@@ -395,5 +532,17 @@ nextTick(() => {
       }
     }
   }
+
+  .m-inline-btn + .m-inline[data-is-config-mode="false"] {
+    [data-show="false"] {
+      display: none;
+    }
+  }
+
+  [data-switch="true"] {
+    //border-top: 1px solid #2a598a;
+    //border-left: 1px solid #2a598a;
+    box-shadow: inset 0 -5px 10px var(--el-color-primary-light-8);
+  }
 }
 </style>

package/packages/MSelect/src/MOption.vue

@@ -18,7 +18,7 @@
 
 <script setup lang="ts">
 import { inject, useAttrs, computed } from 'vue'
-import { selectKey } from 'packages/MSelect/src/token'
+import { selectKey } from './../../MSelect/src/token'
 
 const attrs = useAttrs()
 

package/packages/MSelect/src/MSelect.vue

@@ -18,7 +18,7 @@
 
 <script setup lang="ts">
 import { provide, useAttrs, ref, watch } from 'vue'
-import { selectKey } from 'packages/MSelect/src/token'
+import { selectKey } from './../../MSelect/src/token'
 
 const props = withDefaults(defineProps<{
   /** 是否为checkbox模式 */

package/packages/MSelectTable/docs/demo.vue

@@ -84,7 +84,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { Page } from 'packages/typings/class'
+import { Page } from './../../typings/class'
 
 const commodityOptionsTitle: TableTitle[] = [{
   prop: 'PRDocType',

package/packages/MTable/docs/demo.vue

@@ -92,8 +92,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useTableConfig } from 'packages/index'
-import { MTableColumn } from 'packages/MTableColumn'
+import { useTableConfig } from './../../index'
+import { MTableColumn } from './../../MTableColumn'
 
 const privateExpandChange = (row: any, expandedRows: any[]) => {
   console.log('row', row)

package/packages/MTable/src/token.ts

@@ -1,6 +1,6 @@
 import { InjectionKey } from 'vue'
 import type { Ref } from 'vue'
-import { TableConfig } from 'packages/Hook/useTableConfig/useTableConfig'
+import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
 
 export const tableKey: InjectionKey<{
   /** 表格列配置 */

package/packages/MTableColumnSet/src/MTableColumnSet.vue

@@ -93,7 +93,7 @@ import { ref, watch, computed } from 'vue'
 import type { Ref } from 'vue'
 import createHash from '../../Tool/createHash/createHash'
 import { useZIndex } from 'element-plus'
-import type { TableConfigItem } from 'packages/Hook/useTableConfig/useTableConfig'
+import type { TableConfigItem } from './../../Hook/useTableConfig/useTableConfig'
 
 interface TableConfig {
   [propName: string]: TableConfigItem

package/packages/MTableSuper/docs/demo.vue

@@ -139,8 +139,8 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useTableConfig } from 'packages/index'
-import { MTableColumn } from 'packages/MTableColumn'
+import { useTableConfig } from './../../index'
+import { MTableColumn } from './../../MTableColumn'
 
 const privateExpandChange = (row: any, expandedRows: any[]) => {
   console.log('row', row)

package/packages/MTableSuper/src/MTableSuper.vue

@@ -23,8 +23,8 @@
 
 <script setup lang="ts">
 import { useAttrs, useSlots, computed, createVNode, unref, ref } from 'vue'
-import { MTableV2 } from 'packages/MTableV2'
-import { MTable } from 'packages/MTable'
+import { MTableV2 } from './../../MTableV2'
+import { MTable } from './../../MTable'
 import { ElCheckbox } from 'element-plus'
 
 const attrs = useAttrs()

package/packages/MTableSuper/src/token.ts

@@ -1,6 +1,6 @@
 import { InjectionKey } from 'vue'
 import type { Ref } from 'vue'
-import { TableConfig } from 'packages/Hook/useTableConfig/useTableConfig'
+import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
 
 export const tableKey: InjectionKey<{
   /** 表格列配置 */

package/packages/MTableV2/docs/demo.vue

@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import useTableV2Config from 'packages/Hook/useTableV2Config/useTableV2Config'
+import useTableV2Config from './../../Hook/useTableV2Config/useTableV2Config'
 
 const tableData = ref<any[]>([])
 const { tableTitle, tableConfig, filtersValue } = useTableV2Config('MTableV2Demo', [{

package/packages/MTableV2/src/MTableV2.vue

@@ -40,7 +40,7 @@
 import { ref, watch, computed, useSlots } from 'vue'
 import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
 import MTableColumnSet from './../../MTableColumnSet/src/MTableColumnSet.vue'
-import checkType from 'packages/Tool/checkType/checkType'
+import checkType from './../../Tool/checkType/checkType'
 
 interface FilterValue {
   [key: string]: Array<string | number>

package/packages/SkinConfig/docs/demo.vue

@@ -61,7 +61,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { SkinConfig } from 'packages/SkinConfig'
+import { SkinConfig } from './../../SkinConfig'
 
 const size = ref<string>('')
 const shinConfigRef = ref<InstanceType<typeof SkinConfig> | null>(null)

package/packages/SkinConfig/src/SkinConfig.vue

@@ -240,9 +240,9 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from 'vue'
 import useSkin, { SkinConfig } from './useSkin'
-import { Size } from 'packages/typings/enum'
-import { Filter } from 'packages/typings/interface'
-import { MInputNumber } from 'packages/MInputNumber'
+import { Size } from './../../typings/enum'
+import { Filter } from './../../typings/interface'
+import { MInputNumber } from './../../MInputNumber'
 
 const filter: Filter = {
   typeOptions: ref<Option[]>([{

package/packages/SkinConfig/src/useSkin.ts

@@ -1,7 +1,7 @@
 import { reactive } from 'vue'
-import { Size } from 'packages/typings/enum'
+import { Size } from './../../typings/enum'
 import compareStructures from '../../Tool/compareStructures/compareStructures'
-import usePackageConfig from 'packages/Hook/usePackageConfig/usePackageConfig'
+import usePackageConfig from './../../Hook/usePackageConfig/usePackageConfig'
 
 const packageConfig = usePackageConfig()
 
@@ -105,7 +105,7 @@ const useSkin = (): {
   }
 
   /** 皮肤配置 */
-  const skinConfig: SkinConfig = reactive(packageConfig.get('skinConfig'))
+  const skinConfig = reactive(packageConfig.get<SkinConfig>('skinConfig')) as SkinConfig
 
   /**
    * @description 设置皮肤色

package/packages/Tool/slotsToData/slotsToData.ts

@@ -22,6 +22,8 @@ const slotsToData = (slots: Slots, name: string = 'default', data: SlotsToDataRe
   for (let i = 0; i < slotsData.length; i++) {
     const item = slotsData[i]
 
+    if (!item.type || typeof item.type === 'symbol') continue // 跳过注释节点
+
     const children = item.children
     const isChildren = Boolean(children)
     const _data = isChildren ? slotsToData(children) : []