fdb2 1.0.0

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

@@ -0,0 +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;
+}
+</style>