br-dionysus 1.6.6 → 1.6.7

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

@@ -0,0 +1,493 @@
+<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

@@ -0,0 +1,49 @@
+<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

@@ -0,0 +1,77 @@
+<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

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