update: 更新sql节点功能 + 加全局配置 + 全局databus实现导入导出

src/App.vue

@@ -29,6 +29,7 @@ import { ref, computed, watch } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import logoImg from './assets/images/logo.svg';
import { getSystemConfig } from './api/flow';
const store = useStore();
const route = useRoute();
@@ -88,6 +89,18 @@ function handleChangeCollapse(collapse: any) {
const exposePath = <any>['/flow-module', '/flow-detail'];
// 查询全局配置
function getGlobalConfig() {
  getSystemConfig().then((res) => {
    if (res.resultCode === '0') {
      localStorage.setItem('GLOBAL_CONFIG', JSON.stringify(res.result));
    } else {
      localStorage.setItem('GLOBAL_CONFIG', '{}');
    }
  });
}
getGlobalConfig();
watch(
  route,
  () => {

src/api/flow.ts

@@ -225,3 +225,28 @@ export function getServiceDetail(data: any) {
    data
  });
}
export const otherApi = {
  getSqlList: '/df/ipu/sql/getSqlWithPage',
  downloadTemplate: 'ipu/file/databusTemplate/download',
  getSystemConfig: 'ipu/config/value'
};
// 获取接口详情
export function getSqlServiceList(data: any): Promise<any> {
  return AIotRequest.post({
    url: otherApi.getSqlList,
    data
  });
}
// 模板下载
export function downloadTemplaye() {
  return otherApi.downloadTemplate;
}
// 查询全局配置
export function getSystemConfig() {
  return AIotRequest.get({
    url: otherApi.getSystemConfig
  });
}

src/views/_components/panel/PanelGlobal.vue

@@ -54,15 +54,10 @@
            <el-button @click.stop="viewCustomDetail">查看列表详情</el-button>
            <!-- <el-button @click.stop="downloadModule">模板下载</el-button> -->
          </span>
          <el-upload
            action
            accept=".xlsx, .xls"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="useExcelHooks"
          >
            <el-button type="success">快速创建</el-button>
          </el-upload>
          <el-button type="success" @click.stop="handleClickImport">
            导入导出
          </el-button>
        </div>
      </el-tab-pane>
@@ -82,13 +77,6 @@
      :table-data="table[activeName]?.data"
    >
      <template #custom="scope">
        <!-- <el-icon
          v-if="activeName === 'customAttrs'"
          class="icon"
          @click="editFn(scope.row)"
        >
          <Edit></Edit>
        </el-icon> -->
        <common-icon
          v-if="activeName === 'customAttrs'"
          name="common-bianji"
@@ -131,13 +119,16 @@
      v-if="dialogType === 'viewCustomDetail'"
      :attr-datas="table.customAttrs.data"
    ></custom-detail-list>
    <!-- 上传下载 -->
    <custom-import v-if="dialogType === 'fileImport'"></custom-import>
  </dialog-panel>
</template>
<script setup>
import { computed, reactive, ref, watch } from 'vue';
import XLSX from 'xlsx';
// import XLSX from 'xlsx';
// 模型属性引入
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
@@ -145,6 +136,7 @@ import { useStore } from 'vuex';
import ImportModel from './global/ImportModel.vue';
import CustomDetailList from './global/CustomDetailList.vue';
import CustomDetail from './global/CustomDetail.vue';
import CustomImport from './global/CustomImport.vue';
const activeName = ref('customAttrs');
const route = useRoute();
@@ -256,6 +248,10 @@ const dialog = ref({
  modelAttrImport: {
    title: '模型属性声明',
    name: 'modelAttrs'
  },
  fileImport: {
    title: '属性导入',
    name: 'fileImport'
  }
});
@@ -416,113 +412,10 @@ function customAttrFn() {
  closeDialog();
}
// excel表数据处理
const tableData = ref([]);
function useExcelHooks(e) {
  const result = ref([]);
  // 文件读取
  function readFile(file) {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.readAsBinaryString(file);
      reader.onload = (e) => {
        resolve(e.target.result);
      };
    });
  }
  function parseTableData(data) {
    tableData.value = [];
    if (Array.isArray(data) && data.length) {
      let el = {};
      data.forEach((item) => {
        el = {
          id: item.id,
          isValidate: item.isValidate || '',
          name: item.name || '',
          type: item.type || '',
          validateRules: {
            equal: item.equal || '',
            less: item.less || '',
            max: item.max || '',
            min: item.min || '',
            more: item.more || '',
            nullable: item.nullable || false,
            precision: item.precision || '',
            scale: item.scale || '',
            unequal: item.unequal || ''
          }
        };
        tableData.value.push(el);
      });
    }
  }
  function duplication(data) {
    const set = new Set();
    data.forEach((item) => set.add(item));
    return Array.from(set);
  }
  function unique(arr) {
    const res = new Map();
    return arr.filter(
      (a) =>
        !res.has(a.id) &&
        res.set(a.id, 1) &&
        !res.has(a.name) &&
        res.set(a.name, 1)
    );
  }
  // excel转json
  function excelToJson() {
    const file = e.raw;
    readFile(file)
      .then((data) => {
        const workbook = XLSX.read(data, { type: 'binary' }); // 解析二进制格式数据
        console.log(workbook);
        const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // 获取第一个Sheet
        console.log(worksheet);
        result.value = XLSX.utils.sheet_to_json(worksheet); // json数据格式
        parseTableData(result.value);
        console.log(result.value);
      })
      .finally(() => {
        table.value[activeName.value].data = unique([
          ...table.value[activeName.value].data,
          ...tableData.value
        ]);
      });
  }
  excelToJson();
function handleClickImport() {
  isShowPanel.value = true;
  dialogType.value = 'fileImport';
}
// 模板下载
// function downloadModule() {
//   const title = '自定义属性模板.xlsx';
//   const headers = [
//     [
//       'id',
//       'name',
//       'type',
//       'isValidate',
//       'equal',
//       'less',
//       'max',
//       'min',
//       'more',
//       'nullable',
//       'precision',
//       'scale',
//       'unequal'
//     ],
//     ['', '', '', '', '', '', '', '', '', '', '', '', '']
//   ];
//   const worksheet = XLSX.utils.aoa_to_sheet(headers);
//   const workbook = XLSX.utils.book_new();
//   XLSX.utils.book_append_sheet(workbook, worksheet, '自定义属性模板');
//   XLSX.writeFile(workbook, title, { type: 'file' });
// }
</script>
<script>

src/views/_components/panel/global/CustomImport.vue

@@ -0,0 +1,135 @@
<template>
  <div class="demo">
    <div class="form-item">
      <div class="form-title">
        <h5>模板下载:</h5>
      </div>
      <span class="download" @click.stop="downTemplate">global_template</span>
    </div>
    <div class="form-item">
      <div class="form-title">
        <h5>文件导入:</h5>
      </div>
      <el-upload
        size="small"
        action
        accept=".xlsx, .xls"
        :auto-upload="false"
        :show-file-list="false"
        :on-change="useExcelHooks"
      >
        <el-button type="success">文件导入</el-button>
      </el-upload>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import XLSX from 'xlsx';
import { downloadTemplaye } from '../../../../api/flow';
function downTemplate() {
  window.open(downloadTemplaye());
}
// excel表数据处理
const tableData = ref([]);
function useExcelHooks(e: any) {
  const result = ref([]);
  // 文件读取
  function readFile(file: any) {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.readAsBinaryString(file);
      reader.onload = (e) => {
        resolve(e.target.result);
      };
    });
  }
  function parseTableData(data: any) {
    tableData.value = [];
    if (Array.isArray(data) && data.length) {
      let el = {};
      data.forEach((item) => {
        el = {
          id: item.id,
          isValidate: item.isValidate || '',
          name: item.name || '',
          type: item.type || '',
          validateRules: {
            equal: item.equal || '',
            less: item.less || '',
            max: item.max || '',
            min: item.min || '',
            more: item.more || '',
            nullable: item.nullable || false,
            precision: item.precision || '',
            scale: item.scale || '',
            unequal: item.unequal || ''
          }
        };
        tableData.value.push(el);
      });
    }
  }
  // function unique(arr: any) {
  //   const res = new Map();
  //   return arr.filter(
  //     (a: any) =>
  //       !res.has(a.id) &&
  //       res.set(a.id, 1) &&
  //       !res.has(a.name) &&
  //       res.set(a.name, 1)
  //   );
  // }
  // excel转json
  function excelToJson() {
    const file = e.raw;
    readFile(file)
      .then((data) => {
        const workbook = XLSX.read(data, { type: 'binary' }); // 解析二进制格式数据
        console.log(workbook);
        const worksheet = workbook.Sheets[workbook.SheetNames[0]]; // 获取第一个Sheet
        console.log(worksheet);
        result.value = XLSX.utils.sheet_to_json(worksheet); // json数据格式
        parseTableData(result.value);
        console.log(result.value);
      })
      .finally(() => {
        // props.table[props.activeName].data = unique([
        //   ...props.table[props.activeName].data,
        //   ...tableData.value
        // ]);
        return tableData.value;
      });
  }
  excelToJson();
}
defineExpose({
  tableData
});
</script>
<style scoped lang="scss">
.form-item {
  display: flex;
  align-items: center;
  .form-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 20px;
    h5 {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
  .download {
    text-decoration: underline;
  }
}
</style>

src/views/_components/right-panel/PanelSql.vue

@@ -5,12 +5,34 @@
        <!-- 功能 -->
        <panel-node-function>
          <template #function-basic>
            <div v-if="isSelectSql" class="form-item">
              <div class="form-title">
                <h5>SQL方法</h5>
              </div>
              <el-radio-group v-model="inputMethod" class="ml-4">
                <el-radio label="input" size="large">手动输入</el-radio>
                <el-radio label="select" size="large">对接SQL服务</el-radio>
              </el-radio-group>
            </div>
            <div v-if="inputMethod === 'select'" class="form-item">
              <div class="form-title">
                <h5>SQL选择</h5>
              </div>
              <common-select
                v-model="functionData.checkedId"
                :options="sqlList"
                :props-map="sqlPropsMap"
                @change="handleChange"
              ></common-select>
            </div>
            <div class="form-item">
              <div class="form-title">
                <h5>数据源</h5>
              </div>
              <common-select
                v-model="functionData.datasource"
                :disabled="inputMethod === 'select'"
                class="int-select"
                :props-map="propsMap"
                :options="datasources"
@@ -19,7 +41,11 @@
            <div class="form-item">
              <div class="form-title">
                <h5>SQL脚本</h5>
                <el-button type="success" @click.stop="sqlEditor">
                <el-button
                  type="success"
                  :disabled="inputMethod === 'select'"
                  @click.stop="sqlEditor"
                >
                  脚本编辑器
                </el-button>
              </div>
@@ -30,6 +56,8 @@
              ></el-input>
            </div>
          </template>
          <template #function-senior></template>
        </panel-node-function>
      </template>
    </panel-node-layout>
@@ -54,11 +82,14 @@
<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, watch } from 'vue';
import { getSqlList } from '../../../api/flow';
import { getSqlList, getSqlServiceList } from '../../../api/flow';
import PanelNodeLayout from './_components/PanelNodeLayout.vue';
import PanelNodeFunction from './_components/PanelNodeFunction.vue';
import MyCode from '../_codemirror/MyCode.vue';
const globalConfig = JSON.parse(localStorage.getItem('GLOBAL_CONFIG'));
console.log(globalConfig);
const { proxy } = getCurrentInstance();
const props = defineProps({
  targetNode: {
@@ -69,6 +100,8 @@ const props = defineProps({
const datasources = ref<any>([]);
const inputMethod = ref<any>('input');
const attributes = ref({
  type: 'textarea',
  autosize: { minRows: 20, maxRows: 50 }
@@ -79,7 +112,8 @@ const nodePanelData = <any>props.targetNode.cell.getData()?.attrsData || null;
const functionData = ref<any>(
  nodePanelData?.function || {
    datasource: '',
    sql: ''
    sql: '',
    checkedId: ''
  }
);
@@ -87,8 +121,8 @@ const functionData = ref<any>(
function getList() {
  getSqlList()
    .then((res) => {
      if (res.data.resultCode === '0') {
        datasources.value = res.data.result.map((item: any) => {
      if (res.resultCode === '0') {
        datasources.value = res.result.map((item: any) => {
          item.sqlConn = `business_${item?.id || ''}`;
          item.showName = `${item.code}-${item.name}-${item.ip || ''}${
            item.port || ''
@@ -97,7 +131,7 @@ function getList() {
        });
      } else {
        datasources.value = [];
        proxy.$message.error(res.data.resultMsg);
        proxy.$message.error(res.resultMsg);
      }
    })
    .catch((err) => {
@@ -113,7 +147,7 @@ const tabList = ref<any>([
  { name: 'output', label: '输出' }
]);
const propsMap = ref({
const propsMap = ref<any>({
  value: 'sqlConn',
  label: 'showName'
});
@@ -162,6 +196,44 @@ function setNodeAttrData() {
  );
}
// 对接sql服务
const sqlList = ref<any>([]);
const isSelectSql = ref<any>(
  globalConfig?.dependenceSqlmgmtUsed === 'true' ||
    globalConfig?.dependenceSqlmgmtUsed === true
);
const sqlPropsMap = ref<any>({
  label: 'name',
  value: 'id'
});
function getSQLList() {
  const params = <any>{
    name: '',
    pageNumber: 1,
    pageSize: 1000
  };
  getSqlServiceList(params).then((res) => {
    console.log(res);
    if (res.resultCode === '0') {
      sqlList.value = res.result;
    } else {
      sqlList.value = [];
    }
  });
}
if (isSelectSql.value) {
  getSQLList();
} else {
  inputMethod.value = 'input';
}
// sql选择
function handleChange(val: any) {
  const selectedItem = sqlList.value.filter((item: any) => item.id === val)[0];
  functionData.value.datasource = selectedItem?.databaseCode || '';
  functionData.value.sql = selectedItem?.sql || '';
}
watch(
  functionData,
  () => {

src/views/_components/right-panel/_components/PanelNodeLayout.vue

@@ -23,7 +23,30 @@
        </el-collapse-item>
      </el-collapse>
    </template>
    <template v-if="layType === 'tabs'"></template>
    <template v-if="layType === 'tabs'">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基础" name="basic">
          <panel-node-basic :target-node="targetNode"></panel-node-basic>
        </el-tab-pane>
        <el-tab-pane
          v-for="tab in tabList"
          :key="tab.name"
          :label="tab.label"
          :name="tab.name"
        >
          <template v-if="tab.name === 'input' || tab.name === 'output'">
            <PanelNodeIO
              :target-node="targetNode"
              :input-type="tab.name"
            ></PanelNodeIO>
          </template>
          <template v-else>
            <slot :name="tab.name"></slot>
          </template>
        </el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>
@@ -39,7 +62,7 @@ defineProps({
  },
  layType: {
    type: String,
    default: () => 'collapse'
    default: () => 'tabs'
  },
  tabList: {
    type: Array<any>,

vite.config.ts

@@ -119,6 +119,11 @@ export default defineConfig(({ mode }) => {
          target: 'http://8.130.24.19:8106',
          changOrigin: true,
          rewrite: path => path.replace(/^\/logic/, '/')
        },
        '^/df': {
          target: 'http://8.130.24.19:8082',
          changOrigin: true,
          rewrite: path => path.replace(/^\/df/, '/df')
        }
      }
    }