br-dionysus 1.6.6 → 1.6.7

package/docs/packages/MSelect/src/MOption.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-option v-bind="attrs">
+    <div
+      class="u-group"
+      v-if="selectData?.checkboxMode"
+    >
+      <el-checkbox
+        class="u-checkbox"
+        v-model="checkboxValue"
+        :disabled="attrs.disabled"
+      />
+      <slot>
+        <span>{{ attrs.label }}</span>
+      </slot>
+    </div>
+  </el-option>
+</template>
+
+<script setup lang="ts">
+import { inject, useAttrs, computed } from 'vue'
+import { selectKey } from 'packages/MSelect/src/token'
+
+const attrs = useAttrs()
+
+const selectData = inject(selectKey)
+const checkboxValue = computed(() => {
+  if (selectData?.multiple && Array.isArray(selectData?.modelValue?.value)) return selectData?.modelValue?.value?.includes(attrs.value as string | number)
+  return selectData?.modelValue.value === attrs.value
+})
+</script>
+
+<style scoped lang="scss">
+.u-group {
+  display: flex;
+  align-items: center;
+
+  .u-checkbox {
+    padding-right: 4px;
+    pointer-events: none;
+    margin-right: 0;
+  }
+}
+</style>

package/docs/packages/MSelect/src/MSelect.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-select
+    v-bind="attrs"
+    :multiple="props.multiple"
+  >
+    <slot></slot>
+    <template
+      v-for="(slot, name) in $slots"
+      #[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      ></slot>
+    </template>
+  </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<{
+  /** 是否为checkbox模式 */
+  checkboxMode?: boolean,
+  /** 多选 */
+  multiple?: boolean
+  // /** 是否显示全选 */
+  // showAll?: boolean
+}>(), {
+  checkboxMode: false,
+  multiple: false
+  // showAll: false
+})
+
+const attrs = useAttrs()
+
+const modelValue = ref<string | number>(attrs.modelValue as string | number)
+watch(
+  () => attrs.modelValue,
+  () => {
+    modelValue.value = attrs.modelValue as string | number
+  }
+)
+
+provide(selectKey, {
+  checkboxMode: props.checkboxMode,
+  modelValue,
+  multiple: props.multiple as boolean
+})
+</script>
+
+<style lang="scss" scoped>
+</style>
+
+<style lang="scss">
+</style>

package/docs/packages/MSelect/src/token.ts

@@ -0,0 +1,8 @@
+import { InjectionKey } from 'vue'
+import type { Ref } from 'vue'
+
+export const selectKey: InjectionKey<{
+  checkboxMode: boolean,
+  modelValue: Ref<string | number | Array<string | number>>,
+  multiple: boolean
+}> = Symbol('selectKey')

package/docs/packages/MSelectTable/docs/README.md

@@ -0,0 +1,88 @@
+<script setup>
+import demo from './demo.vue'
+</script>
+
+下拉表格选择器
+=================
+
+### 1) 基础用法
+
+<Preview comp-name="MSelectTable" demo-name="demo">
+  <demo />
+</Preview>
+
+### 2)  Attributes
+
+| 参数                | 说明                                                       | 类型                                  | 可选                        | 是否必填 | 默认值                             |
+|-------------------|----------------------------------------------------------|-------------------------------------|---------------------------|:----:|---------------------------------|
+| value / v-model   | 绑定值                                                      | number,string, Array<number,string> | -                         |  否   | ''                              |
+| name              | 显示值，有值时覆盖所有显示逻辑，直接显示name                                 | number,string, Array<number,string> | -                         |  否   | ''                              |
+| placeholder       | 占位符                                                      | string                              | -                         |  否   | 请选择                             |
+| disabled          | 是否禁用                                                     | boolean                             | -                         |  否   | false                           |
+| size              | 大小                                                       | enum                                | large \| default \| small |  否   | default                         |
+| options           | 下拉表的 表内数据,详情见Option接口                                    | Option[]                            | -                         |  否   | []                              |
+| total             | 总数量 当有值时，出现分页器                                           | number                              | null                      |  否   | null                            |
+| filterMethod      | 自定义搜索方法   (使用时必须传递filterable)                            | Function                            | null                      |  否   | null                            |
+| filterable        | 是否开启筛选    (如果开启但没有传递自定义搜索方法 效果为筛选当前页数据的 keywords[label]) | boolean                             | -                         |  否   | false                           |
+| remote            | 是否使用远程搜索                                                 | boolean                             | -                         |  否   | false                           |
+| remoteMethod      | 自定义远程搜索方法 (使用时必须传递filterable和remote)                     | Function                            | -                         |  否   | {}                              |
+| tableTitle        | 下拉表的 表头定义,详情见TableTitle接口                                | TableTitle[]                        | -                         |  否   | []                              |
+| multiple          | 是否开启多选                                                   | boolean                             | -                         |  否   | false                           |
+| keywords          | 关键字配置（value-key 配置）映射关键字                                 | Option                              | -                         |  否   | {label: 'label' ,value:'value'} |
+| reserveSelection  | 是否打开翻页多选      需要是多选才有效                                   | boolean                             | -                         |  否   | false                           |
+| tableHeight       | 表格高度                                                     | string                              | number                    |  否   | 200                             |
+| isAffirmBtn       | 是否有确认按钮  当使用此按钮时    selected事件无效 需使用selectMultiple事件     | boolean                             | -                         |  否   | false                           |
+| scrollbarAlwaysOn | 是否常态显示滚动条                                                | boolean                             | -                         |  否   | false                           |
+| allowCreate       | 是否能够创建条目                                                 | boolean                             | -                         |  否   | false                           |
+| popupWidth        | 弹窗的宽度                                                    | string,number                       | -                         |  否   | 500                             |
+| border            | 表格边框                                                     | boolean                             | -                         |  否   | false                           |
+
+#### Options（选项接口）
+
+| 参数                  |          说明           |        类型         | 可选值 | 是否必填 |
+|---------------------|:---------------------:|:-----------------:|:---:|:----:|
+| label               | 选项的标签，若不设置则默认与value相同 |      string       |  -  |  是   |
+| value               |         选项的值          | string  \| number |  -  |  是   |
+| disabled            |        是否禁用该选项        |      boolean      |  -  |  否   |
+| \[propName: string] |         额外字段          | string  \| number |  -  |  否   |
+
+#### Page (分页对象)
+
+| 参数               | 说明      | 类型       |
+|------------------|---------|----------|
+| total            | 总数      | number   |
+| pageSize         | 分页大小    | number   |
+| currentPage      | 页码      | number   |
+| pageSizesOptions | 分页大小可选项 | number[] |
+
+### 3)  events
+
+| 事件名            | 说明                           | 回调参数                                                          |
+|----------------|------------------------------|---------------------------------------------------------------|
+| selected       | 单选或多选之后的回调                   | 根据多选和单选的模式不同 返回的也有所区别  单选为  (value,row)  多选为(values[],rows[]) |
+| toPage         | 当没有使用filterMethod时候才会有回调否则没有 | page 表格分页                                                     |
+| selectMultiple | 多选确认按钮时的回调 配合isAffirmBtn使用   | (values: Array<string \| number>, rows: Option[])             |
+| clear          | 用户点击清空按钮时触发                  | -                                                             |
+| removeTag      | 多选模式下移除tag时触发                | (tag: any)                                                    |
+
+### 4)  Methods
+
+| 方法名                  | 说明                                                                       |
+|----------------------|--------------------------------------------------------------------------|
+| defaultBackFillValue | 手动重载反填 使用场景 当前开启多选 并且开启翻页多选的时候 这个时候需要默认反填上值的话 需要赋值之后 延迟调用此方法  其余场景 为默认反填 |
+| clear                | 清空已选择                                                                    |
+| focus                | 聚焦下拉框                                                                    |
+
+#### filterMethod
+
+| 返回值         | 类型     | 说明     |
+|-------------|--------|--------|
+| searchValue | string | 返回输入的值 |
+| Page        | Page   | 整个分页类  |
+
+#### remoteMethod
+
+| 返回值         | 类型     | 说明     |
+|-------------|--------|--------|
+| searchValue | string | 返回输入的值 |
+| Page        | Page   | 整个分页类  |

package/docs/packages/MSelectTable/docs/demo.vue

@@ -0,0 +1,196 @@
+<template>
+  <div>
+    <p>多选</p>
+    <p>第一个选择器的值： {{ code }}</p>
+    <m-select-table
+      class="u-select"
+      ref="selectRef"
+      v-model="code"
+      placeholder="请选择单号"
+      :tableTitle="commodityOptionsTitle"
+      :options="options"
+      :keywords="{ label: 'ApprovedQtyPU', value: 'DocNo' }"
+      @selected="selected"
+      @selectMultiple="selectMultiple"
+      tableHeight="200"
+      @toPage="toPage"
+      :total="total"
+      scrollbarAlwaysOn
+      filterable
+      remote
+      multiple
+      allowCreate
+      border
+      :remoteMethod="remoteMethod"
+    ></m-select-table>
+    <p>多选单绑定的value为字符串类型</p>
+    <p>第二个选择器的值： {{ code2 }}</p>
+    <m-select-table
+      class="u-select"
+      ref="selectRef"
+      v-model="code2"
+      :name="code2Name"
+      placeholder="请选择单号"
+      :tableTitle="commodityOptionsTitle"
+      :options="options"
+      :keywords="{ label: 'ApprovedQtyPU', value: 'DocNo' }"
+      @selected="selected"
+      @selectMultiple="selectMultiple"
+      tableHeight="200"
+      @toPage="toPage"
+      :total="total"
+      scrollbarAlwaysOn
+      filterable
+      remote
+      multiple
+      border
+      :remoteMethod="remoteMethod"
+    ></m-select-table>
+    <p>单选</p>
+    <p>第三个择器的值： {{ code3 }}</p>
+    <m-select-table
+      class="u-select"
+      ref="selectRef"
+      v-model="code3"
+      placeholder="请选择单号"
+      :tableTitle="commodityOptionsTitle"
+      :options="options"
+      :keywords="{ label: 'ApprovedQtyPU', value: 'DocNo' }"
+      @selected="selected"
+      @selectMultiple="selectMultiple"
+      tableHeight="200"
+      @toPage="toPage"
+      :total="total"
+      scrollbarAlwaysOn
+      filterable
+      remote
+      allowCreate
+      :remoteMethod="remoteMethod"
+      :popupWidth="800"
+    ></m-select-table>
+    <!--<el-select-->
+    <!--  v-model="code2"-->
+    <!--  multiple-->
+    <!--&gt;-->
+    <!--  <el-option-->
+    <!--    v-for="item in options"-->
+    <!--    :key="item.DocNo"-->
+    <!--    :label="item.ApprovedQtyPU"-->
+    <!--    :value="item.DocNo"-->
+    <!--  ></el-option>-->
+    <!--</el-select>-->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { Page } from 'packages/typings/class'
+
+const commodityOptionsTitle: TableTitle[] = [{
+  prop: 'PRDocType',
+  label: '单据类型'
+  // minWidth: 200
+}, {
+  prop: 'DocNo',
+  label: '请购单号'
+  // minWidth: 200
+}, {
+  prop: 'ApprovedQtyPU',
+  // minWidth: 300,
+  label: '名称'
+
+}, {
+  prop: 'ACCode',
+  label: '货币'
+  // minWidth: 200
+}]
+const selectRef: any = ref<HTMLElement | null>(null)
+
+const code = ref<string | number | Array<string | number>>([])
+const code2 = ref<string | number | Array<string | number>>('')
+const code2Name = ref<string | number | Array<string | number>>([])
+const code3 = ref<string | number | Array<string | number>>('')
+
+const total = ref(0)
+const options = ref<any[]>([])
+const mockData: any[] = []
+for (let i = 0; i < 1000; i++) {
+  mockData.push({
+    PRDocType: '测试数据' + (i + 1),
+    DocNo: i + 1,
+    ApprovedQtyPU: 'ApprovedQtyPU' + (i + 1),
+    ACCode: 'ACCode'
+  })
+}
+const getDataList = (page: Page = new Page(), str: string = '') => {
+  setTimeout(() => {
+    options.value = mockData.filter(item => item.PRDocType.includes(str)).slice(0, page.pageSize)
+    total.value = mockData.length
+  })
+}
+
+setTimeout(() => {
+  options.value = [{
+    PRDocType: 'xxxPRDocType1',
+    DocNo: 1,
+    ApprovedQtyPU: 'xxxApprovedQtyPU1',
+    ACCode: 'xxxACCode1'
+  }, {
+    PRDocType: 'xxxPRDocType2',
+    DocNo: 2,
+    ApprovedQtyPU: 'xxxApprovedQtyPU2',
+    ACCode: 'xxxACCode2'
+  }]
+  code.value = [1, 2]
+  code2.value = ''
+  code2Name.value = ['xxxApprovedQtyPU2', 'xxxApprovedQtyPU3', 'xxxApprovedQtyPU4']
+  code3.value = 1
+
+  // setTimeout(() => {
+  //   options.value = []
+  // }, 2500)
+}, 1000)
+
+const selected = (value: string | number | Array<number | string>) => {
+  // console.log(value)
+  // code.value = value
+  // console.log('selected',value)
+  // // console.log('selected', row)
+}
+
+const toPage = (page: Page, str: any) => {
+  getDataList(page, str)
+}
+const selectMultiple = (value: string | number | Array<number | string>) => {
+  code.value = value
+}
+
+const remoteMethod = async (query: string, page: Page = new Page()) => {
+  await getData(query, page)
+}
+const getData = async (query: string, page: any) => {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      const start = (page.currentPage - 1) * page.pageSize
+      options.value = mockData.filter(item => item.PRDocType.includes(query)).slice(start, start + page.pageSize)
+      total.value = mockData.length
+      resolve()
+    }, 500)
+  })
+}
+
+onMounted(() => {
+  getDataList()
+})
+// const filterMethod = (searchValue: string, page: Page) => {
+//   // 手动过滤的得 保留一份原始数据
+//   const arr = JSON.parse(JSON.stringify(options.value))
+//   options.value = arr.filter((item: any) => item.ApprovedQtyPU.toString().includes(searchValue))
+// }
+</script>
+
+<style>
+.u-select {
+  width: 240px;
+}
+</style>

package/docs/packages/MSelectTable/index.ts

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