feat: 修改组件

apps/web-baicai/src/components/bc-tree/src/bc-tree.vue

@@ -9,7 +9,7 @@ import type { ApiConfig, FieldNames } from '#/components/form/types';
 
 import { computed, reactive, ref, toRaw, unref, watch, watchEffect } from 'vue';
 
-import { VbenLoading, VbenScrollbar } from '@vben/common-ui';
+import { Loading, VbenScrollbar } from '@vben/common-ui';
 import { EmptyIcon } from '@vben/icons';
 import { isFunction } from '@vben/utils';
 
@@ -61,6 +61,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  toolbar: {
+    type: Boolean,
+    default: true,
+  },
   checkable: {
     type: Boolean,
     default: false,
@@ -73,6 +77,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  treeData: {
+    type: Array as PropType<TreeDataItem[]>,
+    default: null,
+  },
 });
 const emit = defineEmits([
   'update:searchValue',
@@ -155,7 +163,7 @@ const handleSelect = (keys: Key[], e: any) => {
   emit('change', keys, e);
 };
 
-const handleCheck = (keys: any) => {
+const handleCheck = (keys: any, info: any) => {
   let currentValue = [...keys];
   if (searchState.startSearch) {
     currentValue = currentValue.filter((item: number | string) => {
@@ -167,7 +175,7 @@ const handleCheck = (keys: any) => {
 
   const rawVal = toRaw(state.checkedKeys);
   emit('update:value', rawVal);
-  emit('check', rawVal);
+  emit('check', rawVal, info);
 };
 
 const contentStyle = computed<StyleValue>(() => {
@@ -208,6 +216,12 @@ watchEffect(() => {
   state.checkedKeys = props.checkedKeys;
 });
 
+watchEffect(() => {
+  if (props.treeData) {
+    treeDataRef.value = props.treeData as TreeDataItem[];
+  }
+});
+
 watch(
   () => props.api.params,
   () => {
@@ -216,6 +230,15 @@ watch(
   { deep: true },
 );
 
+watch(
+  () => props.treeData,
+  (val) => {
+    if (val) {
+      handleSearch(searchState.searchText);
+    }
+  },
+);
+
 const setExpandedKeys = (keys: (number | string)[]) => {
   state.expandedKeys = keys;
 };
@@ -349,56 +372,59 @@ const handleMenuClick = async (e: any) => {
       />
     </div>
     <VbenScrollbar :style="contentStyle">
-      <VbenLoading :spinning="loading" />
-      <DirectoryTree
-        :expanded-keys="state.expandedKeys"
-        :auto-expand-parent="state.autoExpandParent"
-        :checked-keys="state.checkedKeys"
-        :tree-data="getTreeData"
-        :field-names="{
-          title: fieldNames.label,
-          key: fieldNames.value,
-          children: fieldNames.children,
-        }"
-        block-node
-        :show-icon="false"
-        class="px-2"
-        :checkable="checkable"
-        @expand="handleExpand"
-        @select="handleSelect"
-        @check="handleCheck"
-        :check-strictly="state.checkStrictly"
-      >
-        <template #title="treeDataItem">
-          <slot name="title" v-bind="treeDataItem">
-            <span
-              v-if="treeDataItem[fieldNames.label].indexOf(searchListData) > -1"
-            >
-              {{
-                treeDataItem[fieldNames.label].substring(
-                  0,
-                  treeDataItem[fieldNames.label].indexOf(searchListData),
-                )
-              }}
-              <span style="color: #f50">{{ searchListData }}</span>
-              {{
-                treeDataItem[fieldNames.label].substring(
-                  treeDataItem[fieldNames.label].indexOf(searchListData) +
-                    searchListData.length,
-                )
-              }}
-            </span>
-            <span v-else>{{ treeDataItem[fieldNames.label] }}</span>
-          </slot>
-        </template>
-      </DirectoryTree>
-      <div
-        v-if="getNotFound"
-        class="flex-col-center text-muted-foreground min-h-[150px] w-full"
-      >
-        <EmptyIcon class="size-10" />
-        <div class="mt-1 text-sm">暂无数据</div>
-      </div>
+      <Loading :spinning="loading" text="正在加载...">
+        <DirectoryTree
+          :expanded-keys="state.expandedKeys"
+          :auto-expand-parent="state.autoExpandParent"
+          :checked-keys="state.checkedKeys"
+          :tree-data="getTreeData"
+          :field-names="{
+            title: fieldNames.label,
+            key: fieldNames.value,
+            children: fieldNames.children,
+          }"
+          block-node
+          :show-icon="false"
+          class="px-2"
+          :checkable="checkable"
+          @expand="handleExpand"
+          @select="handleSelect"
+          @check="handleCheck"
+          :check-strictly="state.checkStrictly"
+        >
+          <template #title="treeDataItem">
+            <slot name="title" v-bind="treeDataItem">
+              <span
+                v-if="
+                  treeDataItem[fieldNames.label].indexOf(searchListData) > -1
+                "
+              >
+                {{
+                  treeDataItem[fieldNames.label].substring(
+                    0,
+                    treeDataItem[fieldNames.label].indexOf(searchListData),
+                  )
+                }}
+                <span style="color: #f50">{{ searchListData }}</span>
+                {{
+                  treeDataItem[fieldNames.label].substring(
+                    treeDataItem[fieldNames.label].indexOf(searchListData) +
+                      searchListData.length,
+                  )
+                }}
+              </span>
+              <span v-else>{{ treeDataItem[fieldNames.label] }}</span>
+            </slot>
+          </template>
+        </DirectoryTree>
+        <div
+          v-if="getNotFound"
+          class="flex-col-center text-muted-foreground min-h-[150px] w-full"
+        >
+          <EmptyIcon class="size-10" />
+          <div class="mt-1 text-sm">暂无数据</div>
+        </div>
+      </Loading>
     </VbenScrollbar>
   </div>
 </template>

apps/web-baicai/src/components/form/helper.ts

@@ -5,7 +5,7 @@ import { requestClient } from '#/api/request';
 
 export const createApiFunction = (apiConfig: ApiConfig) => {
   const api: any =
-    typeof apiConfig.url === 'string' || !apiConfig.url
+    typeof apiConfig.url === 'string' && !apiConfig.url
       ? (params: any) => {
           switch (apiConfig.type) {
             case 'api': {

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

@@ -121,14 +121,16 @@ const getTitle = computed(() => (unref(isUpdate) ? '编辑查询' : '新增查
 </script>
 <template>
   <Modal class="w-[1000px]" :title="getTitle">
-    <div>
-      <Steps
-        :current="state.stepIndex"
-        :items="state.stepItems"
-        :percent="60"
-        :style="state.stepStyle"
-      />
-      <div>
+    <div class="h-full">
+      <div class="h-[82px]">
+        <Steps
+          :current="state.stepIndex"
+          :items="state.stepItems"
+          :percent="60"
+          :style="state.stepStyle"
+        />
+      </div>
+      <div class="relative h-[calc(100%-82px)]">
         <StepBaseConfig v-show="state.stepIndex === 0" ref="stepBaseConfig" />
         <StepDetailConfig
           v-show="state.stepIndex === 1"

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

@@ -1,10 +1,13 @@
 <script lang="ts" setup>
 import { reactive } from 'vue';
 
-import { Card, Checkbox, Col, Input, Row, Select, Tree } from 'ant-design-vue';
+import { VbenScrollbar } from '@vben/common-ui';
+
+import { Card, Checkbox, Col, Input, Row, Select } from 'ant-design-vue';
 
 import { DatabaseApi, QueryApi } from '#/api';
 import { connectTypeOptions } from '#/api/model';
+import { BcTree } from '#/components/bc-tree';
 
 const state = reactive<{
   checkedKeys: string[];
@@ -158,84 +161,104 @@ const stepGetValues = async () => {
 defineExpose({ stepSetValues, stepValidate, stepGetValues });
 </script>
 <template>
-  <div class="auto-h flex">
-    <div class="w-1/5">
-      <Tree
-        v-model:checked-keys="state.checkedKeys"
-        :field-names="{ key: 'name', title: 'description' }"
-        :selectable="false"
+  <div class="flex h-full">
+    <div class="h-full w-[300px] border">
+      <BcTree
+        title="组织架构"
         :tree-data="state.dbTableList"
-        checkable
+        :checkable="true"
+        :field-names="{ label: 'description', value: 'name' }"
         @check="handelSelect"
+        :checked-keys="state.checkedKeys"
       />
     </div>
-    <div class="ml-4 flex w-4/5 flex-wrap">
-      <Card v-for="table in state.dbTables" :key="table.name" class="w-1/2">
-        <template #title>
-          <div class="mb-2 mt-2">
-            <div>{{ table.remark }}</div>
-            <div class="mt-[8px]">
-              <Input v-model:value="table.alias" placeholder="表别名" />"
-            </div>
-            <Row v-if="!table.isMain" class="mt-2">
-              <Col :span="4">
-                <Select
-                  v-model:value="table.connectType"
-                  :options="connectTypeOptions"
-                  style="width: 100%"
-                />
-              </Col>
-              <Col :span="10">
-                <Select
-                  v-model:value="table.connectColumn"
-                  :field-names="{ label: 'remark', value: 'name' }"
-                  :options="state.mainTable?.columns"
-                  option-filter-prop="remark"
-                  show-search
-                  style="width: 100%"
-                />
-              </Col>
-              <Col :span="10">
-                <Select
-                  v-model:value="table.relationColumn"
-                  :field-names="{ label: 'remark', value: 'name' }"
-                  :options="table.columns"
-                  option-filter-prop="remark"
-                  show-search
-                  style="width: 100%"
-                />
-              </Col>
-            </Row>
-          </div>
-        </template>
-        <template #extra>
-          <Checkbox
-            v-model:checked="table.isMain"
-            :value="table.name"
-            class="ml-4"
-            @change="handelMainChange"
+    <div class="h-full flex-1 border border-l-0">
+      <VbenScrollbar class="h-full">
+        <div class="grid grid-cols-2 gap-2 p-4">
+          <Card
+            v-for="table in state.dbTables"
+            :key="table.name"
+            class="w-full"
           >
-            主表
-          </Checkbox>
-        </template>
-        <Checkbox.Group v-model:value="table.columnKeys" class="w-full">
-          <Row>
-            <Col v-for="column in table.columns" :key="column.name" :span="24">
-              <Row class="mb-2">
-                <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>
-            </Col>
-          </Row>
-        </Checkbox.Group>
-      </Card>
+            <template #title>
+              <div class="mb-2 mt-2">
+                <div>{{ table.remark }}</div>
+                <div class="mt-[8px]">
+                  <Input v-model:value="table.alias" placeholder="表别名" />"
+                </div>
+                <Row v-if="!table.isMain" class="mt-2">
+                  <Col :span="4">
+                    <Select
+                      v-model:value="table.connectType"
+                      :options="connectTypeOptions"
+                      style="width: 100%"
+                    />
+                  </Col>
+                  <Col :span="10">
+                    <Select
+                      v-model:value="table.connectColumn"
+                      :field-names="{ label: 'remark', value: 'name' }"
+                      :options="state.mainTable?.columns"
+                      option-filter-prop="remark"
+                      show-search
+                      style="width: 100%"
+                    />
+                  </Col>
+                  <Col :span="10">
+                    <Select
+                      v-model:value="table.relationColumn"
+                      :field-names="{ label: 'remark', value: 'name' }"
+                      :options="table.columns"
+                      option-filter-prop="remark"
+                      show-search
+                      style="width: 100%"
+                    />
+                  </Col>
+                </Row>
+              </div>
+            </template>
+            <template #extra>
+              <Checkbox
+                v-model:checked="table.isMain"
+                :value="table.name"
+                class="ml-4"
+                @change="handelMainChange"
+              >
+                主表
+              </Checkbox>
+            </template>
+            <VbenScrollbar class="h-[450px]">
+              <Checkbox.Group v-model:value="table.columnKeys" class="w-full">
+                <Row>
+                  <Col
+                    v-for="column in table.columns"
+                    :key="column.name"
+                    :span="24"
+                  >
+                    <Row class="mb-2">
+                      <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>
+                  </Col>
+                </Row>
+              </Checkbox.Group>
+            </VbenScrollbar>
+          </Card>
+        </div>
+      </VbenScrollbar>
     </div>
   </div>
 </template>

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

@@ -36,21 +36,21 @@ const handleDelete = async (id: number) => {
 };
 
 const handleEdit = (record: any, isUpdate: boolean) => {
-  formEditApi.setData({
-    isUpdate,
-    baseData: { ...record },
-  });
-
-  formEditApi.open();
+  formEditApi
+    .setData({
+      isUpdate,
+      baseData: { ...record },
+    })
+    .open();
 };
 
 const handlePreview = (record: any) => {
-  formPreviewApi.setData({
-    isPreview: true,
-    baseData: { id: record.id, name: record.name, code: record.code },
-  });
-
-  formPreviewApi.open();
+  formPreviewApi
+    .setData({
+      isPreview: true,
+      baseData: { id: record.id, name: record.name, code: record.code },
+    })
+    .open();
 };
 const handelSuccess = () => {
   reload();