iailab-plat-ui-vue3.git

dengzedong

5 天以前 f9b459a3fefd5fab0ee8e19268adb9d9eadab2a7

提交 \| 用户 \| 时间
3e359e	1	<template>
H	2	<el-drawer
	3	:append-to-body="true"
	4	v-model="settingVisible"
	5	:show-close="false"
	6	:size="550"
	7	:before-close="saveConfig"
	8	>
	9	<template #header>
	10	<div class="config-header">
	11	<input
	12	v-if="showInput"
	13	type="text"
	14	class="config-editable-input"
	15	@blur="blurEvent()"
	16	v-mountedFocus
	17	v-model="nodeName"
	18	:placeholder="nodeName"
	19	/>
	20	<div v-else class="node-name">
	21	{{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
	22	</div>
	23	<div class="divide-line"></div>
	24	</div>
	25	</template>
	26	<el-tabs type="border-card" v-model="activeTabName">
	27	<el-tab-pane label="抄送人" name="user">
	28	<div>
	29	<el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
	30	<el-form-item label="抄送人设置" prop="candidateStrategy">
	31	<el-radio-group
	32	v-model="configForm.candidateStrategy"
	33	@change="changeCandidateStrategy"
	34	>
	35	<el-radio
	36	v-for="(dict, index) in copyUserStrategies"
	37	:key="index"
	38	:value="dict.value"
	39	:label="dict.value"
	40	>
	41	{{ dict.label }}
	42	</el-radio>
	43	</el-radio-group>
	44	</el-form-item>
	45
	46	<el-form-item
	47	v-if="configForm.candidateStrategy == CandidateStrategy.ROLE"
	48	label="指定角色"
	49	prop="roleIds"
	50	>
	51	<el-select v-model="configForm.roleIds" clearable multiple style="width: 100%">
	52	<el-option
	53	v-for="item in roleOptions"
	54	:key="item.id"
	55	:label="item.name"
	56	:value="item.id"
	57	/>
	58	</el-select>
	59	</el-form-item>
	60	<el-form-item
	61	v-if="
	62	configForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER \|\|
	63	configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER \|\|
	64	configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
	65	"
	66	label="指定部门"
	67	prop="deptIds"
	68	span="24"
	69	>
	70	<el-tree-select
	71	ref="treeRef"
	72	v-model="configForm.deptIds"
	73	:data="deptTreeOptions"
	74	:props="defaultProps"
	75	empty-text="加载中，请稍后"
	76	multiple
	77	node-key="id"
	78	style="width: 100%"
	79	show-checkbox
	80	/>
	81	</el-form-item>
	82	<el-form-item
	83	v-if="configForm.candidateStrategy == CandidateStrategy.POST"
	84	label="指定岗位"
	85	prop="postIds"
	86	span="24"
	87	>
	88	<el-select v-model="configForm.postIds" clearable multiple style="width: 100%">
	89	<el-option
	90	v-for="item in postOptions"
	91	:key="item.id"
	92	:label="item.name"
	93	:value="item.id!"
	94	/>
	95	</el-select>
	96	</el-form-item>
	97	<el-form-item
	98	v-if="configForm.candidateStrategy == CandidateStrategy.USER"
	99	label="指定用户"
	100	prop="userIds"
	101	span="24"
	102	>
	103	<el-select v-model="configForm.userIds" clearable multiple style="width: 100%">
	104	<el-option
	105	v-for="item in userOptions"
	106	:key="item.id"
	107	:label="item.nickname"
	108	:value="item.id"
	109	/>
	110	</el-select>
	111	</el-form-item>
	112	<el-form-item
	113	v-if="configForm.candidateStrategy === CandidateStrategy.USER_GROUP"
	114	label="指定用户组"
	115	prop="userGroups"
	116	>
	117	<el-select v-model="configForm.userGroups" clearable multiple style="width: 100%">
	118	<el-option
	119	v-for="item in userGroupOptions"
	120	:key="item.id"
	121	:label="item.name"
	122	:value="item.id"
	123	/>
	124	</el-select>
	125	</el-form-item>
	126	<el-form-item
	127	v-if="configForm.candidateStrategy === CandidateStrategy.FORM_USER"
	128	label="表单内用户字段"
	129	prop="formUser"
	130	>
	131	<el-select v-model="configForm.formUser" clearable style="width: 100%">
	132	<el-option
	133	v-for="(item, idx) in userFieldOnFormOptions"
	134	:key="idx"
	135	:label="item.title"
	136	:value="item.field"
	137	:disabled ="!item.required"
	138	/>
	139	</el-select>
	140	</el-form-item>
	141	<el-form-item
	142	v-if="configForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER"
	143	label="表单内部门字段"
	144	prop="formDept"
	145	>
	146	<el-select v-model="configForm.formDept" clearable style="width: 100%">
	147	<el-option
	148	v-for="(item, idx) in deptFieldOnFormOptions"
	149	:key="idx"
	150	:label="item.title"
	151	:value="item.field"
	152	:disabled ="!item.required"
	153	/>
	154	</el-select>
	155	</el-form-item>
	156	<el-form-item
	157	v-if="
	158	configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER \|\|
	159	configForm.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER \|\|
	160	configForm.candidateStrategy ==
	161	CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER \|\|
	162	configForm.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER
	163	"
	164	:label="deptLevelLabel!"
	165	prop="deptLevel"
	166	span="24"
	167	>
	168	<el-select v-model="configForm.deptLevel" clearable>
	169	<el-option
	170	v-for="(item, index) in MULTI_LEVEL_DEPT"
	171	:key="index"
	172	:label="item.label"
	173	:value="item.value"
	174	/>
	175	</el-select>
	176	</el-form-item>
	177	<el-form-item
	178	v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
	179	label="流程表达式"
	180	prop="expression"
	181	>
	182	<el-input
	183	type="textarea"
	184	v-model="configForm.expression"
	185	clearable
	186	style="width: 100%"
	187	/>
	188	</el-form-item>
	189	</el-form>
	190	</div>
	191	</el-tab-pane>
	192	<el-tab-pane label="表单字段权限" name="fields" v-if="formType === 10">
	193	<div class="field-setting-pane">
	194	<div class="field-setting-desc">字段权限</div>
	195	<div class="field-permit-title">
	196	<div class="setting-title-label first-title"> 字段名称 </div>
	197	<div class="other-titles">
	198	<span class="setting-title-label">只读</span>
	199	<span class="setting-title-label">可编辑</span>
	200	<span class="setting-title-label">隐藏</span>
	201	</div>
	202	</div>
	203	<div
	204	class="field-setting-item"
	205	v-for="(item, index) in fieldsPermissionConfig"
	206	:key="index"
	207	>
	208	<div class="field-setting-item-label"> {{ item.title }} </div>
	209	<el-radio-group class="field-setting-item-group" v-model="item.permission">
	210	<div class="item-radio-wrap">
	211	<el-radio
	212	:value="FieldPermissionType.READ"
	213	size="large"
	214	:label="FieldPermissionType.WRITE"
	215	><span></span
	216	></el-radio>
	217	</div>
	218	<div class="item-radio-wrap">
	219	<el-radio
	220	:value="FieldPermissionType.WRITE"
	221	size="large"
	222	:label="FieldPermissionType.WRITE"
	223	disabled
	224	><span></span
	225	></el-radio>
	226	</div>
	227	<div class="item-radio-wrap">
	228	<el-radio
	229	:value="FieldPermissionType.NONE"
	230	size="large"
	231	:label="FieldPermissionType.NONE"
	232	><span></span
	233	></el-radio>
	234	</div>
	235	</el-radio-group>
	236	</div>
	237	</div>
	238	</el-tab-pane>
	239	</el-tabs>
	240	<template #footer>
	241	<el-divider />
	242	<div>
	243	<el-button type="primary" @click="saveConfig">确定</el-button>
	244	<el-button @click="closeDrawer">取消</el-button>
	245	</div>
	246	</template>
	247	</el-drawer>
	248	</template>
	249	<script setup lang="ts">
	250	import {
	251	SimpleFlowNode,
	252	CandidateStrategy,
	253	NodeType,
	254	CANDIDATE_STRATEGY,
	255	FieldPermissionType,
	256	MULTI_LEVEL_DEPT
	257	} from '../consts'
	258	import {
	259	useWatchNode,
	260	useDrawer,
	261	useNodeName,
	262	useFormFieldsPermission,
	263	useNodeForm,
	264	CopyTaskFormType
	265	} from '../node'
	266	import { defaultProps } from '@/utils/tree'
	267	defineOptions({
	268	name: 'CopyTaskNodeConfig'
	269	})
	270	const props = defineProps({
	271	flowNode: {
	272	type: Object as () => SimpleFlowNode,
	273	required: true
	274	}
	275	})
	276	const deptLevelLabel = computed(() => {
	277	let label = '部门负责人来源'
	278	if (configForm.value.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) {
	279	label = label + '(指定部门向上)'
	280	} else {
	281	label = label + '(发起人部门向上)'
	282	}
	283	return label
	284	})
	285	// 抽屉配置
	286	const { settingVisible, closeDrawer, openDrawer } = useDrawer()
	287	// 当前节点
	288	const currentNode = useWatchNode(props)
	289	// 节点名称
	290	const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.COPY_TASK_NODE)
	291	// 激活的 Tab 标签页
	292	const activeTabName = ref('user')
	293	// 表单字段权限配置
	294	const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFields } =
	295	useFormFieldsPermission(FieldPermissionType.READ)
	296	// 表单内用户字段选项, 必须是必填和用户选择器
	297	const userFieldOnFormOptions = computed(() => {
	298	return formFieldOptions.filter((item) => item.type === 'UserSelect')
	299	})
	300	// 表单内部门字段选项, 必须是必填和部门选择器
	301	const deptFieldOnFormOptions = computed(() => {
	302	return formFieldOptions.filter((item) => item.type === 'DeptSelect')
	303	})
	304	// 抄送人表单配置
	305	const formRef = ref() // 表单 Ref
	306	// 表单校验规则
	307	const formRules = reactive({
	308	candidateStrategy: [{ required: true, message: '抄送人设置不能为空', trigger: 'change' }],
	309	userIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
	310	roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
	311	deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
	312	userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }],
	313	postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
	314	formUser: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }],
	315	formDept: [{ required: true, message: '表单内部门字段不能为空', trigger: 'change' }],
	316	expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }]
	317	})
	318
	319	const {
	320	configForm: tempConfigForm,
	321	roleOptions,
	322	postOptions,
	323	userOptions,
	324	userGroupOptions,
	325	deptTreeOptions,
	326	getShowText,
	327	handleCandidateParam,
	328	parseCandidateParam
	329	} = useNodeForm(NodeType.COPY_TASK_NODE)
	330	const configForm = tempConfigForm as Ref<CopyTaskFormType>
	331	// 抄送人策略，去掉发起人自选和发起人自己
	332	const copyUserStrategies = computed(() => {
	333	return CANDIDATE_STRATEGY.filter((item) => item.value !== CandidateStrategy.START_USER)
	334	})
	335	// 改变抄送人设置策略
	336	const changeCandidateStrategy = () => {
	337	configForm.value.userIds = []
	338	configForm.value.deptIds = []
	339	configForm.value.roleIds = []
	340	configForm.value.postIds = []
	341	configForm.value.userGroups = []
	342	configForm.value.deptLevel = 1
	343	configForm.value.formUser = ''
	344	}
	345	// 保存配置
	346	const saveConfig = async () => {
	347	activeTabName.value = 'user'
	348	if (!formRef) return false
	349	const valid = await formRef.value.validate()
	350	if (!valid) return false
	351	const showText = getShowText()
	352	if (!showText) return false
	353	currentNode.value.name = nodeName.value!
	354	currentNode.value.candidateParam = handleCandidateParam()
	355	currentNode.value.candidateStrategy = configForm.value.candidateStrategy
	356	currentNode.value.showText = showText
	357	currentNode.value.fieldsPermission = fieldsPermissionConfig.value
	358	settingVisible.value = false
	359	return true
	360	}
	361	// 显示抄送节点配置，由父组件传过来
	362	const showCopyTaskNodeConfig = (node: SimpleFlowNode) => {
	363	nodeName.value = node.name
	364	// 抄送人设置
	365	configForm.value.candidateStrategy = node.candidateStrategy!
	366	parseCandidateParam(node.candidateStrategy!, node?.candidateParam)
	367	// 表单字段权限
	368	getNodeConfigFormFields(node.fieldsPermission)
	369	}
	370
	371	defineExpose({ openDrawer, showCopyTaskNodeConfig }) // 暴露方法给父组件
	372	</script>
	373
	374	<style lang="scss" scoped></style>