yg-yygl 0.0.1

package/dist/views/data/data-modeling/components/data-modeling-form-two.vue

@@ -0,0 +1,561 @@
+<script setup lang="ts">
+import type { CommonField, DataModeling } from '../../../../api/data-modeling/types';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import { Icon } from '@udp/component-ui';
+import { useSortable } from '@udp/hooks';
+
+// 定义表单验证规则
+import { ArrowDown } from '@element-plus/icons-vue';
+import { ElMessageBox } from 'element-plus';
+
+import { getCommonFieldList, getTableColumns } from '../../../../api/data-modeling';
+import useDict from '../../../../hooks/useDict';
+
+const props = defineProps({
+  editData: {
+    type: Object,
+    default: () => {},
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const deleteFlag = ref(false);
+
+const formRef = ref();
+const tableRef = ref();
+
+const formData = ref<DataModeling>({
+  modelName: '',
+  tableName: '',
+  linkId: '',
+  linkName: '',
+  description: '',
+  linkType: 1,
+  columns: [],
+  sort: 1,
+});
+
+const delColumns = ref<CommonField[]>([]);
+
+// 计算是否禁用表单
+const isFormDisabled = computed(() => {
+  return formData.value.linkDeleted !== 0 || props.readonly;
+});
+
+watch(
+  () => props.editData,
+  (val) => {
+    Object.assign(formData.value, val);
+    if (val.id) {
+      getColumns(props.editData?.id);
+    } else if (props.editData?.linkType === 1) {
+      // 已有表时获取已选表的字段信息
+      console.log('查询已有表的字段', props.editData?.linkType === 1);
+      getCurrentTableColumns();
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+const rules = computed(() => {
+  return {
+    columns: formData.value.columns.map(() => {
+      return {
+        columnName: [
+          { required: true, message: '请输入字段名', trigger: 'blur' },
+          {
+            validator: (
+              _rule: any,
+              value: string,
+              callback: (arg0?: Error | undefined) => void,
+            ) => {
+              const isExist =
+                formData.value.columns.filter(
+                  (item) => item.columnName === value,
+                ).length > 1;
+              if (isExist) {
+                callback(new Error('字段名不能重复'));
+                return;
+              }
+              if (/^[a-z_]\w*$/i.test(value)) {
+                callback();
+              } else {
+                callback(
+                  new Error(
+                    '字段名只能包含字母、数字和下划线，且必须以字母或下划线开头',
+                  ),
+                );
+              }
+            },
+            trigger: 'blur',
+          },
+        ],
+        columnType: [
+          { required: true, message: '请输入字段类型', trigger: 'blur' },
+        ],
+        columnLength: [
+          {
+            required: true,
+            message: '请输入字段长度',
+            trigger: ['blur', 'change'],
+          },
+        ],
+        description: [
+          { max: 50, message: '最大长度50个字符', trigger: 'blur' },
+        ],
+      };
+    }),
+  };
+});
+
+const commonFields = ref<CommonField[]>([]);
+const commonFieldItemList = computed(() => {
+  return commonFields.value.map((item) => ({
+    ...item,
+    disabled: formData.value.columns.some(
+      (col) => col.columnName === item.columnName,
+    ),
+  }));
+});
+
+// 数据类型选项
+const dataTypeOptions = computed(() => {
+  return useDict()
+    .getDict('columnType', 'base')
+    .map((item) => ({
+      label: item.itemValue,
+      value: item.itemCode,
+    }));
+});
+
+// 添加字段
+const addField = () => {
+  // const newId = String(Date.now());
+  formData.value.columns.push({
+    id: Date.now().toString(),
+    tableModelId: props.editData?.id,
+    columnName: '',
+    columnType: '字符串',
+    columnLength: 50,
+    isPrimary: 0,
+    isAutoInc: 0,
+    isAllowNull: 0,
+    description: '',
+    syncStatus: 1, // 0:正常(已存在)  1：新增  2：删除
+  });
+  scrollToLastRow();
+};
+
+// 滚动列表，是新增行始终在可视范围内
+const scrollToLastRow = () => {
+  // 等待 DOM 更新后滚动到新增行
+  nextTick(() => {
+    // 使用 setTimeout 确保表格完全渲染
+    setTimeout(() => {
+      if (tableRef.value) {
+        // 方法1: 获取所有行，滚动到最后一行
+        const rows = tableRef.value.$el.querySelectorAll('.el-table__row');
+        if (rows.length > 0) {
+          const lastRow = rows[rows.length - 1];
+          lastRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          console.log('滚动到最后一行', rows.length);
+          return;
+        }
+
+        // 方法2: 如果方法1失败，直接滚动容器
+        const tableBody = tableRef.value.$el.querySelector(
+          '.el-table__body-wrapper',
+        );
+        if (tableBody) {
+          console.log('tableBody scrollHeight:', tableBody.scrollHeight);
+          tableBody.scrollTo({
+            top: tableBody.scrollHeight,
+            behavior: 'smooth',
+          });
+        }
+      }
+    }, 100);
+  });
+};
+
+const handleAddCommonField = (item: CommonField) => {
+  console.log('item', item);
+  formData.value.columns.push({
+    ...item,
+    id: Date.now().toString(),
+    tableModelId: props.editData?.id,
+    syncStatus: 1,
+    isPrimary: 0,
+    isAutoInc: 0,
+  });
+  scrollToLastRow();
+};
+
+// 删除字段
+const deleteField = (index: number) => {
+  const delList: CommonField[] = formData.value.columns.splice(index, 1);
+  // 保存删除的字段（只改状态），待同步到数据库后才是真正的删除
+  delList.forEach((item) => {
+    if (item.syncStatus !== 1) {
+      item.syncStatus = 2;
+      !delColumns.value.some(
+        (delItem) => delItem.columnName === item.columnName,
+      ) && delColumns.value.push(item);
+    }
+  });
+  deleteFlag.value = false;
+};
+
+// 处理字段类型变化
+const handleFieldTypeChange = (row: CommonField, value: string) => {
+  row.columnType = value;
+  if (value === '字符串') {
+    row.columnLength = 50;
+  } else if (value === '枚举') {
+    row.columnLength = 1;
+  } else {
+    row.columnLength = 0;
+  }
+};
+
+// 处理字段长度变化
+const handleFieldLengthChange = (row: CommonField, value: number) => {
+  row.columnLength = value;
+};
+
+// 处理主键变化
+const handlePrimaryKeyChange = (row: CommonField, value: number) => {
+  row.isPrimary = value;
+  // 如果是主键，则不允许为空
+  if (value) {
+    row.isAllowNull = 0;
+  } else {
+    row.isAutoInc = 0;
+  }
+};
+
+const handleSubmit = async () => {
+  const valid = await formRef.value.validate();
+  if (!valid) {
+    return;
+  }
+  formData.value.columns.forEach((item, index) => {
+    item.sort = formData.value.columns.length - index;
+  });
+  return {
+    ...formData.value,
+    columns: [...formData.value.columns, ...delColumns.value],
+  };
+};
+
+async function getColumns(tableModelId: string) {
+  const fields = await getCommonFieldList(tableModelId);
+  if (tableModelId === '0') {
+    commonFields.value = fields?.length ? [...fields] : [];
+  } else {
+    delColumns.value = fields?.filter((item) => item.syncStatus === 2) || [];
+    formData.value.columns =
+      fields
+        ?.filter((item) => item.syncStatus !== 2)
+        ?.sort((a, b) => b.sort || 1) || [];
+  }
+}
+
+function getCurrentTableColumns() {
+  getTableColumns({
+    linkId: formData.value.linkId,
+    tableName: formData.value.tableName,
+  }).then((res) => {
+    formData.value.columns = res?.map((item) => {
+      return {
+        ...item,
+        syncStatus: 0, // 已有表的字段默认是同步过的
+      };
+    });
+  });
+}
+
+async function initSort() {
+  const mockElement = document.querySelector(
+    '.draggable .el-table__body-wrapper tbody',
+  ) as HTMLDivElement;
+
+  // Define custom options
+  const customOptions = {
+    group: 'test-group',
+    sort: true,
+    handle: '.row-drag-handle',
+    onEnd: (evt: any) => {
+      console.log('evt', evt);
+      const oldItem = formData.value.columns[evt.oldIndex];
+      formData.value.columns.splice(evt.oldIndex, 1);
+      oldItem && formData.value.columns.splice(evt.newIndex, 0, oldItem);
+    },
+  };
+
+  const { initializeSortable } = useSortable(mockElement, customOptions);
+
+  await initializeSortable();
+}
+
+const showCustomConfirm = (index: number) => {
+  ElMessageBox({
+    title: '提示',
+    message: `确定要删除此条数据吗？`,
+    dangerouslyUseHTMLString: true,
+    showCancelButton: true,
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+    .then(() => {
+      deleteField(index);
+    })
+    .catch(() => {
+      // 取消逻辑
+    });
+};
+
+onMounted(() => {
+  initSort();
+  getColumns('0');
+});
+
+defineExpose({
+  handleSubmit,
+});
+</script>
+<template>
+  <div class="flex h-full w-full flex-col overflow-hidden">
+    <div
+      v-if="!isFormDisabled"
+      class="mb-4 flex w-full items-center justify-between"
+    >
+      <!-- 添加字段按钮 -->
+      <el-button type="primary" plain @click="addField"> 新增一行 </el-button>
+      <el-dropdown @command="handleAddCommonField">
+        <el-button>
+          添加常用字段<el-icon class="el-icon--right"><ArrowDown /></el-icon>
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item
+              v-for="item in commonFieldItemList"
+              :key="item.id"
+              :disabled="item.disabled"
+              :command="item"
+            >
+              {{ item.columnName }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+    <el-form
+      class="draggable w-full flex-1 overflow-hidden"
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      label-width="70px"
+      :validate-on-rule-change="false"
+      :disabled="isFormDisabled"
+    >
+      <!-- 使用计算属性作为数据源，提高渲染性能 -->
+      <el-table
+        ref="tableRef"
+        :data="formData.columns"
+        style="width: 100%"
+        row-key="id"
+        v-loading="false"
+        height="100%"
+        :tree-props="{ hasChildren: 'hasChildren', children: 'children' }"
+        header-cell-class="tableHeaderCellClass"
+      >
+        <!-- 拖拽 -->
+        <el-table-column type="drag" label="" width="55">
+          <Icon
+            class="row-drag-handle hover:text-primary text-gray-600"
+            name="mdi:drag"
+            :size="20"
+          />
+        </el-table-column>
+
+        <!-- 序号列 -->
+        <el-table-column type="index" label="序号" width="55" />
+
+        <!-- 字段名列 -->
+        <!-- 仅有新增的字段可以编辑，新增状态包含此次操作的新增，也包含之前操作的新增但未同步到数据库的 -->
+        <el-table-column prop="columnName" label="列名" width="180" required>
+          <template #default="{ row, $index }">
+            <el-form-item
+              :prop="`columns.${$index}.columnName`"
+              :inline-message="true"
+              label-position="top"
+            >
+              <el-input
+                v-model="row.columnName"
+                @input="row.columnName = row.columnName.trim()"
+                placeholder="请输入列名"
+                :disabled="row.syncStatus !== 1"
+                :maxlength="16"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <!-- 类型列 -->
+        <el-table-column prop="columnType" label="类型" width="125">
+          <template #default="{ row, $index }">
+            <el-form-item
+              :prop="`columns.${$index}.columnType`"
+              :inline-message="true"
+              label-position="top"
+            >
+              <el-select
+                v-model="row.columnType"
+                placeholder="请选择类型"
+                @change="handleFieldTypeChange(row, $event)"
+                :disabled="row.syncStatus !== 1"
+                style="width: 100%"
+                :show-arrow="false"
+              >
+                <el-option
+                  v-for="option in dataTypeOptions"
+                  :key="option.value"
+                  :label="option.value"
+                  :value="option.value"
+                />
+              </el-select>
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <!-- 长度列 -->
+        <el-table-column prop="columnLength" label="长度" width="120">
+          <template #default="{ row, $index }">
+            <el-form-item
+              :prop="`columns.${$index}.columnLength`"
+              :inline-message="true"
+              label-position="top"
+            >
+              <el-input-number
+                v-model="row.columnLength"
+                :min="0"
+                :max="16380"
+                controls-position="right"
+                @change="handleFieldLengthChange(row, $event)"
+                :disabled="row.syncStatus !== 1 || row.columnType !== '字符串'"
+                style="width: 100%"
+              />
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <!-- 主键列 -->
+        <el-table-column prop="isPrimary" label="是否主键" width="80">
+          <template #default="{ row, $index }">
+            <el-form-item
+              :prop="`columns.${$index}.isPrimary`"
+              :inline-message="true"
+              label-position="top"
+            >
+              <el-checkbox
+                v-model="row.isPrimary"
+                :disabled="
+                  row.syncStatus !== 1 ||
+                  (row.columnType !== '字符串' &&
+                    row.columnType !== '整型' &&
+                    row.columnType !== '长整型')
+                "
+                :true-value="1"
+                :false-value="0"
+                @change="handlePrimaryKeyChange(row, $event)"
+              />
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <!-- 自增长ID -->
+        <el-table-column prop="isAutoInc" label="自增长" width="80">
+          <template #default="{ row, $index }">
+            <el-form-item
+              :prop="`columns.${$index}.isAutoInc`"
+              :inline-message="true"
+              label-position="top"
+            >
+              <el-checkbox
+                v-model="row.isAutoInc"
+                :disabled="row.syncStatus !== 1 || !row.isPrimary"
+                :true-value="1"
+                :false-value="0"
+              />
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <!-- 允许空列 -->
+        <el-table-column prop="isAllowNull" label="允许空" width="70">
+          <template #default="{ row, $index }">
+            <el-form-item
+              :prop="`columns.${$index}.isAllowNull`"
+              :inline-message="true"
+              label-position="top"
+            >
+              <el-checkbox
+                v-model="row.isAllowNull"
+                :disabled="row.syncStatus !== 1 || !!row.isPrimary"
+                :true-value="1"
+                :false-value="0"
+              />
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <!-- 说明列 -->
+        <el-table-column prop="description" label="说明" min-width="100">
+          <template #default="{ row, $index }">
+            <el-form-item
+              :prop="`columns.${$index}.description`"
+              :inline-message="true"
+              label-position="top"
+            >
+              <el-input
+                v-model="row.description"
+                placeholder="请输入说明"
+                style="width: 100%"
+                :maxlength="50"
+              />
+            </el-form-item>
+          </template>
+        </el-table-column>
+
+        <!-- 操作列 -->
+        <el-table-column label="操作" width="60" fixed="right">
+          <template #default="scope">
+            <el-button
+              type="danger"
+              link
+              @click="showCustomConfirm(scope.$index)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form>
+  </div>
+</template>
+<style scoped lang="scss">
+:deep(.el-table__cell .el-form-item) {
+  margin-bottom: 0;
+}
+</style>

package/dist/views/data/data-modeling/components/data-modeling-form-two.vue.d.ts

@@ -0,0 +1,57 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    editData: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    handleSubmit: () => Promise<{
+        columns: {
+            id?: string | undefined;
+            tableModelId: string;
+            columnName: string;
+            columnType: string;
+            dataType?: string | undefined;
+            description: string;
+            columnLength: number;
+            isAllowNull: number;
+            isPrimary: number;
+            isAutoInc?: number | undefined;
+            defaultValue?: string | undefined;
+            syncStatus?: number | undefined;
+            sort?: number | undefined;
+            javaType?: string | undefined;
+            jdbcType?: string | undefined;
+            propertyName?: string | undefined;
+            capitalizedPropertyName?: string | undefined;
+        }[];
+        id?: string | undefined;
+        linkId: string;
+        linkName: string;
+        linkDeleted?: number | undefined;
+        modelName: string;
+        tableName: string;
+        description: string;
+        syncStatus?: string | undefined;
+        linkType: number;
+        sort: number;
+        createTime?: string | undefined;
+        updateTime?: string | undefined;
+    } | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    editData: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    readonly: boolean;
+    editData: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/data/data-modeling/components/data-modeling-form.d.vue.ts

@@ -0,0 +1,11 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    editData: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+}>, {
+    handleSubmit: () => Promise<void>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    editData: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;