371 lines
18 KiB
Vue
371 lines
18 KiB
Vue
<template>
|
||
<div>
|
||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="110px" v-loading="loading"
|
||
:disabled="operType === 'view'">
|
||
<el-row :gutter="24">
|
||
<!-- <el-col :span="24" class="mb20">
|
||
<el-form-item>
|
||
<div style="color: red;font-size: 14px">备注: 当不指定待分配节点时, 默认对当前相同userKey进行全局统一分配</div>
|
||
</el-form-item>
|
||
</el-col>-->
|
||
<el-col :span="12" class="mb20">
|
||
<el-form-item :label="t('distPerson.code')" prop="code">
|
||
<el-select v-model="form.code" :placeholder="t('distPerson.inputCodeTip')" clearable filterable disabled
|
||
@change="cascadeChange('code', ['flowInstId'])">
|
||
<el-option v-for="(item, index) in dicData.code" :key="index" :label="item.code" :value="item.code"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12" class="mb20">
|
||
<el-form-item :label="t('distPerson.flowKey')" prop="flowInstId">
|
||
<el-select v-model="form.flowInstId" :placeholder="t('distPerson.inputFlowKeyTip')" clearable filterable disabled
|
||
@change="cascadeChange('flowInstId', ['runNodeId'])">
|
||
<el-option v-for="(item, index) in cascadeDic.flowInstId" :key="index" :label="item.flowName" :value="item.id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12" class="mb20">
|
||
<el-form-item :label="t('distPerson.runNodeId')" prop="runNodeId">
|
||
<el-select v-model="form.runNodeId" :placeholder="t('distPerson.inputRunNodeIdTip')" clearable filterable
|
||
:disabled="!!props.currJob.distFlowNodeId"
|
||
@change="cascadeChange('runNodeId', ['distRunJobId'])">
|
||
<el-option v-for="(item, index) in cascadeDic.runNodeId" :key="index" :label="item.nodeName" :value="item.id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12" class="mb20">
|
||
<el-form-item :label="t('distPerson.runJobId')" prop="runJobId">
|
||
<el-select v-model="form.runJobId" :placeholder="t('distPerson.inputRunJobIdTip')" clearable filterable @change="runJobIdChange">
|
||
<el-option v-for="(item, index) in cascadeDic.distRunJobId" :key="index" :label="item.jobName" :value="item.id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="12" class="mb20">
|
||
<el-form-item :label="t('distPerson.userKey')" prop="userKey" disabled>
|
||
<el-input v-model="form.userKey" :placeholder="t('distPerson.inputUserKeyTip')" disabled/>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<!-- <el-col :span="12" class="mb20">
|
||
<el-form-item :label="t('distPerson.isNowRun')" prop="isNowRun" disabled>
|
||
<el-radio-group disabled v-model="form.isNowRun">
|
||
<el-radio v-for="(item, index) in DIC_PROP.YES_OR_NO" :key="index" :label="item.value">
|
||
{{ getLabelByLanguage(item) }}
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>-->
|
||
|
||
</el-row>
|
||
|
||
<el-row :gutter="48">
|
||
<el-col :span="24" class="mb20">
|
||
<el-form-item>
|
||
<div style="color: red;font-size: 14px">注: 《分配参与者》允许为任意的节点分配参与者, 让分配参与者更自由</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24" class="mb20">
|
||
<el-form-item :label="t('distPerson.roleUserId')" prop="roleUserId">
|
||
<el-table :data="form.roleUserId" border style="width: 100%" max-height="500">
|
||
<el-table-column type="index" :label="t('distPerson.index')" width="80">
|
||
<template #header>
|
||
<el-button icon="Plus" size="small" type="primary" circle
|
||
@click="methods.onAddItem"></el-button>
|
||
</template>
|
||
<template #default="scope">
|
||
<el-button icon="Minus" size="small" type="danger" circle :disabled="scope.row.isDisabled"
|
||
@click="methods.handleDelete(scope.$index, scope.row)"></el-button>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="jobType" :label="t('distPerson.jobType')" show-overflow-tooltip >
|
||
<template #default="scope">
|
||
<el-select v-model="scope.row.jobType" :placeholder="t('distPerson.inputJobTypeTip')" clearable filterable
|
||
@change="handleRoleType" :disabled="scope.row.isDisabled">
|
||
<el-option v-for="(item, index) in DIC_PROP.JOB_USER_TYPE" :key="index" :label="item.label" :value="item.value"></el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="roleId" :label="t('distPerson.roleId')" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-tooltip content="请输入名称进行模糊搜索" placement="top">
|
||
<el-select v-model="scope.row.roleId" :placeholder="t('distPerson.inputRoleIdTip')" clearable filterable
|
||
:disabled="scope.row.isDisabled"
|
||
remote :remote-method="(query) => remoteMethodAll(query, scope.row.jobType)" :reserve-keyword="false">
|
||
<el-option v-for="(item, index) in dicData.users" :key="index" :label="item.name" :value="item.userId"
|
||
v-if="scope.row.jobType === DIC_PROP.JOB_USER_TYPE[0].value"></el-option>
|
||
<el-option v-for="(item, index) in dicData.roles" :key="index" :label="item.roleName" :value="item.roleId"
|
||
v-if="scope.row.jobType === DIC_PROP.JOB_USER_TYPE[1].value"></el-option>
|
||
<el-option v-for="(item, index) in dicData.posts" :key="index" :label="item.postName" :value="item.postId"
|
||
v-if="scope.row.jobType === DIC_PROP.JOB_USER_TYPE[2].value"></el-option>
|
||
<el-option v-for="(item, index) in dicData.depts" :key="index" :label="item.name" :value="item.deptId"
|
||
v-if="scope.row.jobType === DIC_PROP.JOB_USER_TYPE[3].value"></el-option>
|
||
</el-select>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="jobName" :label="t('distPerson.jobName')" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-tooltip placement="top" content="可为空，为空时参与者的任务名称都相同">
|
||
<el-input v-model="scope.row.jobName" :placeholder="t('distPerson.inputJobNameTip')" :disabled="scope.row.isDisabled"/>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="sort" :label="t('distPerson.sort')" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-tooltip placement="top" content="可为空，为空时参与者的任务排序值都相同">
|
||
<el-input-number :min="1" :max="1000" v-model="scope.row.sort" :placeholder="t('distPerson.inputSortTip')"
|
||
:disabled="scope.row.isDisabled"></el-input-number>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<template v-if="operType !== 'view'">
|
||
<footer class="el-dialog__footer">
|
||
<span class="dialog-footer">
|
||
<el-button type="primary" @click="methods.handleUpdate" :disabled="loading">{{
|
||
$t('common.confirmButtonText')
|
||
}}</el-button>
|
||
</span>
|
||
</footer>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="DistPersonFlow">
|
||
import {useMessage} from "/@/hooks/message";
|
||
import {getByFlowInstId, saveByFlowInstId} from '/@/api/jsonflow/dist-person'
|
||
import {useI18n} from "vue-i18n"
|
||
import {
|
||
onCascadeChange,
|
||
onFormLoadedUrl,
|
||
onLoadDicUrl,
|
||
remoteMethodAllByKey
|
||
} from "/@/flow/components/convert-name/convert";
|
||
import {setPropsDataValue, setPropsNull} from '/@/flow/support/common'
|
||
import * as orderVue from "/@/api/order/order-key-vue";
|
||
import { useUserInfo } from '/@/stores/userInfo';
|
||
import {validateNull} from "/@/utils/validate";
|
||
import {DIC_PROP} from "/@/flow/support/dict-prop";
|
||
import {handleChangeJobType} from "/@/flow";
|
||
import {PROP_CONST} from "/@/flow/support/prop-const";
|
||
|
||
const {t} = useI18n();
|
||
const userInfo = useUserInfo();
|
||
const emits = defineEmits(["handleJob"]);
|
||
// 定义变量内容
|
||
const dataFormRef = ref();
|
||
const loading = ref(false);
|
||
const operType = ref(false);
|
||
// 定义字典
|
||
const dicData = reactive({});
|
||
const onLoad = onLoadDicUrl({key: "code"});
|
||
const onFormLoaded = onFormLoadedUrl(...PROP_CONST.LOAD_USER_ROLE);
|
||
onMounted(async () => {
|
||
await onLoad(dicData);
|
||
});
|
||
|
||
const fields = ['userKey', 'valType', 'isNowRun'];
|
||
|
||
const cascadeDic = reactive({});
|
||
const onCascade = onCascadeChange(cascadeDic, {key: "code", cascades: ["flowInstId"]}, {key: "flowInstId", cascades: ["runNodeId"]}, {key: "runNodeId", cascades: ["distRunJobId"]});
|
||
async function cascadeChange(key, cascades) {
|
||
await onCascade(form, {key: key, cascades: cascades});
|
||
if (key === 'runNodeId') {
|
||
setPropsNull(form, ...fields)
|
||
form.roleUserId = []
|
||
if (!validateNull(cascadeDic.distRunJobId)) return
|
||
useMessage().info("当前节点任务非指定《参与者KEY》类型，不允许前端分配参与者");
|
||
}
|
||
}
|
||
function runJobIdChange(newVal){
|
||
form.roleUserId = []
|
||
if (!newVal) {
|
||
setPropsNull(form, ...fields)
|
||
return
|
||
}
|
||
const runJob = cascadeDic.distRunJobId.find(f => f.id === newVal)
|
||
setPropsDataValue(form, runJob, fields)
|
||
if (form.valType !== DIC_PROP.VAL_TYPE[1].value) {
|
||
form.runJobId = null
|
||
useMessage().info("当前节点任务非指定《参与者KEY》类型，不允许前端分配参与者");
|
||
return;
|
||
}
|
||
form.runJobId = newVal;
|
||
// 重新查询分配信息
|
||
methods.handleGetObj(form)
|
||
}
|
||
|
||
function handleRoleType() {
|
||
handleChangeJobType(dicData, form)
|
||
}
|
||
|
||
// 提交表单数据
|
||
const form = reactive({
|
||
code: '',
|
||
runNodeId: '',
|
||
runJobId: '',
|
||
userKey: '',
|
||
flowInstId: '',
|
||
flowKey: '',
|
||
roleUserId: [],
|
||
});
|
||
|
||
// 定义校验规则
|
||
const dataRules = ref({
|
||
code: [{required: true, message: '工单编号不能为空', trigger: 'blur'}],
|
||
runNodeId: [{required: true, message: '节点名称不能为空', trigger: 'blur'}],
|
||
runJobId: [{required: true, message: '任务名称不能为空', trigger: 'blur'}],
|
||
userKey: [{required: true, message: '参与者KEY不能为空', trigger: 'blur'}],
|
||
// roleUserId: [{required: true, message: '参与者不能为空', trigger: 'blur'}],
|
||
})
|
||
|
||
const props = defineProps({
|
||
currJob: {
|
||
type: Object,
|
||
default: null,
|
||
},
|
||
currElTab: {
|
||
type: Object,
|
||
default: {},
|
||
},
|
||
});
|
||
|
||
function remoteMethodAll(query: string, jobType) {
|
||
remoteMethodAllByKey(onLoad, dicData, query, jobType)
|
||
}
|
||
|
||
const methods = {
|
||
disableForm() {
|
||
operType.value = "view"
|
||
},
|
||
enableForm() {
|
||
operType.value = "flow"
|
||
},
|
||
async initJobData() {
|
||
// 判断是否仅查看
|
||
if (props.currElTab.id) {
|
||
await orderVue.currElTabIsView(methods, props.currJob, props.currElTab.id, methods.handleUpdate)
|
||
}
|
||
setPropsDataValue(form, props.currJob, 'code', 'flowKey', 'flowInstId')
|
||
await onCascade(form);
|
||
|
||
form.flowNodeId = props.currJob.distFlowNodeId
|
||
// 判断待分配参与者节点ID
|
||
if (!form.flowNodeId) return
|
||
form.runNodeId = cascadeDic.runNodeId.find(f => form.flowNodeId === f.flowNodeId).id;
|
||
await cascadeChange('runNodeId', ['distRunJobId'])
|
||
// 动态加减签其中一个即可
|
||
runJobIdChange(cascadeDic.distRunJobId[0]?.id)
|
||
},
|
||
handleGetObj(form) {
|
||
// 查询已分配参与者
|
||
getByFlowInstId(form).then(response => {
|
||
let roleUserId = response.data.roleUserId
|
||
// 排除该节点非本人分配参与者（除查看）
|
||
roleUserId.forEach(f => {
|
||
let b = f.createUser !== userInfo.userInfos.user.userId;
|
||
if (b) f.isDisabled = true
|
||
})
|
||
form.roleUserId = roleUserId
|
||
if (validateNull(roleUserId)) return
|
||
onFormLoaded(dicData, roleUserId)
|
||
})
|
||
},
|
||
async handleUpdate() {
|
||
const valid = await dataFormRef.value.validate().catch(() => {
|
||
});
|
||
if (!valid) return false;
|
||
|
||
const validateRoleUser = await methods.validateRoleUser(form)
|
||
if (validateRoleUser) {
|
||
if (props.currElTab.id) {
|
||
orderVue.currElTabIsSave(props.currJob, props.currElTab.id, true, emits)
|
||
}
|
||
return
|
||
}
|
||
|
||
try {
|
||
loading.value = true;
|
||
await saveByFlowInstId(form);
|
||
if (props.currElTab.id) {
|
||
orderVue.currElTabIsSave(props.currJob, props.currElTab.id, true, emits)
|
||
}
|
||
useMessage().success("分配参与者成功");
|
||
} catch (err: any) {
|
||
useMessage().error(err.msg);
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
},
|
||
// 校验分配数据
|
||
async validateRoleUser(row) {
|
||
if (validateNull(row.roleUserId)) return false
|
||
if (row.flowNodeId === props.currJob.flowNodeId) {
|
||
useMessage().error('待分配参与者节点不能是当前节点本身')
|
||
return true
|
||
}
|
||
// 分配参与者判断是否重复
|
||
if (methods.validateDupRoleId(row, 0, '人员')) return true
|
||
if (methods.validateDupRoleId(row, 1, '角色')) return true
|
||
if (methods.validateDupRoleId(row, 2, '岗位')) return true
|
||
if (methods.validateDupRoleId(row, 3, '部门')) return true
|
||
return false
|
||
},
|
||
// 分配参与者判断是否重复
|
||
validateDupRoleId(row, typeIndex, msg) {
|
||
let roleIds = row.roleUserId.filter(f => f.roleId && f.jobType === DIC_PROP.JOB_USER_TYPE[typeIndex].value).map(roleUser => {
|
||
return roleUser.roleId
|
||
})
|
||
if (new Set(roleIds).size !== roleIds.length) {
|
||
useMessage().info("分配的办理 " + msg + " 不能重复, 请重新选择")
|
||
return true
|
||
}
|
||
return false
|
||
},
|
||
onAddItem() {
|
||
if (props.currElTab.id) {
|
||
orderVue.currElTabIsSave(props.currJob, props.currElTab.id, false)
|
||
}
|
||
let obj = {};
|
||
form.roleUserId.push(obj);
|
||
},
|
||
handleDelete(index: number, row: any) {
|
||
form.roleUserId.splice(index, 1)
|
||
}
|
||
}
|
||
|
||
// 监听双向绑定
|
||
watch(
|
||
() => props.currJob.id,
|
||
() => {
|
||
methods.initJobData();
|
||
}
|
||
);
|
||
|
||
onMounted(() => {
|
||
methods.initJobData()
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.el-dialog__footer {
|
||
text-align: center;
|
||
|
||
.dialog-footer {
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|