colin
3 years ago
15 changed files with 1400 additions and 193 deletions
@ -0,0 +1,573 @@ |
|||
<template> |
|||
<Modal |
|||
:width="width" |
|||
:title="title" |
|||
:mask-closable="clickClose" |
|||
:destroy-on-close="closeFree" |
|||
v-model:visible="state.visible" |
|||
@ok="selectOk" |
|||
> |
|||
<div class="picker"> |
|||
<div class="candidate" v-loading="state.loading"> |
|||
<div v-if="type !== 'role'"> |
|||
<InputSearch |
|||
v-model="state.search" |
|||
@search="searchUser" |
|||
style="width: 95%;" |
|||
size="small" |
|||
allow-clear |
|||
placeholder="搜索人员，支持拼音、姓名" |
|||
/> |
|||
<div v-show="!showUsers"> |
|||
<Ellipsis hoverTip style="height: 18px; color: #8c8c8c; padding: 5px 0 0" :row="1" :content="deptStackStr"> |
|||
<!-- <i slot="pre" class="el-icon-office-building"></i> --> |
|||
<BuildOutlined> |
|||
<slot name="pre"></slot> |
|||
</BuildOutlined> |
|||
</Ellipsis> |
|||
<div style="margin-top: 5px"> |
|||
<Checkbox v-model="state.checkAll" @change="handleCheckAllChange" :disabled="!multiple">全选</Checkbox> |
|||
<span v-show="state.deptStack.length > 0" class="top-dept" @click="beforeNode">上一级</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="role-header" v-else> |
|||
<div>系统角色</div> |
|||
</div> |
|||
<div class="org-items" :style="type === 'role' ? 'height: 350px':''"> |
|||
<Empty :image-size="100" description="似乎没有数据" v-show="orgs.length === 0"/> |
|||
<div v-for="(org, index) in orgs" :key="index" :class="orgItemClass(org)" @click="selectChange(org)"> |
|||
<Checkbox v-model="org.selected" :disabled="disableDept(org)"></Checkbox> |
|||
<div v-if="org.type === 'dept'"> |
|||
<!-- <i class="el-icon-folder-opened"></i> --> |
|||
<FolderOpenOutlined /> |
|||
<span class="name">{{ org.name }}</span> |
|||
<span @click.stop="nextNode(org)" :class="`next-dept${org.selected ? '-disable':''}`"> |
|||
<!-- <i class="iconfont icon-map-site"></i>下级 --> |
|||
<ApartmentOutlined /> |
|||
下级 |
|||
</span> |
|||
</div> |
|||
<div v-else-if="org.type === 'user'" style="display: flex; align-items: center"> |
|||
<Avatar :size="35" :src="org.avatar" v-if="!isNullOrWhiteSpace(org.avatar)"/> |
|||
<span v-else class="avatar">{{getShortName(org.name)}}</span> |
|||
<span class="name">{{ org.name }}</span> |
|||
</div> |
|||
<div style="display: inline-block" v-else> |
|||
<!-- <i class="iconfont icon-bumen"></i> --> |
|||
<TeamOutlined /> |
|||
<span class="name">{{ org.name }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="selected"> |
|||
<div class="count"> |
|||
<span>已选 {{ state.select.length }} 项</span> |
|||
<span @click="clearSelected">清空</span> |
|||
</div> |
|||
<div class="org-items" style="height: 350px;"> |
|||
<Empty :image-size="100" description="请点击左侧列表选择数据" v-show="state.select.length === 0"/> |
|||
<div v-for="(org, index) in state.select" :key="index" :class="orgItemClass(org)" > |
|||
<div v-if="org.type === 'dept'"> |
|||
<!-- <i class="el-icon-folder-opened"></i> --> |
|||
<FolderOpenOutlined /> |
|||
<span style="position: static" class="name">{{ org.name }}</span> |
|||
</div> |
|||
<div v-else-if="org.type === 'user'" style="display: flex; align-items: center"> |
|||
<Avatar :size="35" :src="org.avatar" v-if="!isNullOrWhiteSpace(org.avatar)"/> |
|||
<span v-else class="avatar">{{getShortName(org.name)}}</span> |
|||
<span class="name">{{ org.name }}</span> |
|||
</div> |
|||
<div v-else> |
|||
<!-- <i class="iconfont icon-bumen"></i> --> |
|||
<TeamOutlined /> |
|||
<span class="name">{{ org.name }}</span> |
|||
</div> |
|||
<!-- <i class="el-icon-close" @click="noSelected(index)"></i> --> |
|||
<CloseOutlined @click="noSelected(index)" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</Modal> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { computed, reactive } from 'vue'; |
|||
import { Avatar, Checkbox, Empty, Modal, Input } from 'ant-design-vue'; |
|||
import { BuildOutlined, CloseOutlined, FolderOpenOutlined, ApartmentOutlined, TeamOutlined } from '@ant-design/icons-vue'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
import { isNullOrWhiteSpace } from '/@/utils/strings'; |
|||
import { findByUserName } from '/@/api/identity/userLookup'; |
|||
import { getList as getUsers } from '/@/api/identity/user'; |
|||
import { getList as getRoles } from '/@/api/identity/role'; |
|||
import { getList as getOrganizationUnits } from '/@/api/identity/organization-units'; |
|||
import Ellipsis from './Ellipsis.vue'; |
|||
|
|||
const InputSearch = Input.Search; |
|||
|
|||
const emits = defineEmits(['ok', 'close']); |
|||
const props = defineProps({ |
|||
width: { |
|||
type: String, |
|||
default: '600px' |
|||
}, |
|||
clickClose: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
closeFree: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
title: { |
|||
default: '请选择', |
|||
type: String |
|||
}, |
|||
type: { |
|||
default: 'dept', //org选择部门/人员 user-选人 dept-选部门 role-选角色 |
|||
type: String |
|||
}, |
|||
multiple: { //是否多选 |
|||
default: false, |
|||
type: Boolean |
|||
}, |
|||
selected: { |
|||
default: () => { |
|||
return [] |
|||
}, |
|||
type: Array |
|||
}, |
|||
}); |
|||
const deptStackStr = computed(() => { |
|||
return String(state.deptStack.map(v => v.name)).replaceAll(',', ' > '); |
|||
}); |
|||
const orgs = computed(() => { |
|||
return !state.search || state.search.trim() === '' ? state.nodes : state.searchUsers; |
|||
}); |
|||
const showUsers = computed(() => { |
|||
return state.search || state.search.trim() !== ''; |
|||
}); |
|||
const state = reactive({ |
|||
visible: false, |
|||
loading: false, |
|||
checkAll: false, |
|||
nowDeptId: null, |
|||
isIndeterminate: false, |
|||
searchUsers: [] as string[], |
|||
nodes: [] as any[], |
|||
select: [] as any[], |
|||
search: '', |
|||
deptStack: [] as any[], |
|||
}); |
|||
const { createMessage, createConfirm } = useMessage(); |
|||
|
|||
function show() { |
|||
state.visible = true; |
|||
init(); |
|||
initOrgList(props.type); |
|||
} |
|||
|
|||
function orgItemClass(org) { |
|||
return { |
|||
'org-item': true, |
|||
'org-dept-item': org.type === 'dept', |
|||
'org-user-item': org.type === 'user', |
|||
'org-role-item': org.type === 'role', |
|||
}; |
|||
} |
|||
|
|||
function disableDept(node) { |
|||
return props.type === 'user' && 'dept' === node.type; |
|||
} |
|||
|
|||
function initOrgList(type) { |
|||
switch (type) { |
|||
case 'dept': |
|||
getOrgList(); |
|||
break; |
|||
case 'role': |
|||
getRoleList(); |
|||
break; |
|||
case 'user': |
|||
getUserList(); |
|||
break; |
|||
} |
|||
} |
|||
|
|||
function getUserList() { |
|||
state.loading = true; |
|||
getUsers({}).then(rsp => { |
|||
state.loading = false; |
|||
state.nodes = rsp.items.map(item => { |
|||
return { |
|||
...item, |
|||
name: item.userName, |
|||
}; |
|||
}); |
|||
selectToLeft(); |
|||
}).catch(err => { |
|||
state.loading = false; |
|||
createMessage.error(err.response.data); |
|||
}); |
|||
} |
|||
|
|||
function getRoleList() { |
|||
state.loading = true; |
|||
getRoles({}).then(rsp => { |
|||
state.loading = false; |
|||
state.nodes = rsp.items; |
|||
selectToLeft(); |
|||
}).catch(err => { |
|||
state.loading = false; |
|||
createMessage.error(err.response.data); |
|||
}); |
|||
} |
|||
|
|||
function getOrgList() { |
|||
state.loading = true; |
|||
getOrganizationUnits({}).then(rsp => { |
|||
state.loading = false; |
|||
state.nodes = rsp.items.map(item => { |
|||
return { |
|||
...item, |
|||
name: item.displayName, |
|||
}; |
|||
}); |
|||
selectToLeft(); |
|||
}).catch(err => { |
|||
state.loading = false; |
|||
createMessage.error(err.response.data); |
|||
}); |
|||
} |
|||
|
|||
function getShortName(name) { |
|||
if (name) { |
|||
return name.length > 2 ? name.substring(1, 3) : name; |
|||
} |
|||
return '**'; |
|||
} |
|||
|
|||
function searchUser() { |
|||
let userName = state.search.trim(); |
|||
state.searchUsers = []; |
|||
state.loading = true; |
|||
findByUserName(userName).then(rsp => { |
|||
state.loading = false; |
|||
state.searchUsers = [rsp.userName]; |
|||
selectToLeft(); |
|||
}).catch(() => { |
|||
state.loading = false; |
|||
createMessage.error("接口异常"); |
|||
}); |
|||
} |
|||
|
|||
function selectToLeft() { |
|||
let nodes = state.search.trim() === '' ? state.nodes : state.searchUsers; |
|||
nodes.forEach(node => { |
|||
for (let i = 0; i < state.select.length; i++) { |
|||
if (state.select[i].id === node.id) { |
|||
node.selected = true; |
|||
break; |
|||
} else { |
|||
node.selected = false; |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function selectChange(node) { |
|||
if (node.selected) { |
|||
state.checkAll = false; |
|||
for (let i = 0; i < state.select.length; i++) { |
|||
if (state.select[i].id === node.id) { |
|||
state.select.splice(i, 1); |
|||
break; |
|||
} |
|||
} |
|||
node.selected = false; |
|||
} else if (!disableDept(node)) { |
|||
node.selected = true; |
|||
let nodes = state.search.trim() === '' ? state.nodes : state.searchUsers; |
|||
if (!props.multiple) { |
|||
nodes.forEach(nd => { |
|||
if (node.id !== nd.id) { |
|||
nd.selected = false; |
|||
} |
|||
}); |
|||
} |
|||
if (node.type === 'dept') { |
|||
if (!props.multiple) { |
|||
state.select = [node]; |
|||
} else { |
|||
state.select.unshift(node); |
|||
} |
|||
} else { |
|||
if (!props.multiple) { |
|||
state.select = [node]; |
|||
} else { |
|||
state.select.push(node); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
function noSelected(index) { |
|||
let nodes = state.nodes; |
|||
for (let f = 0; f < 2; f++) { |
|||
for (let i = 0; i < nodes.length; i++) { |
|||
if (nodes[i].id === state.select[index].id) { |
|||
nodes[i].selected = false; |
|||
state.checkAll = false; |
|||
break; |
|||
} |
|||
} |
|||
nodes = state.searchUsers; |
|||
} |
|||
state.select.splice(index, 1) |
|||
} |
|||
|
|||
function handleCheckAllChange() { |
|||
state.nodes.forEach(node => { |
|||
if (state.checkAll) { |
|||
if (!node.selected && !disableDept(node)) { |
|||
node.selected = true |
|||
state.select.push(node) |
|||
} |
|||
} else { |
|||
node.selected = false; |
|||
for (let i = 0; i < state.select.length; i++) { |
|||
if (state.select[i].id === node.id) { |
|||
state.select.splice(i, 1); |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function nextNode(node) { |
|||
state.nowDeptId = node.id; |
|||
state.deptStack.push(node); |
|||
getOrgList(); |
|||
} |
|||
|
|||
function beforeNode() { |
|||
if (state.deptStack.length === 0) { |
|||
return; |
|||
} |
|||
if (state.deptStack.length < 2) { |
|||
state.nowDeptId = null; |
|||
} else { |
|||
state.nowDeptId = state.deptStack[state.deptStack.length - 2].id; |
|||
} |
|||
state.deptStack.splice(state.deptStack.length - 1, 1); |
|||
getOrgList(); |
|||
} |
|||
|
|||
function recover() { |
|||
state.select = []; |
|||
state.nodes.forEach(nd => nd.selected = false); |
|||
} |
|||
|
|||
function selectOk() { |
|||
emits('ok', Object.assign([], state.select.map(v => { |
|||
v.avatar = undefined; |
|||
return v; |
|||
}))); |
|||
state.visible = false; |
|||
recover(); |
|||
} |
|||
|
|||
function clearSelected(){ |
|||
createConfirm({ |
|||
title: '提示', |
|||
content: '您确定要清空已选中的项?', |
|||
iconType: 'warning', |
|||
onOk: () => { |
|||
recover(); |
|||
}, |
|||
}); |
|||
} |
|||
|
|||
function close() { |
|||
emits('close'); |
|||
recover(); |
|||
state.visible = false; |
|||
} |
|||
|
|||
function init() { |
|||
state.checkAll = false; |
|||
state.nowDeptId = null; |
|||
state.deptStack = []; |
|||
state.nodes = []; |
|||
state.select = Object.assign([], props.selected); |
|||
selectToLeft(); |
|||
} |
|||
|
|||
defineExpose({ |
|||
show, |
|||
close, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
@containWidth: 278px; |
|||
.candidate, .selected { |
|||
position: absolute; |
|||
display: inline-block; |
|||
width: @containWidth; |
|||
height: 400px; |
|||
border: 1px solid #e8e8e8; |
|||
} |
|||
|
|||
.picker { |
|||
height: 402px; |
|||
position: relative; |
|||
text-align: left; |
|||
.candidate { |
|||
left: 0; |
|||
top: 0; |
|||
|
|||
.role-header{ |
|||
padding: 10px !important; |
|||
margin-bottom: 5px; |
|||
border-bottom: 1px solid #e8e8e8; |
|||
} |
|||
|
|||
.top-dept{ |
|||
margin-left: 20px; |
|||
cursor: pointer; |
|||
color:#38adff; |
|||
} |
|||
.next-dept { |
|||
float: right; |
|||
color: @primary-color; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.next-dept-disable { |
|||
float: right; |
|||
color: #8c8c8c; |
|||
cursor: not-allowed; |
|||
} |
|||
|
|||
& > div:first-child { |
|||
padding: 5px 10px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.selected { |
|||
right: 0; |
|||
top: 0; |
|||
} |
|||
|
|||
.org-items { |
|||
overflow-y: auto; |
|||
height: 310px; |
|||
|
|||
.anticon-close { |
|||
position: absolute; |
|||
right: 5px; |
|||
cursor: pointer; |
|||
font-size: larger; |
|||
} |
|||
.org-dept-item { |
|||
padding: 10px 5px; |
|||
|
|||
& > div { |
|||
display: inline-block; |
|||
|
|||
& > span:last-child { |
|||
position: absolute; |
|||
right: 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.org-role-item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 10px 5px; |
|||
} |
|||
|
|||
:deep(.org-user-item) { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 5px; |
|||
|
|||
& > div { |
|||
display: inline-block; |
|||
} |
|||
|
|||
.avatar { |
|||
width: 35px; |
|||
text-align: center; |
|||
line-height: 35px; |
|||
background: @primary-color; |
|||
color: white; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
|
|||
:deep(.org-item) { |
|||
margin: 0 5px; |
|||
border-radius: 5px; |
|||
position: relative; |
|||
display: flex; |
|||
|
|||
.ant-checkbox { |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.name { |
|||
margin-left: 5px; |
|||
} |
|||
|
|||
&:hover { |
|||
background: #f1f1f1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.selected { |
|||
border-left: none; |
|||
|
|||
.count { |
|||
width: calc(@containWidth - 20px); |
|||
padding: 10px; |
|||
display: inline-block; |
|||
border-bottom: 1px solid #e8e8e8; |
|||
margin-bottom: 5px; |
|||
& > span:nth-child(2) { |
|||
float: right; |
|||
color: #c75450; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
|
|||
:deep(.ant-modal-body) { |
|||
padding: 10px 20px; |
|||
} |
|||
|
|||
.disabled{ |
|||
cursor: not-allowed !important; |
|||
color: #8c8c8c !important; |
|||
} |
|||
|
|||
::-webkit-scrollbar { |
|||
float: right; |
|||
width: 4px; |
|||
height: 4px; |
|||
background-color: white; |
|||
} |
|||
|
|||
::-webkit-scrollbar-thumb { |
|||
border-radius: 16px; |
|||
background-color: #efefef; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,349 @@ |
|||
<template> |
|||
<div> |
|||
<Form layout="vertical"> |
|||
<FormItem label="⚙ 选择审批对象" name="text" class="user-type"> |
|||
<RadioGroup v-model:value="nodeProps.assignedType"> |
|||
<Radio v-for="t in state.approvalTypes" :value="t.type" :key="t.type">{{ t.name }}</Radio> |
|||
</RadioGroup> |
|||
<div v-if="nodeProps.assignedType === 'ASSIGN_USER'"> |
|||
<Button size="small" type="primary" @click="handleSelectUser" round> |
|||
<template #icon> |
|||
<PlusOutlined /> |
|||
</template> |
|||
选择人员 |
|||
</Button> |
|||
<OrgItems v-model:value="nodeProps.assignedUser"/> |
|||
</div> |
|||
<div v-else-if="nodeProps.assignedType === 'SELF_SELECT'"> |
|||
<RadioGroup size="small" v-model:value="nodeProps.selfSelect.multiple"> |
|||
<RadioButton :value="false">自选一个人</RadioButton> |
|||
<RadioButton :value="true">自选多个人</RadioButton> |
|||
</RadioGroup> |
|||
</div> |
|||
<div v-else-if="nodeProps.assignedType === 'ROLE'"> |
|||
<Button size="small" type="primary" @click="handleSelectRole" round> |
|||
<template #icon> |
|||
<PlusOutlined /> |
|||
</template> |
|||
选择系统角色 |
|||
</Button> |
|||
<OrgItems v-model:value="nodeProps.role" /> |
|||
</div> |
|||
<div v-else-if="nodeProps.assignedType === 'FORM_USER'"> |
|||
<FormItem label="选择表单联系人项" name="text" class="approve-end"> |
|||
<Select style="width: 80%;" size="small" v-model:value="nodeProps.formUser" placeholder="请选择包含联系人的表单项"> |
|||
<SelectOption v-for="op in forms" :value="op.id">{{ op.title }}</SelectOption> |
|||
</Select> |
|||
</FormItem> |
|||
</div> |
|||
<div v-else> |
|||
<span class="item-desc">发起人自己作为审批人进行审批</span> |
|||
</div> |
|||
</FormItem> |
|||
|
|||
<Divider></Divider> |
|||
<FormItem label="👤 审批人为空时" name="text" class="line-mode"> |
|||
<RadioGroup v-model:value="nodeProps.nobody.handler"> |
|||
<Radio value="TO_PASS">自动通过</Radio> |
|||
<Radio value="TO_REFUSE">自动驳回</Radio> |
|||
<Radio value="TO_ADMIN">转交审批管理员</Radio> |
|||
<Radio value="TO_USER">转交到指定人员</Radio> |
|||
</RadioGroup> |
|||
|
|||
<div style="margin-top: 10px" v-if="nodeProps.nobody.handler === 'TO_USER'"> |
|||
<Button size="small" type="primary" @click="handleSelectNoSetUser" round> |
|||
<template #icon> |
|||
<PlusOutlined /> |
|||
</template> |
|||
选择人员</Button> |
|||
<OrgItems v-model:value="nodeProps.assignedUser"/> |
|||
</div> |
|||
|
|||
</FormItem> |
|||
|
|||
<div v-if="showMode"> |
|||
<Divider /> |
|||
<FormItem label="👩👦👦 多人审批时审批方式" name="text" class="approve-mode"> |
|||
<RadioGroup v-model:value="nodeProps.mode"> |
|||
<Radio value="NEXT">会签 （按选择顺序审批，每个人必须同意）</Radio> |
|||
<Radio value="AND">会签（可同时审批，每个人必须同意）</Radio> |
|||
<Radio value="OR">或签（有一人同意即可）</Radio> |
|||
</RadioGroup> |
|||
</FormItem> |
|||
</div> |
|||
|
|||
<Divider>高级设置</Divider> |
|||
<FormItem label="✍ 审批同意时是否需要签字" name="text"> |
|||
<Switch checked-children="需要" un-checked-children="不用" v-model:checked="nodeProps.sign"></Switch> |
|||
<Tooltip class="item" effect="dark" content="如果全局设置了需要签字，则此处不生效" placement="top"> |
|||
<QuestionOutlined style="margin-left: 10px; font-size: medium; color: #b0b0b1" /> |
|||
</Tooltip> |
|||
</FormItem> |
|||
<FormItem label="⏱ 审批期限（为 0 则不生效）" name="timeLimit"> |
|||
<InputGroup style="width: 180px;" compact> |
|||
<Input |
|||
style="width: 100px;" |
|||
placeholder="时长" |
|||
size="small" |
|||
type="number" |
|||
v-model:value="nodeProps.timeLimit.timeout.value" |
|||
/> |
|||
<Select style="width: 75px;" v-model:value="nodeProps.timeLimit.timeout.unit" size="small" placeholder="请选择"> |
|||
<SelectOption value="D">天</SelectOption> |
|||
<SelectOption value="H">小时</SelectOption> |
|||
<SelectOption value="M">分钟</SelectOption> |
|||
</Select> |
|||
</InputGroup> |
|||
</FormItem> |
|||
<FormItem label="审批期限超时后执行" name="level" v-if="nodeProps.timeLimit.timeout.value > 0"> |
|||
<RadioGroup v-model:value="nodeProps.timeLimit.handler.type"> |
|||
<Radio value="PASS">自动通过</Radio> |
|||
<Radio value="REFUSE">自动驳回</Radio> |
|||
<Radio value="NOTIFY">发送提醒</Radio> |
|||
</RadioGroup> |
|||
<div v-if="nodeProps.timeLimit.handler.type === 'NOTIFY'"> |
|||
<div style="color:#409EEF; font-size: small">默认提醒当前审批人</div> |
|||
<Switch checked-children="一次" un-checked-children="循环" v-model:checked="nodeProps.timeLimit.handler.notify.once"></Switch> |
|||
<span style="margin-left: 20px" v-if="!nodeProps.timeLimit.handler.notify.once"> |
|||
每隔 |
|||
<InputNumber |
|||
:min="0" |
|||
:max="10000" |
|||
:step="1" |
|||
size="small" |
|||
v-model:value="nodeProps.timeLimit.handler.notify.hour" |
|||
/> |
|||
小时提醒一次 |
|||
</span> |
|||
</div> |
|||
</FormItem> |
|||
<FormItem label="🙅 如果审批被驳回 👇"> |
|||
<RadioGroup v-model:value="nodeProps.refuse.type"> |
|||
<Radio value="TO_END">直接结束流程</Radio> |
|||
<Radio value="TO_BEFORE">驳回到上级审批节点</Radio> |
|||
<Radio value="TO_NODE">驳回到指定节点</Radio> |
|||
</RadioGroup> |
|||
<div v-if="nodeProps.refuse.type === 'TO_NODE'"> |
|||
<span>指定节点:</span> |
|||
<Select style="margin-left: 10px; width: 150px;" placeholder="选择跳转步骤" size="small" v-model:value="nodeProps.refuse.target"> |
|||
<SelectOption v-for="(node, i) in nodeOptions" :key="i" :value="node.id">{{ node.name }}</SelectOption> |
|||
</Select> |
|||
</div> |
|||
|
|||
</FormItem> |
|||
</Form> |
|||
<OrgPicker |
|||
multiple |
|||
:title="pickerTitle" |
|||
:type="state.orgPickerType" |
|||
ref="orgPickerRef" |
|||
:selected="state.orgPickerSelected" |
|||
@ok="selected" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { computed, nextTick, reactive, ref, unref } from 'vue'; |
|||
import { Button, Divider, Form, Radio, Input, InputNumber, Select, Switch, Tooltip } from 'ant-design-vue'; |
|||
import { PlusOutlined, QuestionOutlined } from '@ant-design/icons-vue'; |
|||
import { useFlowStoreWithOut } from '/@/store/modules/flow'; |
|||
import OrgPicker from "../OrgPicker.vue"; |
|||
import OrgItems from "../OrgItems.vue"; |
|||
|
|||
const FormItem = Form.Item; |
|||
const InputGroup = Input.Group; |
|||
const RadioGroup = Radio.Group; |
|||
const RadioButton = Radio.Button; |
|||
const SelectOption = Select.Option; |
|||
|
|||
const props = defineProps({ |
|||
config: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
}, |
|||
}, |
|||
}); |
|||
const orgPickerRef = ref<any>(); |
|||
const flowStore = useFlowStoreWithOut(); |
|||
|
|||
const nodeProps = computed(() => { |
|||
return flowStore.selectedNode.props; |
|||
}); |
|||
|
|||
const selectUser = computed(() => { |
|||
return props.config.assignedUser || []; |
|||
}); |
|||
|
|||
const selectRole = computed(() => { |
|||
return props.config.role || []; |
|||
}); |
|||
|
|||
const forms = computed(() => { |
|||
return flowStore.design.formItems.filter(f => { |
|||
return f.name === 'UserPicker'; |
|||
}); |
|||
}); |
|||
|
|||
const pickerTitle = computed(() => { |
|||
switch (state.orgPickerType) { |
|||
case 'user': |
|||
return '请选择人员'; |
|||
case 'role': |
|||
return '请选择系统角色'; |
|||
default: |
|||
return undefined; |
|||
} |
|||
}); |
|||
|
|||
const nodeOptions = computed(() => { |
|||
let values: any[] = []; |
|||
const excType = ['ROOT', 'EMPTY', "CONDITION", "CONDITIONS", "CONCURRENT", "CONCURRENTS"]; |
|||
flowStore.nodeMap.forEach((v) => { |
|||
if (excType.indexOf(v.type) === -1) { |
|||
values.push({id: v.id, name: v.name}); |
|||
} |
|||
}); |
|||
return values; |
|||
}); |
|||
|
|||
const showMode = computed(() => { |
|||
const node = unref(nodeProps); |
|||
switch (node.assignedType) { |
|||
case "ASSIGN_USER": |
|||
return node.assignedUser.length > 0; |
|||
case "SELF_SELECT": |
|||
return node.selfSelect.multiple; |
|||
case "FORM_USER": |
|||
return true; |
|||
case "ROLE": |
|||
return true; |
|||
default: |
|||
return false; |
|||
}; |
|||
}); |
|||
|
|||
const state = reactive({ |
|||
showOrgSelect: false, |
|||
orgPickerSelected: [] as any[], |
|||
orgPickerType: 'user', |
|||
approvalTypes: [ |
|||
{name: '指定人员', type: 'ASSIGN_USER'}, |
|||
{name: '发起人自选', type: 'SELF_SELECT'}, |
|||
{name: '角色', type: 'ROLE'}, |
|||
{name: '发起人自己', type: 'SELF'}, |
|||
{name: '表单内联系人', type: 'FORM_USER'}, |
|||
] |
|||
}); |
|||
|
|||
function handleSelectUser() { |
|||
state.orgPickerSelected = unref(selectUser); |
|||
state.orgPickerType = 'user'; |
|||
nextTick(() => { |
|||
const orgPicker = unref(orgPickerRef); |
|||
orgPicker?.show(); |
|||
}); |
|||
} |
|||
|
|||
function handleSelectNoSetUser() { |
|||
state.orgPickerSelected = props.config.nobody.assignedUser; |
|||
state.orgPickerType = 'user'; |
|||
nextTick(() => { |
|||
const orgPicker = unref(orgPickerRef); |
|||
orgPicker?.show(); |
|||
}); |
|||
} |
|||
|
|||
function handleSelectRole() { |
|||
state.orgPickerSelected = unref(selectRole); |
|||
state.orgPickerType = 'role'; |
|||
nextTick(() => { |
|||
const orgPicker = unref(orgPickerRef); |
|||
orgPicker?.show(); |
|||
}); |
|||
} |
|||
|
|||
function selected(select) { |
|||
switch (state.orgPickerType) { |
|||
case 'user': |
|||
nodeProps.value.role = []; |
|||
nodeProps.value.assignedUser = select; |
|||
state.orgPickerSelected.length = 0; |
|||
select.forEach(val => state.orgPickerSelected.push(val)); |
|||
break; |
|||
case 'role': |
|||
nodeProps.value.assignedUser = []; |
|||
nodeProps.value.role = select; |
|||
state.orgPickerSelected.length = 0; |
|||
select.forEach(val => state.orgPickerSelected.push(val)); |
|||
break; |
|||
} |
|||
} |
|||
|
|||
function removeUserItem(index) { |
|||
selectUser.value.splice(index, 1); |
|||
} |
|||
|
|||
function removeRoleItem(index) { |
|||
selectRole.value.splice(index, 1); |
|||
} |
|||
|
|||
defineExpose({ |
|||
removeUserItem, |
|||
removeRoleItem, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.user-type { |
|||
:deep(.a-radio) { |
|||
width: 110px; |
|||
margin-top: 10px; |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
|
|||
:deep(.line-mode) { |
|||
.a-radio { |
|||
width: 150px; |
|||
margin: 5px; |
|||
} |
|||
} |
|||
|
|||
:deep(.a-form-item__label) { |
|||
line-height: 25px; |
|||
} |
|||
|
|||
:deep(.approve-mode) { |
|||
.a-radio { |
|||
float: left; |
|||
width: 100%; |
|||
display: block; |
|||
margin-top: 15px; |
|||
} |
|||
} |
|||
|
|||
:deep(.approve-end) { |
|||
position: relative; |
|||
|
|||
.a-radio-group { |
|||
width: 160px; |
|||
} |
|||
|
|||
.a-radio { |
|||
margin-bottom: 5px; |
|||
width: 100%; |
|||
} |
|||
|
|||
.approve-end-leave { |
|||
position: absolute; |
|||
bottom: -5px; |
|||
left: 150px; |
|||
} |
|||
} |
|||
|
|||
:deep(.a-divider--horizontal) { |
|||
margin: 10px 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,86 @@ |
|||
<template> |
|||
<div class="end-point"> |
|||
<Form layout="vertical"> |
|||
<Tabs v-model:activeKey="state.activeKey"> |
|||
<TabPane key="common" tab="常用"> |
|||
<FormItem label="名称" extra="活动的名称。" name="name"> |
|||
<Input v-model:value="nodeProps.name" /> |
|||
</FormItem> |
|||
<FormItem label="显示名称" extra="活动的显示名称。" name="displayName"> |
|||
<Input v-model:value="nodeProps.displayName" /> |
|||
</FormItem> |
|||
<FormItem label="描述" extra="活动的描述。" name="description"> |
|||
<TextArea v-model:value="nodeProps.description" show-count :autoSize="{ minRows: 3 }" /> |
|||
</FormItem> |
|||
</TabPane> |
|||
<TabPane key="properties" tab="属性"> |
|||
<FormItem label="路径" extra="触发此活动的相对路径" name="path"> |
|||
<Input v-model:value="nodeProps.path" /> |
|||
</FormItem> |
|||
<FormItem label="请求方法" extra="触发此活动的HTTP方法。" name="methods"> |
|||
<Select v-model:value="nodeProps.methods" mode="multiple"> |
|||
<SelectOption value="GET">GET</SelectOption> |
|||
<SelectOption value="POST">POST</SelectOption> |
|||
<SelectOption value="PUT">PUT</SelectOption> |
|||
<SelectOption value="PATCH">PATCH</SelectOption> |
|||
<SelectOption value="DELETE">DELETE</SelectOption> |
|||
<SelectOption value="OPTIONS">OPTIONS</SelectOption> |
|||
<SelectOption value="HEAD">HEAD</SelectOption> |
|||
</Select> |
|||
</FormItem> |
|||
<FormItem label="读取内容" extra="指示是否应将HTTP请求内容体作为HTTP请求模型的一部分读取和存储。存储的格式取决于内容类型头。" name="readContent" class="user-type"> |
|||
<Checkbox v-model:checked="nodeProps.readContent" /> |
|||
</FormItem> |
|||
</TabPane> |
|||
<TabPane key="advanced" tab="高级"> |
|||
<FormItem label="数据类型" extra="表单数据类型" name="targetType"> |
|||
<Input v-model:value="nodeProps.targetType" /> |
|||
</FormItem> |
|||
<FormItem label="架构" extra="Json格式数据架构" name="schema"> |
|||
<CodeEditor v-model:value="nodeProps.schema" /> |
|||
</FormItem> |
|||
</TabPane> |
|||
<TabPane key="security" tab="安全"> |
|||
<FormItem label="身份认证" extra="选中以只允许经过身份验证的请求" name="authorize"> |
|||
<Checkbox v-model:checked="nodeProps.authorize" /> |
|||
</FormItem> |
|||
<FormItem label="策略" extra="提供一个要评估的策略。如果策略失败，请求将被禁止。" name="policy"> |
|||
<Input v-model:value="nodeProps.policy" /> |
|||
</FormItem> |
|||
</TabPane> |
|||
</Tabs> |
|||
</Form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { computed, reactive } from 'vue'; |
|||
import { Checkbox, Form, Input, Select, Tabs } from 'ant-design-vue'; |
|||
import { CodeEditor } from '/@/components/CodeEditor'; |
|||
import { useFlowStoreWithOut } from '/@/store/modules/flow'; |
|||
|
|||
const FormItem = Form.Item; |
|||
const SelectOption = Select.Option; |
|||
const TabPane = Tabs.TabPane; |
|||
const TextArea = Input.TextArea; |
|||
|
|||
defineProps({ |
|||
config: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
}, |
|||
}, |
|||
}); |
|||
const flowStore = useFlowStoreWithOut(); |
|||
const nodeProps = computed(() => { |
|||
return flowStore.selectedNode.props; |
|||
}); |
|||
const state = reactive({ |
|||
activeKey: 'common', |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
<template> |
|||
<div> |
|||
<Tabs v-model="state.active" v-if="name && formConfig.length > 0"> |
|||
<TabPane :label="name" name="properties"> |
|||
<component :is="componentRef[(selectNode.type||'').toLowerCase()]" :config="selectNode.props"/> |
|||
</TabPane> |
|||
<!-- <TabPane label="表单权限设置" name="permissions"> |
|||
<form-authority-config/> |
|||
</TabPane> --> |
|||
</Tabs> |
|||
<component :is="componentRef[(selectNode.type||'').toLowerCase()]" v-else :config="selectNode.props"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { computed, reactive, shallowRef } from 'vue'; |
|||
import { Tabs } from 'ant-design-vue'; |
|||
import { useFlowStoreWithOut } from '/@/store/modules/flow'; |
|||
import Approval from './ApprovalNodeConfig.vue' |
|||
import Trigger from './TriggerNodeConfig.vue' |
|||
//import FormAuthorityConfig from './FormAuthorityConfig.vue' |
|||
import Root from './RootNodeConfig.vue' |
|||
import HttpEndPoint from './HttpEndPointNodeConfig.vue'; |
|||
|
|||
const TabPane = Tabs.TabPane; |
|||
const componentRef = shallowRef({ |
|||
'root': Root, |
|||
'approval': Approval, |
|||
'trigger': Trigger, |
|||
'httpendpoint': HttpEndPoint, |
|||
}); |
|||
const flowStore = useFlowStoreWithOut(); |
|||
const selectNode = computed(() => { |
|||
return flowStore.selectedNode; |
|||
}); |
|||
const formConfig = computed(() => { |
|||
return flowStore.design.formItems; |
|||
}); |
|||
const name = computed(() => { |
|||
switch (selectNode.value.type) { |
|||
case 'ROOT': |
|||
return '设置发起人'; |
|||
case 'APPROVAL': |
|||
return '设置审批人'; |
|||
case 'CC': |
|||
return '设置抄送人'; |
|||
default: |
|||
return undefined; |
|||
} |
|||
}); |
|||
const state = reactive({ |
|||
active: 'properties', |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,73 @@ |
|||
<template> |
|||
<Node |
|||
:title="config.name" |
|||
:show-error="state.showError" |
|||
:content="content" |
|||
:error-info="state.errorInfo" |
|||
@selected="$emit('selected')" |
|||
@delNode="$emit('delNode')" |
|||
@insertNode="type => $emit('insertNode', type)" |
|||
placeholder="请设置触发活动的路径" |
|||
header-bgc="#3296fa" |
|||
> |
|||
<template #headerIcon> |
|||
<GlobalOutlined /> |
|||
</template> |
|||
</Node> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { computed, reactive } from 'vue'; |
|||
import { GlobalOutlined } from '@ant-design/icons-vue'; |
|||
import { isNullOrWhiteSpace } from '/@/utils/strings'; |
|||
import Node from './Node.vue'; |
|||
|
|||
defineEmits(['delNode', 'insertNode', 'selected']); |
|||
const props = defineProps({ |
|||
config:{ |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
}); |
|||
const content = computed(() => { |
|||
return props.config.props.path; |
|||
}); |
|||
const state = reactive({ |
|||
showError: false, |
|||
errorInfo: '', |
|||
}); |
|||
|
|||
function validate(err: string[]) { |
|||
state.showError = false; |
|||
if (isNullOrWhiteSpace(props.config.props.name)) { |
|||
state.showError = true; |
|||
state.errorInfo = '请设置活动的名称'; |
|||
return; |
|||
} |
|||
if (isNullOrWhiteSpace(props.config.props.path)) { |
|||
state.showError = true; |
|||
state.errorInfo = '请设置触发活动的请求地址'; |
|||
return; |
|||
} |
|||
if (Array.isArray(props.config.props.methods) && |
|||
props.config.props.methods.length === 0) { |
|||
state.showError = true; |
|||
state.errorInfo = '请设置触发活动的请求方法'; |
|||
return; |
|||
} |
|||
if (state.showError){ |
|||
err.push(`${props.config.name} 活动配置未设置完善`); |
|||
} |
|||
return !state.showError; |
|||
} |
|||
|
|||
defineExpose({ |
|||
validate, |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue