br-dionysus 0.9.12 → 0.9.13

package/dist/packages/Hook/useTableConfig/useTableConfig.d.ts

@@ -1,4 +1,11 @@
 import type { Ref } from 'vue';
+/** 页码配置 */
+export interface PageConfig {
+    /** 分页大小 */
+    pageSize: number;
+    /** 分页大小可选项 */
+    pageSizesOptions: number[];
+}
 /** 表格列配置(单个) */
 export interface TableConfigItem {
     /** 最小列宽 */
@@ -31,5 +38,11 @@ declare const useTableConfig: (name: string, tableTitle: TableTitle[], tableData
     headerDragend: (newWidth: number, oldWidth: number, column: any) => void;
     initColumnFilter: (tableData: any[]) => void;
     filtersValue: Ref<FilterValue>;
+    page: Ref<{
+        total: number;
+        pageSize: number;
+        currentPage: number;
+        pageSizesOptions: number[];
+    }>;
 };
 export default useTableConfig;

package/dist/packages/MNewSelectTable/src/MNewSelectTable.vue.d.ts

@@ -44,6 +44,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     clear: () => void;
     focus: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
     selected: (...args: any[]) => void;
     toPage: (...args: any[]) => void;
     selectMultiple: (...args: any[]) => void;
@@ -89,6 +90,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     scrollbarAlwaysOn: boolean;
     allowCreate: boolean;
 }>>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onSelected?: ((...args: any[]) => any) | undefined;
     onSelectMultiple?: ((...args: any[]) => any) | undefined;
     onToPage?: ((...args: any[]) => any) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "br-dionysus",
-  "version": "0.9.12",
+  "version": "0.9.13",
   "scripts": {
     "dev": "vite --config ./build/base.config.ts",
     "build:doc": "vue-tsc --noEmit && vite build --config ./build/doc.config.ts && node script/copyDir.js",

package/packages/Hook/useTableConfig/useTableConfig.ts

@@ -1,5 +1,13 @@
 import { ref, watch, computed } from 'vue'
 import type { Ref } from 'vue'
+import { Page } from '../../typings/class'
+/** 页码配置 */
+export interface PageConfig {
+  /** 分页大小 */
+  pageSize: number
+  /** 分页大小可选项 */
+  pageSizesOptions: number[]
+}
 
 /** 表格列配置(单个) */
 export interface TableConfigItem {
@@ -12,7 +20,7 @@ export interface TableConfigItem {
   /** 列名 */
   label: string,
   /** 表头对齐方式， 若不设置该项，则使用表格的对齐方式 */
-  headerAlign: 'left' | 'center' | 'right'
+  headerAlign: 'left' | 'center' | 'right',
 }
 
 /** 表格配置 */
@@ -27,7 +35,6 @@ interface Column {
 export interface FilterValue {
   [key: string]: Array<string | number>
 }
-
 /**
  * 表格配置
  * @param {string} name 表格唯一标识
@@ -38,7 +45,8 @@ const useTableConfig = (name: string, tableTitle: TableTitle[], tableData: Ref <
   /** 表格列头 */
   const _tableTitle: Ref<TableTitle[]> = ref<TableTitle[]>([])
   const tableConfig: Ref<TableConfig> = ref<TableConfig>(JSON.parse(localStorage.getItem('tableConfig' + name) || '{}'))
-
+  const pageConfig = JSON.parse(localStorage.getItem('tablePage' + name) || '{"pageSize":50,"pageSizesOptions":[50,100,300,500,800]}')
+  const page = ref<Page>(new Page(pageConfig))
   /** 列筛选 */
   const filterMethod = (value: string, row: any, column: Column) => {
     return row[column.property] === value
@@ -59,7 +67,6 @@ const useTableConfig = (name: string, tableTitle: TableTitle[], tableData: Ref <
     }
     tableConfig.value[item.prop].label = item.label
   })
-
   const syncTableTitle = () => {
     _tableTitle.value = tableTitle.map(item => {
       return {
@@ -88,6 +95,14 @@ const useTableConfig = (name: string, tableTitle: TableTitle[], tableData: Ref <
     { deep: true }
   )
 
+  watch(
+    () => page.value,
+    (item) => {
+      localStorage.setItem('tablePage' + name, JSON.stringify({ pageSize: item.pageSize, pageSizesOptions: item.pageSizesOptions }))
+    },
+    { deep: true }
+  )
+
   /** 初始化列筛选 */
   const initColumnFilter = (tableData: any[]) => {
     _tableTitle.value = _tableTitle.value.map(item => {
@@ -120,7 +135,8 @@ const useTableConfig = (name: string, tableTitle: TableTitle[], tableData: Ref <
     tableConfig,
     headerDragend,
     initColumnFilter,
-    filtersValue
+    filtersValue,
+    page
   }
 }
 export default useTableConfig

package/packages/MNewSelectTable/docs/demo.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>1</p>
+    <p>0{{ code }}0</p>
     <m-new-select-table
       class="zzz"
       ref="selectRef"
@@ -19,17 +20,18 @@
       allowCreate
       filterable
       remote
+      multiple
       :remoteMethod="remoteMethod"
     ></m-new-select-table>
     <p>2</p>
     <m-new-select-table
       class="zzz"
       ref="selectRef"
-      v-model="code"
+      v-model="code2"
       placeholder="请选择单号"
       :tableTitle="commodityOptionsTitle"
       :options="options"
-      :keywords="{label: 'ApprovedQtyPU',value: 'DocNo' }"
+      :keywords="{ label: 'ApprovedQtyPU',value: 'DocNo' }"
       size="small"
       @selected="selected"
       @selectMultiple="selectMultiple"
@@ -44,7 +46,7 @@
     ></m-new-select-table>
     <p>1</p>
     <el-select
-      v-model="code"
+      v-model="code3"
       filterable
       remote
       :remoteMethod="remoteMethod"
@@ -87,7 +89,9 @@ const commodityOptionsTitle: TableTitle[] = [{
 }]
 const selectRef: any = ref<HTMLElement | null>(null)
 
-const code = ref<string | number | Array<string | number>>('')
+const code = ref<string | number | Array<string | number>>([])
+const code2 = ref<string | number | Array<string | number>>('')
+const code3 = ref<string | number | Array<string | number>>('')
 
 const total = ref(0)
 const options = ref<any[]>([])
@@ -108,7 +112,7 @@ const getDataList = (page: Page = new Page(), str: string = '') => {
 }
 
 const selected = (value: string | number | Array<number | string>) => {
-  console.log(value)
+  // console.log(value)
   // code.value = value
   // console.log('selected',value)
   // // console.log('selected', row)

package/packages/MNewSelectTable/src/MNewSelectTable.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="g-box g-select-table-box">
+    <p>{{ allowCreateRow }}</p>
+    <p>{{ props.allowCreate }}</p>
     <el-select
       ref="selectRef"
       v-bind="selectAttr"
@@ -12,7 +14,7 @@
       :value-key="props.keywords.value"
       :remote-method="remoteMethodHandle"
       :filter-method="props.remote ? null : filterMethodHandle"
-      :model-value="props.multiple ? state.defaultValue : selectDefaultLabel"
+      v-model="modelValue"
       @removeTag="removeTag"
       @clear="clear"
       :filterable="props.filterable"
@@ -98,6 +100,7 @@ import {
   watch,
   reactive
 } from 'vue'
+import { ElSelect, ElTable } from 'element-plus'
 import { Page } from './../../typings/class'
 
 const props = withDefaults(defineProps<{
@@ -128,8 +131,7 @@ const props = withDefaults(defineProps<{
   filterMethod: null,
   filterable: false,
   remote: false,
-  remoteMethod: () => {
-  },
+  remoteMethod: () => {},
   options: () => [],
   tableTitle: () => [],
   multiple: false,
@@ -141,29 +143,27 @@ const props = withDefaults(defineProps<{
   allowCreate: false
 })
 
-const selectDefaultLabel: any = ref(props.modelValue) // 单选赋值
+const modelValue = ref<string | number | Array<number | string>>(props.modelValue)
 
 // 获取ref
-const selectRef: any = ref<HTMLElement | null>(null)
-const selectTableRef: any = ref<HTMLElement | null>(null)
+const selectRef = ref<InstanceType<typeof ElSelect> | null>(null)
+const selectTableRef = ref<InstanceType<typeof ElTable> | null>(null)
 
 // 组件内使用自定义
 const isVisible = ref(false) // 是否显示隐藏下拉框
 const state = reactive<{
   tabData: Option[],
   ids: string | number | Array<string | number>,
-  defaultValue: string | number | Array<string | number>,
   selectRowS: any[],
-  addList: any[]
+  searchValue: string // 搜索值
 }>({
   tabData: props.options,
   ids: [], // 多选id集合
-  defaultValue: props.modelValue,
   selectRowS: [],
-  addList: []
+  searchValue: ''
 })
 // 抛出事件
-const emit = defineEmits(['selected', 'selectMultiple', 'toPage'])
+const emit = defineEmits(['selected', 'selectMultiple', 'toPage', 'update:modelValue'])
 
 watch(() => props.options, (val) => {
   state.tabData = val
@@ -179,10 +179,23 @@ watch(() => props.modelValue, (val) => {
 watch(() => props.total, () => {
   page.total = props.total as number
 })
+watch(() => modelValue.value, (val, oval) => {
+  emit('update:modelValue', modelValue.value)
+})
 
+const allowCreateRow = computed(() => {
+  const modelValue = props.multiple ? props.modelValue as Array<string | number> : [props.modelValue as string | number]
+  const value = [...modelValue, state.searchValue].filter(item => item)
+  return value
+    .filter(item => !props.options.some(node => node[props.keywords.value] === item))
+    .map(item => ({
+      [props.keywords.label]: item,
+      [props.keywords.value]: item
+    }))
+})
 const tabDataMap = computed(() => {
   if (!props.allowCreate) return state.tabData
-  return state.tabData.concat(state.addList)
+  return [...state.tabData, ...allowCreateRow.value]
 })
 
 // 点击行事件
@@ -190,8 +203,7 @@ const rowClick = (row: Option) => {
   if (props.multiple) return selectTableRef.value.setCurrentRow()  // 是多选不要
   const val = tabDataMap.value.find(item => row[props.keywords.value] === item[props.keywords.value])
   if (!val) return false
-  state.defaultValue = val[props.keywords.label]
-  selectDefaultLabel.value = state.defaultValue
+  modelValue.value = val[props.keywords.label]
   blur()
 
   emit('selected', val[props.keywords.value], val)
@@ -205,11 +217,11 @@ const selectMultiple = () => {
 
 // 多选事件
 const selectionChange = (Selection: Option[]) => {
-  state.defaultValue = Selection.map((item) => item[props.keywords.label])
-  state.ids = Selection.map((item) => item[props.keywords.value])
-  state.selectRowS = Selection
-  if (props.isAffirmBtn) return // 有确认按钮不走多选事件
-  emit('selected', state.ids, state.selectRowS)
+  // modelValue.value = Selection.map((item) => item[props.keywords.label])
+  // state.ids = Selection.map((item) => item[props.keywords.value])
+  // state.selectRowS = Selection
+  // if (props.isAffirmBtn) return // 有确认按钮不走多选事件
+  // emit('selected', state.ids, state.selectRowS)
 }
 // tags删除后回调
 const removeTag = (tag: any) => {
@@ -224,7 +236,6 @@ const defaultBackFillValue = () => {
     const modelArray = props.modelValue as Array<string | number>
     const newArr = (state.tabData as Option[]).filter(item => modelArray.includes(item[props.keywords.value as keyof typeof item]))
     setTimeout(() => {
-      state.defaultValue = newArr.map((item) => item[props.keywords.label])
       newArr.forEach((row) => {
         const arr = state.tabData.filter(
           (item) => item[props.keywords.value] === row[props.keywords.value]
@@ -234,38 +245,30 @@ const defaultBackFillValue = () => {
       })
     })
   } else {
-    const item = state.tabData.find(item => props.modelValue === item[props.keywords.value])
-    if (!item) return false
-    state.defaultValue = item[props.keywords.label]
-    selectDefaultLabel.value = state.defaultValue
+    // const item = state.tabData.find(item => props.modelValue === item[props.keywords.value])
+    // if (!item) return false
+    // modelValue.value = item[props.keywords.label]
   }
 }
 // // 搜索过滤
 const filterMethodHandle = (val: string) => {
+  state.searchValue = val
   if (props.filterable && props.filterMethod) return props.filterMethod(val, page)
   const tableData = JSON.parse(JSON.stringify(props.options))
   if (!tableData.length) return null
   state.tabData = tableData.filter((item: Option) => item[props.keywords.label].toString().includes(val))
-  allowCreate(val)
-}
-const allowCreate = (val: string) => {
-  if (!props.allowCreate) return
-  if (!val) return
-  const row = {
-    [props.keywords.label]: val,
-    [props.keywords.value]: val
-  }
-  state.tabData.push(row as Option)
 }
 
 const remoteMethodHandle = (query: string) => {
+  state.searchValue = query
   if (!props.remote) return false
 
-  selectRef.value.expanded = true
-  const el = lastOf(selectRef.value.contentId)
-  if (el instanceof HTMLElement) {
-    el.style.display = 'block'
-  }
+  // selectRef.value.expanded = true
+  // const el = lastOf(selectRef.value.contentId)
+  selectRef?.value?.tooltipRef?.onOpen()
+  // if (el instanceof HTMLElement) {
+  //   el.style.display = 'block'
+  // }
   return props.remoteMethod(query, page)
 }
 // 表格显示隐藏回调
@@ -276,12 +279,11 @@ const visibleChange = (visible: boolean) => {
 const clear = () => {
   if (props.multiple) {
     selectTableRef.value.clearSelection()
-    state.defaultValue = []
+    modelValue.value = []
   } else {
     // 取消高亮
     selectTableRef.value.setCurrentRow()
-    selectDefaultLabel.value = null
-    state.defaultValue = ''
+    modelValue.value = ''
   }
 }
 
@@ -338,22 +340,23 @@ const focus = () => {
 
   selectRef.value.focus()
   selectRef.value.expanded = true
-  const inputEl = lastOfTow(selectRef.value.contentId)
-  if (!inputEl) return
-  inputEl.addEventListener('keydown', (e: any) => {
-    if (e.key !== 'Enter' || !props.allowCreate) return false
-    const row = tabDataMap.value.find(item => item[props.keywords.label] === e.target.value)
-    if (!row) return
-    if (props.multiple) {
-      selectTableRef.value.toggleRowSelection(row, true)
-    } else {
-      rowClick(row)
-    }
-  })
+  // const inputEl = lastOfTow(selectRef.value.contentId)
+  // if (!inputEl) return
+  // inputEl.addEventListener('keydown', (e: any) => {
+  //   if (e.key !== 'Enter' || !props.allowCreate) return false
+  //   const row = tabDataMap.value.find(item => item[props.keywords.label] === e.target.value)
+  //   if (!row) return
+  //   if (props.multiple) {
+  //     selectTableRef.value.toggleRowSelection(row, true)
+  //   } else {
+  //     rowClick(row)
+  //   }
+  // })
 }
 const changeBlur = () => {
-  const el = lastOf(selectRef.value.contentId)
-  if (el instanceof HTMLElement) el.style.display = 'none'
+  // const el = lastOf(selectRef.value.contentId)
+  selectRef?.value?.tooltipRef?.onClose()
+  // if (el instanceof HTMLElement) el.style.display = 'none'
 }
 // 触发select隐藏
 const blur = () => {

package/packages/MNewSelectTable/src/TestBox.vue

@@ -1,11 +0,0 @@
-<template>
-
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped lang="scss">
-
-</style>