优化任务设计流程

src/views/quest/node/Home.vue

@@ -7,13 +7,36 @@
       <el-button
         style="width: 75%;margin-left: 0;margin-bottom: 5px;"
         @click="returnBack">返回</el-button>
-      <hr>
+      <div>
-      <div v-for="item in nodeTypeList" :key="item.type" class="node" draggable="true" @dragstart="drag($event, item)">
+        <el-divider content-position="left">基础</el-divider>
+        <div v-for="item in nodeTypeList.filter(node => node.partition === 'basis')" :key="item.type" class="node" draggable="true" @dragstart="drag($event, item)">
           <div class="log">
             <img :src="item.logImg" alt="">
           </div>
           <div class="name">{{item.typeName}}</div>
         </div>
+        <el-divider content-position="left">数据输入</el-divider>
+        <div v-for="item in nodeTypeList.filter(node => node.partition === 'req')" :key="item.type" class="node" draggable="true" @dragstart="drag($event, item)">
+          <div class="log">
+            <img :src="item.logImg" alt="">
+          </div>
+          <div class="name">{{item.typeName}}</div>
+        </div>
+        <el-divider content-position="left">数据处理</el-divider>
+        <div v-for="item in nodeTypeList.filter(node => node.partition === 'operation')" :key="item.type" class="node" draggable="true" @dragstart="drag($event, item)">
+          <div class="log">
+            <img :src="item.logImg" alt="">
+          </div>
+          <div class="name">{{item.typeName}}</div>
+        </div>
+        <el-divider content-position="left">数据输出</el-divider>
+        <div v-for="item in nodeTypeList.filter(node => node.partition === 'resp')" :key="item.type" class="node" draggable="true" @dragstart="drag($event, item)">
+          <div class="log">
+            <img :src="item.logImg" alt="">
+          </div>
+          <div class="name">{{item.typeName}}</div>
+        </div>
+      </div>
     </div>
     <div id="flowWrap" ref="flowWrap" class="flow-wrap" @drop="drop($event)" @dragover="allowDrop($event)"
     style="width: 98%;height: 790px;margin-left: 10px;margin-right: 10px;">

src/views/quest/node/components/node-item.vue

@@ -165,6 +165,11 @@ export default {
     },
     // 双击触发-查看配置
     findDisposition() {
+      let type = this.node.type
+      if (type === 'start' || type === 'end'){
+        this.toUpdName()
+        return
+      }
       // 查询节点配置信息
       this.disp.nodeCode = this.node.id
       this.disp.findFlag = true

src/views/quest/node/components/node/dispFind.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 节点配置-->
   <div align="center">
-    <el-drawer :visible.sync="disp.findFlag" direction="rtl" title="配置信息" append-to-body size="60%">
+    <el-dialog :visible.sync="disp.findFlag" direction="rtl" title="配置信息" append-to-body width="60%">
       <div style="padding-left: 20px;padding-right: 20px;">
 
         <span v-if="node.type === 'table'">
@@ -13,10 +13,8 @@
         <span v-else-if="node.type === 'unite'">
           <UniteFind :disp="disp" :data="data" :node="node" />
         </span>
-
-
       </div>
-    </el-drawer>
+    </el-dialog>
   </div>
 </template>
 

src/views/quest/node/components/node/type/exporFind.vue

@@ -1,24 +1,18 @@
 <template>
   <div>
-    <div>
+      <el-form label-position="right" label-width="60px">
-      <span v-if="formDb">
+        <el-form-item label="输入表">
-        输入表信息: <br><br>
           <span v-for="db in formDb">
-          <el-tag type="primary" v-if="db.dbTable">{{ db.dbTable }}</el-tag><br><br>
+            <el-input v-model="db.dbTable" placeholder="无输入表" style="width: 60%;" disabled />
           </span>
-      </span>
+        </el-form-item>
-      <span v-else>无输入表</span>
+        <el-form-item label="输出表">
-      <br><br>
+          <el-input v-model="toDb.dbTable" placeholder="无输出表" style="width: 60%;" disabled />
-      <span v-if="toDb && toDb.dbTable">
+        </el-form-item>
-        输出表信息: <br><br>
+      </el-form>
-        <el-tag type="primary" v-if="toDb.dbTable">{{ toDb.dbTable }}</el-tag>
+    <div>
-        <el-button type="text" @click="checkFields">更改输出表</el-button>
+      <el-button icon="el-icon-refresh-right" type="text" @click="init">刷新</el-button>
-      </span>
+      <el-button icon="el-icon-setting" type="text" @click="checkFields">更改</el-button>
-      <span v-else>
-        无输出表:
-        <el-button type="text" @click="checkFields">选择输出表</el-button>
-      </span>
-      <br><br>
     </div>
     <div align="center">
         <el-table ref="table" :data="formFields" height="450px">
@@ -38,7 +32,7 @@
       <el-button type="primary" @click="disp.findFlag = false">确认</el-button>
     </div>
 
-    <el-dialog title="选择输出表" :visible.sync="checkFieldsFlag" width="60%">
+    <el-dialog title="选择输出表" :visible.sync="checkFieldsFlag" width="60%" :modal="false">
       <div style="padding-left: 10px;padding-right: 10px;">
         <el-form ref="queryForm" :inline="true" :model="queryParams" size="small">
           <el-form-item label="数据库名称" prop="dbName">
@@ -88,7 +82,7 @@
         </div>
       </div>
     </el-dialog>
-    <el-dialog title="选择字段" :visible.sync="checkFieldsMapFlag" width="60%">
+    <el-dialog title="选择字段" :visible.sync="checkFieldsMapFlag" width="60%" :modal="false">
       <div style="padding-left: 10px;padding-right: 10px;">
         <el-table ref="table" :data="formFields" height="500px">
           <el-table-column :show-overflow-tooltip="true" label="字段名称" prop="fieldName" />
@@ -166,6 +160,9 @@ export default {
   methods: {
     // 初始化
     init() {
+      this.formDb = []
+      this.toDb = {}
+      this.formFields = []
       // 查询上级的所有节点
       /** 1.查询该节点的上一级节点*/
       this.data.lineList.forEach(line => {

src/views/quest/node/components/node/type/tableFind.vue

@@ -23,11 +23,11 @@
       <el-button @click="disp.findFlag = false">确认</el-button>
       <el-button type="primary" @click="toTableUpdFlag">修改配置</el-button>
     </div>
-    <el-dialog title="修改配置" :visible.sync="tableUpdFlag" width="80%">
+    <el-dialog title="修改配置" :visible.sync="tableUpdFlag" width="80%" :modal="false">
       <div>
         <el-form v-model="checkTable">
-          <el-form-item label="数据源" prop="dbTable">
+          <el-form-item label="数据来源" prop="dbTable">
-            <el-cascader :options="treeList" :props="props" @change="checkDbTable">
+            <el-cascader :options="treeList" :props="props" @change="checkDbTable" style="width: 60%;">
               <template slot-scope="{ node, data }">
                 <span v-if="data.tableRemark">{{ data.tableName + '[' + data.tableRemark + ']' }}</span>
                 <span v-else>{{ data.tableName }}</span>
@@ -35,7 +35,7 @@
               </template>
             </el-cascader>
           </el-form-item>
-          <el-form-item label="字段" prop="fields">
+          <el-form-item prop="fields">
             <el-table ref="table" :data="fieldsOptions" height="300px"
                       @row-click="clickRow" @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="55" />
@@ -88,8 +88,6 @@ export default {
       tableUpdFlag: false,
       // 数据库+表 树形列表
       treeList: [],
-      // 数据源列表
-      sourceList: [],
       // 级联选择器配置
       props: {
         value: 'tableName',

src/views/quest/node/config/init.js

@@ -3,43 +3,22 @@ const nodeTypeList = [
     type: 'start',
     typeName: '开始',
     nodeName: '开始',
+    partition: 'basis',
     logImg: require('@/assets/svg/1开始.svg'),
     log_bg_color: 'rgba(0, 128, 0, 0.2)'
   },{
     type: 'end',
     typeName: '结束',
     nodeName: '结束',
+    partition: 'basis',
     logImg: require('@/assets/svg/2结束.svg'),
     log_bg_color: 'rgba(255, 0, 0, 0.2)'
-  },{
-    type: 'dataSet',
-    typeName: '文件',
-    nodeName: '文件',
-    logImg: require('@/assets/svg/5文件数据.svg'),
-    log_bg_color: 'rgba(0, 128, 0, 0.2)'
-  },{
-    type: 'encode',
-    typeName: '加密',
-    nodeName: '加密',
-    logImg: require('@/assets/svg/6数据校验.svg'),
-    log_bg_color: 'rgba(163, 117, 233, 0.2)'
-  },{
-    type: 'personService',
-    typeName: '个人服务',
-    nodeName: '个人服务',
-    logImg: require('@/assets/svg/8个人服务.svg'),
-    log_bg_color: 'rgba(132, 166, 251, 0.2)'
-  },{
-    type: 'arrange',
-    typeName: '清洗',
-    nodeName: '清洗',
-    logImg: require('@/assets/svg/15清洗.svg'),
-    log_bg_color: 'rgba(250, 205, 81, 0.2)'
   },
   {
     type: 'table',
     typeName: '表结构',
     nodeName: '表结构',
+    partition: 'req',
     logImg: require('@/assets/svg/5文件数据.svg'),
     log_bg_color: 'rgba(0, 128, 0, 0.2)'
   },
@@ -47,6 +26,7 @@ const nodeTypeList = [
     type: 'unite',
     typeName: '联合查询',
     nodeName: '联合查询',
+    partition: 'operation',
     logImg: require('@/assets/svg/侧边栏测试任务.svg'),
     log_bg_color: 'rgba(0, 128, 0, 0.2)'
   },
@@ -54,6 +34,7 @@ const nodeTypeList = [
     type: 'exportation',
     typeName: '数据输出',
     nodeName: '数据输出',
+    partition: 'resp',
     logImg: require('@/assets/svg/19导出.svg'),
     log_bg_color: 'rgba(0, 128, 0, 0.2)'
   }