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

2022-09-22 14:04:52 +08:00 · 2022-09-22 14:04:52 +08:00 · 65af3c3804
parent f94b99c169
commit 65af3c3804
13 changed files with 97 additions and 18 deletions
--- a/src/components/jeecg/JVxeTable/src/JVxeTable.ts
+++ b/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(
--- a/src/components/jeecg/JVxeTable/src/componentMap.ts
+++ b/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,
+];

 /**
 * 注册组件
--- a/src/components/jeecg/JVxeTable/src/components/cells/JVxeDateCell.vue
+++ b/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 }
--- a/src/components/jeecg/JVxeTable/src/components/cells/JVxeInputCell.vue
+++ b/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>
--- a/src/components/jeecg/JVxeTable/src/components/cells/JVxeRadioCell.vue
+++ b/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>

--- a/src/components/jeecg/JVxeTable/src/components/cells/JVxeTextareaCell.vue
+++ b/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">
--- a/src/components/jeecg/JVxeTable/src/components/cells/JVxeTimeCell.vue
+++ b/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 }
--- a/src/components/jeecg/JVxeTable/src/hooks/useData.ts
+++ b/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 },
--- a/src/components/jeecg/JVxeTable/src/hooks/useJVxeComponent.ts
+++ b/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', {
--- a/src/components/jeecg/JVxeTable/src/hooks/useMethods.ts
+++ b/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) {
--- a/src/components/jeecg/JVxeTable/src/hooks/useToolbar.ts
+++ b/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();
--- a/src/components/jeecg/JVxeTable/src/install.ts
+++ b/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) {
--- a/src/components/jeecg/JVxeTable/src/style/index.less
+++ b/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;
+  }
+
 }