<%_
const { listComponentConfig } = (bcEntityData || {listComponentConfig: {}});
_%>
<template>
  <!-- begcode-please-regenerate-this-file 如果您不希望重新生成代码时被覆盖，将please修改为don't ！！！-->
  <div<% if (cypressTests) { %> data-cy="<%= entityAngularName %>Heading"<% } %>>
  <%_ if (filterByTree) { _%>
  <SplitPanes class="default-theme">
    <SplitPane size="20">
      <a-card
        title="过滤列表"
        class="bc-list-result-card"
        :body-style="{ 'padding': '12px 12px 8px 12px' }"
        :head-style="{ 'min-height': '40px', 'padding': '12px' }"
      >
        <BasicTree
          :expandedKeys="filterTreeConfig.expandedKeys"
          :autoExpandParent="filterTreeConfig.autoExpandParent"
          :selectedKeys="filterTreeConfig.selectedKeys"
          :treeData="filterTreeConfig.treeFilterData"
          @select="filterTreeSelect"
        />
      </a-card>
    </SplitPane>
    <SplitPane>
  <%_ } _%>
    <a-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>
        <a-space>
          <BasicButton type="default" @click="showSearchFormSetting" pre-icon="ant-design:setting-outlined" shape="circle" size="small"></BasicButton>
        </a-space>
      </template>
      <SearchForm :config="searchFormConfig" @formSearch="formSearch" @close="handleToggleSearch" ref="searchFormRef"/>
    </a-card>
    <a-row
      v-if="fieldSearchValues && fieldSearchValues.length && !searchFormConfig.toggleSearchStatus"
      style="background-color: #ffffff; padding: 4px; margin: 8px; border-radius: 4px"
    >
      <a-col :span="24" style="padding-left: 20px">
        <span>搜索条件：</span>
        <a-space>
          <a-tag closable v-for="fieldVale of fieldSearchValues" @close="closeSearchFieldTag(fieldVale)">
            {{ fieldVale.title }}: {{ fieldVale.value }}
          </a-tag>
        </a-space>
      </a-col>
    </a-row>
    <a-card :bordered="false" class="bc-list-result-card" :bodyStyle="{'padding-top': '1px'}">
      <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvents" data-cy="entityTable">
        <template #toolbar_buttons>
          <a-row :gutter="16">
            <a-col v-if="!searchFormConfig.toggleSearchStatus && !searchFormConfig.disabled">
              <a-space>
                <a-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>
                    <BasicButton type="link" @click="formSearch" style="height: 30px" data-cy="listSearchButton"
                    >查询<Icon icon="ant-design:filter-outlined" @click="handleToggleSearch" data-cy="listSearchMore" />
                    </BasicButton>
                  </template>
                </a-input>
                <template v-for="button of gridOptions?.toolbarConfig?.buttons">
                  <BasicButton v-if="!button.dropdowns">{{button.name}}</BasicButton>
                  <a-dropdown v-else-if="selectedRows.length" :key="button.name" :content="button.name">
                    <template #overlay>
                      <a-menu @click="gridEvents.toolbarButtonClick?.(subButton as any)" v-for="subButton of button.dropdowns">
                        <a-menu-item :key="subButton.name + 's'">
                          <Icon :icon="subButton.icon" />
                          {{subButton.name}}
                        </a-menu-item>
                      </a-menu>
                    </template>
                    <BasicButton>
                      {{button.name}}
                      <Icon icon="ant-design:down-outlined" />
                    </BasicButton>
                  </a-dropdown>
                </template>
              </a-space>
            </a-col>
          </a-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 -%>
        <%_ }); _%>
        <template #pagerLeft>
          <a-alert type="warning" banner :message="'已选择 ' + selectedRows.length + ' 项'" style="height: 30px" />
        </template>
      </vxe-grid>
      <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>
    </a-card>
    <%_ if (filterByTree) { _%>
      </SplitPane>
    </SplitPanes>
  <%_ } _%>
  </div>
</template>

<script lang="ts" setup>
import { Modal, message } from 'ant-design-vue';
import { VxeGridInstance, VxeGridListeners, VxeGridProps } from 'vxe-table';
import { getSearchQueryData } from '@/utils/jhipster/entity-utils';
import { transVxeSorts } from '@/utils/jhipster/sorts';
import { useDrawer } from '@/components/Drawer';
import { useModal } from '@/components/Modal';
import { ButtonGroup } from '@/components/Button';
import { clearSearchFieldValue } from '@/components/SearchForm';
import { useGo } from '@/hooks/web/usePage';
import ServerProvider from '@/api-service/index';
import {
  useMergeGridProps,
  useColumnsConfig,
  useSetOperationColumn,
  useSetShortcutButtons
} from '@/components/VxeTable/src/helper';
import <%= entityClass %>Form 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 }] = useModal();
const [registerDrawer, { closeDrawer, setDrawerProps }] = useDrawer();
const shallowRefs = {
  <%= entityClass %>Edit: shallowRef(<%= entityClass %>Form),
  <%= 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,
  <%_ if (extendAbstractAuditingEntity) { _%>
  auditingUser: apiService.system.userService.retrieve,
  <%_ } _%>
  find: apiService.<%= prefixApi %><%= entityInstance %>Service.<%= fieldsContainParentAndChildren ? 'tree' : 'retrieve'%>,
  deleteById: apiService.<%= prefixApi %><%= entityInstance %>Service.delete,
  deleteByIds: apiService.<%= prefixApi %><%= entityInstance %>Service.deleteByIds,
  update: apiService.<%= prefixApi %><%= entityInstance %>Service.update,
  import: apiService.<%= prefixApi %><%= entityInstance %>Service.importExcel,
  export: apiService.<%= prefixApi %><%= entityInstance %>Service.exportExcel,
  <%_ 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]%>,
  <%_}); _%>
  <%_ for (relationship of relationships) {
    const relationApiModuleName = this._.camelCase(relationship.otherEntity.clientRootFolder || relationship.otherEntity.microserviceName);
_%>
  <%= relationship.relationshipName %>: apiService<%= relationApiModuleName ?  '.' + relationApiModuleName : ''%>.<%= relationship.otherEntity.entityInstance%>Service.<%= relationship.otherEntity.fieldsContainParentAndChildren ? 'tree' : 'retrieve'%>,
<%_ } _%>
};
const pageConfig = {
  title: '<%= bcTitle %>列表',
  baseRouteName: '<%= (moduleName || clientRootFolder) ? (moduleName || clientRootFolder) + entityAngularName : entityInstance %>',
};
const { columns } = useColumnsConfig(config.columns(),props.selectType, props.gridCustomConfig);
<%_ if (softDelete && !skipSoftDelete) { _%>
const showRecycleBin = ref<Boolean>(false);
<%_ } _%>
const xGrid = ref({} as VxeGridInstance);
const searchFormConfig = reactive<Record<string, any>>(
  {
    fieldList: config.searchForm(apis),
    toggleSearchStatus: false,
    useOr: false,
    disabled: false,
    allowSwitch: true,
    compact: true,
    jhiCommonSearchKeywords: '',
    ...props.searchFormOptions,
  }
);
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 (!skipWebButton.includes('listEdit')) { _%>
  {
    title: '保存',
    hide: row => !xGrid.value.isEditByRow(row) || !xGrid.value.props.editConfig?.mode === 'row',
    name: 'save',
    type: 'link',
    <%_ if (cypressTests) { _%>
    attrs: {
      'data-cy': 'entitySaveButton'
    },
    <%_ } _%>
  },
  {
    title: '编辑',
    hide: row => xGrid.value.isEditByRow(row) && xGrid.value.props.editConfig?.mode === 'row',
    name: 'edit',
    type: 'link',
    <%_ if (cypressTests) { _%>
    attrs: {
      'data-cy': 'entityEditButton'
    },
    <%_ } _%>
  },
  <%_ } _%>
  <%_ if (fieldsContainParentAndChildren && !skipWebButton.includes('listAdd')) { _%>
  {
    title: '下级',
    name: 'addChildren',
    hide: row => xGrid.value.isEditByRow(row) && xGrid.value.props.editConfig?.mode === 'row',
    containerType: 'modal',
    type: 'link',
    <%_ if (cypressTests) { _%>
    attrs: {
      'data-cy': 'entityNewChildrenButton'
    },
    <%_ } _%>
  },
  <%_ } _%>
  <%_ if (!skipWebButton.includes('listDelete')) { _%>
  {
    title: '删除',
    hide: row => xGrid.value.isEditByRow(row) && xGrid.value.props.editConfig?.mode === 'row',
    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 (!skipWebButton.includes('listDetail')) { _%>
  {
    title: '详情',
    name: 'detail',
    hide: row => xGrid.value.isEditByRow(row) && xGrid.value.props.editConfig?.mode === 'row',
    containerType: 'drawer',
    type: 'link',
    <%_ if (cypressTests) { _%>
    attrs: {
      'data-cy': 'entityDetailsButton'
    },
    <%_ } _%>
  },
  <%_ } _%>
]);
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: () => {
      xGrid.value.openImport();
    },
    <%_ if (cypressTests) { _%>
    attrs: {
      'data-cy': 'entityImportButton'
    },
    <%_ } _%>
  },
  {
    show: props.cardExtra?.includes('export'),
    name: 'export',
    title: '导出',
    icon: 'ant-design:download-outlined',
    click: () => {
      xGrid.value.openExport();
    },
    <%_ if (cypressTests) { _%>
    attrs: {
      'data-cy': 'entityExportButton'
    },
    <%_ } _%>
  },
  {
    show: props.cardExtra?.includes('print'),
    title: '打印',
    name: 'print',
    icon: 'ant-design:printer-outlined',
    click: () => {
      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 (filterByTree) { _%>
const mapOfFilter = ref({});
const filterTreeConfig = reactive({
  treeFilterData: [] as any[],
  expandedKeys: [],
  checkedKeys: [],
  selectedKeys: [],
  autoExpandParent: true,
});
  <%_ (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'}); -%>
<%_ } _%>
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 = [
  <%_ 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: 'open-tree', name: '展开', circle: false, icon: 'vxe-icon-square-plus', },
  { code: 'close-tree', name: '折叠', circle: false, icon: 'vxe-icon-square-minus', },
  <%_ } _%>
  { code: 'custom-column', name: '列配置', circle: false, icon: 'vxe-icon-custom-column'},
];
const gridOptions = reactive<VxeGridProps>({
  ...config.baseGridOptions(ajax, toolbarButtons, toolbarTools),
  columns,
});
useMergeGridProps(gridOptions,props.gridOptions);
function toolbarClick({ code }) {
  const $grid = xGrid.value;
  switch (code) {
    <%_ if (!skipWebButton.includes('listDelete')) { _%>
    case 'batchDelete': {
      const records = $grid.getCheckboxRecords(true);
      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 'open-tree':
      gridOptions.loadingConfig = { text: '正在展开...' };
      gridOptions.loading = true;
      setTimeout(() => {
        xGrid.value.setAllTreeExpand(true).then(() => {
          gridOptions.loading = undefined;
          gridOptions.loadingConfig = undefined;
        });
      }, 10);
      break;
    case 'close-tree':
      gridOptions.loadingConfig = { text: '正在折叠...' };
      gridOptions.loading = true;
      setTimeout(() => {
        xGrid.value.clearTreeExpand().then(() => {
          gridOptions.loading = undefined;
          gridOptions.loadingConfig = undefined;
        });
      }, 10);
      break;
    <%_ } _%>
    case 'custom-column':
      xGrid.value.openCustom();
      break;
    <%_ if (skipWebButton.indexOf('listAdd') === -1) { _%>
    case 'new':
      popupConfig.needSubmit = true;
      popupConfig.containerProps.title = '新建';
      popupConfig.containerProps.okText = '保存';
      popupConfig.containerProps.cancelText = '取消';
      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'}); -%>
<%_ } _%>
  }
}

function 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,
  <%_ 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: () => {},
          });
        });
    }
  },
  <%_ } _%>
});
async function okModal() {
  if (popupConfig.needSubmit && modalComponentRef.value) {
    const result = await modalComponentRef.value.submit();
    if (result) {
      formSearch();
      closeModal();
    }
  }
}
async function okDrawer() {
  if (popupConfig.needSubmit && drawerComponentRef.value) {
    const result = await drawerComponentRef.value.submit();
    if (result) {
      formSearch();
      closeDrawer();
    }
  }
}
function formSearch() {
  xGrid.value.commitProxy('reload');
}
function closeSearchFieldTag(field) {
  clearSearchFieldValue(field);
  formSearch();
}
const inputSearch = _debounce(formSearch, 700);
function handleToggleSearch() {
  searchFormConfig.toggleSearchStatus = !searchFormConfig.toggleSearchStatus;
}
function showSearchFormSetting() {
  if (searchFormRef.value) {
    searchFormRef.value.showSettingModal();
  }
}
<%_ if (filterByTree) { _%>

function filterTreeSelect(selectedKeys, info) {
  const filterData = info.node.dataRef;
  mapOfFilter.value = {};
  if (selectedKeys && selectedKeys.length > 0) {
    if (filterData.type === 'filterItem') {
      mapOfFilter.value[info.node.dataRef.filterName] = info.node.dataRef.filterValue;
      filterTreeConfig.selectedKeys = selectedKeys;
    }
  }
  formSearch();
}
<%_ } _%>

function 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) {
      case 'save':
        break;
      <%_ if (!skipWebButton.includes('listEdit')) { _%>
      case 'edit':
        popupConfig.needSubmit = true;
        popupConfig.containerProps.title = '编辑<%= bcTitle %>';
        popupConfig.containerProps.okText = '更新';
        popupConfig.containerProps.cancelText = '取消';
        popupConfig.containerProps.showOkBtn = true;
        popupConfig.containerProps.showCancelBtn = true;
        popupConfig.componentProps.is = shallowRefs.<%= entityClass %>Edit;
        popupConfig.componentProps.entityId = row.<%= primaryKey.name %>;
        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}Edit`, params: { entityId: row.<%= primaryKey.name %> } });
            } else {
              console.log('未定义方法');
            }
        }
        break;
      <%_ } _%>
      <%_ if (!skipWebButton.includes('listDetail')) { _%>
      case 'detail':
        popupConfig.containerProps.title = '详情';
        popupConfig.containerProps.cancelText = '关闭';
        popupConfig.needSubmit = false;
        popupConfig.containerProps.showOkBtn = false;
        popupConfig.containerProps.showCancelBtn = true;
        popupConfig.componentProps.is = shallowRefs.<%= entityClass %>Detail;
        popupConfig.componentProps.entityId = row.id;
        switch (operation?.containerType || 'page') {
          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}Detail`, params: { entityId: row.<%= primaryKey.name %> } });
            } else {
              console.log('未定义方法');
            }
        }
        break;
      <%_ } _%>
      <%_ 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 || 'page') {
          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);
};

defineExpose({ getSelectRows });
</script>
