811 lines
45 KiB
Vue
811 lines
45 KiB
Vue
<template>
|
||
<div>
|
||
<el-tabs class="flow-attr"
|
||
v-model="data.activeKey">
|
||
<el-tab-pane name="flow-rule">
|
||
<template #label>
|
||
<div>
|
||
<el-icon style="vertical-align: middle;margin-right: 3px">
|
||
<Setting/>
|
||
</el-icon>
|
||
<span style="vertical-align: middle;">设置路由规则</span>
|
||
</div>
|
||
</template>
|
||
<el-form label-position="left" class="flow-config-attr" label-width="150px">
|
||
<div style="margin: 5px 15px"><span
|
||
style="color: red;font-size: 14px">注:可根据接口返回值 或 表单数据的字段值，配置对应的路由动作（可自定义随意扩展）</span>
|
||
</div>
|
||
<el-form-item label="条件组关系">
|
||
<el-switch
|
||
v-model="data.cond.groupsType" @change="methods.changeGroupsType"
|
||
active-value="0"
|
||
inactive-value="1"
|
||
inactive-text="或"
|
||
active-text="且" disabled>
|
||
</el-switch>
|
||
<el-tooltip placement="top">
|
||
<template #content>一个组决定一个路由动作。多条件组满足时只有【开启下一节点】和【驳回到其他节点】可以累加路由动作</template>
|
||
<el-icon style="margin-left: 10px">
|
||
<QuestionFilled/>
|
||
</el-icon>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="路由规则模式">
|
||
<el-radio-group style="width: 313px" @change="methods.handleCondValType" :disabled="data.existData"
|
||
v-model="data.cond.valType">
|
||
<el-radio v-for="(item, index) in [DIC_PROP.VAL_TYPE[2], DIC_PROP.VAL_TYPE[4], DIC_PROP.VAL_TYPE[5]]" :key="index" :label="item.value"
|
||
style="width: 75px">
|
||
{{ item.label }}
|
||
</el-radio>
|
||
</el-radio-group>
|
||
<el-tooltip placement="top">
|
||
<template #content>若无法切换模式，请先清空条件组列表</template>
|
||
<el-icon>
|
||
<QuestionFilled/>
|
||
</el-icon>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
<el-divider>组内条件配置</el-divider>
|
||
|
||
<template v-if="data.cond.valType === '0'">
|
||
<el-form-item label="组内条件关系">
|
||
<el-switch
|
||
v-model="data.cond.groupType"
|
||
active-value="0"
|
||
inactive-value="1"
|
||
inactive-text="或"
|
||
active-text="且">
|
||
</el-switch>
|
||
</el-form-item>
|
||
|
||
<el-table :data="data.cond.condGroup"
|
||
border style="width: 100%; margin-bottom: 10px" max-height="500">
|
||
|
||
<el-table-column type="index" label="操作" width="80">
|
||
<template #header>
|
||
<el-button icon="Plus" size="small" type="primary" circle @click="methods.onAddItem(true)"></el-button>
|
||
</template>
|
||
<template #default="scope">
|
||
<el-button icon="Minus" size="small" type="danger" circle @click="methods.handleCondDelete(scope.$index, scope.row)"></el-button>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="varKeyVal" :label="t('flowClazz.varKeyVal')" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-select v-model="scope.row.varKeyVal" @change="methods.handleVarKeyVal(scope.row)"
|
||
clearable
|
||
filterable>
|
||
<el-option-group
|
||
v-for="(group, index) in data.allFieldPerms"
|
||
:key="index"
|
||
:label="group.label">
|
||
<el-option
|
||
v-for="(item, index) in group.options"
|
||
:disabled="item.prop.indexOf('_define_') !== -1"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.prop">
|
||
</el-option>
|
||
</el-option-group>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="operator" :label="t('flowClazz.operator')" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-select v-model="scope.row.operator" @change="methods.handleVarKeyVal(scope.row)"
|
||
clearable>
|
||
<el-option
|
||
v-for="(item, index) in data.varValOperator"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="varVal" :label="t('flowClazz.varVal')" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.varVal" clearable/>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<el-form-item label="路由动作">
|
||
<el-select v-model="data.cond.routeAction" @change="methods.changeRouteAction(data.cond)">
|
||
<el-option v-for="(item, index) in DIC_PROP.ROUTE_ACTIONS" :key="index" :disabled="item.value.indexOf('_define_') !== -1"
|
||
:label="item.label" :value="item.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="路由到哪个节点" v-if="data.cond.routeAction === DIC_PROP.ROUTE_ACTIONS[1].value">
|
||
<el-select class="input-attr" v-model="data.cond.toFlowNodeId"
|
||
clearable filterable>
|
||
<template v-for="(item, index) in data.toFlowNodeIds" :key="index">
|
||
<el-option :label="item.nodeName"
|
||
:value="item.id">
|
||
</el-option>
|
||
</template>
|
||
</el-select>
|
||
|
||
<el-tooltip placement="top" content="组内条件满足时，路由到哪个节点（注意：若节点参与者为空，可指定默认的参与者）">
|
||
<el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
<template v-if="data.cond.routeAction === DIC_PROP.ROUTE_ACTIONS[1].value">
|
||
<el-form-item label="参与者类型">
|
||
<el-tooltip placement="top" content="若节点参与者为空，可指定默认的参与者">
|
||
<el-select v-model="data.cond.jobType" @change="methods.changeJobType(data.cond)" clearable>
|
||
<el-option v-for="(item, index) in DIC_PROP.JOB_USER_TYPE" :key="index" :label="item.label" :value="item.value"></el-option>
|
||
</el-select>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="哪个人来审批" v-if="data.cond.jobType === DIC_PROP.JOB_USER_TYPE[0].value">
|
||
<el-tooltip content="请输入用户名称进行模糊搜索" placement="top">
|
||
<el-select class="input-attr"
|
||
v-model="data.cond.roleId"
|
||
clearable filterable
|
||
remote :remote-method="methodsRemote.remoteMethodUser2" :reserve-keyword="false">
|
||
<template v-for="(item, index) in dicData.users2" :key="index">
|
||
<el-option :label="item.name"
|
||
:value="item.userId">
|
||
</el-option>
|
||
</template>
|
||
</el-select>
|
||
</el-tooltip>
|
||
<el-tooltip placement="top" content="组内条件满足时，由哪个人来审批">
|
||
<el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="哪个角色审批" v-if="data.cond.jobType === DIC_PROP.JOB_USER_TYPE[1].value">
|
||
<el-tooltip content="请输入角色名称进行模糊搜索" placement="top">
|
||
<el-select class="input-attr" v-model="data.cond.roleId"
|
||
filterable
|
||
clearable
|
||
remote :remote-method="methodsRemote.remoteMethodRole2" :reserve-keyword="false">
|
||
<el-option
|
||
v-for="(item, index) in dicData.roles2"
|
||
:key="index"
|
||
:label="item.roleName"
|
||
:value="item.roleId">
|
||
</el-option>
|
||
</el-select>
|
||
</el-tooltip>
|
||
<el-tooltip placement="top" content="组内条件满足时，由哪个角色来审批">
|
||
<el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="哪个岗位审批" v-if="data.cond.jobType === DIC_PROP.JOB_USER_TYPE[2].value">
|
||
<el-tooltip content="请输入岗位名称进行模糊搜索" placement="top">
|
||
<el-select class="input-attr" v-model="data.cond.roleId"
|
||
filterable
|
||
clearable
|
||
remote :remote-method="methodsRemote.remoteMethodPost2" :reserve-keyword="false">
|
||
<el-option
|
||
v-for="(item, index) in dicData.posts2"
|
||
:key="index"
|
||
:label="item.postName"
|
||
:value="item.postId">
|
||
</el-option>
|
||
</el-select>
|
||
</el-tooltip>
|
||
<el-tooltip placement="top" content="组内条件满足时，由哪个岗位来审批">
|
||
<el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="哪个部门审批" v-if="data.cond.jobType === DIC_PROP.JOB_USER_TYPE[3].value">
|
||
<el-tooltip content="请输入部门名称进行模糊搜索" placement="top">
|
||
<el-select class="input-attr" v-model="data.cond.roleId"
|
||
filterable
|
||
clearable
|
||
remote :remote-method="methodsRemote.remoteMethodDept2" :reserve-keyword="false">
|
||
<el-option
|
||
v-for="(item, index) in dicData.depts2"
|
||
:key="index"
|
||
:label="item.name"
|
||
:value="item.deptId">
|
||
</el-option>
|
||
</el-select>
|
||
</el-tooltip>
|
||
<el-tooltip placement="top" content="组内条件满足时，由哪个部门审批">
|
||
<el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
</template>
|
||
|
||
<el-form-item label="驳回到哪个节点" v-if="data.cond.routeAction === DIC_PROP.ROUTE_ACTIONS[3].value">
|
||
<el-select class="input-attr" v-model="data.cond.toFlowNodeId"
|
||
clearable filterable>
|
||
<template v-for="(item, index) in data.toFlowNodeIds" :key="index">
|
||
<el-option :label="item.nodeName"
|
||
:value="item.id">
|
||
</el-option>
|
||
</template>
|
||
</el-select>
|
||
|
||
<el-tooltip placement="top" content="组内条件满足时，驳回到哪个节点（注意：必须是已审批过的节点）">
|
||
<el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
</template>
|
||
|
||
<el-form-item label="函数表达式" v-if="data.cond.valType === '2'">
|
||
<el-input class="input-attr" v-model="data.cond.varKeyVal" placeholder="请输入函数表达式" clearable @blur="methods.handleCondVarKeyVal"/>
|
||
|
||
<el-tooltip placement="top">
|
||
<template #content>采用表达式取值 ( 以下两种方式均支持自定义任意扩展 ), 值可以为对象 或 数组, 满足您复杂路由的场景:
|
||
<br />{{ PROP_CONST.TEXT_DESC.condUserExplain }}
|
||
<br />{{ PROP_CONST.TEXT_DESC.condMethodExplain3 }}, 返回值可以为对象 或 数组，{{ PROP_CONST.TEXT_DESC.condMethodExplain6 }}
|
||
<br />{{ PROP_CONST.TEXT_DESC.condMethodExplain4 }}
|
||
</template>
|
||
<el-icon style="margin-left: 10px">
|
||
<QuestionFilled/>
|
||
</el-icon>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
<div v-if="data.cond.valType === '2'" style="margin: 10px 13px">
|
||
<span style="color: #409EFF;font-size: 14px">注: 当前函数表达式的返回值可以为对象 或 数组，{{ PROP_CONST.TEXT_DESC.condMethodExplain6 }}</span>
|
||
</div>
|
||
|
||
<template v-if="data.cond.valType === '3'">
|
||
<el-form-item label="Http请求地址">
|
||
<el-input class="input-attr" placeholder="可输入全路径或相对路径" v-model="data.cond.varKeyVal"
|
||
@blur="methods.handleCondVarKeyVal" clearable>
|
||
<template #prepend>
|
||
<el-select v-model="data.cond.httpMethod">
|
||
<el-option v-for="(item, index) in DIC_PROP.HTTP_METHODS" :key="index" :label="item.label" :value="item.value"></el-option>
|
||
</el-select>
|
||
</template>
|
||
</el-input>
|
||
|
||
<el-tooltip content="点击可设置Http请求的参数信息" placement="bottom">
|
||
<el-button type="primary" size="small" round style="margin-left: 10px"
|
||
@click="methods.openHttpUrlParams()">
|
||
{{ data.httpUrlParamsVisible ? '清空' : '参数' }}
|
||
</el-button>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
<flow-http-param ref="flowHttpParam" :currFlowForm="props.currFlowForm" :flowData="props.flowData"
|
||
:httpParam="props.currSelect.attributes.attrs.cdata.attrs"
|
||
:httpParamType="DIC_PROP.PARAM_RULE_TYPE[8].value"
|
||
v-if="data.httpUrlParamsVisible"></flow-http-param>
|
||
</template>
|
||
|
||
<template v-if="data.cond.valType === '0'">
|
||
<el-button type="primary" round style="margin-left: 185px; margin-top: 30px; margin-bottom: 30px; width: 200px" @click="methods.addFlowNodeCondGroup()">
|
||
{{ data.oldCurrentRow ? '修改完成': '添加条件组' }}
|
||
</el-button>
|
||
<el-divider>已添加条件组列表(点击行可再次修改)</el-divider>
|
||
<el-empty description="条件组列表为空" style="margin: 10px 230px" v-if="!data.existData">
|
||
</el-empty>
|
||
|
||
<template v-for="(item, index) in data.condGroups" v-else
|
||
:key="index">
|
||
|
||
<el-collapse v-model="data.collapse">
|
||
<el-collapse-item :name="index">
|
||
<template #title>
|
||
{{ '条件组 ' + (index + 1) }}
|
||
|
||
<el-icon style="margin-left: 10px" @click="methods.handleCondGroupDelete(index)">
|
||
<Delete />
|
||
</el-icon>
|
||
</template>
|
||
|
||
<el-form-item label="组内条件关系">
|
||
<el-switch
|
||
v-model="item.groupType" @change="methods.changeGroupType(item, index)"
|
||
active-value="0"
|
||
inactive-value="1"
|
||
inactive-text="或"
|
||
active-text="且">
|
||
</el-switch>
|
||
</el-form-item>
|
||
|
||
<el-table :data="item.condGroup" border style="width: 100%; margin-bottom: 10px" max-height="500"
|
||
highlight-current-row @current-change="methods.handleCurrentChange" :ref="'tableDataRef' + index">
|
||
|
||
<el-table-column type="index" label="操作" width="80">
|
||
<template #default="scope">
|
||
<el-button icon="Minus" size="small" type="danger" circle
|
||
@click="methods.handleSingleCondDelete(scope.$index, scope.row, index)"></el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="varKeyVal" :label="t('flowClazz.varKeyVal')" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<convert-group-name :options="data.allFieldPerms"
|
||
:value="scope.row.varKeyVal"
|
||
:valueKey="'prop'" :showKey="'label'"></convert-group-name>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="operator" :label="t('flowClazz.operator')" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<dict-tag :options="DIC_PROP.OPERATOR" :value="scope.row.operator"></dict-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="varVal" :label="t('flowClazz.varVal')" show-overflow-tooltip/>
|
||
</el-table>
|
||
|
||
<el-form-item label="路由动作">
|
||
<el-select v-model="item.routeAction" @change="methods.changeRouteAction(item)">
|
||
<el-option v-for="(item, index) in DIC_PROP.ROUTE_ACTIONS" :key="index" :disabled="item.value.indexOf('_define_') !== -1"
|
||
:label="item.label" :value="item.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="路由到哪个节点" v-if="item.routeAction === DIC_PROP.ROUTE_ACTIONS[1].value">
|
||
<el-select class="input-attr" v-model="item.toFlowNodeId"
|
||
clearable filterable>
|
||
<template v-for="(item, index) in data.toFlowNodeIds" :key="index">
|
||
<el-option :label="item.nodeName"
|
||
:value="item.id">
|
||
</el-option>
|
||
</template>
|
||
</el-select>
|
||
|
||
<el-tooltip placement="top" content="组内条件满足时，路由到哪个节点（注意：若节点参与者为空，可指定默认的参与者）">
|
||
<el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
<template v-if="item.routeAction === DIC_PROP.ROUTE_ACTIONS[1].value">
|
||
<el-form-item label="参与者类型">
|
||
<el-tooltip placement="top" content="若节点参与者为空，可指定默认的参与者">
|
||
<el-select v-model="item.jobType" @change="methods.changeJobType(item)" clearable>
|
||
<el-option v-for="(item, index) in DIC_PROP.JOB_USER_TYPE" :key="index" :label="item.label" :value="item.value"></el-option>
|
||
</el-select>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="哪个人来审批" v-if="item.jobType === DIC_PROP.JOB_USER_TYPE[0].value">
|
||
<el-tooltip content="请输入用户名称进行模糊搜索" placement="top">
|
||
<el-select class="input-attr"
|
||
v-model="item.roleId"
|
||
clearable filterable
|
||
remote :remote-method="methodsRemote.remoteMethodUser" :reserve-keyword="false">
|
||
<template v-for="(item, index) in dicData.users" :key="index">
|
||
<el-option :label="item.name"
|
||
:value="item.userId">
|
||
</el-option>
|
||
</template>
|
||
</el-select>
|
||
</el-tooltip>
|
||
<el-tooltip placement="top" content="组内条件满足时，由哪个人来审批">
|
||
<el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="哪个角色审批" v-if="item.jobType === DIC_PROP.JOB_USER_TYPE[1].value">
|
||
<el-tooltip content="请输入角色名称进行模糊搜索" placement="top">
|
||
<el-select class="input-attr" v-model="item.roleId"
|
||
filterable
|
||
clearable
|
||
remote :remote-method="methodsRemote.remoteMethodRole" :reserve-keyword="false">
|
||
<el-option
|
||
v-for="(item, index) in dicData.roles"
|
||
:key="index"
|
||
:label="item.roleName"
|
||
:value="item.roleId">
|
||
</el-option>
|
||
</el-select>
|
||
</el-tooltip>
|
||
<el-tooltip placement="top" content="组内条件满足时，由哪个角色来审批">
|
||
<el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="哪个岗位审批" v-if="item.jobType === DIC_PROP.JOB_USER_TYPE[2].value">
|
||
<el-tooltip content="请输入岗位名称进行模糊搜索" placement="top">
|
||
<el-select class="input-attr" v-model="item.roleId"
|
||
filterable
|
||
clearable
|
||
remote :remote-method="methodsRemote.remoteMethodPost" :reserve-keyword="false">
|
||
<el-option
|
||
v-for="(item, index) in dicData.posts"
|
||
:key="index"
|
||
:label="item.postName"
|
||
:value="item.postId">
|
||
</el-option>
|
||
</el-select>
|
||
</el-tooltip>
|
||
<el-tooltip placement="top" content="组内条件满足时，由哪个岗位来审批">
|
||
<el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="哪个部门审批" v-if="item.jobType === DIC_PROP.JOB_USER_TYPE[3].value">
|
||
<el-tooltip content="请输入部门名称进行模糊搜索" placement="top">
|
||
<el-select class="input-attr" v-model="item.roleId"
|
||
filterable
|
||
clearable
|
||
remote :remote-method="methodsRemote.remoteMethodDept" :reserve-keyword="false">
|
||
<el-option
|
||
v-for="(item, index) in dicData.depts"
|
||
:key="index"
|
||
:label="item.name"
|
||
:value="item.deptId">
|
||
</el-option>
|
||
</el-select>
|
||
</el-tooltip>
|
||
<el-tooltip placement="top" content="组内条件满足时，由哪个部门审批">
|
||
<el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
</template>
|
||
|
||
<el-form-item label="驳回到哪个节点" v-if="item.routeAction === DIC_PROP.ROUTE_ACTIONS[3].value">
|
||
<el-select class="input-attr" v-model="item.toFlowNodeId"
|
||
clearable filterable>
|
||
<template v-for="(item, index) in data.toFlowNodeIds" :key="index">
|
||
<el-option :label="item.nodeName"
|
||
:value="item.id">
|
||
</el-option>
|
||
</template>
|
||
</el-select>
|
||
|
||
<el-tooltip placement="top" content="组内条件满足时，驳回到哪个节点（注意：必须是已审批过的节点）">
|
||
<el-icon style="margin-left: 10px"><QuestionFilled /></el-icon>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</template>
|
||
</template>
|
||
</el-form>
|
||
</el-tab-pane>
|
||
|
||
</el-tabs>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="FlowMethod">
|
||
import {useI18n} from "vue-i18n";
|
||
import {useMessage} from "/@/hooks/message";
|
||
import {rule, validateNull} from "/@/utils/validate";
|
||
import {deepClone} from "/@/utils/other";
|
||
import {DIC_PROP} from "/@/flow/support/dict-prop";
|
||
import {buildSysFieldsFormOption} from "../../utils/form-perm";
|
||
import {
|
||
onFormLoadedUrl,
|
||
onLoadDicUrl,
|
||
initRemoteMethodAllByKey
|
||
} from "../../components/convert-name/convert";
|
||
import {PROP_CONST} from "../../support/prop-const";
|
||
import {handleChangeJobType} from "../../index";
|
||
import {validateNodeType} from "./index";
|
||
|
||
const { proxy } = getCurrentInstance();
|
||
const FlowHttpParam = defineAsyncComponent(() => import('./flow-http-param.vue'));
|
||
const $emit = defineEmits(["openFlowRoutes"]);
|
||
|
||
const {t} = useI18n();
|
||
const $message = useMessage();
|
||
const props = defineProps({
|
||
currFlowForm: {
|
||
type: Object,
|
||
default: null,
|
||
},
|
||
currSelect: {
|
||
type: Object,
|
||
default: {},
|
||
},
|
||
flowData: {
|
||
type: Object,
|
||
default: null,
|
||
},
|
||
});
|
||
|
||
const condData = {
|
||
httpMethod: 'GET',
|
||
roleId: null,
|
||
jobType: null,
|
||
routeAction: null,
|
||
toFlowNodeId: null,
|
||
groupsType: '1',
|
||
condGroup: [],
|
||
groupType: '0',
|
||
valType: '0',
|
||
varKeyVal: null,
|
||
operator: null,
|
||
varVal: null,
|
||
}
|
||
|
||
const data = reactive({
|
||
activeKey: 'flow-rule',
|
||
collapse: [0],
|
||
allFieldPerms: [],
|
||
formFieldPerms: [],
|
||
cond: deepClone(condData),
|
||
httpUrlParamsVisible: false,
|
||
oldCurrentRow: null,
|
||
condGroups: [],
|
||
toFlowNodeIds: [],
|
||
existData: false,
|
||
})
|
||
|
||
// 定义字典
|
||
const dicData = reactive({});
|
||
const onLoad = onLoadDicUrl();
|
||
const onFormLoaded = onFormLoadedUrl(...PROP_CONST.LOAD_USER_ROLE);
|
||
onMounted(async () => {
|
||
// await onLoad(dicData);
|
||
|
||
methods.changeTabPane(props.currSelect)
|
||
})
|
||
|
||
const methodsRemote = initRemoteMethodAllByKey(onLoad, dicData)
|
||
|
||
const methods = {
|
||
changeJobType(item) {
|
||
handleChangeJobType(dicData, item)
|
||
},
|
||
onFormLoaded() {
|
||
let condGroups = props.currSelect.attributes.attrs.cdata.attrs.condGroups
|
||
if (validateNull(condGroups)) return
|
||
onFormLoaded(dicData, condGroups)
|
||
},
|
||
changeRouteAction(item) {
|
||
// 切换清空
|
||
let b = item.routeAction === DIC_PROP.ROUTE_ACTIONS[1].value;
|
||
if(!b && item.routeAction !== DIC_PROP.ROUTE_ACTIONS[3].value) {
|
||
data.cond.toFlowNodeId = null
|
||
}
|
||
},
|
||
openHttpUrlParams() {
|
||
if (!data.cond.varKeyVal) {
|
||
$message.warning("请先输入【Http请求地址】")
|
||
return
|
||
}
|
||
if (data.httpUrlParamsVisible) {
|
||
props.currSelect.attributes.attrs.cdata.attrs.httpParams = []
|
||
data.httpUrlParamsVisible = false
|
||
} else {
|
||
data.httpUrlParamsVisible = true
|
||
}
|
||
},
|
||
handleCurrentChange(row) {
|
||
if (!row) return
|
||
let condGroupsRow;
|
||
for (let i = 0; i < data.condGroups.length; i++) {
|
||
let index = data.condGroups[i].condGroup.indexOf(row);
|
||
if (index !== -1) {
|
||
condGroupsRow = data.condGroups[i];
|
||
}
|
||
}
|
||
// 先清空之前选中的其他条件组
|
||
if (data.oldCurrentRow !== condGroupsRow) {
|
||
let oldIndex = data.condGroups.indexOf(data.oldCurrentRow);
|
||
if (oldIndex !== -1) {
|
||
proxy.$refs['tableDataRef' + oldIndex][0].setCurrentRow(null)
|
||
}
|
||
}
|
||
data.cond = condGroupsRow
|
||
data.oldCurrentRow = condGroupsRow
|
||
},
|
||
handleVarKeyVal(row) {
|
||
let dots = row.varKeyVal.split('.').length - 1;
|
||
if (dots === 2) {
|
||
let find = DIC_PROP.OPERATOR.slice(6).find(f => f.value === row.operator);
|
||
if (!find && row.operator) {
|
||
$message.warning("子表单的字段只能选择包含或不包含")
|
||
row.operator = null
|
||
}
|
||
}
|
||
},
|
||
changeGroupsType(groupsType) {
|
||
let condGroups = props.currSelect.attributes.attrs.cdata.attrs.condGroups;
|
||
if (validateNull(condGroups)) return
|
||
props.currSelect.attributes.attrs.cdata.attrs.condGroups.forEach(each => {
|
||
each.groupsType = groupsType
|
||
})
|
||
methods.validateCondData()
|
||
},
|
||
changeGroupType(item, index) {
|
||
let condGroups = props.currSelect.attributes.attrs.cdata.attrs.condGroups;
|
||
if (validateNull(condGroups)) return
|
||
props.currSelect.attributes.attrs.cdata.attrs.condGroups[index].groupType = item.groupType
|
||
methods.validateCondData()
|
||
},
|
||
onAddItem(isAdd) {
|
||
if (validateNull(data.formFieldPerms)) {
|
||
buildSysFieldsFormOption(data, props, $message)
|
||
}
|
||
if (data.cond.condGroup.length > 0) {
|
||
let find = data.cond.condGroup.find(f => !f.varKeyVal || !f.operator || !f.varVal);
|
||
if (find) {
|
||
let b = !find.varKeyVal || !find.operator || !find.varVal;
|
||
if (isAdd && b) {
|
||
$message.warning("请先填写 表单字段 或 运算符 或 值")
|
||
return
|
||
}
|
||
}
|
||
if (!isAdd) data.cond.condGroup.splice(0, data.cond.condGroup.length);
|
||
}
|
||
let obj = {varKeyVal: '', operator: '', varVal: ''};
|
||
data.cond.condGroup.push(obj);
|
||
},
|
||
addFlowNodeCondGroup() {
|
||
if (validateNull(data.cond.condGroup)) {
|
||
$message.warning("请先添加组内条件")
|
||
return
|
||
}
|
||
let valType = data.cond.valType;
|
||
let find = data.cond.condGroup.find(f => !f.varKeyVal || !f.operator || !f.varVal);
|
||
if (find) {
|
||
if (valType === DIC_PROP.VAL_TYPE[2].value) {
|
||
if (!find.varKeyVal || !find.operator || !find.varVal) {
|
||
$message.warning("表单字段 或 运算符 或 值 不能为空")
|
||
return
|
||
}
|
||
}
|
||
}
|
||
if (!methods.validateCondGroupAttrs()) return;
|
||
if (data.oldCurrentRow) {
|
||
// 先清空之前选中
|
||
let index = data.condGroups.indexOf(data.cond);
|
||
if (index !== -1) {
|
||
proxy.$refs['tableDataRef' + index][0].setCurrentRow(null)
|
||
}
|
||
data.oldCurrentRow = null
|
||
data.cond = deepClone(condData);
|
||
} else {
|
||
let cond = deepClone(data.cond);
|
||
props.currSelect.attributes.attrs.cdata.attrs.condGroups.push(cond)
|
||
methods.validateCondData()
|
||
methods.updateCondVarKeyVal(true)
|
||
}
|
||
methods.onFormLoaded()
|
||
},
|
||
validateCondGroupAttrs() {
|
||
if (!data.cond.routeAction) {
|
||
$message.warning("路由动作 不能为空")
|
||
return false
|
||
}
|
||
// 校验动作类型参数
|
||
let b = data.cond.routeAction === DIC_PROP.ROUTE_ACTIONS[1].value;
|
||
if(b || data.cond.routeAction === DIC_PROP.ROUTE_ACTIONS[3].value) {
|
||
if (!data.cond.toFlowNodeId) {
|
||
$message.warning("路由到哪个节点 不能为空")
|
||
return false
|
||
}
|
||
}
|
||
return true
|
||
},
|
||
handleCondGroupDelete(index: number) {
|
||
props.currSelect.attributes.attrs.cdata.attrs.condGroups.splice(index, 1)
|
||
methods.validateCondData()
|
||
},
|
||
handleSingleCondDelete(index: number, row: any, groupIndex) {
|
||
props.currSelect.attributes.attrs.cdata.attrs.condGroups[groupIndex].condGroup.splice(index, 1)
|
||
if (validateNull(props.currSelect.attributes.attrs.cdata.attrs.condGroups[groupIndex].condGroup)) {
|
||
methods.handleCondGroupDelete(groupIndex)
|
||
}
|
||
methods.validateCondData()
|
||
},
|
||
handleCondDelete(index: number, row: any) {
|
||
data.cond.condGroup.splice(index, 1)
|
||
},
|
||
handleCondValType(type?) {
|
||
if (type) {
|
||
data.cond.varKeyVal = null
|
||
methods.updateCondVarKeyVal(false)
|
||
}
|
||
if (!type) {
|
||
type = methods.initCurrVarKeyVal()
|
||
}
|
||
if (type === DIC_PROP.VAL_TYPE[2].value) {
|
||
data.varValOperator = DIC_PROP.OPERATOR
|
||
methods.onAddItem(false)
|
||
} else {
|
||
data.varValOperator = []
|
||
}
|
||
data.cond.operator = null
|
||
data.cond.varVal = null
|
||
},
|
||
handleCondVarKeyVal() {
|
||
let val = data.cond.varKeyVal
|
||
let valType = data.cond.valType;
|
||
if (!val) {
|
||
methods.updateCondVarKeyVal(false)
|
||
return
|
||
}
|
||
if (valType === DIC_PROP.VAL_TYPE[2].value) return
|
||
if (valType === DIC_PROP.VAL_TYPE[4].value && val.indexOf("#") === -1) {
|
||
data.cond.varKeyVal = null
|
||
$message.warning("当选择专业模式时, 函数表达式必须符合规定的格式")
|
||
return;
|
||
}
|
||
methods.updateCondVarKeyVal(true)
|
||
},
|
||
updateCondVarKeyVal(isSave) {
|
||
props.currSelect.attributes.attrs.cdata.attrs.valType = data.cond.valType
|
||
if (isSave) {
|
||
if (data.cond.valType === DIC_PROP.VAL_TYPE[2].value) {
|
||
props.currSelect.attributes.attrs.cdata.attrs.routeKeyVal = PROP_CONST.VAR_KEY_VAL.route
|
||
props.currSelect.attributes.attrs.cdata.attrs.routeKeyValName = PROP_CONST.VAR_KEY_VAL.routeName
|
||
} else {
|
||
props.currSelect.attributes.attrs.cdata.attrs.routeKeyVal = data.cond.varKeyVal
|
||
}
|
||
props.currSelect.attributes.attrs.cdata.attrs.httpMethod = data.cond.httpMethod
|
||
} else {
|
||
props.currSelect.attributes.attrs.cdata.attrs.routeKeyVal = null
|
||
props.currSelect.attributes.attrs.cdata.attrs.routeKeyValName = null
|
||
|
||
props.currSelect.attributes.attrs.cdata.attrs.condGroups = []
|
||
|
||
props.currSelect.attributes.attrs.cdata.attrs.httpParams = []
|
||
props.currSelect.attributes.attrs.cdata.attrs.httpMethod = null
|
||
data.httpUrlParamsVisible = false
|
||
}
|
||
},
|
||
validateCondData() {
|
||
let condGroups = props.currSelect.attributes.attrs.cdata.attrs.condGroups;
|
||
if (!condGroups) {
|
||
props.currSelect.attributes.attrs.cdata.attrs.condGroups = []
|
||
}
|
||
data.condGroups.splice(0, data.condGroups.length);
|
||
props.currSelect.attributes.attrs.cdata.attrs.condGroups.forEach(each => data.condGroups.push(each))
|
||
data.existData = !validateNull(data.condGroups)
|
||
},
|
||
initCurrVarKeyVal() {
|
||
data.cond.valType = props.currSelect.attributes.attrs.cdata.attrs.valType
|
||
if (data.condGroups.length <= 0) {
|
||
data.cond.varKeyVal = props.currSelect.attributes.attrs.cdata.attrs.routeKeyVal
|
||
let httpMethod = props.currSelect.attributes.attrs.cdata.attrs.httpMethod
|
||
if (httpMethod) data.cond.httpMethod = httpMethod
|
||
}
|
||
let httpParams = props.currSelect.attributes.attrs.cdata.attrs.httpParams;
|
||
if (!validateNull(httpParams)) {
|
||
data.httpUrlParamsVisible = true
|
||
}
|
||
return data.cond.valType
|
||
},
|
||
handleFlowNodeIds() {
|
||
data.toFlowNodeIds = []
|
||
let models = window._jfGraph.getElements();
|
||
if (validateNull(models)) return
|
||
models.forEach(each => {
|
||
if (!validateNodeType(each)) return
|
||
if (props.currSelect.id !== each.id) {
|
||
let id = each.id
|
||
let nodeName = each.attributes.attrs.label.text
|
||
data.toFlowNodeIds.push({id, nodeName})
|
||
}
|
||
})
|
||
},
|
||
changeTabPane(val) {
|
||
methods.validateCondData()
|
||
methods.handleCondValType()
|
||
methods.handleFlowNodeIds()
|
||
methods.onFormLoaded()
|
||
}
|
||
}
|
||
// 监听双向绑定
|
||
watch(
|
||
() => props.currSelect,
|
||
(val) => {
|
||
if (Object.keys(val).length === 0) {
|
||
return
|
||
}
|
||
methods.changeTabPane(val)
|
||
}
|
||
);
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '../assets/style/flow-attr.scss';
|
||
</style>
|