数据入湖-离线-文件加载-源端配置

src/views/dataIntegration/dataLoading/fileLoading/file.data.ts

+import {FormSchema} from "@/components/Form";
+import {BasicColumn} from "@/components/Table";
+
+export const fileUploadSchema: FormSchema[] = [
+  {
+    label: '文件位置',
+    field: 'type',
+    defaultValue: '本地',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '本地',
+          value: '本地',
+        },
+        {
+          label: '文件系统',
+          value: '文件系统',
+        },
+      ],
+    },
+  },
+  {
+    label: '文件存储地址',
+    field: 'address',
+    show: ({ model }) => {
+      return model.type === '本地';
+    },
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '65_hdfs',
+          value: '65_hdfs',
+        },
+      ],
+    },
+  },
+  {
+    label: '上传文件',
+    field: 'file',
+    show: ({ model }) => {
+      return model.type === '本地';
+    },
+    slot: 'file',
+  },
+  {
+    label: '选择加载方式',
+    field: 'loadingType',
+    show: ({ model }) => {
+      return model.type === '文件系统';
+    },
+    defaultValue: '全量文件加载',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '全量文件加载',
+          value: '全量文件加载',
+        },
+        {
+          label: '增量文件加载',
+          value: '增量文件加载',
+        },
+      ],
+    },
+  },
+  {
+    label: '数据源',
+    field: 'dataSource',
+    show: ({ model }) => {
+      return model.type === '文件系统';
+    },
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '088-hdfs',
+          value: '088-hdfs',
+        },
+      ],
+    },
+  },
+  {
+    label: '路径',
+    field: 'path',
+    show: ({ model }) => {
+      return model.type === '文件系统';
+    },
+    slot: 'path',
+  },
+  {
+    label: '文件过滤(选填)',
+    field: 'filter',
+    show: ({ model }) => {
+      return model.type === '文件系统';
+    },
+    component: 'Input',
+    componentProps: {
+      placeholder: '包含完整路径的文件名正则表达式，例如/hadoop/data_*',
+    },
+  },
+  {
+    label: '列分隔符',
+    field: 'delimiter',
+    show: ({ model }) => {
+      return model.fileType !== 'excel';
+    },
+    component: 'Input',
+  },
+  {
+    label: '列起止符',
+    field: 'startStop',
+    show: ({ model }) => {
+      return model.fileType !== 'excel';
+    },
+    component: 'Input',
+  },
+  {
+    label: '编码格式',
+    field: 'encoding',
+    show: ({ model }) => {
+      return model.fileType !== 'excel';
+    },
+    component: 'Input',
+  },
+  {
+    label: '导入sheet名称',
+    field: 'sheet',
+    show: ({ model }) => {
+      return model.type === '本地' && model.fileType === 'excel';
+    },
+    slot: 'sheet',
+  },
+  {
+    label: '是否包含表头',
+    field: 'head',
+    defaultValue: '是',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '是',
+          value: '是',
+        },
+        {
+          label: '否',
+          value: '否',
+        },
+      ],
+    },
+  },
+  {
+    label: '表头起止行数',
+    field: 'header',
+    show: ({ model }) => {
+      return model.type === '本地' && model.fileType === 'excel' && model.head === '是';
+    },
+    required: true,
+    slot: 'header',
+  },
+  {
+    label: '数据起止行数',
+    field: 'row',
+    show: ({ model }) => {
+      return model.type === '本地' && model.fileType === 'excel';
+    },
+    required: true,
+    slot: 'row',
+  },
+  {
+    label: '文件起止列数',
+    field: 'column',
+    show: ({ model }) => {
+      return model.type === '本地' && model.fileType === 'excel';
+    },
+    required: true,
+    slot: 'column',
+  },
+];
+export const fileTableColumn: BasicColumn[] = [
+  {
+    dataIndex: 'c1',
+  },
+  {
+    dataIndex: 'c2',
+  },
+  {
+    dataIndex: 'c3',
+  },
+  {
+    dataIndex: 'c4',
+  },
+  {
+    dataIndex: 'c5',
+  },
+  {
+    dataIndex: 'c6',
+  },
+  {
+    dataIndex: 'c7',
+  },
+  {
+    dataIndex: 'c8',
+  },
+  {
+    dataIndex: 'c9',
+  },
+  {
+    dataIndex: 'c10',
+  },
+]

src/views/dataIntegration/dataLoading/fileLoading/fileData.ts

+export const fileData = [
+  {
+    c1: '100',
+    c2: '1132',
+    c3: '',
+    c4: '',
+    c5: '1.1',
+    c6: '',
+    c7: '',
+    c8: '',
+    c9: '',
+    c10: '',
+  },
+  {
+    c1: '101',
+    c2: '1200',
+    c3: '',
+    c4: '',
+    c5: '1.1',
+    c6: '',
+    c7: '',
+    c8: '',
+    c9: '',
+    c10: '',
+  },
+  {
+    c1: '102',
+    c2: '1200',
+    c3: '',
+    c4: '',
+    c5: '1.1',
+    c6: '',
+    c7: '',
+    c8: '',
+    c9: '',
+    c10: '',
+  },
+  {
+    c1: '103',
+    c2: '1200',
+    c3: '',
+    c4: '',
+    c5: '1.1',
+    c6: '',
+    c7: '',
+    c8: '',
+    c9: '',
+    c10: '',
+  },
+];

src/views/dataIntegration/dataLoading/fileLoading/index.vue

+<template>
+  <PageWrapper :title="modelName" contentBackground headerSticky>
+    <template #footer>
+      <Tabs v-model:activeKey="activeKey">
+        <TabPane key="1" tab="源端配置">
+          <div style="display: flex">
+            <BasicForm class="w-1/3" @register="fileForm">
+              <template #file="{ field, model }">
+                <Upload
+                  v-model:file-list="fileList"
+                  name="file"
+                  :headers="headers"
+                  @change="handleChange(model)"
+                  :max-count="1"
+                >
+                  <a-button>
+                    <UploadOutlined />
+                    上传文件
+                  </a-button>
+                </Upload>
+                <span style="color: #dbdcdd; font-size: 12px">仅支持上传单个文件或zip包</span>
+              </template>
+              <template #path="{ field, model }">
+                <div style="display: flex">
+                  <Input v-model:value="model[field]" />
+                  <a-button type="primary">浏览</a-button>
+                </div>
+                <div>
+                  <span style="color: #a8adba">可选择路径或手动输入带参数路径，例：/root/${*}</span>
+                </div>
+              </template>
+              <template #sheet="{ field, model }">
+                <div style="display: flex">
+                  <Input class="pointer-events-none" v-model:value="model.fileName" />
+                  <Input class="pointer-events-none" v-model:value="model.sheetName" />
+                </div>
+              </template>
+              <template #header="{ field, model }">
+                <div style="display: flex">
+                  <Input v-model:value="model.startHeader" />
+                  <span style="font-size: 18px; margin: 0 5px">~</span>
+                  <Input v-model:value="model.endHeader" />
+                </div>
+              </template>
+              <template #row="{ field, model }">
+                <div style="display: flex">
+                  <Input v-model:value="model.startRow" />
+                  <span style="font-size: 18px; margin: 0 5px">~</span>
+                  <Input v-model:value="model.endRow" />
+                </div>
+              </template>
+              <template #column="{ field, model }">
+                <div style="display: flex">
+                  <Input v-model:value="model.startColumn" />
+                  <span style="font-size: 18px; margin: 0 5px">~</span>
+                  <Input v-model:value="model.endColumn" />
+                </div>
+              </template>
+            </BasicForm>
+            <div class="w-2/3">
+              <Alert show-icon message="由于数据量太大，只展示前10行数据" />
+              <Alert show-icon message="当前服务将会表头中把除了下划线以外其他特殊字符转为下划线" />
+              <BasicTable v-if="showFileTable" @register="fileTable">
+                <template #toolbar>
+                  <div style="flex: 1; display: flex; justify-content: space-between">
+                    <Input style="width: 200px" v-model:value="key" placeholder="关键字搜索" />
+                    <DeleteOutlined />
+                  </div>
+                </template>
+                <template #headerCell="{ column }">
+                  <!--10个循环简化了-- 获取表头 -->
+                  <template v-if="column.key.startsWith('c')">
+                    <div style="display: flex">
+                      <div style="display: flex; flex-direction: column">
+                        <Input v-model:value="headList[parseInt(column.key.slice(1)) - 1].name" />
+                        <Select
+                          v-model:value="headList[parseInt(column.key.slice(1)) - 1].type"
+                          :options="typeOptions"
+                        />
+                      </div>
+                      <Checkbox
+                        v-model:checked="headList[parseInt(column.key.slice(1)) - 1].checked"
+                      />
+                    </div>
+                  </template>
+                  <template v-else>
+                    <HeaderCell :column="column" />
+                  </template>
+                </template>
+              </BasicTable>
+            </div>
+          </div>
+        </TabPane>
+        <TabPane key="2" tab="映射规则配置" />
+        <TabPane key="3" tab="目标端配置" />
+        <TabPane key="4" tab="列表展示" />
+      </Tabs>
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { Input, Select, Checkbox, Tabs, TabPane, Alert, Upload, message } from 'ant-design-vue';
+  import { ToTopOutlined, DeleteOutlined, UploadOutlined } from '@ant-design/icons-vue';
+  import PageWrapper from '../../../../components/Page/src/PageWrapper.vue';
+  import { reactive, ref } from 'vue';
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { useForm } from '@/components/Form';
+  import {
+    fileTableColumn,
+    fileUploadSchema,
+  } from '@/views/dataIntegration/dataLoading/fileLoading/file.data';
+  import { getBasicColumns, getFormConfig } from '@/views/demo/table/tableData';
+  import { getMetadataColumns } from '@/views/dataIntegration/dataLoading/dataEntryLake/offlineLoading.data';
+  import { BasicTable, useTable } from '@/components/Table';
+  import { demoListApi } from '@/api/demo/table';
+  import { BasicHelp } from '@/components/Basic';
+  import HeaderCell from '@/components/Table/src/components/HeaderCell.vue';
+  import { fileData } from '@/views/dataIntegration/dataLoading/fileLoading/fileData';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import type { UploadChangeParam } from 'ant-design-vue';
+
+  const key = ref('');
+  const activeKey = ref('1');
+  const modelName = ref('文件离线加载');
+  const { createMessage, createConfirm } = useMessage();
+  const fileList = ref([]);
+  const headers = {
+    authorization: 'authorization-text',
+  };
+  const handleChange = (model) => {
+    const type = fileList.value[0].name.slice(fileList.value[0].name.lastIndexOf('.') + 1);
+    console.log('type', type);
+    if (['xls', 'xlsx'].includes(type)) {
+      model.fileType = 'excel';
+    } else {
+      model.fileType = 'other';
+    }
+    model.fileName = fileList.value[0].name;
+    model.sheetName = 'Sheet1,Sheet2,Sheet3';
+  };
+  const [fileForm, { validate: fileValidate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 24, md: 24 },
+    schemas: fileUploadSchema,
+    showActionButtonGroup: true,
+    showResetButton: false,
+    submitButtonOptions: {
+      text: '解析',
+      onClick: () => {
+        fileValidate().then(() => {
+          if (showFileTable.value) {
+            createConfirm({
+              iconType: 'warning',
+              title: '确认覆盖',
+              content: '确认覆盖之前的解析结果吗？',
+              onOk() {
+                createMessage.success('覆盖成功!');
+              },
+            });
+          }
+          showFileTable.value = true;
+        })
+      },
+    },
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  // 表头
+  const headList = reactive([
+    {
+      name: 'id',
+      type: 'int',
+    },
+    {
+      name: 'age',
+      type: 'int',
+    },
+    {
+      name: 'person',
+      type: 'string',
+    },
+    {
+      name: 'gender',
+      type: 'string',
+    },
+    {
+      name: 'height',
+      type: 'double',
+    },
+    {
+      name: 'create_time',
+      type: 'string',
+    },
+    {
+      name: 'update_time',
+      type: 'string',
+    },
+    {
+      name: 'create_by',
+      type: 'string',
+    },
+    {
+      name: 'update_by',
+      type: 'string',
+    },
+    {
+      name: 'remark',
+      type: 'string',
+    },
+  ]);
+  // 类型
+  const typeOptions = [
+    {
+      label: 'int',
+      value: 'int',
+    },
+    {
+      label: 'string',
+      value: 'string',
+    },
+    {
+      label: 'double',
+      value: 'double',
+    },
+  ];
+  const showFileTable = ref(false);
+  const [fileTable] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '5',
+        pages: '1',
+        total: fileData.length,
+        code: '',
+        message: '',
+        data: fileData,
+      };
+      return { ...response };
+    },
+    canResize: false,
+    rowKey: 'businessId',
+    columns: fileTableColumn,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: false,
+  });
+</script>
+
+<style scoped></style>

src/views/parameterConfiguration/addParameterModel.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="getTitle"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="register" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { useTable, TableAction } from '@/components/Table';
+  import { ref, computed, unref, reactive } from 'vue';
+  import { CloseOutlined } from '@ant-design/icons-vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import { Select } from 'ant-design-vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { connectionData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/modelData';
+  import {
+    connectionFormSchema,
+    connectionTable,
+  } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/model.data';
+  import {
+    infoFormSchema,
+    uploadModelSchema,
+    upstreamTaskColumn,
+  } from '@/views/taskScheduling/taskFlowDesign/design.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import {addModelFormSchema} from "@/views/parameterConfiguration/config.data";
+
+  const getTitle = '添加参数';
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+  });
+
+  const [register, { validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 24, md: 24 },
+    schemas: addModelFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  /**确定按钮*/
+  async function handleSubmit() {
+    validate().then(() => {
+      closeModal();
+    });
+  }
+</script>

src/views/parameterConfiguration/config.data.ts

+import {BasicColumn, FormSchema} from '@/components/Table';
+
+export const workColumn: BasicColumn[] = [
+  {
+    title: '参数名称',
+    dataIndex: 'name',
+    width: 150,
+  },
+  {
+    title: '参数类型',
+    dataIndex: 'type',
+    width: 150,
+  },
+  {
+    title: '参数值',
+    dataIndex: 'value',
+    width: 150,
+  },
+];
+export const addModelFormSchema: FormSchema[] = [
+  {
+    label: '参数名称',
+    field: 'name',
+    required: true,
+    component: 'Input',
+  },
+  {
+    label: '参数类型',
+    field: 'type',
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '普通参数',
+          value: '普通参数',
+        },
+        {
+          label: '加密参数',
+          value: '加密参数',
+        },
+      ],
+    },
+  },
+  {
+    label: '参数值',
+    field: 'value',
+    required: true,
+    component: 'Input',
+  },
+];

src/views/parameterConfiguration/configData.ts

+export const workAreaList = [
+  {
+    id: 1,
+    name: 'admin-个人工作区',
+  },
+  {
+    id: 2,
+    name: '共享工作区',
+  },
+  {
+    id: 3,
+    name: 'auth_check',
+  },
+  {
+    id: 4,
+    name: 'SLA场景验证',
+  },
+  {
+    id: 5,
+    name: '商城工作区',
+  },
+  {
+    id: 6,
+    name: 'sql收集及验证',
+  },
+  {
+    id: 7,
+    name: 'test',
+  },
+  {
+    id: 8,
+    name: 'NL2SQL验证',
+  },
+];
+export const workData = [
+  {
+    name: '1',
+    type: '1',
+    value: '1',
+  },
+];

src/views/parameterConfiguration/index.vue

+<template>
+  <PageWrapper title="参数配置" contentBackground headerSticky>
+    <template #footer>
+      <Tabs v-model:activeKey="activeKey">
+        <TabPane key="1" tab="性能参数">
+          <div class="tab-body">
+            <div style="flex: 1; display: flex">
+              <Input
+                style="width: 180px; margin-left: 10px"
+                v-model:value="key"
+                placeholder="输入关键字搜索"
+              >
+                <template #suffix>
+                  <SearchOutlined />
+                </template>
+              </Input>
+            </div>
+            <div>
+              <a-button type="link" @click="handleAdd"><PlusOutlined />添加</a-button>
+            </div>
+          </div>
+          <Alert
+            class="tab-alert"
+            type="info"
+            show-icon
+            message="性能参数的配置项无需重启当前服务，点击”保存“即可立即生效。"
+            closable
+          />
+          <BasicTable @register="workTable" />
+        </TabPane>
+        <TabPane key="2" tab="全局参数">
+          <div class="tab-body">
+            <div style="flex: 1; display: flex">
+              <Input
+                style="width: 180px; margin-left: 10px"
+                v-model:value="key"
+                placeholder="输入关键字搜索"
+              >
+                <template #suffix>
+                  <SearchOutlined />
+                </template>
+              </Input>
+            </div>
+            <div>
+              <a-button type="link" @click="handleAdd"><PlusOutlined />添加</a-button>
+            </div>
+          </div>
+          <Alert
+            class="tab-alert"
+            type="info"
+            show-icon
+            message="全局参数可供所有任务流使用"
+            closable
+          />
+          <BasicTable @register="workTable" />
+        </TabPane>
+        <TabPane key="3" tab="工作区参数">
+          <Row class="tab-body" :gutter="16">
+            <Col :span="6">
+              <List>
+                <template v-for="item in workAreaList" :key="item.id">
+                  <List.Item
+                    style="cursor: pointer"
+                    @click="handleChange(item)"
+                    :class="selectId === item.id ? 'selectionClass' : null"
+                  >
+                    <List.Item.Meta>
+                      <template #avatar>
+                        <BranchesOutlined />
+                      </template>
+                      <template #title>
+                        <span>{{ item.name }}</span>
+                      </template>
+                    </List.Item.Meta>
+                  </List.Item>
+                </template>
+              </List>
+            </Col>
+            <Col :span="18">
+              <div style="display: flex">
+                <div style="flex: 1; display: flex">
+                  <span style="font-size: 16px">{{ name }}</span>
+                  <Input
+                    style="width: 180px; margin-left: 10px"
+                    v-model:value="key"
+                    placeholder="输入关键字搜索"
+                  >
+                    <template #suffix>
+                      <SearchOutlined />
+                    </template>
+                  </Input>
+                </div>
+                <div>
+                  <a-button type="link" @click="handleAdd"><PlusOutlined />添加</a-button>
+                </div>
+              </div>
+              <Alert
+                class="tab-alert"
+                type="info"
+                show-icon
+                message="工作区参数可供所在工作区内所有任务流使用"
+                closable
+              />
+              <BasicTable @register="workTable" />
+            </Col>
+          </Row>
+        </TabPane>
+      </Tabs>
+    </template>
+    <AddParameterModel @register="addParameterModel" />
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, onMounted, ref, nextTick } from 'vue';
+  import { PageWrapper } from '@/components/Page';
+  import { useRoute, onBeforeRouteLeave, useRouter } from 'vue-router';
+  import { useFilterStore } from '@/store/modules/filterData';
+  import {
+    Descriptions,
+    Tabs,
+    Select,
+    TabPane,
+    List,
+    Row,
+    Col,
+    Input,
+    Alert,
+  } from 'ant-design-vue';
+  import EntityTable from './entityTable.vue';
+  import ConnectionTable from './connectionTable.vue';
+  import CrossTable from './crossTable.vue';
+  import { infoData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/modelData';
+  import { FormSchema } from '@/components/Form';
+  import { useModal } from '@/components/Modal';
+  import { BranchesOutlined, SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
+  import TurnPhysicalModel from './turnPhysicalModel.vue';
+  import VersionDetailModel from './versionModel.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { workData, workAreaList } from './configData';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { useTable } from '@/components/Table';
+  import { tableListtab1 } from '@/views/auditLog/mock';
+  import { columns, searchFormSchema } from '@/views/auditLog/audi.data';
+  import { workColumn } from '@/views/parameterConfiguration/config.data';
+  import AddParameterModel from './addParameterModel.vue';
+
+  const activeKey = ref('1');
+  const selectId = ref(1);
+  const name = ref(workAreaList[0].name);
+  const key = ref('');
+  function handleChange(item) {
+    selectId.value = item.id;
+    name.value = item.name;
+  }
+  function handleAdd() {
+    openTaskModel(true, {
+      isUpdate: false,
+    });
+  }
+  const [addParameterModel, { openModal: openTaskModel }] = useModal();
+  const [workTable] = useTable({
+    title: '',
+    api: async (params) => {
+      console.log('params', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: workData.length,
+        code: '',
+        message: '',
+        data: workData,
+      };
+      return { ...response };
+    },
+    columns: workColumn,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+  onMounted(() => {});
+</script>
+
+<style scoped>
+  .tab-body {
+    display: flex;
+    margin-top: 20px;
+  }
+  .tab-alert {
+    margin: 1`12  0px 0;
+  }
+</style>