br-dionysus 1.6.5 → 1.6.7

package/docs/packages/MSelectTableV1/src/MSelectTableV1.vue

@@ -0,0 +1,460 @@
+<template>
+  <div
+    class="g-box g-select-table-box"
+    :class="elClassName"
+  >
+    <div class="u-input-gp">
+      <el-input
+        v-model="_this.vValue"
+        :class="_this.inputClass"
+        :size="props.size"
+        :placeholder="props.placeholder"
+        @input="props.remoteMethod($event, page);_this.showPanel = true"
+        @focus="focus"
+        @keyup.enter="addRowData"
+        :disabled="props.disabled"
+      />
+      <div
+        class="el-icon el-icon-circle-close"
+        v-if="props.clearable && _this.vValue"
+        @click="empty"
+      >
+        <el-icon><CircleClose /></el-icon>
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <div
+        class="m-table-box"
+        v-show="_this.showPanel"
+        :style="{...mTableBoxStyle, ..._this.boxStyle}"
+      >
+        <div
+          v-if="isSelect"
+          class="btn-box"
+        >
+          <el-button
+            @click="selectMultiple"
+            size="small"
+          >
+            确认
+          </el-button>
+        </div>
+        <el-table
+          ref="mTableRef"
+          class="m-table s-table"
+          :data="optionsMap"
+          :size="props.size"
+          :scrollbarAlwaysOn="props.scrollbarAlwaysOn"
+          @currentChange="handleCurrentChange"
+          :rowClassName="tableRowClassName"
+          :rowStyle="tableRowStyle"
+          :cellStyle="tableCellStyle"
+          @selectionChange="handleSelectionChange"
+        >
+          <el-table-column
+            v-if="props.isSelect"
+            type="selection"
+            width="55"
+          />
+          <el-table-column
+            showOverflowTooltip
+            v-for="item in tableTitle"
+            :key="item.prop"
+            :prop="item.prop"
+            :label="item.label"
+            :width="item.width"
+            :minWidth="item.minWidth"
+            :filters="item.filters"
+            :headerAlign="item.headerAlign"
+          >
+            <template #default="scope">
+              {{ optionsMap[scope.$index][item.prop] || '-' }}
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <!--分页-->
+        <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"
+            layout="total, prev, pager, next, sizes"
+            :total="page.total"
+            @currentChange="toPage"
+            @sizeChange="toPage(page.currentPage, $event)"
+          />
+        </div>
+      </div>
+
+      <div
+        v-show="_this.showPanel"
+        :style="mMarkStyle as any"
+        @click="clickOutside"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, computed, watch, nextTick, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Page } from './../../typings/class'
+
+const createHash = (hashLength: number = 24) => {
+  return Array.from(Array(Number(hashLength) || 24), () => Math.floor(Math.random() * 36).toString(36)).join('')
+}
+
+const props = withDefaults(defineProps<{
+  modelValue?: string | number,
+  placeholder?: string,
+  disabled?: boolean,
+  options: Option[],
+  tableTitle: any[],
+  remoteMethod?: Function,
+  allowCreate?: boolean, // 是否创建条目
+  focusShow?: boolean, // 聚焦显示
+  isSelect?: boolean, // 是否多选
+  clearable?: boolean,
+  size?: 'small' | 'large' | '',
+  labelKey?: string, // 显示字段
+  scrollbarAlwaysOn?: boolean, // 总是显示滚动条
+  total?: number | null // 总数据量，当有值时，出现分页器
+}>(), {
+  modelValue: '',
+  placeholder: '请输入',
+  disabled: false,
+  options: () => [],
+  tableTitle: () => [],
+  remoteMethod: () => {},
+  allowCreate: false,
+  focusShow: false,
+  isSelect: false,
+  clearable: false,
+  size: '',
+  labelKey: 'label',
+  scrollbarAlwaysOn: false,
+  total: null
+})
+
+const _this = reactive<{
+  vValue: string | number,
+  vLabel: string | number,
+  oValue: string | number,
+  inputClass: string,
+  masterPieceLoading: boolean,
+  showPanel: boolean, // 显示面板
+  selectedRow: Option | {},
+  boxStyle: any,
+  selectKeys: string[]
+}>({
+  vValue: '',
+  vLabel: '',
+  oValue: '',
+  inputClass: 'j-' + createHash(),
+  masterPieceLoading: false,
+  showPanel: false, // 显示面板
+  selectedRow: {},
+  boxStyle: {
+  },
+  selectKeys: []
+})
+
+const emit = defineEmits(['update:modelValue', 'selectMultiple', 'change', 'selected', 'clear'])
+const optionsMap = computed(() => {
+  const options = props.options.map(item => ({
+    ...item,
+    className: item.disabled ? 's-disabled' : ''
+  }))
+  if (!props.allowCreate || !_this.vValue) return options
+  const checkSame = options.some(item => item.label === _this.vValue)
+  if (checkSame) return options
+  const nodeObj: any = {}
+  props.tableTitle.forEach(key => {
+    nodeObj[key] = null
+  })
+  return [...options, {
+    ...nodeObj,
+    label: _this.vValue,
+    value: '#' + createHash(),
+    className: 's-add'
+    // [props.labelKey]: _this.vValue
+  }
+  ]
+})
+
+const elClassName = 'j-' + createHash(6)
+
+// 分页
+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
+  props.remoteMethod(_this.vValue || '', page)
+}
+
+watch(
+  () => _this.showPanel,
+  () => {
+    const style = {}
+    if (_this.showPanel) {
+      const element = document.querySelector('.' + _this.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 (!_this.showPanel) {
+      Object.assign(style, { opacity: 0 })
+    }
+
+    nextTick(() => {
+      _this.boxStyle = style
+    })
+  }
+)
+
+watch(
+  () => props.modelValue,
+  () => {
+    _this.vValue = props.options.find(item => item.value === props.modelValue)?.label || props.modelValue as string
+  }
+)
+
+watch(() => props.total, () => {
+  page.total = props.total as number
+})
+
+_this.vValue = props.options.find(item => item.value === props.modelValue)?.label || props.modelValue as string
+
+const empty = () => {
+  _this.selectedRow = {}
+  selected()
+  emit('clear')
+}
+
+const handleSelectionChange = (val: string[]) => {
+  _this.selectKeys = val
+}
+
+const mTableRef = ref<any>(null)
+
+const selectMultiple = () => {
+  if (!_this.selectKeys.length) return ElMessage.warning('请勾选数据')
+  const arr = JSON.parse(JSON.stringify(_this.selectKeys))
+  _this.selectKeys = []
+  mTableRef.value.clearSelection()
+  _this.showPanel = false
+  emit('selectMultiple', arr)
+}
+
+const handleCurrentChange = (currentRow: Option) => {
+  if (!currentRow) return false
+  _this.showPanel = false
+  if (currentRow[props.labelKey] !== undefined) {
+    _this.vValue = currentRow[props.labelKey] as string
+  }
+  _this.selectedRow = currentRow
+  selected()
+}
+
+const addRowData = () => {
+  handleCurrentChange(optionsMap.value[optionsMap.value.length - 1])
+}
+
+const selected = () => {
+  emit('update:modelValue', (_this.selectedRow as Option)?.value || '')
+  emit('change', (_this.selectedRow as Option)?.value || '')
+  emit('selected', _this.selectedRow)
+}
+
+const clickOutside = () => {
+  if (!_this.showPanel) return false
+  _this.showPanel = false
+  _this.vValue = (_this.selectedRow as Option)?.label || _this.oValue
+}
+
+/** 关闭 */
+const close = () => {
+  if (!_this.showPanel) return false
+  setTimeout(() => {
+    _this.showPanel = false
+  })
+}
+
+const focus = () => {
+  const elDom = document.querySelector('.' + elClassName)
+  if (elDom) {
+    const clickEvent = new MouseEvent('click', {
+      bubbles: true, // 允许事件冒泡
+      cancelable: true // 允许事件可以被取消
+    })
+    elDom.dispatchEvent(clickEvent)
+  }
+  _this.oValue = _this.vValue
+  if (props.focusShow) {
+    _this.showPanel = true
+    if (props.total !== null) {
+      props.remoteMethod(_this.vValue || '', page)
+    } else {
+      props.remoteMethod(_this.vValue || '')
+    }
+  }
+}
+
+const tableRowClassName = ({ row }: { row: any, rowIndex: number }): string => {
+  return row.className
+}
+
+const tableRowStyle = ({ row }: { row: any, rowIndex: number }): any => {
+  const style: any = {}
+  if (row.className.includes('s-disabled')) {
+    style.color = 'var(--el-disabled-text-color)'
+    style.cursor = 'not-allowed'
+  }
+  if (row.className.includes('s-add')) {
+    style.backgroundColor = 'rgba(135, 208, 104, 0.1)'
+  }
+  return style
+}
+
+const tableCellStyle = ({ row }: { row: any, column: any, rowIndex: number, columnIndex: number }): any => {
+  const style: any = {}
+  if (row.className.includes('s-disabled')) {
+    style.pointerEvents = 'none'
+  }
+  return style
+}
+
+const mTableBoxStyle = {
+  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 mMarkStyle = {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  zIndex: 8,
+  width: '100%',
+  height: '100%'
+}
+
+defineExpose({
+  close
+})
+</script>
+
+<style scoped lang="scss">
+.g-select-table-box {
+  position: relative;
+  line-height: normal;
+
+  .u-input-gp {
+    position: relative;
+    //height: 24px;
+
+    &:hover .el-icon-circle-close {
+      display: block;
+    }
+  }
+
+  .el-icon-circle-close {
+    display: none;
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    font-size: 14px;
+    color: #c0c4cc;
+    transform: translateY(-50%);
+    cursor: pointer;
+
+    &:hover {
+      color: #a4a7ad;
+    }
+  }
+
+  .s-table {
+    width: 100%;
+  }
+}
+
+.btn-box{
+  text-align: right;
+  padding-bottom: 6px;
+}
+
+.m-page {
+  padding-top: 4px;
+}
+</style>
+
+<style lang="scss">
+.g-select-table-box {
+  .u-input-gp .el-input {
+    display: flex;
+  }
+
+  .el-table {
+    --el-table-header-bg-color: var(--m-list-el-table-header-bg-color, #f5f5f5);
+  }
+}
+
+/*标记*/
+//.m-table-box {
+//  position: fixed;
+//  //top: 100%;
+//  //left: 0;
+//  opacity: 0;
+//  z-index: 9;
+//  padding: 8px;
+//  width: 500px;
+//  border: 1px solid var(--el-border-color-lighter, #ebeef5);
+//  -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+//  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+//  background: var(--el-bg-color, #fff);
+//  border-radius: 4px;
+//}
+
+//.m-mask {
+//  position: fixed;
+//  top: 0;
+//  left: 0;
+//  z-index: 8;
+//  width: 100%;
+//  height: 100%;
+//}
+</style>

package/docs/packages/MSelectV2/docs/README.md

@@ -0,0 +1,31 @@
+<script setup>
+import demo from './demo.vue'
+</script>
+
+下拉选择器V2组件
+=================
+
+### 1) 基础用法
+
+<Preview comp-name="MSelectV2" demo-name="demo">
+  <demo />
+</Preview>
+
+### 2) Attributes
+
+| 参数                            |                            说明                             |    类型    | 可选值 |  默认值  |
+|-------------------------------|:---------------------------------------------------------:|:--------:|:---:|:-----:|
+| value / v-model               |                            绑定值                            |  number  |  -  |  ''   |
+| checkbox-mode                 |                      是否为复选框模式（只影响样式）                      | boolean  |  -  | false |
+| multiple                      |                           是否多选                            | boolean  |  -  | false |
+| show-all                      |               是否显示全选选项（只在multiple为true时生效）                | boolean  |  -  | false |
+| options                       |                            选项值                            | Option[] |  -  |  []   |
+| 其他属性同element-plus的el-select组件 | https://element-plus.gitee.io/zh-CN/component/select.html |    -     |  -  |   -   |
+
+#### Option（选项对象）
+
+| 参数       |          说明           |   类型    | 必填 | 可选值 |  默认值  |
+|----------|:---------------------:|:-------:|:--:|:---:|:-----:|
+| label    | 选项的标签，若不设置则默认与value相同 | string  | 否  |  -  |   -   |
+| value    |         选项的值          | number  | 是  |  -  |   -   |
+| disabled |        是否禁用该选项        | boolean | 否  |  -  | false |

package/docs/packages/MSelectV2/docs/demo.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="g-demo-m-select-box">
+    <m-select-v2
+      v-model="test"
+      checkboxMode
+      multiple
+      :options="options"
+      showAll
+    >
+    </m-select-v2>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const test = ref<string>('')
+
+const options: Option[] = [{
+  label: '这是选项一',
+  value: 'a'
+}, {
+  label: '这是选项二',
+  value: 'b'
+}, {
+  label: '这是选项三',
+  value: 'c',
+  disabled: true
+}]
+</script>
+
+<style scoped>
+.g-demo-m-select-box {
+  max-width: 1000px;
+}
+</style>

package/docs/packages/MSelectV2/index.ts

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

package/docs/packages/MSelectV2/src/MSelectV2.vue

@@ -0,0 +1,116 @@
+<template>
+  <el-select
+    v-bind="attrs"
+    :multiple="props.multiple"
+    v-model="modelValue"
+  >
+    <template
+      v-if="showAll && props.multiple"
+      #header
+    >
+      <el-checkbox
+        class="u-checkbox"
+        v-model="checkAll"
+        :indeterminate="indeterminate"
+        @change="handleCheckAll"
+      >
+        全选
+      </el-checkbox>
+    </template>
+    <el-option
+      v-for="item in props.options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+      :disabled="item.disabled"
+    ></el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { provide, useAttrs, ref, watch } from 'vue'
+import { selectKey } from 'packages/MSelect/src/token'
+
+const props = withDefaults(defineProps<{
+  /** @description 是否为checkbox模式 */
+  checkboxMode?: boolean,
+  /** @description 多选 */
+  multiple?: boolean,
+  /** @description 是否显示全选 */
+  showAll?: boolean,
+  /** @description 选项 */
+  options?: Option[]
+}>(), {
+  /** @description 是否为checkbox模式 */
+  checkboxMode: false,
+  /** @description 多选 */
+  multiple: false,
+  /** @description 是否显示全选 */
+  showAll: false,
+  /** @description 选项 */
+  options: () => []
+})
+
+const attrs = useAttrs()
+
+type ValueType = string | number | Array<string | number>
+const modelValue = ref<ValueType>(attrs.modelValue as ValueType)
+watch(
+  () => attrs.modelValue,
+  () => {
+    modelValue.value = attrs.modelValue as ValueType
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [data: any]
+}>()
+
+const checkAll = ref(false)
+const indeterminate = ref(false)
+const handleCheckAll = (val: boolean) => {
+  indeterminate.value = false
+  if (val) {
+    modelValue.value = props.options.filter(item => !item.disabled).map(item => item.value)
+  } else {
+    modelValue.value = []
+  }
+}
+watch(
+  () => modelValue.value,
+  (val) => {
+    if (!Array.isArray(val)) return
+    if (val.length === 0) {
+      checkAll.value = false
+      indeterminate.value = false
+    } else if (val.length === props.options.filter(item => !item.disabled).length) {
+      checkAll.value = true
+      indeterminate.value = false
+    } else {
+      indeterminate.value = true
+    }
+  }
+)
+
+watch(
+  () => modelValue.value,
+  () => {
+    emit('update:modelValue', modelValue.value)
+  }
+)
+
+provide(selectKey, {
+  checkboxMode: props.checkboxMode,
+  modelValue,
+  multiple: props.multiple as boolean
+})
+</script>
+
+<style lang="scss" scoped>
+.u-checkbox {
+  height: var(--el-checkbox-height, 20px)
+}
+</style>
+
+<style lang="scss">
+</style>

package/docs/packages/MTable/docs/README.md

@@ -0,0 +1,40 @@
+<script setup>
+import demo from './demo.vue'
+</script>
+
+表格组件
+=================
+
+### 1) 基础用法
+
+<Preview comp-name="MTable" demo-name="demo">
+  <demo />
+</Preview>
+
+
+### 2) Attributes
+| 参数              |            说明            |    类型    |         可选值          |  默认值 |
+| ----------- | ------- | ---------------------------- |-----|--------|
+|data               |表格的数据                  | Array      |           -            |    [ ]   |
+|sole               |行的唯一值                  |String , number     |    -              |    key  |
+|filtersValue       |表格内容筛选                |Function    |   -                    |  () => void   |
+|其余参数            |参考el官网的table           |any         |        -               |https://element-plus.org/zh-CN/component/table.html|
+## 要求
+```
+sole 必须传递在表格数据内为唯一的值  如id key 等不会发生重复的关键字
+```
+
+### 3) Events
+| 方法名          |     说明      |          回调参数           |
+| ----------- | ------- | ---------------------------- |
+| pasteData      | 表格粘贴方法   |  共有2个参数,依次为粘贴动作的数据PasteAction ,表格原始数据tableData |
+|其余方法          |参考el官网的table           |https://element-plus.org/zh-CN/component/table.html|
+
+### 4) PasteAction
+|参数  |  说明  | 类型  | 
+|-----|-------|-------|
+|editRow|返回粘贴的对应行的原始数据|Object|
+|editColumn|返回粘贴时鼠标所在列的 表格prop值|String|
+|arr|返回粘贴时候处理之后的 数组信息|Array|
+|rowIndex|根据sole的值 去data内查找   当前操作的 粘贴行在data内的序号|number|
+