br-dionysus 1.17.6 → 1.18.0

package/packages/MSelectTable/docs/DemoTest6.vue

@@ -7,7 +7,7 @@
       v-model="code"
       :tableTitle="commodityOptionsTitle"
       :options="options"
-      :keywords="{ label: 'ApprovedQtyPU', value: 'DocNo' }"
+      :keywords="{ label: 'name', value: 'sn' }"
       :total="total"
       scrollbarAlwaysOn
       filterable
@@ -26,73 +26,58 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { Page } from './../../typings/class'
+import { Book, BookList } from '../../../mock/mockData/book'
+import { getBookList } from '../../../mock'
 
-const commodityOptionsTitle: TableTitle[] = [{
-  prop: 'PRDocType',
-  label: '单据类型'
+const commodityOptionsTitle: TableTitle<Book>[] = [{
+  prop: 'sn',
+  label: '编码'
 }, {
-  prop: 'DocNo',
-  label: '请购单号'
+  prop: 'name',
+  label: '书名'
 }, {
-  prop: 'ApprovedQtyPU',
-  label: '名称'
+  prop: 'author',
+  label: '作者'
 }, {
-  prop: 'ACCode',
-  label: '货币'
+//   prop: 'address',
+//   label: '发行地'
+// }, {
+  prop: 'date',
+  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'
-  })
-}
+const total = ref<number>(0)
+const options = ref<BookList>([])
 
 setTimeout(() => {
-  options.value = [{
-    PRDocType: 'xxxPRDocType1',
-    DocNo: 1,
-    ApprovedQtyPU: 'xxxApprovedQtyPU1',
-    ACCode: 'xxxACCode1'
-  }, {
-    PRDocType: 'xxxPRDocType2',
-    DocNo: 2,
-    ApprovedQtyPU: 'xxxApprovedQtyPU2',
-    ACCode: 'xxxACCode2'
-  }]
+  options.value = [
+    { id: 4, name: '西游记', date: '2023-10-27 14:22:45', author: '吴承恩', address: '中国 江苏', sn: 'sn2310270004' },
+    { id: 5, name: '水浒传', date: '2023-10-28 18:33:02', author: '施耐庵', address: '中国 山东', sn: 'sn2310280005' }
+  ]
 }, 100)
 
 const toPage = (page: Page, str: any) => {
-  getData(str, page)
+  remoteMethod(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 res = await getBookList({
+    keyword: query,
+    page: page.currentPage,
+    pageSize: page.pageSize
+  })
+  options.value = res.data?.rows ?? []
+  total.value = res.data?.total ?? 0
 }
 
 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>

package/packages/MSelectTable/docs/README.md

@@ -36,6 +36,7 @@ import demo from './demo.vue'
 | allowCreate       | 是否能够创建条目                                                 | boolean                             | -                         |  否   | false                           |
 | popupWidth        | 弹窗的宽度                                                    | string,number                       | -                         |  否   | 500                             |
 | border            | 表格边框                                                     | boolean                             | -                         |  否   | false                           |
+| keywords          | 定义默认的 label 和value                                       | { label: string, value: string }    | -                         |  否   | { label: label, value: value }  |
 
 #### Options（选项接口）
 

package/packages/MSelectTable/src/MSelectTable.vue

@@ -277,7 +277,7 @@ const mMarkStyle = {
 }
 
 /** 表格组件对象 */
-const selectTableRef = ref<InstanceType<typeof ElTable> | null>(null)
+const selectTableRef = ref<any | null>(null)
 
 // 组件内使用自定义
 const state = reactive<{
@@ -379,7 +379,7 @@ const addTag = () => {
 }
 
 // 直接跟输入框绑定
-const selectModelValue = ref<string | number | Array<number | string>>(props.multiple ? [] : '')
+const selectModelValue = ref<string | number | Array<number | string> | any>(props.multiple ? [] : '')
 watch(
   () => props.name,
   () => {
@@ -499,7 +499,7 @@ const defaultBackFillValue = () => {
       newArr.forEach((row) => {
         const arr = tabDataMap.value.filter(item => item[props.keywords.value] === row[props.keywords.value])
         if (!arr.length) return false
-        selectTableRef.value.toggleRowSelection(arr[0], true)
+        selectTableRef.value?.toggleRowSelection(arr[0], true)
       })
       isBackFill.value = false
     })
@@ -507,7 +507,7 @@ const defaultBackFillValue = () => {
     const item = tabDataMap.value.find(item => props.modelValue === item[props.keywords.value])
     if (!item) return false
     nextTick(() => {
-      selectTableRef.value.setCurrentRow(item, true)
+      selectTableRef.value?.setCurrentRow(item, true)
       isBackFill.value = false
     })
   }
@@ -580,11 +580,11 @@ const clearLoading = ref<boolean>(false)
 // 清空后的回调
 const clear = () => {
   if (props.multiple) {
-    selectTableRef.value.clearSelection()
+    selectTableRef.value?.clearSelection()
     modelValue.value = []
   } else {
     // 取消高亮
-    selectTableRef.value.setCurrentRow()
+    selectTableRef.value?.setCurrentRow()
     modelValue.value = ''
   }
   clearLoading.value = true
@@ -644,7 +644,10 @@ const focus = () => {
     isVisible.value = true
   }, 150)
 }
+
+// 删除搜索值时，也需要清空选择状态
 const changeBlur = () => {
+  if (selectModelValue.value === '') clear()
 }
 // 触发select隐藏
 // const blur = () => {

package/packages/MTable/docs/DemoTest4.vue

@@ -12,7 +12,6 @@
       :data="tableData"
       border
       scrollbarAlwaysOn
-      showSelectionCellStatus
       v-model:selectionCell="selectionCell"
     >
       <MTableColumn

package/packages/MTable/docs/DemoTest6.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <h5>选中单元格</h5>
+    <p>selectionCell: {{ selectionCell }}</p>
+    <MTable
+      :data="tableData"
+      border
+      scrollbarAlwaysOn
+      v-model:selectionCell="selectionCell"
+    >
+      <el-table-column
+        fixed="left"
+        type="selection"
+      />
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :isBatchEdit="item.isBatchEdit"
+        showOverflowTooltip
+      ></MTableColumn>
+    </MTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MTableColumn } from './../../MTableColumn'
+
+const tableData = ref<Record<string, string | number>[]>([])
+tableData.value = [{
+  id: 1,
+  sn: 1,
+  date: '2016-05-03',
+  name: 'Tom1',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Home',
+  pid: 0,
+  qty: 10
+}, {
+  id: 2,
+  sn: 2,
+  date: '2016-05-02',
+  name: 'Tom2',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 101
+}, {
+  id: 3,
+  sn: 3,
+  date: '2016-05-04',
+  name: 'Tom3',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Home',
+  pid: 0,
+  qty: 102
+}, {
+  id: 4,
+  sn: 4,
+  date: '2016-05-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 103
+}, {
+  id: 5,
+  sn: 5,
+  date: '2016-05-05',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 104
+}, {
+  id: 6,
+  sn: 6,
+  date: '2016-06-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 105
+}]
+
+const tableTitle: TableTitle[] = [{
+  label: '序号',
+  prop: 'sn',
+  minWidth: 200,
+  fixed: 'left',
+  isBatchEdit: true
+}, {
+  label: '时间',
+  prop: 'date',
+  minWidth: 200,
+  isBatchEdit: true
+}, {
+  label: '地址',
+  prop: 'address',
+  minWidth: 200,
+  isBatchEdit: true
+}, {
+  label: '名称',
+  prop: 'name',
+  minWidth: 200,
+  isBatchEdit: true
+}, {
+  label: '数量',
+  prop: 'qty',
+  minWidth: 200,
+  isBatchEdit: true
+}]
+
+const selectionCell = ref<string>('')
+</script>
+
+<style>
+</style>

package/packages/MTable/docs/DemoTest7.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <h5>合计行</h5>
+    <MTable
+      :data="tableData"
+      border
+      showSummary
+      sumText="合"
+      scrollbarAlwaysOn
+    >
+      <el-table-column
+        fixed="left"
+        type="selection"
+      />
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :className="item.className"
+        :filters="item.filters"
+        :headerAlign="item.headerAlign"
+        :fixed="item.fixed"
+        :isSummary="item.isSummary"
+        :isBatchEdit="item.isBatchEdit"
+        showOverflowTooltip
+      ></MTableColumn>
+    </MTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MTableColumn } from './../../MTableColumn'
+
+const tableData = ref<Record<string, string | number>[]>([])
+tableData.value = [{
+  id: 1,
+  sn: 1,
+  date: '2016-05-03',
+  name: 'Tom1',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Home',
+  pid: 0,
+  qty: 10,
+  day: 100
+}, {
+  id: 2,
+  sn: 2,
+  date: '2016-05-02',
+  name: 'Tom2',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 101,
+  day: 100
+}, {
+  id: 3,
+  sn: 3,
+  date: '2016-05-04',
+  name: 'Tom3',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Home',
+  pid: 0,
+  qty: 102,
+  day: 100
+}, {
+  id: 4,
+  sn: 4,
+  date: '2016-05-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 103,
+  day: 100
+}, {
+  id: 5,
+  sn: 5,
+  date: '2016-05-05',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 104,
+  day: 100
+}, {
+  id: 6,
+  sn: 6,
+  date: '2016-06-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 105,
+  day: 100
+}]
+
+const tableTitle: TableTitle[] = [{
+  label: '序号',
+  prop: 'sn',
+  minWidth: 200,
+  fixed: 'left',
+  isBatchEdit: false
+}, {
+  label: '时间',
+  prop: 'date',
+  minWidth: 200,
+  isBatchEdit: true
+}, {
+  label: '数量',
+  prop: 'qty',
+  minWidth: 200,
+  isBatchEdit: true,
+  isSummary: true
+}, {
+  label: '天数',
+  prop: 'day',
+  minWidth: 200,
+  isBatchEdit: true,
+  isSummary: false
+}, {
+  label: '地址',
+  prop: 'address',
+  minWidth: 200,
+  isBatchEdit: true
+}, {
+  label: '名称',
+  prop: 'name',
+  minWidth: 200,
+  isBatchEdit: true
+}]
+</script>
+
+<style>
+</style>

package/packages/MTable/docs/README.md

@@ -13,16 +13,16 @@ import demo from './demo.vue'
 
 ### 2) Attributes
 
-| 参数                      | 说明                          | 类型                    | 可选值 | 默认值                                                 |
-|-------------------------|-----------------------------|-----------------------|-----|-----------------------------------------------------|
-| data                    | 表格的数据                       | Record<string, any>[] | -   | [ ]                                                 |
-| sole                    | 行的唯一值                       | String , number       | -   | key                                                 |
-| filtersValue            | 表格内容筛选(当为null时，不显示筛选图标)     | Function \| null      | -   | null                                                |
-| expandProp              | 展开图标列(如使用这个属性则必须存在rowKey属性) | string                | -   | ''                                                  |
-| tableConfigKey          | 表格配置key                     | string                | -   | ''                                                  |
-| showSelectionCellStatus | 显示单元格选中状态                   | boolean               | -   | false                                               |
-| selectionCell           | 选中列(必须showSelection为true)   | string                | -   | ''                                                  |
-| 其余参数                    | 参考el官网的table                | any                   | -   | https://element-plus.org/zh-CN/component/table.html |
+| 参数             | 说明                          | 类型                    | 可选值 | 默认值                                                 |
+|----------------|-----------------------------|-----------------------|-----|-----------------------------------------------------|
+| data           | 表格的数据                       | Record<string, any>[] | -   | [ ]                                                 |
+| sole           | 行的唯一值                       | String , number       | -   | key                                                 |
+| filtersValue   | 表格内容筛选(当为null时，不显示筛选图标)     | Function \| null      | -   | null                                                |
+| expandProp     | 展开图标列(如使用这个属性则必须存在rowKey属性) | string                | -   | ''                                                  |
+| tableConfigKey | 表格配置key                     | string                | -   | ''                                                  |
+| selectionCell  | 选中列                         | string                | -   | ''                                                  |
+| circleTotal    | 是否圈选合计                      | boolean               | -   | true                                                |
+| 其余参数           | 参考el官网的table                | any                   | -   | https://element-plus.org/zh-CN/component/table.html |
 
 ## 要求
 

package/packages/MTable/docs/demo.vue

@@ -12,7 +12,13 @@
     <!--<DemoTest4></DemoTest4>-->
     <!--<el-divider />-->
 
-    <DemoTest5></DemoTest5>
+    <!--<DemoTest5></DemoTest5>-->
+    <!--<el-divider />-->
+
+    <!--<DemoTest6></DemoTest6>-->
+    <!--<el-divider />-->
+
+    <DemoTest7></DemoTest7>
     <el-divider />
   </div>
 </template>
@@ -22,7 +28,9 @@
 // import DemoTest2 from 'packages/MTable/docs/DemoTest2.vue'
 // import DemoTest3 from 'packages/MTable/docs/DemoTest3.vue'
 // import DemoTest4 from 'packages/MTable/docs/DemoTest4.vue'
-import DemoTest5 from 'packages/MTable/docs/DemoTest5.vue'
+// import DemoTest5 from 'packages/MTable/docs/DemoTest5.vue'
+// import DemoTest6 from 'packages/MTable/docs/DemoTest6.vue'
+import DemoTest7 from 'packages/MTable/docs/DemoTest7.vue'
 </script>
 
 <style lang="scss" scoped>

package/packages/MTable/src/MBatchEdit.vue

@@ -5,6 +5,7 @@
       :size="props.size"
       icon="Brush"
       @click="open(props.selectionCell)"
+      @mousedown.stop
     >
       批改
     </el-button>