fdb2 1.0.8 → 1.0.9

package/src/platform/database/components/data-editor.vue

@@ -1,478 +1,478 @@
-<template>
-  <div class="modal fade" :class="{ show: visible }" :style="{ display: visible ? 'block' : 'none' }">
-    <div class="modal-dialog modal-lg">
-      <div class="modal-content">
-        <div class="modal-header" style="padding: 15px;">
-          <h5 class="modal-title">
-            <i class="bi bi-pencil-square" v-if="isEdit"></i>
-            <i class="bi bi-plus-circle" v-else></i>
-            {{ isEdit ? '编辑数据' : '新增数据' }}
-          </h5>
-          <button type="button" class="btn-close" @click="closeModal"></button>
-        </div>
-        
-        <div class="modal-body">
-          <form @submit.prevent="handleSubmit">
-            <div class="row g-3">
-              <div 
-                v-for="column in columns" 
-                :key="column.name" 
-                :data-type="column.type"
-                class="col-md-6"
-              >
-                <label class="form-label">
-                  {{ column.name }}
-                  <span v-if="column.isPrimary" class="text-danger">*</span>
-                  <small class="text-muted ms-2">{{ column.type }}</small>
-                </label>
-                
-                <!-- 主键且自增时禁用编辑或隐藏 -->
-                <input 
-                  v-if="column.isPrimary && column.isAutoIncrement"
-                  type="text" 
-                  data-type="primary"
-                  class="form-control" 
-                  :value="isEdit ? formData[column.name] : '自动生成'"
-                  disabled
-                  readonly
-                >
-                <!-- 数字输入框 -->
-                <input 
-                  v-else-if="isNumberInput(column.type)"
-                  type="number" 
-                  data-type="number"
-                  class="form-control" 
-                  v-model="formData[column.name]"
-                  :placeholder="'请输入' + column.name"
-                  :required="!column.nullable"
-                  :step="isDecimalInput(column.type) ? '0.01' : '1'"
-                >
-                <!-- 日期时间选择器 -->
-                <input 
-                  v-else-if="isDateInput(column.type)"
-                  type="datetime-local" 
-                  class="form-control" 
-                  data-type="date"
-                  v-model="formData[column.name]"
-                  :required="!column.nullable"
-                >
-                <!-- 文本域 -->
-                <textarea 
-                  v-else-if="isTextArea(column.type)"
-                  class="form-control" 
-                  data-type="textarea"
-                  v-model="formData[column.name]"
-                  :placeholder="'请输入' + column.name"
-                  :required="!column.nullable"
-                  rows="3"
-                ></textarea>
-                <!-- 下拉选择（枚举） -->
-                <select 
-                  v-else-if="isEnumInput(column.type)"
-                  class="form-select" 
-                  data-type="select"
-                  v-model="formData[column.name]"
-                  :required="!column.nullable"
-                >
-                  <option value="">请选择...</option>
-                  <option v-for="option in getEnumOptions(column.type)" :key="option" :value="option">
-                    {{ option }}
-                  </option>
-                </select>
-                <!-- 布尔值 -->
-                <select 
-                  v-else-if="isBooleanInput(column.type)"
-                  class="form-select" 
-                  data-type="boolean"
-                  v-model="formData[column.name]"
-                >
-                  <option :value="true">是/True</option>
-                  <option :value="false">否/False</option>
-                </select>
-                <!-- JSON类型 -->
-                <div v-else-if="isJsonInput(column.type, 'input') || isArrayInput(column.type)" class="json-editor">
-                  <textarea 
-                    class="form-control font-monospace" 
-                  data-type="json"
-                    v-model="jsonText[column.name]"
-                    :placeholder="'请输入' + column.name + '的JSON数据'"
-                    :required="!column.nullable"
-                    rows="6"
-                    @input="validateJson(column.name)"
-                  ></textarea>
-                  <div class="d-flex justify-content-between mt-1">
-                    <small class="text-muted">{{ jsonError[column.name] || 'JSON格式正确' }}</small>
-                    <button 
-                      type="button" 
-                      class="btn btn-sm btn-outline-primary" 
-                      @click="formatJson(column.name)"
-                    >
-                      格式化
-                    </button>
-                  </div>
-                </div>
-                <!-- 默认输入框 -->
-                <input 
-                  v-else
-                  type="text" 
-                  data-type="normal"
-                  class="form-control" 
-                  v-model="formData[column.name]"
-                  :placeholder="'请输入' + column.name"
-                  :required="!column.nullable"
-                >
-              </div>
-            </div>
-          </form>
-        </div>
-        
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" @click="closeModal">
-            取消
-          </button>
-          <button type="button" class="btn btn-primary" @click="handleSubmit" :disabled="loading">
-            <span v-if="loading" class="spinner-border spinner-border-sm me-2"></span>
-            {{ isEdit ? '更新' : '插入' }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch, computed, nextTick } from 'vue';
-import { DatabaseService } from '@/service/database';
-import { modal } from '@/utils/modal';
-import { isNumericType, isBooleanType, isDateTimeType, isTextType, isJsonType, isArrayType } from '@/utils/database-types';
-import VueJsonPretty from 'vue-json-pretty';
-import 'vue-json-pretty/lib/styles.css';
-
-const databaseService = new DatabaseService();
-
-const props = defineProps<{
-  visible: boolean;
-  isEdit: boolean;
-  data?: any;
-  columns: any[];
-  connection?: any;
-  database?: string;
-  tableName?: string;
-}>();
-
-const emit = defineEmits<{
-  'close': [];
-  'submit': [data: any];
-}>();
-
-// 表单数据
-const formData = ref<any>({});
-const loading = ref(false);
-
-// JSON 文本数据
-const jsonText = ref<any>({});
-// JSON 验证错误
-const jsonError = ref<any>({});
-
-// 监听显示状态变化
-watch(() => props.visible, (visible) => {
-  if (visible) {
-    initializeFormData();
-  }
-});
-
-// 初始化表单数据
-function initializeFormData() {
-  formData.value = {};
-  jsonText.value = {};
-  jsonError.value = {};
-  
-  props.columns.forEach(column => {
-    if (props.isEdit && props.data) {
-      // 编辑模式：使用现有数据
-      if(isDateInput(column.type)) {
-        formData.value[column.name] = props.data[column.name] ? new Date(props.data[column.name]).toISOString().replace('.000Z', '') : null;
-      }
-      else if (isJsonInput(column.type) || isArrayInput(column.type)) {
-        // 对于 JSON 和数组类型，尝试解析为 JSON 对象
-        let value = props.data[column.name];
-        if (typeof value === 'string') {
-          try {
-            value = JSON.parse(value);
-          } catch (e) {
-            // 如果字符串不能解析为 JSON，直接使用字符串
-            value = props.data[column.name];
-          }
-        }
-        formData.value[column.name] = value;
-        jsonText.value[column.name] = JSON.stringify(value, null, 2);
-      }
-      else formData.value[column.name] = props.data[column.name];
-    } else {
-      // 新增模式：设置默认值
-      if (column.isPrimary && column.isAutoIncrement) {
-        formData.value[column.name] = null; // 自增主键不需要设置
-      } else if (column.defaultValue !== null && column.defaultValue !== undefined) {
-        formData.value[column.name] = column.defaultValue;
-      } else if (column.nullable) {
-        formData.value[column.name] = null;
-      } else if (isBooleanInput(column.type)) {
-        formData.value[column.name] = false;
-      } else if (isJsonInput(column.type) || isArrayInput(column.type)) {
-        formData.value[column.name] = {};
-        jsonText.value[column.name] = '{}';
-      } else {
-        formData.value[column.name] = '';
-      }
-    }
-  });
-}
-
-// 判断输入类型
-function isTextInput(type: string): boolean {  
-  return !isNumericType(type) && !isBooleanType(type) && !isDateTimeType(type) && !isEnumInput(type);
-}
-
-function isNumberInput(type: string): boolean {
-  return isNumericType(type);
-}
-
-function isDecimalInput(type: string): boolean {
-  return isNumericType(type) && (type.toLowerCase().includes('decimal') || type.toLowerCase().includes('numeric'));
-}
-
-function isDateInput(type: string): boolean {
-  return isDateTimeType(type);
-}
-
-function isTextArea(type: string): boolean {
-  return isTextType(type);
-}
-
-function isEnumInput(type: string): boolean {
-  return type.toLowerCase().startsWith('enum');
-}
-
-function isBooleanInput(type: string): boolean {
-  return isBooleanType(type);
-}
-
-function isJsonInput(type: string, inputtype?: string): boolean {
-  if(inputtype) {
-    console.log(inputtype, type);
-  }
-  return isJsonType(type);
-}
-
-function isArrayInput(type: string): boolean {
-  return isArrayType(type);
-}
-
-// JSON 验证
-function validateJson(columnName: string) {
-  try {
-    const value = jsonText.value[columnName];
-    if (value && value.trim()) {
-      const parsed = JSON.parse(value);
-      formData.value[columnName] = parsed;
-      jsonError.value[columnName] = '';
-    } else {
-      formData.value[columnName] = null;
-      jsonError.value[columnName] = '';
-    }
-  } catch (error) {
-    jsonError.value[columnName] = 'JSON格式错误: ' + (error as Error).message;
-  }
-}
-
-// JSON 格式化
-function formatJson(columnName: string) {
-  try {
-    const value = jsonText.value[columnName];
-    if (value && value.trim()) {
-      const parsed = JSON.parse(value);
-      jsonText.value[columnName] = JSON.stringify(parsed, null, 2);
-      formData.value[columnName] = parsed;
-      jsonError.value[columnName] = '';
-    }
-  } catch (error) {
-    jsonError.value[columnName] = 'JSON格式错误: ' + (error as Error).message;
-  }
-}
-
-// 获取枚举选项
-function getEnumOptions(type: string): string[] {
-  const match = type?.match(/enum\((.*)\)/i);
-  if (match && match[1]) {
-    return match[1].split(',').map((option: string) => {
-      return option.trim().replace(/'/g, '');
-    });
-  }
-  return [];
-}
-
-// 关闭模态框
-function closeModal() {
-  loading.value = false;
-  emit('close');
-}
-
-// 提交表单
-async function handleSubmit() {
-  try {
-    // 验证所有 JSON 字段
-    let hasInvalidJson = false;
-    props.columns.forEach(column => {
-      if (isJsonInput(column.type) || isArrayInput(column.type)) {
-        validateJson(column.name);
-        if (jsonError.value[column.name]) {
-          hasInvalidJson = true;
-        }
-      }
-    });
-    
-    if (hasInvalidJson) {
-      modal.error('请修复 JSON 格式错误后再提交');
-      return;
-    }
-    
-    loading.value = true;    
-    let response;
-    
-    // 准备提交的数据，过滤掉自增字段
-    const submitData: any = {};
-    Object.keys(formData.value).forEach(key => {
-      const column = props.columns.find(col => col.name === key);
-      // 如果列存在且不是自增字段，则包含在提交数据中
-      if (!column || !column.isAutoIncrement) {
-        submitData[key] = formData.value[key];
-      }
-    });
-    
-    if (props.isEdit && props.data) {
-      // 更新数据
-      const whereClause = getPrimaryKeyWhere();
-      response = await databaseService.updateData(
-        props.connection?.id || '',
-        props.database || '',
-        props.tableName || '',
-        submitData,
-        whereClause
-      );
-    } else {
-      // 插入新数据
-      response = await databaseService.insertData(
-        props.connection?.id || '',
-        props.database || '',
-        props.tableName || '',
-        submitData
-      );
-    }
-    
-    if (response.ret === 0) {
-      modal.success(props.isEdit ? '数据更新成功' : '数据插入成功');
-      closeModal();
-      nextTick(() => {
-        emit('submit', response);
-      });
-    } else {
-      loading.value = false;
-      modal.error(response.msg, {
-        code: response.ret,
-        operation: props.isEdit ? 'UPDATE' : 'INSERT',
-        table: props.tableName,
-        requestData: formData.value
-      });
-    }
-  } catch (error) {
-    console.error('提交数据失败:', error);
-    const errorMsg = error instanceof Error ? error.message : String(error);
-    modal.error(errorMsg, {
-      operation: props.isEdit ? 'UPDATE' : 'INSERT',
-      table: props.tableName,
-      stack: error instanceof Error ? error.stack : undefined
-    });
-    loading.value = false;
-  } 
-}
-
-// 获取主键条件
-function getPrimaryKeyWhere() {
-  const primaryKeys = props.columns.filter(col => col.isPrimary);
-  const whereClause: any = {};
-  
-  primaryKeys.forEach(key => {
-    whereClause[key.name] = props.data[key.name];
-  });
-  
-  return whereClause;
-}
-</script>
-
-<style scoped>
-.modal {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.modal-dialog {
-  max-width: 800px;
-}
-
-.form-label {
-  font-weight: 500;
-  color: #374151;
-}
-
-.form-control, .form-select {
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-}
-
-.form-control:focus, .form-select:focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.modal-header {
-  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-  border-bottom: 1px solid #e2e8f0;
-}
-
-.modal-title {
-  color: #1e293b;
-  font-weight: 600;
-}
-
-.modal-footer {
-  background: #f8fafc;
-  border-top: 1px solid #e2e8f0;
-}
-
-.text-danger {
-  color: #ef4444;
-}
-
-.text-muted {
-  color: #6b7280;
-  font-size: 0.875rem;
-}
-
-.json-editor textarea {
-  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  background-color: #f8fafc;
-  border-color: #e2e8f0;
-  resize: vertical;
-}
-
-.json-editor textarea:focus {
-  background-color: #ffffff;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.json-editor .text-muted {
-  font-size: 0.75rem;
-}
+<template>
+  <div class="modal fade" :class="{ show: visible }" :style="{ display: visible ? 'block' : 'none' }">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header" style="padding: 15px;">
+          <h5 class="modal-title">
+            <i class="bi bi-pencil-square" v-if="isEdit"></i>
+            <i class="bi bi-plus-circle" v-else></i>
+            {{ isEdit ? '编辑数据' : '新增数据' }}
+          </h5>
+          <button type="button" class="btn-close" @click="closeModal"></button>
+        </div>
+        
+        <div class="modal-body">
+          <form @submit.prevent="handleSubmit">
+            <div class="row g-3">
+              <div 
+                v-for="column in columns" 
+                :key="column.name" 
+                :data-type="column.type"
+                class="col-md-6"
+              >
+                <label class="form-label">
+                  {{ column.name }}
+                  <span v-if="column.isPrimary" class="text-danger">*</span>
+                  <small class="text-muted ms-2">{{ column.type }}</small>
+                </label>
+                
+                <!-- 主键且自增时禁用编辑或隐藏 -->
+                <input 
+                  v-if="column.isPrimary && column.isAutoIncrement"
+                  type="text" 
+                  data-type="primary"
+                  class="form-control" 
+                  :value="isEdit ? formData[column.name] : '自动生成'"
+                  disabled
+                  readonly
+                >
+                <!-- 数字输入框 -->
+                <input 
+                  v-else-if="isNumberInput(column.type)"
+                  type="number" 
+                  data-type="number"
+                  class="form-control" 
+                  v-model="formData[column.name]"
+                  :placeholder="'请输入' + column.name"
+                  :required="!column.nullable"
+                  :step="isDecimalInput(column.type) ? '0.01' : '1'"
+                >
+                <!-- 日期时间选择器 -->
+                <input 
+                  v-else-if="isDateInput(column.type)"
+                  type="datetime-local" 
+                  class="form-control" 
+                  data-type="date"
+                  v-model="formData[column.name]"
+                  :required="!column.nullable"
+                >
+                <!-- 文本域 -->
+                <textarea 
+                  v-else-if="isTextArea(column.type)"
+                  class="form-control" 
+                  data-type="textarea"
+                  v-model="formData[column.name]"
+                  :placeholder="'请输入' + column.name"
+                  :required="!column.nullable"
+                  rows="3"
+                ></textarea>
+                <!-- 下拉选择（枚举） -->
+                <select 
+                  v-else-if="isEnumInput(column.type)"
+                  class="form-select" 
+                  data-type="select"
+                  v-model="formData[column.name]"
+                  :required="!column.nullable"
+                >
+                  <option value="">请选择...</option>
+                  <option v-for="option in getEnumOptions(column.type)" :key="option" :value="option">
+                    {{ option }}
+                  </option>
+                </select>
+                <!-- 布尔值 -->
+                <select 
+                  v-else-if="isBooleanInput(column.type)"
+                  class="form-select" 
+                  data-type="boolean"
+                  v-model="formData[column.name]"
+                >
+                  <option :value="true">是/True</option>
+                  <option :value="false">否/False</option>
+                </select>
+                <!-- JSON类型 -->
+                <div v-else-if="isJsonInput(column.type, 'input') || isArrayInput(column.type)" class="json-editor">
+                  <textarea 
+                    class="form-control font-monospace" 
+                  data-type="json"
+                    v-model="jsonText[column.name]"
+                    :placeholder="'请输入' + column.name + '的JSON数据'"
+                    :required="!column.nullable"
+                    rows="6"
+                    @input="validateJson(column.name)"
+                  ></textarea>
+                  <div class="d-flex justify-content-between mt-1">
+                    <small class="text-muted">{{ jsonError[column.name] || 'JSON格式正确' }}</small>
+                    <button 
+                      type="button" 
+                      class="btn btn-sm btn-outline-primary" 
+                      @click="formatJson(column.name)"
+                    >
+                      格式化
+                    </button>
+                  </div>
+                </div>
+                <!-- 默认输入框 -->
+                <input 
+                  v-else
+                  type="text" 
+                  data-type="normal"
+                  class="form-control" 
+                  v-model="formData[column.name]"
+                  :placeholder="'请输入' + column.name"
+                  :required="!column.nullable"
+                >
+              </div>
+            </div>
+          </form>
+        </div>
+        
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" @click="closeModal">
+            取消
+          </button>
+          <button type="button" class="btn btn-primary" @click="handleSubmit" :disabled="loading">
+            <span v-if="loading" class="spinner-border spinner-border-sm me-2"></span>
+            {{ isEdit ? '更新' : '插入' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed, nextTick } from 'vue';
+import { DatabaseService } from '@/service/database';
+import { modal } from '@/utils/modal';
+import { isNumericType, isBooleanType, isDateTimeType, isTextType, isJsonType, isArrayType } from '@/utils/database-types';
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
+
+const databaseService = new DatabaseService();
+
+const props = defineProps<{
+  visible: boolean;
+  isEdit: boolean;
+  data?: any;
+  columns: any[];
+  connection?: any;
+  database?: string;
+  tableName?: string;
+}>();
+
+const emit = defineEmits<{
+  'close': [];
+  'submit': [data: any];
+}>();
+
+// 表单数据
+const formData = ref<any>({});
+const loading = ref(false);
+
+// JSON 文本数据
+const jsonText = ref<any>({});
+// JSON 验证错误
+const jsonError = ref<any>({});
+
+// 监听显示状态变化
+watch(() => props.visible, (visible) => {
+  if (visible) {
+    initializeFormData();
+  }
+});
+
+// 初始化表单数据
+function initializeFormData() {
+  formData.value = {};
+  jsonText.value = {};
+  jsonError.value = {};
+  
+  props.columns.forEach(column => {
+    if (props.isEdit && props.data) {
+      // 编辑模式：使用现有数据
+      if(isDateInput(column.type)) {
+        formData.value[column.name] = props.data[column.name] ? new Date(props.data[column.name]).toISOString().replace('.000Z', '') : null;
+      }
+      else if (isJsonInput(column.type) || isArrayInput(column.type)) {
+        // 对于 JSON 和数组类型，尝试解析为 JSON 对象
+        let value = props.data[column.name];
+        if (typeof value === 'string') {
+          try {
+            value = JSON.parse(value);
+          } catch (e) {
+            // 如果字符串不能解析为 JSON，直接使用字符串
+            value = props.data[column.name];
+          }
+        }
+        formData.value[column.name] = value;
+        jsonText.value[column.name] = JSON.stringify(value, null, 2);
+      }
+      else formData.value[column.name] = props.data[column.name];
+    } else {
+      // 新增模式：设置默认值
+      if (column.isPrimary && column.isAutoIncrement) {
+        formData.value[column.name] = null; // 自增主键不需要设置
+      } else if (column.defaultValue !== null && column.defaultValue !== undefined) {
+        formData.value[column.name] = column.defaultValue;
+      } else if (column.nullable) {
+        formData.value[column.name] = null;
+      } else if (isBooleanInput(column.type)) {
+        formData.value[column.name] = false;
+      } else if (isJsonInput(column.type) || isArrayInput(column.type)) {
+        formData.value[column.name] = {};
+        jsonText.value[column.name] = '{}';
+      } else {
+        formData.value[column.name] = '';
+      }
+    }
+  });
+}
+
+// 判断输入类型
+function isTextInput(type: string): boolean {  
+  return !isNumericType(type) && !isBooleanType(type) && !isDateTimeType(type) && !isEnumInput(type);
+}
+
+function isNumberInput(type: string): boolean {
+  return isNumericType(type);
+}
+
+function isDecimalInput(type: string): boolean {
+  return isNumericType(type) && (type.toLowerCase().includes('decimal') || type.toLowerCase().includes('numeric'));
+}
+
+function isDateInput(type: string): boolean {
+  return isDateTimeType(type);
+}
+
+function isTextArea(type: string): boolean {
+  return isTextType(type);
+}
+
+function isEnumInput(type: string): boolean {
+  return type.toLowerCase().startsWith('enum');
+}
+
+function isBooleanInput(type: string): boolean {
+  return isBooleanType(type);
+}
+
+function isJsonInput(type: string, inputtype?: string): boolean {
+  if(inputtype) {
+    console.log(inputtype, type);
+  }
+  return isJsonType(type);
+}
+
+function isArrayInput(type: string): boolean {
+  return isArrayType(type);
+}
+
+// JSON 验证
+function validateJson(columnName: string) {
+  try {
+    const value = jsonText.value[columnName];
+    if (value && value.trim()) {
+      const parsed = JSON.parse(value);
+      formData.value[columnName] = parsed;
+      jsonError.value[columnName] = '';
+    } else {
+      formData.value[columnName] = null;
+      jsonError.value[columnName] = '';
+    }
+  } catch (error) {
+    jsonError.value[columnName] = 'JSON格式错误: ' + (error as Error).message;
+  }
+}
+
+// JSON 格式化
+function formatJson(columnName: string) {
+  try {
+    const value = jsonText.value[columnName];
+    if (value && value.trim()) {
+      const parsed = JSON.parse(value);
+      jsonText.value[columnName] = JSON.stringify(parsed, null, 2);
+      formData.value[columnName] = parsed;
+      jsonError.value[columnName] = '';
+    }
+  } catch (error) {
+    jsonError.value[columnName] = 'JSON格式错误: ' + (error as Error).message;
+  }
+}
+
+// 获取枚举选项
+function getEnumOptions(type: string): string[] {
+  const match = type?.match(/enum\((.*)\)/i);
+  if (match && match[1]) {
+    return match[1].split(',').map((option: string) => {
+      return option.trim().replace(/'/g, '');
+    });
+  }
+  return [];
+}
+
+// 关闭模态框
+function closeModal() {
+  loading.value = false;
+  emit('close');
+}
+
+// 提交表单
+async function handleSubmit() {
+  try {
+    // 验证所有 JSON 字段
+    let hasInvalidJson = false;
+    props.columns.forEach(column => {
+      if (isJsonInput(column.type) || isArrayInput(column.type)) {
+        validateJson(column.name);
+        if (jsonError.value[column.name]) {
+          hasInvalidJson = true;
+        }
+      }
+    });
+    
+    if (hasInvalidJson) {
+      modal.error('请修复 JSON 格式错误后再提交');
+      return;
+    }
+    
+    loading.value = true;    
+    let response;
+    
+    // 准备提交的数据，过滤掉自增字段
+    const submitData: any = {};
+    Object.keys(formData.value).forEach(key => {
+      const column = props.columns.find(col => col.name === key);
+      // 如果列存在且不是自增字段，则包含在提交数据中
+      if (!column || !column.isAutoIncrement) {
+        submitData[key] = formData.value[key];
+      }
+    });
+    
+    if (props.isEdit && props.data) {
+      // 更新数据
+      const whereClause = getPrimaryKeyWhere();
+      response = await databaseService.updateData(
+        props.connection?.id || '',
+        props.database || '',
+        props.tableName || '',
+        submitData,
+        whereClause
+      );
+    } else {
+      // 插入新数据
+      response = await databaseService.insertData(
+        props.connection?.id || '',
+        props.database || '',
+        props.tableName || '',
+        submitData
+      );
+    }
+    
+    if (response.ret === 0) {
+      modal.success(props.isEdit ? '数据更新成功' : '数据插入成功');
+      closeModal();
+      nextTick(() => {
+        emit('submit', response);
+      });
+    } else {
+      loading.value = false;
+      modal.error(response.msg, {
+        code: response.ret,
+        operation: props.isEdit ? 'UPDATE' : 'INSERT',
+        table: props.tableName,
+        requestData: formData.value
+      });
+    }
+  } catch (error) {
+    console.error('提交数据失败:', error);
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    modal.error(errorMsg, {
+      operation: props.isEdit ? 'UPDATE' : 'INSERT',
+      table: props.tableName,
+      stack: error instanceof Error ? error.stack : undefined
+    });
+    loading.value = false;
+  } 
+}
+
+// 获取主键条件
+function getPrimaryKeyWhere() {
+  const primaryKeys = props.columns.filter(col => col.isPrimary);
+  const whereClause: any = {};
+  
+  primaryKeys.forEach(key => {
+    whereClause[key.name] = props.data[key.name];
+  });
+  
+  return whereClause;
+}
+</script>
+
+<style scoped>
+.modal {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-dialog {
+  max-width: 800px;
+}
+
+.form-label {
+  font-weight: 500;
+  color: #374151;
+}
+
+.form-control, .form-select {
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+}
+
+.form-control:focus, .form-select:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.modal-header {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.modal-title {
+  color: #1e293b;
+  font-weight: 600;
+}
+
+.modal-footer {
+  background: #f8fafc;
+  border-top: 1px solid #e2e8f0;
+}
+
+.text-danger {
+  color: #ef4444;
+}
+
+.text-muted {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.json-editor textarea {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  background-color: #f8fafc;
+  border-color: #e2e8f0;
+  resize: vertical;
+}
+
+.json-editor textarea:focus {
+  background-color: #ffffff;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.json-editor .text-muted {
+  font-size: 0.75rem;
+}
 </style>