import {
|
computed,
|
defineComponent,
|
ref,
|
onMounted,
|
watch,
|
SetupContext,
|
PropType,
|
nextTick,
|
inject,
|
} from 'vue'
|
import BaseDrawer from '@/components/BaseDrawer/BaseDrawer'
|
import DyForm from '@/components/DyForm/DyForm'
|
import { injectStore } from '../../core/store'
|
import { StoreKey } from '../../type/index.d'
|
import { getFlowDetail } from '@/api/logic-flow'
|
import { FormItemPropType } from '@/components/DyForm/DyForm.d'
|
import ElInputNumber from 'element-plus/es/components/input-number/index'
|
import { cloneDeep, get, isNil, isNull, omitBy, remove, sortBy } from 'lodash'
|
import { fittingString } from '../../core/transformHelp'
|
import { width, nodeFontSize } from '../Nodes'
|
import TableArray from '@/components/TableArray/TableArray'
|
import { CreateFormItem } from '../Models/CreateFormItem'
|
import { WidgetNameType } from '../Models/WidgetTypeByEnum'
|
import { ConditionType } from '../../core/enum'
|
import FlowContextDialog from '@/components/FlowContextDialog/FlowContextDialog'
|
import styles from './NodeDrawer.module.scss'
|
import Icon from '@/components/Icon/Icon'
|
import { _t } from '@/libs/Language/Language'
|
|
export default defineComponent({
|
name: 'NodeDrawer',
|
props: {
|
title: {
|
type: String,
|
},
|
model: {
|
type: Object,
|
default: () => ({}),
|
},
|
modelValue: {
|
type: Boolean,
|
},
|
graph: {
|
type: Object,
|
default: null,
|
},
|
type: {
|
type: String,
|
default: '',
|
},
|
isEdit: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
emits: ['update:modelValue', 'close', 'confirm', 'update:title'],
|
setup(props, { slots, emit }) {
|
const isOpen = ref(false)
|
const title = ref(props.title)
|
const formRef = ref<any>(null)
|
const flowType = inject('flowType', '')
|
const { nodeMap } = injectStore()
|
|
const customWidgetMap = {
|
inputNumber: ElInputNumber,
|
switch: (props: PropType<any>, { attrs }: SetupContext) => {
|
return <el-switch {...attrs} />
|
},
|
tableArray: TableArray,
|
flowItemKey: FlowContextDialog,
|
}
|
|
const visible = computed({
|
get: () => props.modelValue,
|
set: (value) => {
|
emit('update:modelValue', value)
|
},
|
})
|
const model = computed(() => props.model)
|
|
const formData: Record<string, any> = ref({})
|
|
const formItemProps = ref<FormItemPropType>([])
|
const formItemPropMap = ref<Record<string, FormItemPropType>>({})
|
|
const currentNode = computed(() => {
|
return model.value?.properties
|
})
|
const onClose = () => {
|
visible.value = false
|
isOpen.value = false
|
}
|
/**
|
* 过滤id
|
*/
|
const filterDataId = () => {
|
formItemProps.value.forEach((formItem: FormItemPropType) => {
|
if (formItem.propertyType === 'ArrayList') {
|
const data = get(
|
formData.value,
|
`[${formItem.prop}][${formItem.elementType}]`,
|
[]
|
)
|
data.forEach((item: any) => {
|
delete item.id
|
})
|
}
|
})
|
}
|
|
const onConfirm = async () => {
|
const refs: Record<string, any> = {}
|
const valid = await formRef.value?.validate()
|
|
let validField = true
|
|
formItemProps.value.forEach((formItem: FormItemPropType) => {
|
if (formItem.propertyType === 'ArrayList') {
|
refs[formItem.prop] = formRef.value?.getRefByKey(formItem.prop)
|
}
|
})
|
Object.keys(refs).forEach((key: string) => {
|
const ref = refs[key]
|
const valid = ref?.valid()
|
if (!valid) {
|
return (validField = false)
|
}
|
})
|
|
if (!validField) return
|
if (!valid) return
|
const graph = props.graph
|
const item = graph.findById(model.value.id)
|
const modelData = cloneDeep(model.value)
|
const label = formData.value.Name
|
filterDataId()
|
modelData.properties = formData.value
|
modelData.name = label
|
modelData.label = fittingString(label, width - 5, nodeFontSize + 2)
|
item.update(modelData)
|
visible.value = false
|
emit('confirm', formData.value)
|
}
|
|
const formItemSort = (formItems: FormItemPropType[]) => {
|
return sortBy(formItems, ['sort'])
|
}
|
|
const updateFormData = () => {
|
const properties = model.value?.properties
|
formData.value = {
|
...formData.value,
|
...properties,
|
}
|
const type = currentNode.value?.type
|
if (!formData.value[ConditionType] && type) {
|
formData.value[ConditionType] = type
|
}
|
|
formItemProps.value.forEach((formItem: FormItemPropType) => {
|
const data = formData.value[formItem.prop]
|
|
if (formItem.propertyType === 'ArrayList') {
|
if (Array.isArray(data) || !data) {
|
formData.value[formItem.prop] = {}
|
}
|
if (!data?.[formItem.elementType]) {
|
formData.value[formItem.prop][formItem.elementType] = []
|
}
|
const childData = formData.value[formItem.prop][formItem.elementType]
|
if (!Array.isArray(childData) && childData) {
|
formData.value[formItem.prop][formItem.elementType] = [childData]
|
}
|
} else {
|
if (isNil(data)) {
|
formData.value[formItem.prop] = formItem.defaultValue
|
}
|
if (formItem.propertyType === 'Enum') {
|
const v = formData.value[formItem.prop]
|
formData.value[formItem.prop] =
|
v !== null ? String(formData.value[formItem.prop]) : v
|
}
|
}
|
})
|
}
|
|
const onOpen = async () => {
|
formItemProps.value = {}
|
formItemPropMap.value = {}
|
formData.value = {}
|
if (!currentNode.value?.type) return
|
isOpen.value = true
|
const data = await getFlowDetail(
|
model.value?.properties?.type,
|
flowType !== '' ? Number(flowType) : undefined
|
)
|
const attributes = data.attributes || []
|
const formItems: FormItemPropType[] = []
|
attributes?.forEach((item: FormItemPropType) => {
|
const placeholder = WidgetNameType[item.propertyType]?.placeholder
|
const options =
|
item.propertyData?.map((item: any) => {
|
return {
|
label: item.name,
|
tip: item.description,
|
value: item.value,
|
}
|
}) || []
|
|
const option = {
|
...item,
|
options,
|
placeholder: placeholder && placeholder + item.name,
|
}
|
const formItem: FormItemPropType = new CreateFormItem(
|
option,
|
model.value.id
|
)
|
if (item.visible) {
|
formItems.push(formItem)
|
}
|
})
|
formItemProps.value = formItemSort(formItems)
|
formItemProps.value.forEach((formItem: FormItemPropType) => {
|
formItemPropMap.value[formItem.prop] = formItem
|
})
|
title.value = data.name
|
nextTick(() => {
|
formRef.value?.initFormData()
|
|
updateFormData()
|
})
|
}
|
|
onMounted(() => {
|
if (!isOpen.value) {
|
onOpen()
|
}
|
})
|
|
return () => {
|
const type = model.value?.properties?.type
|
const nodeInfo = type ? nodeMap.get(type) : {}
|
|
return (
|
<BaseDrawer
|
onClose={onClose}
|
onConfirm={onConfirm}
|
onOpen={onOpen}
|
// title={title.value || model.value.label}
|
width="60%"
|
v-model={visible.value}
|
submitDisabled={!formItemProps.value.length || !props.isEdit}
|
destroy-on-close
|
v-slots={{
|
title: () => {
|
return (
|
<div class={styles.edgeDialogTitle}>
|
{title.value || model.value.label}
|
<div class={styles.tip}>{nodeInfo?.description}</div>
|
</div>
|
)
|
},
|
}}
|
>
|
{formItemProps.value.length ? (
|
<DyForm
|
isCategory={true}
|
ref={formRef}
|
customWidgetMap={customWidgetMap}
|
formItemProps={formItemProps.value}
|
v-model:formData={formData.value}
|
labelWidth="140px"
|
></DyForm>
|
) : (
|
<el-empty image-size={200} description={_t('暂无数据')} />
|
)}
|
</BaseDrawer>
|
)
|
}
|
},
|
})
|
