br-dionysus 1.16.7 → 1.17.0

package/packages/MSelectTable/src/MSelectTable.vue

@@ -1,137 +1,133 @@
 <template>
   <div class="g-box g-select-table-box">
-    <ElSelect
-      ref="selectRef"
-      popperClass="m-select-table"
-      :multiple="isElSelectMultiple"
+    <!--单选-->
+    <ElInput
+      v-if="!props.multiple"
+      v-model="selectModelValue"
+      v-bind="selectAttr"
+      :class="inputClass"
       :disabled="props.disabled"
       :placeholder="props.placeholder"
       :size="props.size"
       :valueKey="props.keywords.value"
-      :remoteMethod="remoteMethodHandle"
       :filterMethod="props.remote ? null : filterMethodHandle"
       :filterable="props.filterable"
       :remote="props.remote"
       :remoteShowSuffix="props.remote"
-      v-bind="selectAttr"
-      v-model="selectModelValue"
-      @visibleChange="visibleChange"
       @removeTag="removeTag"
       @clear="clear"
+      @blur="changeBlur"
       @focus="focus"
+      @input="remoteMethodHandle"
+    ></ElInput>
+    <!--多选-->
+    <ElInputTag
+      v-if="props.multiple"
+      v-model="selectModelValue"
+      v-bind="selectAttr"
+      :class="inputClass"
+      :disabled="props.disabled"
+      :placeholder="props.placeholder"
+      :size="props.size"
+      :valueKey="props.keywords.value"
+      :filterMethod="props.remote ? null : filterMethodHandle"
+      :filterable="props.filterable"
+      :remote="props.remote"
+      :remoteShowSuffix="props.remote"
+      :saveOnBlur="false"
+      @removeTag="removeTag"
+      @clear="clear"
       @blur="changeBlur"
-      @change="change"
-    >
-      <template #empty>
-        <div
-          class="m-table-select"
-          :style="`width: ${typeof props.popupWidth === 'number' ? props.popupWidth + 'px' : props.popupWidth}`"
-        >
-          <div class="head-box">
-            <slot name="auxiliary"></slot>
-            <div
-              class="btn-box"
-              v-if="props.multiple && isAffirmBtn"
+      @focus="focus"
+      @input="remoteMethodHandle"
+      @addTag="addTag"
+    ></ElInputTag>
+
+    <Teleport to="body">
+      <div
+        class="br-m-table-box"
+        v-show="isVisible"
+        :style="{ ...mTableBoxStyle, ...boxStyle }"
+      >
+        <div class="head-box">
+          <slot name="auxiliary"></slot>
+          <div
+            class="btn-box"
+            v-if="props.multiple && isAffirmBtn"
+          >
+            <el-button
+              @click="selectMultiple"
+              size="small"
             >
-              <el-button
-                @click="selectMultiple"
-                size="small"
-              >
-                确认
-              </el-button>
-            </div>
+              确认
+            </el-button>
           </div>
-          <ElTable
-            ref="selectTableRef"
-            :scrollbarAlwaysOn="props.scrollbarAlwaysOn"
-            :size="props.size"
-            :data="tabDataMap"
-            :rowKey="props.keywords.value"
-            highlightCurrentRow
-            @rowClick="rowClick"
-            @selectionChange="selectionChange"
-            :height="props.tableHeight"
-            :border="props.border"
+        </div>
+        <ElTable
+          ref="selectTableRef"
+          highlightCurrentRow
+          :scrollbarAlwaysOn="props.scrollbarAlwaysOn"
+          :size="props.size"
+          :data="tabDataMap"
+          :rowKey="props.keywords.value"
+          :height="props.tableHeight"
+          :border="props.border"
+          @rowClick="rowClick"
+          @selectionChange="selectionChange"
+        >
+          <el-table-column
+            v-if="props.multiple"
+            type="selection"
+            :reserveSelection="reserveSelection"
+            width="55"
+          />
+          <el-table-column
+            showOverflowTooltip
+            v-for="item in tableTitle"
+            :key="item.prop"
+            :prop="item.prop"
+            :label="item.label"
+            :minWidth="item.minWidth"
+            :filters="item.filters"
+            :headerAlign="item.headerAlign"
           >
-            <el-table-column
-              v-if="props.multiple"
-              type="selection"
-              :reserveSelection="reserveSelection"
-              width="55"
-            />
-            <el-table-column
-              showOverflowTooltip
-              v-for="item in tableTitle"
-              :key="item.prop"
-              :prop="item.prop"
-              :label="item.label"
-              :minWidth="item.minWidth"
-              :filters="item.filters"
-              :headerAlign="item.headerAlign"
-            >
-              <template #default="scope">
-                <!-- {{scope}} -->
-                {{ tabDataMap[scope.$index][item.prop as string] || '-' }}
-              </template>
-            </el-table-column>
-            <template #empty>
-              <img
-                class="u-img"
-                src="@/assets/empty.png"
-              />
+            <template #default="scope">
+              {{ tabDataMap[scope.$index][item.prop as string] || '-' }}
             </template>
-          </ElTable>
-          <!--分页-->
-          <div
-            class="m-page"
-            v-if="props.total"
-          >
-            <el-pagination
-              v-model:currentPage="page.currentPage"
-              v-model:pageSize="page.pageSize"
-              hideOnSinglePage
-              :small="props.size === 'small'"
-              :pageSizes="page.pageSizesOptions"
-              :pagerCount="5"
-              layout="total, prev, pager, next, sizes"
-              :total="page.total"
-              @currentChange="toPage"
-              @sizeChange="toPage(page.currentPage, $event)"
+          </el-table-column>
+          <template #empty>
+            <img
+              class="u-img"
+              src="@/assets/empty.png"
             />
-          </div>
+          </template>
+        </ElTable>
+        <!--分页-->
+        <div
+          class="m-page"
+          v-if="props.total"
+        >
+          <el-pagination
+            v-model:currentPage="page.currentPage"
+            v-model:pageSize="page.pageSize"
+            hideOnSinglePage
+            :size="props.size"
+            :pageSizes="page.pageSizesOptions"
+            :pagerCount="5"
+            layout="total, prev, pager, next, sizes"
+            :total="page.total"
+            @currentChange="toPage"
+            @sizeChange="toPage(page.currentPage, $event)"
+          />
         </div>
-      </template>
-    </ElSelect>
-
-    <!--<ElInput-->
-    <!--  class="u-input"-->
-    <!--  :multiple="isElSelectMultiple"-->
-    <!--  :disabled="props.disabled"-->
-    <!--  :placeholder="props.placeholder"-->
-    <!--  :size="props.size"-->
-    <!--  :valueKey="props.keywords.value"-->
-    <!--  :remoteMethod="remoteMethodHandle"-->
-    <!--  :filterMethod="props.remote ? null : filterMethodHandle"-->
-    <!--  :filterable="props.filterable"-->
-    <!--  :remote="props.remote"-->
-    <!--  :remoteShowSuffix="props.remote"-->
-    <!--  v-bind="selectAttr"-->
-    <!--  v-model="selectModelValue"-->
-    <!--  @visibleChange="visibleChange"-->
-    <!--  @removeTag="removeTag"-->
-    <!--  @clear="clear"-->
-    <!--  @click="focus"-->
-    <!--  @blur="changeBlur"-->
-    <!--  @change="change"-->
-    <!--&gt;</ElInput>-->
-
-    <!--<Teleport to="body">-->
-    <!--  <div-->
-    <!--    class="m-table-box"-->
-    <!--    v-show="showPanel"-->
-    <!--    :style="{ ...mTableBoxStyle, ...boxStyle }"-->
-    <!--  ></div>-->
-    <!--</Teleport>-->
+      </div>
+    </Teleport>
+
+    <div
+      v-show="isVisible"
+      :style="mMarkStyle as any"
+      @click="clickOutside"
+    />
   </div>
 </template>
 
@@ -145,8 +141,9 @@ import {
   onMounted,
   nextTick
 } from 'vue'
-import { ElSelect, ElTable } from 'element-plus'
+import { ElTable, ElInputTag, ElInput } from 'element-plus'
 import { Page } from './../../typings/class'
+import createHash from './../../Tool/createHash/createHash'
 
 const props = withDefaults(defineProps<{
   modelValue?: string | number | Array<number | string>,
@@ -170,7 +167,7 @@ const props = withDefaults(defineProps<{
   /** 是否多选 */
   multiple?: boolean,
   /** 定义默认的 label 和value */
-  keywords?: Option,
+  keywords?: { label: string, value: string },
   /** 是否开启翻页多选 */
   reserveSelection?: boolean,
   tableHeight?: string | number,
@@ -208,44 +205,78 @@ const props = withDefaults(defineProps<{
   popupWidth: 500
 })
 
-const isElSelectMultiple = computed(() => {
-  if (Array.isArray(props.name)) return true
-  if (props.name || props.name === 0) return false
-  return props.multiple
-})
-
 const modelValue = ref<string | number | Array<number | string>>(props.modelValue)
 watch(
   () => props.modelValue,
   () => {
-    // if (props.multiple && !checkType.isArray(props.modelValue)) return console.error('multiple为true时，modelValue必须为数组格式')
-    // if (!props.multiple && (checkType.isArray(props.modelValue) || checkType.isObject(props.modelValue))) return console.error('multiple为false时，modelValue必须为基础类型')
     modelValue.value = props.modelValue
   }
 )
 
-const selectModelValue = ref<string | number | Array<number | string>>(props.multiple ? [] : '')
+/** 是否显示下拉框 */
+const isVisible = ref<boolean>(false)
+const mTableBoxStyle = ref<Record<string, any>>({
+  position: 'fixed',
+  opacity: 0,
+  zIndex: 9000,
+  padding: '8px',
+  width: '500px',
+  border: '1px solid var(--el-border-color-lighter, #ebeef5)',
+  boxShadow: '0 2px 12px 0 rgba(0,0,0,.1)',
+  background: 'var(--el-bg-color, #fff)',
+  borderRadius: '4px'
+})
+const inputClass = 'j-' + createHash()
+const boxStyle = ref<Record<string, any>>({})
 watch(
-  () => props.name,
+  () => isVisible.value,
   () => {
-    if (props.name === '' || props.name === null || props.name === undefined) return false
-    selectModelValue.value = props.name
+    const style = {}
+    if (isVisible.value) {
+      const element = document.querySelector('.' + inputClass)
+      if (!element) return
+      const rect = element.getBoundingClientRect()
+      if (!rect) return
+      const bottom = window.innerHeight - rect.top - rect.height
+      const right = window.innerWidth - rect.left - rect.width
+      if (bottom < 250) {
+        Object.assign(style, { bottom: (bottom + rect.height) + 'px' })
+        Object.assign(style, { transform: 'translateY(-10px)' })
+      } else {
+        Object.assign(style, { top: (rect.top + rect.height) + 'px' })
+        Object.assign(style, { transform: 'translateY(10px)' })
+      }
+      if ((window.innerWidth - rect.left) < 550) {
+        Object.assign(style, { right: right + 'px' })
+      } else {
+        Object.assign(style, { left: rect.left + 'px' })
+      }
+
+      Object.assign(style, { opacity: 1 })
+    }
+    if (!isVisible.value) {
+      Object.assign(style, { opacity: 0 })
+    }
+
+    nextTick(() => {
+      boxStyle.value = style
+    })
   }
 )
-if (props.name || props.name === 0) {
-  selectModelValue.value = props.name
+
+const mMarkStyle = {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  zIndex: 8,
+  width: '100%',
+  height: '100%'
 }
 
-// 获取ref
-const selectRef = ref<InstanceType<typeof ElSelect> | null>(null)
-onMounted(() => {
-  if (!selectRef.value) return false
-  selectRef.value.toggleMenu = () => {}
-})
+/** 表格组件对象 */
 const selectTableRef = ref<InstanceType<typeof ElTable> | null>(null)
 
 // 组件内使用自定义
-const isVisible = ref(false) // 是否显示隐藏下拉框
 const state = reactive<{
   tabData: Option[],
   ids: string | number | Array<string | number>,
@@ -259,35 +290,44 @@ const state = reactive<{
 })
 // 抛出事件
 const emit = defineEmits<{
+  'update:modelValue': [value: string | number | boolean | Array<string | number | boolean>];
   /** 单选或多选之后的回调 */
-  selected: [values: string | number | Array<string | number>, rows: Option[] | Option];
+  selected: [values: string | number | boolean | Array<string | number | boolean>, rows: Option[] | Option];
   /** 多选确认按钮时的回调 配合isAffirmBtn使用 */
   selectMultiple: [values: Array<string | number>, rows: Option[]];
   /** 当没有使用filterMethod时候才会有回调否则没有 */
   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];
+  removeTag: [value: any, index: number];
+  // /** 值变化事件 */
+  // change: [value: any];
 }>()
 
+/** 额外创建的行 */
 const allowCreateRow = computed(() => {
   if (!props.allowCreate) return []
   const modelValue: Array<string | number> = props.multiple && Array.isArray(props.modelValue) ? props.modelValue : []
-  const value = [...modelValue, state.searchValue].filter(item => item)
+  const value = [
+    ...modelValue,
+    ...(modelValue.includes(state.searchValue) ? [] : [state.searchValue])
+  ].filter(item => item)
   return value
-    .filter(item => !props.options.some(node => node[props.keywords.value] === item))
+    .filter(item => !state.tabData.some(node => node[props.keywords.value] === item))
     .map(item => ({
+      value: item,
+      label: item,
       [props.keywords.label]: item,
       [props.keywords.value]: item,
       isAllowCreateRow: true
-    }))
+    })) as Option[]
 })
 
-const tabDataMap = ref<Record<string, any>[]>([])
+// 表格数据源 包含创建的行
+const tabDataMap = ref<Option[]>([])
 watch(
   () => state.tabData,
   () => {
@@ -313,17 +353,33 @@ watch(
     })
   }
 )
+const addTag = () => {
+  selectionChange(tabDataMap.value.filter(item => (selectModelValue.value as string[]).includes(item[props.keywords.value])))
+  setTimeout(() => {
+    defaultBackFillValue()
+  })
+}
 
+// 直接跟输入框绑定
+const selectModelValue = ref<string | number | Array<number | string>>(props.multiple ? [] : '')
+watch(
+  () => props.name,
+  () => {
+    if (props.name === '' || props.name === null || props.name === undefined) return false
+    selectModelValue.value = props.name
+  },
+  { immediate: true }
+)
+// 更新select显示值
 const upSelectModelValue = () => {
   if (props.name || props.name === 0) return false
   // 多选
   if (props.multiple) {
     const _value: Array<string | number> = Array.isArray(modelValue.value) ? modelValue.value : [modelValue.value].filter(item => item !== '')
-    const data: Array<string | number> = _value.map(item => {
+    selectModelValue.value = _value.map(item => {
       const row: any = props.options.find(node => node[props.keywords.value as any] === item) || {}
       return row[props.keywords.label] || item
     })
-    selectModelValue.value = data
   }
   // 单选
   if (!props.multiple) {
@@ -333,7 +389,7 @@ const upSelectModelValue = () => {
 }
 upSelectModelValue()
 watch(
-  () => modelValue.value,
+  () => [modelValue.value],
   () => {
     upSelectModelValue()
   }
@@ -358,24 +414,26 @@ const rowClick = (row: Option) => {
   const val = tabDataMap.value.find(item => row[props.keywords.value] === item[props.keywords.value])
   if (!val) return false
   modelValue.value = val[props.keywords.value]
-  blur()
+  state.searchValue = val[props.keywords.label]
 
   emit('selected', val[props.keywords.value], {
+    ...val,
     label: val[props.keywords.label],
-    value: val[props.keywords.value],
-    ...val
-  })
+    value: val[props.keywords.value]
+  } as Option)
+  close()
 }
 
 // 确认的回调
 const selectMultiple = () => {
-  blur()
+  // blur()
   emit('selectMultiple', state.ids as Array<string | number>, state.selectRowS)
 }
 
 // 多选事件
 const selectionChange = (selection: Option[]) => {
-  const select = selection.map((item) => item[props.keywords.value])
+  if (isBackFill.value) return
+  const select = selection.map(item => item[props.keywords.value])
   emit('selectChange', select)
   const _value: Array<string | number> = Array.isArray(modelValue.value) ? modelValue.value : [modelValue.value].filter(item => item !== '')
   // 是否为删除
@@ -388,23 +446,28 @@ const selectionChange = (selection: Option[]) => {
   emit('selected', state.ids as Array<string | number>, state.selectRowS)
 }
 // tags删除后回调
-const removeTag = (tag: any) => {
-  const row = state.tabData.find((item) => item[props.keywords.label] === tag)
-  selectTableRef.value.toggleRowSelection(row, false)
-  emit('removeTag', tag)
-}
-const change = (value: string | number | Array<string | number>) => {
-  if (props.multiple && Array.isArray(value) && Array.isArray(modelValue.value)) {
-    const removeValue = modelValue.value
-      .filter(item => !(value as Array<string | number>).includes(item))
-    removeValue.forEach(item => {
-      const row = tabDataMap.value.find(node => node[props.keywords.value] === item)
-      selectTableRef.value.toggleRowSelection(row, false)
-    })
-  }
-  modelValue.value = value
-  // emit('selectChange', modelValue.value)
+const removeTag = (value: string, index: number) => {
+  if (!Array.isArray(modelValue.value)) return
+  const removeValue = modelValue.value[index]
+  const row = tabDataMap.value.find(node => node[props.keywords.value] === removeValue)
+  if (row) selectTableRef.value.toggleRowSelection(row, false)
+  emit('removeTag', value, index)
+
+  modelValue.value = modelValue.value.filter(item => item !== removeValue)
 }
+// 多选的值发生变化
+// const multipleChange = (value: string | number | Array<string | number>) => {
+//   // if (!props.multiple || !Array.isArray(value) || !Array.isArray(modelValue.value)) return
+//
+//   // const removeValue = modelValue.value.filter(item => !(value as Array<string | number>).includes(item))
+//   // removeValue.forEach(item => {
+//   //   const row = tabDataMap.value.find(node => node[props.keywords.value] === item)
+//   //   if (!row) return
+//   //   selectTableRef.value.toggleRowSelection(row, false)
+//   // })
+//
+//   // modelValue.value = value
+// }
 
 // 是反填中状态
 const isBackFill = ref<boolean>(false)
@@ -413,17 +476,17 @@ 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]))
+    const newArr = (tabDataMap.value as Option[]).filter(item => modelArray.includes(item[props.keywords.value as keyof typeof item]))
     nextTick(() => {
       newArr.forEach((row) => {
-        const arr = state.tabData.filter(item => item[props.keywords.value] === row[props.keywords.value])
+        const arr = tabDataMap.value.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])
+    const item = tabDataMap.value.find(item => props.modelValue === item[props.keywords.value])
     if (!item) return false
     nextTick(() => {
       selectTableRef.value.setCurrentRow(item, true)
@@ -443,6 +506,7 @@ const debounce = (func: Function, wait: number) => {
     }, wait)
   }
 }
+/** 默认反填（显示当前表格选中状态）防抖封装 */
 const debounceDefaultBackFillValue = debounce(() => defaultBackFillValue(), 100)
 watch(
   () => props.options,
@@ -452,7 +516,8 @@ watch(
     if (check) return
     state.tabData = val
     debounceDefaultBackFillValue()
-  }, { deep: true }
+  },
+  { deep: true }
 )
 watch(
   () => props.modelValue,
@@ -477,13 +542,8 @@ const remoteMethodHandle = (query: string = '') => {
   state.searchValue = query.trim()
   if (!props.remote) return false
 
-  selectRef?.value?.tooltipRef?.onOpen()
   page.currentPage = 1
-  return props.remoteMethod(query, page)
-}
-// 表格显示隐藏回调
-const visibleChange = (visible: boolean) => {
-  isVisible.value = visible
+  return props.remoteMethod(state.searchValue, page)
 }
 // 清空后的回调
 const clear = () => {
@@ -515,11 +575,9 @@ const page = reactive<Page>(new Page({
 const toPage = (currentPage: number = 1, pageSize: number = page.pageSize) => {
   page.currentPage = currentPage
   page.pageSize = pageSize
-  if (!props.multiple || (props.multiple && !props.reserveSelection)) clear()
-  selectRef.value.expanded = true
-  props.remoteMethod(state.searchValue, page)
+  // if (!props.multiple || (props.multiple && !props.reserveSelection)) clear()
   if (props.filterable) {
-    emit('toPage', page, selectRef.value.inputRef.value)
+    emit('toPage', page, modelValue.value)
   } else {
     emit('toPage', page)
   }
@@ -527,18 +585,31 @@ const toPage = (currentPage: number = 1, pageSize: number = page.pageSize) => {
 // 触发select显示
 const focus = () => {
   if (props.disabled) return
-  selectRef.value.focus()
-  selectRef.value.expanded = true
+
+  remoteMethodHandle(state.searchValue)
+  setTimeout(() => {
+    isVisible.value = true
+  }, 150)
 }
 const changeBlur = () => {
-  selectRef?.value?.tooltipRef?.onClose()
 }
 // 触发select隐藏
-const blur = () => {
-  selectRef.value.blur()
-  selectRef?.value?.tooltipRef?.onClose()
+// const blur = () => {
+// }
+/** 关闭 */
+const close = () => {
+  if (!isVisible.value) return
+  nextTick(() => {
+    isVisible.value = false
+  })
 }
-defineExpose({ defaultBackFillValue, clear, focus })
+
+const clickOutside = () => {
+  if (!isVisible.value) return false
+  isVisible.value = false
+}
+
+defineExpose({ defaultBackFillValue, clear, focus, close })
 </script>
 
 <style lang="scss">
@@ -550,8 +621,7 @@ defineExpose({ defaultBackFillValue, clear, focus })
   width: 80px;
 }
 
-.m-select-table {
-
+.m-select-table, .br-m-table-box {
   .el-table {
     --el-table-header-bg-color: var(--m-list-el-table-header-bg-color, #f5f5f5);
   }

package/packages/MSelectTableV1/src/MSelectTableV1.vue

@@ -144,9 +144,9 @@ const props = withDefaults(defineProps<{
 })
 
 const _this = reactive<{
-  vValue: string | number,
+  vValue: string | number | boolean,
   vLabel: string | number,
-  oValue: string | number,
+  oValue: string | number | boolean,
   inputClass: string,
   masterPieceLoading: boolean,
   showPanel: boolean, // 显示面板

package/packages/MSelectV2/src/MSelectV2.vue

@@ -55,7 +55,7 @@ const props = withDefaults(defineProps<{
 
 const attrs = useAttrs()
 
-type ValueType = string | number | Array<string | number>
+type ValueType = string | number | boolean | Array<string | number | boolean>
 const modelValue = ref<ValueType>(props.modelValue as ValueType)
 watch(
   () => props.modelValue,