br-dionysus 1.16.8 → 1.17.1

package/packages/MSelectTable/docs/DemoTest6.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <h5>多选，允许创建条目</h5>
+    <p>选择器的值： {{ code }}</p>
+    <m-select-table
+      class="u-select"
+      v-model="code"
+      :tableTitle="commodityOptionsTitle"
+      :options="options"
+      :keywords="{ label: 'ApprovedQtyPU', value: 'DocNo' }"
+      :total="total"
+      scrollbarAlwaysOn
+      filterable
+      remote
+      multiple
+      border
+      allowCreate
+      :remoteMethod="remoteMethod"
+      @selectChange="selectChange"
+      @selectMultiple="selectMultiple"
+      @toPage="toPage"
+    ></m-select-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Page } from './../../typings/class'
+
+const commodityOptionsTitle: TableTitle[] = [{
+  prop: 'PRDocType',
+  label: '单据类型'
+}, {
+  prop: 'DocNo',
+  label: '请购单号'
+}, {
+  prop: 'ApprovedQtyPU',
+  label: '名称'
+}, {
+  prop: 'ACCode',
+  label: '货币'
+}]
+
+const code = 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'
+  })
+}
+
+setTimeout(() => {
+  options.value = [{
+    PRDocType: 'xxxPRDocType1',
+    DocNo: 1,
+    ApprovedQtyPU: 'xxxApprovedQtyPU1',
+    ACCode: 'xxxACCode1'
+  }, {
+    PRDocType: 'xxxPRDocType2',
+    DocNo: 2,
+    ApprovedQtyPU: 'xxxApprovedQtyPU2',
+    ACCode: 'xxxACCode2'
+  }]
+}, 100)
+
+const toPage = (page: Page, str: any) => {
+  getData(str, page)
+}
+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 selectChange = (value: string | number | Array<number | string>) => {
+  console.log('选择变化事件触发，注意，绑定值没有发生变化', value)
+}
+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)
+  })
+}
+</script>
+
+<style>
+.u-select {
+  width: 240px;
+}
+</style>

package/packages/MSelectTable/docs/README.md

@@ -63,8 +63,8 @@ import demo from './demo.vue'
 | toPage         | 当没有使用filterMethod时候才会有回调否则没有 | page 表格分页                                                     |
 | selectMultiple | 多选确认按钮时的回调 配合isAffirmBtn使用   | (values: Array<string \| number>, rows: Option[])             |
 | clear          | 用户点击清空按钮时触发                  | -                                                             |
-| removeTag      | 多选模式下移除tag时触发                | (tag: any)    
-| selectChange   | 勾选值发生变化触发               | (value: any)                                                    |                                                |
+| removeTag      | 多选模式下移除tag时触发                | (tag: any)                                                    |
+| selectChange   | 勾选数据change事件，选中值不发生变化        | (value: any)                                                  |
 
 ### 4)  Methods
 
@@ -90,6 +90,6 @@ import demo from './demo.vue'
 
 #### slots（插槽）
 
-| 插槽名         | 描述     |
-|-------------|--------|
-| auxiliary | 在表格选择器头部位置的辅助信息插槽 | 
+| 插槽名       | 描述                |
+|-----------|-------------------|
+| auxiliary | 在表格选择器头部位置的辅助信息插槽 | 

package/packages/MSelectTable/docs/demo.vue

@@ -7,6 +7,10 @@
     <DemoTest3></DemoTest3>
     <el-divider />
     <DemoTest4></DemoTest4>
+    <el-divider />
+    <DemoTest5></DemoTest5>
+    <el-divider />
+    <DemoTest6></DemoTest6>
   </div>
 </template>
 
@@ -15,6 +19,8 @@ import DemoTest1 from 'packages/MSelectTable/docs/DemoTest1.vue'
 import DemoTest2 from 'packages/MSelectTable/docs/DemoTest2.vue'
 import DemoTest3 from 'packages/MSelectTable/docs/DemoTest3.vue'
 import DemoTest4 from 'packages/MSelectTable/docs/DemoTest4.vue'
+import DemoTest5 from 'packages/MSelectTable/docs/DemoTest5.vue'
+import DemoTest6 from 'packages/MSelectTable/docs/DemoTest6.vue'
 </script>
 
 <style>