jbxl-workflow
Version:
流程图
302 lines (299 loc) • 13.6 kB
JavaScript
import {generateRandomId} from "@dang_8899/xl-ui";
import {deepClone} from "@/utils/common";
// 节点参数基类
/**
* @class NodeParamItem 节点参数基类，主要用来生成参数
* @param paramTypeVal {string} 参数类型值
* @param paramTypeList {Array<string>} 参数值列表
* @param paramsValueList 参数值列表
* @param paramVal {any} 选择 引用还是输入，并不是当前选中的真实的参数值，目前是根据
* @param desc {string} 参数描述
* @param required {boolean} 是否必填
* @param canDel {boolean} 是否可以删除
* @param tableHeaderTitle {string} 表头标题
* @param type {string} 是input还是select或者是其他
* @param isDefault {boolean} 是否为固定的参数，如果是固定的参数，则在编辑时不允许修改
// * @param inputTypeVal {string}输入类型值
* @param name {string} 参数名
* @param paramType {string} 参数类型
* @param paramTypeList {Array<string>} 参数类型列表 ['String', 'Integer', 'Boolean', 'Number'], ['Array]
* @param value {any} 输入参数真实的参数值
* @param referenceValue {any} 引用参数所引用的参数名
* @param referenceFrom {any} 引用参数所引用的参数来源，1 - 输入参数，2 - 输出参数
* @param valueType {any} 引用参数所引用的参数类型
* */
class NodeParamItem {
// 其中paramsTypeVal和paramTypeList配套使用
// paramVal和paramValueList配套使用
constructor({name, paramType, paramTypeList, paramTypeVal, paramValList, paramVal, required, canDel, tableHeaderTitle, isFileParam, disabled, type, showRequired, description, id, isDefault, showDesc, showTableHeaderTitle, defaultValue, children, referenceFrom, valueType, value, result}) {
this.type = type
this.name = name
this.paramTypeList = paramTypeList
this.paramType = paramType
this.paramTypeVal = paramTypeVal
this.paramValList = paramValList
this.result = result
this.paramVal = paramVal || 2
// this.inputTypeVal = inputTypeVal
this.disabled = disabled
this.required = required
this.canDel = canDel
this.tableHeaderTitle = tableHeaderTitle
this.isFileParam = isFileParam
this.showRequired = showRequired
this.description = description
this.id = id || generateRandomId()
this.isDefault = isDefault
this.showDesc = showDesc
this.showTableHeaderTitle = showTableHeaderTitle
this.defaultValue = defaultValue
this.children = children
this.referenceFrom = referenceFrom || 0
this.valueType = valueType || ''
this.value = value
}
}
/**
* @class StartNodeParamItem 开始节点参数类，继承自NodeParamItem，主要用于开始节点参数的生成，参数与@class NodeParamItem 类似，但是有一些特殊的参数
* */
class StartNodeParamItem extends NodeParamItem {
constructor({name, paramType, paramTypeList, paramTypeVal, required, canDel, tableHeaderTitle, isFileParam, disabled, type, showRequired, description, id, isDefault, showDesc}) {super({name, paramType, paramTypeList, paramTypeVal, required, canDel, tableHeaderTitle, isFileParam, disabled, type, showRequired, description, id, isDefault, showDesc});
}
}
// 输入参数类，这是一个list
/**
* @class BasicInputParamsList 输入参数类，这是一个list,主要用于开始节点参数的生成，参数与@class NodeParamItem 类似，但是有一些特殊的参数
* @param showInputParamType {boolean}; 是否显示参数类型
* @param showInputParamVal {boolean}; 是否显示参数值
* @param showDesc {boolean}; 是否显示描述
* @param referenceList {Array}; 引用列表，用于下拉选择
* @param inputParamTypeList {Array}; 输入参数类型列表
* @param fileParamTypeList {Array}; 文件输入参数类型列表
* @param paramValList {Array}; 输入参数值列表
* @param list {Array}; 参数列表
* @param shape {string}; 形状（组件）
* @param create {function}; 创建方法，用于初始化参数列表
* @param defaultParam {any}; 默认参数,用于添加的默认参数
* @param init {function}; 初始化方法，用于初始化参数列表
* */
class BasicInputParamsList {
// key: string; 键
// value: any; 值
// type: string; 类型,类型通常有引用、输入，引入指的是上一个节点的输出，输入指的是用户手动输入
// paramsType: string; 参数类型，值通常有string、number、boolean、integer（目前只存在于开始节点）
/**
* showInputParamType: boolean; 是否显示参数类型
* showInputParamVal: boolean; 是否显示参数值
* showDesc: boolean; 是否显示描述
* referenceList: Array; 引用列表，用于下拉选择，当选择引用时，当前
* */
constructor() {
// 参数类型options
this.inputParamTypeList = [
{value: 'String', label: 'String'},
{value: 'Integer', label: 'Integer'},
{value: 'Boolean', label: 'Boolean'},
{value: 'Number', label: 'Number'}
]
// 文件输入类型options
this.fileParamTypeList = [{value:'Array', label: 'Array'}] // 文件参数类型列表
// 输入参数值options
this.paramValList = [
{value: 2, label: '引用'},
{value: 1, label: '输入'}
]
// 引用列表，用于下拉选择
this.referenceList = []
this.list = []
this.nameFormItemWidth = 150 // 表单项宽度
this.defaultParam = null // 默认输入参数
this.showTableHeaderTitle = false // 是否显示表头标题
}
setList (list) {
this.list = list
}
getList () {
// return deepClone(Object.setPrototypeOf(this.list, null))
if (this.list?.length) {
return this.list.map(item => {
if (item) {
Object.setPrototypeOf(item, null)
return deepClone(item)
}
})
}
}
add (item) {
console.log('add')
this.list.push(item || deepClone({...deepClone(this.defaultParam), id: generateRandomId(), name: '', value: '', referenceValue: '', tableHeaderTitle: ''}))
}
/**
* @param showInputParamType {boolean}; 是否显示参数类型
* @param showInputParamVal {boolean}; 是否显示参数值
* @param showDesc {boolean}; 是否显示描述
* @param paramsItem {object}; 参数项
* @param showTableHeaderTitle {boolean}; 是否显示表头标题
* @param nameFormItemWidth {number}; 表单项宽度
* @param paramsDataList {Array<NodeParamItem>} 传入的list
* */
init ({showInputParamType, showInputParamVal, showDesc, paramsItem, showTableHeaderTitle, nameFormItemWidth, paramsDataList} = {}) {
this.showInputParamType = showInputParamType
this.showInputParamVal = showInputParamVal
this.showDesc = showDesc
this.nameFormItemWidth = nameFormItemWidth
this.showTableHeaderTitle = showTableHeaderTitle
// const {name, paramTypeList, paramTypeVal, required, canDel, isFileParam, disabled, type, showRequired, description, isDefault, paramVal, tableHeaderTitle} = paramsItem || {}
// console.log('paramsItem', paramsItem)
this.defaultParam = deepClone({...paramsItem, showInputParamType, showInputParamVal, showDesc, showTableHeaderTitle, nameFormItemWidth, id: generateRandomId()})
if (paramsDataList?.length) {
const list = paramsDataList.map(item => {
return {
...item,
id: item.id || generateRandomId(), // 有 id 的话是数据回显, 没有 id 的话是复制节点
value: item.paramVal === 1 || item.id ? item.value : '' // 复制节点的时候如果参数类型为引用, 则清空新节点的 value 字段
}
})
this.list.push(...list) // 直接展开数组添加到 list 中
} else {
this.list.push(this.defaultParam)
}
}
}
// 开始节点参数类 是一个list
class StartNodeParamsList extends BasicInputParamsList {
constructor() {
super()
this.inputDesc = '用户输入的提示词'
this.fileDesc = '用户上传的文件(当前仅支持图片格式)'
this.sessionSliceDesc = '会话切片，集团企微会话存档切片内容'
this.showAddBtn = true // 是否显示添加按钮
this.inputParam = null
this.fileParam = null
this.sessionSliceParam = null
}
// 初始生成参数
init ({showInputParamType, showInputParamVal, showDesc, showRequired, paramsDataList} = {}) {
/**
* 生成两个固定参数
*
*/
this.showInputParamType = showInputParamType
this.showInputParamVal = showInputParamVal
console.log('start node paramsDataList', paramsDataList)
this.inputParam = new StartNodeParamItem({
name: 'input',
paramTypeList: this.inputParamTypeList,
paramTypeVal: this.inputParamTypeList[0].value, // 输入类型的值
isFileParam: false, // 是否为文件参数
description: this.inputDesc,
required: true,
type: 'input',
canDel: false, // 是否可以删除
disabled: true, // 禁用
isDefault: true,
showDesc,
showRequired,
showInputParamType,
showInputParamVal,
id: 'inputParam',
result: ''
})
this.fileParam = new StartNodeParamItem({
name: 'file',
paramTypeList: this.fileParamTypeList,
paramTypeVal: this.fileParamTypeList[0].value, // 输入类型的值
isFileParam: true, // 是否为文件参数
description: this.fileDesc,
required: false,
disabled: true, // 禁用
canDel: false, // 是否可以删除
type: 'input',
isDefault: true,
showDesc,
showRequired,
showInputParamType,
showInputParamVal,
id: 'fileParam',
result: ''
})
this.sessionSliceParam = new StartNodeParamItem({
name: 'Session_Slice',
paramTypeList: this.inputParamTypeList,
paramTypeVal: this.inputParamTypeList[0].value, // 输入类型的值
isFileParam: false, // 是否为文件参数
description: this.sessionSliceDesc,
required: true,
type: 'input',
canDel: false, // 是否可以删除
disabled: true, // 禁用
isDefault: true,
showDesc: true,
showRequired: false,
showInputParamType: true,
showInputParamVal: false,
id: 'sessionSliceParam',
result: ''
})
this.list = [this.inputParam, this.fileParam, ...paramsDataList || []]
console.log('this.list', this.list)
}
// 添加参数
add (item) {
// 添加一个输入参数
const obj = new StartNodeParamItem(item || {
name: '',
paramTypeList: this.inputParamTypeList,
paramTypeVal: this.inputParamTypeList[0].value,
isFileParam: false, // 是否为文件参数
description: '',
required: false,
type: 'input',
showDesc: true,
showRequired: true,
canDel: true, // 是否可以删除
disabled: false, // 禁用
isDefault: false,
id: generateRandomId()
})
this.list.push(new StartNodeParamItem(obj))
}
// 删除参数
del (index) {
this.list.splice(index, 1)
}
}
// 插件节点输入参数类 是一个 list
class PluginNodeInputParamsList extends BasicInputParamsList {
constructor({ showInputParamType = true, showInputParamVal = true } = {}) {
super()
this.showInputParamType = showInputParamType
this.showInputParamVal = showInputParamVal
this.showTipIcon = true // 是否显示参数描述的提示图标
this.nameFormItemWidth = 100 // 参数名称表单项的宽度
this.valueFormItemWidth = 138 // 参数值表单项的宽度
this.nameFormItemDisabled = true // 是否禁用参数名称表单项
this.typeFormItemDisabled = true // 是否禁用参数类型表单项
}
}
class ParameterNodeInputParamsList extends BasicInputParamsList {
constructor({ showInputParamVal = true, paramsDataList = [] } = {}) {
super()
this.showInputParamVal = showInputParamVal
this.nameFormItemDisabled = true // 是否禁用参数名称表单项
this.valueTypeFormItemDisabled = true // 是否禁用参数值类型表单项
this.init(paramsDataList)
}
init(paramsDataList) {
this.list = [
new NodeParamItem({
id: paramsDataList[0]?.id || generateRandomId(),
name: 'input', // 参数名称
paramVal: 2, // 参数值
referenceFrom: paramsDataList[0]?.referenceFrom
})
]
}
}
export {
ParameterNodeInputParamsList, PluginNodeInputParamsList, StartNodeParamsList, BasicInputParamsList, NodeParamItem, StartNodeParamItem
}