reactor:流程调整;

src/components/LogicFlow/PropertySetting/start.vue

@@ -1,176 +1,193 @@
 <template>
-  <div class="form">
-    <el-form :model="form" label-width="130px" ref="ruleFormRef">
-      <el-form-item label="节点名称" prop="name" :rules="[{ required: true, message: '请输入节点名称', trigger: 'blur' }]">
-        <el-input v-model="form.name" placeholder="请输入节点名称" clearable></el-input>
-      </el-form-item>
-      <el-form-item label="节点编码" prop="stepType" :rules="[{ required: true, message: '请输入节点编码', trigger: 'blur' }]">
-        <el-input v-model="form.code" disabled placeholder="请输入节点编码" clearable></el-input>
-      </el-form-item>
-      <el-form-item label="节点类型" prop="stepTypeName" :rules="[{ required: true, message: '请选择节点类型', trigger: 'change' }]">
-        <el-input v-model="form.stepTypeName" disabled></el-input>
-      </el-form-item>
-      <el-form-item label="业务类型" prop="businessType" :rules="[{ required: true, message: '请选择业务类型', trigger: 'change' }]">
-        <el-select v-model="form.businessType" class="w100" placeholder="请选择业务类型">
-          <el-option v-for="item in baseData.businessTypeOptions" :key="item.key" :label="item.value" :value="item.key" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="办理者类型" prop="handlerType" :rules="[{ required: true, message: '请选择办理者类型', trigger: 'change' }]">
-        <el-select v-model="form.handlerType" class="w100" placeholder="请选择办理者类型" @change="changeOptions">
-          <el-option v-for="item in baseData.handlerTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-      </el-form-item>
-      <!-- 选择其他 -->
-      <el-form-item
-          v-if="[0, 1, 2].includes(form.handlerType)"
-          :label="itemName"
-          prop="handlerTypeItemsOrigin"
-          :rules="[{ required: true, message: `请选择${itemName}`, trigger: 'change' }]"
-      >
-        <el-select v-model="form.handlerTypeItemsOrigin" multiple filterable class="w100" @change="getSelectValue" value-key="id">
-          <el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item" />
-        </el-select>
-      </el-form-item>
-      <!-- 选择用户 -->
-      <el-form-item
-          v-if="[3].includes(form.handlerType)"
-          :label="itemName"
-          prop="handlerTypeItemsOrigin"
-          :rules="[{ required: true, message: `请选择${itemName}`, trigger: 'change' }]"
-      >
-        <el-select
-            v-model="form.handlerTypeItemsOrigin"
-            multiple
-            filterable
-            remote
-            class="w100"
-            reserve-keyword
-            placeholder="请输入用户名称"
-            remote-show-suffix
-            :remote-method="remoteMethod"
-            :loading="loading"
-            @change="getSelectValue"
-            value-key="id"
-        >
-          <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item" />
-        </el-select>
-      </el-form-item>
-      <!-- 部门 -->
-      <el-form-item
-          v-if="[4].includes(form.handlerType)"
-          :label="itemName"
-          prop="handlerTypeItemsOrigin"
-          :rules="[{ required: true, message: `请选择${itemName}`, trigger: 'change' }]"
-      >
-        <el-tree-select
-            :props="{ label: 'name' }"
-            node-key="id"
-            class="w100"
-            ref="treeSelectRef"
-            v-model="form.handlerTypeItemsOrigin"
-            :data="orgData"
-            multiple
-            :render-after-expand="false"
-            show-checkbox
-            check-strictly
-            default-expand-all
-            filterable
-        />
-      </el-form-item>
-      <el-form-item label="否决按钮" prop="canReject">
-        <el-switch
-            v-model="form.canReject"
-            inline-prompt
-            active-text="启用"
-            inactive-text="禁用"
-        />
-      </el-form-item>
-      <el-form-item label="执行模式" prop="executeMode" :rules="[{ required: true, message: '请选择执行模式', trigger: 'change' }]">
-        <el-select v-model="form.executeMode" class="w100" placeholder="请选择执行模式">
-          <el-option v-for="item in baseData.executeModeOptions" :key="item.key" :label="item.value" :value="item.key" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="支持会签" prop="canStartCountersign">
-        <el-switch
-            v-model="form.canStartCountersign"
-            inline-prompt
-            active-text="支持"
-            inactive-text="不支持"
-        />
-      </el-form-item>
-      <el-form-item label="会签策略" prop="countersignPolicy" :rules="[{ required: true, message: '请选择会签策略', trigger: 'change' }]" v-if="form.canStartCountersign">
-        <el-select v-model="form.countersignPolicy" class="w100" placeholder="请选择会签策略">
-          <el-option v-for="item in baseData.dynamicPolicyOptions" :key="item.key" :label="item.value" :value="item.key" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="实例化模式" prop="instanceMode" :rules="[{ required: true, message: '请选择实例化模式', trigger: 'change' }]">
-        <el-select v-model="form.instanceMode" class="w100" placeholder="请选择实例化模式">
-          <el-option v-for="item in baseData.instanceModeOptions" :key="item.key" :label="item.value" :value="item.key" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="动态策略" prop="instancePolicy" :rules="[{ required: true, message: '请选择动态策略', trigger: 'change' }]" v-if="form.instanceMode === 1">
-        <el-select v-model="form.instancePolicy" class="w100" placeholder="请选择动态策略" @change="selectInstancePolicy">
-          <el-option v-for="item in baseData.dynamicPolicyOptions" :key="item.key" :label="item.value" :value="item.key" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="动态终止标识" prop="terminalDynamicMark" :rules="[{ required: true, message: '请选择动态终止标识', trigger: 'change' }]" v-if="form.instanceMode === 1">
-        <el-select v-model="form.terminalDynamicMark" class="w100" placeholder="请选择动态终止标识">
-          <el-option v-for="item in baseData.dynamicStrategyOptions" :key="item.key" :label="item.value" :value="item.key" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="标识" prop="tag" :rules="[{ required: false, message: '请输入标识', trigger: 'blur' }]">
-        <el-input v-model="form.tag" placeholder="请输入标识" type="textarea" :autosize="{ minRows: 4, maxRows: 8 }"></el-input>
-      </el-form-item>
-    </el-form>
-  </div>
+	<div class="form">
+		<el-form :model="form" label-width="130px" ref="ruleFormRef">
+			<el-form-item label="节点名称" prop="name" :rules="[{ required: true, message: '请输入节点名称', trigger: 'blur' }]">
+				<el-input v-model="form.name" placeholder="请输入节点名称" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="节点编码" prop="stepType" :rules="[{ required: true, message: '请输入节点编码', trigger: 'blur' }]">
+				<el-input v-model="form.code" disabled placeholder="请输入节点编码" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="节点类型" prop="stepTypeName" :rules="[{ required: true, message: '请选择节点类型', trigger: 'change' }]">
+				<el-input v-model="form.stepTypeName" disabled></el-input>
+			</el-form-item>
+			<el-form-item label="业务类型" prop="businessType" :rules="[{ required: true, message: '请选择业务类型', trigger: 'change' }]">
+				<el-select v-model="form.businessType" class="w100" placeholder="请选择业务类型">
+					<el-option v-for="item in baseData.businessTypeOptions" :key="item.key" :label="item.value" :value="item.key" />
+				</el-select>
+			</el-form-item>
+			<el-form-item label="办理者类型" prop="handlerType" :rules="[{ required: true, message: '请选择办理者类型', trigger: 'change' }]">
+				<el-select v-model="form.handlerType" class="w100" placeholder="请选择办理者类型" @change="changeOptions">
+					<el-option v-for="item in baseData.handlerTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
+			</el-form-item>
+			<!-- 选择其他 -->
+			<el-form-item
+				v-if="[0, 1, 2].includes(form.handlerType)"
+				:label="itemName"
+				prop="handlerTypeItemsOrigin"
+				:rules="[{ required: true, message: `请选择${itemName}`, trigger: 'change' }]"
+			>
+				<el-select
+					v-model="form.handlerTypeItemsOrigin"
+					multiple
+					filterable
+					class="w100"
+					@change="getSelectValue"
+					value-key="key"
+					collapse-tags
+					collapse-tags-tooltip
+				>
+					<el-option v-for="item in selectList" :key="item.key" :label="item.value" :value="item" />
+				</el-select>
+			</el-form-item>
+			<!-- 选择用户 -->
+			<el-form-item
+				v-if="[3].includes(form.handlerType)"
+				:label="itemName"
+				prop="handlerTypeItemsOrigin"
+				:rules="[{ required: true, message: `请选择${itemName}`, trigger: 'change' }]"
+			>
+				<el-select
+					v-model="form.handlerTypeItemsOrigin"
+					multiple
+					filterable
+					remote
+					class="w100"
+					reserve-keyword
+					placeholder="请输入用户名称"
+					remote-show-suffix
+					:remote-method="remoteMethod"
+					:loading="loading"
+					@change="getSelectValue"
+					value-key="id"
+					collapse-tags
+					collapse-tags-tooltip
+				>
+					<el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item" />
+				</el-select>
+			</el-form-item>
+			<!-- 部门 -->
+			<el-form-item
+				v-if="[4].includes(form.handlerType)"
+				:label="itemName"
+				prop="handlerTypeItemsOrigin"
+				:rules="[{ required: true, message: `请选择${itemName}`, trigger: 'change' }]"
+			>
+				<el-tree-select
+					:props="{ label: 'name' }"
+					node-key="id"
+					class="w100"
+					ref="treeSelectRef"
+					v-model="form.handlerTypeItemsOrigin"
+					:data="orgData"
+					multiple
+					:render-after-expand="false"
+					show-checkbox
+					check-strictly
+					default-expand-all
+					filterable
+					@check="selectOrg"
+					collapse-tags
+					collapse-tags-tooltip
+				/>
+			</el-form-item>
+			<el-form-item label="否决按钮" prop="canReject">
+				<el-switch v-model="form.canReject" inline-prompt active-text="启用" inactive-text="禁用" />
+			</el-form-item>
+			<el-form-item label="执行模式" prop="executeMode" :rules="[{ required: true, message: '请选择执行模式', trigger: 'change' }]">
+				<el-select v-model="form.executeMode" class="w100" placeholder="请选择执行模式">
+					<el-option v-for="item in baseData.executeModeOptions" :key="item.key" :label="item.value" :value="item.key" />
+				</el-select>
+			</el-form-item>
+			<el-form-item label="支持会签" prop="canStartCountersign">
+				<el-switch v-model="form.canStartCountersign" inline-prompt active-text="支持" inactive-text="不支持" />
+			</el-form-item>
+			<el-form-item
+				label="会签策略"
+				prop="countersignPolicy"
+				:rules="[{ required: true, message: '请选择会签策略', trigger: 'change' }]"
+				v-if="form.canStartCountersign"
+			>
+				<el-select v-model="form.countersignPolicy" class="w100" placeholder="请选择会签策略">
+					<el-option v-for="item in baseData.dynamicPolicyOptions" :key="item.key" :label="item.value" :value="item.key" />
+				</el-select>
+			</el-form-item>
+			<el-form-item label="实例化模式" prop="instanceMode" :rules="[{ required: true, message: '请选择实例化模式', trigger: 'change' }]">
+				<el-select v-model="form.instanceMode" class="w100" placeholder="请选择实例化模式">
+					<el-option v-for="item in baseData.instanceModeOptions" :key="item.key" :label="item.value" :value="item.key" />
+				</el-select>
+			</el-form-item>
+			<el-form-item
+				label="动态策略"
+				prop="instancePolicy"
+				:rules="[{ required: true, message: '请选择动态策略', trigger: 'change' }]"
+				v-if="form.instanceMode === 1"
+			>
+				<el-select v-model="form.instancePolicy" class="w100" placeholder="请选择动态策略" @change="selectInstancePolicy">
+					<el-option v-for="item in baseData.dynamicPolicyOptions" :key="item.key" :label="item.value" :value="item.key" />
+				</el-select>
+			</el-form-item>
+			<el-form-item
+				label="动态终止标识"
+				prop="terminalDynamicMark"
+				:rules="[{ required: true, message: '请选择动态终止标识', trigger: 'change' }]"
+				v-if="form.instanceMode === 1"
+			>
+				<el-select v-model="form.terminalDynamicMark" class="w100" placeholder="请选择动态终止标识">
+					<el-option v-for="item in baseData.dynamicStrategyOptions" :key="item.key" :label="item.value" :value="item.key" />
+				</el-select>
+			</el-form-item>
+			<el-form-item label="标识" prop="tag" :rules="[{ required: false, message: '请输入标识', trigger: 'blur' }]">
+				<el-input v-model="form.tag" placeholder="请输入标识" type="textarea" :autosize="{ minRows: 4, maxRows: 8 }"></el-input>
+			</el-form-item>
+		</el-form>
+	</div>
 </template>
 <script lang="ts" setup name="flowNode">
 import { reactive, watch, onMounted, ref } from 'vue';
 import { getSelectList, queryUser } from '/@/api/system/workflow';
 import { getCanUseOrg } from '/@/api/system/user';
 import { removeDuplicate } from '/@/utils/arrayOperation';
-import {ElInput} from "element-plus";
+import { ElInput } from 'element-plus';
 const ruleFormRef = ref<RefType>();
 // 定义属性
 const props = defineProps({
-  modelValue: {
-    type: Object,
-    default: () => {
-    }
-  },
-  baseData: {
-    type: Object,
-    default: () => {
-    }
-  }
-})
+	modelValue: {
+		type: Object,
+		default: () => {},
+	},
+	baseData: {
+		type: Object,
+		default: () => {},
+	},
+});
 // 注意:ref不能与model一样，相同的话表单双向绑定将会失效
 const form = reactive<Record<string, any>>({
-  ...props.modelValue, // 传入的数据
-  stepTypeName:'开始节点',
-  stepType:1,// 节点类型(开始1 结束2)
-  businessType:null,// 业务类型
-  handlerType:null,// 办理者类型
-  handlerTypeItemsOrigin:[],// 办理者类型
-  handlerTypeItems:'[]',// 办理者类型
-  canReject:false, // 否决按钮
-  executeMode:null, // 执行模式
-  canStartCountersign:false, // 支持会签
-  countersignPolicy:null, // 会签策略
-  instanceMode:null, // 实例化模式
-  instancePolicy:null, // 动态策略
-  terminalDynamicMark:null, // 动态终止标识
-  tag:'', // 标识
+	...props.modelValue, // 传入的数据
+	stepTypeName: '开始节点',
+	stepType: 1, // 节点类型(开始1 结束2)
+	businessType: null, // 业务类型
+	handlerType: null, // 办理者类型
+	handlerTypeItemsOrigin: [], // 办理者类型
+	handlerTypeItems: '[]', // 办理者类型
+	canReject: false, // 否决按钮
+	executeMode: null, // 执行模式
+	canStartCountersign: false, // 支持会签
+	countersignPolicy: null, // 会签策略
+	instanceMode: null, // 实例化模式
+	instancePolicy: null, // 动态策略
+	terminalDynamicMark: null, // 动态终止标识
+	tag: '', // 标识
 }) as any;
 const emits = defineEmits(['update:modelValue']); // 定义事件
 const loading = ref(false); // 加载
 watch(
-    () => form,
-    () => {
-      form.stepTypeName = form.name+'节点';
-      emits('update:modelValue', Object.assign(props.modelValue, form));
-    },
-    { deep: true }
+	() => form,
+	() => {
+		form.stepTypeName = form.name + '节点';
+		emits('update:modelValue', Object.assign(props.modelValue, form));
+	},
+	{ deep: true }
 );
 // 选择处理人获取数据
 // 下拉内容
@@ -178,137 +195,135 @@ const selectList = ref<EmptyArrayType>() as any;
 // 会签
 const itemName = ref<string>('');
 const changeOptions = (e: any) => {
-  form.handlerTypeItemsOrigin = [];
-  form.handlerTypeItems = '[]';
-  itemName.value = baseData.handlerTypeOptions[e].label;
-  if ([0, 1, 2].includes(e)) {
-    getSelectList(e).then((res: any) => {
-      selectList.value = res.result ?? [];
-      selectList.value = selectList.value.map((item: any) => ({
-        id: item.key,
-        name: item.value,
-      }));
-    });
-  }
-  if (e === 4) {
-    getOrgListFn();
-  }
+	form.handlerTypeItemsOrigin = [];
+	form.handlerTypeItems = '[]';
+	itemName.value = baseData.handlerTypeOptions[e].label;
+	if ([0, 1, 2].includes(e)) {
+		getSelectList(e).then((res: any) => {
+			selectList.value = res.result ?? [];
+		});
+	}
+	if (e === 4) {
+		getOrgListFn();
+	}
 };
 // 远程搜索用户名称
 // 指定用户列表
 const userList = ref<EmptyArrayType>([]);
 const remoteMethod = (query: string) => {
-  if (query !== '') {
-    loading.value = true;
-    queryUser({ name: query }).then((res: any) => {
-      loading.value = false;
-      const newUsers = res.result.map((item: any) => {
-        return {
-          ...item,
-          name: !item.name.includes('-') ? item.name + '-' + item.organization.name : item.name,
-        };
-      });
-      userList.value = removeDuplicate([...newUsers, ...userList.value], 'id');
-    });
-  }
+	if (query !== '') {
+		loading.value = true;
+		queryUser({ name: query }).then((res: any) => {
+			loading.value = false;
+			const newUsers = res.result.map((item: any) => {
+				return {
+					...item,
+					name: !item.name.includes('-') ? item.name + '-' + item.organization.name : item.name,
+				};
+			});
+			userList.value = removeDuplicate([...newUsers, ...userList.value], 'id');
+		});
+	}
 };
 
 // 获取可用组织
 const orgData = ref<EmptyArrayType>([]);
 const getOrgListFn = () => {
-  getCanUseOrg().then((res: any) => {
-    orgData.value = res?.result ?? [];
-  });
+	getCanUseOrg().then((res: any) => {
+		orgData.value = res?.result ?? [];
+	});
 };
-const treeSelectRef = ref<RefType>();
 // 获取选择对象
 const getSelectValue = (query: any[]) => {
-  let arr: EmptyArrayType;
-  arr = query.map((item: any) => ({ name: item.name, id: item.id }));
-  // 使用模板字符串
-  form.handlerTypeItems = `${JSON.stringify(arr)}`;
+	let arr: EmptyArrayType = [];
+	if ([0, 1, 2].includes(form.handlerType)) {
+		arr = query;
+	} else if ([3].includes(form.handlerType)) {
+		arr = query.map((item: any) => ({ key: item.id, value: item.name }));
+	}
+	// 使用模板字符串
+	form.handlerTypeItems = `${JSON.stringify(arr)}`;
+};
+// 选择部门
+const treeSelectRef = ref<RefType>();
+const selectOrg = () => {
+	const currentNode = treeSelectRef.value.getCheckedNodes();
+	let arr: EmptyArrayType = [];
+	arr = currentNode.map((item: any) => ({ key: item.id, value: item.name }));
+	// 使用模板字符串
+	form.handlerTypeItems = `${JSON.stringify(arr)}`;
 };
 // 选择动态策略
-const selectInstancePolicy = (val:string|number)=>{
-  ruleFormRef.value.resetFields('terminalDynamicMark');
-  baseData.dynamicStrategyOptions = [];
-  let item = baseData.dynamicPolicyOptions.filter((item:any)=>item.key === val)[0];
-  if(item.items && item.items.length){
-    baseData.dynamicStrategyOptions = item.items;
-  }
-}
+const selectInstancePolicy = (val: string | number) => {
+	ruleFormRef.value.resetFields('terminalDynamicMark');
+	baseData.dynamicStrategyOptions = [];
+	let item = baseData.dynamicPolicyOptions.filter((item: any) => item.key === val)[0];
+	if (item.items && item.items.length) {
+		baseData.dynamicStrategyOptions = item.items;
+	}
+};
 const baseData = reactive<any>({
-  businessTypeOptions: <EmptyArrayType>[], // 业务类型
-  countersignMode: <EmptyArrayType>[], // 会签
-  handlerTypeOptions: <EmptyArrayType>[], // 办理者类型
-  dynamicStrategyOptions: <EmptyArrayType>[], // 动态策略
-  executeModeOptions: <EmptyArrayType>[], // 执行模式
-  dynamicPolicyOptions: <EmptyArrayType>[], // 会签策略
-  instanceModeOptions: <EmptyArrayType>[], // 实例化模式
+	businessTypeOptions: <EmptyArrayType>[], // 业务类型
+	countersignMode: <EmptyArrayType>[], // 会签
+	handlerTypeOptions: <EmptyArrayType>[], // 办理者类型
+	dynamicStrategyOptions: <EmptyArrayType>[], // 动态策略
+	executeModeOptions: <EmptyArrayType>[], // 执行模式
+	dynamicPolicyOptions: <EmptyArrayType>[], // 会签策略
+	instanceModeOptions: <EmptyArrayType>[], // 实例化模式
 });
 // 会签结束节点
 const nodesOptions = ref([] as any);
 onMounted(async () => {
-  const {
-    stepTypeOptions,
-    businessTypeOptions,
-    handlerTypeOptions,
-    countersignMode,
-    dynamicPolicyOptions,
-    executeModeOptions,
-    instanceModeOptions,
-  } = props.baseData;
-  baseData.businessTypeOptions = businessTypeOptions; // 业务类型
-  baseData.stepTypeOptions = stepTypeOptions; // 节点类型
-  baseData.handlerTypeOptions = handlerTypeOptions.map((item: any) => ({
-    // 办理者类型
-    value: item.key,
-    label: item.value,
-  }));
-  baseData.executeModeOptions = executeModeOptions; // 执行模式
-  baseData.countersignMode = countersignMode;// 支持发起会签
-  baseData.dynamicPolicyOptions = dynamicPolicyOptions; // 会签策略
-  baseData.instanceModeOptions = instanceModeOptions; // 实例模式
+	const { stepTypeOptions, businessTypeOptions, handlerTypeOptions, countersignMode, dynamicPolicyOptions, executeModeOptions, instanceModeOptions } =
+		props.baseData;
+	baseData.businessTypeOptions = businessTypeOptions; // 业务类型
+	baseData.stepTypeOptions = stepTypeOptions; // 节点类型
+	baseData.handlerTypeOptions = handlerTypeOptions.map((item: any) => ({
+		// 办理者类型
+		value: item.key,
+		label: item.value,
+	}));
+	baseData.executeModeOptions = executeModeOptions; // 执行模式
+	baseData.countersignMode = countersignMode; // 支持发起会签
+	baseData.dynamicPolicyOptions = dynamicPolicyOptions; // 会签策略
+	baseData.instanceModeOptions = instanceModeOptions; // 实例模式
 
-  // 合并表单
-  Object.assign(form, props.modelValue);
-  if (form.handlerTypeItems.includes('[')) {
-    switch (form.handlerType) {
-      case 0:
-      case 1:
-      case 2:
-        form.handlerTypeItemsOrigin = JSON.parse(form.handlerTypeItems);
-        break;
-      case 3:
-        userList.value = form.handlerTypeItemsOrigin = JSON.parse(form.handlerTypeItems);
-        break;
-      case 4:
-        form.handlerTypeItemsOrigin = JSON.parse(form.handlerTypeItems).map((v: any) => v.id);
-        break;
-      default:
-        break;
-    }
-  }
-  if ([0, 1, 2].includes(form.handlerType)) {
-    const res: any = await getSelectList(form.handlerType);
-    selectList.value = res.result ?? [];
-    selectList.value = selectList.value.map((item: any) => ({
-      id: item.key,
-      name: item.value,
-    }));
-    if (baseData.handlerTypeOptions.length) itemName.value = baseData.handlerTypeOptions[form.handlerType].label;
-  } else if ([3].includes(form.handlerType)) {
-    if (baseData.handlerTypeOptions.length) itemName.value = baseData.handlerTypeOptions[form.handlerType].label;
-  } else if ([4].includes(form.handlerType)) {
-    if (baseData.handlerTypeOptions.length) itemName.value = baseData.handlerTypeOptions[form.handlerType].label;
-    getOrgListFn();
-  }
-  if(form.instancePolicy || form.instancePolicy === 0){
-    selectInstancePolicy(form.instancePolicy);
-  }
+	// 合并表单
+	Object.assign(form, props.modelValue);
+	if (form.handlerTypeItems.includes('[')) {
+		switch (form.handlerType) {
+			case 0:
+			case 1:
+			case 2:
+				form.handlerTypeItemsOrigin = JSON.parse(form.handlerTypeItems);
+				break;
+			case 3:
+				const users = JSON.parse(form.handlerTypeItems);
+				userList.value = form.handlerTypeItemsOrigin = users.map((item: any) => ({ id: item.key, name: item.value }));
+				break;
+			case 4:
+				form.handlerTypeItemsOrigin = JSON.parse(form.handlerTypeItems).map((v: any) => v.key);
+				break;
+			default:
+				break;
+		}
+	}
+	if ([0, 1, 2].includes(form.handlerType)) {
+		const res: any = await getSelectList(form.handlerType);
+		selectList.value = res.result ?? [];
+		if (baseData.handlerTypeOptions.length) itemName.value = baseData.handlerTypeOptions[form.handlerType].label;
+	} else if ([3].includes(form.handlerType)) {
+		if (baseData.handlerTypeOptions.length) itemName.value = baseData.handlerTypeOptions[form.handlerType].label;
+	} else if ([4].includes(form.handlerType)) {
+		if (baseData.handlerTypeOptions.length) itemName.value = baseData.handlerTypeOptions[form.handlerType].label;
+		getOrgListFn();
+	}
+	if (form.instancePolicy || form.instancePolicy === 0) {
+		selectInstancePolicy(form.instancePolicy);
+	}
 });
 // 导入属性及方法给外部调用
 defineExpose({
-  ruleFormRef,
+	ruleFormRef,
 });
 </script>

src/components/LogicFlow/PropertySetting/task.vue

@@ -19,7 +19,7 @@
 			</el-form-item>
 			<el-form-item label="办理者类型" prop="handlerType" :rules="[{ required: true, message: '请选择办理者类型', trigger: 'change' }]">
 				<el-select v-model="form.handlerType" class="w100" placeholder="请选择办理者类型" @change="changeOptions">
-					<el-option v-for="item in baseData.handlerTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+					<el-option v-for="item in baseData.handlerTypeOptions" :key="item.key" :label="item.value" :value="item.key" />
 				</el-select>
 			</el-form-item>
 			<!-- 选择其他 -->
@@ -29,8 +29,17 @@
 				prop="handlerTypeItemsOrigin"
 				:rules="[{ required: true, message: `请选择${itemName}`, trigger: 'change' }]"
 			>
-				<el-select v-model="form.handlerTypeItemsOrigin" multiple filterable class="w100" @change="getSelectValue" value-key="id">
-					<el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item" />
+				<el-select
+					v-model="form.handlerTypeItemsOrigin"
+					multiple
+					filterable
+					class="w100"
+					@change="getSelectValue"
+					value-key="key"
+					collapse-tags
+					collapse-tags-tooltip
+				>
+					<el-option v-for="item in selectList" :key="item.key" :label="item.value" :value="item" />
 				</el-select>
 			</el-form-item>
 			<!-- 选择用户 -->
@@ -42,6 +51,8 @@
 			>
 				<el-select
 					v-model="form.handlerTypeItemsOrigin"
+					collapse-tags
+					collapse-tags-tooltip
 					multiple
 					filterable
 					remote
@@ -77,51 +88,59 @@
 					check-strictly
 					default-expand-all
 					filterable
+					@check="selectOrg"
+					collapse-tags
+					collapse-tags-tooltip
 				/>
 			</el-form-item>
-      <el-form-item label="否决按钮" prop="canReject">
-        <el-switch
-            v-model="form.canReject"
-            inline-prompt
-            active-text="启用"
-            inactive-text="禁用"
-        />
-      </el-form-item>
+			<el-form-item label="否决按钮" prop="canReject">
+				<el-switch v-model="form.canReject" inline-prompt active-text="启用" inactive-text="禁用" />
+			</el-form-item>
 			<el-form-item label="执行模式" prop="executeMode" :rules="[{ required: true, message: '请选择执行模式', trigger: 'change' }]">
 				<el-select v-model="form.executeMode" class="w100" placeholder="请选择执行模式">
 					<el-option v-for="item in baseData.executeModeOptions" :key="item.key" :label="item.value" :value="item.key" />
 				</el-select>
 			</el-form-item>
 			<el-form-item label="支持会签" prop="canStartCountersign">
-        <el-switch
-            v-model="form.canStartCountersign"
-            inline-prompt
-            active-text="支持"
-            inactive-text="不支持"
-        />
+				<el-switch v-model="form.canStartCountersign" inline-prompt active-text="支持" inactive-text="不支持" />
+			</el-form-item>
+			<el-form-item
+				label="会签策略"
+				prop="countersignPolicy"
+				:rules="[{ required: true, message: '请选择会签策略', trigger: 'change' }]"
+				v-if="form.canStartCountersign"
+			>
+				<el-select v-model="form.countersignPolicy" class="w100" placeholder="请选择会签策略">
+					<el-option v-for="item in baseData.dynamicPolicyOptions" :key="item.key" :label="item.value" :value="item.key" />
+				</el-select>
+			</el-form-item>
+			<el-form-item label="实例化模式" prop="instanceMode" :rules="[{ required: true, message: '请选择实例化模式', trigger: 'change' }]">
+				<el-select v-model="form.instanceMode" class="w100" placeholder="请选择实例化模式">
+					<el-option v-for="item in baseData.instanceModeOptions" :key="item.key" :label="item.value" :value="item.key" />
+				</el-select>
+			</el-form-item>
+			<el-form-item
+				label="动态策略"
+				prop="instancePolicy"
+				:rules="[{ required: true, message: '请选择动态策略', trigger: 'change' }]"
+				v-if="form.instanceMode === 1"
+			>
+				<el-select v-model="form.instancePolicy" class="w100" placeholder="请选择动态策略" @change="selectInstancePolicy">
+					<el-option v-for="item in baseData.dynamicPolicyOptions" :key="item.key" :label="item.value" :value="item.key" />
+				</el-select>
+			</el-form-item>
+			<el-form-item
+				label="动态终止标识"
+				prop="terminalDynamicMark"
+				:rules="[{ required: true, message: '请选择动态终止标识', trigger: 'change' }]"
+				v-if="form.instanceMode === 1"
+			>
+				<el-select v-model="form.terminalDynamicMark" class="w100" placeholder="请选择动态终止标识">
+					<el-option v-for="item in baseData.dynamicStrategyOptions" :key="item.key" :label="item.value" :value="item.key" />
+				</el-select>
 			</el-form-item>
-      <el-form-item label="会签策略" prop="countersignPolicy" :rules="[{ required: true, message: '请选择会签策略', trigger: 'change' }]" v-if="form.canStartCountersign">
-        <el-select v-model="form.countersignPolicy" class="w100" placeholder="请选择会签策略">
-          <el-option v-for="item in baseData.dynamicPolicyOptions" :key="item.key" :label="item.value" :value="item.key" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="实例化模式" prop="instanceMode" :rules="[{ required: true, message: '请选择实例化模式', trigger: 'change' }]">
-        <el-select v-model="form.instanceMode" class="w100" placeholder="请选择实例化模式">
-          <el-option v-for="item in baseData.instanceModeOptions" :key="item.key" :label="item.value" :value="item.key" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="动态策略" prop="instancePolicy" :rules="[{ required: true, message: '请选择动态策略', trigger: 'change' }]" v-if="form.instanceMode === 1">
-        <el-select v-model="form.instancePolicy" class="w100" placeholder="请选择动态策略" @change="selectInstancePolicy">
-          <el-option v-for="item in baseData.dynamicPolicyOptions" :key="item.key" :label="item.value" :value="item.key" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="动态终止标识" prop="terminalDynamicMark" :rules="[{ required: true, message: '请选择动态终止标识', trigger: 'change' }]" v-if="form.instanceMode === 1">
-        <el-select v-model="form.terminalDynamicMark" class="w100" placeholder="请选择动态终止标识">
-          <el-option v-for="item in baseData.dynamicStrategyOptions" :key="item.key" :label="item.value" :value="item.key" />
-        </el-select>
-      </el-form-item>
 			<el-form-item label="标识" prop="tag" :rules="[{ required: false, message: '请输入标识', trigger: 'blur' }]">
-        <el-input v-model="form.tag" placeholder="请输入标识" type="textarea" :autosize="{ minRows: 4, maxRows: 8 }"></el-input>
+				<el-input v-model="form.tag" placeholder="请输入标识" type="textarea" :autosize="{ minRows: 4, maxRows: 8 }"></el-input>
 			</el-form-item>
 		</el-form>
 	</div>
@@ -131,37 +150,35 @@ import { reactive, watch, onMounted, ref } from 'vue';
 import { getSelectList, queryUser } from '/@/api/system/workflow';
 import { getCanUseOrg } from '/@/api/system/user';
 import { removeDuplicate } from '/@/utils/arrayOperation';
-import {ElInput} from "element-plus";
+import { ElInput } from 'element-plus';
 const ruleFormRef = ref<RefType>();
 // 定义属性
 const props = defineProps({
-  modelValue: {
-    type: Object,
-    default: () => {
-    }
-  },
-  baseData: {
-    type: Object,
-    default: () => {
-    }
-  }
-})
+	modelValue: {
+		type: Object,
+		default: () => {},
+	},
+	baseData: {
+		type: Object,
+		default: () => {},
+	},
+});
 // 注意:ref不能与model一样，相同的话表单双向绑定将会失效
 const form = reactive<Record<string, any>>({
 	...props.modelValue, // 传入的数据
-  stepType:null,// 节点类型
-  businessType:null,// 业务类型
-  handlerType:null,// 办理者类型
-  handlerTypeItemsOrigin:[],// 办理者类型
-  handlerTypeItems:'[]',// 办理者类型
-  canReject:false, // 否决按钮
-  executeMode:null, // 执行模式
-  canStartCountersign:false, // 支持会签
-  countersignPolicy:null, // 会签策略
-  instanceMode:null, // 实例化模式
-  instancePolicy:null, // 动态策略
-  terminalDynamicMark:null, // 动态终止标识
-  tag:'', // 标识
+	stepType: null, // 节点类型
+	businessType: null, // 业务类型
+	handlerType: null, // 办理者类型
+	handlerTypeItemsOrigin: [], // 办理者类型
+	handlerTypeItems: '[]', // 办理者类型
+	canReject: false, // 否决按钮
+	executeMode: null, // 执行模式
+	canStartCountersign: false, // 支持会签
+	countersignPolicy: null, // 会签策略
+	instanceMode: null, // 实例化模式
+	instancePolicy: null, // 动态策略
+	terminalDynamicMark: null, // 动态终止标识
+	tag: '', // 标识
 });
 const emits = defineEmits(['update:modelValue']); // 定义事件
 const loading = ref(false); // 加载
@@ -180,14 +197,10 @@ const itemName = ref<string>('');
 const changeOptions = (e: any) => {
 	form.handlerTypeItemsOrigin = [];
 	form.handlerTypeItems = '[]';
-	itemName.value = baseData.handlerTypeOptions[e].label;
+	itemName.value = baseData.handlerTypeOptions[e].value;
 	if ([0, 1, 2].includes(e)) {
 		getSelectList(e).then((res: any) => {
 			selectList.value = res.result ?? [];
-			selectList.value = selectList.value.map((item: any) => ({
-				id: item.key,
-				name: item.value,
-			}));
 		});
 	}
 	if (e === 4) {
@@ -220,55 +233,56 @@ const getOrgListFn = () => {
 		orgData.value = res?.result ?? [];
 	});
 };
-const treeSelectRef = ref<RefType>();
 // 获取选择对象
 const getSelectValue = (query: any[]) => {
-	let arr: EmptyArrayType;
-	arr = query.map((item: any) => ({ name: item.name, id: item.id }));
+	let arr: EmptyArrayType = [];
+	if ([0, 1, 2].includes(form.handlerType)) {
+		arr = query;
+	} else if ([3].includes(form.handlerType)) {
+		arr = query.map((item: any) => ({ key: item.id, value: item.name }));
+	}
+	// 使用模板字符串
+	form.handlerTypeItems = `${JSON.stringify(arr)}`;
+};
+// 选择部门
+const treeSelectRef = ref<RefType>();
+const selectOrg = () => {
+	const currentNode = treeSelectRef.value.getCheckedNodes();
+	let arr: EmptyArrayType = [];
+	arr = currentNode.map((item: any) => ({ key: item.id, value: item.name }));
 	// 使用模板字符串
 	form.handlerTypeItems = `${JSON.stringify(arr)}`;
 };
 // 选择动态策略
-const selectInstancePolicy = (val:string|number)=>{
-  ruleFormRef.value.resetFields('terminalDynamicMark');
-  baseData.dynamicStrategyOptions = [];
-  let item = baseData.dynamicPolicyOptions.filter((item:any)=>item.key === val)[0];
-  if(item.items && item.items.length){
-    baseData.dynamicStrategyOptions = item.items;
-  }
-}
+const selectInstancePolicy = (val: string | number) => {
+	ruleFormRef.value.resetFields('terminalDynamicMark');
+	baseData.dynamicStrategyOptions = [];
+	let item = baseData.dynamicPolicyOptions.filter((item: any) => item.key === val)[0];
+	if (item.items && item.items.length) {
+		baseData.dynamicStrategyOptions = item.items;
+	}
+};
 const baseData = reactive<any>({
 	businessTypeOptions: <EmptyArrayType>[], // 业务类型
 	countersignMode: <EmptyArrayType>[], // 会签
 	handlerTypeOptions: <EmptyArrayType>[], // 办理者类型
-  dynamicStrategyOptions: <EmptyArrayType>[], // 动态策略
-  executeModeOptions: <EmptyArrayType>[], // 执行模式
-  dynamicPolicyOptions: <EmptyArrayType>[], // 会签策略
-  instanceModeOptions: <EmptyArrayType>[], // 实例化模式
+	dynamicStrategyOptions: <EmptyArrayType>[], // 动态策略
+	executeModeOptions: <EmptyArrayType>[], // 执行模式
+	dynamicPolicyOptions: <EmptyArrayType>[], // 会签策略
+	instanceModeOptions: <EmptyArrayType>[], // 实例化模式
 });
 // 会签结束节点
 const nodesOptions = ref([] as any);
 onMounted(async () => {
-	const {
-		stepTypeOptions,
-		businessTypeOptions,
-		handlerTypeOptions,
-		countersignMode,
-		dynamicPolicyOptions,
-		executeModeOptions,
-		instanceModeOptions,
-	} = props.baseData;
+	const { stepTypeOptions, businessTypeOptions, handlerTypeOptions, countersignMode, dynamicPolicyOptions, executeModeOptions, instanceModeOptions } =
+		props.baseData;
 	baseData.businessTypeOptions = businessTypeOptions; // 业务类型
 	baseData.stepTypeOptions = stepTypeOptions; // 节点类型
-	baseData.handlerTypeOptions = handlerTypeOptions.map((item: any) => ({
-		// 办理者类型
-		value: item.key,
-		label: item.value,
-	}));
-  baseData.executeModeOptions = executeModeOptions; // 执行模式
-  baseData.countersignMode = countersignMode;// 支持发起会签
-  baseData.dynamicPolicyOptions = dynamicPolicyOptions; // 会签策略
-  baseData.instanceModeOptions = instanceModeOptions; // 实例模式
+	baseData.handlerTypeOptions = handlerTypeOptions; // 办理者类型
+	baseData.executeModeOptions = executeModeOptions; // 执行模式
+	baseData.countersignMode = countersignMode; // 支持发起会签
+	baseData.dynamicPolicyOptions = dynamicPolicyOptions; // 会签策略
+	baseData.instanceModeOptions = instanceModeOptions; // 实例模式
 
 	// 合并表单
 	Object.assign(form, props.modelValue);
@@ -280,32 +294,30 @@ onMounted(async () => {
 				form.handlerTypeItemsOrigin = JSON.parse(form.handlerTypeItems);
 				break;
 			case 3:
-				userList.value = form.handlerTypeItemsOrigin = JSON.parse(form.handlerTypeItems);
+				const users = JSON.parse(form.handlerTypeItems);
+				userList.value = form.handlerTypeItemsOrigin = users.map((item: any) => ({ id: item.key, name: item.value }));
 				break;
 			case 4:
-				form.handlerTypeItemsOrigin = JSON.parse(form.handlerTypeItems).map((v: any) => v.id);
+				form.handlerTypeItemsOrigin = JSON.parse(form.handlerTypeItems).map((v: any) => v.key);
 				break;
 			default:
 				break;
 		}
+		console.log(form.handlerTypeItemsOrigin, '2');
 	}
 	if ([0, 1, 2].includes(form.handlerType)) {
 		const res: any = await getSelectList(form.handlerType);
 		selectList.value = res.result ?? [];
-		selectList.value = selectList.value.map((item: any) => ({
-			id: item.key,
-			name: item.value,
-		}));
-		if (baseData.handlerTypeOptions.length) itemName.value = baseData.handlerTypeOptions[form.handlerType].label;
+		if (baseData.handlerTypeOptions.length) itemName.value = baseData.handlerTypeOptions[form.handlerType].value;
 	} else if ([3].includes(form.handlerType)) {
-		if (baseData.handlerTypeOptions.length) itemName.value = baseData.handlerTypeOptions[form.handlerType].label;
+		if (baseData.handlerTypeOptions.length) itemName.value = baseData.handlerTypeOptions[form.handlerType].value;
 	} else if ([4].includes(form.handlerType)) {
-		if (baseData.handlerTypeOptions.length) itemName.value = baseData.handlerTypeOptions[form.handlerType].label;
+		if (baseData.handlerTypeOptions.length) itemName.value = baseData.handlerTypeOptions[form.handlerType].value;
 		getOrgListFn();
 	}
-  if(form.instancePolicy || form.instancePolicy === 0){
-    selectInstancePolicy(form.instancePolicy);
-  }
+	if (form.instancePolicy || form.instancePolicy === 0) {
+		selectInstancePolicy(form.instancePolicy);
+	}
 });
 // 导入属性及方法给外部调用
 defineExpose({

src/components/LogicFlow/snakerflow/tool.ts

@@ -153,19 +153,19 @@ export const logicFlowJsonToSubmit = (data: any): object => {
     processObj.steps.push(buildNode(node))
   }
   for (let i of processObj.steps) {//普通节点字段非空校验
-    if(!['start'].includes(i.code)){
+    if(['start','task'].includes(i.code)){
       if (!i.stepType && String(i.stepType) !== '0') {
         return { error: `请选择${i.name}的节点类型` };
       }
-    }
-    if (!i.businessType && String(i.businessType) !== '0') {
-      return { error: `请选择${i.name}的业务类型` };
-    }
-    if (!i.executeMode && String(i.executeMode) !== '0') {
-      return { error: `请选择${i.name}的执行者模式` };
-    }
-    if (!i.handlerType && String(i.handlerType) !== '0') {
-      return { error: `请选择${i.name}的办理者类型` };
+      if (!i.businessType && String(i.businessType) !== '0') {
+        return { error: `请选择${i.name}的业务类型` };
+      }
+      if (!i.executeMode && String(i.executeMode) !== '0') {
+        return { error: `请选择${i.name}的执行者模式` };
+      }
+      if (!i.handlerType && String(i.handlerType) !== '0') {
+        return { error: `请选择${i.name}的办理者类型` };
+      }
     }
   }
   returnData = {

src/components/ProcessApproval/index.vue

@@ -376,9 +376,9 @@
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
 						<el-form-item
-							label="是否发起会签"
+							label="发起会签"
 							prop="isStartCountersign"
-							:rules="[{ required: false, message: '请选择是否发起会签', trigger: 'change' }]"
+							:rules="[{ required: false, message: '请选择发起会签', trigger: 'change' }]"
 						>
 							<el-switch v-model="state.ruleForm.isStartCountersign" inline-prompt active-text="是" inactive-text="否" :disabled="!showMainHandler" />
 						</el-form-item>