|
@@ -1,310 +0,0 @@
|
|
|
-<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>
|
|
|
-</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";
|
|
|
-const ruleFormRef = ref<RefType>();
|
|
|
-// 定义属性
|
|
|
-const props = defineProps({
|
|
|
- modelValue: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- }
|
|
|
- },
|
|
|
- baseData: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- }
|
|
|
- }
|
|
|
-})
|
|
|
-// 注意:ref不能与model一样,相同的话表单双向绑定将会失效
|
|
|
-const form = reactive<Record<string, any>>({
|
|
|
- ...props.modelValue, // 传入的数据
|
|
|
- stepTypeName:'结束节点',
|
|
|
- stepType:2,// 节点类型
|
|
|
- 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); // 加载
|
|
|
-watch(
|
|
|
- () => form,
|
|
|
- () => {
|
|
|
- form.stepTypeName = form.name+'节点';
|
|
|
- emits('update:modelValue', Object.assign(props.modelValue, form));
|
|
|
- },
|
|
|
- { deep: true }
|
|
|
-);
|
|
|
-// 选择处理人获取数据
|
|
|
-// 下拉内容
|
|
|
-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();
|
|
|
- }
|
|
|
-};
|
|
|
-// 远程搜索用户名称
|
|
|
-// 指定用户列表
|
|
|
-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');
|
|
|
- });
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 获取可用组织
|
|
|
-const orgData = ref<EmptyArrayType>([]);
|
|
|
-const getOrgListFn = () => {
|
|
|
- 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)}`;
|
|
|
-};
|
|
|
-// 选择动态策略
|
|
|
-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>[], // 实例化模式
|
|
|
-});
|
|
|
-onMounted(async () => {
|
|
|
- const {
|
|
|
- businessTypeOptions,
|
|
|
- handlerTypeOptions,
|
|
|
- countersignMode,
|
|
|
- dynamicPolicyOptions,
|
|
|
- executeModeOptions,
|
|
|
- instanceModeOptions,
|
|
|
- } = props.baseData;
|
|
|
- baseData.businessTypeOptions = businessTypeOptions; // 业务类型
|
|
|
- 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);
|
|
|
- }
|
|
|
-});
|
|
|
-// 导入属性及方法给外部调用
|
|
|
-defineExpose({
|
|
|
- ruleFormRef,
|
|
|
-});
|
|
|
-</script>
|