<%_
const { listComponentConfig } = (bcEntityData || {listComponentConfig: {}});
_%>
<template>
  <!-- begcode-please-regenerate-this-file 如果您不希望重新生成代码时被覆盖，将please修改为don't ！！！-->
  <div<% if (cypressTests) { %> data-cy="<%= entityAngularName %>Heading"<% } %> style="height: 100%; padding-bottom: 10px">
  <SplitPanes class="default-theme">
    <Pane size="50">
      <%_ if (!fieldsContainParentAndChildren) { _%>
      <Card
      v-if="searchFormConfig.toggleSearchStatus && !searchFormConfig.disabled"
      title="高级搜索"
      class="bc-list-search-form-card"
      :body-style="{ 'padding-top': '12px', 'padding-bottom': '8px' }"
      :head-style="{ 'min-height': '40px' }"
    >
      <template #extra>
        <Space>
          <Button type="default" @click="showSearchFormSetting" preIcon="ant-design:setting-outlined" shape="circle" size="small"></Button>
        </Space>
      </template>
      <SearchForm :config="searchFormConfig" @formSearch="formSearch" @close="handleToggleSearch" />
    </Card>
    <Row
      v-if="fieldSearchValues && fieldSearchValues.length && !searchFormConfig.toggleSearchStatus"
      style="background-color: #ffffff; padding: 4px; margin: 8px; border-radius: 4px"
    >
      <Col :span="24" style="padding-left: 20px">
        <span>搜索条件：</span>
        <Space>
          <Tag closable v-for="fieldVale of fieldSearchValues" @close="closeSearchFieldTag(fieldVale)">
            {{ fieldVale.title }}: {{ fieldVale.value }}
          </Tag>
        </Space>
      </Col>
    </Row>
    <%_ } _%>
    <Card :bordered="false" class="bc-list-result-card">
      <%_ if (!fieldsContainParentAndChildren) { _%>
      <Grid ref="xGrid" v-bind="gridOptions" v-on="gridEvents" data-cy="entityTable">
        <template #toolbar_buttons>
          <Row :gutter="16">
            <Col v-if="!searchFormConfig.toggleSearchStatus && !searchFormConfig.disabled">
              <Space>
                <Input
                  v-model:value="searchFormConfig.jhiCommonSearchKeywords"
                  placeholder="请输入关键字"
                  allow-clear
                  @change="inputSearch"
                  @pressEnter="formSearch"
                  style="width: 280px"
                  data-cy="listSearchInput"
                >
                  <template #prefix>
                    <Icon icon="ant-design:search-outlined" />
                  </template>
                  <template #addonAfter>
                    <Button type="link" @click="formSearch" style="height: 30px" data-cy="listSearchButton"
                    >查询<Icon icon="ant-design:filter-outlined" @click="handleToggleSearch" data-cy="listSearchMore" v-if="searchFormConfig.allowSwitch"></Icon>
                    </Button>
                  </template>
                </Input>
                <template v-for="button of gridOptions?.toolbarConfig?.buttons">
                  <Button v-if="!button.dropdowns">{{button.name}}</Button>
                  <Dropdown v-else-if="selectedRows.length" :key="button.name" :content="button.name">
                    <template #overlay>
                      <Menu @click="gridEvents.toolbarButtonClick(subButton)" v-for="subButton of button.dropdowns">
                        <MenuItem :key="subButton.name + 's'">
                          <Icon :icon="subButton.icon"></Icon>
                          {{subButton.name}}
                        </MenuItem>
                      </Menu>
                    </template>
                    <Button>
                      {{button.name}}
                      <Icon icon="ant-design:down-outlined" />
                    </Button>
                  </Dropdown>
                </template>
              </Space>
            </Col>
          </Row>
        </template>
        <template #recordAction="{ row }">
          <ButtonGroup  :row="row" :buttons="rowOperations" @click="rowClick" :ref="el => rowOperationRef('row_operation_' + row.<%= primaryKey.name %>, el)" />
        </template>
        <%_ Object.values(listComponentConfig.vxeGridSlots).forEach(vxeGridSlot => { _%>
        <%- vxeGridSlot -%>
        <%_ }); _%>
      </Grid>
      <%_ } else { _%>
      <Row :gutter="16" style="margin-bottom: 10px">
        <Col :span="12" v-if="!searchFormConfig.toggleSearchStatus && !searchFormConfig.disabled">
          <Space>
            <Input
              v-model:value="searchFormConfig.jhiCommonSearchKeywords"
              placeholder="请输入关键字"
              allow-clear
              @change="inputSearch"
              @pressEnter="formSearch"
              style="width: 280px"
              data-cy="listSearchInput"
            >
              <template #prefix>
                <Icon icon="ant-design:search-outlined" />
              </template>
              <template #addonAfter>
                <Button type="link" @click="formSearch" style="height: 30px" data-cy="listSearchButton"
                >查询<Icon icon="ant-design:filter-outlined" @click="handleToggleSearch" data-cy="listSearchMore" v-if="searchFormConfig.allowSwitch"></Icon>
                </Button>
              </template>
            </Input>
            <template v-for="button of toolbarButtons">
              <Button v-if="!button.dropdowns">{{ button.name }}</Button>
              <Dropdown v-else-if="selectedRows.length" :key="button.name" :content="button.name">
                <template #overlay>
                  <Menu v-for="subButton of button.dropdowns">
                    <MenuItem :key="subButton.name + 's'">
                      <Icon :icon="subButton.icon"></Icon>
                      {{ subButton.name }}
                    </MenuItem>
                  </Menu>
                </template>
                <Button>
                  {{ button.name }}
                  <Icon icon="ant-design:down-outlined" />
                </Button>
              </Dropdown>
            </template>

          </Space>
        </Col>
        <Col :span="12" style="display: flex; justify-content: flex-end">
          <Space align="end">
            <template v-for="button of toolbarTools">
              <Button v-if="!button.dropdowns" @click="toolbarClick({ code: button.code })">{{ button.name }}</Button>
              <Dropdown v-else-if="selectedRows.length" :key="button.name" :content="button.name">
                <template #overlay>
                  <Menu v-for="subButton of button.dropdowns">
                    <MenuItem :key="subButton.name + 's'">
                      <Icon :icon="subButton.icon"></Icon>
                      {{ subButton.name }}
                    </MenuItem>
                  </Menu>
                </template>
                <Button>
                  {{ button.name }}
                  <Icon icon="ant-design:down-outlined" />
                </Button>
              </Dropdown>
            </template>
          </Space>
        </Col>
      </Row>
      <BasicTree
        ref="treeRef"
        :expandedKeys="treeConfig.expandedKeys"
        :autoExpandParent="treeConfig.autoExpandParent"
        :selectedKeys="treeConfig.selectedKeys"
        :treeData="treeConfig.treeData"
        :checkable="true"
        :field-names="treeConfig.fieldNames"
        @select="treeSelect"
        @check="treeCheck"
      >
        <template #title="{ <%= primaryKey.name %>, <%= treeIndicatorFieldName%>, dataRef }">
          <Dropdown :trigger="['contextmenu']">
            <Popconfirm
              :open="treeConfig.visibleTreeKey === <%= primaryKey.name %>"
              title="确定要删除吗？"
              ok-text="确定"
              cancel-text="取消"
              placement="rightTop"
              @confirm="deleteById(dataRef.<%= primaryKey.name %>)"
              @openChange="onVisibleChange"
            >
              <span>{{ <%= treeIndicatorFieldName%> }}</span>
            </Popconfirm>

            <template #overlay>
              <Menu @click="">
                <MenuItem key="1" @click="rowClick({ name: 'addChildren', data: dataRef, params: {}})"><Icon icon="ant-design:file-add-outlined" style="margin-right: 4px" />添加子级</MenuItem>
                <MenuItem key="2" @click="treeConfig.visibleTreeKey = <%= primaryKey.name %>">
                  <span style="color: red"><Icon icon="ant-design:delete-outlined" style="margin-right: 4px" />删除</span>
                </MenuItem>
              </Menu>
            </template>
          </Dropdown>
        </template>
      </BasicTree>

      <%_ } _%>
      <BasicModal v-bind="popupConfig.containerProps" @register="registerModal" @cancel="closeModal" @ok="okModal" v-on="popupConfig.containerEvents">
        <component
          v-if="popupConfig.componentProps.is"
          v-bind="popupConfig.componentProps"
          :is="popupConfig.componentProps.is"
          @cancel="closeModal"
          @refresh="formSearch"
          v-on="popupConfig.componentEvents"
          ref="modalComponentRef"
        />
      </BasicModal>
      <BasicDrawer v-bind="popupConfig.containerProps" @register="registerDrawer" @close="closeDrawer" @ok="okDrawer" v-on="popupConfig.containerEvents">
        <component
          v-if="popupConfig.componentProps.is"
          v-bind="popupConfig.componentProps"
          :is="popupConfig.componentProps.is"
          @cancel="closeDrawer"
          @refresh="formSearch"
          v-on="popupConfig.componentEvents"
          ref="drawerComponentRef"
        />
      </BasicDrawer>
    </Card>
      </Pane>
      <Pane>
        <Card :bordered="false" class="bc-list-result-card" :bodyStyle="{ 'padding-top': '8px' }">
          <Tabs defaultActiveKey="baseInfo" type="card" v-if="currentRow">
            <TabPane key="baseInfo" tab="基本信息">
              <<%= entityClass %>Edit :entity-id="currentRow?.<%= primaryKey.name %> || ''" :form-buttons="['submit', 'reset']" />
            </TabPane>
          </Tabs>
          <Empty description="尚未选择<%= bcTitle %>" v-else />
        </Card>
      </Pane>
    </SplitPanes>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, getCurrentInstance, toRaw, shallowRef<% if (!fieldsContainParentAndChildren) { %>, h, computed<% } %> } from 'vue';
<%_ if (!fieldsContainParentAndChildren) { _%>
import { message, Modal, Empty, Space, Card, Row, Col, Input, Dropdown, Menu, MenuItem } from 'ant-design-vue';
import { VxeGridInstance, VxeGridListeners, VxeGridProps, Grid } from 'vxe-table';
<%_ } else { _%>
import { Alert, message, Modal, Empty, Space, Card, Row, Col, Input, Dropdown, Menu, MenuItem, Tabs, TabPane, Popconfirm, Tag } from 'ant-design-vue';
<%_ } _%>
import { debounce, isArray, upperFirst } from 'lodash-es';
import { getSearchQueryData } from '@/utils/jhipster/entity-utils';
<%_ if (!fieldsContainParentAndChildren) { _%>
import { transVxeSorts } from '@/utils/jhipster/sorts';
<%_ } _%>
import { Button, BasicModal, BasicDrawer, Icon, SearchForm, useModalInner, useDrawerInner<% if (fieldsContainParentAndChildren) { %>, BasicTree<% } else { %>, ButtonGroup, clearSearchFieldValue<% } %>, SplitPanes, Pane  } from '@begcode/components';
import { useGo } from '@/hooks/web/usePage';
import ServerProvider from '@/api-service/index';
import {
  <%_ if (!fieldsContainParentAndChildren) { _%>
  useMergeGridProps,
  useColumnsConfig,
  useSetOperationColumn,
  <%_ } _%>
  useSetShortcutButtons
} from '@/components/VxeTable/src/helper';
import <%= entityClass %>Edit from './components/form-component.vue';
import <%= entityClass %>Detail from './components/detail-component.vue';
import config from './config/list-config';
<%_ Object.keys(listComponentConfig.importPackages).forEach(importPackage => {
  const importComponents = listComponentConfig.importPackages[importPackage];
  let importComponentList = '';
  if (typeof importComponents === 'string') {
      importComponentList = listComponentConfig.importPackages[importPackage];
  } else {
      importComponentList = `{ ${Array.from(new Set(listComponentConfig.importPackages[importPackage])).join(', ')} }`;
  }
_%>
import <%= importComponentList %> from '<%= importPackage %>';
<%_ }); _%>
<%_ if (addCustomMethod.indexOf('listComponent') !== -1) { _%>
<%- include(`../common/entity-custom/${entityClass}.listComponent.ejs`, {position: 'import'}); -%>
<%_ } _%>
<%_
let apiModuleName = this._.camelCase(clientRootFolder || microserviceName);
const prefixApi = apiModuleName ? apiModuleName + '.' : '';
const componentName = this._.upperFirst((moduleName || clientRootFolder) ? (moduleName || clientRootFolder) + entityAngularName : entityAngularName) + 'List';
_%>

// begcode-please-regenerate-this-file 如果您不希望重新生成代码时被覆盖，将please修改为don't ！！！
const props = defineProps(config.ListProps);

const [registerModal, { closeModal, setModalProps }] = useModalInner(data => {
  console.log(data);
});
const [registerDrawer, { closeDrawer, setDrawerProps }] = useDrawerInner(data => {
  console.log(data);
});
const shallowRefs = {
  <%= entityClass %>Edit: shallowRef(<%= entityClass %>Edit),
  <%= entityClass %>Detail: shallowRef(<%= entityClass %>Detail),
  <%_ listComponentConfig.shallowRefs.forEach(shallowRef => { _%>
  <%= shallowRef %>: shallowRef(<%= shallowRef %>),
  <%_ }); _%>
};
const modalComponentRef = ref<any>(null);
const drawerComponentRef = ref<any>(null);
const ctx = getCurrentInstance()?.proxy;
const go = useGo();
const apiService = ctx?.$apiService as typeof ServerProvider;
const apis = {
  <%= entityInstance %>Service: apiService.<%= prefixApi %><%= entityInstance %>Service,
  find: apiService.<%= prefixApi %><%= entityInstance %>Service.<%= fieldsContainParentAndChildren ? 'tree' : 'retrieve'%>,
  deleteById: apiService.<%= prefixApi %><%= entityInstance %>Service.delete,
  deleteByIds: apiService.<%= prefixApi %><%= entityInstance %>Service.deleteByIds,
  import: apiService.<%= prefixApi %><%= entityInstance %>Service.importExcel,
  export: apiService.<%= prefixApi %><%= entityInstance %>Service.exportExcel,
  update: apiService.<%= prefixApi %><%= entityInstance %>Service.update,
  <%_ if (softDelete && !skipSoftDelete) { _%>
  recycleBin: apiService.<%= prefixApi %><%= entityInstance %>Service.recycleBin,
  restoreByIds: apiService.<%= prefixApi %><%= entityInstance %>Service.restoreByIds,
  reallyDelete: apiService.<%= prefixApi %><%= entityInstance %>Service.reallyDelete,
  emptyRecycleBin: apiService.<%= prefixApi %><%= entityInstance %>Service.emptyRecycleBin,
  findInRecycleBin: apiService.<%= prefixApi %><%= entityInstance %>Service.findInRecycleBin,
  <%_ } _%>
  <%_ Object.keys(listComponentConfig.relationshipApis).forEach(relationshipApiName => { _%>
  <%= relationshipApiName %>: <%= listComponentConfig.relationshipApis[relationshipApiName]%>,
  <%_}); _%>
};
const pageConfig = {
  title: '<%= bcTitle %>列表',
  baseRouteName: '<%= (moduleName || clientRootFolder) ? (moduleName || clientRootFolder) + entityAngularName : entityInstance %>',
};
<%_ if (softDelete && !skipSoftDelete) { _%>
const showRecycleBin = ref<Boolean>(false);
<%_ } _%>
<%_ if (!fieldsContainParentAndChildren) { _%>
const { columns } = useColumnsConfig(config.columns(),props.selectType, props.gridCustomConfig);
const xGrid = ref<VxeGridInstance>();
<%_ } else { _%>
const treeRef = ref<any>();
<%_ } _%>
<%_ if (!fieldsContainParentAndChildren) { _%>
const currentRow = computed(() => xGrid.value?.getCurrentRecord() || null);
<%} else { _%>
const currentRow = ref<any>(null);
<%_ } _%>
const searchFormConfig = reactive<any>(
  {
    fieldList: config.searchForm(),
    toggleSearchStatus: false,
    useOr: false,
    disabled: false,
    allowSwitch: <% if (fieldsContainParentAndChildren) { %>false, <% } else { %>true,<% } %>
    compact: true,
    jhiCommonSearchKeywords: '',
    ...props.searchFormOptions,
  }
);
<%_ if (!fieldsContainParentAndChildren) { _%>
const fieldSearchValues = computed(() => {
  return searchFormConfig.fieldList
    .filter(field => !field.hidden)
    .filter(field => {
      return field.value !== null &&
        field.value !== undefined &&
        field.value !== '' &&
        !(isArray(field.value) && field.value.length === 0);
    });
});
<%_ } _%>
const rowOperations = ref<any[]>([
  <%_ if (fieldsContainParentAndChildren && !skipWebButton.includes('listAdd')) { _%>
  {
    title: '下级',
    name: 'addChildren',
    containerType: 'modal',
    type: 'link',
    <%_ if (cypressTests) { _%>
    attrs: {
      'data-cy': 'entityNewChildrenButton'
    },
    <%_ } _%>
  },
  <%_ } _%>
  <%_ if (!skipWebButton.includes('listDelete')) { _%>
  {
    title: '删除',
    name: 'delete',
    type: 'link',
    <%_ if (cypressTests) { _%>
    attrs: {
      'data-cy': 'entityDeleteButton'
    },
    <%_ } _%>
  },
  <%_ } _%>
<%_ if (addCustomMethod.indexOf('listComponent') !== -1) { _%>
<%- include(`../common/entity-custom/${entityClass}.listComponent.ejs`, {position: 'rowOperations'}); -%>
<%_ } _%>
]);
<%_ if (!fieldsContainParentAndChildren) { _%>
const { rowOperationRef } = useSetOperationColumn(props.gridCustomConfig, rowOperations, xGrid);
<%_ } _%>

const extraButtons = ref([
  {
    show: props.cardExtra?.includes('import'),
    title: '导入',
    name: 'import',
    icon: 'ant-design:cloud-upload-outlined',
    click: () => {
      <%_ if (!fieldsContainParentAndChildren) { _%>
      xGrid.value.openImport();
      <%_ } _%>
    },
    <%_ if (cypressTests) { _%>
    attrs: {
      'data-cy': 'entityImportButton'
    },
    <%_ } _%>
  },
  {
    show: props.cardExtra?.includes('export'),
    name: 'export',
    title: '导出',
    icon: 'ant-design:download-outlined',
    click: () => {
      <%_ if (!fieldsContainParentAndChildren) { _%>
      xGrid.value.openExport();
      <%_ } _%>
    },
    <%_ if (cypressTests) { _%>
    attrs: {
      'data-cy': 'entityExportButton'
    },
    <%_ } _%>
  },
  {
    show: props.cardExtra?.includes('print'),
    title: '打印',
    name: 'print',
    icon: 'ant-design:printer-outlined',
    click: () => {
      <%_ if (!fieldsContainParentAndChildren) { _%>
      xGrid.value.openPrint();
      <%_ } _%>
    },
    <%_ if (cypressTests) { _%>
    attrs: {
      'data-cy': 'entityPrintButton'
    },
    <%_ } _%>
  },
  <%_ if (addCustomMethod.indexOf('listComponent') !== -1) { _%>
  <%- include(`../common/entity-custom/${entityClass}.listComponent.ejs`, {position: 'card-extra-left'}); -%>
  <%_ } _%>
  <%_ if (softDelete && !skipSoftDelete) { _%>
  {
    show: props.cardExtra?.includes('recycleBin'),
    title: '回收站',
    name: 'recycleBin',
    icon: 'ant-design:rest-twotone',
    click: () => {
      showRecycleBin.value = !showRecycleBin.value;
    },
    <%_ if (cypressTests) { _%>
    attrs: {
      'data-cy': 'entityRecycleBinButton'
    },
    <%_ } _%>
  }
  <%_ } _%>
]);
useSetShortcutButtons('<%= componentName %>', extraButtons);

const selectedRows = reactive<any>([]);
const searchFormRef = ref<any>(null);
<%_ if (fieldsContainParentAndChildren) { _%>
const treeConfig = reactive({
  treeData: [] as any[],
  expandedKeys: [],
  checkedKeys: [],
  selectedKeys: [],
  autoExpandParent: true,
  visibleTreeKey: null,
  fieldNames: {
    title: '<%= treeIndicatorFieldName %>',
    key: '<%= primaryKey.name %>',
    children: '<%= childrenRelationshipName %>',
  },
});
  <%_ (listComponentConfig.filterByTreeGetData || []).forEach(filterGetData => { _%>
<%- filterGetData -%>
  <%_ }); _%>
<%_ } _%>
const popupConfig = reactive<any>({
  needSubmit: false,
  containerProps: {
    width: '80%',
    destroyOnClose: true,
    okText: '确定',
    cancelText: '取消',
  },
  containerEvents: {},
  componentProps: {
    containerType: 'modal',
    baseData: props.baseData,
    is: '',
    entityId: '',
  },
  componentEvents: {},
});
const queryParams = ref<any>({ <% if (useCommonTable) { %>listModelName: '<%= entityClass %>'<% } else { %>...props.query<% } %> });
<%_ if (addCustomMethod.indexOf('listComponent') !== -1) { _%>
<%- include(`../common/entity-custom/${entityClass}.listComponent.ejs`, {position: 'props-query'}); -%>
<%_ } _%>
<%_ if (!fieldsContainParentAndChildren) { _%>
const ajax = {
  query: async ({ filters, page, sort, sorts }) => {
    console.log('filters', filters);
    queryParams.value.page = page?.currentPage > 0 ? page.currentPage - 1 : 0;
    queryParams.value.size = page?.pageSize;
    const allSort = sorts || [];
    sort && allSort.push(sort)
    queryParams.value = {...props.query};
    queryParams.value.sort = transVxeSorts(allSort);
    if (searchFormConfig.jhiCommonSearchKeywords) {
      queryParams.value['jhiCommonSearchKeywords'] = searchFormConfig.jhiCommonSearchKeywords;
    } else {
      delete queryParams.value['jhiCommonSearchKeywords'];
      Object.assign(queryParams.value, getSearchQueryData(searchFormConfig));
    }
    <%_ if (filterByTree) { _%>
    if (Object.keys(mapOfFilter.value).length) {
      queryParams.value.and = mapOfFilter.value;
    } else {
      delete queryParams.value.and;
    }
    <%_ } _%>
    <%_ if (softDelete && !skipSoftDelete) { _%>
    if (showRecycleBin.value) {
      return await apis.recycleBin(queryParams.value);
    } else {
      return await apis.find(queryParams.value);
    }
    <%_ } else { _%>
    return await apis.find(queryParams.value);
    <%_ } _%>
  },
  queryAll: async () => await apis.find({ size: -1 }),
  import: async ({file, options}) => {
    apis.import(file).then(() => {
      formSearch();
    });
  },
  <%_ if (softDelete && !skipSoftDelete) { _%>
  delete: async (records) => {
    if (showRecycleBin.value) {
      return await apis.reallyDelete(records.body.removeRecords.map(record => record.<%= primaryKey.name %>));
    } else {
      return await apis.deleteByIds(records.body.removeRecords.map(record => record.<%= primaryKey.name %>));
    }
  },
  <%_ } else { _%>
  delete: async (records) => await apis.deleteByIds(records.body.removeRecords.map(record => record.<%= primaryKey.name %>)),
  <%_ } _%>
};
<%_ } _%>
// 表格左上角自定义按钮
const toolbarButtons = [
  { name: '批量操作', circle: false, icon: 'vxe-icon-add', status: 'primary',
    dropdowns: [
      <%_ if (!skipWebButton.includes('listDelete')) { _%>
      { code: 'batchDelete', name: '删除', circle: false, icon: 'ant-design:delete-filled', status: 'primary' },
      <%_ } _%>
    ],
  },
];
// 表格右上角自定义按钮
const toolbarTools: any[] = [
  <%_ if (skipWebButton.indexOf('listAdd') === -1) { _%>
  { code: 'new', name: '新增', circle: false, icon: 'vxe-icon-add', },
  <%_ } _%>
  <%_ if (addCustomMethod.indexOf('listComponent') !== -1) { _%>
  <%- include(`../common/entity-custom/${entityClass}.listComponent.ejs`, {position: 'tools'}); -%>
  <%_ } _%>
  <%_ if (!fieldsContainParentAndChildren) { _%>
  { code: 'custom-column', name: '列配置', circle: false, icon: 'vxe-icon-custom-column'},
  <%_ } else { _%>
  { code: 'open-tree', name: '展开全部', circle: false, icon: 'vxe-icon-square-plus' },
  { code: 'close-tree', name: '折叠全部', circle: false, icon: 'vxe-icon-square-minus' },
  <%_ } _%>
];
<%_ if (!fieldsContainParentAndChildren) { _%>
const pagerLeft = () => {
  return h(Alert, { type: 'warning', banner: true, message: `已选择 ${selectedRows.length} 项`, style: 'height: 30px' });
};
const gridOptions = reactive<VxeGridProps>({
  ...config.baseGridOptions(ajax, toolbarButtons, toolbarTools, pagerLeft),
  columns,
});
useMergeGridProps(gridOptions,props.gridOptions);
<%_ } _%>
const toolbarClick = ({ code }) => {
  <%_ if (!fieldsContainParentAndChildren) { _%>
  const $grid = xGrid.value;
  <%_ } _%>
  switch (code) {
    <%_ if (!skipWebButton.includes('listDelete')) { _%>
    case 'batchDelete': {
      <%_ if (!fieldsContainParentAndChildren) { _%>
      const records = $grid.getCheckboxRecords(true);
      <%_ } else { _%>
      const records = treeConfig.checkedKeys.map(id => ({ id }));
      <%_ } _%>
      if (records?.length > 0) {
        const ids = records.map(record => record.<%= primaryKey.name %>);
        Modal.confirm({
          title: `操作提示`,
          content: `是否删除ID为【${ids.join(',')}】的${records.length}项数据？`,
          onOk() {
            apis.deleteByIds(ids).then(() => {
              formSearch();
            });
          },
          <%_ if (cypressTests) { _%>
          okButtonProps: {
            'data-cy': 'entityConfirmDeleteButton',
            'data-cy-heading': '<%= entityInstance %>DeleteDialogHeading',
          } as any,
          <%_ } _%>
        });
      }
      break;
    }
    <%_ } _%>
    <%_ if (!fieldsContainParentAndChildren) { _%>
    case 'custom-column':
      xGrid.value.openCustom();
      break;
    <%_ } else { _%>
    case 'open-tree':
      treeRef.value.expandAll(true);
      break;
    case 'close-tree':
      treeRef.value.expandAll(false);
      break;
    <%_ } _%>
    <%_ if (skipWebButton.indexOf('listAdd') === -1) { _%>
    case 'new':
      popupConfig.containerProps.title = '新建';
      popupConfig.containerProps.okText = '保存';
      popupConfig.containerProps.cancelText = '取消';
      popupConfig.needSubmit = true;
      popupConfig.containerProps.showOkBtn = true;
      popupConfig.containerProps.showCancelBtn = true;
      popupConfig.componentProps.is = shallowRefs.<%= entityClass %>Edit;
      popupConfig.componentProps.entityId = '';
      if (props.editIn === 'modal') {
        popupConfig.componentProps.containerType = 'modal';
        setModalProps({ open: true });
      } else if (props.editIn === 'drawer') {
        popupConfig.componentProps.containerType = 'drawer';
        setDrawerProps({ open: true });
      } else {
        <%_ if (skipMenu) { _%>
          console.log('未定义方法');
        <%_ } else { _%>
        if (pageConfig.baseRouteName) {
          go({ name: `${pageConfig.baseRouteName}New` });
        } else {
          console.log('未定义方法');
        }
        <%_ } _%>
      }
      break;
    <%_ } _%>
<%_ if (addCustomMethod.indexOf('listComponent') !== -1) { _%>
<%- include(`../common/entity-custom/${entityClass}.listComponent.ejs`, {position: 'toolbarToolClick'}); -%>
<%_ } _%>
  }
};
<%_ if (!fieldsContainParentAndChildren) { _%>

const checkboxChange = () => {
  const $grid = xGrid.value
  selectedRows.length = 0;
  selectedRows.push(...$grid.getCheckboxRecords());
};
const gridEvents = reactive<VxeGridListeners>({
  checkboxAll: checkboxChange,
  checkboxChange: checkboxChange,
  pageChange({ currentPage, pageSize }) {
    if (gridOptions.pagerConfig) {
      gridOptions.pagerConfig.currentPage = currentPage;
      gridOptions.pagerConfig.pageSize = pageSize;
    }
  },
  radioChange() {
    const $grid = xGrid.value;
    selectedRows.length = 0;
    selectedRows.push($grid.getRadioRecord());
  },
  // 表格左上角按钮事件
  toolbarButtonClick: toolbarClick,
  // 表格右上角自定义按钮事件
  toolbarToolClick: toolbarClick,
  proxyQuery: () => {
    const $grid = xGrid.value;
    const rows = $grid.getData();
    if (rows?.length) {
      $grid.setCurrentRow(rows[0]);
    }
  },
  <%_ if (fields.some(field => field.fieldConfig && field.fieldConfig.includes('editInList'))) { _%>
  editClosed({ row, column }) {
    const field = column.property;
    const cellValue = row[field];
    // 判断单元格值是否被修改
    if (xGrid.value.isUpdateByRow(row, field)) {
      const entity = { <%= primaryKey.name %>: row.<%= primaryKey.name %> };
      entity[field] = cellValue;
      apis
        .update(entity, [row.<%= primaryKey.name %>], [field])
        .then(() => {
          message.success({
            content: `信息更新成功。 ${field}=${cellValue}`,
            duration: 1,
          });
          xGrid.value.reloadRow(row, null, field);
        })
        .catch(error => {
          console.log('error', error);
          message.error({
            content: `信息保存可能存在问题！ ${field}=${cellValue}`,
            onClose: () => {},
          });
        });
    }
  },
  <%_ } _%>
});
<%_ } _%>
<%_ if (fieldsContainParentAndChildren) { _%>

const treeCheck = checkedKeys => {
  treeConfig.checkedKeys = checkedKeys;
};

const onVisibleChange = visible => {
  if (!visible) {
    treeConfig.visibleTreeKey = null;
  }
}

const treeSelect = (_selectedKeys, info) => {
  currentRow.value = info.node.dataRef;
};
<%_ } _%>
const okModal = async () => {
  if (popupConfig.needSubmit && modalComponentRef.value) {
    const result = await modalComponentRef.value.submit();
    if (result) {
      formSearch();
      closeModal();
    }
  }
};
const okDrawer = async () => {
  if (popupConfig.needSubmit && drawerComponentRef.value) {
    const result = await drawerComponentRef.value.submit();
    if (result) {
      formSearch();
      closeDrawer();
    }
  }
};
const formSearch = () => {
  <%_ if (!fieldsContainParentAndChildren) { _%>
  xGrid.value.commitProxy('reload');
  <%_ } else { _%>
  queryParams.value.page = 0;
  queryParams.value.size = -1;
  queryParams.value = { ...props.query };
  if (searchFormConfig.jhiCommonSearchKeywords) {
    queryParams.value['jhiCommonSearchKeywords'] = searchFormConfig.jhiCommonSearchKeywords;
  } else {
    delete queryParams.value['jhiCommonSearchKeywords'];
    Object.assign(queryParams.value, getSearchQueryData(searchFormConfig));
  }
  apis.find(queryParams.value).then(res => {
    treeConfig.treeData = res.records;
  });
  <%_ } _%>
};
<%_ if (fieldsContainParentAndChildren) { _%>
const deleteById = (id) => {
  apis.deleteById(id).then(() => {
    formSearch();
  });
};
<%_ } else { _%>
const closeSearchFieldTag = (field) => {
  clearSearchFieldValue(field);
  formSearch();
}
<%_ } _%>
const inputSearch = debounce(formSearch, 700);
const handleToggleSearch = () => {
  if (searchFormConfig.allowSwitch) {
    searchFormConfig.toggleSearchStatus = !searchFormConfig.toggleSearchStatus;
  }
};
const showSearchFormSetting = () => {
  if (searchFormRef.value) {
    searchFormRef.value.showSettingModal();
  }
};

const rowClick = ({ name, data, params }) => {
  const row = data;
  const operation = rowOperations.value.find(operation => operation.name === name);
  if (operation?.click) {
    operation.click(row);
  } else {
    switch (name) {
      <%_ if (fieldsContainParentAndChildren && !skipWebButton.includes('listAdd')) { _%>
      case 'addChildren':
        popupConfig.containerProps.title = '添加下级';
        popupConfig.containerProps.okText = '更新';
        popupConfig.containerProps.cancelText = '取消';
        popupConfig.needSubmit = true;
        popupConfig.containerProps.showOkBtn = true;
        popupConfig.containerProps.showCancelBtn = true;
        popupConfig.componentProps.is = shallowRefs.<%= entityClass %>Edit;
        popupConfig.componentProps.entityId = '';
        popupConfig.componentProps.baseData = { <%= parentRelationshipName %><%= primaryKey.nameCapitalized %>: row.<%= primaryKey.name %>, <%= parentRelationshipName %>: row };
        switch (operation?.containerType || props.editIn) {
          case 'modal':
            popupConfig.componentProps.containerType = 'modal';
            setModalProps({ open: true });
            break;
          case 'drawer':
            popupConfig.componentProps.containerType = 'drawer';
            setDrawerProps({ open: true });
            break;
          case 'page':
          default:
            if (pageConfig.baseRouteName) {
              go({ name: `${pageConfig.baseRouteName}New`, query: { parentId: row.<%= primaryKey.name %>, parent: row } });
            } else {
              console.log('未定义方法');
            }
        }
        break;
      <%_ } _%>
      <%_ if (!skipWebButton.includes('listDelete')) { _%>
      case 'delete':
        Modal.confirm({
          title: `操作提示`,
          content: `是否确认删除ID为${row.<%= primaryKey.name %>}的记录？`,
          onOk() {
            apis.deleteById(row.<%= primaryKey.name %>).then(() => {
              formSearch();
            });
          },
          <%_ if (cypressTests) { _%>
          okButtonProps: {
            'data-cy': 'entityConfirmDeleteButton',
            'data-cy-heading': '<%= entityInstance %>DeleteDialogHeading',
          } as any,
          <%_ } _%>
        });
        break;
      <%_ } _%>
      <%_ listComponentConfig.rowClickOperations.forEach(rowClickOperation => { _%>
      <%- rowClickOperation -%>
      <%_ }); _%>
      <%_ if (addCustomMethod.indexOf('listComponent') !== -1) { _%>
      <%- include(`../common/entity-custom/${entityClass}.listComponent.ejs`, {position: 'rowClickHandler'}); -%>
      <%_ } _%>
      default:
        console.log('error', `${name}未定义`);
    }
  }

};

<%_ if (addCustomMethod.indexOf('listComponent') !== -1) { _%>
<%- include(`../common/entity-custom/${entityClass}.listComponent.ejs`, {position: 'method'}); -%>
<%_ } _%>
const getSelectRows = () => {
  return toRaw(selectedRows);
};
<%_ if (fieldsContainParentAndChildren) { _%>
formSearch();
<%_ } _%>
defineExpose({ getSelectRows });
</script>
