br-dionysus 1.8.7 → 1.10.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,30 +30,68 @@
       >
         <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>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, useSlots, watch, computed } from 'vue'
-import { Size } from 'packages/typings/enum'
+import { ref, onMounted, useSlots, watch, computed, nextTick } from 'vue'
+import { Size } from './../../typings/enum'
 import createHash from '../../Tool/createHash/createHash'
+import slotsToData, { SlotsToDataReturnItem } from './../../Tool/slotsToData/slotsToData'
+import { FormInlineConfigType } from './../../Hook/useFormInline/useFormInline'
+import usePackageConfig from './../../Hook/usePackageConfig/usePackageConfig'
 
 const props = withDefaults(defineProps<{
   /**
@@ -61,11 +103,17 @@ const props = withDefaults(defineProps<{
    * */
   maxWidth?: number,
   /** 组件尺寸 */
-  size?: Size
+  size?: Size,
+  /** 配置key */
+  configKey?: string,
+  /** 筛选对象 */
+  model?: Record<string, any> | null
 }>(), {
   minWidth: 290,
   maxWidth: 400,
-  size: Size.DEFAULT
+  size: Size.DEFAULT,
+  configKey: '',
+  model: null
 })
 
 const height = computed(() => {
@@ -76,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]')
@@ -121,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)
 }
 
@@ -159,6 +208,194 @@ onMounted(() => {
     subtree: true // 后代
   })
 })
+
+/**
+ * 以下为配置化
+ * */
+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)
+}
+nextTick(() => {
+  if (!props.configKey) return
+  markAttribute(config.value)
+  setDomDraggableEvent(config.value)
+  removeDomDraggableEvent()
+  generateCheckBox()
+})
+
+type ConfigType = FormInlineConfigType<Record<string, any>>
+
+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的属性
+ * */
+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] = (formItemList[idx] as SlotsToDataReturnItem).props?.prop
+  })
+  domList.forEach((item, 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))
+  })
+}
+
+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 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[] = 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]
+
+    dom.draggable = true
+    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
+
+  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
+  }
+}
+
+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">
@@ -194,6 +431,15 @@ onMounted(() => {
   }
 }
 
+.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;
@@ -203,6 +449,12 @@ onMounted(() => {
   box-sizing: border-box;
 }
 
+.u-check-box-group {
+  //display: flex;
+  display: none;
+  flex: 1;
+}
+
 .u-row {
   display: flex;
   overflow: hidden;
@@ -212,6 +464,10 @@ onMounted(() => {
   &[data-unfold="true"] {
     max-height: none !important;
   }
+
+  > [data-class="checkbox"] {
+    display: none;
+  }
 }
 
 .u-btn-unfold {
@@ -228,6 +484,11 @@ onMounted(() => {
     transform: rotate(270deg);
   }
 }
+
+[data-class="checkbox"] {
+  padding-left: 5px;
+  height: auto;
+}
 </style>
 
 <style lang="scss">
@@ -271,5 +532,17 @@ onMounted(() => {
       }
     }
   }
+
+  .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/README.md

@@ -20,16 +20,23 @@ import demo from './demo.vue'
 
 #### SkinConfig（皮肤对象）
 
-| 参数           |   说明    |   类型    |            可选值            |    默认值    |
-|--------------|:-------:|:-------:|:-------------------------:|:---------:|
-| darkTheme    | 是否为深色主题 | boolean |             -             |   false   |
-| followSystem | 是否跟随系统  | boolean |             -             |   false   |
-| size         |   大小    |  enum   | large \| default \| small |  default  |
-| primaryColor |   主题色   | string  |             -             | '#646CFF' |
-| successColor |   成功色   | string  |             -             | '#67c23a' |
-| warningColor |   警告色   | string  |             -             | '#e6a23c' |
-| dangerColor  |   危险色   | string  |             -             | '#f56c6c' |
-| infoColor    |   信息色   | string  |             -             | '#909399' |
+| 参数                 |               说明                |   类型    |                可选值                |    默认值     |
+|--------------------|:-------------------------------:|:-------:|:---------------------------------:|:----------:|
+| darkTheme          |             是否为深色主题             | boolean |                 -                 |   false    |
+| followSystem       |             是否跟随系统              | boolean |                 -                 |   false    |
+| size               |               大小                |  enum   |     large \| default \| small     |  default   |
+| primaryColor       |               主题色               | string  |                 -                 | '#646CFF'  |
+| successColor       |               成功色               | string  |                 -                 | '#67c23a'  |
+| warningColor       |               警告色               | string  |                 -                 | '#e6a23c'  |
+| dangerColor        |               危险色               | string  |                 -                 | '#f56c6c'  |
+| infoColor          |               信息色               | string  |                 -                 | '#909399'  |
+| showHeavyLoad      |             显示重载按钮              | boolean |                 -                 |   false    |
+| showBreadcrumb     |             显示面包屑导航             | boolean |                 -                 |   false    |
+| showBreadcrumbIcon |             显示面包屑图标             | boolean |                 -                 |    true    |
+| switchAnimation    |              切换动画               | boolean |                 -                 |    true    |
+| auxiliaryTools     |         辅助工具(页签，面包屑，无)          | string  | 'multiple' \| 'breadcrumb'  \| '' | 'multiple' |
+| outsideSpacingSize | 外间距大小（--m-outside-spacing-size） | number  |                 -                 |     16     |
+| insideSpacingSize  | 内间距大小（--m-inside-spacing-size）  | number  |                 -                 |     24     |
 
 ### 3) 说明
 

package/packages/SkinConfig/docs/demo.vue

@@ -5,6 +5,7 @@
       @change="size = $event.size"
     ></SkinConfig>
 
+    <p>skin: {{ skin.skinConfig }}</p>
     <div class="m-box">
       <div class="u-color-box">
         <h3>色卡</h3>
@@ -61,8 +62,10 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { SkinConfig } from 'packages/SkinConfig'
+import { SkinConfig } from './../../SkinConfig'
+import useSkin from './../src/useSkin'
 
+const skin = useSkin()
 const size = ref<string>('')
 const shinConfigRef = ref<InstanceType<typeof SkinConfig> | null>(null)
 onMounted(() => {