jeecgboot3.4.2版本发布,行编辑组件功能优化
parent
f94b99c169
commit
65af3c3804
|
@ -42,6 +42,7 @@ export default defineComponent({
|
||||||
return h(
|
return h(
|
||||||
'div',
|
'div',
|
||||||
{
|
{
|
||||||
|
class: this.$attrs.class,
|
||||||
style: this.$attrs.style,
|
style: this.$attrs.style,
|
||||||
},
|
},
|
||||||
h(
|
h(
|
||||||
|
|
|
@ -24,7 +24,13 @@ const componentMap = new Map<JVxeTypes | string, JVxeVueComponent>();
|
||||||
export const spanEnds: string = ':span';
|
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,
|
||||||
|
];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 注册组件
|
* 注册组件
|
||||||
|
|
|
@ -1,10 +1,19 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { ref, computed, watch, defineComponent } from 'vue';
|
import { ref, computed, watch, defineComponent } from 'vue';
|
||||||
import moment from 'moment';
|
import dayjs from 'dayjs';
|
||||||
import { dispatchEvent } from '/@/components/jeecg/JVxeTable/utils';
|
import { dispatchEvent } from '/@/components/jeecg/JVxeTable/utils';
|
||||||
import { JVxeComponent, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
|
import { JVxeComponent, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
|
||||||
import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
|
import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
|
||||||
|
@ -27,7 +36,7 @@
|
||||||
if (val == null || isEmpty(val)) {
|
if (val == null || isEmpty(val)) {
|
||||||
innerDateValue.value = null;
|
innerDateValue.value = null;
|
||||||
} else {
|
} else {
|
||||||
innerDateValue.value = moment(val, dateFormat.value);
|
innerDateValue.value = dayjs(val, dateFormat.value);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
|
|
|
@ -67,6 +67,10 @@
|
||||||
getValue(value, ctx) {
|
getValue(value, ctx) {
|
||||||
if (ctx?.props?.type === JVxeTypes.inputNumber && isString(value)) {
|
if (ctx?.props?.type === JVxeTypes.inputNumber && isString(value)) {
|
||||||
if (NumberRegExp.test(value)) {
|
if (NumberRegExp.test(value)) {
|
||||||
|
// 【issues/I5IHN7】修复无法输入小数点的bug
|
||||||
|
if (/\.0*$/.test(value)) {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
return Number.parseFloat(value);
|
return Number.parseFloat(value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<a-radio-group :class="clazz" :value="innerValue" v-bind="cellProps" @change="(e) => handleChangeCommon(e.target.value)">
|
<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>
|
</a-radio-group>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,14 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
|
@ -1,10 +1,19 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { ref, computed, watch, defineComponent } from 'vue';
|
import { ref, computed, watch, defineComponent } from 'vue';
|
||||||
import moment from 'moment';
|
import dayjs from 'dayjs';
|
||||||
import { TimePicker } from 'ant-design-vue';
|
import { TimePicker } from 'ant-design-vue';
|
||||||
import { dispatchEvent } from '/@/components/jeecg/JVxeTable/utils';
|
import { dispatchEvent } from '/@/components/jeecg/JVxeTable/utils';
|
||||||
import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
|
import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
|
||||||
|
@ -28,7 +37,7 @@
|
||||||
if (val == null || isEmpty(val)) {
|
if (val == null || isEmpty(val)) {
|
||||||
innerTimeValue.value = null;
|
innerTimeValue.value = null;
|
||||||
} else {
|
} else {
|
||||||
innerTimeValue.value = moment(val, format.value);
|
innerTimeValue.value = dayjs(val, format.value);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
|
|
|
@ -29,8 +29,8 @@ export function useData(props: JVxeTableProps): JVxeDataProps {
|
||||||
activeMethod: () => !props.disabled,
|
activeMethod: () => !props.disabled,
|
||||||
},
|
},
|
||||||
expandConfig: {
|
expandConfig: {
|
||||||
iconClose: 'ant-table-row-expand-icon ant-table-row-collapsed',
|
iconClose: 'ant-table-row-expand-icon ant-table-row-expand-icon-collapsed',
|
||||||
iconOpen: 'ant-table-row-expand-icon ant-table-row-expanded',
|
iconOpen: 'ant-table-row-expand-icon ant-table-row-expand-icon-expanded',
|
||||||
},
|
},
|
||||||
// 虚拟滚动配置,y轴大于xx条数据时启用虚拟滚动
|
// 虚拟滚动配置,y轴大于xx条数据时启用虚拟滚动
|
||||||
scrollY: {
|
scrollY: {
|
||||||
|
@ -38,6 +38,8 @@ export function useData(props: JVxeTableProps): JVxeDataProps {
|
||||||
},
|
},
|
||||||
scrollX: {
|
scrollX: {
|
||||||
gt: 20,
|
gt: 20,
|
||||||
|
// 暂时关闭左右虚拟滚动
|
||||||
|
enabled: false,
|
||||||
},
|
},
|
||||||
radioConfig: { highlight: true },
|
radioConfig: { highlight: true },
|
||||||
checkboxConfig: { highlight: true },
|
checkboxConfig: { highlight: true },
|
||||||
|
|
|
@ -139,7 +139,7 @@ export function useJVxeComponent(props: JVxeComponent.Props) {
|
||||||
/** 通用处理 change 事件 */
|
/** 通用处理 change 事件 */
|
||||||
function handleChangeCommon($value) {
|
function handleChangeCommon($value) {
|
||||||
let newValue = enhanced.getValue($value, ctx);
|
let newValue = enhanced.getValue($value, ctx);
|
||||||
let oldValue = value.value;
|
let oldValue = value.value
|
||||||
trigger('change', { value: newValue });
|
trigger('change', { value: newValue });
|
||||||
// 触发valueChange事件
|
// 触发valueChange事件
|
||||||
parentTrigger('valueChange', {
|
parentTrigger('valueChange', {
|
||||||
|
|
|
@ -366,6 +366,8 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps,
|
||||||
isOnlineJS?: boolean;
|
isOnlineJS?: boolean;
|
||||||
// 是否激活编辑状态
|
// 是否激活编辑状态
|
||||||
setActive?: boolean;
|
setActive?: boolean;
|
||||||
|
//是否需要触发change事件
|
||||||
|
emitChange?:boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -376,7 +378,13 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps,
|
||||||
* @return
|
* @return
|
||||||
*/
|
*/
|
||||||
async function addRows(rows: Recordable | Recordable[] = {}, options?: IAddRowsOptions) {
|
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,
|
col: column.params,
|
||||||
column: column,
|
column: column,
|
||||||
isSetValues: true,
|
isSetValues: true,
|
||||||
|
row: {...row}
|
||||||
});
|
});
|
||||||
count++;
|
count++;
|
||||||
}
|
}
|
||||||
|
@ -753,6 +762,7 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps,
|
||||||
emit(name, event);
|
emit(name, event);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取选中的行-和 getSelectionData 区别在于对于新增的行也会返回ID
|
* 获取选中的行-和 getSelectionData 区别在于对于新增的行也会返回ID
|
||||||
* 用于onlinePopForm
|
* 用于onlinePopForm
|
||||||
|
@ -760,15 +770,15 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps,
|
||||||
*/
|
*/
|
||||||
function getSelectedData(isFull?: boolean) {
|
function getSelectedData(isFull?: boolean) {
|
||||||
const xTable = getXTable();
|
const xTable = getXTable();
|
||||||
let rows: any[] = [];
|
let rows:any[] = []
|
||||||
if (props.rowSelectionType === JVxeTypes.rowRadio) {
|
if (props.rowSelectionType === JVxeTypes.rowRadio) {
|
||||||
let row = xTable.getRadioRecord(isFull);
|
let row = xTable.getRadioRecord(isFull);
|
||||||
if (isNull(row)) {
|
if (isNull(row)) {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
rows = [row];
|
rows = [row]
|
||||||
} else {
|
} else {
|
||||||
rows = xTable.getCheckboxRecords(isFull);
|
rows = xTable.getCheckboxRecords(isFull)
|
||||||
}
|
}
|
||||||
let records: Recordable[] = [];
|
let records: Recordable[] = [];
|
||||||
for (let row of rows) {
|
for (let row of rows) {
|
||||||
|
|
|
@ -24,7 +24,7 @@ export function useToolbar(props: JVxeTableProps, data: JVxeDataProps, methods:
|
||||||
let deleteRows = methods.filterNewRows(data.selectedRows.value);
|
let deleteRows = methods.filterNewRows(data.selectedRows.value);
|
||||||
// 触发删除事件
|
// 触发删除事件
|
||||||
if (deleteRows.length > 0) {
|
if (deleteRows.length > 0) {
|
||||||
let removeEvent: any = { deleteRows, $table };
|
let removeEvent: any = { deleteRows, $table};
|
||||||
if (props.asyncRemove) {
|
if (props.asyncRemove) {
|
||||||
// 确认删除,只有调用这个方法才会真删除
|
// 确认删除,只有调用这个方法才会真删除
|
||||||
removeEvent.confirmRemove = () => methods.removeSelection();
|
removeEvent.confirmRemove = () => methods.removeSelection();
|
||||||
|
|
|
@ -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')) {
|
if (className.includes('j-popup-modal') || className.includes('j-depart-select-modal') || className.includes('j-user-select-modal')) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
// 点击的是日期选择器
|
||||||
|
if (className.includes('j-vxe-date-picker')) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
// 执行增强
|
// 执行增强
|
||||||
let flag = interceptor['event.clearActived.className']?.call(this, className, ...arguments);
|
let flag = interceptor['event.clearActived.className']?.call(this, className, ...arguments);
|
||||||
if (flag === false) {
|
if (flag === false) {
|
||||||
|
|
|
@ -72,4 +72,27 @@
|
||||||
.vxe-body--row.sortable-chosen {
|
.vxe-body--row.sortable-chosen {
|
||||||
background-color: #dfecfb;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue