yg-yygl 0.0.1

package/dist/views/sys/data-interface/components/sql-data-config.vue

@@ -0,0 +1,658 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, nextTick } from 'vue';
+import { Table, useTable, CodeEditor } from '@udp/component-ui';
+import type { CardOptions, TablePagination } from '@udp/component-ui';
+import { QuestionFilled, Edit, Delete } from '@element-plus/icons-vue';
+import { ElTooltip, ElButton, ElMessage, ElMessageBox } from 'element-plus';
+import ParamEditDialog from './param-edit-dialog.vue';
+import FieldEditDialog from './field-edit-dialog.vue';
+import type { Parameter, Field } from '../../../../api/data-interface/types';
+
+// 定义属性
+const props = defineProps({
+  value: { type: String, default: '' },
+  parameterJson: { type: Array, default: () => [] },
+  fieldJson: { type: Array, default: () => [] },
+});
+
+// 定义事件
+const emit = defineEmits([
+  'update:value',
+  'change',
+  'parameter-change',
+  'field-change',
+]);
+
+// 获取SQL内容
+const sqlContent = ref(props.value || '');
+
+// 字段列表和参数列表
+const fieldList = ref(props.fieldJson || []);
+const parameterList = ref(props.parameterJson || []);
+
+// 参数列表
+const paramColumns = [
+  { prop: 'field', label: '参数名称', minWidth: '100px' },
+  { prop: 'dataType', label: '参数类型', minWidth: '90px' },
+];
+
+// 字段列表
+const fieldColumns = [
+  { prop: 'field', label: '字段名称', minWidth: '100px' },
+  { prop: 'defaultValue', label: '映射字段', minWidth: '100px' },
+];
+
+// 参数列表数据
+const parameterData = ref<Parameter[]>([]);
+
+// 字段列表数据
+const fieldData = ref<Field[]>([]);
+
+// 初始化数据
+// 直接在声明时初始化，而不是在onMounted中
+if (Array.isArray(props.parameterJson) && props.parameterJson.length > 0) {
+  parameterData.value = [...props.parameterJson] as Parameter[];
+}
+
+if (Array.isArray(props.fieldJson) && props.fieldJson.length > 0) {
+  fieldData.value = [...props.fieldJson] as Field[];
+}
+
+// 监听字段列表和参数列表变化
+watch(
+  () => props.fieldJson,
+  (newVal) => {
+    if (newVal && newVal.length > 0) {
+      fieldList.value = [...newVal];
+      fieldData.value = [...newVal] as Field[]; // 同步到表格数据源
+    }
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.parameterJson,
+  (newVal) => {
+    if (newVal && newVal.length > 0) {
+      parameterList.value = [...newVal];
+      parameterData.value = [...newVal] as Parameter[]; // 同步到表格数据源
+    }
+  },
+  { deep: true },
+);
+
+// 更新字段列表
+const updateFieldList = (fields: any[]) => {
+  fieldList.value = fields;
+  emit('field-change', fields);
+};
+
+// 更新参数列表
+const updateParameterList = (params: any[]) => {
+  parameterList.value = params;
+  emit('parameter-change', params);
+};
+
+// SQL内容变化处理
+const handleSqlChange = (val: string) => {
+  sqlContent.value = val;
+  emit('update:value', val);
+  emit('change', val);
+};
+
+// 系统变量列表 - 暂时注释，后端尚未实现
+// const sysVariableList = reactive([
+//   { value: '@lotSnowID', tips: '批量生成不同雪花ID' },
+//   { value: '@snowFlakeID', tips: '系统生成雪花ID' },
+//   { value: '@currentUser', tips: '当前用户' },
+//   { value: '@currentUsersAndSubordinates', tips: '当前用户及下属' },
+//   { value: '@organization', tips: '当前组织' },
+//   { value: '@currentOrganizationAndSuborganization', tips: '当前组织及子组织' },
+//   { value: '@chargeorganization', tips: '当前分管组织' },
+//   { value: '@offsetSize', tips: '开始数据条数' },
+//   { value: '@pageSize', tips: '返回数据条数' },
+//   { value: '@keyword', tips: '关键词搜索' },
+// ]);
+
+// 监听value变化
+watch(
+  () => props.value,
+  (newVal) => {
+    if (newVal !== sqlContent.value) {
+      sqlContent.value = newVal;
+    }
+  },
+);
+
+// 弹窗控制
+const paramDialogVisible = ref(false);
+const fieldDialogVisible = ref(false);
+const paramDialogTitle = ref('');
+const fieldDialogTitle = ref('');
+const currentParam = ref<Parameter>({
+  id: '',
+  field: '',
+  dataType: 'varchar',
+  defaultValue: '',
+  required: false,
+  description: '',
+});
+const currentField = ref<Field>({
+  id: '',
+  field: '',
+  defaultValue: '',
+});
+
+// 参数表格配置
+const paramCardOptions = ref<CardOptions>({
+  title: '参数列表',
+  columns: paramColumns,
+  showActions: true,
+  isEdit: true,
+  isDelete: true,
+  onEdit: (row: any) => handleEditParam(row),
+  onDelete: (row: any, showConfirm: boolean) =>
+    handleDeleteParam(row, showConfirm),
+});
+
+// 字段表格配置
+const fieldCardOptions = ref<CardOptions>({
+  title: '字段列表',
+  columns: fieldColumns,
+  showActions: true,
+  isEdit: true,
+  isDelete: true,
+  onEdit: (row: any) => handleEditField(row),
+  onDelete: (row: any, showConfirm: boolean) =>
+    handleDeleteField(row, showConfirm),
+});
+
+// 参数表单项配置
+const paramFormItems = [
+  {
+    prop: 'field',
+    label: '参数名称',
+    required: true,
+    placeholder: '请输入参数名称',
+  },
+  {
+    prop: 'dataType',
+    label: '参数类型',
+    required: true,
+    type: 'select',
+    options: [
+      { label: '字符串', value: 'varchar' },
+      { label: '整型', value: 'int' },
+      { label: '日期时间', value: 'datetime' },
+      { label: '浮点型', value: 'decimal' },
+    ],
+  },
+  { prop: 'defaultValue', label: '默认值', placeholder: '请输入默认值' },
+  { prop: 'required', label: '必填', type: 'switch' },
+  {
+    prop: 'description',
+    label: '参数说明',
+    placeholder: '请输入参数说明',
+    type: 'textarea',
+  },
+];
+
+// 字段表单项配置
+const fieldFormItems = [
+  {
+    prop: 'field',
+    label: '字段名称',
+    required: true,
+    placeholder: '请输入字段名称',
+  },
+  {
+    prop: 'defaultValue',
+    label: '映射字段',
+    required: true,
+    placeholder: '请输入映射字段',
+  },
+];
+
+// 参数表格API模拟
+const paramApi = {
+  list: () =>
+    Promise.resolve({
+      data: parameterData.value,
+      total: parameterData.value.length,
+    }),
+  delete: (id: string) => {
+    const index = parameterData.value.findIndex((item) => item.id === id);
+    if (index !== -1) parameterData.value.splice(index, 1);
+    return Promise.resolve({ success: true });
+  },
+};
+
+// 字段表格API模拟
+const fieldApi = {
+  list: () =>
+    Promise.resolve({ data: fieldData.value, total: fieldData.value.length }),
+  delete: (id: string) => {
+    const index = fieldData.value.findIndex((item) => item.id === id);
+    if (index !== -1) fieldData.value.splice(index, 1);
+    return Promise.resolve({ success: true });
+  },
+};
+
+// 使用表格Hook
+const {
+  loading: paramLoading,
+  data: paramTableData,
+  refresh: refreshParams,
+  deleteRow: deleteParamRow,
+} = useTable({
+  api: paramApi,
+  pagination: {} as Partial<TablePagination>,
+});
+
+const {
+  loading: fieldLoading,
+  data: fieldTableData,
+  refresh: refreshFields,
+  deleteRow: deleteFieldRow,
+} = useTable({
+  api: fieldApi,
+  pagination: {} as Partial<TablePagination>,
+});
+
+// 在组件挂载后刷新表格，确保数据正确显示
+onMounted(() => {
+  // 使用nextTick确保DOM更新后再刷新表格
+  nextTick(() => {
+    refreshParams();
+    refreshFields();
+  });
+});
+
+// 处理方法
+// 系统变量点击处理函数 - 暂时注释，后端尚未实现
+// function handleSysVarClick(value: string) {
+//   // 将系统变量插入到编辑器光标位置
+//   sqlContent.value = (sqlContent.value || '') + value;
+//   emit('update:value', sqlContent.value);
+//   emit('change', sqlContent.value);
+// }
+
+function handleParamClick(row: any) {
+  if (row.field) {
+    // 实际实现中需要集成Monaco编辑器
+    console.log('插入参数:', '{' + row.field + '}');
+    sqlContent.value = (sqlContent.value || '') + '{' + row.field + '}';
+    emit('update:value', sqlContent.value);
+    emit('change', sqlContent.value);
+  }
+}
+
+// 新增参数
+function handleAddParam() {
+  paramDialogTitle.value = '新增参数';
+  currentParam.value = {
+    id: '',
+    field: '',
+    dataType: 'varchar',
+    defaultValue: '',
+    required: false,
+    description: '',
+  };
+  paramDialogVisible.value = true;
+}
+
+// 编辑参数
+function handleEditParam(row: any) {
+  paramDialogTitle.value = '编辑参数';
+  currentParam.value = { ...row };
+  paramDialogVisible.value = true;
+}
+
+// 保存参数
+function handleSaveParam(param: Parameter) {
+  if (param.id) {
+    // 编辑现有参数
+    const index = parameterData.value.findIndex((item) => item.id === param.id);
+    if (index !== -1) {
+      parameterData.value[index] = { ...param };
+    }
+  } else {
+    // 添加新参数
+    param.id = Date.now().toString();
+    parameterData.value.push({ ...param });
+  }
+  refreshParams();
+  ElMessage.success('保存成功');
+
+  // 触发参数列表变更事件
+  emit('parameter-change', parameterData.value);
+}
+
+// 删除参数
+function handleDeleteParam(row: any, showConfirm = true) {
+  if (showConfirm) {
+    ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+      .then(() => {
+        const index = parameterData.value.findIndex(
+          (item) => item.id === row.id,
+        );
+        if (index !== -1) {
+          parameterData.value.splice(index, 1);
+          refreshParams();
+          ElMessage.success('删除成功');
+
+          // 触发参数列表变更事件
+          emit('parameter-change', parameterData.value);
+        }
+      })
+      .catch(() => {});
+  } else {
+    const index = parameterData.value.findIndex((item) => item.id === row.id);
+    if (index !== -1) {
+      parameterData.value.splice(index, 1);
+      refreshParams();
+
+      // 触发参数列表变更事件
+      emit('parameter-change', parameterData.value);
+    }
+  }
+}
+
+// 新增字段
+function handleAddField() {
+  fieldDialogTitle.value = '新增字段';
+  currentField.value = {
+    id: '',
+    field: '',
+    defaultValue: '',
+  };
+  fieldDialogVisible.value = true;
+}
+
+// 编辑字段
+function handleEditField(row: any) {
+  fieldDialogTitle.value = '编辑字段';
+  currentField.value = { ...row };
+  fieldDialogVisible.value = true;
+}
+
+// 保存字段
+function handleSaveField(field: Field) {
+  if (field.id) {
+    // 编辑现有字段
+    const index = fieldData.value.findIndex((item) => item.id === field.id);
+    if (index !== -1) {
+      fieldData.value[index] = { ...field };
+    }
+  } else {
+    // 添加新字段
+    field.id = Date.now().toString();
+    fieldData.value.push({ ...field });
+  }
+  refreshFields();
+  ElMessage.success('保存成功');
+
+  // 触发字段列表变更事件
+  emit('field-change', fieldData.value);
+}
+
+// 删除字段
+function handleDeleteField(row: any, showConfirm = true) {
+  if (showConfirm) {
+    ElMessageBox.confirm('确定要删除这条数据吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+      .then(() => {
+        const index = fieldData.value.findIndex((item) => item.id === row.id);
+        if (index !== -1) {
+          fieldData.value.splice(index, 1);
+          refreshFields();
+          ElMessage.success('删除成功');
+
+          // 触发字段列表变更事件
+          emit('field-change', fieldData.value);
+        }
+      })
+      .catch(() => {});
+  } else {
+    const index = fieldData.value.findIndex((item) => item.id === row.id);
+    if (index !== -1) {
+      fieldData.value.splice(index, 1);
+      refreshFields();
+
+      // 触发字段列表变更事件
+      emit('field-change', fieldData.value);
+    }
+  }
+}
+
+// 取消弹窗
+function handleCancel() {
+  // 仅用于取消事件，实际操作在弹窗组件内部处理
+  console.log('取消操作');
+}
+</script>
+
+<template>
+  <div class="flex h-full w-full gap-4">
+    <!-- 中间面板 - SQL编辑器 -->
+    <div
+      class="flex flex-1 flex-col overflow-hidden rounded-md border border-gray-200 dark:border-gray-700"
+    >
+      <div
+        class="flex h-10 items-center justify-between border-b border-gray-200 bg-gray-50 px-4 dark:border-gray-700 dark:bg-gray-800"
+      >
+        <div class="flex min-w-[200px] items-center">
+          <span
+            class="mr-3 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300"
+            >SQL语句</span
+          >
+          <ElTooltip content="支持SQL语句&存储过程语句" placement="top">
+            <div class="flex h-4 w-4 items-center justify-center">
+              <QuestionFilled
+                class="cursor-help text-xs text-gray-500 dark:text-gray-400"
+              />
+            </div>
+          </ElTooltip>
+        </div>
+        <!-- 系统变量下拉菜单 - 暂时注释，后端尚未实现 -->
+        <!-- <ElDropdown>
+          <span
+            class="flex cursor-pointer items-center gap-1 text-sm text-gray-600"
+          >
+            系统变量
+            <i class="el-icon-arrow-down text-xs"></i>
+          </span>
+          <template #dropdown>
+            <ElDropdownMenu>
+              <ElDropdownItem disabled
+                >当前系统变量仅支持内部接口引用</ElDropdownItem
+              >
+              <ElDivider class="my-1" />
+              <ElDropdownItem
+                v-for="(item, index) in sysVariableList"
+                :key="index"
+                @click="handleSysVarClick(item.value)"
+              >
+                <div class="flex w-full justify-between">
+                  <span>{{ item.value }}</span>
+                  <span class="ml-2.5 text-gray-400">{{ item.tips }}</span>
+                </div>
+              </ElDropdownItem>
+            </ElDropdownMenu>
+          </template>
+        </ElDropdown> -->
+      </div>
+
+      <!-- 使用CodeEditor组件替换编辑器占位符 -->
+      <div class="flex flex-1">
+        <CodeEditor
+          v-model="sqlContent"
+          language="sql"
+          height="100%"
+          @change="handleSqlChange"
+        />
+      </div>
+    </div>
+
+    <!-- 右侧面板 - 参数和字段表 -->
+    <div class="flex w-[350px] flex-col gap-4 overflow-hidden">
+      <!-- 参数表格 -->
+      <div
+        class="flex h-1/2 flex-col overflow-hidden rounded-md border border-gray-200 dark:border-gray-700"
+      >
+        <div
+          class="flex h-10 items-center justify-between border-b border-gray-200 bg-gray-50 px-4 dark:border-gray-700 dark:bg-gray-800"
+        >
+          <div class="flex min-w-[200px] items-center">
+            <span
+              class="mr-3 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300"
+              >接口参数</span
+            >
+            <ElTooltip content="接收方式:Body/json" placement="top">
+              <div class="flex h-4 w-4 items-center justify-center">
+                <QuestionFilled
+                  class="cursor-help text-xs text-gray-500 dark:text-gray-400"
+                />
+              </div>
+            </ElTooltip>
+          </div>
+        </div>
+
+        <Table
+          :data="paramTableData"
+          :columns="paramColumns"
+          :card-options="paramCardOptions"
+          :loading="paramLoading"
+          show-action
+          action-width="100px"
+          @refresh="refreshParams"
+          :on-edit="handleEditParam"
+          :on-delete="handleDeleteParam"
+          class="param-table p-2 flex-1"
+        >
+          <template #top-actions>
+            <ElButton type="primary" @click="handleAddParam"
+              >新增参数</ElButton
+            >
+          </template>
+          <template #field="{ row }">
+            <div @click="handleParamClick(row)" class="cursor-pointer">
+              <span class="text-red-500">{{ row.required ? '*' : '' }}</span>
+              {{ row.field }}
+            </div>
+          </template>
+          <template #action="{ row }">
+            <div class="flex items-center justify-center">
+              <ElButton
+                type="primary"
+                link
+                @click="handleEditParam(row)"
+              >
+                编辑
+              </ElButton>
+              <ElButton
+                type="danger"
+                link
+                @click="handleDeleteParam(row, true)"
+              >
+                删除
+              </ElButton>
+            </div>
+          </template>
+        </Table>
+      </div>
+
+      <!-- 字段表格 -->
+      <div
+        class="flex h-1/2 flex-col overflow-hidden rounded-md border border-gray-200 dark:border-gray-700"
+      >
+        <div
+          class="flex h-10 items-center justify-between border-b border-gray-200 bg-gray-50 px-4 dark:border-gray-700 dark:bg-gray-800"
+        >
+          <div class="flex min-w-[200px] items-center">
+            <span
+              class="mr-3 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300"
+              >字段列表</span
+            >
+            <ElTooltip content="设置接口返回字段" placement="top">
+              <div class="flex h-4 w-4 items-center justify-center">
+                <QuestionFilled
+                  class="cursor-help text-xs text-gray-500 dark:text-gray-400"
+                />
+              </div>
+            </ElTooltip>
+          </div>
+        </div>
+
+        <Table
+          :data="fieldTableData"
+          :columns="fieldColumns"
+          :card-options="fieldCardOptions"
+          :loading="fieldLoading"
+          show-action
+          action-width="100px"
+          @refresh="refreshFields"
+          :on-edit="handleEditField"
+          :on-delete="handleDeleteField"
+          class="field-table p-2 h-full"
+        >
+          <template #top-actions>
+            <ElButton type="primary" @click="handleAddField">新增字段</ElButton>
+          </template>
+          <template #action="{ row }">
+            <div class="flex items-center justify-center">
+              <ElButton
+                type="primary"
+                link
+                @click="handleEditField(row)"
+              >
+                编辑
+              </ElButton>
+              <ElButton
+                type="danger"
+                link
+                @click="handleDeleteField(row, true)"
+              >
+                删除
+              </ElButton>
+            </div>
+          </template>
+        </Table>
+      </div>
+    </div>
+
+    <!-- 参数编辑弹窗 -->
+    <ParamEditDialog
+      v-model:visible="paramDialogVisible"
+      :title="paramDialogTitle"
+      :parameter="currentParam"
+      :form-items="paramFormItems"
+      @save="handleSaveParam"
+      @cancel="handleCancel"
+    />
+
+    <!-- 字段编辑弹窗 -->
+    <FieldEditDialog
+      v-model:visible="fieldDialogVisible"
+      :title="fieldDialogTitle"
+      :field="currentField"
+      :form-items="fieldFormItems"
+      @save="handleSaveField"
+      @cancel="handleCancel"
+    />
+  </div>
+</template>
+
+<style scoped>
+.param-table :deep(.left-tools .el-button),
+.field-table :deep(.left-tools .el-button) {
+  width: 100%;
+}
+</style>

package/dist/views/sys/data-interface/components/sql-data-config.vue.d.ts

@@ -0,0 +1,19 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    parameterJson: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    fieldJson: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    value: string;
+    fieldJson: unknown[];
+    parameterJson: unknown[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/sys/data-interface/components/sql-data-display.d.vue.ts

@@ -0,0 +1,19 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    parameterJson: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    fieldJson: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    modelValue: string;
+    fieldJson: unknown[];
+    parameterJson: unknown[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;