web-component-gallery 2.2.32 → 2.2.34

package/dist/styles.css

@@ -0,0 +1,21 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.TransferTable {
+  flex: 1;
+  display: flex;
+  gap: 8px 0;
+  flex-direction: column;
+}
+.TransferTable__Content {
+  flex: 1;
+  display: flex;
+  gap: 0 8px;
+  flex-direction: row;
+}
+.TransferTable__Left,
+.TransferTable__Right {
+  height: 100%;
+}
+

package/dist/styles.umd.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.rui=t():e.rui=t()}(self,function(){return function(){var e={73472:function(e,t,o){"use strict";o.r(t)}},t={};function o(r){var n=t[r];if(void 0!==n)return n.exports;var u=t[r]={exports:{}};return e[r](u,u.exports,o),u.exports}o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};return o(73472),{}}()});

package/lib/descriptions-list/index.jsx

@@ -1,4 +1,3 @@
-
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import Descriptions from 'ant-design-vue/es/descriptions'
 import Browse from '../browse/index.jsx'
@@ -13,7 +12,7 @@ const descDefaultAttrs = {
 
 const DescriptionsProps = {
   title: PropTypes.string,
-  column: PropTypes.oneOfType([PropTypes.number, PropTypes.object]).def(3),
+  column: PropTypes.oneOfType([PropTypes.number, PropTypes.object]).def(4),
   descDetails: PropTypes.object,
   descSettings: PropTypes.array,
   descAttrs: PropTypes.object,
@@ -45,41 +44,33 @@ const renderContent = (h, item, details) => {
 const DescriptionsList = {
   name: 'DescriptionsList',
   props: DescriptionsProps,
-  computed: {
-    responsiveColumn() {
-      return {
-        xxl: 4,
-        xl: 3,
-        lg: 3,
-        md: 3,
-        sm: 2,
-        xs: 1
-      }
+  data() {
+    return {
+      responsiveColumn: 1
     }
   },
   mounted() {
-    // this.setDescContentWidth()
-    // this.$bus.$onWindow(this, 'resize', this.setDescContentWidth)
+    this.setDescContentWidth()
+    this.$bus.$onWindow(this, 'resize', this.setDescContentWidth)
   },
   methods: {
     getCurrentColumn(width) {
-      if (width >= 1600) return this.responsiveColumn.xxl
-      if (width >= 1200) return this.responsiveColumn.xl
-      if (width >= 992) return this.responsiveColumn.lg
-      if (width >= 768) return this.responsiveColumn.md
-      if (width >= 576) return this.responsiveColumn.sm
-      return this.responsiveColumn.xs
+      if (width >= 1600) return this.column || 4
+      if (width >= 1200) return Math.min(4, this.column)
+      if (width >= 992) return Math.min(3, this.column)
+      if (width >= 576) return Math.min(2, this.column)
+      return 1
     },
     
-    calculateItemWidth(totalWidth, column, itemSpan) {
-      const effectiveSpan = itemSpan && column > itemSpan ? itemSpan : 1
-      return totalWidth * (effectiveSpan / column)
+    calculateItemWidth(totalWidth, itemSpan) {
+      const effectiveSpan = itemSpan && this.responsiveColumn > itemSpan ? itemSpan : 1
+      return totalWidth * (effectiveSpan / this.responsiveColumn)
     },
     
     setDescContentWidth() {
       const retry = () => {
         const container = this.$refs.Descriptions
-        if (!container) return
+        if (!container) return 
         
         const viewElement = container.querySelector('.ant-descriptions-view')
         if (!viewElement) return
@@ -90,39 +81,42 @@ const DescriptionsList = {
           return
         }
         
-        const column = Math.max(1, this.getCurrentColumn(width))
-        const labelElements = container.querySelectorAll('.ant-descriptions-item-label')
-        const contentElements = container.querySelectorAll('.ant-descriptions-item-content')
-        
-        for (let i = 0; i < contentElements.length; i++) {
-          const itemSpan = this.descSettings[i]?.span || 1
-          let eachWidth = this.calculateItemWidth(width, column, itemSpan)
-          
-          let labelWidth, contentWidth
-          if (eachWidth / 2 > 160) {
-            labelWidth = 160
-            contentWidth = eachWidth - 160
-          } else {
-            labelWidth = Math.floor(eachWidth * 0.4)
-            contentWidth = Math.floor(eachWidth * 0.6)
-          }
-          
-          if (labelElements[i]) {
-            labelElements[i].style.cssText = `
-              width: 160px;
-              min-width: 160px; 
-              max-width: 160px;
-            `
-          }
-          
-          if (contentElements[i]) {
-            contentElements[i].style.cssText = `
-              width: calc(100% - 160px); 
-              min-width: calc(100% - 160px); 
-              max-width: calc(100% - 160px);
-            `
+        this.responsiveColumn = this.getCurrentColumn(width)
+
+        setTimeout(() => {
+          const rowElements = container.querySelectorAll('.ant-descriptions-row')
+          // 记录数量
+          let count = 0
+
+          for (let i = 0; i < rowElements.length; i++) { 
+            const labelElements = rowElements[i].querySelectorAll('.ant-descriptions-item-label')
+            const contentElements = rowElements[i].querySelectorAll('.ant-descriptions-item-content')
+            // 计算平均宽度
+            const meanWidth = width / labelElements.length
+              
+            for (let j = 0; j < labelElements.length; j++) {
+              const itemSpan = this.descSettings[count]?.span || 1
+              const eachWidth = width / this.responsiveColumn * itemSpan
+
+              // 设置标签固定宽度
+              labelElements[j].style = `
+                width: 160px;
+                min-width: 160px; 
+                max-width: 160px;
+              `
+                
+              // 设置内容区域默认宽度
+              contentElements[j].style = `
+                width: ${eachWidth - 160}px;
+                min-width: ${eachWidth - 160}px; 
+                max-width: ${eachWidth - 160}px;
+              `
+                
+              count++
+            }
           }
-        }
+        }, 0)
+        
       }
       retry()
     }
@@ -161,4 +155,4 @@ DescriptionsList.install = function(Vue) {
   Vue.component('DescriptionsList', DescriptionsList)
 }
 
-export default DescriptionsList
+export default DescriptionsList

package/lib/descriptions-list/style/index.less

@@ -4,18 +4,17 @@
     .scrollbarStyle();
 
     .ant-descriptions-bordered {
+
+        .ant-descriptions-view > table {
+            table-layout: fixed;
+        }
+
         .ant-descriptions-item-label {
-            width: 160px;
-            min-width: 160px;
-            max-width: 160px;
             text-align: left;
             word-wrap: break-word;
         }
     
         .ant-descriptions-item-content {
-            width: calc(100% - 160px);
-            min-width: calc(100% - 160px);
-            max-width: calc(100% - 160px);
             word-wrap: break-word;
 
             .Browse {

package/lib/form-comp/ARangePicker.vue

@@ -62,7 +62,7 @@ export default {
   watch: {
     value: {
       handler(newVal, oldVal) {
-        if (newVal.toString() === oldVal.toString()) return
+        if (newVal.toString() === oldVal?.toString()) return
         this.date = [...newVal]
       },
       immediate: true

package/lib/model/Model.js

@@ -148,6 +148,7 @@ export default {
                 block: "center"
               })
             })
+            reject()
           })
       })
     }

package/lib/table/index.vue

@@ -1,51 +1,72 @@
 <template>
+  <!-- 表格容器，根据tableStyle动态设置样式类 -->
   <div :class="[tableStyle, 'WebComponentTable']" ref="Table">
-
-      <div class="WebComponentTable__Head" ref="TableHead">
-          <slot name="ATableHead" />
-      </div>
+    <!-- 表格头部插槽 -->
+    <div v-if="$slots.ATableHead" class="WebComponentTable__Head" ref="TableHead">
+      <slot name="ATableHead" />
+    </div>
     
-      <Table
-        ref="TableList"
-        :size="tableSize"
-        :data-source="tableDatas"
-        v-on="$listeners"
-        v-bind="setAttrs"
-        class="WebComponentTable__List"
-      >
-        <!-- 下次更改一下title的传递方式 -->
-        <div class="WebComponentTable__List__Title" ref="TableListTitle" slot="title">
-          <slot name="ATableTitle" />
-        </div>
+    <!-- 主表格组件 -->
+    <Table
+      ref="TableList"
+      :size="tableSize"
+      :data-source="tableDatas"
+      v-on="$listeners"
+      v-bind="setAttrs"
+      class="WebComponentTable__List"
+    >
+      <!-- 表格标题插槽 -->
+      <div v-if="$slots.ATableTitle" class="WebComponentTable__List__Title" ref="TableListTitle" slot="title">
+        <slot name="ATableTitle" />
+      </div>
 
-        <template v-for="{ dataIndex } in $attrs.columns" #[dataIndex]>
-          <!-- 自定义头部渲染 -->
-          <slot :name="dataIndex" />
-        </template>
-        
-        <template #customRender="text, record, i, column">
-          <slot :name="column.dataIndex" :customProps="record" :text="text" :index="i" />
-        </template>
-      </Table>
+      <!-- 自定义头部渲染 -->
+      <template v-for="{ dataIndex } in $attrs.columns" #[dataIndex]>
+        <slot :name="dataIndex" />
+      </template>
 
-      <div class="WebComponentTable__Pagination" ref="TablePagination">
-          <slot name="ATablePagination">
-            <Pagination
-              size="small"
-              :pageSizeOptions="pageSizeOptions"
-              :show-total="total => `共 ${total} 条记录`"
-              show-size-changer
-              show-quick-jumper
-              :defaultCurrent="1"
-              :pageSize.sync="pagination.size"
-              :current="pagination.current"
-              @showSizeChange="paginationChange"
-              @change="paginationChange"
-              :total="pagination.total"
-            />
-          </slot> 
-      </div>
+      <!-- 新增：查看文件 -->
+      <template #checkFile="text, record, i, column">
+        <Button type="link" @click="handleCheckFile(record, column.props)">查看</Button>
+      </template>
+
+      <!-- 新增：携带自定义操作 -->
+      <template #viewOperate="text, record, i, column">
+        <Button type="link" @click="handleViewOperate(record, column)">
+          {{ column.customRender(record) || record[column.props] }}
+        </Button>
+      </template>
+      
+      <!-- 自定义渲染插槽 -->
+      <template #customRender="text, record, i, column">
+        <slot 
+          :name="column.dataIndex" 
+          :customProps="record" 
+          :text="text" 
+          :index="i" 
+          :column="column" 
+        />
+      </template>
+    </Table>
 
+    <!-- 分页组件容器 -->
+    <div class="WebComponentTable__Pagination" ref="TablePagination">
+      <slot name="ATablePagination">
+        <Pagination
+          size="small"
+          :pageSizeOptions="pageSizeOptions"
+          :show-total="total => `共 ${total} 条记录`"
+          show-size-changer
+          show-quick-jumper
+          :defaultCurrent="1"
+          :pageSize.sync="pagination.size"
+          :current="pagination.current"
+          @showSizeChange="handlePaginationChange"
+          @change="handlePaginationChange"
+          :total="pagination.total"
+        />
+      </slot> 
+    </div>
   </div>
 </template>
 
@@ -55,39 +76,24 @@ import IconFont from '../icon-font'
 import { Table, Pagination } from 'ant-design-vue/es'
 
 export default {
+  name: 'WTable',
   components: { 
     Table,
     Pagination
-  }, 
-  name: 'WTable', 
-  data() {
-    return {
-      pagination: {
-        total: 0,
-        size: 10,
-        current: 1
-      },
-      // 尺寸观察器
-      resizeObserver: null,
-      tableScrollBody: 600,
-      /** 跨分页记录选中数据 */
-      selectedRecords: []
-    }
   },
   props: {
-    // 紧凑型和宽松型 
-    // relax 宽松型
-    // compact 紧凑型
     tableStyle: {
       type: String,
       default: 'compact'
     },
-    // compact 紧凑型情况下是否有分割线
     tableSplit: {
       type: Boolean,
       default: true
     },
-    // 表格数据
+    rowKey: {
+      type: String,
+      default: 'id'
+    },
     datas: {
       type: Array,
       default: () => []
@@ -96,12 +102,10 @@ export default {
       type: String,
       default: '-'
     },
-    // 选中数据项
     selectedRowKeys: {
       type: Array,
       default: () => []
     },
-    // 分页默认值
     paginationParams: {
       type: Object,
       default: () => ({
@@ -110,36 +114,54 @@ export default {
         current: 1
       })
     },
-    // 配置分页数据
     pageSizeOptions: {
       type: Array,
       default: () => ['10', '15', '20', '30', '50']
     }
   },
+  data() {
+    return {
+      pagination: {
+        total: 0,
+        size: 10,
+        current: 1
+      },
+      resizeObserver: null,
+      tableScrollBody: 600,
+      selectedRecords: []
+    }
+  },
   computed: {
     setAttrs() {
       return {
         pagination: false,
-        rowKey: (record, i) => record.id ?? `${this.pagination.current}${i}`,
-        rowSelection: { selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange },
+        rowKey: (record, i) => record[this.rowKey] ?? `${this.pagination.current}${i}`,
+        rowSelection: { 
+          selectedRowKeys: this.selectedRowKeys, 
+          onChange: this.handleSelectChange 
+        },
         locale: {
-          emptyText: <div class="WebComponentTable__List__Empty">
-            <IconFont type="noData_data" />
-            <span>暂无数据</span>
-          </div>
+          emptyText: (
+            <div class="WebComponentTable__List__Empty">
+              <IconFont type="noData_data" />
+              <span>暂无数据</span>
+            </div>
+          )
+        },
+        scroll: { 
+          y: this.tableScrollBody, 
+          x: this.$attrs.scrollX 
         },
-        scroll: { y: this.tableScrollBody, x: this.$attrs.scrollX },
         ...this.$attrs
       }
     },
     tableSize() {
-      return this.tableStyle == 'compact' ? 'middle' : 'default'
+      return this.tableStyle === 'compact' ? 'middle' : 'default'
     },
     tableDatas() {
-      /** 字段数据为空则添加默认占位符 */
-      const dataKeys = this.$attrs.columns.map(column => column.dataIndex)
+      const dataKeys = this.$attrs?.columns?.map(column => column.dataIndex) || []
       return this.datas.map(dataItem => {
-        const cloneItem = {...dataItem}
+        const cloneItem = { ...dataItem }
         dataKeys.forEach(key => {
           const value = cloneItem[key]
           if (value === null || value === undefined || 
@@ -150,39 +172,42 @@ export default {
         return cloneItem
       })
     }
-  }, 
+  },
   watch: {
-    paginationParams(newValue) {
-      this.pagination = { ...this.pagination, ...newValue }
+    paginationParams: {
+      handler(newValue) {
+        this.pagination = { ...this.pagination, ...newValue }
+      },
+      immediate: true
     }
   },
   mounted() {
-    this.pagination = { ...this.pagination, ...this.paginationParams }
-    // 监听父级高度
     this.initResizeObserver()
-    setTimeout(this.getScrollBodyH, 300)
-    this.$bus.$onWindow(this, 'resize', this.getScrollBodyH)
-    this.removeDomElement()
-  }, 
-  destroyed() {
-    if (this.resizeObserver) this.resizeObserver.disconnect()
+    this.$nextTick(() => {
+      setTimeout(this.getTableBodyHeight, 100)
+    })
+    this.$bus.$onWindow(this, 'resize', this.getTableBodyHeight)
+  },
+  beforeDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
   },
   methods: {
-    // 初始化尺寸观察器
     initResizeObserver() {
-      if (typeof ResizeObserver !== 'undefined') {
+      if (typeof ResizeObserver !== 'undefined' && this.$refs.Table) {
         this.resizeObserver = new ResizeObserver(() => {
-          this.getScrollBodyH()
+          this.getTableBodyHeight()
         })
         this.resizeObserver.observe(this.$refs.Table)
       }
     },
-    /** 根据内容高度计算滚动长度 */
-    getScrollBodyH() {
+    getTableBodyHeight() {
       if (!this.$refs.Table || !this.$refs.TableHead || !this.$refs.TablePagination) return
         
       const tableTitleHeight = this.$refs.TableListTitle ? this.$refs.TableListTitle.offsetHeight : 0
-      const tableHeader = document.querySelector('.ant-table-thead')
+      const tableHeader = this.$refs.TableList.querySelector('.ant-table-thead')
       const headerHeight = tableHeader ? tableHeader.offsetHeight : 0
         
       this.tableScrollBody = 
@@ -193,37 +218,49 @@ export default {
         tableTitleHeight -
         headerHeight -
         24 // 浮动空间缓冲
-      /** 24为获取高度时抹掉的小数点后两位的浮动空间(存在叠加多个获取错误的情况) */
     },
-    /** 根据高度判断dom元素是否加载 进行删除 */
-    removeDomElement() {
-      let domElement
-      this.$refs.Table.querySelectorAll('div').forEach( node => {
-        node.className == 'ant-table-title' && (domElement = node)
-      } )
-      !this.$scopedSlots.ATableHead && this.$refs.TableHead.remove()
-      !this.$scopedSlots.ATableTitle && ( domElement.style.padding = '0' )
+    handleCheckFile(record, props) {
+      this.$postM({
+        type: 'customModal',
+        name: 'browse',
+        params: { 
+          data: record[props]
+        }
+      })
     },
-    onSelectChange(selectedKey, selectedRecord) {
-      const currentIds = new Set(this.selectedRecords.map(r => r.id))
+    handleViewOperate(record, column) {
+      const { customOperate, customView } = column
+
+      if (typeof customOperate === 'function') return customOperate(record)
+      if (!customView || !customView.code) return
+      
+      this.$postM({
+        name: customView.code,
+        method: 'modalOpen',
+        params: record
+      })
+    },
+    handleSelectChange(selectedKey, selectedRecord) {
+      const currentIds = new Set(this.selectedRecords.map(r => r[this.rowKey]))
       const newIds = new Set(selectedKey)
       
       this.selectedRecords = newIds.size > currentIds.size
-        ? [...this.selectedRecords, ...selectedRecord.filter(r => 
-            newIds.has(r.id) && !currentIds.has(r.id)
-          )]
-        : this.selectedRecords.filter(r => newIds.has(r.id))
+        ? [
+            ...this.selectedRecords, 
+            ...selectedRecord.filter(r => newIds.has(r[this.rowKey]) && !currentIds.has(r[this.rowKey]))
+          ]
+        : this.selectedRecords.filter(r => newIds.has(r[this.rowKey]))
       
       this.$emit('selectedRecords', selectedKey, this.selectedRecords)
     },
-    paginationChange(current, pageSize) {
+    handlePaginationChange(current, pageSize) {
       this.pagination = {
         ...this.pagination,
         size: pageSize,
         current
       }
       this.$emit('pageSizeChange', this.pagination)
-    } 
+    }
   }
 }
-</script>
+</script>