修改

src/components/PublicPageDialog/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="PublicPageDialog">
-    <el-drawer :title="dialogTitle" :wrapper-closable="false" :visible.sync="dialogDrawer" :size="dialogSize" :direction="dialogDirection" :before-close="handleClose">
+    <el-drawer :title="dialogTitle" :append-to-body="dialogBody" :wrapper-closable="false" :visible.sync="dialogDrawer" :size="dialogSize" :direction="dialogDirection" :before-close="handleClose">
       <div class="PublicPageDialog-content">
         <el-scrollbar style="height: 100%" :horizontal="false">
           <slot />
@@ -29,6 +29,10 @@ export default {
       type: Boolean,
       default: false
     },
+    dialogBody: {
+      type: Boolean,
+      default: false
+    },
     formAuth: {
       type: Boolean,
       default: true

src/views/dataAccessPage/components/accessPageNode.vue

@@ -1,7 +1,7 @@
 <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" />
+      <nodeBtn v-for="(item,index) in nodeItems" :nodeIndex="index" :nodeItem="item" :nodeTxt="item.algorithmname" :isLine="item.isLine" :isDel="item.isDel" :key="index" @handleAdd="handleAdd" @handleDel="handleDel" @handleEdit="handleEdit" />
     </div>
     <PublicPageDialog class="advancedNode" :dialog-title="dialogTitle" dialogSize="600px" :dialog-drawer="advancedDrawer" @handleClose="advancedClose" @handleSubmit="advancedTable">
       <div v-if="!tabFlag" class="nodeForm">
@@ -74,6 +74,33 @@
             </el-col>
           </el-row>
         </el-form>
+        <el-table :data="tableData" border style="width: 100%">
+          <el-table-column prop="name" label="参数名">
+          </el-table-column>
+          <el-table-column prop="code" label="参数订阅规则">
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" width="100">
+            <template slot-scope="scope">
+              <el-button type="text" @click="editTable(scope.row)" size="small">编辑</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <PublicPageDialog dialog-title="编辑" dialogSize="600px" :dialogBody="true" :dialog-drawer="tableDrawer" @handleClose="tableClose" @handleSubmit="tableSubmit">
+          <el-form ref="ruleTableForm" style="width: 98%;" :model="tableForm" label-width="100px">
+            <el-row :gutter="20">
+              <el-col :span="24">
+                <el-form-item prop="name" label="参数名">
+                  <el-input size="small" v-model="editTableForm.name" placeholder="请输入" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item prop="code" label="参数订阅规则">
+                  <el-input size="small" v-model="editTableForm.code" placeholder="请输入" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </PublicPageDialog>
       </div>
     </PublicPageDialog>
   </div>
@@ -82,7 +109,8 @@
 <script>
 import PublicPageDialog from '@/components/PublicPageDialog'
 import nodeBtn from './accessPageNodeBtn.vue'
-import { Query } from "@/api/webApi"
+import { Query, newData, modifyData, moveData } from "@/api/webApi"
+import { formatChange } from '@/utils/validate'
 export default {
   name: 'AccessPageNode',
   components: { nodeBtn, PublicPageDialog },
@@ -98,7 +126,7 @@ export default {
       tabFlag: false,
       nodeItems: [
         {
-          nodeTxt: '开始',
+          algorithmname: '开始',
           isLine: true,
           isDel: false
         }
@@ -119,13 +147,21 @@ export default {
         algorithmdescription: '',
         preparameterset: ''
       },
+      editTableForm: {
+        name: '',
+        code: ''
+      },
       nodeIndex: '',
       selectType: [],
       selectAlgorithm: [],
       selectSource: [],
       radio3: '',
       dialogTitle: '添加步骤',
-      advancedDrawer: false
+      advancedDrawer: false,
+      tableDrawer: false,
+      tableData: [],
+      pageServiceId: 15,
+      type: 'add'
     }
   },
   watch: {
@@ -133,10 +169,18 @@ export default {
       handler (val) {
         if (val) {
           this.tabFlag = true
+          this.getSelectData('datatable', 20, { superiorid: val })
         }
       },
       deep: true
-    }
+    },
+    msgContent: {
+      handler (row) {
+        this.setTableData(row)
+      },
+      deep: true,
+      immediate: true
+    },
   },
   mounted () {
     this.getSelectData('algorithmtype', 20, { type: 'category' })
@@ -155,6 +199,28 @@ export default {
       }
       this.loading = false
     },
+    //设置数据
+    setTableData (row) {
+      if (row && Object.keys(row).length) {
+        const { passparameters } = row
+        const filterItem = this.formatDefault(passparameters, row)
+        if (!Object.keys(filterItem).length) return
+        this.nodeItems = this.nodeItems.splice(0, 1)
+        this.getSelectData('nodedata', 15, filterItem)
+      }
+    },
+    //格式化传递参数数据
+    formatDefault (item, data = {}) {
+      if (typeof item != 'string') return {}
+      const filterItem = {}
+      const parameters = item.replace('{', '').replace('}', '')
+      const parametersSplit = parameters?.split(',')
+      parametersSplit.map(item => {
+        const [key, val] = item?.split(':')
+        filterItem[key] = data[val]
+      })
+      return filterItem
+    },
     //获取表单下拉数据
     changeSelect (name, code) {
       switch (name) {
@@ -184,25 +250,39 @@ export default {
         case 'datasourceid':
           this.selectSource = [...returnData]
           break
+        case 'datatable':
+          this.tableData = [...returnData]
+          break
+        case 'nodedata':
+          this.nodeItems = [...this.nodeItems, ...returnData]
+          break
         default:
           break;
       }
     },
     //步骤新增
     handleAdd (obj) {
+      this.type = 'add'
       this.advancedDrawer = obj.flag
       this.nodeIndex = obj.nodeIndex
     },
+    //步骤编辑
+    handleEdit (item) {
+      this.advancedDrawer = true
+      const data = _.cloneDeep(item)
+      this.tableForm = data
+    },
     //步骤删除
     handleDel (obj) {
-      this.nodeIndex = obj.nodeIndex
-      const { nodeTxt } = _.cloneDeep(this.nodeItems)[obj.index]
-      this.$confirm(`确认要删除 ${nodeTxt} 这条信息吗?`, '提示', {
+      this.type = 'del'
+      const item = _.cloneDeep(obj)
+      const { algorithmname } = item
+      this.$confirm(`确认要删除 ${algorithmname} 这条信息吗?`, '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.nodeItems.splice(obj.index, 1)
+        this.generalDataReception(3, this.formatDataNull(item), 'algorithmlibraryid')
       }).catch(() => {
         this.$message({
           type: 'info',
@@ -216,27 +296,82 @@ export default {
     },
     //弹框确定
     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()
+      const data = _.cloneDeep(this.tableForm)
+      data.serviceid = this.msgContent.serviceid
+      data.algorithmtype = this.formInline.algorithmtype
+      data.algorithmsourcelibraryid = this.radio3
+      const event = this.type == 'add' ? 1 : this.type == 'edit' ? 2 : 3
+      this.generalDataReception(event, this.formatDataNull(data))
+    },
+    //编辑弹框-打开
+    editTable (row) {
+      this.tableDrawer = true
+      this.editTableForm = _.cloneDeep(row)
+    },
+    //编辑弹框-关闭
+    tableClose () {
+      this.tableDrawer = false
+    },
+    //编辑弹框-确定
+    tableSubmit () {
+      this.tableDrawer = false
     },
     //状态清除
     clearState () {
       this.formInline.algorithmtype = ''
       this.radio3 = ''
       this.selectAlgorithm = []
+      for (const key in this.tableForm) {
+        if (Object.hasOwnProperty.call(this.tableForm, key)) {
+          this.tableForm[key] = null
+        }
+      }
       this.advancedDrawer = false
       this.tabFlag = false
       this.loading = false
+      this.tableDrawer = false
+    },
+    formatDataNull (params) {
+      const obj = _.cloneDeep(params)
+      for (const key in obj) {
+        if (Object.hasOwnProperty.call(obj, key)) {
+          const element = obj[key]
+          if (!element) {
+            obj[key] = null
+          }
+        }
+      }
+      return obj
+    },
+    //表格-增/删/改
+    async generalDataReception (event, data, key) {
+      try {
+        const params = {
+          serviceid: this.pageServiceId,
+          datacontent: formatChange(data, event, key),
+          event: `${event}`,
+        };
+        const { code } =
+          event == 1
+            ? await newData(params)
+            : event == 2
+              ? await modifyData(params)
+              : await moveData(params);
+        if (code == 0) {
+          this.$message.success("操作成功")
+          this.restTable()
+          this.clearState()
+        } else {
+          this.$message.error("操作失败")
+          this.clearState()
+        }
+      } catch (error) {
+        this.clearState()
+        console.log(error)
+      }
+    },
+    restTable () {
+      this.setTableData(this.msgContent)
     },
     formatData (name) {
       return typeof name == 'string' ? name.toLocaleLowerCase() : name

src/views/dataAccessPage/components/accessPageNodeBtn.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="accessPageNodeBtn">
     <div class="accessPageNodeBtn-txt">
-      <el-button round>{{ nodeTxt }}</el-button>
+      <el-button @click="handleEdit" round>{{ nodeTxt }}</el-button>
     </div>
     <div v-if="isLine" class="accessPageNodeBtn-line">
       <div @click="handleAdd" class="accessPageNodeBtn-line-add">
@@ -31,6 +31,10 @@ export default {
       type: Number,
       default: 0
     },
+    nodeItem: {
+      type: Object,
+      default: () => new Object()
+    },
     isLine: {
       type: Boolean,
       default: true
@@ -49,8 +53,11 @@ export default {
       this.$emit('handleAdd', { flag: true, index: this.nodeIndex })
     },
     handleDel () {
-      this.$emit('handleDel', { index: this.nodeIndex })
+      this.$emit('handleDel', this.nodeItem)
     },
+    handleEdit () {
+      this.$emit('handleEdit', this.nodeItem)
+    }
   }
 }
 </script>