web-component-gallery 2.2.33 → 2.2.35

package/lib/transfer-table/index.vue

@@ -0,0 +1,278 @@
+<template>
+  <!-- 列表形式穿梭框 -->
+  <div class="TransferTable">
+    <div class="TransferTable__Search" v-if="searchSetting && searchSetting.length">
+      <Search 
+        v-model="searchForm"
+        :formSetting="searchSetting"
+        @handleSearch="handleSearch"
+        @handleReset="handleReset"
+      />
+    </div>
+    <div class="TransferTable__Content">
+      <div class="TransferTable__Left">
+        <Table
+          v-bind="{
+            datas: listDatasA,
+            columns,
+            paginationParams: listPaginationA,
+            rowSelection: {
+              selectedRowKeys: selectedKeys,
+              onChange: selectedRecords,
+              getCheckboxProps: record => ({
+                props: {
+                  disabled: isRecordDisabled(record)
+                }
+              })
+            }
+          }"
+          @pageSizeChange="(pagination) => (listPaginationA = pagination, onListPageAHandler())"
+        >
+          <span class="Table__Name" slot="ATableTitle">{{title}}列表</span>
+          <template #action="{customProps, index}">
+            <Button
+              v-for="(op, i) in operateSetting" 
+              :key="i" 
+              type="link"
+              :disabled="shouldDisableButton(op, customProps)"
+              @click="handleTableAction(op.code, customProps)"
+            >
+              {{ op.title }}
+            </Button>
+          </template>
+        </Table>
+      </div>
+
+      <div class="TransferTable__Right">
+        <Table
+          v-bind="{
+            datas: listDatasB,
+            columns,
+            paginationParams: listPaginationB,
+            rowSelection: {
+              selectedRowKeys: selectedKeys,
+              onChange: selectedRecords,
+              getCheckboxProps: record => ({
+                props: {
+                  disabled: isRecordDisabled(record)
+                }
+              })
+            }
+          }"
+          @pageSizeChange="(pagination) => (listPaginationB = pagination, onListPageBHandler())"
+        >
+          <span class="Table__Name" slot="ATableTitle">已选{{title}}列表</span>
+          <template #action="{customProps, index}">
+            <Button
+              v-for="(op, i) in operateSetting"
+              :key="i"
+              type="link"
+              :disabled="shouldDisableButton(op, customProps)"
+              @click="handleTableAction(op.code, customProps)"
+            >
+              {{ op.title }}
+            </Button>
+          </template>
+        </Table>
+      </div>
+
+    </div>
+  </div> 
+</template>
+
+<script>
+
+import { Button } from 'ant-design-vue'
+import { Search, Table } from '../index'
+import { chunkArray } from '../../utils/Utils'
+
+export default {
+  name: 'TransferTable',
+  components: {
+    Search,
+    Table,
+    Button
+  },
+  props: {
+    // 列表名称
+    title: {
+      type: String,
+      default: '人员'
+    },
+    // 双向绑定的已选记录
+    value: {
+      type: Array,
+      default: () => ([])
+    },
+    // 列表项
+    columns: Array,
+    // 支持传递额外参数
+    extraParams: {
+      type: Object,
+      default: () => ({})
+    },
+    // 搜索项
+    searchSetting: Array,
+    // 操作配置
+    operateSetting: Array,
+    // 分页接口(A表数据获取)
+    onListPageHandler: {
+      type: Function,
+      required: true
+    },
+    // 已经保存到数据库的记录ID列表
+    savedRecordIds: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data() {
+    return {
+      // 搜索条件
+      searchForm: {},
+      selectedKeys: [],
+
+      // A表格(待选区)
+      listDatasA: [],
+      listPaginationA: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+
+      // B表格(已选区)
+      listDatasB: [],
+      listPaginationB: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  computed: {
+    // 使用计算属性实现双向绑定
+    selectedRecordsB: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  watch: {
+    // 当搜索条件变化时重置左表
+    searchForm: {
+      handler() {
+        this.resetLeftTable()
+      },
+      deep: true
+    },
+    selectedRecordsB: {
+      handler() {
+        this.onListPageBHandler()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.onListPageAHandler()
+  },
+  methods: {
+    // 列表操作处理
+    handleTableAction(name, record) {
+      this.$postM({
+        name,
+        method: 'modalOpen',
+        params: record
+      })
+    }, 
+    handleReset() {
+      this.searchForm = {}
+      this.handleSearch()
+    },
+    handleSearch() {
+      this.listPagination = {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+      this.onListPageHandler()
+    },
+    // 获取左侧表格数据
+    async onListPageAHandler() {
+      const params = {
+        ...this.listPaginationA,
+        ...this.extraParams,
+        ...this.searchForm
+      }
+      try {
+        const { total, records } = await this.onListPageHandler(params)
+        this.listDatasA = records
+        this.listPaginationA = {
+          ...this.listPaginationA,
+          total
+        }
+      } catch(err) {
+        console.error('获取待选人员失败:', err)
+      }
+    },
+
+    // 获取右侧表格数据(从已选记录中分页)
+    onListPageBHandler() {
+      try {
+        const chunks = chunkArray(this.selectedRecordsB, this.listPaginationB.size)
+        this.listDatasB = chunks[this.listPaginationB.current - 1] || []
+        this.listPaginationB = {
+          ...this.listPaginationB,
+          total: this.selectedRecordsB.length
+        }
+
+        // 同步选中状态
+        this.selectedKeys = this.selectedRecordsB.map(r => r.id)
+      } catch(err) {
+        console.error('更新已选列表失败:', err)
+      }
+    },
+
+    // 取消 / 选择当前行
+    selectedRecords(selectedKey, selectedRecord) {
+      const currentIds = new Set(this.selectedRecordsB.map(r => r.id))
+      const newIds = new Set(selectedKey)
+      
+      this.selectedRecordsB = newIds.size > currentIds.size
+        ? [...this.selectedRecordsB, ...selectedRecord.filter(r => 
+            newIds.has(r.id) && !currentIds.has(r.id)
+          )]
+        : this.selectedRecordsB.filter(r => newIds.has(r.id))
+    },
+
+    // 重置左表到第一页
+    async resetLeftTable() {
+      this.listPaginationA.current = 1
+      await this.onListPageAHandler()
+    },
+
+    // 检查记录是否已被保存（需要禁用）
+    isRecordDisabled(record) {
+      return this.savedRecordIds.includes(record.id)
+    },
+
+    // 判断按钮是否应该禁用
+    shouldDisableButton(operation, record) {
+      // 如果没有设置 savedRecordIds，则不禁用任何按钮
+      if (!this.savedRecordIds || this.savedRecordIds.length === 0) {
+        return false
+      }
+      
+      // 如果该操作明确设置为不禁用已保存记录，则返回 false
+      if (operation.disableSaved === false) {
+        return false
+      }
+      
+      // 默认情况下，已保存的记录相关操作按钮会被禁用
+      return this.isRecordDisabled(record)
+    }
+  }
+}
+</script>

package/lib/transfer-table/styles/index.js

@@ -0,0 +1 @@
+require('./index.less');

package/lib/transfer-table/styles/index.less

@@ -0,0 +1,20 @@
+@import '~ant-design-vue/lib/style/themes/default.less';
+@import '../../style/mixins.less';
+
+.TransferTable {
+    flex: 1;
+    .flex-layout(column, @padding-xs 0);
+
+    &__Search {
+    }
+
+    &__Content {
+      flex: 1;
+      .flex-layout(@flexGap: 0 @padding-xs);
+    }
+
+    &__Left,
+    &__Right {
+        height: 100%;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "2.2.33",
+  "version": "2.2.35",
   "description": "基础vue、antdvue、less实现的私有组件库",
   "main": "dist/index.umd.js",
   "files": [

package/utils/Utils.js

@@ -2,12 +2,28 @@ import message from 'ant-design-vue/es/message'
 import { verifyIPStr } from './Validate'
 import { findNthOccurrence } from './Filter'
 
+
 /**
- * 下载文件
- * response: 文档流
- * name: 文件名称
+ * 数据分块工具函数
+ * @param {Array} arr - 源数组
+ * @param {number} size - 分块大小
+ * @returns {Array} 分块后的数组
  */
+export function chunkArray(arr, size) {
+  const result = []
+  for (let i = 0; i < arr.length; i += size) {
+    result.push(arr.slice(i, i + size))
+  }
+  return result
+}
 
+/**
+ * 下载文件
+ * @param {Blob} response - 文档流
+ * @param {string} name - 文件名称
+ * @param {string} type - 文件类型
+ * @returns {void}
+ */
 export function downLoadFn( response, name, type = "application/vnd.ms-excel" ) {  
 
     let reader = new FileReader()

package/utils/ColorPalette.js

@@ -1,57 +0,0 @@
-const tinycolor = require('tinycolor2')
-
-const hueStep = 2
-const saturationStep = 16
-const saturationStep2 = 5
-const brightnessStep1 = 5
-const brightnessStep2 = 15
-const lightColorCount = 5
-const darkColorCount = 4
-
-const getHue = (hsv, i, isLight) => {
-  let hue = hsv.h >= 60 && hsv.h <= 240
-    ? isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i
-    : isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i
-  
-  hue < 0 
-   ? hue += 360
-   : hue >= 360 && (hue -= 360)
-
-  return Math.round(hue)
-}
-
-const getSaturation = (hsv, i, isLight) => {
-  let saturation = isLight
-    ? Math.round(hsv.s * 100) - saturationStep * i
-    : (
-      i === darkColorCount
-        ? Math.round(hsv.s * 100) + saturationStep
-        : Math.round(hsv.s * 100) + saturationStep2 * i
-    )
-  
-  if (saturation > 100) saturation = 100
-  if (isLight && i === lightColorCount && saturation > 10) saturation = 10
-  if (saturation < 6) saturation = 6
-
-  return Math.round(saturation)
-}
-
-const getValue = (hsv, i, isLight) => {
-  if (isLight) return Math.round(hsv.v * 100) + brightnessStep1 * i
-  return Math.round(hsv.v * 100) - brightnessStep2 * i
-}
-
-// 颜色调色板生成器
-module.exports = (color, index) => {
-  const isLight = index <= 6
-  const hsv = tinycolor(color).toHsv()
-  const i = isLight 
-    ? lightColorCount + 1 - index 
-    : index - lightColorCount - 1
-
-  return tinycolor({
-    h: getHue(hsv, i, isLight),
-    s: getSaturation(hsv, i, isLight),
-    v: getValue(hsv, i, isLight)
-  }).toHexString()
-}