br-dionysus 1.6.7 → 1.6.8

package/docs/packages/MSelectTable/src/MSelectTable.vue

@@ -1,493 +0,0 @@
-<template>
-  <div class="g-box g-select-table-box">
-    <ElSelect
-      ref="selectRef"
-      v-bind="selectAttr"
-      popperClass="m-select-table"
-      :multiple="isElSelectMultiple"
-      :disabled="props.disabled"
-      :placeholder="props.placeholder"
-      @visibleChange="visibleChange"
-      :size="props.size"
-      :valueKey="props.keywords.value"
-      :remoteMethod="remoteMethodHandle"
-      :filterMethod="props.remote ? null : filterMethodHandle"
-      v-model="selectModelValue"
-      @removeTag="removeTag"
-      @clear="clear"
-      :filterable="props.filterable"
-      :remote="props.remote"
-      :remoteShowSuffix="props.remote"
-      @click="focus"
-      @blur="changeBlur"
-      @change="change"
-    >
-      <template #empty>
-        <div
-          class="m-table-select"
-          :style="`width: ${typeof props.popupWidth === 'number' ? props.popupWidth + 'px' : props.popupWidth}`"
-        >
-          <div
-            class="btn-box"
-            v-if="props.multiple && isAffirmBtn"
-          >
-            <el-button
-              @click="selectMultiple"
-              size="small"
-            >
-              确认
-            </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"
-          >
-            <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] || '-' }}
-              </template>
-            </el-table-column>
-            <template #empty>
-              <img
-                class="u-img"
-                src="@/assets/empty.png"
-              />
-            </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)"
-            />
-          </div>
-        </div>
-      </template>
-    </ElSelect>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  computed,
-  useAttrs,
-  ref,
-  watch,
-  reactive,
-  onMounted
-} from 'vue'
-import { ElSelect, ElTable } from 'element-plus'
-import { Page } from './../../typings/class'
-
-const props = withDefaults(defineProps<{
-  modelValue?: string | number | Array<number | string>,
-  /** 显示值 */
-  name?: string | number | Array<number | string>,
-  placeholder?: string,
-  disabled?: boolean,
-  size?: 'small' | 'large' | '',
-  /** 总数据量，当有值时，出现分页器 */
-  total?: number | null,
-  /** 自定义搜索 */
-  filterMethod?: Function | null,
-  /** 是否使用搜索 */
-  filterable?: boolean,
-  /** 是否使用 远程搜索 */
-  remote?: boolean,
-  /** 自定义远程搜索 */
-  remoteMethod?: Function,
-  options: Option[],
-  tableTitle: TableTitle[],
-  /** 是否多选 */
-  multiple?: boolean,
-  /** 定义默认的 label 和value */
-  keywords?: Option,
-  /** 是否开启翻页多选 */
-  reserveSelection?: boolean,
-  tableHeight?: string | number,
-  /** 是否有确认按钮 */
-  isAffirmBtn?: boolean,
-  /** 是否常态显示滚动条 */
-  scrollbarAlwaysOn?: boolean,
-  /** 是否能够创建条目 */
-  allowCreate?: boolean,
-  /** 表格边框 */
-  border?: boolean,
-  /** 弹窗的宽度 */
-  popupWidth?: number | string
-}>(), {
-  modelValue: '',
-  name: '',
-  placeholder: '请选择',
-  disabled: false,
-  size: '',
-  total: null,
-  filterMethod: null,
-  filterable: false,
-  remote: false,
-  remoteMethod: () => {},
-  options: () => [],
-  tableTitle: () => [],
-  multiple: false,
-  keywords: () => ({ label: 'label', value: 'value' }),
-  reserveSelection: false,
-  tableHeight: 200,
-  isAffirmBtn: false,
-  scrollbarAlwaysOn: false,
-  allowCreate: false,
-  border: false,
-  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 ? [] : '')
-watch(
-  () => props.name,
-  () => {
-    if (props.name === '' || props.name === null || props.name === undefined) return false
-    selectModelValue.value = props.name
-  }
-)
-if (props.name || props.name === 0) {
-  selectModelValue.value = props.name
-}
-
-// 获取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>,
-  selectRowS: any[],
-  searchValue: string // 搜索值
-}>({
-  tabData: props.options,
-  ids: [], // 多选id集合
-  selectRowS: [],
-  searchValue: ''
-})
-// 抛出事件
-const emit = defineEmits<{
-  /** 单选或多选之后的回调 */
-  selected: [values: string | number | Array<string | number>, rows: Option[] | Option],
-  /** 多选确认按钮时的回调 配合isAffirmBtn使用 */
-  selectMultiple: [values: Array<string | number>, rows: Option[]],
-  /** 当没有使用filterMethod时候才会有回调否则没有 */
-  toPage: [page: Page, query?: string],
-  'update:modelValue': [value: string | number | Array<string | number>],
-  /** 用户点击清空按钮时触发 */
-  clear: [],
-  /** 多选模式下移除tag时触发 */
-  removeTag: [tag: 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)
-  return value
-    .filter(item => !props.options.some(node => node[props.keywords.value] === item))
-    .map(item => ({
-      [props.keywords.label]: item,
-      [props.keywords.value]: item,
-      isAllowCreateRow: true
-    }))
-})
-
-const tabDataMap = ref<any[]>([])
-watch(() => state.tabData, () => {
-  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)
-  }
-  allowCreateRow.value.forEach(item => {
-    tabDataMap.value.push(item as any)
-  })
-})
-
-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 => {
-      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) {
-    const data: any = props.options.find(item => item[props.keywords.value as any] === modelValue.value) || {}
-    selectModelValue.value = data[props.keywords.label] || modelValue.value
-  }
-}
-upSelectModelValue()
-watch(
-  () => modelValue.value,
-  () => {
-    upSelectModelValue()
-  }
-)
-
-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)
-})
-
-// 点击行事件
-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
-  modelValue.value = val[props.keywords.value]
-  blur()
-
-  emit('selected', val[props.keywords.value], val)
-}
-
-// 确认的回调
-const selectMultiple = () => {
-  blur()
-  emit('selectMultiple', state.ids as Array<string | number>, state.selectRowS)
-}
-
-// 多选事件
-const selectionChange = (selection: Option[]) => {
-  const select = selection.map((item) => item[props.keywords.value])
-  const _value: Array<string | number> = Array.isArray(modelValue.value) ? modelValue.value : [modelValue.value].filter(item => item !== '')
-  // 是否为删除
-  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])
-  state.selectRowS = selection
-  if (props.isAffirmBtn) return // 有确认按钮不走多选事件
-  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
-}
-
-// 默认反填
-const defaultBackFillValue = () => {
-  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(() => {
-      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)
-      })
-    })
-  } else {
-    const item = state.tabData.find(item => props.modelValue === item[props.keywords.value])
-    if (!item) return false
-    setTimeout(() => {
-      selectTableRef.value.setCurrentRow(item, true)
-    })
-    modelValue.value = item[props.keywords.value]
-  }
-}
-// // 搜索过滤
-const filterMethodHandle = (val: string) => {
-  state.searchValue = val.trim()
-  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))
-}
-
-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
-}
-// 清空后的回调
-const clear = () => {
-  if (props.multiple) {
-    selectTableRef.value.clearSelection()
-    modelValue.value = []
-  } else {
-    // 取消高亮
-    selectTableRef.value.setCurrentRow()
-    modelValue.value = ''
-  }
-  emit('clear')
-}
-
-const selectAttr = computed(() => {
-  return {
-    clearable: true,
-    ...useAttrs()
-  }
-})
-// 分页
-const page = reactive<Page>(new Page({
-  total: props.total as number,
-  pageSize: 5,
-  currentPage: 1,
-  pageSizesOptions: [5, 10, 20]
-}))
-
-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.filterable) {
-    emit('toPage', page, selectRef.value.inputRef.value)
-  } else {
-    emit('toPage', page)
-  }
-}
-// 触发select显示
-const focus = () => {
-  if (props.disabled) return
-  selectRef.value.focus()
-  selectRef.value.expanded = true
-}
-const changeBlur = () => {
-  selectRef?.value?.tooltipRef?.onClose()
-}
-// 触发select隐藏
-const blur = () => {
-  selectRef.value.blur()
-  selectRef?.value?.tooltipRef?.onClose()
-}
-defineExpose({ defaultBackFillValue, clear, focus })
-</script>
-
-<style lang="scss">
-.g-select-table-box {
-  width: 100%;
-}
-
-.u-img {
-  width: 80px;
-}
-
-.m-select-table {
-
-  .el-table {
-    --el-table-header-bg-color: var(--m-list-el-table-header-bg-color, #f5f5f5);
-  }
-
-  .el-select-dropdown__empty {
-    padding: 0;
-
-    .btn-box {
-      text-align: right;
-      padding-bottom: 6px;
-    }
-  }
-
-  .m-table-select {
-    padding: 6px;
-    overflow-y: auto;
-  }
-
-  .m-page {
-    padding: 4px;
-  }
-}
-</style>

package/docs/packages/MSelectTableV1/docs/README.md

@@ -1,49 +0,0 @@
-<script setup>
-import demo from './demo.vue'
-</script>
-
-下拉表格选择器（旧版，只做维护不更新）
-=================
-
-### 1) 基础用法
-
-<Preview comp-name="MSelectTable" demo-name="demo">
-  <demo />
-</Preview>
-
-### 2)  Attributes
-
-| 参数                |            说明            |    类型    |         可选值          |   默认值   |
-|-------------------|:------------------------:|:--------:|:--------------------:|:-------:|
-| value / v-model   |           绑定值            |  string  |        number        |    -    | ''   |
-| placeholder       |    输入框默认 placeholder     |  string  |          -           |   ''    |
-| disabled          |           是否禁用           | boolean  |          -           |  false  |
-| size              |         数值输入框尺寸          |  string  | 'large', 'small', '' |   ''    |
-| options           |    选项内容，详情见Options接口     | Option[] |          -           |   []    |
-| total             |     总数据量，当有值时，出现分页器      |  number  |         null         |    -    |
-| remoteMethod      |        自定义远程搜索方法         | Function |          -           |    -    |
-| tableTitle        |          表格标题配置          |  any[]   |          -           |   []    |
-| isSelect          |           是否多选           | boolean  |          -           |  false  |
-| allowCreate       |       是否允许用户创建新条目        | boolean  |          -           |  false  |
-| focusShow         | 是否聚焦显示（既，当搜索值为空时是否显示选择器） |    -     |        false         |    -    |
-| clearable         |         是否可以清空选项         | boolean  |          -           |  false  |
-| scrollbarAlwaysOn |         总是显示滚动条          | boolean  |          -           |    -    |
-| labelKey          |        label映射key        |  string  |          -           | 'label' |
-
-#### Options（选项接口）
-
-| 参数                  |          说明           |        类型         | 可选值 | 是否必填 |
-|---------------------|:---------------------:|:-----------------:|:---:|:----:|
-| label               | 选项的标签，若不设置则默认与value相同 |      string       |  -  |  是   |
-| value               |         选项的值          | string  \| number |  -  |  是   |
-| disabled            |        是否禁用该选项        |      boolean      |  -  |  否   |
-| \[propName: string] |         额外字段          | string  \| number |  -  |  否   |
-
-### 3) Events
-
-| 方法名            |     说明      |          参数           |
-|----------------|:-----------:|:---------------------:|
-| selectMultiple | 多选确认按钮点击时触发 | selectedRow(所选行构成的数组) |
-| change         |  绑定值被改变时触发  |         value         |
-| selected       | 单选模式点击行时触发  |   selectedRow（所选行）    |
-| clear          |  清空选择之后回调   |           -           |

package/docs/packages/MSelectTableV1/docs/demo.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="g-m-select-table-box">
-    <m-select-table-v1
-      v-model="code"
-      placeholder="请选择单号"
-      :remoteMethod="remoteMethod"
-      :options="options"
-      :tableTitle="commodityOptionsTitle"
-      focusShow
-      clearable
-      @clear="clearCall"
-    ></m-select-table-v1>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Page } from '../../typings/class'
-
-const code = ref<string>('')
-const options = ref<Option[]>()
-const commodityOptionsTitle: TableTitle[] = [{
-  prop: 'sn',
-  label: '单号'
-}, {
-  prop: 'fileName',
-  label: '文件名'
-}, {
-  prop: 'createdUserName',
-  label: '上传者'
-}, {
-  prop: 'createdTimeStr',
-  label: '上传时间'
-}]
-
-const mockData = [{
-  sn: 'SC201564981241',
-  fileName: '测试文件1.zip',
-  createdUserName: '绫波丽',
-  createdTimeStr: '2024-05-06'
-}, {
-  sn: 'SC201564981242',
-  fileName: '测试文件2.zip',
-  createdUserName: '绫波丽',
-  createdTimeStr: '2024-05-06',
-  disabled: true
-}, {
-  sn: 'SC201564981243',
-  fileName: '测试文件3.zip',
-  createdUserName: '绫波丽',
-  createdTimeStr: '2024-05-06'
-}, {
-  sn: 'SC201564981244',
-  fileName: '测试文件4.zip',
-  createdUserName: '绫波丽',
-  createdTimeStr: '2024-05-06'
-}]
-const clearCall = (e: any) => {
-  console.log(e)
-  console.log('!@#@#')
-}
-const remoteMethod = async (query: string = '', page: Page) => {
-  console.log('page', page)
-  options.value = mockData.map(item => ({
-    label: item.fileName,
-    value: item.sn,
-    sn: item.sn,
-    fileName: item.fileName,
-    createdUserName: item.createdUserName,
-    createdTimeStr: item.createdTimeStr,
-    disabled: item.disabled
-  }))
-}
-</script>
-
-<style lang="scss">
-</style>

package/docs/packages/MSelectTableV1/index.ts

@@ -1,10 +0,0 @@
-import { App, Plugin } from 'vue'
-import MSelectTableV1 from './src/MSelectTableV1.vue'
-
-export const MSelectTableV1Plugin: Plugin = {
-  install (app: App) {
-    app.component('MSelectTableV1', MSelectTableV1)
-  }
-}
-
-export { MSelectTableV1 }