<script lang="ts" setup>
|
import type { ActionItem, SorterResult, TableActionType } from '@jnpf/ui/vxeTable';
|
|
import { computed, nextTick, onMounted, reactive, ref, toRefs, unref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { QrCode } from '@jnpf/ui';
|
import { BasicForm, useForm } from '@jnpf/ui/form';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
import { encryptByMd5, getScriptFunc, thousandsFormat } from '@jnpf/utils';
|
|
import { UnlockOutlined } from '@ant-design/icons-vue';
|
import { cloneDeep, omit } from 'lodash-es';
|
import { Grid as VxeGrid } from 'vxe-table';
|
|
import { checkPwd, getConfig, getModelList } from '#/api/onlineDev/shortLink';
|
import { slotsList } from '#/components/FormGenerator/src/helper/config';
|
import { getSearchFormSchemas } from '#/components/FormGenerator/src/helper/transform';
|
import { $t } from '#/locales';
|
|
import ChildTableColumn from '../../dynamicModel/list/ChildTableColumn.vue';
|
import Detail from './detail/index.vue';
|
|
interface State {
|
config: any;
|
columnData: any;
|
formConf: any;
|
hasBatchBtn: boolean;
|
columnBtnsList: any[];
|
customBtnsList: any[];
|
columnOptions: any[];
|
treeFieldNames: any;
|
leftTreeData: any[];
|
leftTreeLoading: boolean;
|
treeActiveId: string;
|
treeActiveNodePath: any;
|
columns: any[];
|
complexColumns: any[];
|
childColumnList: any[];
|
mergeList: any[];
|
exportList: any[];
|
cacheList: any[];
|
currFlow: any;
|
isCustomCopy: boolean;
|
candidateType: number;
|
currRow: any;
|
workFlowFormData: any;
|
expandObj: any;
|
columnSettingList: any[];
|
searchSchemas: any[];
|
treeRelationObj: any;
|
customRow: any;
|
customCell: any;
|
columnLink: string;
|
btnLoading: boolean;
|
key: number;
|
shortLinkId: string;
|
columnPassUse: number;
|
password: string;
|
realSearchList: any[];
|
realColumnList: any[];
|
rowStyle: any;
|
cellStyle: any;
|
}
|
|
const props = defineProps(['config', 'modelId', 'isPreview']);
|
const { createMessage } = useMessage();
|
const tableRef = ref<Nullable<TableActionType>>(null);
|
const detailRef = ref<any>(null);
|
const searchInfo = reactive({
|
modelId: '',
|
queryJson: '',
|
superQueryJson: '',
|
encryption: props.config.encryption,
|
});
|
const state = reactive<State>({
|
config: {},
|
columnData: {},
|
formConf: {},
|
hasBatchBtn: false,
|
columnBtnsList: [],
|
customBtnsList: [],
|
columnOptions: [],
|
treeFieldNames: {
|
children: 'children',
|
title: 'fullName',
|
key: 'id',
|
isLeaf: 'isLeaf',
|
},
|
leftTreeData: [],
|
leftTreeLoading: false,
|
treeActiveId: '',
|
treeActiveNodePath: [],
|
columns: [],
|
complexColumns: [], // 复杂表头
|
childColumnList: [],
|
mergeList: [],
|
exportList: [],
|
cacheList: [],
|
currFlow: {},
|
isCustomCopy: false,
|
candidateType: 1,
|
currRow: {},
|
workFlowFormData: {},
|
expandObj: {},
|
columnSettingList: [],
|
searchSchemas: [],
|
treeRelationObj: null,
|
customRow: null,
|
customCell: null,
|
columnLink: '',
|
btnLoading: false,
|
key: Date.now(),
|
shortLinkId: '',
|
columnPassUse: -1,
|
password: '',
|
realSearchList: [],
|
realColumnList: [],
|
rowStyle: null,
|
cellStyle: null,
|
});
|
const { columnData, childColumnList, searchSchemas, btnLoading, columnPassUse, password, columns } = toRefs(state);
|
const validFieldsList = new Set([
|
'alert',
|
'card',
|
'collapse',
|
'collapseItem',
|
'colorPicker',
|
'datePicker',
|
'divider',
|
'editor',
|
'groupTitle',
|
'iframe',
|
'input',
|
'inputNumber',
|
'link',
|
'location',
|
'rate',
|
'row',
|
'slider',
|
'stepItem',
|
'steps',
|
'switch',
|
'tab',
|
'tabItem',
|
'table',
|
'tableGrid',
|
'tableGridTd',
|
'tableGridTr',
|
'text',
|
'textarea',
|
'timePicker',
|
]);
|
const selectFieldsList = new Set(['cascader', 'checkbox', 'radio', 'select', 'treeSelect']);
|
const [registerSearchForm, { submit: searchFormSubmit }] = useForm({
|
baseColProps: { span: 6 },
|
showActionButtonGroup: true,
|
showAdvancedButton: true,
|
compact: true,
|
});
|
const [registerTable, { reload, setLoading, redoHeight }] = useVxeTable({
|
api: getModelList,
|
immediate: false,
|
afterFetch: (data) => {
|
// 行内编辑
|
if (state.columnData.type === 4) {
|
const list = data.map((o) => ({ ...o, rowEdit: false }));
|
state.cacheList = cloneDeep(list);
|
return list;
|
}
|
const list = data.map((o) => ({
|
...o,
|
...state.expandObj,
|
}));
|
state.cacheList = cloneDeep(list);
|
// 分组表格
|
if (state.columnData.type === 3) {
|
list.map((o) => {
|
if (o.children && o.children.length) {
|
o.children = o.children.map((e) => ({
|
...e,
|
...state.expandObj,
|
}));
|
}
|
return o;
|
});
|
}
|
return list;
|
},
|
});
|
|
const getPagination = computed(() => {
|
if ([3, 5].includes(state.columnData.type) || !state.columnData.hasPage) return false;
|
return { pageSize: state.columnData.pageSize };
|
});
|
const getChildTableStyle = computed(() => (state.columnData.type == 3 || state.columnData.type == 5 ? 1 : state.columnData.childTableStyle));
|
const getColumns = computed(() => (unref(getChildTableStyle) == 2 || state.columnData.type == 4 ? state.columns : state.complexColumns));
|
const getTableBindValue = computed(() => {
|
// type,format 跟vxe-table 有冲突
|
const columns = unref(getColumns).map((o) => ({ ...omit(o, ['type', 'format']) }));
|
const defaultSortConfig = (state.columnData.defaultSortConfig || []).map((o) => (o.sort === 'desc' ? '-' : '') + o.field);
|
const data: any = {
|
pagination: unref(getPagination),
|
searchInfo: unref(searchInfo),
|
defSort: { sidx: defaultSortConfig.join(',') },
|
sortConfig: { multiple: true },
|
sortFn: (sortInfo: SorterResult | SorterResult[]) => {
|
if (Array.isArray(sortInfo)) {
|
const sortList = sortInfo.map((o) => (o.order === 'desc' ? '-' : '') + o.field);
|
return { sidx: sortList.join(',') };
|
} else {
|
const { field, order } = sortInfo;
|
return field && order ? { sidx: (order === 'desc' ? '-' : '') + field } : {};
|
}
|
},
|
columns,
|
// 有子表且子表折叠展示
|
showExpandColumn: unref(getChildTableStyle) == 2 && [1, 2].includes(state.columnData.type) && !!state.childColumnList.length,
|
clearSelectOnPageChange: true,
|
showOverflow: false,
|
isTreeTable: [3, 5].includes(state.columnData.type),
|
border: (unref(getChildTableStyle) != 2 && !!state.childColumnList?.length) || !!state.columnData.complexHeaderList?.length,
|
showFooter: state.columnData.showSummary && [1, 2, 4].includes(state.columnData.type),
|
columnConfig: {
|
resizable: !!state.columnData.resizable,
|
},
|
};
|
data.actionColumn = {
|
width: 50,
|
title: $t('component.table.action'),
|
dataIndex: 'action',
|
fixed: 'right',
|
};
|
// 有子表且子表分组展示
|
if (unref(getChildTableStyle) === 1 && state.childColumnList.length) data.spanMethod = spanMethod;
|
// 列表合计
|
if (state.columnData.showSummary) data.footerMethod = footerMethod;
|
// 行样式
|
if (state.rowStyle) data.rowStyle = state.rowStyle;
|
// 单元格样式
|
if (state.cellStyle) data.cellStyle = state.cellStyle;
|
return data;
|
});
|
const getSummaryColumn = computed(() => {
|
let defaultColumns = unref(getColumns);
|
// 处理列固定
|
if (state.columnSettingList?.length) {
|
for (const defaultColumn of defaultColumns) {
|
inner: for (let j = 0; j < state.columnSettingList.length; j++) {
|
if (defaultColumn.dataIndex === state.columnSettingList[j].dataIndex) {
|
defaultColumn.fixed = state.columnSettingList[j].fixed;
|
defaultColumn.visible = state.columnSettingList[j].visible;
|
break inner;
|
}
|
}
|
}
|
defaultColumns = defaultColumns.filter((o) => o.visible);
|
}
|
const columns: any[] = [];
|
for (const e of defaultColumns) {
|
if (e.jnpfKey === 'table' || e.jnpfKey === 'complexHeader') {
|
if (e.children?.length) columns.push(...e.children);
|
} else {
|
columns.push(e);
|
}
|
if (e.fixed && e.children?.length) {
|
for (let j = 0; j < e.children.length; j++) {
|
e.children[j].fixed = e.fixed;
|
}
|
}
|
}
|
const leftFixedList = columns.filter((o) => o.fixed === 'left');
|
const rightFixedList = columns.filter((o) => o.fixed === 'right');
|
const noFixedList = columns.filter((o) => o.fixed !== 'left' && o.fixed !== 'right');
|
return [...leftFixedList, ...rightFixedList, ...noFixedList];
|
});
|
|
function getCmpValOfRow(row, key) {
|
const isSummary = (key) => state.columnData.summaryField.includes(key);
|
if (!state.columnData.summaryField.length || !isSummary(key)) return 0;
|
const target = row[key];
|
if (!target) return 0;
|
const data = Number.isNaN(target) ? 0 : Number(target);
|
return data;
|
}
|
function getTableActions(record): ActionItem[] {
|
return [{ label: $t('common.detailText'), onClick: columnBtnsHandle.bind(null, 'detail', record) }];
|
}
|
// 行按钮点击事件
|
function columnBtnsHandle(key, record) {
|
if (key === 'detail') return goDetail(record);
|
}
|
// 查看详情
|
function goDetail(record) {
|
const formConf = cloneDeep(state.formConf);
|
formConf.fields = getRealFields(formConf.fields);
|
const data = {
|
id: record.id,
|
formConf,
|
modelId: props.modelId,
|
useFormPermission: false,
|
encryption: props.config.encryption,
|
};
|
detailRef.value?.init(data);
|
}
|
function validFields(o) {
|
if (!o.__config__ || !o.__config__.jnpfKey) return true;
|
const jnpfKey = o.__config__.jnpfKey;
|
if (validFieldsList.has(jnpfKey) || (selectFieldsList.has(jnpfKey) && o.__config__.dataType === 'static')) return true;
|
return false;
|
}
|
function getRealFields(list) {
|
const newList = list.filter((item) => validFields(item));
|
newList.forEach((o) => o.__config__?.children && Array.isArray(o.__config__.children) && (o.__config__.children = getRealFields(o.__config__.children)));
|
return newList;
|
}
|
function init() {
|
state.config = {
|
modelId: props.modelId,
|
isPreview: props.isPreview,
|
...props.config,
|
};
|
searchInfo.modelId = props.modelId;
|
if (!state.config.columnData || (state.config.webType != '4' && !state.config.formData)) return;
|
state.columnData = JSON.parse(state.config.columnData);
|
state.columnData.type = 1;
|
state.columnData.searchList = state.realSearchList;
|
state.columnData.columnList = state.realColumnList;
|
if (state.columnData.type === 3) {
|
state.columnData.columnList = state.columnData.columnList.filter((o) => o.prop != state.columnData.groupField);
|
}
|
state.hasBatchBtn = state.columnData.btnsList.some((o) => ['batchPrint', 'batchRemove'].includes(o.value));
|
state.formConf = state.config.formData ? JSON.parse(state.config.formData) : {};
|
state.formConf.popupType = 'general';
|
state.columnOptions = state.columnData.columnOptions || [];
|
setLoading(true);
|
if (state.columnData.funcs.rowStyle) {
|
state.customRow = (record, index) => {
|
const data = { row: record, rowIndex: index };
|
const func: any = getScriptFunc(state.columnData.funcs.rowStyle);
|
const style: any = func ? func(data) : null;
|
if (!style) return {};
|
return { style };
|
};
|
}
|
if (state.columnData.funcs.cellStyle) {
|
state.customCell = (record, rowIndex, column) => {
|
const data = { row: record, rowIndex, column, columnIndex: column.key };
|
const func: any = getScriptFunc(state.columnData.funcs.cellStyle);
|
const style: any = func ? func(data) : null;
|
if (!style) return {};
|
return { style };
|
};
|
}
|
getSearchSchemas();
|
getColumnList();
|
if (state.columnData.funcs.rowStyle) state.rowStyle = getScriptFunc(state.columnData.funcs.rowStyle) || null;
|
if (state.columnData.funcs.cellStyle) state.cellStyle = getScriptFunc(state.columnData.funcs.cellStyle) || null;
|
if (props.isPreview) return setLoading(false);
|
nextTick(() => {
|
state.columnData.searchList?.length ? searchFormSubmit() : reload({ page: 1 });
|
});
|
}
|
function getSearchSchemas() {
|
if (state.columnData.treeRelation) {
|
for (let i = 0; i < state.columnData.searchList.length; i++) {
|
const e = state.columnData.searchList[i];
|
if (e.id === state.columnData.treeRelation) {
|
state.treeRelationObj = e;
|
break;
|
}
|
}
|
// 搜索字段里无左侧树关联字段时，去全部字段里获取关联字段属性
|
if (!state.treeRelationObj) {
|
for (let i = 0; i < state.columnData.columnOptions.length; i++) {
|
const e = state.columnData.columnOptions[i];
|
if (e.id === state.columnData.treeRelation) {
|
state.treeRelationObj = { ...e, searchMultiple: false, jnpfKey: e.__config__.jnpfKey };
|
break;
|
}
|
}
|
}
|
}
|
const schemas = getSearchFormSchemas(state.columnData.searchList);
|
state.searchSchemas = schemas;
|
}
|
function getColumnList() {
|
const columnList: any[] = state.columnData.columnList;
|
state.exportList = columnList;
|
let columns = columnList.map((o) => {
|
const item: any = {
|
...o,
|
placeholder: state.columnData.type == 4 && o.placeholderI18nCode ? $t(o.placeholderI18nCode, o.placeholder) : o.placeholder,
|
title: o.labelI18nCode ? $t(o.labelI18nCode, o.label) : o.label,
|
dataIndex: o.prop,
|
align: o.align,
|
fixed: o.fixed == 'none' ? '' : o.fixed,
|
sortable: o.sortable,
|
width: o.width || '',
|
minWidth: o.width || 100,
|
};
|
// 行内编辑和部分控件加插槽
|
if ((state.columnData.type === 4 || slotsList.includes(item.jnpfKey)) && !item.dataIndex.includes('-')) {
|
item.slots = { default: item.prop };
|
}
|
item.showOverflow = !!(state.columnData.showOverflow && item.jnpfKey !== 'rate' && state.columnData.type !== 4);
|
return item;
|
});
|
if (state.columnData.type !== 3 && state.columnData.type !== 5) columns = getComplexColumns(columns);
|
state.columns = columns.filter((o) => !o.prop.includes('-'));
|
getChildComplexColumns(columns);
|
}
|
function getComplexColumns(columns) {
|
let complexHeaderList: any[] = state.columnData.complexHeaderList || [];
|
if (!complexHeaderList.length) return columns;
|
const childColumns: any[] = [];
|
const firstChildColumns: string[] = [];
|
for (const e of complexHeaderList) {
|
e.label = e.fullName;
|
e.labelI18nCode = e.fullNameI18nCode;
|
e.title = e.fullNameI18nCode ? $t(e.fullNameI18nCode, e.fullName) : e.fullName;
|
e.dataIndex = e.id;
|
e.prop = e.id;
|
e.children = [];
|
e.jnpfKey = 'complexHeader';
|
if (e.childColumns?.length) {
|
childColumns.push(...e.childColumns);
|
for (let k = 0; k < e.childColumns.length; k++) {
|
const item = e.childColumns[k];
|
for (const o of columns) {
|
if (o.prop == item && o.fixed !== 'left' && o.fixed !== 'right') e.children.push({ ...omit(o, ['fixed']) });
|
}
|
}
|
}
|
if (e.children.length) firstChildColumns.push(e.children[0].prop);
|
}
|
complexHeaderList = complexHeaderList.filter((o) => o.children.length);
|
const list: any[] = [];
|
for (const e of columns) {
|
if (!childColumns.includes(e.prop) || e.fixed === 'left' || e.fixed === 'right') {
|
list.push(e);
|
} else {
|
if (firstChildColumns.includes(e.prop)) {
|
const item = complexHeaderList.find((o) => o.childColumns.includes(e.prop));
|
list.push(item);
|
}
|
}
|
}
|
return list;
|
}
|
function getChildComplexColumns(columnList) {
|
const list: any[] = [];
|
for (const e of columnList) {
|
if (e.prop.includes('-')) {
|
const prop = e.prop.split('-')[0];
|
let label = e.label.split('-')[0];
|
const childLabel = e.label.replace(`${label}-`, '');
|
if (e.fullNameI18nCode && Array.isArray(e.fullNameI18nCode) && e.fullNameI18nCode[0]) label = $t(e.fullNameI18nCode[0], label);
|
const newItem = {
|
align: 'center',
|
jnpfKey: 'table',
|
prop,
|
label,
|
title: label,
|
dataIndex: prop,
|
children: [],
|
customCell: state.customCell || null,
|
};
|
e.dataIndex = e.prop;
|
e.title = e.__config__?.labelI18nCode ? $t(e.__config__.labelI18nCode, childLabel) : childLabel;
|
if (!Object.prototype.hasOwnProperty.call(state.expandObj, `${prop}Expand`)) state.expandObj[`${prop}Expand`] = false;
|
if (!list.some((o) => o.prop === prop)) list.push(newItem);
|
for (const element of list) {
|
if (element.prop === prop) {
|
const childItem =
|
!element.children.length && unref(getChildTableStyle) == 1
|
? { ...e, slots: { default: element.dataIndex }, showOverflow: false, className: 'child-table-box' }
|
: e;
|
element.children.push({ ...omit(childItem, ['fixed']) });
|
break;
|
}
|
}
|
} else {
|
list.push(e);
|
}
|
}
|
if (unref(getChildTableStyle) != 2) getMergeList(list);
|
state.complexColumns = list;
|
state.childColumnList = list.filter((o) => o.jnpfKey === 'table');
|
// 子表分组展示若没设置宽度，默认取100
|
for (let i = 0; i < state.childColumnList.length; i++) {
|
const e = state.childColumnList[i];
|
if (e.children?.length) {
|
e.children = e.children.map((o) => {
|
const item = { ...o };
|
if (unref(getChildTableStyle) == 2) {
|
item.field = o.id;
|
item.dataIndex = o.id;
|
if (state.columnData.type === 4 || slotsList.includes(item.jnpfKey)) {
|
item.slots = { default: item.dataIndex };
|
}
|
item.width = o.width || '';
|
item.minWidth = o.width || 100;
|
} else {
|
item.width = o.width || '';
|
item.minWidth = o.width || 100;
|
}
|
return item;
|
});
|
}
|
}
|
}
|
function getMergeList(list) {
|
list.forEach((item) => {
|
if (item.jnpfKey === 'table' && item.children && item.children.length) {
|
item.children.forEach((child, index) => {
|
state.mergeList.push({
|
prop: child.prop,
|
rowspan: index == 0 ? 1 : 0,
|
colspan: index == 0 ? item.children.length : 0,
|
});
|
});
|
}
|
});
|
}
|
function spanMethod({ column }) {
|
for (let i = 0; i < state.mergeList.length; i++) {
|
if (column.property == state.mergeList[i].prop) {
|
return { rowspan: state.mergeList[i].rowspan, colspan: state.mergeList[i].colspan };
|
}
|
}
|
}
|
// 列表合计
|
function footerMethod({ columns, data }) {
|
const isSummary = (key) => state.columnData.summaryField.includes(key);
|
const useThousands = (key) => unref(getSummaryColumn).some((o) => o.__vModel__ === key && o.thousands);
|
return [
|
columns.map((column, columnIndex) => {
|
if (columnIndex === 0) return '合计';
|
if (!data.length) return '';
|
let sumVal = data.reduce((sum, d) => sum + getCmpValOfRow(d, column.property), 0);
|
if (!isSummary(column.property)) sumVal = '';
|
sumVal = Number.isNaN(sumVal) ? '' : sumVal;
|
const realVal = sumVal && !Number.isInteger(sumVal) ? Number(sumVal).toFixed(2) : sumVal;
|
sumVal = useThousands(column.property) ? thousandsFormat(realVal) : realVal;
|
return sumVal;
|
}),
|
];
|
}
|
function toggleExpand(row, field) {
|
row[field] = !row[field];
|
}
|
function handleColumnChange(data) {
|
state.columnSettingList = data;
|
}
|
function handleSearchSubmit(data) {
|
const obj = {};
|
for (const [key, value] of Object.entries(data)) {
|
if (value) {
|
if (Array.isArray(value)) {
|
if (value.length) obj[key] = value;
|
} else {
|
obj[key] = value;
|
}
|
}
|
}
|
searchInfo.queryJson = JSON.stringify(obj) === '{}' ? '' : JSON.stringify(obj);
|
reload({ page: 1 });
|
}
|
function handleSearchReset() {
|
searchFormSubmit();
|
}
|
function unLock() {
|
if (!state.password) return createMessage.error($t('views.dynamicModel.passwordPlaceholder'));
|
state.btnLoading = true;
|
const query = {
|
id: state.shortLinkId,
|
type: 1,
|
encryption: props.config.encryption,
|
password: encryptByMd5(state.password),
|
};
|
checkPwd(query)
|
.then(() => {
|
state.btnLoading = false;
|
state.columnPassUse = 0;
|
init();
|
})
|
.catch(() => {
|
state.btnLoading = false;
|
});
|
}
|
|
onMounted(() => {
|
getConfig(props.modelId, props.config.encryption).then((res) => {
|
state.columnLink = res.data.columnLink || '';
|
state.shortLinkId = res.data.id || '';
|
state.columnPassUse = res.data.columnPassUse || 0;
|
state.realSearchList = res.data.columnCondition ? JSON.parse(res.data.columnCondition) : [];
|
state.realColumnList = res.data.columnText ? JSON.parse(res.data.columnText) : [];
|
if (state.columnPassUse) return;
|
init();
|
});
|
});
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper short-link-wrapper short-link-wrapper-list">
|
<div class="short-link-lock-wrapper" v-show="columnPassUse">
|
<div class="short-link-lock-form">
|
<a-input-group compact class="enter-y">
|
<a-input-password v-model:value="password" :placeholder="$t('views.dynamicModel.passwordPlaceholder')" @keyup.enter="unLock()" />
|
<a-button :loading="btnLoading" @click="unLock()">
|
<template #icon><UnlockOutlined /></template>
|
</a-button>
|
</a-input-group>
|
</div>
|
</div>
|
<div class="short-link-main" v-show="!columnPassUse">
|
<a-popover placement="bottomRight">
|
<template #content>
|
<p class="shortLink-tip">{{ $t('views.dynamicModel.scanAndShare') }}</p>
|
<QrCode :value="state.columnLink" :width="154" :options="{ margin: 1 }" class="my-[5px]" />
|
</template>
|
<i class="ym-custom ym-custom-qrcode icon-qrcode"></i>
|
</a-popover>
|
<div class="short-link-header">
|
{{ config.fullName }}
|
</div>
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-search-box" v-if="columnData.searchList?.length">
|
<BasicForm
|
@register="registerSearchForm"
|
:schemas="searchSchemas"
|
@advanced-change="redoHeight"
|
@submit="handleSearchSubmit"
|
@reset="handleSearchReset"
|
class="search-form" />
|
</div>
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable" v-bind="getTableBindValue" ref="tableRef" @columns-change="handleColumnChange">
|
<template #expandedRowRender="{ record }" v-if="getChildTableStyle === 2 && childColumnList.length">
|
<a-tabs size="small">
|
<a-tab-pane :key="cIndex" :tab="child.label" :label="child.label" v-for="(child, cIndex) in childColumnList">
|
<VxeGrid size="small" :data="record[child.prop]" :columns="child.children" :show-overflow="!!columnData.showOverflow">
|
<template #[column.dataIndex]="{ row: childRecord }" v-for="column in child.children" :key="column.dataIndex">
|
<template v-if="column.jnpfKey === 'rate'">
|
<jnpf-rate v-model:value="childRecord[column.dataIndex]" :count="column.count" :allow-half="column.allowHalf" disabled />
|
</template>
|
<template v-if="column.jnpfKey === 'slider'">
|
<jnpf-slider v-model:value="childRecord[column.dataIndex]" :min="column.min" :max="column.max" :step="column.step" disabled />
|
</template>
|
<template v-if="column.jnpfKey === 'input'">
|
<jnpf-input
|
v-model:value="childRecord[column.dataIndex]"
|
:use-mask="column.useMask"
|
:mask-config="column.maskConfig"
|
:show-overflow="columnData.showOverflow"
|
detailed />
|
</template>
|
</template>
|
</VxeGrid>
|
</a-tab-pane>
|
</a-tabs>
|
</template>
|
<template #[item.dataIndex]="{ record }" v-for="(item, index) in childColumnList" :key="item.dataIndex">
|
<ChildTableColumn
|
:data="record[item.prop]"
|
:head="item.children"
|
@toggle-expand="toggleExpand(record, `${item.prop}Expand`)"
|
:expand="record[`${item.prop}Expand`]"
|
:show-overflow="columnData.showOverflow"
|
:key="index" />
|
</template>
|
<template #[column.prop]="{ record }" v-for="column in columns" :key="column.prop">
|
<template v-if="!record.top">
|
<template v-if="column.jnpfKey === 'inputNumber'">
|
<jnpf-input-number v-model:value="record[column.dataIndex]" :precision="column.precision" :thousands="column.thousands" disabled detailed />
|
</template>
|
<template v-if="column.jnpfKey === 'calculate'">
|
<jnpf-calculate
|
v-model:value="record[column.dataIndex]"
|
:is-storage="column.isStorage"
|
:precision="column.precision"
|
:thousands="column.thousands"
|
:round-type="column.roundType"
|
:type="column.type"
|
:date-cal-config="column.dateCalConfig"
|
detailed />
|
</template>
|
<template v-if="column.jnpfKey === 'rate'">
|
<jnpf-rate v-model:value="record[column.dataIndex]" :count="column.count" :allow-half="column.allowHalf" disabled />
|
</template>
|
<template v-if="column.jnpfKey === 'slider'">
|
<jnpf-slider v-model:value="record[column.dataIndex]" :min="column.min" :max="column.max" :step="column.step" disabled />
|
</template>
|
<template v-if="column.jnpfKey === 'input'">
|
<jnpf-input
|
v-model:value="record[column.dataIndex]"
|
:use-mask="column.useMask"
|
:mask-config="column.maskConfig"
|
:show-overflow="columnData.showOverflow"
|
detailed />
|
</template>
|
</template>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" v-if="!record.top || columnData.type == 5" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
</div>
|
<Detail ref="detailRef" />
|
</div>
|
</template>
|
