jnpf-resources/TemplateCodeVue3/TemplateCode2/html/indexEdit.vue.vm

##通用参数
#parse("PublicMacro/ConstantMarco.vm")
#ConstantParams()
#parse("PublicMacro/FormMarco.vm")
##  dataform属性生成
#macro(EditDataform)
    #foreach($fieLdsModel in ${context.fields})
        #set($html = $fieLdsModel.formColumnModel.fieLdsModel)
        #set($fieLdsModel =$fieLdsModel.formColumnModel.fieLdsModel)
        #set($vModel = "${html.vModel}")
        #if($vModel !='')
            #set($config = $html.config)
            #set($jk = $html.config.jnpfKey)
            #set($dataType = "$!{config.dataType}")
            #set($defaultCurrent = $config.defaultCurrent)
            #set($defult = $config.defaultValue)
            #set($format = $html.format)
            #if($jk!='text' && $jk!='divider')
                #GetFeildDefaultValue("")
            #end
        #end
    #end
    #foreach($mast in ${context.mastTable})
        #set($mastField = $mast.formMastTableModel.mastTable.fieLdsModel)
        #set($fieLdsModel =$mast.formMastTableModel.mastTable.fieLdsModel)
        #set($config =$mastField.config)
        #set($jk = ${config.jnpfKey})
        #set($vModel = ${mast.formMastTableModel.vModel})
        #set($dataType = "$!{config.dataType}")
        #set($defaultCurrent = $config.defaultCurrent)
        #set($defult = $config.defaultValue)
        #set($format = $mastField.format)
        #if($jk!='text' && $jk!='divider')
            #GetFeildDefaultValue("")
        #end
    #end
    #if($context.version)
    version: 0,
    #end
#end
<template>
    <div class="jnpf-content-wrapper">
        <div class="jnpf-content-wrapper-center">
##            <!-- 有搜索 -->
            <div class="jnpf-content-wrapper-search-box">
                <BasicForm @register="registerSearchForm" :schemas="getSearchList"
                           @advanced-change="redoHeight" @submit="handleSearchSubmit" @reset="handleSearchReset"
                           class="search-form">
                </BasicForm>
            </div>
            <div class="jnpf-content-wrapper-content  bg-white">
##              <!-- 列表标签面板 -->
                #if(${context.tabConfig.createTab})
                <a-tabs v-model:activeKey="state.tabActiveKey" class="jnpf-content-wrapper-tabs jnpf-content-wrapper-tabs-header"
                        destroyInactiveTabPane @change="onTabChange">
                    <a-tab-pane v-for="item in state.tabList" :key="item.id" :tab="item.fullName"></a-tab-pane>
                </a-tabs>
                #end
                <BasicTable @register="registerTable" v-bind="getTableBindValue" ref="tableRef"
                            @columns-change="handleColumnChange">
                    #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() })">#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: state.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="route.meta.modelId" :viewList="viewList" @itemClick="handleViewClick" @reload="initViewList" />
                        <ViewSetting :menuId="route.meta.modelId" :viewList="viewList" :currentView="currentView" @reload="initViewList" />
                    </template>
##                    <!-- 有高级查询：结束 -->
                    <template #bodyCell="{ column, record, index }">
                        <template v-if="column.flag === 'INDEX'">
                            <div class="edit-row-action">
                            #if(!$context.isFlow)
                                <span class="edit-row-index">{{ index + 1 }}</span>
                                <i class="ym-custom ym-custom-arrow-expand" @click="handleRowForm(record)"></i>
                            #else
                                <span>{{ index + 1 }}</span>
                            #end
                            </div>
                        </template>
                        <template v-if="record.rowEdit">
                            <template v-if="column.jnpfKey === 'inputNumber'">
                                <jnpf-input-number
                                        v-model:value="record[column.prop]"
                                        :placeholder="column.placeholder"
                                        :min="column.min"
                                        :max="column.max"
                                        :step="column.step"
                                        :controls="column.controls"
                                        :addonBefore="column.addonBefore"
                                        :addonAfter="column.addonAfter"
                                        :precision="column.precision"
                                        :thousands="column.thousands"
                                        :disabled="column.disabled" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'calculate'">
                                <jnpf-calculate
                                        v-model:value="record[column.prop]"
                                        :isStorage="column.isStorage"
                                        :precision="column.precision"
                                        :thousands="column.thousands"
                                        detailed />
                            </template>
                            <template v-else-if="column.jnpfKey === 'rate'">
                                <jnpf-rate v-model:value="record[column.prop]" :count="column.count" :allowHalf="column.allowHalf" :disabled="column.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="column.disabled" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'uploadImg'">
                                <jnpf-upload-img
                                        v-model:value="record[column.prop]"
                                        :fileSize="column.fileSize"
                                        :sizeUnit="column.sizeUnit"
                                        :limit="column.limit"
                                        :pathType="column.pathType"
                                        :sortRule="column.sortRule"
                                        :timeFormat="column.timeFormat"
                                        :folder="column.folder"
                                        :tipText="column.tipText"
                                        :disabled="column.disabled" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'uploadFile'">
                                <jnpf-upload-file
                                        v-model:value="record[column.prop]"
                                        :accept="column.accept"
                                        :fileSize="column.fileSize"
                                        :sizeUnit="column.sizeUnit"
                                        :buttonText="column.buttonText"
                                        :limit="column.limit"
                                        :pathType="column.pathType"
                                        :sortRule="column.sortRule"
                                        :timeFormat="column.timeFormat"
                                        :folder="column.folder"
                                        :tipText="column.tipText"
                                        :disabled="column.disabled" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'switch'">
                                <jnpf-switch v-model:value="record[column.prop]" :disabled="column.disabled" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'timePicker'">
                                <jnpf-time-picker v-model:value="record[column.prop]" :format="column.format"
                                                  :placeholder="column.placeholder" :allowClear="column.clearable"
                                                  :startTime="column.startTime" :endTime="column.endTime"
                                                  :disabled="column.disabled" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'datePicker'">
                                <jnpf-date-picker v-model:value="record[column.prop]" :type="column.type"
                                                  :allowClear="column.clearable" :placeholder="column.placeholder"
                                                  :startTime="column.startTime" :endTime="column.endTime"
                                                  :format="column.format" :disabled="column.disabled" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'organizeSelect'">
                                <jnpf-organize-select v-model:value="record[column.prop]"
                                                      :placeholder="column.placeholder" :multiple="column.multiple"
                                                      :allowClear="column.clearable" :disabled="column.disabled"
                                                      :selectType="column.selectType" :ableIds="column.ableIds" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'depSelect'">
                                <jnpf-dep-select v-model:value="record[column.prop]"
                                                 :placeholder="column.placeholder" :multiple="column.multiple"
                                                 :allowClear="column.clearable" :disabled="column.disabled"
                                                 :selectType="column.selectType" :ableIds="column.ableIds" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'roleSelect'">
                                <jnpf-role-select v-model:value="record[column.prop]"
                                                  :placeholder="column.placeholder" :multiple="column.multiple"
                                                  :allowClear="column.clearable" :disabled="column.disabled"
                                                  :selectType="column.selectType" :ableIds="column.ableIds" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'groupSelect'">
                                <jnpf-group-select v-model:value="record[column.prop]"
                                                   :placeholder="column.placeholder" :multiple="column.multiple"
                                                   :allowClear="column.clearable" :disabled="column.disabled"
                                                   :selectType="column.selectType" :ableIds="column.ableIds" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'posSelect'">
                                <jnpf-pos-select v-model:value="record[column.prop]"
                                                 :placeholder="column.placeholder" :multiple="column.multiple"
                                                 :allowClear="column.clearable" :disabled="column.disabled"
                                                 :selectType="column.selectType" :ableIds="column.ableIds" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'userSelect'">
                                <jnpf-user-select v-model:value="record[column.prop]"
                                                  :placeholder="column.placeholder" :multiple="column.multiple"
                                                  :allowClear="column.clearable" :disabled="column.disabled"
                                                  :selectType="['all', 'custom'].includes(column.selectType) ? column.selectType : 'all'"
                                                  :ableIds="column.ableIds" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'usersSelect'">
                                <jnpf-users-select v-model:value="record[column.prop]"
                                                   :placeholder="column.placeholder" :multiple="column.multiple"
                                                   :allowClear="column.clearable" :disabled="column.disabled"
                                                   :selectType="column.selectType" :ableIds="column.ableIds" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'areaSelect'">
                                <jnpf-area-select v-model:value="record[column.prop]" :level="column.level"
                                                  :placeholder="column.placeholder" :multiple="column.multiple"
                                                  :allowClear="column.clearable" :disabled="column.disabled" />
                            </template>
                            <template v-else-if="['select', 'radio', 'checkbox'].includes(column.jnpfKey)">
                                <jnpf-select v-model:value="record[column.prop]" :placeholder="column.placeholder"
                                             :multiple="column.multiple || column.jnpfKey === 'checkbox'"
                                             :allowClear="column.clearable || ['radio', 'checkbox'].includes(column.jnpfKey)" :showSearch="column.filterable"
                                             :disabled="column.disabled" :options="column.options"
                                             :fieldNames="column.props" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'cascader'">
                                <jnpf-cascader v-model:value="record[column.prop]" :placeholder="column.placeholder"
                                               :multiple="column.multiple" :allowClear="column.clearable"
                                               :showSearch="column.filterable" :disabled="column.disabled"
                                               :options="column.options" :fieldNames="column.props"
                                               :showAllLevels="column.showAllLevels" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'treeSelect'">
                                <jnpf-tree-select v-model:value="record[column.prop]"
                                                  :placeholder="column.placeholder" :multiple="column.multiple"
                                                  :allowClear="column.clearable" :showSearch="column.filterable"
                                                  :disabled="column.disabled" :options="column.options"
                                                  :fieldNames="column.props" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'relationForm'">
                                <jnpf-relation-form v-model:value="record[column.prop]"
                                                    :placeholder="column.placeholder" :allowClear="column.clearable"
                                                    :disabled="column.disabled" :modelId="column.modelId"
                                                    :columnOptions="column.columnOptions" :relationField="column.relationField"
                                                    :hasPage="column.hasPage" :pageSize="column.pageSize"
                                                    :popupType="column.popupType" :popupTitle="column.popupTitle"
                                                    :popupWidth="column.popupWidth" :queryType="column.queryType"
                                                    :propsValue="column.propsValue"/>
                            </template>
                            <template
                                    v-else-if="column.jnpfKey === 'popupSelect' || column.jnpfKey === 'popupTableSelect'">
                                <jnpf-popup-select v-model:value="record[column.prop]"
                                                   :placeholder="column.placeholder" :multiple="column.multiple"
                                                   :allowClear="column.clearable" :disabled="column.disabled"
                                                   :interfaceId="column.interfaceId" :columnOptions="column.columnOptions"
                                                   :propsValue="column.propsValue" :relationField="column.relationField"
                                                   :hasPage="column.hasPage" :pageSize="column.pageSize"
                                                   :popupType="column.popupType" :popupTitle="column.popupTitle"
                                                   :templateJson="column.templateJson"
                                                   :popupWidth="column.popupWidth" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'autoComplete'">
                                <jnpf-auto-complete
                                        v-model:value="record[column.prop]"
                                        :placeholder="column.placeholder"
                                        :allowClear="column.clearable"
                                        :disabled="column.disabled"
                                        :interfaceId="column.interfaceId"
                                        :relationField="column.relationField"
                                        :templateJson="column.templateJson"
                                        :total="column.total" />
                            </template>
                            <template v-else-if="['input', 'textarea'].includes(column.jnpfKey)">
                                <jnpf-input v-model:value="record[column.prop]" :placeholder="column.placeholder"
                                            :allowClear="column.clearable" :disabled="column.disabled"
                                            :readonly="column.readonly" :prefixIcon="column.prefixIcon"
                                            :suffixIcon="column.suffixIcon" :addonBefore="column.addonBefore"
                                            :addonAfter="column.addonAfter" :maxlength="column.maxlength"
                                            :showPassword="column.showPassword" :showCount="column.showCount">
                                </jnpf-input>
                            </template>
                            <template v-else-if="column.jnpfKey === 'location'">
                                <jnpf-location
                                        v-model:value="record[column.prop]"
                                        :autoLocation="column.autoLocation"
                                        :enableLocationScope="column.enableLocationScope"
                                        :adjustmentScope="column.adjustmentScope"
                                        :enableDesktopLocation="column.enableDesktopLocation"
                                        :locationScope="column.locationScope"
                                        :clearable="column.clearable"
                                        :disabled="column.disabled" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'sign'">
                                <jnpf-sign v-model:value="record[column.prop]" :isInvoke="column.isInvoke" :disabled="column.disabled" />
                            </template>
                            <template v-else-if="column.jnpfKey === 'signature'">
                                <jnpf-signature v-model:value="record[column.prop]" :disabled="column.disabled" :ableIds="column.ableIds"/>
                            </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>
                        <template v-else>
                            <template v-if="column.jnpfKey === 'inputNumber'">
                                <jnpf-input-number v-model:value="record[column.prop + '_name']" :precision="column.precision" :thousands="column.thousands" disabled detailed />
                            </template>
                            <template v-else-if="column.jnpfKey === 'calculate'">
                                <jnpf-calculate
                                        v-model:value="record[column.prop]"
                                        :isStorage="column.isStorage"
                                        :precision="column.precision"
                                        :thousands="column.thousands"
                                        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 + '_name'] || record[column.prop] }}
                                </p>
                            </template>
                            <template v-else-if="column.jnpfKey === 'sign'">
                                <jnpf-sign v-model:value="record[column.prop + '_name']" detailed />
                            </template>
                            <template v-else-if="column.jnpfKey === 'signature'">
                                <jnpf-signature v-model:value="record[column.prop + '_name']" detailed />
                            </template>
                            <template v-else-if="column.jnpfKey === 'rate'">
                                <jnpf-rate v-model:value="record[column.prop + '_name']" :count="column.count" :allowHalf="column.allowHalf" disabled />
                            </template>
                            <template v-else-if="column.jnpfKey === 'slider'">
                                <jnpf-slider v-model:value="record[column.prop + '_name']" :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 + '_name']" 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 + '_name']" 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 + '_name']"
                                        :useMask="column.useMask"
                                        :maskConfig="column.maskConfig"
                                        :showOverflow="#if(${context.columnData.showOverflow})${context.columnData.showOverflow} #else false #end"
                                        detailed />
                            </template>
                            <template v-else>
                                {{ record[column.prop + '_name'] || record[column.prop] }}
                            </template>
                        </template>
##                        <!-- 有工作流：开始 -->
#if($!{context.isFlow})
                        <template v-if="column.key === 'flowState' && !record.top">
                          <JnpfTextTag :content="getFlowStatusContent(record.flowState)" :color="getFlowStatusColor(record.flowState)" />
                        </template>
#end
##                        <!-- 有工作流：结束 -->
                        <template v-if="column.key === 'action' && !record.top">
                            <TableAction :actions="getTableActions(record,index)" />
                        </template>
                    </template>
##                    <!-- 有合计：开始 -->
#if(${context.configurationTotal} == true)
                    <template #summary v-if="state.cacheList.length">
                        <a-table-summary fixed>
                          <a-table-summary-row>
                            <template v-if="getHasBatchBtn">
                              <a-table-summary-cell :index="0" :col-span="2">{{ t('component.table.summary') }}</a-table-summary-cell>
                              <a-table-summary-cell :index="1" :col-span="0"></a-table-summary-cell>
                              <a-table-summary-cell v-for="(item, index) in getColumnSum" :key="index"
                                                    :index="index + 2"
                                                    :align="getSummaryCellAlign(index)">{{ item }}</a-table-summary-cell>
                              <a-table-summary-cell :index="getColumnSum.length + 2"></a-table-summary-cell>
                            </template>
                            <template v-else>
                              <a-table-summary-cell :index="0">{{ t('component.table.summary') }}</a-table-summary-cell>
                              <a-table-summary-cell v-for="(item, index) in getColumnSum" :key="index"
                                                    :index="index + 1"
                                                    :align="getSummaryCellAlign(index)">{{ item }}</a-table-summary-cell>
                              <a-table-summary-cell :index="getColumnSum.length + 1"></a-table-summary-cell>
                            </template>
                          </a-table-summary-row>
                        </a-table-summary>
                    </template>
#end
##                    <!-- 有合计：结束 -->
                </BasicTable>
            </div>
        </div>
#if(!$context.isFlow)
        <ExtraForm ref="extraFormRef" @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
        <!-- 有关联表单详情：开始 -->
        <RelationDetail ref="relationDetailRef" />
        <!-- 有关联表单详情：结束 -->
#foreach($itemBtn in ${context.btnPcList})
    #if(${itemBtn.value}=="add")
    #end
    #if(${itemBtn.value}=="upload")
        <ImportModal @register="registerImportModal" @reload="reload" />
    #end
    #if(${itemBtn.value}=="download")
        <ExportModal @register="registerExportModal" @download="handleDownload" />
    #end
    #if(${itemBtn.value}=="batchRemove")
    #end
    #if(${itemBtn.value}=="batchPrint")
        <PrintSelect @register="registerPrintSelect" @change="handleShowBrowse" />
        <PrintBrowse @register="registerPrintBrowse" />
    #end
#end
#if(${context.superQuery})
##        <!-- 有高级查询 -->
        <SuperQueryModal @register="registerSuperQueryModal" @superQuery="handleSuperQuery" />
#end
#if(${context.isFlow})
##        <!-- 带流程：开始 -->
        <CandidateModal @register="registerCandidate" @confirm="submitCandidate" />
        <FlowParser @register="registerFlowParser" @reload="reload" />
#end
    </div>
</template>

<script lang="ts" setup>

    #if($context.isFlow)
    import { getList, del, exportData, batchDelete} from './helper/api';
    import { create, update,getCandidates } from '@/api/workFlow/task';
    import { useDefineSetting } from '@/hooks/setting/useDefineSetting';
    import FlowParser from '@/views/workFlow/components/FlowParser.vue';
    import CandidateModal from '@/views/workFlow/components/modal/CandidateModal.vue';
    import { getFlowStartFormId } from '@/api/workFlow/template';
    import { useTabs } from '@/hooks/web/useTabs';
    #else
    import { getList, del, exportData, batchDelete, create, update } from './helper/api';
    #end
    import { getConfigData,getViewList } from '@/api/onlineDev/visualDev';

    // 工作流
    import { getDictionaryDataSelector } from '@/api/systemData/dictionary';
    import { getDataInterfaceRes } from '@/api/systemData/dataInterface';
    import { ref, reactive, onMounted, toRefs, computed, unref, nextTick, toRaw } from 'vue';
    import { useMessage } from '@/hooks/web/useMessage';
    import { useI18n } from '@/hooks/web/useI18n';
    import { useOrganizeStore } from '@/store/modules/organize';
    import { useUserStore } from '@/store/modules/user';
    import { useBaseStore } from '@/store/modules/base';
    import { BasicModal, useModal } from '@/components/Modal';
    import { usePopup } from '@/components/Popup';
    import { ScrollContainer } from '@/components/Container';
    import { BasicForm, useForm } from '@/components/Form';
    import { BasicTable, useTable, TableAction, ActionItem, TableActionType, SorterResult } from '@/components/Table';
    import { JnpfRelationForm } from '@/components/Jnpf';
    #if(${context.superQuery})
    import { SuperQueryModal } from '@/components/CommonModal';
    #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
##    是否有批量删除和批量打印按钮
#set($hasCheckBox = false)
#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 '@/utils/file/download';
    #end
    #if(${itemBtn.value}=="batchRemove")
        #if(${itemBtn.show})
            #set($hasCheckBox = true)
        #end
    #end
    #if(${itemBtn.value}=="batchPrint")
        #if(${itemBtn.show})
            #set($hasCheckBox = true)
        #end
    // 打印模板多条生成PrintSelect
    import PrintSelect from '@/components/PrintDesign/printSelect/index.vue';
    import PrintBrowse from '@/components/PrintDesign/printBrowse/index.vue';
    #end
#end
    // 有关联表单详情：开始
    import RelationDetail from '@/views/common/dynamicModel/list/detail/index.vue';
    // 有关联表单详情：结束
#if(!$context.isFlow)
    import ExtraForm from './ExtraForm.vue';
#end
    import { useRoute,useRouter } from 'vue-router';
    import { FilterOutlined } from '@ant-design/icons-vue';
    import { getSearchFormSchemas } from '@/components/FormGenerator/src/helper/transform';
    import { cloneDeep } from 'lodash-es';
    import columnList from './helper/columnList';
    import searchList from './helper/searchList';
    import superQueryJson from './helper/superQueryJson';
    import { dyOptionsList, systemComponentsList } from '@/components/FormGenerator/src/helper/config';
    import dayjs from 'dayjs';
    import { thousandsFormat , getDateTimeUnit, getTimeUnit, getParamList} from '@/utils/jnpf';
    import { usePermission } from '@/hooks/web/usePermission';

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

    interface State {
        flowId: string;
        config: any;
        columnList: any[];
        printListOptions: any[];
        columnBtnsList: any[];
        customBtnsList: any[];
        treeFieldNames: any;
        leftTreeData: any[];
        leftTreeLoading: boolean;
        treeActiveId: string;
        treeActiveNodePath: any;
        columns: any[];
        complexColumns: any[];
        childColumnList: any[];
        exportList: any[];
        cacheList: any[];
        currFlow: any;
        isCustomCopy: boolean;
        candidateType: number;
        currRow: any;
        workFlowFormData: any;
        expandObj: any;
        columnSettingList: any[];
        searchSchemas: any[];
        treeRelationObj: 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 { t } = useI18n();
    const organizeStore = useOrganizeStore();
    const userStore = useUserStore();
    const userInfo = userStore.getUserInfo;
    const baseStore = useBaseStore();

    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 { close } = useTabs();
    const router = useRouter();
    const [registerFlowParser, { openPopup: openFlowParser }] = usePopup();
    const [registerCandidate, { openModal: openCandidateModal, closeModal: closeCandidateModal }] = useModal();
    const { getFlowStatusContent, getFlowStatusColor } = useDefineSetting();
    #end
    // 工作流
    const formRef = ref<any>(null);
    const tableRef = ref<Nullable<TableActionType>>(null);
    const detailRef = ref<any>(null);
    #if(!$context.isFlow)
    const extraFormRef = ref<any>(null);
    #end
    const relationDetailRef = ref<any>(null);
    const state = reactive<State>({
        flowId: '',//请在此处填写流程模板id
        config: {},
        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.treeDataSource}=='organize'||${context.columnData.treeDataSource}=='formField')'organizeIds' #elseif(${context.columnData.treePropsValue}) '${context.columnData.treePropsValue}' #else 'id' #end,
            isLeaf: 'isLeaf',
        },
        leftTreeData: [],
        leftTreeLoading: false,
        treeActiveId: '',
        treeActiveNodePath: [],
        columns: [],
        complexColumns: [], // 复杂表头
        childColumnList: [],
        exportList: [],
        cacheList: [],
        currFlow: {},
        isCustomCopy: false,
        candidateType: 1,
        currRow: {},
        workFlowFormData: {},
        expandObj: {},
        columnSettingList: [],
        searchSchemas: [],
        treeRelationObj: null,
        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.hasPage} && !${context.groupTable} && !${context.treeTable})
        dataType:0,
        #end
        #if(${context.isFlow})
        flowId:state.flowId,
        #end
    };
    const searchInfo = reactive({
      ...cloneDeep(defaultSearchInfo),
    });
    const { flowId, childColumnList, searchSchemas, viewList, currentView } = toRefs(state);
    const [registerSearchForm, { updateSchema, resetFields, submit: searchFormSubmit }] = useForm({
        baseColProps: { span: 6 },
        showActionButtonGroup: true,
        showAdvancedButton: true,
        compact: true,
    });
    const [registerTable, { reload, setLoading, getFetchParams, getSelectRows, getSelectRowKeys, redoHeight, insertTableDataRecord, updateTableDataRecord, deleteTableDataRecord,clearSelectedRowKeys }] = useTable({
        api: getList,
        immediate: false,
        clickToRowSelect: false,
        tableSetting: { setting: false },
        afterFetch: (data) => {
            const list = data.map((o) => ({ ...o, rowEdit: false }));
            state.cacheList = cloneDeep(list);
            return list;
        },
    });

##按钮权限，控制方法（用于生成复选框）
  const getHasBatchBtn = computed(() => {
    let btnsList =[]
      #if(${context.webType}!=4)
          #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
      #end
    return !!btnsList.length
  });

    const getColumns = computed(() => {
        const columns = state.columns;
        return setListValue(state.currentView?.columnList, columns, 'prop');
    });
    const getSearchList = computed(() => {
        const searchSchemas = cloneDeep(state.searchSchemas).map(o => ({ ...o, show: true }));
        return setListValue(state.currentView?.searchList, searchSchemas, 'field');
    });
    const getTableBindValue = computed(() => {
        let columns = unref(getColumns);
    #if(${context.isFlow})
        columns.push({ title: t('component.table.status'), dataIndex: 'flowState', width: 100, align: 'center', fixed: columns.some(o => o.fixed == 'right') ? 'right' : false, });
    #end
        const defaultSortConfig=#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(',') },
            sortFn: (sortInfo: SorterResult | SorterResult[]) => {
                if (Array.isArray(sortInfo)) {
                    const sortList = sortInfo.map(o => (o.order === 'descend' ? '-' : '') + o.field);
                    return { sidx: sortList.join(',') };
                } else {
                    const { field, order } = sortInfo;
                    if (field && order) {
                        // 排序字段
                        return { sidx: (order === 'descend' ? '-' : '') + field };
                    } else {
                        return {};
                    }
                }
            },
            ellipsis:#if(${context.columnData.showOverflow})${context.columnData.showOverflow} #else false #end,
            columns,
            actionColumn: {
                width: 150,
                title: t('component.table.action'),
                dataIndex: 'action',
            },
            #if($!{context.complexHeaderList.size()}>0) bordered: true, #end
        };
        if (unref(getHasBatchBtn)) {
        const rowSelection: any = { type: 'checkbox' };
          #if(${context.groupTable}) rowSelection.getCheckboxProps = record => ({ disabled: !!record.top });  #end
        data.rowSelection = rowSelection;
        }
        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];
    });
    const getColumnSum = computed(() => {
        const sums: any[] = [];
        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);
        unref(getSummaryColumn).forEach((column, index) => {
            let sumVal = state.cacheList.reduce((sum, d) => sum + getCmpValOfRow(d, column.prop), 0);
            if (!isSummary(column.prop)) sumVal = '';
            sumVal = Number.isNaN(sumVal) ? '' : sumVal;
            const realVal = sumVal && !Number.isInteger(sumVal) ? Number(sumVal).toFixed(2) : sumVal;
            sums[index] = useThousands(column.prop) ? thousandsFormat(realVal) : realVal;
        });
        // // 有多选
        // sums.unshift('');
        // // 有多选
        return sums;
    });
#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 = isNaN(target) ? 0 : Number(target);
        return data;
    }
    //合计对齐
    function getSummaryCellAlign(index) {
        if (!unref(getSummaryColumn).length) return;
        return unref(getSummaryColumn)[index]?.align || 'left';
    }
#end
##行内按键
    function getTableActions(record,index): ActionItem[] {
        const list: any[] = [
        #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
        ];
        if (record.rowEdit) {
            let editBtnList: ActionItem[] = [
                { label: t('common.saveText'), onClick: saveForRowEdit.bind(null, record, 0) },
                { label: t('common.cancelText'), color: 'error', onClick: cancelRowEdit.bind(null, record, index) },
            ];
            #if($context.isFlow)
                // 有工作流
                editBtnList.push({ label: t('common.submitText'), onClick: submitForRowEdit.bind(null, record) });
            #end
            return editBtnList;
        }
        return list;
    }
##开启流程--流程调用相关方法
#if(${context.isFlow})
    // 选择候选人
    function submitCandidate(data) {
        saveForRowEdit(state.currRow, 1, data);
    }
#end
    function cancelRowEdit(record, index) {
        const id = !record.id || record.id === 'jnpfAdd' ? '' : record.id;
        if (!id) return deleteTableDataRecord('jnpfAdd');
        record.rowEdit = false;
        const item = cloneDeep(state.cacheList[index]);
        updateTableDataRecord(item.id, item);
    }
    // 行内编辑保存
    function saveForRowEdit(record, status = 0, candidateData: any = null) {
#if(${context.isFlow})
        const id = record.flowTaskId ? record.flowTaskId : !record.id || record.id === 'jnpfAdd' ? '' : record.id;
        // 工作流
        let query = {
          id,
          status: status || 0,
          candidateType: state.candidateType,
          formData: record,
          flowId: state.flowId,
          flowUrgent: 1,
        };
        if (candidateData) query = { ...query, ...candidateData };
        const formMethod = id ? update : create;
        formMethod(query).then(res => {
          createMessage.success(res.msg);
          closeCandidateModal();
          reload({ page: 1 });
        });
#else
        const id = !record.id || record.id === 'jnpfAdd' ? '' : record.id;
        const query = { ...record ,id};
        const formMethod = id ? update : create;
        formMethod(query).then((res) => {
            createMessage.success(res.msg);
            reload({ page: 1 });
        });
#end
    }
    // 行内编辑提交审核
    function submitForRowEdit(record) {
        const id = !record.id || record.id === 'jnpfAdd' ? '' : record.id;
        state.currRow = record;
        state.workFlowFormData = {
            id,
            formData: record,
            flowId: state.flowId,
        };
        getCandidates(0, state.workFlowFormData).then((res) => {
          const candidateList = res?.data?.list.filter(o => !o.isBranchFlow && o.isCandidates);
          const branchList = res.data.list.filter(o => o.isBranchFlow);
          if (!candidateList.length && res.data.type == 3) {
            createConfirm({
              iconType: 'warning',
              title: '提示',
              content: '您确定要提交当前流程吗, 是否继续?',
              onOk: () => {
                saveForRowEdit(record, 1);
              },
            });
            return;
          }
          openCandidateModal(true, {branchList, candidateList, taskId: state.config.taskId, formData: state.workFlowFormData });
        });
    }

##行内按键方法
#foreach($itemBtn in ${context.columnBtnPcList})
    #if(${itemBtn.value}=="edit" && ${itemBtn.show})
    // 编辑
    function updateHandle(record) {
        buildRowRelation();
        record.rowEdit = true;
    }
    #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() {
        buildRowRelation();
        let record = { rowEdit: true, id: 'jnpfAdd', #EditDataform() };
        insertTableDataRecord(record, 0);
    }
    #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

    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();
        initViewList();
        buildOptions();
##  列表标签面板初始化
    #if(${context.tabConfig.createTab})
        getTabList();
    #else
        nextTick(() => {
          unref(getSearchList)?.length ? searchFormSubmit() : reload({ page: 1 });
        });
    #end
    }

    function getSearchSchemas() {
        const schemas = getSearchFormSchemas(searchList);
        state.searchSchemas = 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 permissionList = userStore.getPermissionList;
            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.filter(o => o.prop.indexOf('-') < 0);
        let columns = columnList.map((o) => ({
            ...o,
            placeholder: 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' ? false : o.fixed,
            sorter: o.sortable ? { multiple: 1 } : o.sortable,
            width: o.width || 100,
        }));
        //复杂表头
        columns = getComplexColumns(columns);
        state.columns = columns.filter((o) => o.prop.indexOf('-') < 0);
    }

#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.align = e.align;
            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({ ...o });
                    }
                }
            }
            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)) {
                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 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;
    }
##高级查询
#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];
        });
        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 buildOptions() {
        const loop = list => {
            for (let i = 0; i < list.length; i++) {
                const cur = list[i];
                if (cur.children?.length) loop(cur.children);
                const config = cur.__config__;
                if (!config) continue;
                if (dyOptionsList.includes(config.jnpfKey)) {
                    if (config.dataType === 'dictionary') {
                        if (!config.dictionaryType) return;
                        baseStore.getDicDataSelector(config.dictionaryType).then(res => {
                            cur.options = res;
                        });
                    }
                    if (config.dataType === 'dynamic') {
                        if (!config.propsUrl) return;
                        const query = { paramList: getParamList(config.templateJson) };
                        getDataInterfaceRes(config.propsUrl, query).then(res => {
                            cur.options = Array.isArray(res.data) ? res.data : [];
                        });
                    }
                }
            }
        };
        loop(state.columns);
    }
    #if(!$context.isFlow)
    function handleRowForm(record) {
        const data = {
            id: record.id,
            menuId: searchInfo.menuId,
            formData: record,
        };
        extraFormRef.value?.init(data);
    }
    #end
##动态时间处理
    function buildRowRelation() {
        const loop = list => {
            for (let i = 0; i < list.length; i++) {
                let cur = list[i];
                if (cur.children?.length) loop(cur.children);
                const config = cur?.__config__;
                if (!config) continue;
                if (config.jnpfKey === 'datePicker') {
                    if (config.startTimeRule) {
                        if (config.startTimeType == 1) cur.startTime = config.startTimeValue;
                        if (config.startTimeType == 3) cur.startTime = new Date().getTime();
                        if (config.startTimeType == 4 || config.startTimeType == 5) {
                            const type = getTimeUnit(config.startTimeTarget);
                            const method = config.startTimeType == 4 ? 'subtract' : 'add';
                            const startTime = dayjs()[method](config.startTimeValue, type);
                            let realStartTime = startTime.startOf('day').valueOf();
                            if (config.startTimeTarget == 4) realStartTime = startTime.startOf('minute').valueOf();
                            if (config.startTimeTarget == 5) realStartTime = startTime.startOf('second').valueOf();
                            if (config.startTimeTarget == 6) realStartTime = startTime.valueOf();
                            cur.startTime = realStartTime;
                        }
                    }
                    if (config.endTimeRule) {
                        if (config.endTimeType == 1) cur.endTime = config.endTimeValue;
                        if (config.endTimeType == 3) cur.endTime = new Date().getTime();
                        if (config.endTimeType == 4 || config.endTimeType == 5) {
                            const type = getTimeUnit(config.endTimeTarget);
                            const method = config.endTimeType == 4 ? 'subtract' : 'add';
                            const endTime = dayjs()[method](config.endTimeValue, type);
                            let realEndTime = endTime.endOf('day').valueOf();
                            if (config.endTimeTarget == 4) realEndTime = endTime.endOf('minute').valueOf();
                            if (config.endTimeTarget == 5) realEndTime = endTime.endOf('second').valueOf();
                            if (config.endTimeTarget == 6) realEndTime = endTime.valueOf();
                            cur.endTime = realEndTime;
                        }
                    }
                }
                if (config.jnpfKey === 'timePicker') {
                    if (config.startTimeRule) {
                        if (config.startTimeType == 1) cur.startTime = config.startTimeValue || null;
                        if (config.startTimeType == 3) cur.startTime = dayjs().format(cur.format);
                        if (config.startTimeType == 4 || config.startTimeType == 5) {
                            const type = getTimeUnit(config.startTimeTarget + 3);
                            const method = config.startTimeType == 4 ? 'subtract' : 'add';
                            const startTime = dayjs()[method](config.startTimeValue, type).format(cur.format);
                            cur.startTime = startTime;
                        }
                    }
                    if (config.endTimeRule) {
                        if (config.endTimeType == 1) cur.endTime = config.endTimeValue || null;
                        if (config.endTimeType == 3) cur.endTime = dayjs().format(cur.format);
                        if (config.endTimeType == 4 || config.endTimeType == 5) {
                            const type = getTimeUnit(config.endTimeTarget + 3);
                            const method = config.endTimeType == 4 ? 'subtract' : 'add';
                            const endTime = dayjs()[method](config.endTimeValue, type).format(cur.format);
                            cur.endTime = endTime;
                        }
                    }
                }
            }
        };
        loop(state.columns);
    }
#if(${context.isFlow})
    function getFlowId(){
      if(!state.flowId){
        createMessage.error('流程模板的flowId未填写')
        close();
        router.replace('/404');
        return
      }
      getFlowStartFormId(state.flowId).then(res => {
        init()
      }).catch(() => {
        close();
        router.replace('/404');
      });
    }
#end
    function initViewList(currentId = '') {
        const query = {
          menuId: route.meta.modelId,
        };
        getViewList(query).then(res => {
        const columns : any[]= state.columns;
          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;
  }

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