feat: 修改框架

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

@@ -1,4 +1,8 @@
-import type { BasicFetchResult, BasicPageParams } from '#/api/model';
+import type {
+  BasicFetchResult,
+  BasicPageParams,
+  BasicTreeOptionResult,
+} from '#/api/model';
 
 import { requestClient } from '#/api/request';
 
@@ -57,7 +61,7 @@ export namespace DictionaryApi {
     requestClient.delete('/dictionary/item', { data: { id } });
 
   export const getItemList = (code: string) =>
-    requestClient.get<RecordItem[]>('/dictionary/item/list-code', {
+    requestClient.get<BasicTreeOptionResult[]>('/dictionary/item/list-code', {
       params: { code },
     });
 }

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

@@ -58,8 +58,8 @@ export namespace QueryApi {
   export const deleteDetail = (id: number) =>
     requestClient.delete('/query', { data: { id } });
 
-  export const getColumns = (id: number) =>
-    requestClient.get<Column[]>('/query/column-list', { params: { id } });
+  export const getColumns = (code: string) =>
+    requestClient.get<Column[]>('/query/column-list', { params: { code } });
 
   export const postExecute = (data: Record<string, any>) =>
     requestClient.post('/query/execute', data);

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

@@ -10,6 +10,7 @@ export namespace TableApi {
   export interface BasicRecordItem {
     tableType: string;
     name: string;
+    code: string;
     config: {
       buttons: any[];
       columns: any[];
@@ -32,6 +33,10 @@ export namespace TableApi {
       params: { id },
     });
 
+  export const getInfo = (code: string) =>
+    requestClient.get<RecordItem>('/table/query/info', {
+      params: { code },
+    });
   export const addDetail = (data: BasicRecordItem) =>
     requestClient.post('/table/query', data);
 

apps/web-baicai/src/components/form/components/api-popup.vue

@@ -1,16 +1,29 @@
 <script setup lang="ts">
 import type { SelectValue } from 'ant-design-vue/es/select';
 
-import { type PropType } from 'vue';
+import { computed, type PropType, ref, unref } from 'vue';
+
+import { cn } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
 import { Input } from 'ant-design-vue';
 
+import { Icon } from '#/components/icon';
+// import FormQuery from '#/views/system/design/table/components/preview.vue';
+
 const props = defineProps({
+  class: {
+    type: Object as PropType<any>,
+    default: undefined,
+  },
   value: {
     type: [String, Number, Array] as PropType<SelectValue>,
     default: undefined,
   },
+  placeholder: {
+    type: String as PropType<string>,
+    default: '请选择',
+  },
   api: {
     type: String as PropType<string>,
     default: '',
@@ -20,30 +33,90 @@ const props = defineProps({
     default: () => ({ label: 'label', value: 'value', options: null }),
   },
 });
+
 const emit = defineEmits(['update:value']);
+
+// const [FormQueryModal, formQueryApi] = useVbenModal({
+//   connectedComponent: FormQuery,
+// });
+
 const modelValue = useVModel(props, 'value', emit, {
   defaultValue: props.value,
   passive: true,
 });
-// const options = ref<BasicOptionResult[]>([]);
+
+const options = ref<Record<string, any>[]>([]);
+
+const displays = computed(() => {
+  const { fieldNames } = props;
+  return unref(options).map((item: any) => item[fieldNames.value]);
+});
+
+const handleSelect = () => {
+  // formQueryApi.setData({
+  //   isPreview: true,
+  //   isSelect: true,
+  //   baseData: { name: props.placeholder, code: props.api },
+  // });
+  // formQueryApi.open();
+};
 
 // const isFirstLoad = ref(true);
 </script>
 
 <template>
   <div class="bc-popup w-full">
-    <div class="bc-popup-selector">
-      <div class="bc-popup-selection-overflow">
-        <div class="bc-popup-selection-item">
-          <div class="bc-popup-selection-item-content">asdfasdf</div>
-        </div>
-        <div class="bc-popup-selection-item">
-          <div class="bc-popup-selection-item-content">bbb</div>
-        </div>
-        <div class="bc-popup-selection-placeholder">请选择</div>
-        <div class="bc-popup-selection-item">
-          <div style="width: 4px">
-            <Input v-model="modelValue" stype="opacity: 0; " />
+    <div v-if="false">
+      <!-- <FormQueryModal v-if="false" :close-on-click-modal="false" /> -->
+    </div>
+    <div
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border relative z-[1000] max-h-96 min-w-32 overflow-hidden rounded-md border',
+          props.class,
+        )
+      "
+      class="bc-popup-selector"
+    >
+      <div
+        :class="
+          cn(
+            'p-1',
+            'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]',
+          )
+        "
+        class="bc-popup-selector-overflow"
+      >
+        <div class="flex flex-1 items-center justify-between">
+          <div cclass="flex-1 mr-3">
+            <div
+              v-for="(item, index) in displays"
+              :key="index"
+              class="bc-popup-selector-item"
+            >
+              <div class="bc-popup-selector-item-content">{{ item }}</div>
+            </div>
+            <div
+              v-if="displays.length === 0"
+              class="bc-popup-selector-placeholder text-muted-foreground"
+              style="opacity: 0.5"
+            >
+              {{ placeholder }}
+            </div>
+            <div
+              class="bc-popup-selector-item"
+              style="width: 0; height: 0; opacity: 0"
+            >
+              <div style="width: 4px">
+                <Input v-model="modelValue" style="height: 0" />
+              </div>
+            </div>
+          </div>
+          <div @click="handleSelect">
+            <Icon
+              class="icon-more bc-popup-selector-btn size-5"
+              icon="ic:twotone-more-horiz"
+            />
           </div>
         </div>
       </div>
@@ -55,68 +128,33 @@ const modelValue = useVModel(props, 'value', emit, {
 .bc-popup {
   margin: 0;
   padding: 0;
-  color: rgba(0, 0, 0, 0.88);
-  font-size: 14px;
-  list-style: none;
-  position: relative;
-  display: inline-block;
   cursor: pointer;
 
   &-selector {
-    cursor: text;
-
     &-overflow {
       position: relative;
       display: flex;
       flex: auto;
-      flex-wrap: wrap;
       max-width: 100%;
+      padding: 4px 11px;
+    }
 
-      &-placeholder {
-        position: absolute;
-        top: 50%;
-        inset-inline-start: 11px;
-        inset-inline-end: 11px;
-        transform: translateY(-50%);
-        transition: all 0.3s;
-      }
+    &-item {
+      border: 1px solid hsl(var(--border));
+      border-radius: 4px;
 
-      &-item {
-        flex: none;
-        align-self: center;
-        max-width: 100%;
-        display: inline-flex;
-        position: relative;
-        display: flex;
-        flex: none;
-        box-sizing: border-box;
-        max-width: 100%;
-        height: 24px;
-        margin-top: 2px;
-        margin-bottom: 2px;
-        line-height: 22px;
-        background: rgba(0, 0, 0, 0.06);
-        border: 1px solid rgba(5, 5, 5, 0.06);
-        border-radius: 4px;
-        cursor: default;
-        transition:
-          font-size 0.3s,
-          line-height 0.3s,
-          height 0.3s;
-        user-select: none;
+      &-content {
+        display: inline-block;
         margin-inline-end: 4px;
-        padding-inline-start: 8px;
-        padding-inline-end: 4px;
-
-        &-content {
-          display: inline-block;
-          margin-inline-end: 4px;
-          overflow: hidden;
-          white-space: pre;
-          text-overflow: ellipsis;
-        }
+        overflow: hidden;
+        white-space: pre;
+        text-overflow: ellipsis;
       }
     }
+
+    &-btn {
+      color: hsl(var(--border));
+    }
   }
 }
 </style>

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

@@ -71,7 +71,7 @@ const [Modal, { close, getData, setState }] = useVbenModal({
         (await stepBaseConfig.value.stepValidate())
       ) {
         const values = await stepBaseConfig.value.stepGetValues();
-        columns.value = await QueryApi.getColumns(values.databaseQueryId);
+        columns.value = await QueryApi.getColumns(values.databaseQueryCode);
         Object.assign(modelRef.value, values);
         await stepSearchConfig.value.stepSetValues({ ...unref(modelRef) });
         state.stepIndex += 1;

apps/web-baicai/src/views/system/design/table/components/page.vue

@@ -8,9 +8,9 @@ defineOptions({
   name: 'TablePage',
 });
 const props = defineProps({
-  tableQueryId: {
-    type: [Number, String],
-    default: 0,
+  tableQueryCode: {
+    type: String,
+    default: '',
   },
 });
 const emit = defineEmits(['success']);
@@ -22,9 +22,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
     toolbarConfig: {
       refresh: true,
       print: false,
-      export: true,
-      zoom: true,
-      custom: true,
+      export: false,
+      zoom: false,
+      custom: false,
     },
     columns: [],
     height: 'auto',
@@ -32,13 +32,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     pagerConfig: {},
     exportConfig: {},
     proxyConfig: {
-      autoLoad: true,
+      autoLoad: false,
     },
   },
 });
 
-const loadPage = async (id: number) => {
-  const entity: TableApi.RecordItem = await TableApi.getDetail(id);
+const loadPage = async (code: string) => {
+  const entity: TableApi.RecordItem = await TableApi.getInfo(code);
   modelRef.value = { ...entity };
 
   const columns: any[] = [{ title: '序号', type: 'seq', width: 50 }];
@@ -77,10 +77,11 @@ const loadPage = async (id: number) => {
       gridOptions: {
         columns,
         proxyConfig: {
+          autoLoad: true,
           ajax: {
             query: async ({ page }: any, formValues: any) => {
               return await TableApi.postExecute({
-                id: entity.id,
+                code: entity.code,
                 pageIndex: page.currentPage,
                 pageSize: page.pageSize,
                 formData: { ...formValues },
@@ -108,22 +109,27 @@ const loadPage = async (id: number) => {
 
     gridApi.setState(gridState);
 
-    emit('success');
+    setTimeout(() => {
+      gridApi.reload();
+      emit('success');
+    }, 500);
   }
 };
 
 watch(
-  () => props.tableQueryId,
+  () => props.tableQueryCode,
   async (value) => {
-    if (value && Number(value) > 0) {
-      await loadPage(Number(value));
+    if (value && value.length > 0) {
+      await loadPage(value);
     }
   },
-  { deep: true },
+  { immediate: true },
 );
 </script>
 <template>
   <div class="h-full">
-    <Grid />
+    <Grid>
+      <template #toolbar-tools></template>
+    </Grid>
   </div>
 </template>

apps/web-baicai/src/views/system/design/table/components/preview.vue

@@ -5,13 +5,13 @@ import { useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
-import TablePage from '#/views/system/design/table/components/page';
+import TablePage from '#/views/system/design/table/components/page.vue';
 
 defineOptions({
   name: 'TablePreview',
 });
 const emit = defineEmits(['success']);
-const modelRef = ref<number>(0);
+const modelRef = ref<string>('');
 const isUpdate = ref(true);
 
 const [Modal, { close, setState, getData }] = useVbenModal({
@@ -33,8 +33,7 @@ const [Modal, { close, setState, getData }] = useVbenModal({
       setState({ loading: true });
       const data = getData<Record<string, any>>();
       isUpdate.value = !!data.isUpdate;
-
-      modelRef.value = data.baseData.id;
+      modelRef.value = data.baseData.code;
       setState({ title: `预览${data.baseData.name}` });
     }
   },
@@ -47,6 +46,6 @@ const handelLoadData = () => {
 </script>
 <template>
   <Modal class="w-[1000px]">
-    <TablePage :table-query-id="modelRef" @success="handelLoadData" />
+    <TablePage :table-query-code="modelRef" @success="handelLoadData" />
   </Modal>
 </template>

apps/web-baicai/src/views/system/design/table/components/step/baseConfig.vue

@@ -37,7 +37,17 @@ const [Form, { validate, setValues, getValues }] = useVbenForm({
     {
       component: 'Input',
       componentProps: {
-        placeholder: '请输入名称',
+        placeholder: '请输入编码',
+      },
+      fieldName: 'code',
+      label: '编码',
+      rules: 'required',
+    },
+    {
+      component: 'ApiPopup',
+      componentProps: {
+        placeholder: '请选择接口',
+        api: 'query-popup',
       },
       fieldName: 'databaseQueryCode',
       label: '接口',

apps/web-baicai/src/views/system/design/table/components/step/buttonConfig.vue

@@ -138,7 +138,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 const stepSetValues = async (data: Record<string, any>) => {
   const tableColumns: Record<string, any>[] = [];
 
-  const { buttons } = data && data.config;
+  const buttons = data && data.config?.buttons;
   if (buttons) {
     buttons.forEach((item: any) => {
       tableColumns.push({ ...item });

apps/web-baicai/src/views/system/design/table/components/step/searchConfig.vue

@@ -174,7 +174,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 const stepSetValues = async (data: Record<string, any>) => {
   const tableColumns: Record<string, any>[] = [];
 
-  const { search } = data && data.config;
+  const search = data && data.config?.search;
   const checkedRows: Record<string, any>[] = [];
   unref(columns).forEach((item: any) => {
     const values = {

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

@@ -25,6 +25,7 @@ export const gridOptions: VxeGridProps<TableApi.RecordItem> = {
     { title: '序号', type: 'seq', width: 50 },
     { align: 'left', field: 'tableType', title: '类型', width: 120 },
     { align: 'left', field: 'name', title: '查询名称', width: 200 },
+    { align: 'left', field: 'code', title: '查询编码', width: 100 },
     { field: 'sort', title: '排序', width: 50 },
     { align: 'left', field: 'remark', title: '备注' },
     {

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

@@ -53,7 +53,7 @@ const handleEdit = (record: any, isUpdate: boolean) => {
 const handlePreview = (record: any) => {
   formPreviewApi.setData({
     isPreview: true,
-    baseData: { id: record.id, name: record.name },
+    baseData: { id: record.id, name: record.name, code: record.code },
   });
 
   formPreviewApi.open();