修改服务管理

src/views/dataAccessPage/components/accessPageNode.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="accessPageNode">
+    <div style="height: 100%;" class="accessPageNode-items">
+      <nodeBtn v-for="(item,index) in nodeItems" :nodeIndex="index" :nodeTxt="item.nodeTxt" :isLine="item.isLine" :isDel="item.isDel" :key="index" @handleAdd="handleAdd" @handleDel="handleDel" />
+    </div>
+    <PublicPageDialog class="advancedNode" :dialog-title="dialogTitle" dialogSize="600px" :dialog-drawer="advancedDrawer" @handleClose="advancedClose" @handleSubmit="advancedTable">
+      <div v-if="!tabFlag" class="nodeForm">
+        <el-form :inline="true" :model="formInline" class="nodeForm-inline">
+          <el-form-item label="分类">
+            <el-select size="small" v-model="formInline.algorithmtype" @change="changeSelect('algorithmtype',formInline.algorithmtype)" clearable placeholder="全部分类">
+              <el-option v-for="(item,index) in selectType" :key="index" :label="item.name" :value="item.code"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" style="margin-top: 20px">
+          <template v-if="selectAlgorithm.length">
+            <el-radio-group style="width: 100%;" v-model="radio3" size="small">
+              <el-row :gutter="20">
+                <el-col style="margin-bottom: 20px;" v-for="(item,index) in selectAlgorithm" :key="index" :span="8">
+                  <el-radio :label="item.id" border>{{ item.name }}</el-radio>
+                </el-col>
+              </el-row>
+            </el-radio-group>
+          </template>
+          <template v-else>
+            <el-empty description="暂无数据"></el-empty>
+          </template>
+        </div>
+      </div>
+      <div v-else class="nodeItemForm">
+        <el-form ref="ruleForm" :model="tableForm" label-width="100px">
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item prop="algorithmname" label="算法名称">
+                <el-input size="small" v-model="tableForm.algorithmname" placeholder="请输入" />
+              </el-form-item>
+            </el-col>
+            <el-col v-if="formatData(formInline.algorithmtype) == 'java' || formatData(formInline.algorithmtype) == 'db' || formatData(formInline.algorithmtype) == 'kafka'" :span="24">
+              <el-form-item prop="datasourceid" label="数据源">
+                <el-select size="small" v-model="tableForm.datasourceid" @change="changeSelectSocure('datasourceid')" placeholder="请选择">
+                  <el-option v-for="(item,index) in selectSource" :key="index" :label="item.datasourcedescribe" :value="item.datasourceid"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col v-if="formatData(formInline.algorithmtype) != 'js'" :span="24">
+              <el-form-item prop="targetsource" label="数据源目标">
+                <el-input size="small" v-model="tableForm.targetsource"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item prop="executionorder" label="执行排序">
+                <el-input size="small" v-model="tableForm.executionorder"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item prop="algorithmdescription" label="算法说明">
+                <el-input size="small" v-model="tableForm.algorithmdescription"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item prop="computingexpression" label="计算表达式">
+                <el-input size="small" type="textarea" v-model="tableForm.computingexpression"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item prop="preconditions" label="执行条件">
+                <el-input size="small" type="textarea" v-model="tableForm.preconditions"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item prop="preparameterset" label="前置条件参数">
+                <el-input size="small" type="textarea" v-model="tableForm.preparameterset"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </PublicPageDialog>
+  </div>
+</template>
+
+<script>
+import PublicPageDialog from '@/components/PublicPageDialog'
+import nodeBtn from './accessPageNodeBtn.vue'
+import { Query } from "@/api/webApi"
+export default {
+  name: 'AccessPageNode',
+  components: { nodeBtn, PublicPageDialog },
+  props: {
+    msgContent: {
+      type: Object,
+      default: () => new Object()
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      tabFlag: false,
+      nodeItems: [
+        {
+          nodeTxt: '开始',
+          isLine: true,
+          isDel: false
+        }
+      ],
+      formInline: {
+        algorithmtype: '',
+      },
+      tableForm: {
+        serviceid: '',
+        preconditions: '',
+        algorithmtype: '',
+        algorithmname: '',
+        algorithmsourcelibraryid: '',
+        executionorder: '',
+        targetsource: '',
+        datasourceid: '',
+        computingexpression: '',
+        algorithmdescription: '',
+        preparameterset: ''
+      },
+      nodeIndex: '',
+      selectType: [],
+      selectAlgorithm: [],
+      selectSource: [],
+      radio3: '',
+      dialogTitle: '添加步骤',
+      advancedDrawer: false
+    }
+  },
+  watch: {
+    radio3: {
+      handler (val) {
+        if (val) {
+          this.tabFlag = true
+        }
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.getSelectData('algorithmtype', 20, { type: 'category' })
+  },
+  methods: {
+    async getSelectData (pagecode, serviceid, datacontent) {
+      this.loading = true
+      try {
+        datacontent = { filter: datacontent }
+        const { code, returnData } = await Query({ serviceid: serviceid, datacontent, event: '0', page: 1, size: 9999 })
+        if (code && returnData?.length) {
+          this.setFormSelectData(pagecode, returnData)
+        }
+      } catch (error) {
+        this.$message.error(error)
+      }
+      this.loading = false
+    },
+    //获取表单下拉数据
+    changeSelect (name, code) {
+      switch (name) {
+        case 'algorithmtype':
+          const nstr = _.cloneDeep(code).toString().toLocaleLowerCase()
+          const item = this.selectType.filter(item => item.code == code)
+          if (!item?.length) return
+          const id = item[0].id
+          this.getSelectData('algorithmname', 20, { superiorid: id })
+          this.getSelectData('datasourceid', 12, { datasourcetype: code })
+          break;
+        default:
+          break;
+      }
+    },
+    setFormSelectData (name, returnData) {
+      switch (name) {
+        case 'serviceid':
+          this.selectService = [...returnData]
+          break;
+        case 'algorithmtype':
+          this.selectType = [...returnData]
+          break;
+        case 'algorithmname':
+          this.selectAlgorithm = [...returnData]
+          break;
+        case 'datasourceid':
+          this.selectSource = [...returnData]
+          break
+        default:
+          break;
+      }
+    },
+    //步骤新增
+    handleAdd (obj) {
+      this.advancedDrawer = obj.flag
+      this.nodeIndex = obj.nodeIndex
+    },
+    //步骤删除
+    handleDel (obj) {
+      this.nodeIndex = obj.nodeIndex
+      const { nodeTxt } = _.cloneDeep(this.nodeItems)[obj.index]
+      this.$confirm(`确认要删除 ${nodeTxt} 这条信息吗?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.nodeItems.splice(obj.index, 1)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    },
+    //弹框关闭
+    advancedClose () {
+      this.clearState()
+    },
+    //弹框确定
+    advancedTable () {
+      const list = _.cloneDeep(this.selectAlgorithm).filter(item => item.id == this.radio3)
+      if (!list?.length) return
+      const { name } = list[0]
+      const item = {
+        nodeTxt: this.formInline.algorithmtype + '-' + name,
+        isLine: true,
+        isDel: true,
+        nodeId: this.radio3,
+        nodeCode: this.formInline.algorithmtype
+      }
+      this.nodeItems.push(item)
+      this.clearState()
+    },
+    //状态清除
+    clearState () {
+      this.formInline.algorithmtype = ''
+      this.radio3 = ''
+      this.selectAlgorithm = []
+      this.advancedDrawer = false
+      this.tabFlag = false
+      this.loading = false
+    },
+    formatData (name) {
+      return typeof name == 'string' ? name.toLocaleLowerCase() : name
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.accessPageNode {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  overflow-y: scroll;
+  &-items {
+    text-align: center;
+  }
+  .advancedNode {
+    text-align: left;
+  }
+}
+</style>

src/views/dataAccessPage/components/accessPageNodeBtn.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="accessPageNodeBtn">
+    <div class="accessPageNodeBtn-txt">
+      <el-button round>{{ nodeTxt }}</el-button>
+    </div>
+    <div v-if="isLine" class="accessPageNodeBtn-line">
+      <div @click="handleAdd" class="accessPageNodeBtn-line-add">
+        <i class="el-icon-circle-plus"></i>
+      </div>
+      <div v-if="isDel" @click="handleDel" class="accessPageNodeBtn-line-del">
+        <i class="el-icon-error"></i>
+      </div>
+    </div>
+    <div class="accessPageNodeBtn-sck">
+      <i class="el-icon-caret-bottom"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+import PublicPageDialog from '@/components/PublicPageDialog'
+export default {
+  name: 'AccessPageNodeBtn',
+  components: { PublicPageDialog },
+  props: {
+    nodeTxt: {
+      type: String,
+      default: '开始'
+    },
+    nodeIndex: {
+      type: Number,
+      default: 0
+    },
+    isLine: {
+      type: Boolean,
+      default: true
+    },
+    isDel: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+    handleAdd () {
+      this.$emit('handleAdd', { flag: true, index: this.nodeIndex })
+    },
+    handleDel () {
+      this.$emit('handleDel', { index: this.nodeIndex })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.accessPageNodeBtn {
+  position: relative;
+  &-txt {
+    margin-bottom: 76px;
+  }
+  &-line {
+    position: absolute;
+    width: 2px;
+    height: 74px;
+    z-index: 1;
+    background-color: #dcdfe6;
+    top: 46px;
+    left: calc(50% - 1px);
+    &-add {
+      position: absolute;
+      top: 26px;
+      left: -48px;
+      font-size: 24px;
+      cursor: pointer;
+      color: #ccc;
+      transition: all 0.3s;
+      &:hover {
+        color: #66b1ff;
+      }
+    }
+    &-del {
+      position: absolute;
+      top: 26px;
+      left: 26px;
+      font-size: 24px;
+      cursor: pointer;
+      color: #ccc;
+      transition: all 0.3s;
+      &:hover {
+        color: rgb(243, 37, 9);
+      }
+    }
+  }
+  &-sck {
+    text-align: center;
+    color: #dcdfe6;
+    font-size: 16px;
+  }
+}
+</style>

src/views/dataAccessPage/index.vue

@@ -6,7 +6,8 @@
         <AccessPageTree @treeNodeClick="treeNodeClick" />
       </div>
       <div class="dataAccessPage_content_right">
-        <AccessPageTable :msg-content="msgContent" />
+        <accessPageNode :msg-content="msgContent" />
+        <!-- <AccessPageTable :msg-content="msgContent" /> -->
       </div>
     </div>
   </div>
@@ -16,9 +17,10 @@
 import PublicPageHeader from '@/components/PublicPageHeader'
 import AccessPageTree from './components/accessPageTree.vue'
 import AccessPageTable from './components/accessPageTable.vue'
+import accessPageNode from './components/accessPageNode.vue'
 export default {
   name: 'DataAccessPage',
-  components: { PublicPageHeader, AccessPageTree, AccessPageTable },
+  components: { PublicPageHeader, AccessPageTree, AccessPageTable, accessPageNode },
   data () {
     return {
       msgContent: {}