143 lines
3.3 KiB
Vue
143 lines
3.3 KiB
Vue
|
<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>
|