调整框架

apps/web-antd/src/adapter/vxe-table.ts

@@ -18,7 +18,7 @@ setupVbenVxeTable({
           response: {
             result: 'items',
             total: 'total',
-            list: 'items',
+            list: 'data',
           },
           showActiveMsg: true,
           showResponseMsg: false,

apps/web-baicai/src/adapter/vxe-table.ts

@@ -18,7 +18,7 @@ setupVbenVxeTable({
           response: {
             result: 'items',
             total: 'total',
-            list: 'items',
+            list: '',
           },
           showActiveMsg: true,
           showResponseMsg: false,

apps/web-baicai/src/api/system/query.ts

@@ -52,4 +52,13 @@ export namespace QueryApi {
 
   export const deleteDetail = (id: number) =>
     requestClient.delete('/query', { data: { id } });
+
+  export const getColumns = (id: number) =>
+    requestClient.get('/query/column-list', { params: { id } });
+
+  export const postExecute = (data: Record<string, any>) =>
+    requestClient.post('/query/execute', data);
+
+  export const postExecuteReal = (data: Record<string, any>) =>
+    requestClient.post('/query/execute-real', data);
 }

apps/web-baicai/src/views/system/design/query/components/edit.vue

@@ -13,7 +13,7 @@ import StepBaseConfig from './stepBaseConfig.vue';
 import StepDetailConfig from './stepDetailConfig.vue';
 
 defineOptions({
-  name: 'TenantEdit',
+  name: 'QueryEdit',
 });
 const emit = defineEmits(['success']);
 const modelRef = ref<Record<string, any>>({});

apps/web-baicai/src/views/system/design/query/components/stepDetailConfig.vue

@@ -33,9 +33,12 @@ const handelSelect = async (
       remark: node.description,
       name: node.name,
       alias: node.entityName,
-      isMain: state.dbTables.length === 0,
+      isMain: node.isMain ?? state.dbTables.length === 0,
       columns: [],
       columnKeys: [],
+      connectType: node.connectType ?? 1,
+      connectColumn: node.connectColumn || 'id',
+      relationColumn: node.relationColumn ?? 'id',
     };
 
     const columns = await DatabaseApi.getColumnList(table.name, state.configId);
@@ -90,6 +93,10 @@ const stepSetValues = async (data: Record<string, any>) => {
           description: filter ? filter.description : item.name,
           name: item.name,
           entityName: item.alias,
+          isMain: item.isMain,
+          connectType: item.connectType,
+          connectColumn: item.connectColumn,
+          relationColumn: item.relationColumn,
         },
       });
 
@@ -121,7 +128,7 @@ const stepGetValues = async () => {
       name: table.name,
       alias: table.alias,
       isMain: table.isMain,
-      connectTable: state.mainTable.name,
+      connectTable: state.mainTable.alias,
       connectType: table.connectType,
       connectColumn: table.connectColumn,
       relationColumn: table.relationColumn,
@@ -174,7 +181,6 @@ defineExpose({ stepSetValues, stepValidate, stepGetValues });
               <Col :span="4">
                 <Select
                   v-model:value="table.connectType"
-                  :default-value="1"
                   :options="connectTypeOptions"
                   style="width: 100%"
                 />
@@ -184,7 +190,6 @@ defineExpose({ stepSetValues, stepValidate, stepGetValues });
                   v-model:value="table.connectColumn"
                   :field-names="{ label: 'remark', value: 'name' }"
                   :options="state.mainTable?.columns"
-                  default-value="id"
                   option-filter-prop="remark"
                   show-search
                   style="width: 100%"
@@ -195,7 +200,6 @@ defineExpose({ stepSetValues, stepValidate, stepGetValues });
                   v-model:value="table.relationColumn"
                   :field-names="{ label: 'remark', value: 'name' }"
                   :options="table.columns"
-                  default-value="id"
                   option-filter-prop="remark"
                   show-search
                   style="width: 100%"
@@ -218,16 +222,16 @@ defineExpose({ stepSetValues, stepValidate, stepGetValues });
           <Row>
             <Col v-for="column in table.columns" :key="column.name" :span="24">
               <Row class="mb-2">
-                <Col :span="16">
-                  <Checkbox :value="column.name" class="ml-4">
-                    {{ column.remark }}
-                  </Checkbox>
+                <Col :span="2">
+                  <Checkbox :value="column.name" />
+                </Col>
+                <Col :span="14">
+                  <Input v-model:value="column.remark" placeholder="名称" />
                 </Col>
                 <Col :span="8">
                   <Input v-model:value="column.alias" placeholder="表别名" />
                 </Col>
               </Row>
-              <div></div>
             </Col>
           </Row>
         </Checkbox.Group>

apps/web-baicai/src/views/system/design/query/components/view.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import { reactive, ref, unref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
+import { QueryApi } from '#/api';
+
+defineOptions({
+  name: 'QueryView',
+});
+const modelRef = ref<Record<string, any>>({});
+
+const gridOptions = reactive<VxeGridProps<QueryApi.BasicRecordItem>>({
+  columns: [{ title: '序号', type: 'seq', width: 50 }],
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: { enabled: false },
+  proxyConfig: {
+    autoLoad: false,
+    ajax: {
+      query: async ({ page }, formValues) => {
+        return await QueryApi.postExecuteReal({
+          pageIndex: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+          id: unref(modelRef).id,
+        });
+      },
+    },
+  },
+});
+
+const [Grid, { reload, setGridOptions }] = useVbenVxeGrid({
+  gridOptions,
+});
+
+const [Modal, { getData, setState }] = useVbenModal({
+  fullscreenButton: true,
+  draggable: true,
+  footer: false,
+  onOpenChange: async (isOpen: boolean) => {
+    if (isOpen) {
+      setState({ loading: true });
+
+      const data = getData<Record<string, any>>();
+
+      modelRef.value = { ...data.baseData };
+
+      const resColumns = await QueryApi.getColumns(data.baseData.id);
+
+      const columns = [
+        { align: 'center', title: '序号', type: 'seq', width: 50 },
+      ];
+
+      resColumns.forEach((column) => {
+        columns.push({
+          align: 'left',
+          field: column.alias,
+          title: column.remark,
+        });
+      });
+
+      setGridOptions({
+        columns,
+      });
+
+      await reload();
+
+      setState({ loading: false });
+    }
+  },
+  title: '查看查询',
+});
+</script>
+<template>
+  <Modal class="h-[750px] w-[1000px]">
+    <Grid>
+      <template #toolbar-tools>
+        <Button class="mr-2" type="primary" @click="reload"> 刷新 </Button>
+      </template>
+    </Grid>
+  </Modal>
+</template>

apps/web-baicai/src/views/system/design/query/data.config.ts

@@ -3,6 +3,7 @@ import type { VbenFormProps, VxeGridProps } from '#/adapter';
 import { QueryApi } from '#/api';
 
 export const searchFormOptions: VbenFormProps = {
+  showCollapseButton: false,
   schema: [
     {
       component: 'Input',

apps/web-baicai/src/views/system/design/query/index.vue

@@ -1,13 +1,15 @@
 <script lang="ts" setup>
 import { useAccess } from '@vben/access';
 import { Page, useVbenModal } from '@vben/common-ui';
+import { More } from '@vben/icons';
 
-import { Button, message, Modal } from 'ant-design-vue';
+import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter';
 import { QueryApi } from '#/api';
 
 import FormEdit from './components/edit.vue';
+import FormView from './components/view.vue';
 import { gridOptions, searchFormOptions } from './data.config';
 
 const { hasAccessByCodes } = useAccess();
@@ -21,6 +23,9 @@ const [FormEditModal, formEditApi] = useVbenModal({
   connectedComponent: FormEdit,
 });
 
+const [FormViewModal, formViewApi] = useVbenModal({
+  connectedComponent: FormView,
+});
 const handleDelete = (id: number) => {
   Modal.confirm({
     iconType: 'info',
@@ -44,6 +49,11 @@ const handleEdit = (record: any, isUpdate: boolean) => {
   formEditApi.open();
 };
 
+const handleView = (id: number) => {
+  formViewApi.setData({ baseData: { id } });
+  formViewApi.open();
+};
+
 const handelSuccess = () => {
   reload();
 };
@@ -52,6 +62,7 @@ const handelSuccess = () => {
 <template>
   <Page auto-content-height>
     <FormEditModal :close-on-click-modal="false" @success="handelSuccess" />
+    <FormViewModal :close-on-click-modal="false" />
     <Grid>
       <template #toolbar-tools>
         <Button
@@ -64,24 +75,39 @@ const handelSuccess = () => {
         </Button>
       </template>
       <template #action="{ row }">
-        <div class="flex">
+        <div class="flex items-center">
           <Button
-            :disabled="
-              !hasAccessByCodes(['query:edit']) || row.tenantType === 0
-            "
+            :disabled="!hasAccessByCodes(['query:edit'])"
             type="link"
             @click="() => handleEdit(row, true)"
           >
             编辑
           </Button>
           <Button
-            :disabled="!hasAccessByCodes(['query:delete'])"
+            :disabled="!hasAccessByCodes(['query:view'])"
             danger
             type="link"
-            @click="() => handleDelete(row.id)"
+            @click="() => handleView(row.id)"
           >
-            删除
+            查看
           </Button>
+
+          <Dropdown>
+            <a class="ant-dropdown-link" @click.prevent>
+              <More class="size-4" />
+            </a>
+            <template #overlay>
+              <Menu>
+                <Menu.Item
+                  key="0"
+                  :disabled="!hasAccessByCodes(['query:delete'])"
+                  @click="() => handleDelete(row.id)"
+                >
+                  <a href="#">删除</a>
+                </Menu.Item>
+              </Menu>
+            </template>
+          </Dropdown>
         </div>
       </template>
     </Grid>

apps/web-baicai/src/views/system/tenant/index.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useAccess } from '@vben/access';
 import { Page, useVbenModal } from '@vben/common-ui';
+import { More } from '@vben/icons';
 
 import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue';
 
@@ -96,7 +97,9 @@ const handelSuccess = () => {
             修改
           </Button>
           <Dropdown>
-            <a class="ant-dropdown-link" @click.prevent> ... </a>
+            <a class="ant-dropdown-link" @click.prevent>
+              <More class="size-4" />
+            </a>
             <template #overlay>
               <Menu>
                 <Menu.Item

packages/icons/src/iconify/index.ts

@@ -11,3 +11,5 @@ export const MdiGithub = createIconifyIcon('mdi:github');
 export const MdiGoogle = createIconifyIcon('mdi:google');
 
 export const MdiQqchat = createIconifyIcon('mdi:qqchat');
+
+export const More = createIconifyIcon('ri:more-fill');