web-component-gallery 2.2.31 → 2.2.33

package/lib/descriptions-list/index.jsx

@@ -1,40 +1,42 @@
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import Descriptions from 'ant-design-vue/es/descriptions'
-
 import Browse from '../browse/index.jsx'
 import { transferData } from '../../utils/Filter.js'
 
-const {
-  Item: DescriptionsItem
-} = Descriptions
+const { Item: DescriptionsItem } = Descriptions
 
 const descDefaultAttrs = {
   size: 'middle',
   bordered: true
-} 
+}
 
 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,
 }
 
 const renderContent = (h, item, details) => {
-  const CustomTag = item.type === 'file' && Browse || 'span'
-  const data = 
-        item.hasOwnProperty( 'multiProps' ) ?
-        item.multiProps.map( propsItem => transferData(details[propsItem], 'Array') ).flat() :
-        transferData(details[item.props], 'Array')
+  const CustomTag = item.type === 'file' ? Browse : 'span'
+  const data = item.hasOwnProperty('multiProps') ?
+    item.multiProps.map(propsItem => transferData(details[propsItem], 'Array')).flat() :
+    transferData(details[item.props], 'Array')
+  
   const props = {
     data,
     isThumb: true,
     astrictH: 78
   }
+  
+  const contentValue = item.customRender ? 
+    item.customRender(details[item.props], details) : 
+    details[item.props]
+  
   return (
     <CustomTag {...{ props }}>
-      { (item.customRender && item.customRender(details[item.props], details) || details[item.props]) ?? '暂无'}
+      {contentValue ?? '暂无'}
     </CustomTag>
   )
 }
@@ -42,73 +44,113 @@ const renderContent = (h, item, details) => {
 const DescriptionsList = {
   name: 'DescriptionsList',
   props: DescriptionsProps,
-  render(h, content) {
-    const { title, column, descAttrs, descDetails, descSettings, $slots, $scopedSlots } = this
-    return (
-      <div class="Descriptions" ref="Descriptions">
-        <Descriptions
-          title={title}
-          column={column}
-          {...{ attrs: { ...descDefaultAttrs, ...descAttrs } }}
-        >
-          {
-            descSettings.map( (descItem, key) => {
-              return (
-                <DescriptionsItem
-                  key={key}
-                  span={descItem.span ?? 1}
-                >
-                  <span slot="label">
-                    {$slots[`${descItem.props}Lable`] ?? descItem.label}
-                  </span>
-                  {
-                    $scopedSlots[`${descItem.props}`] ?
-                    $scopedSlots[`${descItem.props}`](descDetails) :
-                    renderContent(h, descItem, descDetails)
-                  }  
-                </DescriptionsItem>
-              ) 
-            } )
-          }
-        </Descriptions>
-      </div>
-    )
-
+  data() {
+    return {
+      responsiveColumn: 1
+    }
   },
   mounted() {
     this.setDescContentWidth()
     this.$bus.$onWindow(this, 'resize', this.setDescContentWidth)
   },
   methods: {
+    getCurrentColumn(width) {
+      if (width >= 1600) 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, itemSpan) {
+      const effectiveSpan = itemSpan && this.responsiveColumn > itemSpan ? itemSpan : 1
+      return totalWidth * (effectiveSpan / this.responsiveColumn)
+    },
+    
     setDescContentWidth() {
       const retry = () => {
-        const elementG = this.$refs.Descriptions.querySelectorAll('.ant-descriptions-item-content')
-        const width = document.querySelector('.ant-descriptions-view').offsetWidth
-        const labelWidth = document.querySelector('.ant-descriptions-item-label').offsetWidth
-        const { column, descSettings } = this
+        const container = this.$refs.Descriptions
+        if (!container) return 
+        
+        const viewElement = container.querySelector('.ant-descriptions-view')
+        if (!viewElement) return
+        
+        const width = viewElement.offsetWidth
         if (width === 0) {
-          setTimeout(retry, 100) // 重试间隔100ms
+          setTimeout(retry, 100)
           return
         }
-        for (let i = 0; i < elementG.length; i++) {
-          const contentWidth = (
-            descSettings[i].span ?
-            width * (descSettings[i].span / column) :
-            width / column ) - labelWidth + 'px'
-          const element = elementG[i]
-          element.style = `
-            width: ${contentWidth};
-            min-width: ${contentWidth};
-            max-width: ${contentWidth};
-          `
-        }
+        
+        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() // 初始调用
+      retry()
     }
+  },
+  render(h) {
+    const { title, descAttrs, descDetails, descSettings, $slots, $scopedSlots } = this
+    
+    return (
+      <div class="Descriptions" ref="Descriptions">
+        <Descriptions
+          title={title}
+          column={this.responsiveColumn}
+          {...{ attrs: { ...descDefaultAttrs, ...descAttrs } }}
+        >
+          {descSettings.map((descItem, key) => (
+            <DescriptionsItem
+              key={key}
+              span={descItem.span ?? 1}
+            >
+              <span slot="label">
+                {$slots[`${descItem.props}Label`] ?? descItem.label}
+              </span>
+              {$scopedSlots[descItem.props] ?
+                $scopedSlots[descItem.props](descDetails) :
+                renderContent(h, descItem, descDetails)
+              }
+            </DescriptionsItem>
+          ))}
+        </Descriptions>
+      </div>
+    )
   }
 }
 
-DescriptionsList.install = function (Vue) {
+DescriptionsList.install = function(Vue) {
   Vue.component('DescriptionsList', DescriptionsList)
 }
 

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

@@ -1,10 +1,15 @@
- 
 .Descriptions {
+    flex: 1;
+    overflow-y: auto;
+    .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;
         }
@@ -14,7 +19,7 @@
 
             .Browse {
                 align-items: center;
-                .flex-layout(@flexGap: 0 @padding-lg);
+                .flex-layout(@flexGap: 0 @padding-lg); 
 
                 &__FileThumb {
                     .layout(auto, 78px);

package/lib/form-comp/ARangePicker.vue

@@ -3,6 +3,8 @@
     <DatePicker
       v-model="date[0]"
       v-bind="startPickerAttrs"
+      :disabledDate="disabledStartDate"
+      :disabledTime="disabledStartTime"
       @openChange="handleStartOpenChange"
     />
     <span class="separator">~</span>
@@ -10,16 +12,19 @@
       v-model="date[1]"
       :open="endOpen"
       v-bind="endPickerAttrs"
+      :disabledDate="disabledEndDate"
+      :disabledTime="disabledEndTime"
       @openChange="handleEndOpenChange"
     />
   </div>
 </template>
+
 <script>
 
 const defaultConfig = {
-   showTime: true,
-   format: 'YYYY-MM-DD HH:mm:ss',
-   valueFormat: 'YYYY-MM-DD HH:mm:ss'
+  showTime: true,
+  format: 'YYYY-MM-DD HH:mm:ss',
+  valueFormat: 'YYYY-MM-DD HH:mm:ss'
 }
 
 import moment from 'moment'
@@ -57,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
@@ -75,7 +80,6 @@ export default {
         return { 
             ...defaultConfig, 
             placeholder: '开始日期',
-            // disabledDate: this.disabledStartDate,
             ...this.startConfig
         }
     },
@@ -84,30 +88,11 @@ export default {
         return { 
             ...defaultConfig,
             placeholder: '结束日期',
-            // disabledDate: this.disabledEndDate,
             ...this.endConfig
         }
     }
   },
   methods: {
-    disabledStartDate(startValue) {
-      const endValue = this.date[1]
-      if (!startValue || !endValue) {
-        return false
-      }
-      const startDate = moment(startValue, this.startPickerAttrs.valueFormat)
-      const endDate = moment(endValue, this.endPickerAttrs.valueFormat)
-      return startDate.valueOf() > endDate.valueOf()
-    },
-    disabledEndDate(endValue) {
-      const startValue = this.date[0]
-      if (!endValue || !startValue) {
-        return false
-      }
-      const startDate = moment(startValue, this.startPickerAttrs.valueFormat)
-      const endDate = moment(endValue, this.endPickerAttrs.valueFormat)
-      return endDate.valueOf() < startDate.valueOf()
-    },
     handleStartOpenChange(open) {
       if (!open) { 
         this.endOpen = true
@@ -115,6 +100,83 @@ export default {
     },
     handleEndOpenChange(open) {
       this.endOpen = open
+    },
+
+    // 禁用开始日期
+    disabledStartDate(current) {
+      if (!this.date[1]) return false
+      return current && current > moment(this.date[1])
+    },
+
+    // 禁用开始时间
+    disabledStartTime(selectedTime) {
+      if (!this.date[1]) return {}
+      
+      const endMoment = moment(this.date[1])
+      const currentMoment = selectedTime ? moment(selectedTime) : moment()
+      
+      // 如果选择的是同一天，则限制小时、分钟、秒
+      if (currentMoment.isSame(endMoment, 'day')) {
+        return {
+          disabledHours: () => this.range(0, 24).slice(endMoment.hour() + 1),
+          disabledMinutes: (selectedHour) => {
+            if (selectedHour === endMoment.hour()) {
+              return this.range(0, 60).slice(endMoment.minute() + 1)
+            }
+            return []
+          },
+          disabledSeconds: (selectedHour, selectedMinute) => {
+            if (selectedHour === endMoment.hour() && selectedMinute === endMoment.minute()) {
+              return this.range(0, 60).slice(endMoment.second() + 1)
+            }
+            return []
+          }
+        }
+      }
+      return {}
+    },
+
+    // 禁用结束日期
+    disabledEndDate(current) {
+      if (!this.date[0]) return false
+      return current && current < moment(this.date[0]).startOf('day')
+    },
+
+    // 禁用结束时间
+    disabledEndTime(selectedTime) {
+      if (!this.date[0]) return {}
+      
+      const startMoment = moment(this.date[0])
+      const currentMoment = selectedTime ? moment(selectedTime) : moment()
+      
+      // 如果选择的是同一天，则限制小时、分钟、秒
+      if (currentMoment.isSame(startMoment, 'day')) {
+        return {
+          disabledHours: () => this.range(0, startMoment.hour()),
+          disabledMinutes: (selectedHour) => {
+            if (selectedHour === startMoment.hour()) {
+              return this.range(0, startMoment.minute())
+            }
+            return []
+          },
+          disabledSeconds: (selectedHour, selectedMinute) => {
+            if (selectedHour === startMoment.hour() && selectedMinute === startMoment.minute()) {
+              return this.range(0, startMoment.second())
+            }
+            return []
+          }
+        }
+      }
+      return {}
+    },
+
+    // 生成数字范围
+    range(start, end) {
+      const result = []
+      for (let i = start; i < end; i++) {
+        result.push(i)
+      }
+      return result
     }
   }
 }

package/lib/form-comp/ASelectCustom.vue

@@ -98,6 +98,11 @@ export default {
       type: Boolean,
       default: true
     },
+    // 带搜索条件的失焦情况下默认清空重新请求
+    autoClearSearchValue: {
+      type: Boolean,
+      default: true
+    },
     listPageParams: Object,
     listPageHandler: Function,
 
@@ -166,7 +171,7 @@ export default {
     },
     isSelectOpen(newVal) {
       // 选择器关闭后，搜索条件存在的情况下是否清空搜索框
-      const shouldClear = !newVal && this.searchValue && this.attrs.autoClearSearchValue
+      const shouldClear = !newVal && this.searchValue && this.autoClearSearchValue
       if (shouldClear) this.resetRequest()
     },
     listPageParams: {

package/lib/model/Model.js

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

package/lib/table/index.vue

@@ -24,7 +24,7 @@
         </template>
         
         <template #customRender="text, record, i, column">
-          <slot :name="column.dataIndex" :customProps="record" :text="text" :index="i" />
+          <slot :name="column.dataIndex" :customProps="record" :text="text" :index="i" :column="column" />
         </template>
       </Table>
 

package/package.json

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