yg-yygl 0.0.1

package/dist/views/data/data-modeling/components/common-field/common-fields.vue

@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+import type { ActionButton, TableColumn } from '@udp/component-ui';
+
+import type { CommonField } from '../../../../../api/data-modeling/types';
+
+import { computed, reactive, ref } from 'vue';
+
+import { Dialog, IconButton, Table, useTable } from '@udp/component-ui';
+
+import { ElMessage } from 'element-plus';
+
+import {
+  createCommonField,
+  deleteCommonField,
+  getCommonFieldList,
+  updateCommonField,
+} from '../../../../../api/data-modeling';
+
+import CommonFieldForm from './common-field-form.vue';
+
+// 列表信息
+const columns = reactive<TableColumn[]>([
+  { prop: 'columnName', label: '列名', minWidth: 120 },
+  { prop: 'columnType', label: '类型', minWidth: 100 },
+  {
+    prop: 'columnLength',
+    label: '长度',
+    minWidth: 80,
+    formatter: (row: CommonField) =>
+      row.columnLength && row.columnLength !== 0 ? row.columnLength : '-',
+  },
+  {
+    prop: 'isAllowNull',
+    label: '允许空',
+    minWidth: 80,
+    formatter: (row: CommonField) => (row.isAllowNull ? '是' : '否'),
+  },
+  { prop: 'description', label: '说明', minWidth: 150 },
+]);
+
+// 使用 Hook
+const { loading, data, refresh, deleteRow } = useTable({
+  api: {
+    list: () => getCommonFieldList(),
+    delete: (id: string) => deleteCommonField(id),
+  },
+});
+
+const commonFieldNameList = computed(() =>
+  data.value
+    .map((item) => item.columnName)
+    .filter((item) => item !== editRow.value?.columnName),
+);
+
+// 操作按钮
+const actionBtns = [
+  {
+    text: '编辑',
+    type: 'primary',
+    link: true,
+    onClick: (row: any) => handleAction('edit', row as CommonField),
+  },
+  {
+    text: '删除',
+    type: 'danger',
+    link: true,
+    onClick: (row: any) => deleteRow(row),
+  },
+] as ActionButton[];
+
+/** 新增/编辑弹窗 */
+const commonFieldFormRef = ref();
+const innerDrawerVisible = ref(false);
+const editRow = ref<CommonField>();
+const drawerType = ref<'add' | 'edit'>('add');
+const drawerTitle = computed(() => {
+  return drawerType.value === 'add' ? '新增常用字段' : '编辑常用字段';
+});
+
+function handleAction(type: 'add' | 'edit', row?: CommonField) {
+  drawerType.value = type;
+  editRow.value = row ? { ...row } : undefined;
+  innerDrawerVisible.value = true;
+}
+
+async function handleDrawerConfirm() {
+  try {
+    const data = await commonFieldFormRef.value?.submit();
+    if (!data) {
+      return;
+    }
+    await (drawerType.value === 'add'
+      ? createCommonField(data)
+      : updateCommonField(data));
+    refresh();
+    handleDrawerClosed();
+    ElMessage.success(`${drawerTitle.value}成功`);
+  } catch {
+    // ElMessage.error(`${drawerTitle.value}失败`);
+  }
+}
+
+function handleDrawerClosed() {
+  innerDrawerVisible.value = false;
+  editRow.value = undefined;
+}
+
+defineExpose({
+  refresh,
+});
+</script>
+
+<template>
+  <div class="common-fields-container h-full w-full">
+    <Table
+      :data="data"
+      :columns="columns"
+      :loading="loading"
+      show-toolbar
+      :show-pagination="false"
+      show-action
+      :show-layout="false"
+      layout-type="table"
+      action-width="160px"
+      @refresh="refresh"
+      :column-action-btns="actionBtns"
+    >
+      <template #top-actions>
+        <IconButton type="primary" icon-type="add" @click="handleAction('add')">
+          新增字段
+        </IconButton>
+      </template>
+    </Table>
+
+    <Dialog
+      v-model="innerDrawerVisible"
+      :title="drawerTitle"
+      :type="drawerType"
+      width="600px"
+      :show-confirm-button="true"
+      @confirm="handleDrawerConfirm"
+      @closed="handleDrawerClosed"
+    >
+      <CommonFieldForm
+        ref="commonFieldFormRef"
+        :common-field-name-list="commonFieldNameList"
+        :edit-data="editRow"
+        :type="drawerType"
+      />
+    </Dialog>
+  </div>
+</template>
+
+<style scoped>
+.common-fields-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.common-fields-container :deep(.el-table) {
+  flex: 1;
+  height: calc(100% - 60px);
+}
+
+.common-fields-container :deep(.el-table__body-wrapper) {
+  height: calc(100% - 40px);
+  overflow-y: auto;
+}
+</style>

package/dist/views/data/data-modeling/components/common-field/common-fields.vue.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    refresh: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/data/data-modeling/components/data-modeling-form-one.d.vue.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<{
+        linkName: string | undefined;
+        id?: string | undefined;
+        linkId: string;
+        linkDeleted?: number | undefined;
+        modelName: string;
+        tableName: string;
+        description: string;
+        syncStatus?: string | undefined;
+        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;
+        }[];
+        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-one.vue

@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import type { DataModeling, TableInfo } from '../../../../api/data-modeling/types';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+// 定义表单验证规则
+import { getDataConnectPage } from '../../../../api/data-connect';
+import { checkTableName, getTableList } from '../../../../api/data-modeling';
+
+const props = defineProps({
+  editData: {
+    type: Object,
+    default: () => {},
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const linkOptions = ref<{ label: string; value: string }[]>([]);
+
+const tableList = ref<{ label: string; value: string }[]>([]);
+
+const formRef = ref();
+
+const formData = ref<DataModeling>({
+  modelName: '',
+  tableName: '',
+  linkId: '',
+  linkType: 2,
+  linkName: '',
+  description: '',
+  columns: [],
+  sort: 1,
+});
+
+// 计算是否禁用表单
+const isFormDisabled = computed(() => {
+  return formData.value.linkDeleted !== 0 || props.readonly;
+});
+
+const rules = computed(() => {
+  return {
+    modelName: [{ required: true, message: '请输入模型名', trigger: 'blur' }],
+    tableName: [
+      { required: true, message: '请输入表名', trigger: ['blur', 'change'] },
+      {
+        validator: (
+          _rule: any,
+          value: string,
+          callback: (error?: Error) => void,
+        ) => {
+          if (!value) {
+            callback(new Error('请输入表名'));
+            return;
+          }
+          if (!/^[a-z_]\w*$/i.test(value)) {
+            callback(
+              new Error(
+                '表名只能包含字母、数字和下划线，且必须以字母或下划线开头',
+              ),
+            );
+          }
+          if (!props.editData.id && formData.value.linkType === 1) {
+            // 新建已有表时，不校验唯一性
+            callback();
+            return;
+          }
+          if (!formData.value.linkId) {
+            callback(new Error('请先选择数据连接'));
+            return;
+          }
+          checkTableName({
+            linkId: formData.value.linkId,
+            tableName: value,
+            ...(props.editData?.id && { id: props.editData.id }),
+          }).then((res) => {
+            if (res) {
+              callback(new Error('表名已存在'));
+            } else {
+              callback();
+            }
+          });
+        },
+        trigger: ['blur', 'change'],
+      },
+    ],
+    linkId: [{ required: true, message: '请选择数据连接', trigger: 'blur' }],
+  };
+});
+
+// 使用watch监听linkType,避免@change事件触发tableName的校验规则
+watch(
+  () => formData.value.linkType,
+  () => {
+    formData.value.tableName = '';
+  },
+);
+
+// 当数据连接改变时，获取当前数据源下的表列表
+const handleLinkIdChange = () => {
+  formData.value.tableName = '';
+  getCurrentTableList();
+};
+
+// 获取当前数据源下的表列表
+function getCurrentTableList() {
+  getTableList(formData.value.linkId).then((res) => {
+    tableList.value =
+      res?.map((item: TableInfo) => ({
+        label: item.tableName,
+        value: item.tableName,
+      })) || [];
+  });
+}
+
+// 提交表单数据
+const handleSubmit = async () => {
+  const valid = await formRef.value.validate();
+  if (!valid) {
+    return;
+  }
+  return {
+    ...formData.value,
+    linkName: linkOptions.value.find(
+      (item) => item.value === formData.value.linkId,
+    )?.label,
+  };
+};
+
+// 获取数据连接列表
+function getDataLinkList() {
+  getDataConnectPage({
+    model: {},
+    current: -1,
+    size: 100,
+  }).then((res) => {
+    console.log('数据连接res:', res);
+    linkOptions.value =
+      res.records?.map((item: any) => ({
+        label: item.fullName,
+        value: item.id,
+      })) || [];
+  });
+}
+
+watch(
+  () => props.editData,
+  (val) => {
+    Object.assign(formData.value, val);
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+onMounted(() => {
+  getDataLinkList();
+});
+
+defineExpose({
+  handleSubmit,
+});
+</script>
+<template>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="rules"
+    label-width="auto"
+    :validate-on-rule-change="false"
+    :disabled="isFormDisabled"
+  >
+    <el-form-item label="模型名称" prop="modelName">
+      <el-input
+        v-model.trim="formData.modelName"
+        placeholder="请输入模型名"
+        clearable
+        :maxlength="50"
+      />
+    </el-form-item>
+    <el-form-item label="数据连接" prop="linkId">
+      <el-select
+        v-if="formData.linkDeleted === 0"
+        v-model="formData.linkId"
+        placeholder="请选择数据连接"
+        :disabled="!!formData.id"
+        :show-arrow="false"
+        @change="handleLinkIdChange"
+      >
+        <el-option
+          v-for="item in linkOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-input
+        v-else
+        v-model="formData.linkName"
+        placeholder="暂未找到该数据连接"
+        clearable
+        disabled
+        :maxlength="50"
+      />
+    </el-form-item>
+    <el-form-item label="数据表" prop="tableName">
+      <el-radio-group
+        v-if="!formData.id"
+        v-model="formData.linkType"
+        class="mb-2"
+      >
+        <el-radio :value="1">已有表</el-radio>
+        <el-radio :value="2">自建表</el-radio>
+      </el-radio-group>
+      <el-select
+        v-if="formData.linkType === 1"
+        v-model="formData.tableName"
+        placeholder="请选择已有表"
+        filterable
+        :show-arrow="false"
+      >
+        <el-option
+          v-for="item in tableList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-input
+        v-else
+        v-model.trim="formData.tableName"
+        placeholder="请输入表名"
+        clearable
+        :disabled="!!editData?.id"
+        :maxlength="50"
+      />
+    </el-form-item>
+    <el-form-item label="排序" prop="sort">
+      <el-input-number
+        v-model="formData.sort"
+        placeholder="请输入排序"
+        :min="1"
+        :max="999999"
+        class="w-full"
+      />
+    </el-form-item>
+    <el-form-item label="说明" prop="description">
+      <el-input
+        v-model="formData.description"
+        placeholder="请输入说明"
+        clearable
+        type="textarea"
+        :maxlength="50"
+      />
+    </el-form-item>
+  </el-form>
+</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-one.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<{
+        linkName: string | undefined;
+        id?: string | undefined;
+        linkId: string;
+        linkDeleted?: number | undefined;
+        modelName: string;
+        tableName: string;
+        description: string;
+        syncStatus?: string | undefined;
+        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;
+        }[];
+        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-two.d.vue.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;