iailab-plat-ui-vue3.git

Merge remote-tracking branch 'origin/master'

dengzedong

5 天以前 3357b5f0f0919f7a52cd32a6d6de0acb14e0daaf

提交 \| 用户 \| 时间
820397	1	<template>
H	2	<div class="panel-tab__content">
	3	<el-form label-width="80px">
	4	<el-form-item label="流程表单">
	5	<!-- <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
	6	<el-select v-model="formKey" clearable @change="updateElementFormKey">
	7	<el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
	8	</el-select>
	9	</el-form-item>
	10	<!-- <el-form-item label="业务标识">-->
	11	<!-- <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
	12	<!-- <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
	13	<!-- <el-option label="无" value="" />-->
	14	<!-- </el-select>-->
	15	<!-- </el-form-item>-->
	16	</el-form>
	17
	18	<!--字段列表-->
	19	<!-- <div class="element-property list-property">-->
	20	<!-- <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>-->
	21	<!-- <el-table :data="fieldList" max-height="240" fit border>-->
	22	<!-- <el-table-column label="序号" type="index" width="50px" />-->
	23	<!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
	24	<!-- <el-table-column-->
	25	<!-- label="字段类型"-->
	26	<!-- prop="type"-->
	27	<!-- min-width="80px"-->
	28	<!-- :formatter="(row) => fieldType[row.type] \|\| row.type"-->
	29	<!-- show-overflow-tooltip-->
	30	<!-- />-->
	31	<!-- <el-table-column-->
	32	<!-- label="默认值"-->
	33	<!-- prop="defaultValue"-->
	34	<!-- min-width="80px"-->
	35	<!-- show-overflow-tooltip-->
	36	<!-- />-->
	37	<!-- <el-table-column label="操作" width="90px">-->
	38	<!-- <template #default="scope">-->
	39	<!-- <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"-->
	40	<!-- >编辑</el-button-->
	41	<!-- >-->
	42	<!-- <el-divider direction="vertical" />-->
	43	<!-- <el-button-->
	44	<!-- type="primary"-->
	45	<!-- link-->
	46	<!-- style="color: #ff4d4f"-->
	47	<!-- @click="removeField(scope, scope.$index)"-->
	48	<!-- >移除</el-button-->
	49	<!-- >-->
	50	<!-- </template>-->
	51	<!-- </el-table-column>-->
	52	<!-- </el-table>-->
	53	<!-- </div>-->
	54	<!-- <div class="element-drawer__button">-->
	55	<!-- <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />-->
	56	<!-- </div>-->
	57
	58	<!--字段配置侧边栏-->
	59	<!-- <el-drawer-->
	60	<!-- v-model="fieldModelVisible"-->
	61	<!-- title="字段配置"-->
	62	<!-- :size="`${width}px`"-->
	63	<!-- append-to-body-->
	64	<!-- destroy-on-close-->
	65	<!-- >-->
	66	<!-- <el-form :model="formFieldForm" label-width="90px">-->
	67	<!-- <el-form-item label="字段ID">-->
	68	<!-- <el-input v-model="formFieldForm.id" clearable />-->
	69	<!-- </el-form-item>-->
	70	<!-- <el-form-item label="类型">-->
	71	<!-- <el-select-->
	72	<!-- v-model="formFieldForm.typeType"-->
	73	<!-- placeholder="请选择字段类型"-->
	74	<!-- clearable-->
	75	<!-- @change="changeFieldTypeType"-->
	76	<!-- >-->
	77	<!-- <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
	78	<!-- </el-select>-->
	79	<!-- </el-form-item>-->
	80	<!-- <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
	81	<!-- <el-input v-model="formFieldForm.type" clearable />-->
	82	<!-- </el-form-item>-->
	83	<!-- <el-form-item label="名称">-->
	84	<!-- <el-input v-model="formFieldForm.label" clearable />-->
	85	<!-- </el-form-item>-->
	86	<!-- <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
	87	<!-- <el-input v-model="formFieldForm.datePattern" clearable />-->
	88	<!-- </el-form-item>-->
	89	<!-- <el-form-item label="默认值">-->
	90	<!-- <el-input v-model="formFieldForm.defaultValue" clearable />-->
	91	<!-- </el-form-item>-->
	92	<!-- </el-form>-->
	93
	94	<!-- <!– 枚举值设置 –>-->
	95	<!-- <template v-if="formFieldForm.type === 'enum'">-->
	96	<!-- <el-divider key="enum-divider" />-->
	97	<!-- <p class="listener-filed__title" key="enum-title">-->
	98	<!-- <span><Icon icon="ep:menu" />枚举值列表：</span>-->
	99	<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
	100	<!-- >添加枚举值</el-button-->
	101	<!-- >-->
	102	<!-- </p>-->
	103	<!-- <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>-->
	104	<!-- <el-table-column label="序号" width="50px" type="index" />-->
	105	<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
	106	<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
	107	<!-- <el-table-column label="操作" width="90px">-->
	108	<!-- <template #default="scope">-->
	109	<!-- <el-button-->
	110	<!-- type="primary"-->
	111	<!-- link-->
	112	<!-- @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
	113	<!-- >编辑</el-button-->
	114	<!-- >-->
	115	<!-- <el-divider direction="vertical" />-->
	116	<!-- <el-button-->
	117	<!-- type="primary"-->
	118	<!-- link-->
	119	<!-- style="color: #ff4d4f"-->
	120	<!-- @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
	121	<!-- >移除</el-button-->
	122	<!-- >-->
	123	<!-- </template>-->
	124	<!-- </el-table-column>-->
	125	<!-- </el-table>-->
	126	<!-- </template>-->
	127
	128	<!-- <!– 校验规则 –>-->
	129	<!-- <el-divider key="validation-divider" />-->
	130	<!-- <p class="listener-filed__title" key="validation-title">-->
	131	<!-- <span><Icon icon="ep:menu" />约束条件列表：</span>-->
	132	<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
	133	<!-- >添加约束</el-button-->
	134	<!-- >-->
	135	<!-- </p>-->
	136	<!-- <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>-->
	137	<!-- <el-table-column label="序号" width="50px" type="index" />-->
	138	<!-- <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
	139	<!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
	140	<!-- <el-table-column label="操作" width="90px">-->
	141	<!-- <template #default="scope">-->
	142	<!-- <el-button-->
	143	<!-- type="primary"-->
	144	<!-- link-->
	145	<!-- @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
	146	<!-- >编辑</el-button-->
	147	<!-- >-->
	148	<!-- <el-divider direction="vertical" />-->
	149	<!-- <el-button-->
	150	<!-- type="primary"-->
	151	<!-- link-->
	152	<!-- style="color: #ff4d4f"-->
	153	<!-- @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
	154	<!-- >移除</el-button-->
	155	<!-- >-->
	156	<!-- </template>-->
	157	<!-- </el-table-column>-->
	158	<!-- </el-table>-->
	159
	160	<!-- <!– 表单属性 –>-->
	161	<!-- <el-divider key="property-divider" />-->
	162	<!-- <p class="listener-filed__title" key="property-title">-->
	163	<!-- <span><Icon icon="ep:menu" />字段属性列表：</span>-->
	164	<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
	165	<!-- >添加属性</el-button-->
	166	<!-- >-->
	167	<!-- </p>-->
	168	<!-- <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>-->
	169	<!-- <el-table-column label="序号" width="50px" type="index" />-->
	170	<!-- <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
	171	<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
	172	<!-- <el-table-column label="操作" width="90px">-->
	173	<!-- <template #default="scope">-->
	174	<!-- <el-button-->
	175	<!-- type="primary"-->
	176	<!-- link-->
	177	<!-- @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
	178	<!-- >编辑</el-button-->
	179	<!-- >-->
	180	<!-- <el-divider direction="vertical" />-->
	181	<!-- <el-button-->
	182	<!-- type="primary"-->
	183	<!-- link-->
	184	<!-- style="color: #ff4d4f"-->
	185	<!-- @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
	186	<!-- >移除</el-button-->
	187	<!-- >-->
	188	<!-- </template>-->
	189	<!-- </el-table-column>-->
	190	<!-- </el-table>-->
	191
	192	<!-- <!– 底部按钮 –>-->
	193	<!-- <div class="element-drawer__button">-->
	194	<!-- <el-button>取消</el-button>-->
	195	<!-- <el-button type="primary" @click="saveField">保存</el-button>-->
	196	<!-- </div>-->
	197	<!-- </el-drawer>-->
	198
	199	<!-- <el-dialog-->
	200	<!-- v-model="fieldOptionModelVisible"-->
	201	<!-- :title="optionModelTitle"-->
	202	<!-- width="600px"-->
	203	<!-- append-to-body-->
	204	<!-- destroy-on-close-->
	205	<!-- >-->
	206	<!-- <el-form :model="fieldOptionForm" label-width="96px">-->
	207	<!-- <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
	208	<!-- <el-input v-model="fieldOptionForm.id" clearable />-->
	209	<!-- </el-form-item>-->
	210	<!-- <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
	211	<!-- <el-input v-model="fieldOptionForm.name" clearable />-->
	212	<!-- </el-form-item>-->
	213	<!-- <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
	214	<!-- <el-input v-model="fieldOptionForm.config" clearable />-->
	215	<!-- </el-form-item>-->
	216	<!-- <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
	217	<!-- <el-input v-model="fieldOptionForm.value" clearable />-->
	218	<!-- </el-form-item>-->
	219	<!-- </el-form>-->
	220	<!-- <template #footer>-->
	221	<!-- <el-button @click="fieldOptionModelVisible = false">取消</el-button>-->
	222	<!-- <el-button type="primary" @click="saveFieldOption">确定</el-button>-->
	223	<!-- </template>-->
	224	<!-- </el-dialog>-->
	225	</div>
	226	</template>
	227
	228	<script lang="ts" setup>
	229	import * as FormApi from '@/api/bpm/form'
	230
	231	defineOptions({ name: 'ElementForm' })
	232
	233	const props = defineProps({
	234	id: String,
	235	type: String
	236	})
	237	const prefix = inject('prefix')
	238	const width = inject('width')
	239
	240	const formKey = ref('')
	241	const businessKey = ref('')
	242	const optionModelTitle = ref('')
	243	const fieldList = ref<any[]>([])
	244	const formFieldForm = ref<any>({})
	245	const fieldType = ref({
	246	long: '长整型',
	247	string: '字符串',
	248	boolean: '布尔类',
	249	date: '日期类',
	250	enum: '枚举类',
	251	custom: '自定义类型'
	252	})
	253	const formFieldIndex = ref(-1) // 编辑中的字段， -1 为新增
	254	const formFieldOptionIndex = ref(-1) // 编辑中的字段配置项， -1 为新增
	255	const fieldModelVisible = ref(false)
	256	const fieldOptionModelVisible = ref(false)
	257	const fieldOptionForm = ref<any>({}) // 当前激活的字段配置项数据
	258	const fieldOptionType = ref('') // 当前激活的字段配置项弹窗类型
	259	const fieldEnumList = ref<any[]>([]) // 枚举值列表
	260	const fieldConstraintsList = ref<any[]>([]) // 约束条件列表
	261	const fieldPropertiesList = ref<any[]>([]) // 绑定属性列表
	262	const bpmnELement = ref()
	263	const elExtensionElements = ref()
	264	const formData = ref()
	265	const otherExtensions = ref()
	266
	267	const bpmnInstances = () => (window as any)?.bpmnInstances
	268	const resetFormList = () => {
	269	bpmnELement.value = bpmnInstances().bpmnElement
	270	formKey.value = bpmnELement.value.businessObject.formKey
3e359e	271	// if (formKey.value?.length > 0) {
H	272	// formKey.value = parseInt(formKey.value)
	273	// }
820397	274	// 获取元素扩展属性或者创建扩展属性
H	275	elExtensionElements.value =
	276	bpmnELement.value.businessObject.get('extensionElements') \|\|
	277	bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
	278	// 获取元素表单配置或者创建新的表单配置
	279	formData.value =
	280	elExtensionElements.value.values.filter((ex) => ex.$type === `${prefix}:FormData`)?.[0] \|\|
	281	bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] })
	282
	283	// 业务标识 businessKey，绑定在 formData 中
	284	businessKey.value = formData.value.businessKey
	285
	286	// 保留剩余扩展元素，便于后面更新该元素对应属性
	287	otherExtensions.value = elExtensionElements.value.values.filter(
	288	(ex) => ex.$type !== `${prefix}:FormData`
	289	)
	290
	291	// 复制原始值，填充表格
	292	fieldList.value = JSON.parse(JSON.stringify(formData.value.fields \|\| []))
	293
	294	// 更新元素扩展属性，避免后续报错
	295	updateElementExtensions()
	296	}
	297	const updateElementFormKey = () => {
	298	bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
	299	formKey: formKey.value
	300	})
	301	}
	302	const updateElementBusinessKey = () => {
	303	bpmnInstances().modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
	304	businessKey: businessKey.value
	305	})
	306	}
	307	// 根据类型调整字段type
	308	const changeFieldTypeType = (type) => {
	309	// this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
	310	formFieldForm.value['type'] = type === 'custom' ? '' : type
	311	}
	312
	313	// 打开字段详情侧边栏
	314	const openFieldForm = (field, index) => {
	315	formFieldIndex.value = index
	316	if (index !== -1) {
	317	const FieldObject = formData.value.fields[index]
	318	formFieldForm.value = JSON.parse(JSON.stringify(field))
	319	// 设置自定义类型
	320	// this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
	321	formFieldForm.value['typeType'] = !fieldType.value[field.type] ? 'custom' : field.type
	322	// 初始化枚举值列表
	323	field.type === 'enum' &&
	324	(fieldEnumList.value = JSON.parse(JSON.stringify(FieldObject?.values \|\| [])))
	325	// 初始化约束条件列表
	326	fieldConstraintsList.value = JSON.parse(
	327	JSON.stringify(FieldObject?.validation?.constraints \|\| [])
	328	)
	329	// 初始化自定义属性列表
	330	fieldPropertiesList.value = JSON.parse(JSON.stringify(FieldObject?.properties?.values \|\| []))
	331	} else {
	332	formFieldForm.value = {}
	333	// 初始化枚举值列表
	334	fieldEnumList.value = []
	335	// 初始化约束条件列表
	336	fieldConstraintsList.value = []
	337	// 初始化自定义属性列表
	338	fieldPropertiesList.value = []
	339	}
	340	fieldModelVisible.value = true
	341	}
	342	// 打开字段某个配置项弹窗
	343	const openFieldOptionForm = (option, index, type) => {
	344	fieldOptionModelVisible.value = true
	345	fieldOptionType.value = type
	346	formFieldOptionIndex.value = index
	347	if (type === 'property') {
	348	fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
	349	return (optionModelTitle.value = '属性配置')
	350	}
	351	if (type === 'enum') {
	352	fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
	353	return (optionModelTitle.value = '枚举值配置')
	354	}
	355	fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
	356	return (optionModelTitle.value = '约束条件配置')
	357	}
	358
	359	// 保存字段某个配置项
	360	const saveFieldOption = () => {
	361	if (formFieldOptionIndex.value === -1) {
	362	if (fieldOptionType.value === 'property') {
	363	fieldPropertiesList.value.push(fieldOptionForm.value)
	364	}
	365	if (fieldOptionType.value === 'constraint') {
	366	fieldConstraintsList.value.push(fieldOptionForm.value)
	367	}
	368	if (fieldOptionType.value === 'enum') {
	369	fieldEnumList.value.push(fieldOptionForm.value)
	370	}
	371	} else {
	372	fieldOptionType.value === 'property' &&
	373	fieldPropertiesList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
	374	fieldOptionType.value === 'constraint' &&
	375	fieldConstraintsList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
	376	fieldOptionType.value === 'enum' &&
	377	fieldEnumList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
	378	}
	379	fieldOptionModelVisible.value = false
	380	fieldOptionForm.value = {}
	381	}
	382	// 保存字段配置
	383	const saveField = () => {
	384	const { id, type, label, defaultValue, datePattern } = formFieldForm.value
	385	const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, { id, type, label })
	386	defaultValue && (Field.defaultValue = defaultValue)
	387	datePattern && (Field.datePattern = datePattern)
	388	// 构建属性
	389	if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
	390	const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
	391	return bpmnInstances().moddle.create(`${prefix}:Property`, {
	392	id: fp.id,
	393	value: fp.value
	394	})
	395	})
	396	Field.properties = bpmnInstances().moddle.create(`${prefix}:Properties`, {
	397	values: fieldPropertyList
	398	})
	399	}
	400	// 构建校验规则
	401	if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
	402	const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
	403	return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
	404	name: fc.name,
	405	config: fc.config
	406	})
	407	})
	408	Field.validation = bpmnInstances().moddle.create(`${prefix}:Validation`, {
	409	constraints: fieldConstraintList
	410	})
	411	}
	412	// 构建枚举值
	413	if (fieldEnumList.value && fieldEnumList.value.length) {
	414	Field.values = fieldEnumList.value.map((fe) => {
	415	return bpmnInstances().moddle.create(`${prefix}:Value`, { name: fe.name, id: fe.id })
	416	})
	417	}
	418	// 更新数组与表单配置实例
	419	if (formFieldIndex.value === -1) {
	420	fieldList.value.push(formFieldForm.value)
	421	formData.value.fields.push(Field)
	422	} else {
	423	fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value)
	424	formData.value.fields.splice(formFieldIndex.value, 1, Field)
	425	}
	426	updateElementExtensions()
	427	fieldModelVisible.value = false
	428	}
	429
	430	// 移除某个字段的配置项
	431	const removeFieldOptionItem = (option, index, type) => {
	432	// console.log(option, 'option')
	433	if (type === 'property') {
	434	fieldPropertiesList.value.splice(index, 1)
	435	return
	436	}
	437	if (type === 'enum') {
	438	fieldEnumList.value.splice(index, 1)
	439	return
	440	}
	441	fieldConstraintsList.value.splice(index, 1)
	442	}
	443	// 移除字段
	444	const removeField = (field, index) => {
	445	console.log(field, 'field')
	446	fieldList.value.splice(index, 1)
	447	formData.value.fields.splice(index, 1)
	448	updateElementExtensions()
	449	}
	450
	451	const updateElementExtensions = () => {
	452	// 更新回扩展元素
	453	const newElExtensionElements = bpmnInstances().moddle.create(`bpmn:ExtensionElements`, {
	454	values: otherExtensions.value.concat(formData.value)
	455	})
	456	// 更新到元素上
	457	bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
	458	extensionElements: newElExtensionElements
	459	})
	460	}
	461
	462	const formList = ref([]) // 流程表单的下拉框的数据
	463	onMounted(async () => {
	464	formList.value = await FormApi.getFormSimpleList()
	465	})
	466
	467	watch(
	468	() => props.id,
	469	(val) => {
	470	val &&
	471	val.length &&
	472	nextTick(() => {
	473	resetFormList()
	474	})
	475	},
	476	{ immediate: true }
	477	)
	478	</script>