Procházet zdrojové kódy

jeecgboot3.4.2版本发布,行编辑组件功能优化

zhangdaiscott před 2 roky
rodič
revize
65af3c3804

+ 1 - 0
src/components/jeecg/JVxeTable/src/JVxeTable.ts

@@ -42,6 +42,7 @@ export default defineComponent({
     return h(
       'div',
       {
+        class: this.$attrs.class,
         style: this.$attrs.style,
       },
       h(

+ 7 - 1
src/components/jeecg/JVxeTable/src/componentMap.ts

@@ -24,7 +24,13 @@ const componentMap = new Map<JVxeTypes | string, JVxeVueComponent>();
 export const spanEnds: string = ':span';
 
 /** 定义不能用于注册的关键字 */
-export const excludeKeywords: Array<JVxeTypes> = [JVxeTypes.hidden, JVxeTypes.rowNumber, JVxeTypes.rowCheckbox, JVxeTypes.rowRadio, JVxeTypes.rowExpand];
+export const excludeKeywords: Array<JVxeTypes> = [
+  JVxeTypes.hidden,
+  JVxeTypes.rowNumber,
+  JVxeTypes.rowCheckbox,
+  JVxeTypes.rowRadio,
+  JVxeTypes.rowExpand,
+];
 
 /**
  * 注册组件

+ 12 - 3
src/components/jeecg/JVxeTable/src/components/cells/JVxeDateCell.vue

@@ -1,10 +1,19 @@
 <template>
-  <a-date-picker :value="innerDateValue" allowClear :format="dateFormat" :showTime="isDatetime" dropdownClassName="j-vxe-date-picker" style="min-width: 0" v-bind="cellProps" @change="handleChange" />
+  <a-date-picker
+    :value="innerDateValue"
+    allowClear
+    :format="dateFormat"
+    :showTime="isDatetime"
+    dropdownClassName="j-vxe-date-picker"
+    style="min-width: 0"
+    v-bind="cellProps"
+    @change="handleChange"
+  />
 </template>
 
 <script lang="ts">
   import { ref, computed, watch, defineComponent } from 'vue';
-  import moment from 'moment';
+  import dayjs from 'dayjs';
   import { dispatchEvent } from '/@/components/jeecg/JVxeTable/utils';
   import { JVxeComponent, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
   import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
@@ -27,7 +36,7 @@
           if (val == null || isEmpty(val)) {
             innerDateValue.value = null;
           } else {
-            innerDateValue.value = moment(val, dateFormat.value);
+            innerDateValue.value = dayjs(val, dateFormat.value);
           }
         },
         { immediate: true }

+ 5 - 1
src/components/jeecg/JVxeTable/src/components/cells/JVxeInputCell.vue

@@ -67,6 +67,10 @@
       getValue(value, ctx) {
         if (ctx?.props?.type === JVxeTypes.inputNumber && isString(value)) {
           if (NumberRegExp.test(value)) {
+            // 【issues/I5IHN7】修复无法输入小数点的bug
+            if (/\.0*$/.test(value)) {
+              return value;
+            }
             return Number.parseFloat(value);
           }
         }
@@ -74,4 +78,4 @@
       },
     } as JVxeComponent.EnhancedPartial,
   });
-</script>
+</script>

+ 3 - 1
src/components/jeecg/JVxeTable/src/components/cells/JVxeRadioCell.vue

@@ -1,6 +1,8 @@
 <template>
   <a-radio-group :class="clazz" :value="innerValue" v-bind="cellProps" @change="(e) => handleChangeCommon(e.target.value)">
-    <a-radio v-for="item of originColumn.options" :key="item.value" :value="item.value" @click="(e) => handleRadioClick(item, e)">{{ item.text || item.label || item.title || item.value }} </a-radio>
+    <a-radio v-for="item of originColumn.options" :key="item.value" :value="item.value" @click="(e) => handleRadioClick(item, e)"
+      >{{ item.text || item.label || item.title || item.value }}
+    </a-radio>
   </a-radio-group>
 </template>
 

+ 10 - 1
src/components/jeecg/JVxeTable/src/components/cells/JVxeTextareaCell.vue

@@ -1,5 +1,14 @@
 <template>
-  <JInputPop :value="innerValue" :width="300" :height="210" :pop-container="getPopupContainer" v-bind="cellProps" style="width: 100%" @blur="handleBlurCommon" @change="handleChangeCommon" />
+  <JInputPop
+    :value="innerValue"
+    :width="300"
+    :height="210"
+    :pop-container="getPopupContainer"
+    v-bind="cellProps"
+    style="width: 100%"
+    @blur="handleBlurCommon"
+    @change="handleChangeCommon"
+  />
 </template>
 
 <script lang="ts">

+ 12 - 3
src/components/jeecg/JVxeTable/src/components/cells/JVxeTimeCell.vue

@@ -1,10 +1,19 @@
 <template>
-  <TimePicker :value="innerTimeValue" allowClear :format="format" dropdownClassName="j-vxe-time-picker" style="min-width: 0" v-bind="cellProps" @change="handleChange" />
+  <TimePicker
+    :value="innerTimeValue"
+    allowClear
+    :format="format"
+    dropdownClassName="j-vxe-time-picker"
+    style="min-width: 0"
+    v-bind="cellProps"
+    @change="handleChange"
+    :getPopupContainer="(node) => node.parentNode"
+  />
 </template>
 
 <script lang="ts">
   import { ref, computed, watch, defineComponent } from 'vue';
-  import moment from 'moment';
+  import dayjs from 'dayjs';
   import { TimePicker } from 'ant-design-vue';
   import { dispatchEvent } from '/@/components/jeecg/JVxeTable/utils';
   import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
@@ -28,7 +37,7 @@
           if (val == null || isEmpty(val)) {
             innerTimeValue.value = null;
           } else {
-            innerTimeValue.value = moment(val, format.value);
+            innerTimeValue.value = dayjs(val, format.value);
           }
         },
         { immediate: true }

+ 4 - 2
src/components/jeecg/JVxeTable/src/hooks/useData.ts

@@ -29,8 +29,8 @@ export function useData(props: JVxeTableProps): JVxeDataProps {
         activeMethod: () => !props.disabled,
       },
       expandConfig: {
-        iconClose: 'ant-table-row-expand-icon ant-table-row-collapsed',
-        iconOpen: 'ant-table-row-expand-icon ant-table-row-expanded',
+        iconClose: 'ant-table-row-expand-icon ant-table-row-expand-icon-collapsed',
+        iconOpen: 'ant-table-row-expand-icon ant-table-row-expand-icon-expanded',
       },
       // 虚拟滚动配置,y轴大于xx条数据时启用虚拟滚动
       scrollY: {
@@ -38,6 +38,8 @@ export function useData(props: JVxeTableProps): JVxeDataProps {
       },
       scrollX: {
         gt: 20,
+        // 暂时关闭左右虚拟滚动
+        enabled: false,
       },
       radioConfig: { highlight: true },
       checkboxConfig: { highlight: true },

+ 1 - 1
src/components/jeecg/JVxeTable/src/hooks/useJVxeComponent.ts

@@ -139,7 +139,7 @@ export function useJVxeComponent(props: JVxeComponent.Props) {
   /** 通用处理 change 事件 */
   function handleChangeCommon($value) {
     let newValue = enhanced.getValue($value, ctx);
-    let oldValue = value.value;
+    let oldValue = value.value
     trigger('change', { value: newValue });
     // 触发valueChange事件
     parentTrigger('valueChange', {

+ 14 - 4
src/components/jeecg/JVxeTable/src/hooks/useMethods.ts

@@ -366,6 +366,8 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps,
     isOnlineJS?: boolean;
     // 是否激活编辑状态
     setActive?: boolean;
+    //是否需要触发change事件
+    emitChange?:boolean
   }
 
   /**
@@ -376,7 +378,13 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps,
    * @return
    */
   async function addRows(rows: Recordable | Recordable[] = {}, options?: IAddRowsOptions) {
-    return addOrInsert(rows, -1, 'added', options);
+    //update-begin-author:taoyan date:2022-8-12 for: VUEN-1892【online子表弹框】有主从关联js时,子表弹框修改了数据,主表字段未修改
+    let result = await addOrInsert(rows, -1, 'added', options);
+    if(options && options!.emitChange==true){
+      trigger('valueChange', {column: 'all', row: result.row})
+    }
+    return result;
+    //update-end-author:taoyan date:2022-8-12 for: VUEN-1892【online子表弹框】有主从关联js时,子表弹框修改了数据,主表字段未修改
   }
 
   /**
@@ -563,6 +571,7 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps,
               col: column.params,
               column: column,
               isSetValues: true,
+              row: {...row}
             });
             count++;
           }
@@ -753,6 +762,7 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps,
     emit(name, event);
   }
 
+
   /**
    * 获取选中的行-和 getSelectionData 区别在于对于新增的行也会返回ID
    * 用于onlinePopForm
@@ -760,15 +770,15 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps,
    */
   function getSelectedData(isFull?: boolean) {
     const xTable = getXTable();
-    let rows: any[] = [];
+    let rows:any[] = []
     if (props.rowSelectionType === JVxeTypes.rowRadio) {
       let row = xTable.getRadioRecord(isFull);
       if (isNull(row)) {
         return [];
       }
-      rows = [row];
+      rows = [row]
     } else {
-      rows = xTable.getCheckboxRecords(isFull);
+      rows = xTable.getCheckboxRecords(isFull)
     }
     let records: Recordable[] = [];
     for (let row of rows) {

+ 1 - 1
src/components/jeecg/JVxeTable/src/hooks/useToolbar.ts

@@ -24,7 +24,7 @@ export function useToolbar(props: JVxeTableProps, data: JVxeDataProps, methods:
             let deleteRows = methods.filterNewRows(data.selectedRows.value);
             // 触发删除事件
             if (deleteRows.length > 0) {
-              let removeEvent: any = { deleteRows, $table };
+              let removeEvent: any = { deleteRows, $table};
               if (props.asyncRemove) {
                 // 确认删除,只有调用这个方法才会真删除
                 removeEvent.confirmRemove = () => methods.removeSelection();

+ 4 - 0
src/components/jeecg/JVxeTable/src/install.ts

@@ -46,6 +46,10 @@ export function registerJVxeTable(app: App) {
       if (className.includes('j-popup-modal') || className.includes('j-depart-select-modal') || className.includes('j-user-select-modal')) {
         return false;
       }
+      // 点击的是日期选择器
+      if (className.includes('j-vxe-date-picker')) {
+        return false;
+      }
       // 执行增强
       let flag = interceptor['event.clearActived.className']?.call(this, className, ...arguments);
       if (flag === false) {

+ 23 - 0
src/components/jeecg/JVxeTable/src/style/index.less

@@ -72,4 +72,27 @@
   .vxe-body--row.sortable-chosen {
     background-color: #dfecfb;
   }
+
+  // ----------- 【VUEN-1691】默认隐藏滚动条,鼠标放上去才显示 -------------------------------------------
+  .vxe-table {
+    //.vxe-table--footer-wrapper.body--wrapper,
+    .vxe-table--body-wrapper.body--wrapper {
+      overflow-x: hidden;
+    }
+    
+    &:hover {
+      //.vxe-table--footer-wrapper.body--wrapper,
+      .vxe-table--body-wrapper.body--wrapper {
+        overflow-x: auto;
+      }
+    }
+  }
+  // ----------- 【VUEN-1691】默认隐藏滚动条,鼠标放上去才显示 -------------------------------------------
+
+  // 调整展开/收起图标样式
+  .vxe-table--render-default .vxe-table--expanded .vxe-table--expand-btn {
+    width: 17px;
+    height: 17px;
+  }
+
 }