更新数据库管理

apps/web-antd/src/views/system/database/components/AddIndexModal.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { addIndexApi } from '../api';
+
+defineOptions({
+  name: 'AddIndexModal',
+});
+
+const tableName = ref('');
+const columns = ref<any[]>([]);
+const reloadCallback = ref<(() => void) | null>(null);
+
+const columnOptions = computed(() => {
+  return columns.value.map((col) => ({
+    label: col.comment || col.name,
+    value: col.name,
+  }));
+});
+
+// 索引类型选项
+const indexTypeOptions = [
+  { label: 'BTREE', value: 'BTREE' },
+  { label: 'HASH', value: 'HASH' },
+  { label: 'FULLTEXT', value: 'FULLTEXT' },
+  { label: 'SPATIAL', value: 'SPATIAL' },
+];
+
+const [Form, formApi] = useVbenForm({
+  wrapperClass: 'grid-cols-12',
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '索引名',
+      formItemClass: 'col-span-12',
+      componentProps: {
+        placeholder: '请输入索引名',
+      },
+      rules: 'required',
+    },
+    {
+      component: 'Select',
+      fieldName: 'columns',
+      label: '选择字段',
+      formItemClass: 'col-span-12',
+      componentProps: {
+        mode: 'multiple',
+        placeholder: '请选择字段',
+        options: columnOptions,
+      },
+      rules: 'required',
+    },
+    {
+      component: 'Switch',
+      fieldName: 'unique',
+      label: '唯一索引',
+      formItemClass: 'col-span-12',
+    },
+    {
+      component: 'Select',
+      fieldName: 'type',
+      label: '索引类型',
+      formItemClass: 'col-span-12',
+      componentProps: {
+        options: indexTypeOptions,
+        placeholder: '请选择索引类型（默认BTREE）',
+      },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    const valid = await formApi.validate();
+    if (valid.valid) {
+      const values = await formApi.getValues();
+      if (!values.columns || values.columns.length === 0) {
+        message.warning('请选择字段');
+        return;
+      }
+      modalApi.setState({ loading: true, confirmLoading: true });
+      try {
+        await addIndexApi({
+          table_name: tableName.value,
+          index_name: values.name,
+          columns: values.columns,
+          unique: values.unique || false,
+          type: values.type || 'BTREE',
+        });
+        message.success('添加成功');
+        reloadCallback.value?.();
+        modalApi.close();
+      } catch (error: any) {
+        message.error(error.message || '添加失败');
+      } finally {
+        modalApi.setState({ loading: false, confirmLoading: false });
+      }
+    }
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const data = modalApi.getData<{
+        tableName: string;
+        columns: any[];
+        reload: () => void;
+      }>();
+      if (data) {
+        tableName.value = data.tableName;
+        columns.value = data.columns;
+        reloadCallback.value = data.reload;
+        formApi.resetFields();
+      }
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="添加索引" class="w-[500px]">
+    <Form />
+  </Modal>
+</template>