br-dionysus 1.6.5 → 1.6.7

package/docs/packages/MTableColumn/src/MTableColumn.vue

@@ -0,0 +1,345 @@
+<template>
+  <el-table-column
+    v-bind="attrs"
+    :filterMethod="props.filterMethod"
+  >
+    <template
+      #default="scope"
+      v-if="slots.default"
+    >
+      <slot
+        name="default"
+        :row="scope.row"
+        :column="scope.column"
+        :index="scope.$index"
+      ></slot>
+    </template>
+    <template v-if="props.children && props.children.length">
+      <m-table-column
+        v-for="child in props.children"
+        :key="child.prop"
+        :prop="child.prop"
+        :label="child.label"
+        :minWidth="child.minWidth"
+        showOverflowTooltip
+        :children="child.children || []"
+      ></m-table-column>
+    </template>
+    <template #header="scope">
+      <span>
+        <slot
+          name="header"
+          :row="scope.row"
+          :column="scope.column"
+          :index="scope.$index"
+        ></slot>
+        <span>
+          <span v-if="!slots.header">{{ scope.column.label }}</span>
+          <div
+            v-if="props.filters.length"
+            class="u-filter-group"
+          >
+            <i
+              class="u-icon j-icon"
+              @click="open($event, scope.column.property)"
+            ></i>
+
+            <Teleport to="body">
+              <div
+                class="m-filter-box j-filter-box"
+                :data-is-open="filterBoxIsOpen"
+                v-if="filterBoxIsOpen"
+              >
+                <div
+                  class="u-filter-mask"
+                  @click="close(scope.column.property)"
+                ></div>
+                <div
+                  class="u-list-box"
+                  ref="filterBoxRef"
+                  :style="boxStyle"
+                >
+                  <div class="u-it-gp">
+                    <el-input
+                      v-model="filterText"
+                      placeholder="请输入内容"
+                      clearable
+                      size="small"
+                    ></el-input>
+                  </div>
+                  <el-checkbox-group
+                    class="u-checkbox-group"
+                    v-model="filteredValue"
+                  >
+                    <el-checkbox
+                      v-for="item in getCheckboxOptions(props.filters)"
+                      :key="item.value"
+                      :label="item.value"
+                    >
+                      <template v-if="slots.default">
+                        <slot
+                          name="default"
+                          :row="{ [scope.column.property]: item.text }"
+                          :column="scope.column"
+                          :index="scope.$index"
+                        ></slot>
+                      </template>
+                      <template v-if="!slots.default">{{ item.text }}</template>
+                    </el-checkbox>
+                  </el-checkbox-group>
+                  <div class="u-btn-gp">
+                    <el-button
+                      link
+                      :disabled="!filteredValue.length"
+                      @click="sift(scope.column.property)"
+                    >
+                      筛选
+                    </el-button>
+                    <el-button
+                      link
+                      @click="reset(scope.column.property)"
+                    >
+                      重置
+                    </el-button>
+                  </div>
+                </div>
+              </div>
+            </Teleport>
+          </div>
+          <MTableColumnSet
+            class="u-set"
+            v-if="showTableConfig"
+            v-model="tableConfig"
+            link
+          ></MTableColumnSet>
+        </span>
+      </span>
+    </template>
+  </el-table-column>
+</template>
+
+<script setup lang="ts">
+import { ref, useSlots, useAttrs, inject, computed } from 'vue'
+import checkType from '../../../tool/checkType'
+import { tableKey } from './../../MTable/src/token'
+
+interface FilterValue {
+  [key: string]: Array<string | number>
+}
+
+interface PropChildren {
+  [prop: string]: any,
+  children?: PropChildren[]
+}
+
+const props = withDefaults(defineProps<{
+  /** 过滤值 */
+  filtersValue?: FilterValue,
+  /** 过滤选项 */
+  filters?: Array<{ text: string | number, value: string | number }>,
+  /** 过滤方法 */
+  filterMethod?: Function | null,
+  children?: Array<PropChildren>,
+}>(), {
+  filtersValue: () => ({}),
+  filters: () => [],
+  filterMethod: null,
+  children: () => []
+})
+
+const slots = useSlots()
+const attrs = useAttrs()
+
+const emit = defineEmits(['update:filtersValue'])
+
+const tableKeyData = inject(tableKey)
+const tableConfig = tableKeyData?.tableConfig
+const showTableConfig = computed(() => {
+  if (!tableKeyData || !tableConfig) return false
+  if (!tableConfig.value) return false
+  return tableKeyData.lastColumnProp.value === attrs.prop
+})
+
+const filterText = ref<string>('')
+
+const getCheckboxOptions = (options: { text: string | number, value: string | number }[]) => {
+  return options
+    .map(item => ({
+      ...item,
+      value: checkType.isArray(item.value) || checkType.isObject(item.value) ? JSON.stringify(item.value) : item.value
+    }))
+    .filter(item => String(item.value).includes(filterText.value))
+}
+
+const filteredValue = ref<Array<string | number>>([])
+const sift = (property: string) => {
+  const data = {
+    ...props.filtersValue,
+    [property]: filteredValue.value
+  }
+  emit('update:filtersValue', data)
+  close(property)
+}
+
+const reset = (property: string) => {
+  filteredValue.value = []
+  const data = {
+    ...props.filtersValue,
+    [property]: []
+  }
+  emit('update:filtersValue', data)
+  close(property)
+}
+
+const filterBoxIsOpen = ref<boolean>(false)
+
+const filterBoxRef = ref<HTMLElement>()
+
+const open = (event: MouseEvent, property: string) => {
+  const dom: HTMLElement = event.target as HTMLElement
+  const { width, height, bottom, right } = dom.getBoundingClientRect()
+  const isTopMode = window.innerHeight - bottom < 400 + 20
+  const isLeftMode = window.innerWidth - right < (filterBoxRef.value?.clientWidth || 0) + 20
+  filteredValue.value = props.filtersValue[property] || []
+  if (isTopMode) {
+    boxStyle.value.top = 'unset'
+    boxStyle.value.bottom = `${window.innerHeight - event.clientY + height - 5}px`
+  } else {
+    boxStyle.value.top = `${event.clientY - event.offsetY + height + 5}px`
+    boxStyle.value.bottom = 'unset'
+  }
+  if (isLeftMode) {
+    boxStyle.value.left = 'unset'
+    boxStyle.value.right = `${window.innerWidth - (event.clientX - event.offsetX) - width}px`
+  } else {
+    boxStyle.value.left = `${event.clientX - event.offsetX}px`
+    boxStyle.value.right = 'unset'
+  }
+  filterBoxIsOpen.value = true
+}
+
+const close = (property: string) => {
+  filterBoxIsOpen.value = false
+  filteredValue.value = props.filtersValue[property] || []
+}
+
+interface BoxStyle {
+  top: string | number,
+  left: string | number,
+  bottom: string | number,
+  right: string | number
+}
+
+const boxStyle = ref<BoxStyle>({
+  top: 0,
+  left: 0,
+  bottom: 'unset',
+  right: 'unset'
+})
+</script>
+
+<style scoped lang="scss">
+.u-icon {
+  display: inline-block;
+  position: relative;
+  width: 14px;
+  height: 14px;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAMdJREFUOE/tkyESwjAQRfMj0Xgkp2AmaQweHCeAS1AuASfAgce0yQynQOLRyHyazpRpoW2YAcnKbP7L7t8sxJeBoM+yLK04Ukp678vzWBhj0iegEK5jgnq+eGTzO4C1dkhyDGAvhBhFKrmSXAC4aK1vjV6dcxPv/QnAoA1C8i6lnCqlzlX+zaw8z2cADh2AeZIkx3qu1W3n3JLktnERWCmldq/gznFZa8NUyvFWjrdV9QcIEfWgz8BgaicgLFj467H9+Gjr+iAPDfV1EeVT6aEAAAAASUVORK5CYII=");
+  background-size: 100% 100%;
+  transform: translateY(2px);
+  cursor: pointer;
+}
+
+.u-filter-group {
+  display: inline-block;
+  position: relative;
+}
+
+.u-set {
+  padding: 2.5px 0;
+  float: right;
+}
+</style>
+
+<style lang="scss">
+.m-filter-box {
+  $zIndex: 2050;
+
+  &[data-is-open="true"] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &[data-is-open="false"] {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .u-filter-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: $zIndex;
+    width: 100%;
+    height: 100%;
+  }
+
+  .u-it-gp {
+    padding: 10px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+
+  .u-list-box {
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: $zIndex;
+    //width: 134px;
+    max-width: 50%;
+    background: var(--el-bg-color-overlay);
+    border: 1px solid var(--el-border-color-light);
+    border-radius: var(--el-popper-border-radius, 4px);
+    box-shadow: var(--el-box-shadow-light);
+
+    .u-checkbox-group {
+      overflow-y: auto;
+      display: block;
+      padding: 10px;
+      max-height: 280px;
+    }
+
+    label.el-checkbox {
+      display: flex;
+      align-items: center;
+      margin-right: 5px;
+      margin-bottom: 12px;
+      margin-left: 5px;
+      height: unset;
+    }
+
+    label.el-checkbox:last-child {
+      margin-bottom: 0;
+    }
+
+    .u-btn-gp {
+      border-top: 1px solid var(--el-border-color-lighter);
+      padding: 8px;
+    }
+
+    button.is-disabled {
+      color: var(--el-disabled-text-color);
+      cursor: not-allowed;
+    }
+
+    button {
+      background: 0 0;
+      border: none;
+      color: var(--el-text-color-regular);
+      cursor: pointer;
+      font-size: var(--el-font-size-small);
+      padding: 0 3px;
+    }
+  }
+}
+</style>

package/docs/packages/MTableColumnSet/docs/README.md

@@ -0,0 +1,31 @@
+<script setup>
+import demo from './demo.vue'
+</script>
+
+表格头设置组件
+=================
+
+### 1) 基础用法
+
+<Preview comp-name="MTableColumnSet" demo-name="demo">
+  <demo />
+</Preview>
+
+
+### 2) Attributes
+
+| 参数                    | 说明                                                 | 类型                                     | 可选值 | 默认值   |
+|-----------------------| ---------------------------------------------------- | ---------------------------------------- | ------ |-------|
+| model-value / v-model | 绑定值                                               | {  [propName: string]: TableConfigItem } | -      | {}    |
+| link                  | 是否为链接按钮                                               | boolean | -      | false |
+| foldMode              | 是否开启折叠 开启的话需要父级元素为flex布局/grid布局 | boolean                                  | -      | false |
+
+
+### 3) TableConfigItem 
+| 参数        | 说明                                              | 类型                       |
+| ----------- | ------------------------------------------------- | -------------------------- |
+| minWidth    | 最小列宽                                          | number,string              |
+| show        | 是否显示                                          | boolean                    |
+| sort        | 排序                                              | number                     |
+| label       | 列名                                              | string                     |
+| headerAlign | 表头对齐方式， 若不设置该项，则使用表格的对齐方式 | 'left' ,'center' , 'right' |

package/docs/packages/MTableColumnSet/docs/demo.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <MTableColumnSet v-model="tableConfig"/>
+    <div>
+      {{ tableConfig }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const tableConfig = ref({
+  date: {
+    minWidth: 100,
+    show: true,
+    sort: 0,
+    label: 'date'
+  },
+  name: {
+    minWidth: 100,
+    show: true,
+    sort: 1,
+    label: 'name'
+  },
+  address: {
+    minWidth: 100,
+    show: true,
+    sort: 2,
+    label: 'address'
+  }
+})
+
+</script>
+
+<style lang="scss"></style>

package/docs/packages/MTableColumnSet/index.ts

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