dz2.1/src/views/dataAccessPage/components/accessPageNode copy.vue

<template>
  <div class="accessPageNode">
    <div style="height: 100%;" class="accessPageNode-items">
      <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">
        <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>
        <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="请输入参数名" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </PublicPageDialog>
  </div>
</template>

<script>
import PublicPageDialog from '@/components/PublicPageDialog'
import nodeBtn from './accessPageNodeBtn.vue'
import { Query, newData, modifyData, moveData } from "@/api/webApi"
import { formatChange, getTableCols } from '@/utils/validate'
export default {
  name: 'AccessPageNode',
  components: { nodeBtn, PublicPageDialog },
  props: {
    msgContent: {
      type: Object,
      default: () => new Object()
    }
  },
  data () {
    return {
      loading: false,
      tabFlag: false,
      nodeItems: [
        {
          algorithmname: '开始',
          isLine: true,
          isDel: false
        }
      ],
      formInline: {
        algorithmtype: '',
      },
      tableForm: {
        serviceid: '',
        preconditions: '',
        algorithmtype: '',
        algorithmname: '',
        algorithmsourcelibraryid: '',
        executionorder: '',
        targetsource: '',
        datasourceid: '',
        computingexpression: '',
        algorithmdescription: '',
        preparameterset: ''
      },
      nodeIndex: '',
      tableCols: [],
      selectType: [],
      selectAlgorithm: [],
      selectSource: [],
      radio3: '',
      dialogTitle: '添加步骤',
      advancedDrawer: false,
      tableDrawer: false,
      tableData: [],
      pageServiceId: 15,
      pageTableId: 24,
      type: 'add'
    }
  },
  watch: {
    radio3: {
      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.tableCols = getTableCols(233)
    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
    },
    //设置数据
    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) {
        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
        case 'datatable':
          this.tableData = [...returnData]
          break
        case 'nodedata':
          //executionorder
          const newItems = _.orderBy([...returnData], ['executionorder'], ['desc'])
          this.nodeItems = [...this.nodeItems, ...newItems]
          break
        default:
          break;
      }
    },
    //步骤新增
    handleAdd (obj) {
      this.type = 'add'
      this.advancedDrawer = obj.flag
      this.tableData = []
    },
    //步骤编辑
    handleEdit (item) {
      const data = _.cloneDeep(item)
      const { algorithmlibraryid } = data
      if (!algorithmlibraryid) return
      this.advancedDrawer = true
      this.tabFlag = true
      this.tableForm = data
      this.getSelectData('datatable', 24, { algorithmlibraryid })
    },
    //步骤删除
    handleDel (obj) {
      this.type = 'del'
      const item = _.cloneDeep(obj)
      const { algorithmname } = item
      this.$confirm(`确认要删除 ${algorithmname} 这条信息吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.generalDataReception(3, this.formatDataNull(item), 'algorithmlibraryid')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //弹框关闭
    advancedClose () {
      this.clearState()
    },
    //弹框确定
    advancedTable () {
      console.log(this.tableData)
      return
      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))
    },
    //状态清除
    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
    },
  }
}
</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>