br-dionysus 1.8.4 → 1.8.6

package/packages/Hook/useTableConfig/useTableConfig.ts

@@ -60,7 +60,7 @@ const useTableConfig = (name: string = '', tableTitle: TableTitle[] = [], tableD
   /** 表格列头 */
   const _tableTitle: Ref<TableTitle[]> = ref<TableTitle[]>([])
   const tableConfig: Ref<TableConfig> = ref<TableConfig>(packageConfig.get('tableConfig' + name))
-  const pageConfig = packageConfig.get('tablePage' + name)
+  const pageConfig = packageConfig.get('tablePage' + name) as TableConfig
   const page = ref<Page>(new Page(pageConfig))
   const _tableData = tableData || ref<any[]>([])
   /** 列筛选 */
@@ -69,13 +69,13 @@ const useTableConfig = (name: string = '', tableTitle: TableTitle[] = [], tableD
   /** 过滤条件 */
   const filtersValue = ref<FilterValue>({})
 
-  tableTitle.filter(item => !tableConfig.value[item.prop]).forEach((item, index) => {
-    tableConfig.value[item.prop] = {
+  tableTitle.filter(item => !tableConfig.value[item.prop as string]).forEach((item, index) => {
+    tableConfig.value[item.prop as string] = {
       minWidth: item.minWidth !== undefined ? item.minWidth : '',
       show: true,
       sort: index,
       // showName: item.label,
-      label: item.label,
+      label: item.label as string,
       headerAlign: item.headerAlign || 'left',
       align: item.align || 'left',
       fixed: item.fixed !== undefined ? item.fixed : false
@@ -90,12 +90,12 @@ const useTableConfig = (name: string = '', tableTitle: TableTitle[] = [], tableD
       }[] | undefined
     }
     const propToFiltersMap: PropToFiltersMap = _tableTitle.value.reduce((map: PropToFiltersMap, item) => {
-      map[item.prop] = item.filters
+      map[item.prop as string] = item.filters
       return map
     }, {})
 
     _tableTitle.value = tableTitle.map(item => {
-      const tableConfigItem = tableConfig.value[item.prop]
+      const tableConfigItem = tableConfig.value[item.prop as string]
       return {
         ...item,
         // label: tableConfigItem?.showName || tableConfigItem?.label || item.label,
@@ -103,7 +103,7 @@ const useTableConfig = (name: string = '', tableTitle: TableTitle[] = [], tableD
         minWidth: tableConfigItem?.minWidth || item.minWidth,
         headerAlign: tableConfigItem?.headerAlign || item.headerAlign || 'left',
         filterMethod,
-        filters: item.filters || propToFiltersMap[item.prop] || [],
+        filters: item.filters || propToFiltersMap[item.prop as string] || [],
         align: tableConfigItem?.align || item.align,
         fixed: tableConfigItem?.fixed || item.fixed
       }
@@ -137,7 +137,7 @@ const useTableConfig = (name: string = '', tableTitle: TableTitle[] = [], tableD
   /** 初始化列筛选 */
   const initColumnFilter = (tableData: any[]): void => {
     _tableTitle.value = _tableTitle.value.map(item => {
-      const data = tableData.map(node => node[item.prop]).map(node => JSON.stringify(node))
+      const data = tableData.map(node => node[item.prop as string]).map(node => JSON.stringify(node))
       // 去重
       const filters = [...new Set(data)].filter(node => node !== undefined).map(node => ({
         text: JSON.parse(node),
@@ -158,8 +158,8 @@ const useTableConfig = (name: string = '', tableTitle: TableTitle[] = [], tableD
   )
 
   const tableTitleFilter = computed(() => _tableTitle.value
-    .filter(item => tableConfig.value[item.prop].show)
-    .sort((a, b) => (tableConfig.value[a.prop]?.sort || 0) - (tableConfig.value[b.prop]?.sort || 0)))
+    .filter(item => tableConfig.value[item.prop as string].show)
+    .sort((a, b) => (tableConfig.value[a.prop as string]?.sort || 0) - (tableConfig.value[b.prop as string]?.sort || 0)))
 
   return {
     tableTitle: tableTitleFilter,

package/packages/MDialog/src/MDialog.vue

@@ -26,7 +26,9 @@
         :style="bodyStyle"
         v-if="name === 'default'"
       >
-        <slot name="default"></slot>
+        <div class="br-u-body-entity">
+          <slot name="default"></slot>
+        </div>
       </div>
     </template>
   </ElDialog>
@@ -254,4 +256,13 @@ defineExpose({
     transform: rotate(-45deg);
   }
 }
+
+.br-u-body {
+  display: flex;
+
+  .br-u-body-entity {
+    flex: 1;
+    width: 100%;
+  }
+}
 </style>

package/packages/MInline/docs/README.md

@@ -13,14 +13,15 @@ import demo from './demo.vue'
 
 ### 2) Attributes
 
-| 参数       |  说明   |   类型   |            可选值            |   默认值   |
-|----------|:-----:|:------:|:-------------------------:|:-------:|
-| minWidth | 列最小宽度 | number |             -             |   200   |
-| maxWidth | 列最大宽度 | number |             -             |   300   |
-| size     | 组件尺寸  |  enum  | large \| default \| small | default |
+| 参数        |  说明   |   类型   |            可选值            |   默认值   |
+|-----------|:-----:|:------:|:-------------------------:|:-------:|
+| minWidth  | 列最小宽度 | number |             -             |   200   |
+| maxWidth  | 列最大宽度 | number |             -             |   300   |
+| size      | 组件尺寸  |  enum  | large \| default \| small | default |
+| configKey | 配置key | string |             -             |    -    |
 
 ### 2) Events
 
-| 方法名    |           说明           |       参数        |
+| 事件名    |           说明           |       参数        |
 |--------|:----------------------:|:---------------:|
 | switch | 当切换展开与折叠模式时触发,返回当前展开状态 | unfold(boolean) |

package/packages/MInline/docs/demo.vue

@@ -70,38 +70,38 @@
             </el-input>
           </el-form-item>
           <el-form-item
-            label="编码"
-            prop="code"
+            label="类型"
+            prop="type"
             data-item
           >
             <el-input
-              v-model="formInline.code"
+              v-model="formInline.type"
               clearable
-              placeholder="请输入编码"
+              placeholder="请输入类型"
             >
             </el-input>
           </el-form-item>
           <el-form-item
-            label="角色名"
-            prop="name"
+            label="地区"
+            prop="region"
             data-item
           >
             <el-input
-              v-model="formInline.name"
+              v-model="formInline.region"
               clearable
-              placeholder="请输入角色名"
+              placeholder="请输入地区"
             >
             </el-input>
           </el-form-item>
           <el-form-item
-            label="时间"
-            prop="time"
+            label="等级"
+            prop="level"
             data-item
           >
             <el-input
-              v-model="formInline.time"
+              v-model="formInline.level"
               clearable
-              placeholder="请输入时间"
+              placeholder="请输入等级"
             >
             </el-input>
           </el-form-item>
@@ -127,7 +127,10 @@ import { reactive } from 'vue'
 const formInline = reactive({
   name: '',
   code: '',
-  time: ''
+  time: '',
+  type: '',
+  region: '',
+  level: ''
 })
 </script>
 

package/packages/MInline/src/MInline.vue

@@ -47,9 +47,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, useSlots, watch, computed } from 'vue'
+import { ref, onMounted, useSlots, watch, computed, nextTick } from 'vue'
 import { Size } from 'packages/typings/enum'
 import createHash from '../../Tool/createHash/createHash'
+import slotsToData, { SlotsToDataReturn, SlotsToDataReturnItem } from 'packages/Tool/slotsToData/slotsToData'
+import { FormInlineConfigType } from 'packages/Hook/useFormInline/useFormInline'
 
 const props = withDefaults(defineProps<{
   /**
@@ -61,11 +63,14 @@ const props = withDefaults(defineProps<{
    * */
   maxWidth?: number,
   /** 组件尺寸 */
-  size?: Size
+  size?: Size,
+  /** 配置key */
+  configKey?: string
 }>(), {
   minWidth: 290,
   maxWidth: 400,
-  size: Size.DEFAULT
+  size: Size.DEFAULT,
+  configKey: ''
 })
 
 const height = computed(() => {
@@ -159,6 +164,125 @@ onMounted(() => {
     subtree: true // 后代
   })
 })
+
+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: ''
+  }
+}
+console.log('config', config)
+
+const itemDomIndexToPropMap: Record<number, string> = {}
+console.log('itemDomIndexToPropMap', itemDomIndexToPropMap)
+
+interface Html_Data extends HTMLElement {
+  data_sort?: number,
+  data_key?: string
+}
+
+/**
+ * 排序dom列表
+ * @return Html_Data[]
+ * */
+const domListSort = (domList: Html_Data[], configData: ConfigType): Html_Data[] => {
+  const slotChildrenList = slotDefaultData[0].children || []
+  domList.forEach((e, idx) => {
+    itemDomIndexToPropMap[idx] = (slotChildrenList[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]
+  })
+  return domList.sort((a, b) => (a?.data_sort || 0) - (b?.data_sort || 0))
+}
+
+/**
+ * 设置元素的拖拽事件
+ * */
+const setDomDraggableEvent = (formItem: SlotsToDataReturn = []) => {
+  const drop = (index: number) => {
+    console.log('index', index)
+  }
+  const dragstart = (keyName: string = '') => {
+    console.log('keyName', keyName)
+  }
+
+  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 dom = domList[i]
+    if (!dom) continue
+
+    dom.draggable = true
+    dom.ondrop = () => drop(i)
+    dom.ondragstart = () => dragstart(item.props?.prop as string)
+  }
+  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)
+  })
+}
+
+nextTick(() => {
+  setDomDraggableEvent(formItemList)
+  // const formDom: HTMLDivElement | null = document.querySelector(`.${boxClassName} [data-box]`)
+  // console.log('formDom', formDom)
+})
 </script>
 
 <style scoped lang="scss">

package/packages/MInputNumber/docs/demo.vue

@@ -1,13 +1,53 @@
 <template>
   <div class="g-demo-m-input-number-box">
-    <m-input-number v-model="test"></m-input-number>
+    <m-input-number
+      v-model="test"
+      @input="numberInput"
+      @change="numberChange"
+    ></m-input-number>
+    <h5>对比组</h5>
+    <el-input-number
+      v-model="test2"
+      @input="numberInput2"
+      @change="numberChange2"
+    ></el-input-number>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 const test = ref<number>(0)
+const numberInput = (val: number) => {
+  console.log('m1', val)
+  console.log('m2', test.value)
+}
+const numberChange = (val: number) => {
+  console.log('m3', val)
+  console.log('m4', test.value)
+}
+watch(
+  () => test.value,
+  () => {
+    console.log('m5', test.value)
+  }
+)
+
+const test2 = ref<number>(0)
+const numberInput2 = (val: number) => {
+  console.log('e1', val)
+  console.log('e2', test2.value)
+}
+const numberChange2 = (val: number) => {
+  console.log('e3', val)
+  console.log('e4', test2.value)
+}
+watch(
+  () => test2.value,
+  () => {
+    console.log('e5', test2.value)
+  }
+)
 </script>
 
 <style scoped>

package/packages/MInputNumber/src/MInputNumber.vue

@@ -141,13 +141,13 @@ const syncSize = () => {
 }
 
 const input = () => {
-  setTimeout(() => {
-    if (data.vValue === undefined) {
-      emit('update:modelValue', null)
-      return false
-    }
-    emit('update:modelValue', data.vValue)
-  })
+  // setTimeout(() => {
+  // })
+  if (data.vValue === undefined) {
+    emit('update:modelValue', null)
+    return false
+  }
+  emit('update:modelValue', data.vValue)
 }
 
 const onChange = (value?: number) => {

package/packages/MSelectTable/src/MSelectTable.vue

@@ -68,7 +68,7 @@
             >
               <template #default="scope">
                 <!-- {{scope}} -->
-                {{ tabDataMap[scope.$index][item.prop] || '-' }}
+                {{ tabDataMap[scope.$index][item.prop as string] || '-' }}
               </template>
             </el-table-column>
             <template #empty>

package/packages/MTable/src/MTable.vue

@@ -14,19 +14,6 @@
       @cellClick="cellClick"
       @expandChange="expandChange"
     >
-      <!-- 默认插槽 -->
-      <!--<slot></slot>-->
-
-      <!-- 循环处理具名插槽 -->
-      <!--<template-->
-      <!--  v-for="(slotData, name) in slots"-->
-      <!--  #[name]-->
-      <!--&gt;-->
-      <!--  <slot-->
-      <!--    :name="name"-->
-      <!--    v-bind="slotData"-->
-      <!--  ></slot>-->
-      <!--</template>-->
       <slot name="default"></slot>
       <slot name="append"></slot>
       <template
@@ -286,11 +273,6 @@ defineExpose({
 <style lang="scss">
 .br-m-table-box {
   &[data-is-expand='true'] {
-    //.el-table__expand-column, colgroup > col:nth-of-type(1) {
-    //  display: none;
-    //  //pointer-events: none;
-    //}
-
     .el-table__expand-column {
       border: 0;
     }
@@ -298,20 +280,6 @@ defineExpose({
     .el-table__expand-column .cell {
       display: none;
     }
-
-    //.el-table__expand-column {
-    //  border-right: 0;
-    //
-    //  * {
-    //    opacity: 0;
-    //  }
-    //}
-    //
-    //.el-table__expand-column + .el-table__cell {
-    //  //background-color: #2a598a;
-    //  transform: translateX(-48px);
-    //  padding-right: 48px;
-    //}
   }
 }
 </style>

package/packages/MTableColumn/src/MTableColumn.vue

@@ -256,41 +256,6 @@ const getExpandActive = (index: number): boolean => {
 
 const filterText = ref<string>('')
 
-// const checkboxOptions = computed(() => {
-
-// let arr = props.filters.map(item => ({
-//   ...item,
-//   value: checkType(item.value).isArray() || checkType(item.value).isObject() ? JSON.stringify(item.value) : item.value
-// })).filter(item => String(item.value).includes(filterText.value))
-
-// if (tableKeyData && Object.keys(props.filtersValue).length) {
-//   const processedFilters = props.filters.map(item => ({
-//     ...item,
-//     value: checkType(item.value).isArray() || checkType(item.value).isObject() ? JSON.stringify(item.value) : item.value
-//   }))
-//   console.log(props.filters)
-//   console.log(arr)
-
-//   // 收集 tableKeyData.tableData 中所有可能的 value 值
-//   const tableDataValues = new Set(
-//     tableKeyData.tableData.value.flatMap(data =>
-//       Object.values(data).map(val => String(val))
-//     )
-//   )
-//   // 筛选 processedFilters 中的值，只保留那些在 tableDataValues 中存在的项
-//   arr = processedFilters.filter(filterItem =>
-//     tableDataValues.has(String(filterItem.value))
-//   )
-//   // arr = tableKeyData.tableData.value.filter(data => {
-//   //   // 检查 data.value 是否存在于 processedFilters 的 value 中
-//   //   return processedFilters.some(filterItem =>
-//   //     Object.values(data).some(val => String(val) === String(filterItem.value))
-//   //   )
-//   // })
-// }
-// return arr
-// })
-
 const getCheckboxOptions = (options: { text: string | number, value: string | number }[]) => {
   return options
     .map(item => ({
@@ -393,7 +358,6 @@ const boxStyle = ref<BoxStyle>({
   position: relative;
   width: 14px;
   height: 14px;
-  // background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAMdJREFUOE/tkyESwjAQRfMj0Xgkp2AmaQweHCeAS1AuASfAgce0yQynQOLRyHyazpRpoW2YAcnKbP7L7t8sxJeBoM+yLK04Ukp678vzWBhj0iegEK5jgnq+eGTzO4C1dkhyDGAvhBhFKrmSXAC4aK1vjV6dcxPv/QnAoA1C8i6lnCqlzlX+zaw8z2cADh2AeZIkx3qu1W3n3JLktnERWCmldq/gznFZa8NUyvFWjrdV9QcIEfWgz8BgaicgLFj467H9+Gjr+iAPDfV1EeVT6aEAAAAASUVORK5CYII=");
   background-size: 100% 100%;
   transform: translateY(2px);
   cursor: pointer;
@@ -428,8 +392,6 @@ const boxStyle = ref<BoxStyle>({
 
 <style lang="scss">
 .m-filter-box {
-  //$zIndex: 2050;
-
   &[data-is-open="true"] {
     opacity: 1;
     pointer-events: auto;
@@ -459,8 +421,6 @@ const boxStyle = ref<BoxStyle>({
     position: fixed;
     top: 0;
     left: 0;
-    //z-index: $zIndex;
-    //width: 134px;
     max-width: 50%;
     background: var(--el-bg-color-overlay);
     border: 1px solid var(--el-border-color-light);
@@ -509,7 +469,6 @@ const boxStyle = ref<BoxStyle>({
 }
 
 .filter-i {
-  // color: var(--el-color-primary);
   background-color: var(--el-color-primary);
 }
 </style>

package/packages/MTableSuper/docs/README.md

@@ -0,0 +1,48 @@
+<script setup>
+import demo from './demo.vue'
+</script>
+
+整合表格组件
+=================
+
+### 1) 基础用法
+
+<Preview comp-name="MTableSuper" demo-name="demo">
+  <demo />
+</Preview>
+
+### 2) Attributes
+
+| 参数             | 说明                          | 类型               | 可选值 | 默认值                                                 |
+|----------------|-----------------------------|------------------|-----|-----------------------------------------------------|
+| data           | 表格的数据                       | Array            | -   | [ ]                                                 |
+| sole           | 行的唯一值                       | String , number  | -   | key                                                 |
+| filtersValue   | 表格内容筛选(当为null时，不显示筛选图标)     | Function \| null | -   | null                                                |
+| expandProp     | 展开图标列(如使用这个属性则必须存在rowKey属性) | string           | -   | ''                                                  |
+| tableConfigKey | 表格配置key                     | string           | -   | ''                                                  |
+| 其余参数           | 参考el官网的table                | any              | -   | https://element-plus.org/zh-CN/component/table.html |
+
+## 要求
+
+```
+sole 必须传递在表格数据内为唯一的值  如id key 等不会发生重复的关键字
+```
+
+### 3) Events
+
+| 方法名                 | 说明                                   | 回调参数                                                |
+|---------------------|--------------------------------------|-----------------------------------------------------|
+| pasteData           | 表格粘贴方法                               | 共有2个参数,依次为粘贴动作的数据PasteAction ,表格原始数据tableData       |
+| update:tableConfig  | 表格配置更新                               | \[tableConfig: TableConfig]                         |
+| privateExpandChange | expandProp模式下 当用户对某一行展开或者关闭的时候会触发该事件 | [row: any, expandedRows: any[]]                     |
+| 其余方法                | 参考el官网的table                         | https://element-plus.org/zh-CN/component/table.html |
+
+### 4) PasteAction
+
+| 参数         | 说明                                     | 类型     | 
+|------------|----------------------------------------|--------|
+| editRow    | 返回粘贴的对应行的原始数据                          | Object |
+| editColumn | 返回粘贴时鼠标所在列的 表格prop值                    | String |
+| arr        | 返回粘贴时候处理之后的 数组信息                       | Array  |
+| rowIndex   | 根据sole的值 去data内查找   当前操作的 粘贴行在data内的序号 | number |
+