iotlcm/admin-svr/server/resource/generate/default/curd/web.index.vue.template

<script lang="ts" setup>
@{.import}

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  fieldMappingTime: [['date', ['start', 'end']]],
  schema: querySchema,
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  // 是否在字段值改变时提交表单
  submitOnChange: true,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeTableGridOptions<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'id',
  },
  rowConfig: {
    keyField: 'id',
  },
  columns: columns,
  exportConfig: {},
  height: 'auto',
  keepSource: true,
  showOverflow: false,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await List({
          page: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
  toolbarConfig: {
    custom: true,
    export: false,
    refresh: true,
    resizable: true,
    search: true,
    zoom: true,
  },
};

const gridEvents: DeepPartial<VxeGridListeners> = {
  checkboxChange: handleCheckboxChange,
  checkboxAll: handleCheckboxChange,
};

const CheckboxChecked = ref(false);
function handleCheckboxChange() {
  CheckboxChecked.value = gridApi.grid.getCheckboxRecords().length > 0;
}

const [Grid, gridApi] = useVbenVxeGrid({
  @{ if eq .isSearchForm true }
  formOptions,
  @{end}
  gridOptions,
  gridEvents,
});


const [ViewDrawer, drawerApi] = useVbenDrawer({
  connectedComponent: viewDrawer,
});

function handlePreview(record: RowType) {
  drawerApi.setData({ record });
  drawerApi.open();
}


@{ if eq .isEditModal true }
const [EditDrawer, editDrawerApi] = useVbenModal({
  connectedComponent: editDrawer,
});
@{else}
const [EditDrawer, editDrawerApi] = useVbenDrawer({
  connectedComponent: editDrawer,
});
@{end}

function handleAdd() {
  editDrawerApi.setData({ update: false, view: false });
  editDrawerApi.open();
}

function handleEdit(row: RowType) {
  editDrawerApi.setData({ id: row.@{.pk.TsName}, update: true, view: false });
  editDrawerApi.open();
}

@{ if eq .options.Step.HasDel true }
async function handleDelete(row: RowType) {
  await Delete({ @{.pk.TsName}: [row.@{.pk.TsName}] });
  message.success("删除成功");
  await handleRefresh();
}
@{end}

async function handleRefresh() {
  await gridApi.query();
}

@{ if eq .options.Step.HasBatchDel true }
function handleMultiDelete() {
  const rows = gridApi.grid.getCheckboxRecords();
  const ids: string[] = [];
  for (const row of rows) {
    ids.push(row.@{.pk.TsName});
  }
  if (ids.length === 0){
    message.error('请至少选择一项要删除的数据');
    return;
  }

  Modal.confirm({
    title: '提示',
    okType: 'danger',
    content: `确认删除选中的${ids.length}条记录吗？`,
    onOk: async () => {
      await Delete({ @{.pk.TsName}: ids });
      message.success("删除成功");
      await handleRefresh();
    },
  });
}
@{end}

@{ if eq .options.Step.HasExport true }
async function handleExport() {
  const formValues = gridApi.formApi.form.values;
  await commonDownloadExcel(Export, '@{.tableComment}',{
    ...formValues,
    page: 1,
    pageSize: 2000,
  });
  message.success("导出成功");
}
@{end}

@{ if eq .options.Step.HasStatus true }
async function handleStatusChange(row: RowType) {
  await Status({ id: row.id, status: row.status }); 
  await message.success("操作成功")
  await handleRefresh();
}
@{end}

</script>

<template>
  <Page auto-content-height>
    <Grid table-title="@{.tableComment}">
      <template #toolbar-tools>
        @{ if eq .options.Step.HasAdd true }
        <Button class="mr-2 flex items-center " type="primary" :icon="h(MdiPlus)" @click="handleAdd" v-access:code="'cpm:gen:@{.varName | LcFirst}:edit'">新增</Button>
        @{end}
        @{ if eq .options.Step.HasBatchDel true }
        <Button class="mr-2 flex items-center" type="primary" :disabled="!CheckboxChecked" :icon="h(MdiDelete)" @click="handleMultiDelete" v-access:code="'cpm:gen:@{.varName | LcFirst}:delete'">删除</Button>
        @{end}
        @{ if eq .options.Step.HasExport true }
        <Button class="mr-2 flex items-center" type="primary" :icon="h(MdiExport)" @click="handleExport" v-access:code="'cpm:gen:@{.varName | LcFirst}:export'">导出</Button>
        @{end}
      </template>
      @{ if eq .options.Step.HasStatus true }
      <template #status="{ row }">
        <Switch
          v-model:checked="row.status" :checkedValue="'0'" :unCheckedValue="'1'"
          @change="handleStatusChange(row)"
           :disabled="!hasAccessByCodes(['cpm:gen:@{.varName | LcFirst}:status'])"
        />
      </template>
      @{end}
      <template #action="{ row }">
        <div class="flex items-center">
          @{ if eq .options.Step.HasView true }
          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handlePreview(row)" v-access:code="'cpm:gen:@{.varName | LcFirst}:view'">查看</Button>
          @{end}
          @{ if eq .options.Step.HasEdit true }
          <Button class="mr-2 border-none p-0" :block="false" type="link" @click="handleEdit(row)" v-access:code="'cpm:gen:@{.varName | LcFirst}:edit'">修改</Button>
          @{end}
          @{ if eq .options.Step.HasDel true }
          <AccessControl :codes="['cpm:gen:@{.varName | LcFirst}:delete']" type="code">
            <Popconfirm title="确定删除吗？" :get-popup-container="getVxePopupContainer" placement="left"  @confirm="handleDelete(row)" >  
              <Button class="mr-2 border-none p-0" :block="false" type="link"  danger >
                删除
              </Button>
            </Popconfirm>
          </AccessControl>
          @{end}
        </div>
      </template>
    </Grid>
    @{ if eq .options.Step.HasEdit true } <EditDrawer @reload="handleRefresh" /> @{end}
    @{ if eq .options.Step.HasView true } <ViewDrawer /> @{end}
  </Page>
</template>