Merge branch 'master' of https://gitea.qinmian.online/2112A-ONE/cloud-ui

package.json

@@ -39,36 +39,40 @@
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
+    "codemirror": "^5.65.12",
     "core-js": "3.25.3",
     "echarts": "5.4.0",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "jquery": "^3.5.1",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
     "jsplumb": "^2.15.6",
     "nprogress": "0.2.0",
+    "panzoom": "^9.4.1",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
+    "view-design": "^4.5.0-beta.3",
     "vue": "2.6.12",
+    "vue-click-outside": "^1.1.0",
+    "vue-codemirror": "^4.0.6",
+    "vue-contextmenujs": "^1.3.13",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
-    "vuedraggable": "2.24.3",
-    "jquery": "^3.5.1",
-    "panzoom": "^9.4.1",
-    "view-design": "^4.5.0-beta.3",
-    "vue-click-outside": "^1.1.0",
-    "vue-contextmenujs": "^1.3.13",
     "vue-router": "^3.2.0",
+    "vuedraggable": "2.24.3",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",
     "@vue/cli-plugin-eslint": "4.4.6",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "4.4.6",
     "babel-eslint": "10.1.0",
     "babel-plugin-dynamic-import-node": "2.3.3",
@@ -77,17 +81,15 @@
     "connect": "3.6.6",
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
     "lint-staged": "10.5.3",
     "runjs": "4.4.2",
     "sass": "1.32.13",
     "sass-loader": "10.1.1",
     "script-ext-html-webpack-plugin": "2.1.5",
     "svg-sprite-loader": "5.1.1",
-    "vue-template-compiler": "2.6.12",
+    "vue-template-compiler": "2.6.12"
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "less": "^3.0.4",
-    "less-loader": "^5.0.0"
   },
   "engines": {
     "node": ">=8.9",

src/api/quest/node.js

@@ -5,6 +5,7 @@ export function listNode(query) {
   return request({
     url: '/quest/node/list',
     method: 'get',
+    async: false,
     params: query
   })
 }
@@ -36,9 +37,26 @@ export function updateNode(data) {
 }
 
 // 删除节点管理
-export function delNode(id, taskCode) {
+export function delNodeByIds(ids) {
   return request({
-    url: '/quest/node/' + id + '/' + taskCode,
+    url: '/quest/node/' + ids,
     method: 'delete'
   })
 }
+
+// 删除节点管理
+export function delNodeByTaskCodeAndNodeCodes(taskCode,nodeCodes) {
+  return request({
+    url: '/quest/node/' + taskCode + '/' + nodeCodes,
+    method: 'delete'
+  })
+}
+
+// 批量删除新增节点管理
+export function batch(data,taskCode) {
+  return request({
+    url: '/quest/node/batch/'+taskCode,
+    method: 'post',
+    data: data
+  })
+}

src/api/quest/param.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询节点参数列表
+export function listParam(query) {
+  return request({
+    url: '/quest/param/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询节点参数详细
+export function getParam(id) {
+  return request({
+    url: '/quest/param/' + id,
+    method: 'get'
+  })
+}
+
+// 新增节点参数
+export function addParam(data) {
+  return request({
+    url: '/quest/param',
+    method: 'post',
+    data: data
+  })
+}
+
+// 批量新增
+export function batchAdd(data) {
+  return request({
+    url: '/quest/param/batchAdd',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改节点参数
+export function updateParam(data) {
+  return request({
+    url: '/quest/param',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除节点参数
+export function delParam(id) {
+  return request({
+    url: '/quest/param/' + id,
+    method: 'delete'
+  })
+}

src/api/rule/ruleEdition.js

@@ -0,0 +1,69 @@
+import request from '@/utils/request'
+
+// // 查询规则列表
+// export function listRule(query) {
+//   return request({
+//     url: '/rule/rule/list',
+//     method: 'post',
+//     params: query
+//   })
+// }
+
+// 查询规则详细
+export function getEditionList(id) {
+  return request({
+    url: '/rule/ruleEdition/findById/' + id,
+    method: 'get'
+  })
+}
+
+// 查询规则详细
+export function getFindByEditionId(id) {
+  return request({
+    url: '/rule/ruleEdition/findByEditionId/' + id,
+    method: 'get'
+  })
+}
+// 新增规则
+export function addRule(data) {
+  return request({
+    url: '/rule/ruleEdition/insert',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改规则
+export function updateRule(data) {
+  return request({
+    url: '/rule/ruleEdition/update',
+    method: 'put',
+    data: data
+  })
+}
+//
+//
+// // 删除规则
+// export function delRule(id) {
+//   return request({
+//     url: '/rule/rule/delete/' + id,
+//     method: 'delete'
+//   })
+// }
+
+//通过id启用客户
+export function enable(id) {
+  return request({
+    url: `/rule/ruleEdition/enable/${id}`,
+  })
+}
+
+//通过id禁用客户
+export function disable(id) {
+  return request({
+    url: `/rule/ruleEdition/disable/${id}`,
+  })
+}
+
+
+

src/api/tool/gen.js

@@ -18,6 +18,14 @@ export function listDbTable(query) {
   })
 }
 
+// 查询db所有数据库列表
+export function listDbTableAll() {
+  return request({
+    url: '/code/gen/db/listAll',
+    method: 'get'
+  })
+}
+
 // 查询表详细信息
 export function getGenTable(tableId) {
   return request({
@@ -80,9 +88,21 @@ export function synchDb(tableName,dbName) {
 }
 
 // 查询所有数据库名称
-export function selDbNameAll(tableName) {
+export function selDbNameAll() {
   return request({
     url: '/code/gen/selDbNameAll',
     method: 'get'
   })
 }
+
+// 根据数据库名称与表名称查询表字段
+export function selectDbTableColumnsByName(dbName,table) {
+  return request({
+    url: '/code/gen/selectDbTableColumnsByName',
+    method: 'get',
+    params: {
+      dbName: dbName,
+      table: table
+    }
+  })
+}

src/layout/components/Navbar.vue

@@ -39,7 +39,7 @@
         </el-dropdown-menu>
       </el-dropdown>
 
-      <el-drawer title="通知公告" :visible.sync="drawer" direction="rtl" :size="'60%'">
+      <el-drawer title="通知公告" :visible.sync="drawer" direction="rtl" :size="'60%'" :modal="false">
         <el-radio-group v-model="readingStatu" size="small">
           <el-radio-button label="">全部</el-radio-button>
           <el-radio-button label="1">已读</el-radio-button>
@@ -104,6 +104,7 @@
           </el-descriptions>
         </div>
         <el-dialog
+          :modal="false"
           title="提示"
           :visible.sync="findNoticeFilg"
           width="50%">

src/main.js

@@ -40,7 +40,11 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
+//codemirror
+import VueCodemirror from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
 
+Vue.use(VueCodemirror)
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey

src/views/quest/node/Home.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="flow_region">
-    <div class="nodes-wrap">
+    <div class="nodes-wrap" align="center">
+      <el-button
+        style="width: 75%;margin-top: 5px;margin-bottom: 5px;"
+        type="primary" @click="save">保存修改</el-button>
+      <el-button
+        style="width: 75%;margin-left: 0;margin-bottom: 5px;"
+        @click="returnBack">返回</el-button>
+      <hr>
       <div v-for="item in nodeTypeList" :key="item.type" class="node" draggable="true" @dragstart="drag($event, item)">
         <div class="log">
           <img :src="item.logImg" alt="">
@@ -11,21 +18,26 @@
     <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;">
       <div id="flow">
-        <div v-show="auxiliaryLine.isShowXLine" class="auxiliary-line-x" :style="{width: auxiliaryLinePos.width, top:auxiliaryLinePos.y + 'px', left: auxiliaryLinePos.offsetX + 'px'}"></div>
+        <div v-show="auxiliaryLine.isShowXLine" class="auxiliary-line-x" :style="{width: auxiliaryLinePos.width, top:auxiliaryLinePos.y + 'px', left: auxiliaryLinePos.offsetX + 'px'}" />
-        <div v-show="auxiliaryLine.isShowYLine" class="auxiliary-line-y" :style="{height: auxiliaryLinePos.height, left:auxiliaryLinePos.x + 'px', top: auxiliaryLinePos.offsetY + 'px'}"></div>
+        <div v-show="auxiliaryLine.isShowYLine" class="auxiliary-line-y" :style="{height: auxiliaryLinePos.height, left:auxiliaryLinePos.x + 'px', top: auxiliaryLinePos.offsetY + 'px'}" />
-        <flowNode v-for="item in data.nodeList" :id="item.id" :key="item.id" :node="item" @setNodeName="setNodeName" @deleteNode = "deleteNode" @changeLineState="changeLineState"></flowNode>
+        <flowNode v-for="item in data.nodeList" :id="item.id" :key="item.id" :node="item" @setNodeName="setNodeName" @deleteNode = "deleteNode" @changeLineState="changeLineState" />
       </div>
     </div>
+
   </div>
 </template>
 
 <script>
 import {jsPlumb} from "jsplumb"
 import {nodeTypeList} from './config/init'
-import { jsplumbSetting, jsplumbConnectOptions, jsplumbSourceOptions, jsplumbTargetOptions } from './config/commonConfig'
+import {jsplumbConnectOptions, jsplumbSetting, jsplumbSourceOptions, jsplumbTargetOptions} from './config/commonConfig'
-import methods from "./config/methods"
+// import data from "./config/data.json"
-import data from './config/data.json'
 import flowNode from "./components/node-item"
+import {batch, listNode} from "../../../api/quest/node";
+import {GenNonDuplicateID} from "../../../common/until";
+import panzoom from "panzoom";
+import methods from "./config/methods";
+
 export default {
   name: "FlowEdit",
   components: {
@@ -41,6 +53,10 @@ export default {
         nodeList:[],
         lineList:[]
       },
+      checkData: {
+        nodeList:[],
+        lineList:[]
+      },
       selectedList: [],
       jsplumbSetting: jsplumbSetting,
       jsplumbConnectOptions: jsplumbConnectOptions,
@@ -57,42 +73,124 @@ export default {
         top: 0,
         height: 0,
         width: 0
-      }
+      },
+      taskCode: this.$route.query.taskCode,
+      flag: true
     };
   },
   mounted() {
+    this.getList(); //参数查询方法
     this.jsPlumb = jsPlumb.getInstance();
-    this.initNodeTypeObj()
-    this.initNode()
     this.fixNodesPosition()
     this.$nextTick(() => {
-      this.init();
+      setTimeout(() => {
+        this.init()
+      },1000)
     });
   },
   methods: {
     ...methods,
-    initNodeTypeObj() {
+    // 查询数据库节点信息并整合成jsPlumb格式
-      nodeTypeList.map(v => {
-        this.nodeTypeObj[v.type] = v
-      })
-    },
-    initNode() {
-      this.data.lineList = data.lineList
-      data.nodeList.map(v => {
-        v.logImg = this.nodeTypeObj[v.type].logImg
-        v.log_bg_color = this.nodeTypeObj[v.type].log_bg_color
-        this.data.nodeList.push(v)
-      })
-    },
     getList() {
-      console.log(data)
+      listNode({taskCode: this.taskCode}).then(res => {
+        const rows = res.data.rows
+        for (let i = 0; i < rows.length; i++) {
+          const r = flowNode.methods.toJsPlumbNode(rows[i])
+          this.data.nodeList.push({
+            id: r.node.id,
+            type: r.node.type,
+            typeName: r.node.typeName,
+            nodeName: r.node.nodeName,
+            top: r.node.top,
+            left: r.node.left
+          })
+          if (r.line) {
+            r.line.forEach(v => {
+              this.data.lineList.push({
+                from: v.from,
+                to: v.to,
+                label: "连线名称",
+                id: GenNonDuplicateID(8),
+                Remark: ""
+              });
+            })
           }
+        }
+        this.data.nodeList.forEach(node => {
+          nodeTypeList.forEach(v => {
+            if (node.type === v.type) {
+              node.typeName = v.typeName
+              node.logImg = v.logImg
+              node.log_bg_color = v.log_bg_color
+            }
+          })
+        })
+      })
+      this.flag = true
     },
-  created() {
+    // 保存修改按钮
-    this.getList();
+    save() {
+      // 1. 获取所有节点与连线信息
+      const nodeList = this.data.nodeList
+      const lineList = this.data.lineList
+      console.log(this.data)
+      // 2. 处理所有信息,将jsPlumb类型 ==> 数据表类型
+      const nodeData = []
+      nodeList.forEach(node => {
+        let preLine = ''
+        let nextLine = ''
+        lineList.forEach(line => {
+          // 如果节点的id是起点
+          if (node.id === line.from){
+            // 给下一节点标识赋值
+            nextLine = line.to
+          }
+          // 如果节点id是终点
+          if (node.id === line.to){
+            // 给上一节点标识赋值
+            preLine = line.from
+          }
+        })
+        nodeData.push(flowNode.methods.toMysqlNode(node,preLine,nextLine,this.taskCode))
+      })
+      // 3. 激活接口将参数传递到后端
+      batch(nodeData,this.$route.query.taskCode).then(res => {
+        this.$message.success(res.msg)
+        this.flag = true
+      })
+      console.log(nodeData)
+    },
+    returnBack() {
+      if (this.flag){
+        this.$router.push({path: '/quest/task'})
+      }else{
+        this.checkReturn()
+      }
+
+    },
+    checkReturn() {
+      this.$confirm('更改未保存,是否保存?', '未保存提示', {
+        confirmButtonText: '保存',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.save()
+      }).catch(() => {
+        this.$message({
+          type: 'success',
+          message: '返回成功'
+        });
+      });
+      this.$router.push({path: '/quest/task'})
+    },
+    // 修改状态更新
+    checkFlag(){
+      this.flag = false
+    }
   }
 };
 </script>
+
 <style lang="less" scoped>
 .flow_region {
   display: flex;
@@ -141,12 +239,12 @@ export default {
       .auxiliary-line-x {
         position: absolute;
         border: .5px dashed #2ab1e8;
-        z-index: 9999;
+        z-index: 998;
       }
       .auxiliary-line-y {
         position: absolute;
         border: .5px dashed #2ab1e8;
-        z-index: 9999;
+        z-index: 998;
       }
     }
   }
@@ -155,7 +253,7 @@ export default {
 
 <style lang="less">
 .jtk-connector.active{
-  z-index: 9999;
+  z-index: 998;
   path {
     stroke: #150042;
     stroke-width: 1.5;

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

@@ -6,7 +6,7 @@
        @click="setActive"
        @mouseenter="showAnchor"
        @mouseleave="hideAnchor"
-    @dblclick.prevent="editNode"
+       @dblclick.prevent="findDisposition()"
        @contextmenu.prevent="onContextmenu">
     <div class="log-wrap">
       <img :src="node.logImg" alt="">
@@ -17,11 +17,98 @@
     <div class="node-anchor anchor-right" v-show="mouseEnter"></div>
     <div class="node-anchor anchor-bottom" v-show="mouseEnter"></div>
     <div class="node-anchor anchor-left" v-show="mouseEnter"></div>
+    <!-- 节点配置-->
+    <div align="center">
+      <el-drawer
+        :visible.sync="disposition.findFlag"
+        direction="rtl"
+        title="配置信息"
+        append-to-body
+        size="60%">
+        <div style="padding-left: 10px;padding-right: 10px;">
+          <h5>数据库:&nbsp;&nbsp;{{ disposition.formData.dbName }}</h5>
+          <br>
+          <h5>数据表:&nbsp;&nbsp;{{ disposition.formData.table }}</h5>
+          <span>
+          <el-table ref="table" :data="disposition.formData.fields" height="300px">
+            <el-table-column :show-overflow-tooltip="true" label="字段名称" prop="columnName" />
+            <el-table-column :show-overflow-tooltip="true" label="字段描述" prop="columnComment" />
+            <el-table-column :show-overflow-tooltip="true" label="字段类型" prop="columnType" />
+          </el-table>
+        </span>
+          <br><br>
+          <div align="center">
+            <el-button @click="disposition.findFlag = false">确认</el-button>
+            <el-button type="primary" @click="editDisposition">修改配置</el-button>
+          </div>
+        </div>
+      </el-drawer>
+      <!-- 自定义表单对话框 -->
+      <el-drawer
+        :modal="false"
+        :visible.sync="disposition.updFlag"
+        direction="rtl"
+        title="节点配置"
+        append-to-body
+        size="60%">
+        <div style="padding-left: 10px;padding-right: 10px;">
+          <el-form ref="queryForm" :inline="true" :model="queryParams" size="small">
+            <el-form-item label="数据库名称" prop="dbName">
+              <el-select v-model="queryParams.dbName" placeholder="请选择数据库" clearable @change="handleQuery">
+                <el-option v-for="item in dbNameOptions" :key="item" :label="item" :value="item"/>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="表名称" prop="tableName">
+              <el-input
+                v-model="queryParams.tableName"
+                clearable
+                @change="handleQuery"
+                placeholder="请输入表名称" />
+            </el-form-item>
+            <el-form-item label="表描述" prop="tableComment">
+              <el-input
+                v-model="queryParams.tableComment"
+                clearable
+                @change="handleQuery"
+                placeholder="请输入表描述" />
+            </el-form-item>
+            <el-form-item>
+              <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">查找</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+          <el-table ref="table" :data="tableOptions" height="300px">
+            <el-table-column :show-overflow-tooltip="true" label="表名称" prop="tableName" />
+            <el-table-column :show-overflow-tooltip="true" label="表描述" prop="tableComment" />
+            <el-table-column label="操作" width="50px">
+              <template slot-scope="scope">
+                <el-button type="text" @click="selectTable(scope.row)">选择</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <el-divider content-position="left">选择字段 v</el-divider>
+        <el-table ref="table" v-show="fieldsOptions" :data="fieldsOptions" height="300px"
+                  @row-click="clickRow" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" />
+          <el-table-column :show-overflow-tooltip="true" label="字段名称" prop="columnName" />
+          <el-table-column :show-overflow-tooltip="true" label="字段描述" prop="columnComment" />
+          <el-table-column :show-overflow-tooltip="true" label="字段类型" prop="columnType" />
+        </el-table>
+        <el-divider />
+        <div align="center">
+          <el-button type="primary" @click="saveDisposition">确 定</el-button>
+          <el-button @click="disposition.updFlag = false">取 消</el-button>
+        </div>
+      </el-drawer>
+    </div>
   </div>
 </template>
 
 <script>
 import ClickOutside from 'vue-click-outside'
+import Home from '../Home.vue'
+import {listDbTableAll, selDbNameAll, selectDbTableColumnsByName} from "../../../../api/tool/gen";
 export default {
   name: "nodeItem",
   props: {
@@ -45,7 +132,33 @@ export default {
     return {
       mouseEnter: false,
       isActive: false,
-      isSelected: false
+      isSelected: false,
+      disposition: {
+        findFlag: false,
+        updFlag: false,
+        formData: {
+          nodeId: undefined,
+          dbName: undefined,
+          table: {},
+          fields: []
+        }
+      },
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        dbName: undefined,
+        tableName: undefined,
+        tableComment: undefined
+      },
+      // 数据库列表
+      dbNameOptions: [],
+      // 展示数据表列表
+      tableOptions: [],
+      // 所有数据库列表
+      tableList: [],
+      // 字段列表
+      fieldsOptions: []
     };
   },
   methods: {
@@ -57,14 +170,30 @@ export default {
     },
     onContextmenu() {
       this.$contextmenu({
-        items: [{
+        items: [
-          label: '删除',
+          {
+            label: '修改名称',
+            disabled: false,
+            icon: "",
+            onClick: () => {
+              this.toUpdName();
+            }
+          },{
+            label: '设置配置',
+            disabled: false,
+            icon: "",
+            onClick: () => {
+              this.disposition.updFlag = true;
+            }
+          },{
+            label: '删除节点',
             disabled: false,
             icon: "",
             onClick: () => {
               this.deleteNode()
             }
-        }],
+          }
+        ],
         event,
         customClass: 'custom-class',
         zIndex: 9999,
@@ -92,30 +221,203 @@ export default {
       this.$emit("changeLineState", this.node.id, false)
       this.isActive = false
     },
-    editNode() {
+    // 修改名称
-      this.newNodeName = this.node.nodeName
+    toUpdName() {
-      this.$Modal.confirm({
+      this.$prompt('请输入新名称', '更改名称', {
-        render: (h) => {
+        confirmButtonText: '确定',
-          return h('Input', {
+        cancelButtonText: '取消'
-            props: {
+      }).then(({ value }) => {
-              value: this.newNodeName,
+        this.$emit('setNodeName', this.node.id, value)
-              autofocus: true
+        this.$message({
-            },
+          type: 'success',
-            on: {
+          message: '修改成功'
-              input: (val) => {
+        });
-                this.newNodeName = val;
+        this.$emit("checkFlag")
-              }
+      }).catch(() => {
-            }
+        this.$message({
-          })
+          type: 'info',
-        },
+          message: '操作取消'
-        onOk: () => {
+        });
-          console.log(this.newNodeName)
+      });
-          this.$emit('setNodeName', this.node.id, this.newNodeName)
-        }
-      })
     },
+    // 选择删除节点
     deleteNode() {
+      this.$confirm('确认删除该节点吗?', '删除提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
         this.$emit("deleteNode", this.node)
+        this.$message({
+          type: 'success',
+          message: '删除成功'
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '操作取消'
+        });
+      });
+    },
+    /** jsPlumb节点类型 --> 数据库节点类型 */
+    toMysqlNode(node,preLine,nextLine,taskCode){
+      return {
+        nodeType: node.type,
+        taskCode: taskCode,
+        nodeCode: node.id,
+        nodeName: node.nodeName,
+        nodePositionTop: node.top,
+        nodePositionLeft: node.left,
+        nodePreCode: preLine,
+        nodeNextCode: nextLine,
+        state: 'Y'
+      }
+    },
+    /** 数据库节点类型 --> jsPlumb节点类型 */
+    toJsPlumbNode(nodeInfo){
+      const node = {
+        id: nodeInfo.nodeCode,
+        type: nodeInfo.nodeType,
+        nodeName: nodeInfo.nodeName,
+        top: nodeInfo.nodePositionTop,
+        left: nodeInfo.nodePositionLeft
+      }
+      const line = []
+      // 节点有后继节点
+      if (nodeInfo.nodeNextCode){
+        const nextLine = {
+          from: nodeInfo.nodeCode,
+          to: nodeInfo.nodeNextCode
+        }
+        line.push(nextLine)
+      }
+      // 节点有前驱节点
+      if (nodeInfo.nodePreCode){
+        const perLine = {
+          from: nodeInfo.nodePreCode,
+          to: nodeInfo.nodeCode
+        }
+        line.push(perLine)
+      }
+      return {
+        node: node,
+        line: line
+      }
+    },
+    // 双击触发-查看配置
+    findDisposition() {
+      // 查询节点配置信息
+      this.disposition.formData.nodeId = this.node.id
+      this.disposition.findFlag = true
+    },
+    // 编辑配置
+    editDisposition() {
+      this.selDbNameList()
+      this.getListAll()
+      this.disposition.updFlag = true
+    },
+    // 查询所有数据库名称
+    selDbNameList() {
+      selDbNameAll().then(res => {
+        this.dbNameOptions = res.data
+      })
+    },
+    // 查询表字段
+    getFields(dbName, tableName) {
+      selectDbTableColumnsByName(dbName, tableName).then(res => {
+        this.fieldsOptions = res.data
+      })
+    },
+    // 保存配置按钮
+    saveDisposition() {
+      const dispositionData = this.disposition.formData
+      const addData = []
+      /**
+       * {
+       *   key: '',
+       *   name: '',
+       *   type: ''
+       *   value: ''
+       * }
+       */
+      // // 处理数据库信息
+      // addData.push({
+      //   nodeCode: dispositionData.nodeId,
+      //   atom: {
+      //     key: 'dbName',
+      //     name: '数据库名称',
+      //     type: 'String',
+      //     value: dispositionData.dbName
+      //   }
+      // })
+      // // 处理数据表信息
+      // addData.push({
+      //   nodeCode: dispositionData.nodeId,
+      //   atom: {
+      //     key: 'typeName',
+      //     name: '数据表名称',
+      //     type: 'String',
+      //     value: dispositionData.dbName
+      //   }
+      // })
+      // addData.push({
+      //   key: dispositionData.nodeId,
+      //   name: '数据表名称',
+      //   type: 'String',
+      //   value: dispositionData.table
+      // })
+      // // 处理数据字段信息
+      //   addData.push({
+      //     nodeInfoCode: dispositionData.nodeId,
+      //     nodeType: 'fields',
+      //     nodeValue: dispositionData.fields
+      // })
+      // console.log(addData)
+      this.disposition.updFlag = false
+      this.disposition.findFlag = false
+
+    },
+    getListAll() {
+      listDbTableAll().then(res => {
+        this.tableList = res.data;
+        this.tableOptions = res.data;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.tableOptions = []
+      this.tableList.forEach(table => {
+        const params = this.queryParams
+        if ((table.dbName === params.dbName || !params.dbName) &&
+          (table.tableName.includes(params.tableName) || !params.tableName) &&
+          (table.tableComment.includes(params.tableComment) || !params.tableComment)){
+          this.tableOptions.push(table)
+        }
+      })
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 选择表信息*/
+    selectTable(row) {
+      this.disposition.formData.table = row.tableName
+      this.disposition.formData.dbName = row.dbName
+      this.getFields(row.dbName, row.tableName)
+    },
+    clickRow(row) {
+      this.$refs.table.toggleRowSelection(row);
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.disposition.formData.fields = selection.map(item => {
+        return {
+          fieldName: item.columnName,
+          fieldType: item.columnType,
+          fieldComment: item.columnComment
+        };
+      });
     },
   }
 };
@@ -125,6 +427,10 @@ export default {
 @labelColor: #409eff;
 @nodeSize: 20px;
 @viewSize: 10px;
+.v-modal {
+  width: 50%;
+  display: none !important;
+}
 .node-item {
   position: absolute;
   display: flex;
@@ -136,9 +442,9 @@ export default {
   border-radius: 4px;
   cursor: move;
   box-sizing: content-box;
-  z-index: 9995;
+  z-index: 996;
   &:hover {
-    z-index: 9998;
+    z-index: 997;
     .delete-btn{
       display: block;
     }
@@ -164,7 +470,7 @@ export default {
     justify-content: center;
     border-radius: 10px;
     cursor: crosshair;
-    z-index: 9999;
+    z-index: 998;
     background: -webkit-radial-gradient(sandybrown 10%, white 30%, #9a54ff 60%);
   }
   .anchor-top{

src/views/quest/node/config/data.json

@@ -1,4 +1,18 @@
 {
-  "nodeList": [{"type":"start","typeName":"开始","nodeName":"开始","id":"34v56ha2l9c000","top":"160px","left":"100px"},{"type":"dataSet","typeName":"文件","nodeName":"文件","id":"5sdjugrcqhc000","top":"160px","left":"315px"},{"type":"encode","typeName":"加密","nodeName":"加密","id":"3atqi5p6oa4000","top":"80px","left":"600px"},{"type":"personService","typeName":"个人服务","nodeName":"个人服务","id":"49vcu89p5q0000","top":"245px","left":"600px"},{"type":"arrange","typeName":"清洗","nodeName":"清洗","id":"1jhiilb0t2tc00","top":"180px","left":"880px"},{"type":"end","typeName":"结束","nodeName":"结束","id":"1ogr3wzy6zhc00","top":"180px","left":"1160px"}],
+  "nodeList": [
-  "lineList": [{"from":"34v56ha2l9c000","to":"5sdjugrcqhc000","label":"连线名称","id":"5n6pp5xqd6s000","Remark":""},{"from":"5sdjugrcqhc000","to":"3atqi5p6oa4000","label":"连线名称","id":"2a0ya9j1kev400","Remark":""},{"from":"5sdjugrcqhc000","to":"49vcu89p5q0000","label":"连线名称","id":"zoisvo5gpvk00","Remark":""},{"from":"3atqi5p6oa4000","to":"1jhiilb0t2tc00","label":"连线名称","id":"4xkb3dju1g0000","Remark":""},{"from":"49vcu89p5q0000","to":"1jhiilb0t2tc00","label":"连线名称","id":"ldc917l47w000","Remark":""},{"from":"1jhiilb0t2tc00","to":"1ogr3wzy6zhc00","label":"连线名称","id":"478galw3u34000","Remark":""}]
+    {"type":"start","typeName":"开始","nodeName":"开始","id":"34v56ha2l9c000","top":"160px","left":"100px"},
+    {"type":"dataSet","typeName":"文件","nodeName":"文件","id":"5sdjugrcqhc000","top":"160px","left":"315px"},
+    {"type":"encode","typeName":"加密","nodeName":"加密","id":"3atqi5p6oa4000","top":"80px","left":"600px"},
+    {"type":"personService","typeName":"个人服务","nodeName":"个人服务","id":"49vcu89p5q0000","top":"245px","left":"600px"},
+    {"type":"arrange","typeName":"清洗","nodeName":"清洗","id":"1jhiilb0t2tc00","top":"180px","left":"880px"},
+    {"type":"end","typeName":"结束","nodeName":"结束","id":"1ogr3wzy6zhc00","top":"180px","left":"1160px"}
+  ],
+  "lineList": [
+    {"from":"34v56ha2l9c000","to":"5sdjugrcqhc000","label":"连线名称","id":"5n6pp5xqd6s000","Remark":""},
+    {"from":"5sdjugrcqhc000","to":"3atqi5p6oa4000","label":"连线名称","id":"2a0ya9j1kev400","Remark":""},
+    {"from":"5sdjugrcqhc000","to":"49vcu89p5q0000","label":"连线名称","id":"zoisvo5gpvk00","Remark":""},
+    {"from":"3atqi5p6oa4000","to":"1jhiilb0t2tc00","label":"连线名称","id":"4xkb3dju1g0000","Remark":""},
+    {"from":"49vcu89p5q0000","to":"1jhiilb0t2tc00","label":"连线名称","id":"ldc917l47w000","Remark":""},
+    {"from":"1jhiilb0t2tc00","to":"1ogr3wzy6zhc00","label":"连线名称","id":"478galw3u34000","Remark":""}
+  ]
 }

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

@@ -1,4 +1,5 @@
-const nodeTypeList = [{
+const nodeTypeList = [
+  {
     type: 'start',
     typeName: '开始',
     nodeName: '开始',
@@ -34,7 +35,29 @@ const nodeTypeList = [{
     nodeName: '清洗',
     logImg: require('@/assets/svg/15清洗.svg'),
     log_bg_color: 'rgba(250, 205, 81, 0.2)'
-}]
+  },
+  {
+    type: 'table',
+    typeName: '表结构',
+    nodeName: '表结构',
+    logImg: require('@/assets/svg/5文件数据.svg'),
+    log_bg_color: 'rgba(0, 128, 0, 0.2)'
+  },
+  {
+    type: 'unite',
+    typeName: '联合查询',
+    nodeName: '联合查询',
+    logImg: require('@/assets/svg/侧边栏测试任务.svg'),
+    log_bg_color: 'rgba(0, 128, 0, 0.2)'
+  },
+  {
+    type: 'exportation',
+    typeName: '数据输出',
+    nodeName: '数据输出',
+    logImg: require('@/assets/svg/19导出.svg'),
+    log_bg_color: 'rgba(0, 128, 0, 0.2)'
+  }
+]
 
 console.log(nodeTypeList)
 

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

@@ -1,5 +1,7 @@
 import panzoom from "panzoom";
 import { GenNonDuplicateID } from "@/common/until";
+import item from "../components/node-item"
+import Home from "../Home.vue"
 
 const methods = {
   init() {
@@ -11,14 +13,6 @@ const methods = {
         let res = () => { } //此处可以添加是否创建连接的校验， 返回 false 则不添加；
         return res
       })
-      // 连线创建成功后，维护本地数据
-      this.jsPlumb.bind("connection", evt => {
-        this.addLine(evt)
-      });
-      //连线双击删除事件
-      this.jsPlumb.bind("dblclick",(conn, originalEvent) => {
-        this.confirmDelLine(conn)
-      })
       //断开连线后，维护本地数据
       this.jsPlumb.bind("connectionDetached", evt => {
         this.deleLine(evt)
@@ -26,6 +20,10 @@ const methods = {
       this.loadEasyFlow();
       // 会使整个jsPlumb立即重绘。
       this.jsPlumb.setSuspendDrawing(false, true);
+      // 连线创建成功后，维护本地数据
+      this.jsPlumb.bind("connection", evt => {
+        this.addLine(evt)
+      });
     });
     this.initPanZoom();
   },
@@ -65,7 +63,12 @@ const methods = {
         Remark: ""
       });
     });
+    //连线双击删除事件
+    this.jsPlumb.bind("dblclick",(conn, originalEvent) => {
+      this.confirmDelLine(conn)
+    })
   },
+  // 拖动节点
   draggableNode(nodeId) {
     this.jsPlumb.draggable(nodeId, {
       grid: this.commonGrid,
@@ -98,11 +101,14 @@ const methods = {
     this.auxiliaryLine.isShowYLine = showYLine
     this.auxiliaryLine.isShowXLine = showXLine
   },
+  // 检查节点位置
   changeNodePosition(nodeId, pos) {
     this.data.nodeList.some(v => {
       if(nodeId == v.id) {
         v.left = pos[0] +'px'
         v.top = pos[1] + 'px'
+        console.log('节点 '+nodeId+' 位置变更: top->['+v.top+'],left->['+v.left+']')
+
         return true
       }else {
         return false
@@ -126,9 +132,11 @@ const methods = {
     };
     this.addNode(temp);
   },
+  // 连线
   addLine(line) {
     let from = line.source.id;
     let to = line.target.id;
+    console.log('连线: ' + from + ' --> ' + to)
     this.data.lineList.push({
       from: from,
       to: to,
@@ -136,20 +144,34 @@ const methods = {
       id: GenNonDuplicateID(8),
       Remark: ""
     });
+
   },
+  // 确认删除连线
   confirmDelLine(line) {
-    this.$Modal.confirm({
+      this.$confirm('确认删除该连线吗?', '删除提示', {
-      title: '删除连线',
+        confirmButtonText: '确定',
-      content: "<p>确认删除该连线？</p>",
+        cancelButtonText: '取消',
-      onOk: () => {
+        type: 'warning'
+      }).then(() => {
         this.jsPlumb.deleteConnection(line)
-      }
+        this.$message({
-    })
+          type: 'success',
+          message: '删除成功'
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '操作取消'
+        });
+      });
   },
+  // 删除连线
   deleLine(line) {
     this.data.lineList.forEach((item, index) => {
       if(item.from === line.sourceId && item.to === line.targetId) {
+        console.log('删线: ' + item.from + ' -/- ' + item.to)
         this.data.lineList.splice(index, 1)
+
       }
     })
   },
@@ -177,6 +199,10 @@ const methods = {
       this.jsPlumb.makeTarget(temp.id, this.jsplumbTargetOptions);
       this.draggableNode(temp.id)
     });
+    var node = item.methods.toMysqlNode(temp,null,null)
+    console.log('新增节点: ')
+    console.log(node)
+
   },
 
   initPanZoom() {
@@ -233,31 +259,34 @@ const methods = {
       this.style.cursor = "grab";
     });
   },
-
+  // 设置节点名称
   setNodeName(nodeId, name) {
+    console.log('设置节点 '+nodeId+' 名称为: ' + name)
     this.data.nodeList.some((v) => {
       if(v.id === nodeId) {
         v.nodeName = name
+
         return true
       }else {
         return false
       }
     })
   },
-
   //删除节点
   deleteNode(node) {
+    console.log('删除节点: ')
+    console.log(node)
     this.data.nodeList.some((v,index) => {
       if(v.id === node.id) {
         this.data.nodeList.splice(index, 1)
         this.jsPlumb.remove(v.id)
+
         return true
       }else {
         return false
       }
     })
   },
-
   //更改连线状态
   changeLineState(nodeId, val) {
     console.log(val)

src/views/quest/task/index.vue

@@ -9,21 +9,15 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="任务触发器" prop="taskWebhook">
-        <el-input
-          v-model="queryParams.taskWebhook"
-          placeholder="请输入任务触发器"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="启用状态" prop="state">
-        <el-input
+        <el-select v-model="queryParams.state" placeholder="请选择启用状态" clearable>
-          v-model="queryParams.state"
+          <el-option
-          placeholder="请输入启用状态"
+            v-for="dict in dict.type.sys_enable_status"
-          clearable
+            :key="dict.value"
-          @keyup.enter.native="handleQuery"
+            :label="dict.label"
+            :value="dict.value"
           />
+        </el-select>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -79,16 +73,26 @@
 
     <el-table v-loading="loading" :data="questList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="自增主键" align="center" prop="id" />
       <el-table-column label="任务编码" align="center" prop="taskCode" />
       <el-table-column label="任务名称" align="center" prop="taskName" />
       <el-table-column label="任务触发器" align="center" prop="taskWebhook" />
       <el-table-column label="规则编码" align="center" prop="ruleCode" />
       <el-table-column label="任务类型" align="center" prop="taskType" />
-      <el-table-column label="启用状态" align="center" prop="state" />
+      <el-table-column label="任务内容" align="center" prop="taskData" />
-      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="启用状态" align="center" prop="state">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.state == '启用' ? 'success' : 'info'">{{ scope.row.state }}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-setting"
+            @click="toUpdateTaskNode(scope.row.taskCode)"
+            v-hasPermi="['quest:quest:edit']"
+          >管理</el-button>
           <el-button
             size="mini"
             type="text"
@@ -118,9 +122,6 @@
     <!-- 添加或修改任务对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="任务编码" prop="taskCode">
-          <el-input v-model="form.taskCode" placeholder="请输入任务编码" />
-        </el-form-item>
         <el-form-item label="任务名称" prop="taskName">
           <el-input v-model="form.taskName" placeholder="请输入任务名称" />
         </el-form-item>
@@ -130,14 +131,12 @@
         <el-form-item label="规则编码" prop="ruleCode">
           <el-input v-model="form.ruleCode" placeholder="请输入规则编码" />
         </el-form-item>
-        <el-form-item label="任务类型" prop="task_type">
+        <el-form-item label="任务内容">
-          <el-input v-model="form.taskType" placeholder="请输入任务类型" />
+          <editor v-model="form.taskData" :min-height="192"/>
         </el-form-item>
         <el-form-item label="启用状态" prop="state">
-          <el-input v-model="form.state" placeholder="请输入启用状态" />
+          <el-radio v-model="form.state" label="Y">启用</el-radio>
-        </el-form-item>
+          <el-radio v-model="form.state" label="N">禁用</el-radio>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -149,10 +148,12 @@
 </template>
 
 <script>
-import {listQuest, getQuest, delQuest, addQuest, updateQuest} from "@/api/quest/quest";
+import { listQuest, getQuest, delQuest, addQuest, updateQuest } from "/src/api/quest/quest";
+import dict from "../../../utils/dict";
 
 export default {
   name: "Quest",
+  dicts: ['sys_enable_status'],
   data() {
     return {
       // 遮罩层
@@ -196,11 +197,11 @@ export default {
     this.getList();
   },
   methods: {
+    dict,
     /** 查询任务列表 */
     getList() {
       this.loading = true;
       listQuest(this.queryParams).then(response => {
-        console.log(response)
         this.questList = response.data.rows;
         this.total = response.data.total;
         this.loading = false;
@@ -220,6 +221,7 @@ export default {
         taskWebhook: null,
         ruleCode: null,
         taskType: null,
+        taskData: null,
         state: null,
         createBy: null,
         createTime: null,
@@ -289,13 +291,25 @@ export default {
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => {
+      });
     },
     /** 导出按钮操作 */
     handleExport() {
       this.download('quest/quest/export', {
         ...this.queryParams
       }, `quest_${new Date().getTime()}.xlsx`)
+    },
+    // 跳转节点管理页面
+    toUpdateTaskNode(taskCode){
+      this.$router.push({path: '/quest/node', query: {taskCode: taskCode}})
+    },
+    updState(row){
+      updateQuest(row).then(response => {
+        this.$modal.msgSuccess("修改成功");
+        this.open = false;
+        this.getList();
+      });
     }
   }
 };

src/views/rule/rule/index.vue

@@ -40,7 +40,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['rule:rule:add']"
-        >新增</el-button>
+        >新增
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -51,7 +52,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['rule:rule:edit']"
-        >修改</el-button>
+        >修改
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -62,7 +64,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['rule:rule:remove']"
-        >删除</el-button>
+        >删除
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -72,7 +75,8 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['rule:rule:export']"
-        >导出</el-button>
+        >导出
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -93,21 +97,24 @@
             icon="el-icon-edit"
             @click="handleMaintain(scope.row)"
             v-hasPermi="['rule:rule:remove']"
-          >规则维护</el-button>
+          >规则维护
+          </el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['rule:rule:edit']"
-          >修改</el-button>
+          >修改
+          </el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['rule:rule:remove']"
-          >删除</el-button>
+          >删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -126,9 +133,21 @@
         <el-form-item label="规则名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入规则名称"/>
         </el-form-item>
-        <el-form-item label="是否激活" prop="isActivate">
+
-          <el-input v-model="form.isActivate" placeholder="请输入是否激活" />
+
+        <el-form-item label="是否激活">
+          <el-radio-group v-model="form.isActivate" placeholder="请输入是否激活">
+            <el-radio label="Y"></el-radio>
+            <el-radio label="N"></el-radio>
+          </el-radio-group>
         </el-form-item>
+        <el-form-item label="是否激活">
+          <el-radio-group v-model="form.ruleType" placeholder="请输入规则">
+            <el-radio label="自定义规则"></el-radio>
+            <el-radio label="规则模板"></el-radio>
+          </el-radio-group>
+        </el-form-item>
+
         <el-form-item label="规则描述" prop="ruleDesc">
           <el-input v-model="form.ruleDesc" type="textarea" placeholder="请输入内容"/>
         </el-form-item>
@@ -290,7 +309,8 @@ export default {
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => {
+      });
     },
     /** 导出按钮操作 */
     handleExport() {

src/views/rule/rule/version.vue

@@ -31,144 +31,306 @@
       </el-form-item>
     </el-form>
 
-    <el-row :gutter="10" class="mb8">
+
-      <el-col :span="1.5">
+
+    {{ rule.name }}
+    <el-descriptions class="margin-top" :column="3" border>
+      <template slot="extra">
+        <el-dropdown split-button type="primary">
+          更多操作
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item>
               <el-button
-            type="primary"
+                type="text"
-            plain
-            icon="el-icon-plus"
-            size="mini"
                 @click="handleAdd"
-            v-hasPermi="['rule:rule:add']"
               >新增
               </el-button>
-      </el-col>
+            </el-dropdown-item>
-      <el-col :span="1.5">
+            <el-dropdown-item>开启引擎</el-dropdown-item>
-        <el-button
+            <el-dropdown-item>关闭引擎</el-dropdown-item>
-            type="success"
+          </el-dropdown-menu>
-            plain
+        </el-dropdown>
-            icon="el-icon-edit"
-            size="mini"
-            :disabled="single"
-            @click="handleUpdate"
-            v-hasPermi="['rule:rule:edit']"
-        >修改
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="danger"
-            plain
-            icon="el-icon-delete"
-            size="mini"
-            :disabled="multiple"
-            @click="handleDelete"
-            v-hasPermi="['rule:rule:remove']"
-        >删除
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="handleExport"
-            v-hasPermi="['rule:rule:export']"
-        >导出
-        </el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-
-    <el-descriptions class="margin-top" title="规则版本" :column="3" border>
-      <template slot="extra">
-        <el-button type="primary" size="small">操作</el-button>
       </template>
       <el-descriptions-item>
         <template slot="label">
           <i class="el-icon-user"></i>
           主键
         </template>
-        {{ ruleAndVersion.id }}
+        {{ rule.id }}
       </el-descriptions-item>
       <el-descriptions-item>
         <template slot="label">
           <i class="el-icon-user"></i>
           规则名称
         </template>
-        {{ ruleAndVersion.name }}
+        {{ rule.name }}
       </el-descriptions-item>
       <el-descriptions-item>
         <template slot="label">
           <i class="el-icon-user"></i>
           规则类型
         </template>
-        {{ ruleAndVersion.ruleType }}
+        {{ rule.ruleType }}
       </el-descriptions-item>
       <el-descriptions-item>
         <template slot="label">
           <i class="el-icon-user"></i>
           是否激活
         </template>
-        {{ ruleAndVersion.isActivate }}
+        <el-tag> {{ rule.isActivate }}</el-tag>
+
+
       </el-descriptions-item>
       <el-descriptions-item>
         <template slot="label">
           <i class="el-icon-user"></i>
           规则描述
         </template>
-        {{ ruleAndVersion.ruleDesc }}
+        {{ rule.ruleDesc }}
       </el-descriptions-item>
       <el-descriptions-item>
         <template slot="label">
           <i class="el-icon-user"></i>
           规则代码
         </template>
-        {{ ruleAndVersion.ruleCode }}
+        {{ rule.ruleCode }}
       </el-descriptions-item>
     </el-descriptions>
 
-    <pagination
+    <!--    <pagination-->
-        v-show="total>0"
+    <!--        v-show="total>0"-->
-        :total="total"
+    <!--        :total="total"-->
-        :page.sync="queryParams.pageNum"
+    <!--        :page.sync="queryParams.pageNum"-->
-        :limit.sync="queryParams.pageSize"
+    <!--        :limit.sync="queryParams.pageSize"-->
-        @pagination="getList"
+    <!--        @pagination="getList"-->
-    />
+    <!--    />-->
+
+    <br><br>
+    <el-row :gutter="10">
+      <!--            <el-empty description="暂无支付客户" v-if="customerList.length === 0"></el-empty>-->
+      <el-col :span="12" v-for="customer in ruleAndEditionList">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <div>
+              <el-descriptions class="margin-top" title="规则引擎版本" :column="3" border>
+                <template slot="extra">
+
+                  <el-dropdown>
+                <span class="el-dropdown-link">
+                    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item>
+                        <el-button
+                          size="mini"
+                          type="text"
+                          icon="el-icon-edit"
+                          @click="findByIdVersion(customer.id)"
+                          v-hasPermi="['rule:rule:edit']"
+                        >规格详情
+                        </el-button>
+                      </el-dropdown-item>
+
+                      <el-dropdown-item>
+                        <el-switch
+                          style="float: right; margin: 4px 5px 0;"
+                          v-model="customer.status"
+                          active-color="#13ce66"
+                          inactive-color="#ff4949"
+                          active-value="Y"
+                          inactive-value="N"
+                          @change="handleStatusChange(customer)"
+                        >
+                        </el-switch>
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                  <!--                  </el-button>-->
+                </template>
+                <el-descriptions-item>
+                  <template slot="label">
+                    <i class="el-icon-user"></i>
+                    版本主键
+                  </template>
+                  {{ customer.id }}
+                </el-descriptions-item>
+                <el-descriptions-item>
+                  <template slot="label">
+                    <i class="el-icon-user"></i>
+                    版本类
+                  </template>
+                  {{ customer.ruleKind }}
+                </el-descriptions-item>
+                <el-descriptions-item>
+                  <template slot="label">
+                    <i class="el-icon-user"></i>
+                    版本名称
+                  </template>
+                  {{ customer.name }}
+                </el-descriptions-item>
+                <el-descriptions-item>
+                  <template slot="label">
+                    <i class="el-icon-user"></i>
+                    编码
+                  </template>
+                  {{ customer.ruleCoding }}
+                </el-descriptions-item>
+                <el-descriptions-item>
+                  <template slot="label">
+                    <i class="el-icon-user"></i>
+                    是否激活
+                  </template>
+
+                  <el-tag>{{ customer.ruleActivate }}</el-tag>
+
+                </el-descriptions-item>
+                <el-descriptions-item>
+                  <template slot="label">
+                    <i class="el-icon-user"></i>
+                    状态
+                  </template>
+
+                  <el-tag> {{ customer.status }}</el-tag>
+
+                </el-descriptions-item>
+
+
+                <el-descriptions-item>
+                  <div>
+                    <editor v-model="customer.ruleContent" :min-height="192"/>
+                  </div>
+                </el-descriptions-item>
+
+
+              </el-descriptions>
+            </div>
+
+            <!--                        <el-popconfirm-->
+            <!--                          confirm-button-text='好的'-->
+            <!--                          cancel-button-text='不用了'-->
+            <!--                          icon="el-icon-info"-->
+            <!--                          icon-color="red"-->
+            <!--                          title="这是一段内容确定删除吗？"-->
+            <!--                          @confirm="handleDelete(ruleAndVersion.id)"-->
+            <!--                        >-->
+            <!--                          <el-button style="float: right; padding: 5px ;margin: 0 5px" slot="reference" type="danger"-->
+            <!--                                     icon="el-icon-delete" circle></el-button>-->
+            <!--                        </el-popconfirm>-->
+
+            <!--                        <el-button style="float: right; padding: 5px ;margin: 0 5px" type="primary" icon="el-icon-edit"-->
+            <!--                                   @click="handleUpdate(ruleAndVersion.id)" circle></el-button>-->
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
 
     <!-- 添加或修改规则对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
+      <el-button type="primary" @click="generate">生成版本类</el-button>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="规则名称" prop="name">
+        <el-form-item label="版本类" prop="ruleKind">
-          <el-input v-model="form.name" placeholder="请输入规则名称"/>
+          <el-input v-model="form.ruleKind" placeholder="请输入版本类"/>
         </el-form-item>
-        <el-form-item label="是否激活" prop="isActivate">
+        <el-form-item label="版本名称" prop="name">
-          <el-input v-model="form.isActivate" placeholder="请输入是否激活"/>
+          <el-input v-model="form.name" placeholder="请输入版本名称"/>
         </el-form-item>
-        <el-form-item label="规则描述" prop="ruleDesc">
+        <el-form-item label="编码" prop="ruleCoding">
-          <el-input v-model="form.ruleDesc" type="textarea" placeholder="请输入内容"/>
+          <el-input v-model="form.ruleCoding" type="textarea" placeholder="请输入编码"/>
         </el-form-item>
-        <el-form-item label="规则代码" prop="ruleCode">
+        <el-form-item label="是否激活" prop="ruleActivate">
-          <el-input v-model="form.ruleCode" placeholder="请输入规则代码"/>
+          <el-radio-group v-model="form.ruleActivate" placeholder="请输入是否激活">
+            <el-radio label="Y"></el-radio>
+            <el-radio label="N"></el-radio>
+          </el-radio-group>
         </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-input v-model="form.status" placeholder="请输入状态"/>
+        </el-form-item>
+        <el-form-item label="内容" prop="ruleContent">
+          <el-input v-model="form.ruleContent" placeholder="请输入内容"/>
+        </el-form-item>
+        <el-form-item label="版本" prop="ruleId">
+          <el-input v-model="form.ruleId" disabled placeholder="请输入版本"/>
+        </el-form-item>
+        <!--        前台web编写代码-->
+        <codemirror ref="mycode" :value="curCode" :options="cmOptions" class="code">
+        </codemirror>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 添加或修改规则对话框 -->
+    <!--    <el-dialog :title="title" :visible.sync="opens" width="80%" append-to-body>-->
+    <!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
+    <!--        <el-form-item label="版本主键" prop="id">-->
+    <!--          <el-input v-model="form.id" placeholder="请输入版本类"/>-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="版本类" prop="ruleKind">-->
+    <!--          <el-input v-model="form.ruleKind" placeholder="请输入版本名称"/>-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="版本名称" prop="name">-->
+    <!--          <el-input v-model="form.name" type="textarea" placeholder="请输入编码"/>-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="编码" prop="ruleCoding">-->
+    <!--          <el-radio-group v-model="form.ruleCoding" placeholder="请输入是否激活">-->
+    <!--            <el-radio label="Y"></el-radio>-->
+    <!--            <el-radio label="N"></el-radio>-->
+    <!--          </el-radio-group>-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="是否激活" prop="ruleActivate">-->
+    <!--          <el-input v-model="form.ruleActivate" placeholder="请输入状态"/>-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="状态" prop="status">-->
+    <!--          <el-input v-model="form.status" placeholder="请输入内容"/>-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="内容" prop="ruleContent">-->
+    <!--          <el-input v-model="form.ruleContent" disabled placeholder="请输入版本"/>-->
+    <!--        </el-form-item>-->
+    <!--        <el-form-item label="规则ID" prop="ruleId">-->
+    <!--          <el-input v-model="form.ruleId" disabled placeholder="请输入版本"/>-->
+    <!--        </el-form-item>-->
+
+
+    <!--      </el-form>-->
+    <!--      <div slot="footer" class="dialog-footer">-->
+    <!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
+    <!--        <el-button @click="cancel">取 消</el-button>-->
+    <!--      </div>-->
+    <!--    </el-dialog>-->
+
+
   </div>
 </template>
 
 <script>
-import {listRule, getRule, delRule, addRule, updateRule} from "/src/api/rule/rule";
+import {getRule, delRule} from "/src/api/rule/rule";
+import {getEditionList, addRule, enable, disable, updateRule, getFindByEditionId} from "@/api/rule/ruleEdition";
+
+
+import {codemirror} from 'vue-codemirror'
+import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
+require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！
 
 export default {
   name: "Rule",
   data() {
     return {
+
+      curCode: '测试',
+      cmOptions: {
+        lineNumbers: true, // 显示行号
+        mode: 'text/x-yaml', // 语法model
+        gutters: ['CodeMirror-lint-markers'], // 语法检查器
+        theme: "ambiance",
+        lint: true, // 开启语法检查
+      },
+
+      ruleAndEditionList: [],
+      //版本
+      ruleAndEdition: {},
       // 遮罩层
       loading: true,
       // 选中数组
@@ -187,6 +349,7 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      // opens: false,
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -205,8 +368,18 @@ export default {
         ruleDesc: "",
         ruleCode: ""
       },
+      rule: {},
       // 表单参数
-      form: {},
+      form: {
+        id: '',
+        ruleKind: '',
+        name: '',
+        ruleCoding: '',
+        ruleActivate: '',
+        status: '',
+        ruleContent: '',
+        ruleId: '',
+      },
       // 表单校验
       rules: {
         isActivate: [
@@ -217,27 +390,61 @@ export default {
   },
   created() {
     this.ruleAndVersion.id = this.$route.query.id
-    this.getList();
+    this.findById();
+    this.findList()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
     this.findById();
   },
   methods: {
+    //版本card
+    findList() {
+      getEditionList(this.ruleAndVersion.id).then(res => {
+        this.ruleAndEditionList = res.data
+      })
+    },
     //根据ID回显
     findById() {
       getRule(this.ruleAndVersion.id).then(res => {
-        this.ruleAndVersion = res.data[0]
+        this.rule = res.data[0]
-        console.log(this.ruleAndVersion)
+        console.log(this.rule)
+      })
+    },
+    //根据ID回显版本
+    findByIdVersion(id) {
+      getFindByEditionId(id).then(res => {
+        this.form = res.data[0]
+        this.open = true;
+        console.log(this.form)
       })
     },
 
-    /** 查询规则列表 */
+
-    getList() {
+    /** 客户状态更改触发 */
-      this.loading = true;
+    handleStatusChange(row) {
-      listRule(this.queryParams).then(response => {
+      console.log(row)
-        this.ruleList = response.data;
+      if (row.ruleActivate === "Y") {
-        this.total = response.data;
+        enable(row.id).then((res) => {
-        this.loading = false;
+          this.$modal.msgSuccess("启用成功")
-      });
+          this.findList()
+        })
+      } else {
+        disable(row.id).then((res) => {
+          this.$modal.msgSuccess("禁用成功")
+          this.findList()
+        })
+      }
     },
+    // /** 查询规则列表 */
+    // getList() {
+    //   this.loading = true;
+    //   listRule(this.queryParams).then(response => {
+    //     this.ruleList = response.data;
+    //     this.total = response.data;
+    //     this.loading = false;
+    //   });
+    // },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -262,7 +469,7 @@ export default {
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
-      this.getList();
+      // this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
@@ -278,21 +485,22 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
-      this.open = true;
+      this.open = true;2
+      this.form.ruleId = this.ruleAndVersion.id
       this.title = "添加规则";
     },
-    /** 规则维护按钮操作 */
+    // /** 规则维护按钮操作 */
-    handleMaintain(row) {
+    // handleMaintain(row) {
-      this.$router.push({
+    //   this.$router.push({
-        path: 'version',
+    //     path: 'version',
-        query: {id: row.id}
+    //     query: {id: row.id}
-      })
+    //   })
-    },
+    // },
     /** 修改按钮操作 */
-    handleUpdate(row) {
+    handleUpdate(id) {
       this.reset();
-      const id = row.id || this.ids
+      // const id = row.id || this.ids
-      getRule(id).then(response => {
+      updateRule(id).then(response => {
         this.form = response.data[0];
         this.open = true;
         this.title = "修改规则";
@@ -306,13 +514,16 @@ export default {
             updateRule(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
-              this.getList();
+              // this.getList();
             });
           } else {
             addRule(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
+              this.form.ruleId = this.rule.id
+              console.log(this.form.ruleId)
               this.open = false;
-              this.getList();
+              // this.getList();
+              this.findList()
             });
           }
         }
@@ -324,7 +535,7 @@ export default {
       this.$modal.confirm('是否确认删除规则编号为"' + ids + '"的数据项？').then(function () {
         return delRule(ids);
       }).then(() => {
-        this.getList();
+        // this.getList();
         this.$modal.msgSuccess("删除成功");
       }).catch(() => {
       });
@@ -335,6 +546,17 @@ export default {
         ...this.queryParams
       }, `rule_${new Date().getTime()}.xlsx`)
     }
-  }
+  },
+  components: {
+    codemirror
+  },
+
 };
 </script>
+<style scoped>
+.information-box >>> .CodeMirror {
+  font-family: monospace;
+  height: 71vh;
+  direction: ltr;
+}
+</style>