vue-vben-admin/src/views/demo/workflow/task/uncompletedTask.vue

169 lines
4.4 KiB
Vue

<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<BasicTable @register="registerTable" @fetch-success="onFetchSuccess" :searchInfo="searchInfo">
<template #toolbar>
<!-- <a-button type="primary" @click="handleCreate"> </a-button> -->
<PermissionBtn @btnEvent="onBtnClicked"></PermissionBtn>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '审核',
onClick: handleDetail.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
<a-modal
width="100%"
wrap-class-name="full-modal"
v-model:open="auditOpen"
title="审核"
:destroyOnClose="true"
>
<template #footer> </template>
<Audit
ref="posRef"
:processId="processId"
:taskId="taskId"
:isRead="isRead"
:type="type"
@closeModel="closeMolder"
></Audit>
</a-modal>
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, h, ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { getLoadMyUncompletedPage } from '@/api/sys/WFTask';
import { getDetail } from '@/api/sys/WFSchemeInfo';
import { Tag } from 'ant-design-vue';
import Audit from "./process/audit.vue"
import { flowStore } from '@/store/modules/flow';
const flowWfDataStore = flowStore();
const searchInfo = reactive<Recordable>({});
import { useGo } from '@/hooks/web/usePage';
const go = useGo();
const processId = ref('');
const taskId = ref('');
const isRead = ref(0);
const type = ref('');
const auditOpen = ref(false);
const [registerTable] = useTable({
api: getLoadMyUncompletedPage,
columns: [
{
title: '任务',
dataIndex: 'unitName',
},
{
title: '标题',
dataIndex: 'processTitle',
},
{
title: '状态',
dataIndex: 'isUrge',
width: 80,
customRender: ({ record }) => {
if (record.isUrge == '1') {
const color = 'red';
const text = '催办';
return h(Tag, { color: color }, () => text);
} else {
const color = 'green';
const text = '正常';
return h(Tag, { color: color }, () => text);
}
},
},
{
title: '提交人',
dataIndex: 'processUserName',
},
{
title: '创建时间',
dataIndex: 'createDate',
},
],
rowKey: 'id',
formConfig: {
labelWidth: 120,
schemas: [
{
field: '[StartDate, EndDate]',
label: '日期范围',
component: 'RangePicker',
componentProps: {
format: 'YYYY-MM-DD',
placeholder: ['开始日期', '结束日期'],
},
colProps: { span: 8 },
},
{
field: 'keyWord',
label: '关键字',
component: 'Input',
colProps: { span: 8 },
},
],
},
useSearchForm: true,
showTableSetting: true,
bordered: true,
handleSearchInfoFn(info) {
return info;
},
actionColumn: {
width: 100,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
},
});
async function handleDetail(record) {
let data = await getDetail({ code: record.processCode });
let scheme = JSON.parse(data.scheme.content);
let wfData = scheme.wfData;
flowWfDataStore.setWfDataAll(wfData);
auditOpen.value = true;
processId.value = record.processId;
taskId.value = record.id;
type.value = record.type;
// go(
// '/dashboard/task_audit_preview/detail?processId=' +
// record.processId +
// '&taskId=' +
// record.id +
// '&type=' +
// record.type +
// '&isRead=0',
// );
}
function closeMolder(){
auditOpen.value = false;
}
</script>
<style lang="less">
.full-modal {
.ant-modal {
max-width: 100%;
top:0;
}
.ant-modal-content {
height: calc(100vh);
}
.ant-modal-body {
height: 85%;
}
}
</style>