br-dionysus 1.16.5 → 1.16.7

package/packages/MSelectTable/docs/DemoTest4.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <h5>多选，与外部设置绑定value</h5>
+    <p>选择器的值： {{ code }}</p>
+    <m-select-table
+      class="u-select"
+      v-model="code"
+      :tableTitle="commodityOptionsTitle"
+      :options="options"
+      :keywords="{ label: 'ApprovedQtyPU', value: 'DocNo' }"
+      :total="total"
+      scrollbarAlwaysOn
+      filterable
+      remote
+      multiple
+      border
+      :remoteMethod="remoteMethod"
+      @selected="selected"
+      @selectMultiple="selectMultiple"
+      @toPage="toPage"
+    ></m-select-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { Page } from './../../typings/class'
+
+const commodityOptionsTitle: TableTitle[] = [{
+  prop: 'PRDocType',
+  label: '单据类型'
+}, {
+  prop: 'DocNo',
+  label: '请购单号'
+}, {
+  prop: 'ApprovedQtyPU',
+  label: '名称'
+
+}, {
+  prop: 'ACCode',
+  label: '货币'
+}]
+
+const code = ref<string | number | Array<string | number>>([])
+
+const total = ref(0)
+const options = ref<any[]>([])
+const mockData: any[] = []
+for (let i = 0; i < 1000; i++) {
+  mockData.push({
+    PRDocType: '测试数据' + (i + 1),
+    DocNo: i + 1,
+    ApprovedQtyPU: 'ApprovedQtyPU' + (i + 1),
+    ACCode: 'ACCode'
+  })
+}
+const getDataList = (page: Page = new Page(), str: string = '') => {
+  setTimeout(() => {
+    options.value = mockData.filter(item => item.PRDocType.includes(str)).slice(0, page.pageSize)
+    total.value = mockData.length
+  })
+}
+
+setTimeout(() => {
+  options.value = [{
+    PRDocType: 'xxxPRDocType1',
+    DocNo: 1,
+    ApprovedQtyPU: 'xxxApprovedQtyPU1',
+    ACCode: 'xxxACCode1'
+  }, {
+    PRDocType: 'xxxPRDocType2',
+    DocNo: 2,
+    ApprovedQtyPU: 'xxxApprovedQtyPU2',
+    ACCode: 'xxxACCode2'
+  }]
+  code.value = [1, 2]
+}, 100)
+
+const selected = (value: string | number | Array<number | string>) => {
+  console.log(value)
+}
+
+const toPage = (page: Page, str: any) => {
+  getDataList(page, str)
+}
+const selectMultiple = (value: string | number | Array<number | string>) => {
+  code.value = value
+}
+
+const remoteMethod = async (query: string, page: Page = new Page()) => {
+  await getData(query, page)
+}
+
+const getData = async (query: string, page: any) => {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      const start = (page.currentPage - 1) * page.pageSize
+      options.value = mockData.filter(item => item.PRDocType.includes(query)).slice(start, start + page.pageSize)
+      total.value = mockData.length
+      resolve()
+    }, 500)
+  })
+}
+
+onMounted(() => {
+  getDataList()
+})
+</script>
+
+<style>
+.u-select {
+  width: 240px;
+}
+</style>

package/packages/MSelectTable/docs/demo.vue

@@ -1,205 +1,21 @@
 <template>
   <div>
-    <p>多选</p>
-    <p>第一个选择器的值： {{ code }}</p>
-    <m-select-table
-      class="u-select"
-      ref="selectRef"
-      v-model="code"
-      placeholder="请选择单号"
-      :tableTitle="commodityOptionsTitle"
-      :options="options"
-      :keywords="{ label: 'ApprovedQtyPU', value: 'DocNo' }"
-      @selected="selected"
-      @selectMultiple="selectMultiple"
-      tableHeight="200"
-      @toPage="toPage"
-      :total="total"
-      scrollbarAlwaysOn
-      filterable
-      remote
-      multiple
-      allowCreate
-      border
-      @selectChange="selectChange"
-      :remoteMethod="remoteMethod"
-    >
-      <template #auxiliary>
-        辅助信息的插槽
-      </template>
-    </m-select-table>
-    <p>多选单绑定的value为字符串类型</p>
-    <p>第二个选择器的值： {{ code2 }}</p>
-    <m-select-table
-      class="u-select"
-      ref="selectRef"
-      v-model="code2"
-      :name="code2Name"
-      placeholder="请选择单号"
-      :tableTitle="commodityOptionsTitle"
-      :options="options"
-      :keywords="{ label: 'ApprovedQtyPU', value: 'DocNo' }"
-      @selected="selected"
-      @selectMultiple="selectMultiple"
-      tableHeight="200"
-      @toPage="toPage"
-      :total="total"
-      scrollbarAlwaysOn
-      filterable
-      remote
-      multiple
-      border
-      :remoteMethod="remoteMethod"
-    ></m-select-table>
-    <p>单选</p>
-    <p>第三个择器的值： {{ code3 }}</p>
-    <m-select-table
-      class="u-select"
-      ref="selectRef"
-      v-model="code3"
-      placeholder="请选择单号"
-      :tableTitle="commodityOptionsTitle"
-      :options="options"
-      :keywords="{ label: 'ApprovedQtyPU', value: 'DocNo' }"
-      @selected="selected"
-      @selectMultiple="selectMultiple"
-      tableHeight="200"
-      @toPage="toPage"
-      :total="total"
-      scrollbarAlwaysOn
-      filterable
-      remote
-      allowCreate
-      :remoteMethod="remoteMethod"
-      :popupWidth="800"
-    ></m-select-table>
-    <!--<el-select-->
-    <!--  v-model="code2"-->
-    <!--  multiple-->
-    <!--&gt;-->
-    <!--  <el-option-->
-    <!--    v-for="item in options"-->
-    <!--    :key="item.DocNo"-->
-    <!--    :label="item.ApprovedQtyPU"-->
-    <!--    :value="item.DocNo"-->
-    <!--  ></el-option>-->
-    <!--</el-select>-->
+    <!--<DemoTest1></DemoTest1>-->
+    <el-divider />
+    <!--<DemoTest2></DemoTest2>-->
+    <!--<el-divider />-->
+    <!--<DemoTest3></DemoTest3>-->
+    <!--<el-divider />-->
+    <!--<DemoTest4></DemoTest4>-->
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { Page } from './../../typings/class'
-
-const commodityOptionsTitle: TableTitle[] = [{
-  prop: 'PRDocType',
-  label: '单据类型'
-  // minWidth: 200
-}, {
-  prop: 'DocNo',
-  label: '请购单号'
-  // minWidth: 200
-}, {
-  prop: 'ApprovedQtyPU',
-  // minWidth: 300,
-  label: '名称'
-
-}, {
-  prop: 'ACCode',
-  label: '货币'
-  // minWidth: 200
-}]
-const selectRef: any = ref<HTMLElement | null>(null)
-
-const code = ref<string | number | Array<string | number>>([])
-const code2 = ref<string | number | Array<string | number>>('')
-const code2Name = ref<string | number | Array<string | number>>([])
-const code3 = ref<string | number | Array<string | number>>('')
-
-const total = ref(0)
-const options = ref<any[]>([])
-const mockData: any[] = []
-for (let i = 0; i < 1000; i++) {
-  mockData.push({
-    PRDocType: '测试数据' + (i + 1),
-    DocNo: i + 1,
-    ApprovedQtyPU: 'ApprovedQtyPU' + (i + 1),
-    ACCode: 'ACCode'
-  })
-}
-const getDataList = (page: Page = new Page(), str: string = '') => {
-  setTimeout(() => {
-    options.value = mockData.filter(item => item.PRDocType.includes(str)).slice(0, page.pageSize)
-    total.value = mockData.length
-  })
-}
-
-setTimeout(() => {
-  options.value = [{
-    PRDocType: 'xxxPRDocType1',
-    DocNo: 1,
-    ApprovedQtyPU: 'xxxApprovedQtyPU1',
-    ACCode: 'xxxACCode1'
-  }, {
-    PRDocType: 'xxxPRDocType2',
-    DocNo: 2,
-    ApprovedQtyPU: 'xxxApprovedQtyPU2',
-    ACCode: 'xxxACCode2'
-  }]
-  code.value = [1, 2]
-  code2.value = ''
-  code2Name.value = ['xxxApprovedQtyPU2', 'xxxApprovedQtyPU3', 'xxxApprovedQtyPU4']
-  code3.value = 1
-
-  // setTimeout(() => {
-  //   options.value = []
-  // }, 2500)
-}, 1000)
-
-const selected = (value: string | number | Array<number | string>) => {
-  console.log(value)
-  // code.value = value
-  // console.log('selected',value)
-  // // console.log('selected', row)
-}
-
-const toPage = (page: Page, str: any) => {
-  getDataList(page, str)
-}
-const selectMultiple = (value: string | number | Array<number | string>) => {
-  code.value = value
-}
-
-const remoteMethod = async (query: string, page: Page = new Page()) => {
-  await getData(query, page)
-}
-
-const selectChange = (value: string | number | Array<number | string>) => {
-  console.log(value)
-}
-const getData = async (query: string, page: any) => {
-  return new Promise<void>((resolve) => {
-    setTimeout(() => {
-      const start = (page.currentPage - 1) * page.pageSize
-      options.value = mockData.filter(item => item.PRDocType.includes(query)).slice(start, start + page.pageSize)
-      total.value = mockData.length
-      resolve()
-    }, 500)
-  })
-}
-
-onMounted(() => {
-  getDataList()
-})
-// const filterMethod = (searchValue: string, page: Page) => {
-//   // 手动过滤的得 保留一份原始数据
-//   const arr = JSON.parse(JSON.stringify(options.value))
-//   options.value = arr.filter((item: any) => item.ApprovedQtyPU.toString().includes(searchValue))
-// }
+// import DemoTest1 from 'packages/MSelectTable/docs/DemoTest1.vue'
+// import DemoTest2 from 'packages/MSelectTable/docs/DemoTest2.vue'
+// import DemoTest3 from 'packages/MSelectTable/docs/DemoTest3.vue'
+// import DemoTest4 from 'packages/MSelectTable/docs/DemoTest4.vue'
 </script>
 
 <style>
-.u-select {
-  width: 240px;
-}
 </style>

package/packages/MSelectTable/src/MSelectTable.vue

@@ -18,7 +18,7 @@
       @visibleChange="visibleChange"
       @removeTag="removeTag"
       @clear="clear"
-      @click="focus"
+      @focus="focus"
       @blur="changeBlur"
       @change="change"
     >
@@ -142,7 +142,8 @@ import {
   ref,
   watch,
   reactive,
-  onMounted
+  onMounted,
+  nextTick
 } from 'vue'
 import { ElSelect, ElTable } from 'element-plus'
 import { Page } from './../../typings/class'
@@ -259,18 +260,18 @@ const state = reactive<{
 // 抛出事件
 const emit = defineEmits<{
   /** 单选或多选之后的回调 */
-  selected: [values: string | number | Array<string | number>, rows: Option[] | Option],
+  selected: [values: string | number | Array<string | number>, rows: Option[] | Option];
   /** 多选确认按钮时的回调 配合isAffirmBtn使用 */
-  selectMultiple: [values: Array<string | number>, rows: Option[]],
+  selectMultiple: [values: Array<string | number>, rows: Option[]];
   /** 当没有使用filterMethod时候才会有回调否则没有 */
-  toPage: [page: Page, query?: string],
-  /** 勾选数据change事件 */
-  selectChange: [values: string | number | Array<string | number>],
-  'update:modelValue': [value: string | number | Array<string | number>],
+  toPage: [page: Page, query?: string | number | Array<string | number>];
+  /** 勾选数据change事件，选中值不发生变化 */
+  selectChange: [values: string | number | Array<string | number>];
+  'update:modelValue': [value: string | number | Array<string | number>];
   /** 用户点击清空按钮时触发 */
-  clear: [],
-  /** 多选模式下移除tag时触发 */
-  removeTag: [tag: any]
+  clear: [];
+  /** 多选模式下移除tag时触发(标记，待处理) */
+  removeTag: [tag: any];
 }>()
 
 const allowCreateRow = computed(() => {
@@ -286,26 +287,32 @@ const allowCreateRow = computed(() => {
     }))
 })
 
-const tabDataMap = ref<any[]>([])
-watch(() => state.tabData, () => {
-  tabDataMap.value = [...state.tabData, ...allowCreateRow.value]
-})
+const tabDataMap = ref<Record<string, any>[]>([])
+watch(
+  () => state.tabData,
+  () => {
+    tabDataMap.value = [...state.tabData, ...allowCreateRow.value]
+  }
+)
 onMounted(() => {
   tabDataMap.value = [...state.tabData, ...allowCreateRow.value]
 })
-watch(() => allowCreateRow.value, (val, oval) => {
-  const check = JSON.stringify(val) === JSON.stringify(oval)
-  if (check) return false
-  for (let i = 0; i < tabDataMap.value.length; i++) {
-    const item = tabDataMap.value[i]
-    if (!item.isAllowCreateRow) continue
-    i--
-    tabDataMap.value.splice(i, 1)
+watch(
+  () => allowCreateRow.value,
+  (val, oval) => {
+    const check = JSON.stringify(val) === JSON.stringify(oval)
+    if (check) return false
+    for (let i = 0; i < tabDataMap.value.length; i++) {
+      const item = tabDataMap.value[i]
+      if (!item.isAllowCreateRow) continue
+      i--
+      tabDataMap.value.splice(i, 1)
+    }
+    allowCreateRow.value.forEach(item => {
+      tabDataMap.value.push(item as any)
+    })
   }
-  allowCreateRow.value.forEach(item => {
-    tabDataMap.value.push(item as any)
-  })
-})
+)
 
 const upSelectModelValue = () => {
   if (props.name || props.name === 0) return false
@@ -332,22 +339,18 @@ watch(
   }
 )
 
-watch(() => props.options, (val, oval) => {
-  const check = JSON.stringify(val) === JSON.stringify(oval)
-  if (check) return false
-  state.tabData = val
-  defaultBackFillValue()
-}, { deep: true })
-watch(() => props.modelValue, (val) => {
-  if (!state.tabData.length || !val) return false
-  defaultBackFillValue()
-})
-watch(() => props.total, () => {
-  page.total = props.total as number
-})
-watch(() => modelValue.value, () => {
-  emit('update:modelValue', modelValue.value)
-})
+watch(
+  () => props.total,
+  () => {
+    page.total = props.total as number
+  }
+)
+watch(
+  () => modelValue.value,
+  () => {
+    emit('update:modelValue', modelValue.value)
+  }
+)
 
 // 点击行事件
 const rowClick = (row: Option) => {
@@ -357,7 +360,11 @@ const rowClick = (row: Option) => {
   modelValue.value = val[props.keywords.value]
   blur()
 
-  emit('selected', val[props.keywords.value], val)
+  emit('selected', val[props.keywords.value], {
+    label: val[props.keywords.label],
+    value: val[props.keywords.value],
+    ...val
+  })
 }
 
 // 确认的回调
@@ -374,8 +381,8 @@ const selectionChange = (selection: Option[]) => {
   // 是否为删除
   const isDelete = _value.some(item => !select.includes(item))
   if (isDelete && !isVisible.value) return
-  modelValue.value = selection.map((item) => item[props.keywords.value])
-  state.ids = selection.map((item) => item[props.keywords.value])
+  modelValue.value = selection.map(item => item[props.keywords.value])
+  state.ids = selection.map(item => item[props.keywords.value])
   state.selectRowS = selection
   if (props.isAffirmBtn) return // 有确认按钮不走多选事件
   emit('selected', state.ids as Array<string | number>, state.selectRowS)
@@ -399,28 +406,64 @@ const change = (value: string | number | Array<string | number>) => {
   // emit('selectChange', modelValue.value)
 }
 
-// 默认反填
+// 是反填中状态
+const isBackFill = ref<boolean>(false)
+/** 默认反填（显示当前表格选中状态） */
 const defaultBackFillValue = () => {
+  isBackFill.value = true
   if (props.multiple) {
     const modelArray: Array<string | number> = Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]
     const newArr = (state.tabData as Option[]).filter(item => modelArray.includes(item[props.keywords.value as keyof typeof item]))
-    setTimeout(() => {
+    nextTick(() => {
       newArr.forEach((row) => {
         const arr = state.tabData.filter(item => item[props.keywords.value] === row[props.keywords.value])
         if (!arr.length) return false
         selectTableRef.value.toggleRowSelection(arr[0], true)
       })
+      isBackFill.value = false
     })
   } else {
     const item = state.tabData.find(item => props.modelValue === item[props.keywords.value])
     if (!item) return false
-    setTimeout(() => {
+    nextTick(() => {
       selectTableRef.value.setCurrentRow(item, true)
+      isBackFill.value = false
     })
-    modelValue.value = item[props.keywords.value]
   }
 }
-// // 搜索过滤
+/** 防抖 */
+const debounce = (func: Function, wait: number) => {
+  let timeout: number | undefined
+  return (...args: any[]) => {
+    if (timeout !== undefined) {
+      clearTimeout(timeout)
+    }
+    timeout = window.setTimeout(() => {
+      func(...args)
+    }, wait)
+  }
+}
+const debounceDefaultBackFillValue = debounce(() => defaultBackFillValue(), 100)
+watch(
+  () => props.options,
+  (val, oval) => {
+    if (!isVisible.value) return
+    const check = JSON.stringify(val) === JSON.stringify(oval)
+    if (check) return
+    state.tabData = val
+    debounceDefaultBackFillValue()
+  }, { deep: true }
+)
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!isVisible.value) return
+    if (!state.tabData.length || !val) return
+    debounceDefaultBackFillValue()
+  }
+)
+
+// 搜索过滤
 const filterMethodHandle = (val: string) => {
   state.searchValue = val.trim()
   if (props.filterable && props.filterMethod) return props.filterMethod(val, page)
@@ -429,7 +472,8 @@ const filterMethodHandle = (val: string) => {
   state.tabData = tableData.filter((item: Option) => item[props.keywords.label].toString().includes(val))
 }
 
-const remoteMethodHandle = (query: string) => {
+// 远程搜索
+const remoteMethodHandle = (query: string = '') => {
   state.searchValue = query.trim()
   if (!props.remote) return false
 
@@ -514,6 +558,7 @@ defineExpose({ defaultBackFillValue, clear, focus })
 
   .el-select-dropdown__empty {
     padding: 0;
+
     .head-box {
       display: flex;
       align-items: center;
@@ -524,12 +569,7 @@ defineExpose({ defaultBackFillValue, clear, focus })
     .btn-box {
       text-align: right;
       margin-left: 5px;
-      // padding-bottom: 6px;
     }
-
-    // .auxiliary-box {
-    //   float: right;
-    // }
   }
 
   .m-table-select {

package/packages/MTable/src/MTable.vue

@@ -79,7 +79,11 @@ const slots = useSlots()
  * 获取表格头信息
  * */
 const getTableTitle = (): TableTitle[] => {
-  const slotDefaultData = slotsToData(slots, 'default', false)
+  const slotDefaultData = slotsToData(slots, {
+    name: 'default',
+    isJumpFgt: false,
+    maxDepth: 1
+  })
   const mTableColumnItemList: SlotsToDataReturnItem[] = []
   slotDefaultData.forEach(item => {
     if (item.children.length) {

package/packages/MTableV2/src/MTableV2.vue

@@ -22,8 +22,20 @@
           :fixed="props.fixed"
           :estimatedRowHeight="estimatedRowHeight"
           :headerHeight="headerHeight"
+          :expandColumnKey="props.expandColumnKey"
           v-bind="$attrs"
         >
+          <!-- 传递 row 插槽用于展开行 -->
+          <template
+            v-if="slots.row"
+            #row="slotProps"
+          >
+            <slot
+              name="row"
+              v-bind="slotProps"
+            />
+          </template>
+
           <template
             v-if="!slots.empty"
             #empty
@@ -70,7 +82,9 @@ const props = withDefaults(defineProps<{
   /** Header 的高度由height设置。 如果传入数组，它会使 header row 等于数组长度 */
   headerHeight?: number | number[] | null,
   /** 单元格宽度自适应 */
-  cellWidthAdaptive?: boolean
+  cellWidthAdaptive?: boolean,
+  /** 展开列的key */
+  expandColumnKey?: string
 }>(), {
   size: 'default',
   data: () => [],
@@ -83,11 +97,14 @@ const props = withDefaults(defineProps<{
   fixed: false,
   estimatedRowHeight: null,
   headerHeight: null,
-  cellWidthAdaptive: false
+  cellWidthAdaptive: false,
+  expandColumnKey: ''
 })
 
 const slots = useSlots()
 
+// ... 其他代码保持不变
+
 const sizeToHeight: { [key: string]: number } = {
   small: 30,
   default: 50,

package/packages/Tool/slotsToData/slotsToData.ts

@@ -10,24 +10,44 @@ export interface SlotsToDataReturnItem {
   children: SlotsToDataReturnItem[];
 }
 export type SlotsToDataReturn = SlotsToDataReturnItem[]
+interface SlotsToDataOptions {
+  /** 插槽名 */
+  name?: string;
+  /** 是否跳过v-for生成的注释节点 */
+  isJumpFgt?: boolean;
+  /** 递归最大深度 */
+  maxDepth?: number;
+  /** 递归数据 */
+  data?: SlotsToDataReturn;
+}
 /**
  * @description vue3的slots转json
- * @param slots 插槽对象
- * @param isJumpFgt 是否跳过v-for生成的注释节点
- * @param name 插槽名
+ * @param slots vue组件的slots
+ * @param options 配置项
+ * @param name 插槽名，默认default
+ * @param isJumpFgt 是否跳过v-for生成的注释节点，默认true
+ * @param maxDepth 递归最大深度，默认3
  * @param data
  * */
-const slotsToData = (slots: Slots, name: string = 'default', isJumpFgt: boolean = true, data: SlotsToDataReturn = []): SlotsToDataReturn => {
-  const slotsObj = slots[name as keyof typeof slots] as Function | undefined
+const slotsToData = (
+  slots: Slots,
+  { name, isJumpFgt, maxDepth }: SlotsToDataOptions = { name: 'default', isJumpFgt: true, maxDepth: 3 },
+  data: SlotsToDataReturn = []
+): SlotsToDataReturn => {
+  const _name = name || 'default'
+  const _isJumpFgt = isJumpFgt ?? true
+  const _maxDepth = maxDepth ?? 3
+  const slotsObj = slots[_name as keyof typeof slots] as Function | undefined
+
   const slotsData: any[] = slotsObj ? slotsObj() : slots
   for (let i = 0; i < slotsData.length; i++) {
     const item = slotsData[i]
 
-    if (!item.type || (typeof item.type === 'symbol' && isJumpFgt)) continue // 跳过注释节点
+    if (!item.type || (typeof item.type === 'symbol' && _isJumpFgt)) continue // 跳过注释节点
 
     const children = item.children
     const isChildren = Boolean(children)
-    const _data = isChildren ? slotsToData(children as any) : []
+    const _data = isChildren && _maxDepth > 1 ? slotsToData(children as any, { maxDepth: _maxDepth - 1 }) : []
 
     data.push({
       name: item.type.name,