br-dionysus 0.3.2 → 0.3.4

package/packages/MInline/src/index.vue

@@ -40,12 +40,12 @@ import { ref, onMounted, useSlots, watch } from 'vue'
 
 const props = withDefaults(defineProps<{
   /** 列最小宽度 */
-  minWidth?: string,
+  minWidth?: number,
   /** 列最大宽度 */
-  maxWidth?: string
+  maxWidth?: number
 }>(), {
-  minWidth: '200px',
-  maxWidth: '300px'
+  minWidth: 290,
+  maxWidth: 400
 })
 
 const createHash = (hashLength: number = 24) => {
@@ -53,8 +53,8 @@ const createHash = (hashLength: number = 24) => {
 }
 
 const init = () => {
-  document.documentElement.style.setProperty('--m-inline-min-width', props.minWidth)
-  document.documentElement.style.setProperty('--m-inline-max-width', props.maxWidth)
+  document.documentElement.style.setProperty('--m-inline-min-width', props.minWidth + 'px')
+  document.documentElement.style.setProperty('--m-inline-max-width', props.maxWidth + 'px')
 }
 watch(
   () => [props.minWidth, props.maxWidth],
@@ -75,7 +75,7 @@ const checkMultiLine = () => {
   const boxEl: Element | null = document.querySelector('.' + boxClassName + ' [data-box]')
   if (!boxEl) return false
   const itemEls: NodeListOf<Element> = boxEl.querySelectorAll('.' + boxClassName + ' [data-item]')
-  return boxEl.clientWidth < itemEls.length * 200
+  return boxEl.clientWidth < itemEls.length * props.minWidth
 }
 
 const resizeObserver = new ResizeObserver(() => {

package/packages/MSelectTable/docs/README.md

@@ -0,0 +1,35 @@
+<script setup>
+import demo from './demo.vue'
+</script>
+
+# 下拉表格选择器
+=================
+
+### 1) 基础用法
+<Preview comp-name="MSelectTable" demo-name="demo">
+  <demo />
+</Preview>
+
+### 2) Attributes
+
+| 参数               |        说明         |   类型    |        可选值         |    默认值    |
+|------------------|:-----------------:|:-------:|:------------------:|:---------:|
+| value / v-model  |        绑定值        | number  |         -          |    ''     |
+| min              |   设置数值输入框允许的最小值   | number  |         -          | -Infinity |
+| max              |   设置数值输入框允许的最大值   | number  |         -          | Infinity  |
+| step             |      数值输入框步长      | number  |         -          |     1     |
+| step-strictly    |  是否只能输入 step 的倍数  | boolean |         -          |   true    |
+| size             |      数值输入框尺寸      | string  | large, small, mini |     -     |
+| disabled         |     是否禁用数值输入框     | boolean |         -          |   false   |
+| placeholder      | 输入框默认 placeholder | string  |         -          |    ''     |
+| thousandth-place |    输入框是否显示千分位     | boolean |         -          |   false   |
+| no-border        |      是否不要边框       | boolean |         -          |   false   |
+| no-spacing       |       不要边距        | boolean |         -          |   false   |
+
+### 3) Events
+
+| 方法名    |       说明        |           参数           |
+|--------|:---------------:|:----------------------:|
+| change |    绑定值被改变时触发    | currentValue, oldValue |
+| focus  | 当 input 获得焦点时触发 |     (event: Event)     |
+| blur   | 当 input 失去焦点时触发 |     (event: Event)     |

package/packages/MSelectTable/docs/demo.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="g-m-select-table-box">
+    <m-select-table
+      v-model="code"
+      placeholder="请选择单号"
+      :remoteMethod="remoteMethod"
+      :options="options"
+      :tableTitle="commodityOptionsTitle"
+      focusShow
+    ></m-select-table>
+
+    <div class="m-box">
+      <p class="u-tt">tt</p>
+      <div class="u-test"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+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'
+}, {
+  sn: 'SC201564981243',
+  fileName: '测试文件3.zip',
+  createdUserName: '绫波丽',
+  createdTimeStr: '2024-05-06'
+}, {
+  sn: 'SC201564981244',
+  fileName: '测试文件4.zip',
+  createdUserName: '绫波丽',
+  createdTimeStr: '2024-05-06'
+}]
+
+const remoteMethod = async (query: string = '') => {
+  options.value = mockData.map(item => ({
+    label: item.fileName,
+    value: item.sn,
+    sn: item.sn,
+    fileName: item.fileName,
+    createdUserName: item.createdUserName,
+    createdTimeStr: item.createdTimeStr
+  }))
+}
+</script>
+
+<style lang="scss">
+.m-box {
+  overflow: auto;
+  position: relative;
+  width: 20px;
+  height: 100px;
+  border: 1px solid #00ff00;
+
+  .u-tt {
+    position: absolute;
+    top: 0;
+  }
+
+  .u-test {
+    height: 300px;
+  }
+}
+</style>

package/packages/MSelectTable/index.ts

@@ -0,0 +1,10 @@
+import { App, Plugin } from 'vue'
+import MSelectTable from './src/index.vue'
+
+export const MSelectTablePlugin: Plugin = {
+  install(app: App) {
+    app.component('m-select-table', MSelectTable)
+  }
+}
+
+export { MSelectTable }

package/packages/MSelectTable/src/index.vue

@@ -0,0 +1,392 @@
+<template>
+  <div class="g-box g-select-table-box">
+    <div class="u-input-gp">
+      <el-input
+        v-model="_this.vValue"
+        :class="_this.inputClass"
+        :size="props.size"
+        :placeholder="props.placeholder"
+        @input="remoteMethod($event);_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>
+
+    <div
+      class="m-table-box"
+      v-show="_this.showPanel"
+      :style="_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="small"
+        @currentChange="handleCurrentChange"
+        :rowClassName="tableRowClassName"
+        @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
+          :pageSizes="page.pageSizesOptions"
+          layout="total, prev, pager, next, sizes"
+          :total="page.total"
+          @currentChange="toPage"
+          @sizeChange="toPage(page.currentPage, $event)"
+        />
+      </div>
+    </div>
+
+    <div
+      class="m-mask"
+      v-show="_this.showPanel"
+      @click="clickOutside"
+    />
+  </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' | '',
+  total?: number | null // 总数据量，当有值时，出现分页器
+}>(), {
+  modelValue: '',
+  placeholder: '请输入',
+  disabled: false,
+  options: () => [],
+  tableTitle: () => [],
+  remoteMethod: () => {},
+  allowCreate: false,
+  focusShow: false,
+  isSelect: false,
+  clearable: false,
+  size: '',
+  total: null
+})
+
+const _this = reactive<{
+  vValue: string,
+  vLabel: string,
+  oValue: string,
+  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'])
+
+const optionsMap = computed(() => {
+  if (!props.allowCreate || !_this.vValue) return props.options
+  const checkSame = props.options.some(item => item.label === _this.vValue)
+  if (checkSame) return props.options
+  const nodeObj: any = {}
+  props.tableTitle.forEach(key => {
+    nodeObj[key] = null
+  })
+  return [...props.options, {
+    ...nodeObj,
+    label: _this.vValue,
+    value: '#' + createHash(),
+    className: 's-add'
+    // [props.labelKey]: _this.vValue
+  }
+  ]
+})
+
+// 分页
+const page = reactive<Page>(new Page({
+  total: 0,
+  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()
+}
+
+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
+  _this.vValue = currentRow?.label || ''
+  _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
+  _this.showPanel = false
+}
+
+const focus = () => {
+  _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 }: any) => {
+  return row.className
+}
+
+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;
+    }
+  }
+
+  .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%;
+  }
+
+  .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 {
+  .s-add {
+    background-color: rgba(135, 208, 104, 0.1);
+  }
+
+  .u-input-gp .el-input {
+    display: flex;
+  }
+
+  .el-table {
+    --el-table-header-bg-color: var(--m-list-el-table-header-bg-color, #f5f5f5);
+  }
+}
+</style>

package/packages/index.ts

@@ -8,6 +8,8 @@ import { TabPagePlugin } from './TabPage'
 import { MInputNumberPlugin } from './MInputNumber'
 import { MInlinePlugin } from './MInline'
 import { SkinConfigPlugin } from 'packages/SkinConfig'
+import { MSelectTablePlugin } from 'packages/MSelectTable'
+import hook from 'packages/Hook'
 
 const BrPlugin: Plugin = {
   install(app: App) {
@@ -17,6 +19,7 @@ const BrPlugin: Plugin = {
     MInputNumberPlugin.install?.(app)
     MInlinePlugin.install?.(app)
     SkinConfigPlugin.install?.(app)
+    MSelectTablePlugin.install?.(app)
   }
 }
 
@@ -28,3 +31,6 @@ export * from './TabPage'
 export * from './MInputNumber'
 export * from './MInline'
 export * from './SkinConfig'
+export * from './MSelectTable'
+
+export { hook }

package/packages/list.json

@@ -34,5 +34,11 @@
     "compZhName": "皮肤设置",
     "compDesc": "这是一个皮肤设置组件",
     "compClassName": "skin-cConfig"
+  },
+  {
+    "compName": "MSelectTable",
+    "compZhName": "下拉表格选择器",
+    "compDesc": "这是一个下拉表格选择器组件",
+    "compClassName": "m-select-table"
   }
 ]

package/packages/typings/class.ts

@@ -0,0 +1,22 @@
+/** 分页 */
+export class Page {
+  /** 总数 */
+  total: number
+  /** 分页大小 */
+  pageSize: number
+  /** 页码 */
+  currentPage: number
+  /** 分页大小可选项 */
+  pageSizesOptions: number[]
+
+  constructor ({ total = 100, pageSize = 50, currentPage = 1, pageSizesOptions = [50, 100, 300, 500, 800] } = {}) {
+    /** 总数 */
+    this.total = total
+    /** 分页大小 */
+    this.pageSize = pageSize
+    /** 页码 */
+    this.currentPage = currentPage
+    /** 分页大小可选项 */
+    this.pageSizesOptions = pageSizesOptions
+  }
+}

package/packages/typings/enum.ts

@@ -0,0 +1,75 @@
+/** 表单标识 */
+export enum FormTag {
+  /** 要货需求(请购) */
+  PR = 'PR',
+  /** 采购(采购) */
+  PO = 'PO',
+  /** 销售单(销售) */
+  SO = 'SO',
+  /** 需求汇总(汇总请购单) */
+  CR = 'CR',
+  /** 调价单(调价单) */
+  TJ = 'TJ',
+  /** 入库单 */
+  RD = 'RD',
+}
+
+/** 单据状态枚举 */
+export enum BillStatus {
+  /** 草稿 */
+  DRAFT = 0,
+
+  /** 待提交 */
+  WAIT = 1,
+
+  /** 已提交 */
+  SUBMIT = 2,
+
+  /** 已审核 */
+  REVIEWED = 3,
+
+  /** 已生效 */
+  EFFECTIVE = 4,
+
+  /** 已失效 */
+  EXPIRED = 5,
+
+  /** 已终止 */
+  TERMINATED = 6,
+
+  /** 已关闭 */
+  CLOSED = 7
+}
+
+/** 流程实例状态枚举 */
+export enum FlowStatus {
+  /** 保存 */
+  SAVE = 0,
+
+  /** 处理 */
+  REVIEWED = 1,
+
+  /** 通过 */
+  EFFECTIVE = 2,
+
+  /** 驳回 */
+  EXPIRED = 3,
+
+  /** 撤销 */
+  TERMINATED = 4,
+
+  /** 终止 */
+  CLOSED = 5
+}
+
+/** 首尾页标识枚举 */
+export enum FirstOrLast {
+  /** 只有一页 */
+  ONE = 'one',
+  /**  首页 */
+  FIRST = 'First',
+  /**  尾页 */
+  LAST = 'Last',
+  /** 其他 */
+  OTHER = 'other'
+}