修改

src/views/dataAccessPage/components/accessPageNode.vue

@@ -5,11 +5,11 @@
     </div>
     <PublicPageDialog class="advancedNode" :dialog-title="dialogTitle" dialogSize="600px" :dialog-drawer="advancedDrawer" @handleClose="advancedClose" @handleSubmit="advancedTable">
       <template v-if="!tabFlag">
-        <node-class />
+        <node-class ref="nodeClass" @changeSelect="changeSelect" @groupChange="groupChange" />
       </template>
       <template v-else>
-        <node-form />
-        <node-table />
+        <node-form ref="nodeForm" :nodeForm="nodeForm" :algorithmtype="this.selectCode" />
+        <node-table ref="nodeTable" :query-id="tableId" :type="type" @tableChange="tableChange" />
       </template>
     </PublicPageDialog>
   </div>
@@ -23,6 +23,7 @@ import nodeForm from './nodeForm.vue'
 import nodeTable from './nodeTable.vue'
 import { Query, newData, modifyData, moveData } from "@/api/webApi"
 import { formatChange, getTableCols } from '@/utils/validate'
+import { getQueryData } from '../utils'
 export default {
   name: 'AccessPageNode',
   components: { nodeBtn, PublicPageDialog, nodeClass, nodeForm, nodeTable },
@@ -47,6 +48,12 @@ export default {
       advancedDrawer: false,
       pageServiceId: 15,
       pageTableId: 24,
+      groupId: '',
+      tableId: '',
+      algId: '',
+      selectCode: '',
+      nodeForm: {},
+      tasData: [],
       type: 'add'
     }
   },
@@ -114,7 +121,7 @@ export default {
           this.selectSource = [...returnData]
           break
         case 'datatable':
-          this.tableData = [...returnData]
+          this.tasData = [...returnData]
           break
         case 'nodedata':
           //executionorder
@@ -125,21 +132,35 @@ export default {
           break;
       }
     },
+    changeSelect (code) {
+      this.selectCode = code
+    },
+    groupChange (val) {
+      this.tabFlag = true
+      this.groupId = val
+      this.tableId = val
+    },
+    tableChange (arr) {
+      // if (this.type == 'add' && arr?.length) {
+      //   this.tableColumnData()
+      // }
+    },
     //步骤新增
     handleAdd (obj) {
       this.type = 'add'
-      this.advancedDrawer = obj.flag
-      this.tableData = []
+      this.advancedDrawer = true
+      this.nodeForm = {}
     },
     //步骤编辑
     handleEdit (item) {
+      this.type = 'edit'
       const data = _.cloneDeep(item)
       const { algorithmlibraryid } = data
       if (!algorithmlibraryid) return
       this.advancedDrawer = true
       this.tabFlag = true
-      this.tableForm = data
-      this.getSelectData('datatable', 24, { algorithmlibraryid })
+      this.nodeForm = data
+      this.tableId = algorithmlibraryid
     },
     //步骤删除
     handleDel (obj) {
@@ -165,13 +186,35 @@ export default {
     },
     //弹框确定
     advancedTable () {
-      return
-      const data = _.cloneDeep(this.tableForm)
-      data.serviceid = this.msgContent.serviceid
-      data.algorithmtype = this.formInline.algorithmtype
-      data.algorithmsourcelibraryid = this.radio3
+      const data = _.cloneDeep(this.$refs['nodeForm'].tableForm)
       const event = this.type == 'add' ? 1 : this.type == 'edit' ? 2 : 3
-      this.generalDataReception(event, this.formatDataNull(data))
+      data.serviceid = this.msgContent.serviceid
+      if (this.type == 'edit') {
+        const { algorithmtype, algorithmlibraryid } = this.nodeForm
+        data.algorithmtype = algorithmtype
+        data.algorithmsourcelibraryid = algorithmlibraryid
+        this.tableColumnData(event)
+      } else if (this.type == 'add') {
+        data.algorithmtype = this.selectCode
+        data.algorithmsourcelibraryid = this.groupId
+      }
+      this.generalDataReception(event, this.formatDataNull(data), 'algorithmlibraryid')
+    },
+    //新增数据时操作table
+    async addDataColTable () {
+      const data = _.cloneDeep(this.$refs['nodeForm'].tableForm)
+      if (!Object.keys(data).length) return
+      const { algorithmname } = data
+      const row = this.msgContent
+      const { passparameters } = row
+      const filterItem = this.formatDefault(passparameters, row)
+      if (!Object.keys(filterItem).length) return
+      const { returnData } = await getQueryData(this.pageServiceId, filterItem)
+      const item = returnData.filter(item => item.algorithmname == algorithmname)
+      if (!item.length) return
+      const { algorithmlibraryid } = item[0]
+      this.algId = algorithmlibraryid
+      this.tableColumnData(1)
     },
     //状态清除
     clearState () {
@@ -191,6 +234,40 @@ export default {
       }
       return obj
     },
+    async tableColumnData (event = 2, key = 'algorithmparametersid') {
+      const res = this.$refs['nodeTable'].tableData
+      if (!res.length) return
+      const items = _.cloneDeep(res)
+      const datas = []
+      items.map(item => {
+        const nobj = {
+          algorithmlibraryid: event == 1 ? this.algId : item.algorithmlibraryid,
+          parametername: event == 1 ? item.name : item.parametername,
+          subscriptionexpressions: event == 1 ? item.code : item.subscriptionexpressions,
+          datasource: item.datasource,
+          parametertype: event == 1 ? item.datatype : item.parametertype
+        }
+        const itemData = event == 1 ? formatChange(nobj, event, key) : formatChange(item, event, key)
+        const nitem = itemData[0] || {}
+        datas.push(nitem)
+      })
+      const params = {
+        serviceid: this.pageTableId,
+        datacontent: datas,
+        event: `${event}`
+      }
+      const { code } =
+        event == 1
+          ? await newData(params)
+          : event == 2
+            ? await modifyData(params)
+            : await moveData(params)
+      if (code == 0 && event == 1) {
+        this.$message.success("操作成功")
+        this.restTable()
+        this.clearState()
+      }
+    },
     //表格-增/删/改
     async generalDataReception (event, data, key) {
       try {
@@ -206,9 +283,13 @@ export default {
               ? await modifyData(params)
               : await moveData(params);
         if (code == 0) {
-          this.$message.success("操作成功")
-          this.restTable()
-          this.clearState()
+          if (this.type == 'add') {
+            this.addDataColTable()
+          } else {
+            this.$message.success("操作成功")
+            this.restTable()
+            this.clearState()
+          }
         } else {
           this.$message.error("操作失败")
           this.clearState()

src/views/dataAccessPage/components/nodeClass.vue

@@ -1,18 +1,30 @@
 <template>
   <div class="nodeClass">
-    <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">
+    <div class="nodeClass-sf">
+      <div class="manageTitle">请选择算法类型</div>
+      <el-radio-group style="width: 100%;margin-top: 20px;" @change="changeSelect('algorithmtype',formInline.algorithmtype)" v-model="formInline.algorithmtype" size="small">
+        <el-row :gutter="20">
+          <el-col style="margin-bottom: 20px;" v-for="(item,index) in selectType" :key="index" :span="8">
+            <el-radio :label="item.code" border>
+              <el-tooltip class="item" effect="dark" :content="item.name" placement="right">
+                <span>{{ item.name }}</span>
+              </el-tooltip>
+            </el-radio>
+          </el-col>
+        </el-row>
+      </el-radio-group>
+    </div>
+    <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: 60px">
+      <div class="manageTitle">请选择算法模板</div>
       <template v-if="selectAlgorithm.length">
-        <el-radio-group style="width: 100%;" v-model="algorithmid" size="small">
+        <el-radio-group style="width: 100%;margin-top: 20px;" @change="groupChange" v-model="algorithmid" 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-radio :label="item.id" border>
+                <el-tooltip class="item" effect="dark" :content="item.name" placement="right">
+                  <span>{{ item.name }}</span>
+                </el-tooltip>
+              </el-radio>
             </el-col>
           </el-row>
         </el-radio-group>
@@ -68,9 +80,11 @@ export default {
     },
     //获取表单下拉数据
     changeSelect (name, code) {
+      this.$emit('changeSelect', code)
       switch (name) {
         case 'algorithmtype':
           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 })
@@ -79,9 +93,20 @@ export default {
           break;
       }
     },
+    groupChange (val) {
+      this.$emit('groupChange', val)
+    }
   }
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+.nodeClass {
+  .el-radio.is-bordered {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
 </style>

src/views/dataAccessPage/components/nodeForm.vue

@@ -56,6 +56,10 @@ export default {
     algorithmtype: {
       type: String,
       default: ''
+    },
+    nodeForm: {
+      type: Object,
+      default: () => new Object()
     }
   },
   data () {
@@ -73,6 +77,18 @@ export default {
         algorithmdescription: '',
         preparameterset: ''
       },
+      selectSource: JSON.parse(sessionStorage.getItem('nodeDatasource')) || []
+    }
+  },
+  watch: {
+    nodeForm: {
+      handler (obj) {
+        if (Object.keys(obj).length) {
+          this.tableForm = _.cloneDeep(obj)
+        }
+      },
+      deep: true,
+      immediate: true
     }
   },
   methods: {

src/views/dataAccessPage/components/nodeTable.vue

@@ -1,24 +1,124 @@
 <template>
   <div class="nodeTable">
-    <el-table :data="tableData" border style="width: 100%">
-      <el-table-column v-for="col in tableCols" :key="col.pagecode" :prop="col.pagecode" :label="col.pagename" :width="col.displaywidth+'px'">
-        <template slot-scope="scope">
-          <el-input size="small" v-model="scope.row[col.pagecode]" :placeholder="'请输入'+col.pagename" />
-        </template>
-      </el-table-column>
-    </el-table>
+    <template v-if="type == 'edit'">
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column prop="parametername" label="参数名">
+          <template slot-scope="scope">
+            <el-input size="small" v-model="scope.row.parametername" placeholder="请输入参数名" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="datasource" label="参数类型">
+          <template slot-scope="scope">
+            <el-select size="small" v-model="scope.row.datasource" placeholder="请选择">
+              <el-option v-for="(item,index) in datasources" :key="index" :label="item.name" :value="formatString(item.id)"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="parametertype" label="数据来源">
+          <template slot-scope="scope">
+            <el-select size="small" v-model="scope.row.parametertype" placeholder="请选择">
+              <el-option v-for="(item,index) in datatypes" :key="index" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="subscriptionexpressions" label="参数订阅规则">
+          <template slot-scope="scope">
+            <el-input size="small" v-model="scope.row.subscriptionexpressions" placeholder="请输入参数订阅规则" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </template>
+    <template v-else>
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column prop="name" label="参数名">
+          <template slot-scope="scope">
+            <el-input size="small" v-model="scope.row.name" placeholder="请输入参数名" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="datasource" label="参数类型">
+          <template slot-scope="scope">
+            <el-select size="small" v-model="scope.row.datasource" placeholder="请选择">
+              <el-option v-for="(item,index) in datasources" :key="index" :label="item.name" :value="formatString(item.id)"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="datatype" label="数据来源">
+          <template slot-scope="scope">
+            <el-select size="small" v-model="scope.row.datatype" placeholder="请选择">
+              <el-option v-for="(item,index) in datatypes" :key="index" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="code" label="参数订阅规则">
+          <template slot-scope="scope">
+            <el-input size="small" v-model="scope.row.code" placeholder="请输入参数订阅规则" />
+          </template>
+        </el-table-column>
+      </el-table>
+    </template>
   </div>
 </template>
 
 <script>
-import { formatChange, getTableCols } from '@/utils/validate'
+import { getTableCols } from '@/utils/validate'
+import { getQueryData } from '../utils/index'
 export default {
   name: 'NodeTable',
+  props: ['queryId', 'type'],
   data () {
     return {
       tableCols: [],
-      tableData: []
+      tableData: [],
+      datasources: [],
+      datatypes: []
     }
+  },
+  watch: {
+    type: {
+      handler (val) {
+        console.log(val)
+        if (val == 'edit') {
+          this.getTableData('tabledata', 24, { algorithmlibraryid: this.queryId })
+        } else {
+          this.getTableData('tabledata', 20, { superiorid: this.queryId })
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  mounted () {
+    this.tableCols = getTableCols(233)
+  },
+  methods: {
+    async getTableData (pagecode, id, datacontent) {
+      const { code, returnData } = await getQueryData(id, datacontent)
+      if (code == 0) {
+        this.setFormSelectData(pagecode, returnData)
+        if (pagecode == 'tabledata') {
+          this.getTableData('datasource', 19, { type: "datasource" })
+          this.getTableData('datatype', 19, { type: "algorithmlibraryParamenterType" })
+        }
+      }
+    },
+    formatString (id) {
+      return `${id}`
+    },
+    setFormSelectData (name, returnData) {
+      switch (name) {
+        case 'datasource':
+          this.datasources = [...returnData]
+          break;
+        case 'datatype':
+          this.datatypes = [...returnData]
+          break;
+        case 'tabledata':
+          this.tableData = [...returnData]
+          break;
+        default:
+          break;
+      }
+    },
   }
 }
 </script>