jnpf-resources-v6x/TemplateCodeVue3/TemplateCode2/html/index.vue.vm

##通用参数
#parse("PublicMacro/ConstantMarco.vm")
#ConstantParams()
<script lang="ts" setup>

    import { getList, del, exportData, batchDelete } from './helper/api';
    import { getConfigData,getViewList } from '#/api/onlineDev/visualDev';
#if(${context.isFlow})
    // 工作流
    import FlowParser from '#/views/workFlow/components/FlowParser.vue';
    import { useFlowState } from '#/hooks/flow/useFlowStatus';
    import { getFlowStartFormId } from '#/api/workFlow/template';
    import { useTabs } from '@vben/hooks';
    // 工作流
#end
    import { getDictionaryDataSelector } from '#/api/systemData/dictionary';
    import { getDataInterfaceRes } from '#/api/systemData/dataInterface';
    import { getOrgByOrganizeCondition,getOrganizeSelector } from '#/api/permission/organize';
    import { ref, reactive, onMounted, toRefs, computed, unref, nextTick, toRaw, provide } from 'vue';
    import { useMessage, usePermission } from '@jnpf/hooks';
    import { $t } from '#/locales';
    import { useOrganizeStore } from '#/store';
    import { useAccessStore,useUserStore } from '@vben/stores';
    import { BasicModal, useModal } from '@jnpf/ui/modal';
    import { usePopup } from '@jnpf/ui/popup';
    import { ScrollContainer,BasicLeftTree,type TreeActionType } from '@jnpf/ui';
    import { BasicForm, useForm } from '@jnpf/ui/form';
    import { BasicVxeTable, useVxeTable, TableAction, type ActionItem, type TableActionType, type SorterResult } from '@jnpf/ui/vxeTable';
    #if(${context.childTableStyle}==2)
    import { Grid as VxeGrid } from 'vxe-table';
    #end
    #if(${context.superQuery})
    import { SuperQueryModal } from '#/components/CommonModal';
    #end
    #if(!$context.isFlow && ${context.webType} !=4)
    import Form from './Form.vue';
    #end
#foreach($itemBtn in ${context.columnBtnPcList})
#if(!${context.isFlow} &&${itemBtn.value}=="detail")
    import Detail from './Detail.vue';
#end
#if(${itemBtn.value}=="edit")
#end
#if(${itemBtn.value}=="remove")
#end
#end
#if(${context.webType} !=4)
    // 有关联表单详情：开始
    import RelationDetail from '#/views/common/dynamicModel/list/detail/index.vue';
    // 有关联表单详情：结束
#end
#if(${context.childTableStyle}==1)
    import ChildTableColumn from '#/views/common/dynamicModel/list/ChildTableColumn.vue';
#end
#foreach($itemBtn in ${context.btnPcList})
#if(${itemBtn.value}=="add")
#end
#if(${itemBtn.value}=="upload")
    import { ImportModal} from '#/components/CommonModal';
#end
#if(${itemBtn.value}=="download")
    import { ExportModal } from '#/components/CommonModal';
    import { downloadByUrl } from '@jnpf/utils';
#end
#if(${itemBtn.value}=="batchRemove")
#end
#if(${itemBtn.value}=="batchPrint")
    // 打印模板多条生成PrintSelect
    import PrintSelect from '#/components/PrintDesign/printSelect/index.vue';
    import PrintBrowse from '#/components/PrintDesign/printBrowse/index.vue';
#end
#end
    #if(${context.tabConfig.createTab})
    import { useBaseStore } from '#/store';
    #end
    import { useRoute,useRouter } from 'vue-router';
    import { FilterOutlined } from '@ant-design/icons-vue';
    import { getSearchFormSchemas } from '#/components/FormGenerator/src/helper/transform';
    import { cloneDeep,omit } from 'lodash-es';
    import columnList from './helper/columnList';
    import searchList from './helper/searchList';
#if(${context.webType} !=4)
    import superQueryJson from './helper/superQueryJson';
#end
    import { dyOptionsList, systemComponentsList ,slotsList} from '#/components/FormGenerator/src/helper/config';
    import { thousandsFormat} from '@jnpf/utils';
    import { getParamList} from '#/utils/jnpf';

    import ViewSetting from '#/views/common/dynamicModel/list/components/ViewSetting.vue';
    import ViewList from '#/views/common/dynamicModel/list/components/ViewList.vue';

    interface State {
        config: any;
#if($!{context.isFlow})
        flowId: string;
#end
        columnList: any[];
        printListOptions: any[];
        columnBtnsList: any[];
        customBtnsList: any[];
        treeFieldNames: any;
        leftTreeData: any[];
        leftTreeLoading: boolean;
        treeActiveId: string;
        treeActiveNodePath: any;
        columns: any[];
        allColumns: 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;
        treeQueryJson: any;
        leftTreeActiveInfo: any;
        keyword: string;
        #if(${context.tabConfig.createTab})
        tabActiveKey: any;
        tabList: any[];
        tabQueryJson: any;
        #end
        viewList: any[];
        currentView: any;
    }

    const route = useRoute();
    const { hasBtnP } = usePermission();
    const { createMessage, createConfirm } = useMessage();
    const organizeStore = useOrganizeStore();
    const userStore = useUserStore();
    const accessStore = useAccessStore();
    const { permissionList } = accessStore;
    const userInfo = userStore.getUserInfo;
    #if(${context.tabConfig.createTab})
    const baseStore = useBaseStore();
    #end

    const [registerExportModal, { openModal: openExportModal, closeModal: closeExportModal, setModalProps: setExportModalProps }] = useModal();
    const [registerImportModal, { openModal: openImportModal }] = useModal();
    const [registerSuperQueryModal, { openModal: openSuperQuery }] = useModal();
    #if(${context.hasPrintBtn})
    const [registerPrintSelect, { openModal: openPrintSelect }] = useModal();
    const [registerPrintBrowse, { openModal: openPrintBrowse }] = useModal();
    #end
    #if(${context.isFlow})
    // 工作流
    const { closeCurrentTab } = useTabs();
    const router = useRouter();
    const [registerFlowParser, { openPopup: openFlowParser }] = usePopup();
    const { getFlowStatusContent, getFlowStatusColor } = useFlowState();
    #end
    #if(${context.leftTreeTable})
    const leftTreeRef = ref<Nullable<TreeActionType>>(null);
    #end
    const formRef = ref<any>(null);
    const tableRef = ref<Nullable<TableActionType>>(null);
    const detailRef = ref<any>(null);
    const relationDetailRef = ref<any>(null);

    const state = reactive<State>({
        config: {},
#if($!{context.isFlow})
        flowId:'',//请在这里填写流程模板id
#end
        columnList: [],
        printListOptions: [],
        columnBtnsList: [],
        customBtnsList: [],
        treeFieldNames: {
            children: #if(${context.columnData.treePropsChildren}) '${context.columnData.treePropsChildren}' #else 'children' #end,
            title: #if(${context.columnData.treePropsLabel}) '${context.columnData.treePropsLabel}' #else 'fullName' #end,
            key: #if(${context.columnData.treePropsValue}) '${context.columnData.treePropsValue}' #else 'id' #end,
            isLeaf: 'isLeaf',
        },
        leftTreeData: [],
        leftTreeLoading: false,
        treeActiveId: '',
        treeActiveNodePath: [],
        columns: [],
        allColumns: [],
        complexColumns: [], // 复杂表头
        childColumnList: [],
        mergeList: [],
        exportList: [],
        cacheList: [],
        currFlow: {},
        isCustomCopy: false,
        candidateType: 1,
        currRow: {},
        workFlowFormData: {},
        expandObj: {},
        columnSettingList: [],
        searchSchemas: [],
        treeRelationObj: null,
        treeQueryJson: {},
        leftTreeActiveInfo: {},
        keyword: '',
        #if(${context.tabConfig.createTab})
        tabActiveKey: '',
        tabList: [],
        tabQueryJson: {},
        #end
        viewList: [],
        currentView: {},
    });
    const defaultSearchInfo = {
      menuId: route.meta.modelId as string,
      moduleId:'${context.moduleId}',
      superQueryJson: '',
      #if($!{context.isFlow})
      flowId: state.flowId,
      #end
      #if(${context.hasPage} && !${context.groupTable} && !${context.treeTable})
      dataType:0,
      #end
      #if(!${context.hasPage} || ${context.groupTable} || ${context.treeTable})
      pageSize:1000000, //没有分页，树形，分组
      #end
    };
    const searchInfo = reactive({
      ...cloneDeep(defaultSearchInfo),
    });
    const { childColumnList, searchSchemas, viewList, currentView#if($!{context.isFlow}), flowId #end,allColumns} = toRefs(state);
    const [registerSearchForm, { updateSchema, resetFields, submit: searchFormSubmit, setFieldsValue}] = useForm({
        baseColProps: { span: 6 },
        showActionButtonGroup: true,
        showAdvancedButton: true,
        compact: true,
    });
    const [registerTable, { reload, setLoading, getFetchParams, getSelectRows, getSelectRowKeys, redoHeight,clearSelectedRowKeys }] = useVxeTable({
        api: getList,
        immediate: false,
        tableSetting: { setting: false },
        afterFetch: (data) => {
            const list = data.map((o) => ({...o,...state.expandObj}));
            state.cacheList = cloneDeep(list);
            #if(${context.groupTable})
            list.map(o => {
                if (o.children && o.children.length) {
                    o.children = o.children.map(e => ({
                        ...e,
                        ...state.expandObj,
                    }));
                }
            });
            #end
            return list;
        },
    });

    provide('getLeftTreeActiveInfo', () => state.leftTreeActiveInfo);

##按钮权限，控制方法（用于生成复选框）
    const getHasBatchBtn = computed(() => {
        let btnsList: any[] =[]
    #if(${context.hasRemoveBtn})
        btnsList.push('batchRemove')
    #end
    #if(${context.hasPrintBtn})
        btnsList.push('batchPrint')
    #end
    #if(${context.hasDownloadBtn})
        btnsList.push('download')
    #end
### 有权限判断的时候生成这句代码
    #if(${context.columnData.useBtnPermission})
        btnsList=btnsList.filter(o =>  hasBtnP('btn_' + o))
    #end
        return !!btnsList.length
    });

##左侧树
#if(${context.leftTreeTable})
    const getLeftTreeBindValue = computed(() => {
        const key = +new Date();
        const data: any = {
            title: #if(${context.columnData.treeTitleI18nCode}) $t('${context.columnData.treeTitleI18nCode}','${context.columnData.treeTitle}')#else'${context.columnData.treeTitle}'#end,
            showSearch: #if((${context.columnData.treeDataSource} == 'api' && ${context.columnData.treeSyncType} == 1)
                            ||(${context.columnData.treeDataSource} == 'formField' && ${context.columnData.treeRelationFieldSelectType} == 'all' )
                            ||${context.columnData.treeDataSource} == 'organize'|| !${context.columnData.hasTreeQuery}) false, #else true, //异步的时候为false  #end
            fieldNames: state.treeFieldNames,
            defaultExpandAll: #if((${context.columnData.treeDataSource} == 'api' && ${context.columnData.treeSyncType} == 1)
                            ||(${context.columnData.treeDataSource} == 'formField' && ${context.columnData.treeRelationFieldSelectType} == 'all' )
                            ||${context.columnData.treeDataSource} == 'organize') false, #else true, //异步的时候为false  #end
            treeData: state.leftTreeData,
            loading: state.leftTreeLoading,
            key,
            #if((${context.columnData.treeDataSource} == 'api' && ${context.columnData.treeSyncType} == 1)
                ||(${context.columnData.treeDataSource} == 'formField' && ${context.columnData.treeRelationFieldSelectType} == 'all' )
                ||${context.columnData.treeDataSource} == 'organize')
                //异步
                loadData: onLoadData,
                //异步
            #end
        };
        return data;
    });
#end

    const getColumns = computed(() => {
        const columns = #if(${context.childTableStyle}==1) state.complexColumns; #else state.columns;#end
        return setListValue(state.currentView?.columnList, columns, 'prop');
    });
    const getSearchList = computed(() => {
      const searchSchemas = cloneDeep(state.searchSchemas).map(o => ({ ...o, show: true }));
      const schemas = setListValue(state.currentView?.searchList, searchSchemas, 'field');
      buildSearchOptions(schemas);
      return schemas;
    });
    const getTableBindValue = computed(() => {
        let columns = unref(getColumns).map((o) => ({ ...omit(o, ['type', 'format']) }));
#if(${context.isFlow})
        const boo=columns.some(o=>o.dataIndex==='flowState')
        if(!boo) columns.push({ title: $t('component.table.status'), dataIndex: 'flowState', width: 100, align: 'center', fixed: columns.some(o => o.fixed == 'right') ? 'right' : false, slots: { default: 'flowState' }, });
#end
        const defaultSortConfig:any[]=#if(${context.columnData.defaultSortConfig})${context.columnData.defaultSortConfig}#else []#end;
        const sortField = defaultSortConfig.map(o => (o.sort === 'desc' ? '-' : '') + o.field);
        const data: any = {
#if(!${context.hasPage} || ${context.groupTable} || ${context.treeTable})
            pagination: false, //没有分页，树形，分组
#else
            pagination: { pageSize: ${context.columnData.pageSize} }, //有分页
#end
            searchInfo: unref(searchInfo),
            defSort: { sidx: sortField.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 } : {};
              }
            },
            showOverflow: false,
            columns,

#if(${context.groupTable} || ${context.treeTable})
            isTreeTable: true,
#else
#if(${context.childTableStyle}==2)
            // 有子表且子表折叠展示
            showExpandColumn:!!state.childColumnList.length,
#end
#end
#if(${context.childTableStyle}==1 || $!{context.complexHeaderList.size()}>0)
            border: true,
#end
          #if(${context.webType} !=4)
            actionColumn: {
                width: 150,
                title:  $t('component.table.action'),
                dataIndex: 'action',
            },
          #end
            showFooter:${context.configurationTotal},
            columnConfig: {
              resizable: ${context.columnData.resizable},
            },
            ##视图有设置主键
            #if(${context.webType}==4 && ${context.columnData.viewKey})
              rowKey: '${context.columnData.viewKey}',
            #end
        };
##树形表格代码没有多选框
#if(!${context.treeTable} || (${context.webType}==4 && ${context.columnData.viewKey}))
        if (unref(getHasBatchBtn)) {
            const rowSelection: any = { type: 'checkbox' };
            #if(${context.groupTable}) rowSelection.getCheckboxProps = record => ({ disabled: !!record.top });  #end
            data.rowSelection = rowSelection;
        }
#end
#if(${context.childTableStyle}==1)
        // 有子表且子表分组展示
        if(state.childColumnList.length)data.spanMethod = spanMethod;
#end
#if(${context.configurationTotal})
        // 列表合计
        data.footerMethod = footerMethod;
#end
        return data;
    });
##合计变量
#if(${context.configurationTotal})
    const getSummaryColumn = computed(() => {
    let defaultColumns = unref(getColumns);
    // 处理列固定
    if (state.columnSettingList?.length) {
        for (let i = 0; i < defaultColumns.length; i++) {
            inner: for (let j = 0; j < state.columnSettingList.length; j++) {
                if (defaultColumns[i].dataIndex === state.columnSettingList[j].dataIndex) {
                    defaultColumns[i].fixed = state.columnSettingList[j].fixed;
                    defaultColumns[i].visible = state.columnSettingList[j].visible;
                    break inner;
                }
            }
        }
        defaultColumns = defaultColumns.filter((o) => o.visible);
    }
    let columns: any[] = [];
    for (let i = 0; i < defaultColumns.length; i++) {
        const e = defaultColumns[i];
        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, ...noFixedList, ...rightFixedList];
});
#end

    async function init() {
        state.config = {};
        searchInfo.menuId = route.meta.modelId as string;
        state.columnList = columnList;
    #if(${context.groupTable})
        // 分组
        state.columnList = state.columnList.filter((o) => o.prop != '${context.groupField}');
    #end
        setLoading(true);
        getSearchSchemas();
        getColumnList();
        await initViewList();
##  列表标签面板初始化
    #if(${context.tabConfig.createTab})
        getTabList();
    #elseif(${context.leftTreeTable})
        // 有左侧树
        getTreeView(true);
    #else
        nextTick(() => {
          unref(getSearchList)?.length ? searchFormSubmit() : handleSearchSubmit({});
        });
    #end
    }
    #if(${context.leftTreeTable})
    // 有左侧树
    async function getTreeView(isInit = false) {
        state.leftTreeLoading = true;
        state.leftTreeData = [];
    #if(${context.columnData.treeDataSource}=='dictionary')
        // 左侧数据字典
        getDictionaryDataSelector('${context.columnData.treeDictionary}').then(res => {
          state.leftTreeData = res.data.list;
          state.leftTreeLoading = false;
          nextTick(() => {
              if(isInit){
                unref(getSearchList)?.length? searchFormSubmit() : reload({ page: 1 });
              }
          });
        });
    #elseif(${context.columnData.treeDataSource}=='api')
        // 数据接口
        let treeTemplateJson: any[] = #if($!{context.columnData.treeTemplateJson}) ${context.columnData.treeTemplateJson} #else [] #end
        const query = { paramList: getParamList(treeTemplateJson) };
        getDataInterfaceRes('${context.columnData.treePropsUrl}',query).then((res) => {
            state.leftTreeData = Array.isArray(res.data) ? res.data : [];
            state.leftTreeLoading = false;
            nextTick(() => {
                if (isInit){
                  unref(getSearchList)?.length? searchFormSubmit() : reload({ page: 1 });
                }
            });
        });
    #elseif(${context.columnData.treeDataSource}=='organize')
        //组织或者部门
        const res = await getOrganizeSelector();
        state.leftTreeData = res.data.list;
        state.leftTreeLoading = false;
        nextTick(() => {
            if (state.leftTreeData.length) leftTreeRef.value?.setExpandedKeys([state.leftTreeData[0].id]);
            if (isInit){
                unref(getSearchList)?.length? searchFormSubmit() : reload({ page: 1 });
            }
        });
    #elseif(${context.columnData.treeDataSource}=='formField')
        //表单字段
        let leftTreeData: any[] =[]
        const treeRelationObj: any = state.treeRelationObj;
        const jnpfKey = treeRelationObj?.__config__?.jnpfKey || '';
        if ('${context.columnData.treeRelation}' && ['organizeSelect', 'depSelect'].includes(jnpfKey)) {
            if (treeRelationObj.selectType === 'all') {
              const res = await getOrganizeSelector();
              leftTreeData = res.data.list;
            }
            if (treeRelationObj.selectType === 'custom' && treeRelationObj.ableIds?.length) {
                const res = await getOrgByOrganizeCondition(treeRelationObj.ableIds);
                leftTreeData = res.data.list;
            }
        }
        state.leftTreeData = leftTreeData;
        state.leftTreeLoading = false;
        nextTick(() => {
          if (treeRelationObj.selectType === 'all') {
            if (state.leftTreeData.length) leftTreeRef.value?.setExpandedKeys([state.leftTreeData[0].id]);
          }
          if (isInit){
            unref(getSearchList)?.length? searchFormSubmit() : reload({ page: 1 });
          }
        });
    #end
    }
    #end
    function getSearchSchemas() {
        #if(${context.leftTreeTable})
            // 有左侧树，有关联字段
            if (!state.treeRelationObj) {
                for (let i = 0; i < superQueryJson.length; i++) {
                    const e = superQueryJson[i];
                    if (e.id === '${context.columnData.treeRelation}') {
                        state.treeRelationObj = { ...e, searchMultiple: false, jnpfKey: e.__config__.jnpfKey };
                        break;
                    }
                }
            }
        #end

        const schemas = getSearchFormSchemas(searchList #if(${context.isFlow}),true#end);
        state.searchSchemas = schemas;
    }
    function buildSearchOptions(schemas){
      schemas.forEach((cur) => {
        const config = cur.__config__;
        if (dyOptionsList.includes(config.jnpfKey)) {
          if (config.dataType === 'dictionary') {
            if (!config.dictionaryType) return;
            getDictionaryDataSelector(config.dictionaryType).then((res) => {
              updateSchema([{ field: cur.field, componentProps: { options: res.data.list } }]);
            });
          }
          if (config.dataType === 'dynamic') {
            if (!config.propsUrl) return;
            const query = { paramList: getParamList(config.templateJson) };
            getDataInterfaceRes(config.propsUrl, query).then((res) => {
              const data = Array.isArray(res.data) ? res.data : [];
              updateSchema([{ field: cur.field, componentProps: { options: data } }]);
            });
          }
        }
        cur.defaultValue = cur.value;
      });
    }
    function getColumnList() {
        #if(${context.columnData.useColumnPermission})
            // 开启列表过滤权限
            let columnList: any[] = [];
            const list = permissionList.filter(o => o.modelId === searchInfo.menuId);
            const perColumnList = list[0] && list[0].column ? list[0].column : [];
            for (let i = 0; i < state.columnList.length; i++) {
                inner: for (let j = 0; j < perColumnList.length; j++) {
                    if (state.columnList[i].prop === perColumnList[j].enCode) {
                        columnList.push(state.columnList[i]);
                        break inner;
                    }
                }
            }
        #else
            // 没有开启列表权限
            let  columnList = state.columnList;
        #end
        state.exportList = columnList;
        let columns = columnList.map((o) => {
            const item: any = {
              ...o,
              title: o.labelI18nCode ? $t(o.labelI18nCode, o.label) : o.label,
              dataIndex: o.prop,
              align: o.align,
              fixed: o.fixed == 'none' ? false : o.fixed,
              width: o.width || '',
              minWidth: o.width || 100,
            }
            // 行内编辑和部分控件加插槽
            if ((slotsList.includes(item.jnpfKey)) && !item.dataIndex.includes('-')) {
              item.slots = { default: item.prop };
            }
            item.showOverflow = !!(#if(${context.columnData.showOverflow})${context.columnData.showOverflow} #else false #end&& item.jnpfKey !== 'rate' );
            return item;
        });
        state.allColumns = columns;
        //添加复杂表头
        columns = getComplexColumns(columns);
        state.columns = columns.filter((o) => !o.prop.includes('-'));
        //子表表头
        getChildComplexColumns(columns);
    }

    #if(${context.tabConfig.createTab})
    //标签初始化
    async function getTabList() {
        #if(${context.tabConfig.fieldsModel})
        #set($fm =${context.tabConfig.fieldsModel})
        #set($config =$fm.config)
        #if(${config.dataType} == 'dictionary')
        // 字典
        const data = (await baseStore.getDicDataSelector('${config.dictionaryType}'))
        const options =  #if($fm.props.value == 'enCode') data.map(o => ({ ...o, id: o.enCode }))#else data #end;
        state.tabList = [...state.tabList,...options]
        #end
        #if(${config.dataType} == 'static')
        //静态
        state.tabList = #if(${fm.options}) ${fm.options} #else[] #end
        #end
        #end
        #if(${context.tabConfig.hasAllTab})
        state.tabList.unshift({ fullName: '全部', id: '' });
        #end
        state.tabActiveKey = state.tabList[0].id || '';
        state.tabQueryJson = { ${context.tabConfig.relationField} : state.tabList[0].id };
        nextTick(() => {
            unref(getSearchList)?.length? searchFormSubmit() : reload({ page: 1 });
        });
    }
    #end

    //复杂表头
    function getComplexColumns(columns) {
        //这里生成复杂表头的配置
        let complexHeaderList: any[] = #if(${context.complexHeaderList}) ${context.complexHeaderList}; #else []; #end
        if (!complexHeaderList.length) return columns;
        let childColumns: any[] = [];
        let firstChildColumns: string[] = [];
        for (let i = 0; i < complexHeaderList.length; i++) {
            const e = complexHeaderList[i];
            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 (let j = 0; j < columns.length; j++) {
                        const o = columns[j];
                        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);
        let list: any[] = [];
        for (let i = 0; i < columns.length; i++) {
            const e = columns[i];
            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) {
        let list: any[] = [];
        for (let i = 0; i < columnList.length; i++) {
            const e = columnList[i];
            if (!e.prop.includes('-')) {
                list.push(e);
            } else {
                let prop = e.prop.split('-')[0];
                let label = e.label.split('-')[0];
                let childLabel = e.label.replace(label + '-', '');
                if (e.fullNameI18nCode && Array.isArray(e.fullNameI18nCode) && e.fullNameI18nCode[0]) label = $t(e.fullNameI18nCode[0], label);
                let newItem = {
                    align: 'center',
                    jnpfKey: 'table',
                    prop,
                    label,
                    title: label,
                    dataIndex: prop,
                    children: [],
                };
                e.dataIndex = e.prop;
                e.title = e.labelI18nCode ? $t(e.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 (let i = 0; i < list.length; i++) {
                    if (list[i].prop === prop) {
                    #if(${context.childTableStyle}==1)
                      const childItem = !list[i].children.length?{ ...e, slots: { default: list[i].dataIndex }, showOverflow: false, className: 'child-table-box' }:e
                      list[i].children.push({ ...omit(childItem, ['fixed']) });
                    #else
                      list[i].children.push({ ...omit(e, ['fixed']) });
                    #end
                        break;
                    }
                }
            }
        }
        #if(${context.childTableStyle}==1)
            // 行内分组展示
            getMergeList(list);
        #end

        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(${context.childTableStyle}==1)
                  item.width = o.width || '';
                  item.minWidth = o.width || 100;
                #else
                  item.field = o.__vModel__;
                  item.dataIndex = o.__vModel__;
                  if ( slotsList.includes(item.jnpfKey)) item.slots = { default: item.dataIndex };
                  item.width = o.width || '';
                  item.minWidth = o.width || 100;
                #end
                return item;
              });
        }
    }
    function getMergeList(list) {
        list.forEach((item) => {
            if (item.jnpfKey === 'table'  && 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 toggleExpand(row, field) {
        row[field] = !row[field];
    }
    // 关联表单查看详情
    function toDetail(modelId, id, propsValue) {
        if (!id) return;
        getConfigData(modelId).then((res) => {
            if (!res.data || !res.data.formData) return;
            const formConf = JSON.parse(res.data.formData);
            formConf.popupType = 'general';
            formConf.hasPrintBtn = false;
            formConf.customBtns = [];
            const data = { id, formConf, modelId, propsValue};
            relationDetailRef.value?.init(data);
        });
    }
    function handleColumnChange(data) {
        state.columnSettingList = data;
    }
##行内按键
    function getTableActions(record): ActionItem[] {
        return [
            #foreach($itemBtn in ${context.columnBtnPcList})
                #if(${itemBtn.value}=="edit" && ${itemBtn.show})
                    {
                        label: #if(${itemBtn.labelI18nCode}) $t('${itemBtn.labelI18nCode}','${itemBtn.label}') #else '${itemBtn.label}' #end,
                    #if(${context.isFlow})
                        disabled: ![0,8,9].includes(record.flowState), //有流程加上
                    #end
                        onClick: updateHandle.bind(null, record),
                    #if(${context.columnData.useBtnPermission})
                        auth: 'btn_edit', //有按钮权限
                    #end
                    },
                #end
                #if(${itemBtn.value}=="detail" && ${itemBtn.show})
                    {
                        label: #if(${itemBtn.labelI18nCode}) $t('${itemBtn.labelI18nCode}','${itemBtn.label}') #else '${itemBtn.label}' #end,
                    #if(${context.isFlow})
                        disabled: !record.flowState, //有流程加上
                    #end
                        onClick: goDetail.bind(null, record),
                    #if(${context.columnData.useBtnPermission})
                        auth: 'btn_detail', //有按钮权限
                    #end
                    },
                #end
                #if(${itemBtn.value}=="remove" && ${itemBtn.show})
                    {
                        label: #if(${itemBtn.labelI18nCode}) $t('${itemBtn.labelI18nCode}','${itemBtn.label}') #else '${itemBtn.label}' #end,
                        color: 'error',
                    #if(${context.isFlow})
                        disabled: ![0,9].includes(record.flowState), //有流程加上
                    #end
                        modelConfirm: {
                            onOk: handleDelete.bind(null, record.id),
                        },
                    #if(${context.columnData.useBtnPermission})
                        auth: 'btn_remove', //有按钮权限
                    #end
                    },
                #end
            #end
        ];
    }
##行内按键方法
#foreach($itemBtn in ${context.columnBtnPcList})
    #if(${itemBtn.value}=="edit" && ${itemBtn.show})
    // 编辑
    function updateHandle(record) {
    #if(${context.isFlow})
        // 带工作流
        let data = {
          id: record.flowTaskId || record.id,
          flowId: state.flowId,
          opType: '-1',
        };
        openFlowParser(true, data);
    #else
        // 不带工作流
        const data = {
            id: record.id,
            menuId: searchInfo.menuId,
            allList: state.cacheList,
        };
        formRef.value?.init(data);
    #end
    }
    #end
    #if(${itemBtn.value}=="detail" && ${itemBtn.show})
    // 查看详情
    function goDetail(record) {
    #if(${context.isFlow})
        // 带流程
        const data = {
            id: record.flowTaskId,
            flowId: state.flowId,
            opType: 0,
            status: record.flowState,
        };
        openFlowParser(true, data);
    #else
        // 不带流程
        const data = {
            id: record.id,
        };
        detailRef.value?.init(data);
    #end
    }
    #end
    #if(${itemBtn.value}=="remove" && ${itemBtn.show})
    // 删除
    function handleDelete(id) {
        const query={ids:[id] #if(${context.isFlow}) ,flowId:state.flowId #end}
        batchDelete(query).then((res) => {
            createMessage.success(res.msg);
            clearSelectedRowKeys();
            reload();
        });
    }
    #end
#end
##表头按键方法
#foreach($itemBtn in ${context.btnPcList})
    #if(${itemBtn.value}=="add" && ${itemBtn.show})
    // 新增
    function addHandle() {
        #if(${context.isFlow})
            // 带流程新增
          const data = {
            id: '',
            flowId: state.flowId,
            opType: '-1',
          };
          openFlowParser(true, data);
        #else
            // 不带流程新增
            const data = {
                id: '',
                menuId: searchInfo.menuId,
                allList: state.cacheList,
            };
            formRef.value?.init(data);
        #end
    }
    #end
    #if(${itemBtn.value}=="upload" && ${itemBtn.show})
    #end
    #if(${itemBtn.value}=="download" && ${itemBtn.show})
    // 导出
    function handleDownload(data) {
        let query = { ...getFetchParams(), ...data };
        exportData(query)
                .then((res) => {
                    setExportModalProps({ confirmLoading: false });
                    if (!res.data.url) return;
                    downloadByUrl({ url: res.data.url });
                    closeExportModal();
                })
                .catch(() => {
                    setExportModalProps({ confirmLoading: false });
                });
    }
    #end
    #if(${itemBtn.value}=="batchRemove" && ${itemBtn.show})
    // 批量删除
    function handelBatchRemove() {
        const ids = getSelectRowKeys();
        if (!ids.length) return createMessage.error('请选择一条数据');
        createConfirm({
            iconType: 'warning',
            title: $t('common.tipTitle'),
            content: '您确定要删除这些数据吗, 是否继续?',
            onOk: () => {
                const query={ids:ids #if(${context.isFlow}) ,flowId:state.flowId #end}
                batchDelete(query).then((res) => {
                    createMessage.success(res.msg);
                    clearSelectedRowKeys();
                    reload();
                });
            },
        });
    }
    #end
    #if(${itemBtn.value}=="batchPrint" && ${itemBtn.show})
    //打印方法
    function handelBatchPrint() {
    let printIds=#if(${context.columnData.printIds}) ${context.columnData.printIds} #else [] #end
        if (!printIds?.length) return createMessage.error('未配置打印模板');
        const ids = getSelectRowKeys();
        if (!ids.length) return createMessage.error('请选择一条数据');
        if (printIds?.length === 1) return handleShowBrowse(printIds[0]);
        openPrintSelect(true, printIds);
    }
    function handleShowBrowse(id) {
      const formInfo: any[] = (getSelectRows() || []).map(o => {
        const item: any = { formId: o.id };
        #if(${context.isFlow})
        item.flowTaskId = o.flowTaskId || o.id;
        #end
        return item;
      });
      openPrintBrowse(true, { id, formInfo });
    }
    #end
#end
##合计方法
#if(${context.configurationTotal})
    //合计方法
    function getCmpValOfRow(row, key) {
        const summaryField: any = #if(${context.fieldsTotal})${context.fieldsTotal}#else [] #end; //取summaryField
        const isSummary = (key) => summaryField.includes(key);
        if (!summaryField.length || !isSummary(key)) return 0;
        const target = row[key];
        if (!target) return 0;
        const data = Number.isNaN(target) ? 0 : Number(target);
        return data;
    }
#end
##左侧树
#if(${context.leftTreeTable})
    function handleLeftTreeSelect(id, _node, nodePath) {
        if (state.treeActiveId == id) return;
        state.treeActiveId = id;
        state.treeActiveNodePath = nodePath;
        #if(${context.columnData.hasTreeQuery})
            // 有搜索
            resetFields();
        #end
        updateSearchFormValue();
    }
    #if(${context.columnData.treeDataSource} == 'api' && ${context.columnData.treeSyncType} == 1)
    // 左侧树异步加载
    function onLoadData(node) {
        return new Promise((resolve: (value?: unknown) => void) => {
            let treeSyncTemplateJson: any[] = #if($!{context.columnData.treeSyncTemplateJson}) ${context.columnData.treeSyncTemplateJson} #else [] #end; // 获取treeTemplateJson字段
            const query = { paramList: getParamList(treeSyncTemplateJson,node) };
            getDataInterfaceRes('${context.columnData.treeSyncInterfaceId}', query).then((res) => {
                const data = Array.isArray(res.data) ? res.data : [];
                leftTreeRef.value?.updateNodeByKey(node.eventKey, { children: data, isLeaf: !data.length });
                resolve();
            });
        });
    }
    #end
    #if((${context.columnData.treeDataSource} == 'formField' && ${context.columnData.treeRelationFieldSelectType} == 'all' )
    ||${context.columnData.treeDataSource} == 'organize')
    // 左侧树异步加载
    function onLoadData(node) {
      return new Promise((resolve: (value?: unknown) => void) => {
        getOrganizeSelector({parentId:node.id}).then(res => {
          const list = res.data.list;
          leftTreeRef.value?.updateNodeByKey(node.eventKey, { children: list, isLeaf: !list.length });
          resolve();
        });
      });
    }
    #end
#end
##高级查询
#if(${context.superQuery})
    // 高级查询
    function handleSuperQuery(superQueryJson) {
        searchInfo.superQueryJson = superQueryJson;
        reload({ page: 1 });
    }
#end
    function handleSearchReset() {
        searchFormSubmit();
    }
    function handleSearchSubmit(data) {
        clearSelectedRowKeys();
        let obj = {
            ...defaultSearchInfo,
            superQueryJson: searchInfo.superQueryJson,
            ...data,
            #if(${context.tabConfig.createTab})
            ...state.tabQueryJson,
            #end
        };
        Object.keys(searchInfo).map(key => {
            delete searchInfo[key];
            return key;
        });
        for (let [key, value] of Object.entries(obj)) {
            searchInfo[key.replaceAll('-', '_')] = value;
        }
        console.log(searchInfo);
        reload({ page: 1 });
    }
##列表标签切换方法
#if(${context.tabConfig.createTab})
    function onTabChange(val) {
        state.tabQueryJson = { ${context.tabConfig.relationField} : val };  //这个key是取json中的tabConfig.relationFiled
        unref(getSearchList).length?searchFormSubmit():resetFields()
    }
#end
    function updateSearchFormValue() {
      if (!state.treeActiveId) return searchFormSubmit();
      let queryJson: any = {};
      let leftTreeActiveInfo: any = {};
      const isMultiple = !state.treeRelationObj ? false : state.treeRelationObj.searchMultiple;
      //多级左侧树，需要拼父级->转为查询参数
      if (state.treeRelationObj && state.treeRelationObj.jnpfKey && ${multipleTwoUnitStr}.includes(state.treeRelationObj.jnpfKey)) {
        let currValue = [];
          #if(${context.columnData.treeDataSource} == 'formField')
            if (state.treeRelationObj.jnpfKey === 'organizeSelect') {
              currValue = state.treeActiveNodePath[state.treeActiveNodePath.length - 1].organizeIds;
            }else{
              currValue = state.treeActiveNodePath.map(o => o[state.treeFieldNames.key]);
            }
          #else
            currValue = state.treeActiveNodePath.map(o => o[state.treeFieldNames.key]);
          #end
        queryJson = { '${context.columnData.treeRelation}': isMultiple ? [currValue] : currValue };
        leftTreeActiveInfo = { '${context.columnData.treeRelation}': state.treeRelationObj.multiple ? [currValue] : currValue };
      } else {
        queryJson = { '${context.columnData.treeRelation}': isMultiple ? [state.treeActiveId] : state.treeActiveId };
        leftTreeActiveInfo = { '${context.columnData.treeRelation}': state.treeRelationObj.multiple ? [state.treeActiveId] : state.treeActiveId };
      }
      state.leftTreeActiveInfo = leftTreeActiveInfo;
      if(unref(getSearchList)?.length){
        // 有搜索列表
        setFieldsValue(queryJson);
        searchFormSubmit();
      }else{
        // 无搜索列表
        handleSearchSubmit(queryJson);
      }
    }
#if(${context.isFlow})
    function getFlowId(){
      if(!state.flowId){
        createMessage.error('流程模板的flowId未填写')
        closeCurrentTab();
        router.replace('/404');
        return
      }
      getFlowStartFormId(state.flowId).then(res => {
        init()
      }).catch(() => {
        closeCurrentTab();
        router.replace('/404');
      });
    }
#end
    async function initViewList(currentId = '') {
      const query = {
        menuId: route.meta.modelId,
      };
      await getViewList(query).then(res => {
        const columns : any[]= #if(${context.childTableStyle}==1) state.complexColumns; #else state.columns;#end
        const searchList: any[] = state.searchSchemas.map(o => ({ label: o.label, id: o.field, show: o.show, labelI18nCode: o.labelI18nCode }));
        const columnList: any[] = columns.map(o => ({ label: o.label, id: o.prop, show: true, fixed: o.fixed || 'none', labelI18nCode: o.labelI18nCode }));
        state.viewList = (res.data || []).map(o => {
          if (o.type == 0) return { ...o, searchList, columnList };
          return { ...o, searchList: o.searchList ? JSON.parse(o.searchList) : [], columnList: o.columnList ? JSON.parse(o.columnList) : [] };
        });
        if (currentId) {
          state.currentView = state.viewList.filter(o => o.id === currentId)[0] || state.viewList[0];
        } else {
          state.currentView = state.viewList.filter(o => o.status === 1)[0] || state.viewList[0];
        }
      });
    }
    function handleViewClick(item) {
      state.currentView = item;
    }
    function setListValue(data: any[] = [], defaultData: any[] = [], key) {
      let list: any[] = [];
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < defaultData.length; j++) {
          if (data[i].show && data[i].id == defaultData[j][key]) list.push(defaultData[j]);
        }
      }
      return list;
    }
    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 };
        }
      }
    }
#if(${context.configurationTotal})
    // 列表合计
    function footerMethod({ columns, data }) {
      const summaryField: any =#if(${context.fieldsTotal})${context.fieldsTotal}#else [] #end; //取summaryField
      const isSummary = (key) => 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;
        }),
      ];
    }
#end
#if(${context.columnData.resizable})
    function handleColumnResizableChange({ resizeColumn, resizeWidth }) {
      if (!resizeColumn.field || !resizeColumn.field.includes('-')) return;
      const tableVModel = resizeColumn.field.split('-')[0];
      setTimeout(() => {
        for (let i = 0; i < state.childColumnList.length; i++) {
          const element = state.childColumnList[i];
          if (element.prop == tableVModel) {
            for (let j = 0; j < element.children.length; j++) {
              const item = element.children[j];
              if (item.prop == resizeColumn.field) {
                item.width = resizeWidth;
                return;
              }
            }
          }
        }
      }, 0);
    }
#end

    onMounted(() => {
    #if(${context.isFlow})
      getFlowId()
    #else
      init();
    #end
    });
</script>

<template>
  <div class="jnpf-content-wrapper">
      ##  <!-- 左侧树 -->
      #if(${context.leftTreeTable} == true)
        <div class="jnpf-content-wrapper-left">
          <BasicLeftTree v-bind="getLeftTreeBindValue" ref="leftTreeRef" @reload="getTreeView()"
                         @select="handleLeftTreeSelect" />
        </div>
      #end
      ##  <!-- 左侧树 -->
    <div class="jnpf-content-wrapper-center">
        ##      <!-- 有搜索 -->
      <div class="jnpf-content-wrapper-search-box" v-if="getSearchList.length">
        <BasicForm @register="registerSearchForm" :schemas="getSearchList"
                   @advanced-change="redoHeight" @submit="handleSearchSubmit" @reset="handleSearchReset"
                   class="search-form">
        </BasicForm>
      </div>
        ##      <!-- 有搜索 -->
      <div class="jnpf-content-wrapper-content jnpf-content-wrapper-list">
          ##              <!-- 列表标签面板 -->
          #if(${context.tabConfig.createTab})
            <a-tabs v-model:activeKey="state.tabActiveKey" class="jnpf-content-wrapper-tabs"
                    destroyInactiveTabPane @change="onTabChange">
              <a-tab-pane v-for="item in state.tabList" :key="item.id" :tab="item.fullName"></a-tab-pane>
            </a-tabs>
          #end
          ##              按键
        <BasicVxeTable @register="registerTable" v-bind="getTableBindValue" ref="tableRef"
                    @columns-change="handleColumnChange" #if(${context.columnData.resizable}) @column-resizable-change="handleColumnResizableChange" #end>
            #if(${context.btnPcList.size()}>0)
              <template #tableTitle>
                  #foreach($btn in  ${context.btnPcList})
                      #if(${btn.value}=='add' && ${btn.show})
                        <a-button type="primary" preIcon="${btn.icon}" #if(${context.columnData.useBtnPermission}) v-auth="'btn_${btn.value}'" #end
                                  @click="addHandle()">#if(${btn.labelI18nCode})
                          {{$t('${btn.labelI18nCode}','${btn.label}')}}#else${btn.label}#end</a-button>
                      #end
                      #if(${btn.value}=='download' && ${btn.show})
                        <a-button type="link" preIcon="${btn.icon}" #if(${context.columnData.useBtnPermission}) v-auth="'btn_${btn.value}'" #end
                                  @click="openExportModal(true, { columnList: state.exportList, selectIds: getSelectRowKeys(), showExportSelected:#if(${context.webType} !=4 || ${context.columnData.viewKey}) true #else false #end })">#if(${btn.labelI18nCode})
                          {{$t('${btn.labelI18nCode}','${btn.label}')}}#else${btn.label}#end</a-button>
                      #end
                      #if(${btn.value}=='upload' && ${btn.show})
                        <a-button type="link" preIcon="${btn.icon}" #if(${context.columnData.useBtnPermission}) v-auth="'btn_${btn.value}'" #end
                                  @click="openImportModal(true, { url: '${context.module}/${context.className}', menuId: searchInfo.menuId  #if($!{context.isFlow}), flowId: flowId#end  })">#if(${btn.labelI18nCode})
                          {{$t('${btn.labelI18nCode}','${btn.label}')}}#else${btn.label}#end</a-button>
                      #end
                      #if(${btn.value}=='batchRemove' && ${btn.show})
                        <a-button type="link" preIcon="${btn.icon}" #if(${context.columnData.useBtnPermission}) v-auth="'btn_${btn.value}'" #end
                                  @click="handelBatchRemove()">#if(${btn.labelI18nCode})
                          {{$t('${btn.labelI18nCode}','${btn.label}')}}#else${btn.label}#end</a-button>
                      #end
                      #if(${btn.value}=='batchPrint' && ${btn.show})
                        <a-button type="link" preIcon="${btn.icon}" #if(${context.columnData.useBtnPermission}) v-auth="'btn_${btn.value}'" #end
                                  @click="handelBatchPrint()">#if(${btn.labelI18nCode})
                          {{$t('${btn.labelI18nCode}','${btn.label}')}}#else${btn.label}#end</a-button>
                      #end
                  #end
              </template>
            #end
            ##              <!-- 有高级查询：开始 -->
            #if(${context.superQuery})
              <template #toolbar>
                <a-tooltip placement="top">
                  <template #title>
                    <span>{{ $t('common.superQuery') }}</span>
                  </template>
                  <filter-outlined @click="openSuperQuery(true, { columnOptions: superQueryJson })" />
                </a-tooltip>
              </template>
            #end
          <template #toolbarAfter>
            <ViewList :menuId="searchInfo.menuId" :viewList="viewList" @itemClick="handleViewClick" @reload="initViewList" />
            <ViewSetting :menuId="searchInfo.menuId" :viewList="viewList" :currentView="currentView" @reload="initViewList" />
          </template>
            ##              <!-- 有高级查询：结束 -->
            ##              <!-- 有子表且是折叠展示：开始 -->
            #if(${context.childTableStyle}==2)
              <template #expandedRowRender="{ record }" v-if="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="#if(${context.columnData.showOverflow})${context.columnData.showOverflow} #else false #end" min-height="0">
                      <template #[column.dataIndex]="{ row: childRecord }" v-for="column in child.children" :key="column.dataIndex">
                        <template v-if="column.jnpfKey === 'relationForm'">
                          <p class="link-text" @click="toDetail(column.modelId, childRecord[`${column.dataIndex}_id`], column.propsValue)">
                            {{ childRecord[column.dataIndex] }}
                          </p>
                        </template>
                        <template v-if="column.jnpfKey === 'inputNumber'">
                          <jnpf-input-number
                              v-model:value="childRecord[column.dataIndex]"
                              :precision="column.precision"
                              :thousands="column.thousands"
                              disabled
                              detailed />
                        </template>
                        <template v-if="column.jnpfKey === 'calculate'">
                          <jnpf-calculate
                              v-model:value="childRecord[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 === 'sign'">
                          <jnpf-sign v-model:value="childRecord[column.dataIndex]" detailed />
                        </template>
                        <template v-if="column.jnpfKey === 'signature'">
                          <jnpf-signature v-model:value="childRecord[column.dataIndex]" detailed />
                        </template>
                        <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 === 'uploadImg'">
                          <jnpf-upload-img v-model:value="childRecord[column.dataIndex]" disabled detailed simple v-if="childRecord[column.dataIndex]?.length" />
                        </template>
                        <template v-if="column.jnpfKey === 'uploadFile'">
                          <jnpf-upload-file v-model:value="childRecord[column.dataIndex]" disabled detailed simple v-if="childRecord[column.dataIndex]?.length" />
                        </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=#if(${context.columnData.showOverflow})"$!{context.columnData.showOverflow}"#else "false"#end
                              detailed />
                        </template>
                      </template>
                    </VxeGrid>
                  </a-tab-pane>
                </a-tabs>
              </template>
            #end
            ##              <!-- 有子表且是折叠展示：结束 -->
          <template #[column.prop]="{ record }" v-for="column in allColumns" :key="column.prop">
              <template v-if="column.jnpfKey === 'inputNumber'">
                <jnpf-input-number v-model:value="record[column.prop]" :precision="column.precision" :thousands="column.thousands" disabled detailed />
              </template>
              <template v-else-if="column.jnpfKey === 'calculate'">
                <jnpf-calculate
                    v-model:value="record[column.prop]"
                    :is-storage="column.isStorage"
                    :precision="column.precision"
                    :thousands="column.thousands"
                    :type="column.type"
                    :date-cal-config="column.dateCalConfig"
                    :round-type="column.roundType"
                    detailed />
              </template>
              <template v-else-if="column.jnpfKey === 'sign'">
                <jnpf-sign v-model:value="record[column.prop]" detailed />
              </template>
              <template v-else-if="column.jnpfKey === 'signature'">
                <jnpf-signature v-model:value="record[column.prop]" detailed />
              </template>
              <template v-else-if="column.jnpfKey === 'rate'">
                <jnpf-rate v-model:value="record[column.prop]" :count="column.count" :allow-half="column.allowHalf" disabled />
              </template>
              <template v-else-if="column.jnpfKey === 'slider'">
                <jnpf-slider v-model:value="record[column.prop]" :min="column.min" :max="column.max" :step="column.step" disabled />
              </template>
              <template v-else-if="column.jnpfKey === 'uploadImg'">
                <jnpf-upload-img v-model:value="record[column.prop]" disabled detailed simple v-if="record[column.prop]?.length" />
              </template>
              <template v-else-if="column.jnpfKey === 'uploadFile'">
                <jnpf-upload-file v-model:value="record[column.prop]" disabled detailed simple v-if="record[column.prop]?.length" />
              </template>
              <template v-else-if="column.jnpfKey === 'input'">
                <jnpf-input
                    v-model:value="record[column.prop]"
                    :use-mask="column.useMask"
                    :mask-config="column.maskConfig"
                    :show-overflow=#if(${context.columnData.showOverflow})"$!{context.columnData.showOverflow}"#else "false"#end
                    detailed />
              </template>
              <template v-else-if="column.jnpfKey === 'relationForm'">
                <p class="link-text" @click="toDetail(column.modelId, record[`${column.prop}_id`], column.propsValue)">
                  {{ record[column.prop] || record[column.prop] }}
                </p>
              </template>
              <template v-else-if="systemComponentsList.includes(column.jnpfKey)">
                {{ record[`${column.prop}_name`] || record[column.prop] }}
              </template>
              <template v-else>
                {{ record[column.prop] }}
              </template>
          </template>
        #if(${context.childTableStyle}==1)
          ##                  <!--  有子表且是分组展示：开始 -->
          <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`)"
                @to-detail="toDetail"
                :expand="record[`${item.prop}Expand`]"
                :show-overflow="#if(${context.columnData.showOverflow})${context.columnData.showOverflow} #else false #end"
                :key="index" />
          </template>
          ##                  <!-- 有子表且是分组展示：结束 -->
        #end
        ##                  <!-- 有工作流：开始 -->
        #if($!{context.isFlow})
          <template  #flowState="{ record }">
            <JnpfTextTag :content="getFlowStatusContent(record.flowState)" :color="getFlowStatusColor(record.flowState)" v-if="!record.top"/>
          </template>
        #end
        ##                  <!-- 有工作流：结束 -->
          <template #action="{ record }">
            <TableAction :actions="getTableActions(record)" v-if="!record.top"/>
          </template>
        </BasicVxeTable>
      </div>
    </div>
      #if(!$context.isFlow && ${context.webType} !=4)
        <Form ref="formRef" @reload="reload" />
      #end
      #foreach($itemBtn in ${context.columnBtnPcList})
          #if(!${context.isFlow} && ${itemBtn.value}=="detail")
            <Detail ref="detailRef" />
          #end
          #if(${itemBtn.value}=="edit")
          #end
          #if(${itemBtn.value}=="remove")
          #end
      #end
      #foreach($itemBtn in ${context.btnPcList})
          #if(${itemBtn.value}=="add")
          #end
          #if(${itemBtn.value}=="upload" && ${itemBtn.show})
            <ImportModal @register="registerImportModal" @reload="reload" />
          #end
          #if(${itemBtn.value}=="download" && ${itemBtn.show})
            <ExportModal @register="registerExportModal" @download="handleDownload" />
          #end
          #if(${itemBtn.value}=="batchRemove")
          #end
          #if(${itemBtn.value}=="batchPrint" && ${itemBtn.show})
            <PrintSelect @register="registerPrintSelect" @change="handleShowBrowse" />
            <PrintBrowse @register="registerPrintBrowse" />
          #end
      #end
      #if(${context.webType}!=4)
          ##        <!-- 有关联表单详情：开始 -->
        <RelationDetail ref="relationDetailRef" />
          ##        <!-- 有关联表单详情：结束 -->
      #end
      #if(${context.superQuery})
          ##      <!-- 有高级查询：开始 -->
        <SuperQueryModal @register="registerSuperQueryModal" @superQuery="handleSuperQuery" />
          ##      <!-- 有高级查询：结束 -->
      #end
      #if(${context.isFlow})
          ##      <!-- 带流程：开始 -->
        <FlowParser @register="registerFlowParser" @reload="reload" />
          ##      <!-- 带流程：结束 -->
      #end
  </div>
</template>