初始版本提交
This commit is contained in:
yaoyn
284
src/views/workflow/task/components/DelegateProcess.vue
Normal file
284
src/views/workflow/task/components/DelegateProcess.vue
Normal file
@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="data.visible"
|
||||
:maskClosable="false"
|
||||
:width="900"
|
||||
:title="title"
|
||||
@ok="submit"
|
||||
@cancel="close"
|
||||
>
|
||||
<div class="box" v-if="data.visible">
|
||||
<NodeHead class="mb-3 mt-3" :nodeName="t('基础信息')" />
|
||||
<div class="item">
|
||||
<label><em class="text-red-600">*</em>{{ t('被委托人：') }}</label>
|
||||
<SelectUser
|
||||
:selectedIds="data.delegateUserIds"
|
||||
:multiple="true"
|
||||
@change="
|
||||
(ids) => {
|
||||
data.delegateUserIds = ids;
|
||||
}
|
||||
"
|
||||
@change-names="
|
||||
(names) => {
|
||||
data.delegateUserNames = names;
|
||||
}
|
||||
"
|
||||
>
|
||||
<a-input
|
||||
:value="data.delegateUserNames"
|
||||
:placeholder="t('请选择委托人')"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</SelectUser>
|
||||
</div>
|
||||
<div class="item">
|
||||
<label><em class="text-red-600">*</em>{{ t('时间区间：') }}</label>
|
||||
<a-range-picker v-model:value="data.searchDate" style="width: 100%" />
|
||||
</div>
|
||||
<div class="item">
|
||||
<label>{{ t('委托说明：') }}</label>
|
||||
<a-textarea
|
||||
v-model:value="data.remark"
|
||||
:placeholder="t('请填写委托说明')"
|
||||
:auto-size="{ minRows: 2, maxRows: 5 }"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
<NodeHead class="mb-3 mt-3" :nodeName="t('模板列表')" />
|
||||
<SearchBox
|
||||
:searchConfig="{
|
||||
field: 'keyword',
|
||||
label: t('模板名称'),
|
||||
type: 'input',
|
||||
}"
|
||||
@search="
|
||||
(v) => {
|
||||
keyword = v;
|
||||
getList();
|
||||
}
|
||||
"
|
||||
@scroll-height="$emit('scrollHeight')"
|
||||
/>
|
||||
<template v-if="data.list.length > 0">
|
||||
<div class="list-page-box">
|
||||
<TemplateCard
|
||||
v-for="(item, index) in data.list"
|
||||
:class="data.checkSchemaIds.includes(item.id) ? 'picked' : ''"
|
||||
@click="check(item.id)"
|
||||
:key="index"
|
||||
:item="item"
|
||||
/>
|
||||
</div>
|
||||
<div class="page-box">
|
||||
<a-pagination
|
||||
v-model:current="data.pagination.current"
|
||||
:pageSize="data.pagination.pageSize"
|
||||
:total="data.pagination.total"
|
||||
show-less-items
|
||||
@change="getList"
|
||||
/></div>
|
||||
</template>
|
||||
|
||||
<div v-else>
|
||||
<EmptyBox />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import { SelectUser } from '/@/components/SelectOrganizational/index';
|
||||
import { NodeHead } from '/@/components/ModalPanel/index';
|
||||
import TemplateCard from '/@bpmn/components/card/TemplateCard.vue';
|
||||
import { EmptyBox } from '/@/components/ModalPanel/index';
|
||||
import { getDesignPage } from '/@/api/workflow/design';
|
||||
import { postDelegate, putDelegate, getDelegateInfo } from '/@/api/workflow/delegate';
|
||||
import { notification } from 'ant-design-vue';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import { SearchBox } from '/@/components/ModalPanel/index';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
const { t } = useI18n();
|
||||
let props = defineProps({
|
||||
id: String,
|
||||
});
|
||||
let emits = defineEmits(['close']);
|
||||
const title = computed(() => {
|
||||
return props.id == '' ? t('新增流程委托') : t('编辑流程委托');
|
||||
});
|
||||
const keyword = ref('');
|
||||
const data: {
|
||||
visible: boolean;
|
||||
delegateUserNames: string;
|
||||
delegateUserIds: Array<string>;
|
||||
schemaIds: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
remark: string;
|
||||
searchDate: [Dayjs | null, Dayjs | null];
|
||||
pagination: { current: number; total: number; pageSize: number };
|
||||
list: Array<any>;
|
||||
checkSchemaIds: Array<string>;
|
||||
} = reactive({
|
||||
visible: false,
|
||||
delegateUserNames: '',
|
||||
delegateUserIds: [],
|
||||
schemaIds: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
remark: '',
|
||||
searchDate: [null, null],
|
||||
list: [],
|
||||
checkSchemaIds: [],
|
||||
pagination: {
|
||||
current: 1,
|
||||
total: 0,
|
||||
pageSize: 6,
|
||||
},
|
||||
});
|
||||
onMounted(() => {
|
||||
open();
|
||||
});
|
||||
async function open() {
|
||||
if (props.id) {
|
||||
try {
|
||||
let res = await getDelegateInfo(props.id);
|
||||
if (res.delegateUserIds) {
|
||||
data.delegateUserIds = res.delegateUserIds.split(',');
|
||||
}
|
||||
if (res.schemaIds) {
|
||||
data.checkSchemaIds = res.schemaIds.split(',');
|
||||
}
|
||||
if (res.remark) {
|
||||
data.remark = res.remark;
|
||||
}
|
||||
if (res.startTime && res.endTime) {
|
||||
data.searchDate = [dayjs(res.startTime), dayjs(res.endTime)];
|
||||
}
|
||||
} catch (error) {}
|
||||
}
|
||||
await getList();
|
||||
data.visible = true;
|
||||
}
|
||||
function close() {
|
||||
data.visible = false;
|
||||
emits('close');
|
||||
}
|
||||
function check(id: string) {
|
||||
if (data.checkSchemaIds.includes(id)) {
|
||||
data.checkSchemaIds.splice(
|
||||
data.checkSchemaIds.findIndex((itemId) => itemId === id),
|
||||
1,
|
||||
);
|
||||
} else {
|
||||
data.checkSchemaIds.push(id);
|
||||
}
|
||||
}
|
||||
async function getList() {
|
||||
const searchParams = {
|
||||
limit: data.pagination.current,
|
||||
size: data.pagination.pageSize,
|
||||
keyword: keyword.value,
|
||||
enabledMark: 1,
|
||||
};
|
||||
|
||||
try {
|
||||
let res = await getDesignPage(searchParams);
|
||||
data.pagination.total = res.total;
|
||||
data.list = res.list;
|
||||
} catch (error) {}
|
||||
}
|
||||
async function submit() {
|
||||
if (data.delegateUserIds.length == 0) {
|
||||
notification.open({
|
||||
type: 'error',
|
||||
message: t('流程委托'),
|
||||
description: t('请选择被委托人'),
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (data.checkSchemaIds.length == 0) {
|
||||
notification.open({
|
||||
type: 'error',
|
||||
message: t('流程委托'),
|
||||
description: t('请选择模板'),
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!data.searchDate[0] || !data.searchDate[1]) {
|
||||
notification.open({
|
||||
type: 'error',
|
||||
message: t('流程委托'),
|
||||
description: t('请选择时间区间'),
|
||||
});
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
let res = false;
|
||||
let params = {
|
||||
delegateUserIds: data.delegateUserIds.join(','),
|
||||
schemaIds: data.checkSchemaIds.join(','),
|
||||
remark: data.remark,
|
||||
startTime: data.searchDate[0],
|
||||
endTime: data.searchDate[1],
|
||||
};
|
||||
if (props.id) {
|
||||
res = await putDelegate(props.id, params);
|
||||
} else {
|
||||
res = await postDelegate(params);
|
||||
}
|
||||
if (res) {
|
||||
notification.open({
|
||||
type: 'success',
|
||||
message: t('流程委托'),
|
||||
description: title.value + t('成功'),
|
||||
});
|
||||
close();
|
||||
} else {
|
||||
notification.open({
|
||||
type: 'error',
|
||||
message: t('流程委托'),
|
||||
description: title.value + t('失败'),
|
||||
});
|
||||
}
|
||||
} catch (error) {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
height: 578px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 8px;
|
||||
|
||||
label {
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-page-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.page-box {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.picked {
|
||||
border-width: 3px;
|
||||
border-style: dotted;
|
||||
border-color: #5332f5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user