fix: 增加已办页面的独立链接

fix: 组织管理的主列表改为懒加载
This commit is contained in:
gaoyunqi
2024-07-22 19:46:51 +08:00
parent 8034e9b090
commit 6c5b4b6272
5 changed files with 384 additions and 244 deletions

View File

@ -67,7 +67,7 @@ function handleIndexColumn(
flag: INDEX_COLUMN_FLAG, flag: INDEX_COLUMN_FLAG,
width: 50, width: 50,
title: t('序号'), title: t('序号'),
align: 'right', align: 'center',
customRender: ({ index }) => { customRender: ({ index }) => {
const getPagination = unref(getPaginationRef); const getPagination = unref(getPaginationRef);
if (isBoolean(getPagination)) { if (isBoolean(getPagination)) {

View File

@ -182,6 +182,14 @@ export const FLOW_ROUTE: AppRouteRecordRaw[] = [{
meta: { meta: {
title: '我发起的' title: '我发起的'
} }
},
{
path: 'done',
name: 'FlowListPage4',
component: () => import('/@/views/secondDev/processTasksPage.vue'),
meta: {
title: '已办'
}
} }
] ]
}, { }, {

View File

@ -24,7 +24,7 @@
loader: () => import('../workflow/task/components/processTasks/MyProcessV2.vue') loader: () => import('../workflow/task/components/processTasks/MyProcessV2.vue')
}); });
const TaskDone = defineAsyncComponent({ const TaskDone = defineAsyncComponent({
loader: () => import('../workflow/task/components/processTasks/TaskDone.vue') loader: () => import('../workflow/task/components/processTasks/TaskDoneV2.vue')
}); });
const RecycleBin = defineAsyncComponent({ const RecycleBin = defineAsyncComponent({
@ -100,6 +100,8 @@
id = 'Drafts'; id = 'Drafts';
} else if (lHash.indexOf('/myProcess') > 0) { } else if (lHash.indexOf('/myProcess') > 0) {
id = 'MyProcess'; id = 'MyProcess';
} else if (lHash.indexOf('/done') > 0) {
id = 'TaskDone';
} }
let data = reactive({ let data = reactive({
componentName: shallowRef(ToDoTasks) componentName: shallowRef(ToDoTasks)

View File

@ -1,261 +1,280 @@
<template> <template>
<PageWrapper dense contentFullHeight fixedHeight> <PageWrapper contentFullHeight dense fixedHeight>
<BasicTable @register="registerTable"> <BasicTable @expand="handleExpand" @register="registerTable">
<template #toolbar> <template #toolbar>
<a-button type="primary" v-auth="'department:add'" @click="handleCreate"> <a-button v-auth="'department:add'" type="primary" @click="handleCreate">
{{ t('新增组织') }} {{ t('新增组织') }}
</a-button> </a-button>
</template> </template>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.dataIndex == 'name'"> <template v-if="column.dataIndex == 'name'">
<a-tag color="processing" v-if="record.departmentType === 1">公司</a-tag> <a-tag v-if="record.departmentType === 1" color="processing">公司</a-tag>
<a-tag color="warning" v-else-if="record.departmentType === 0">部门</a-tag> <a-tag v-else-if="record.departmentType === 0" color="warning">部门</a-tag>
&nbsp;{{ record.name }} &nbsp;{{ record.name }}
</template> </template>
<template v-if="column.dataIndex == 'action'"> <template v-if="column.dataIndex == 'action'">
<TableAction <TableAction
:actions="[ :actions="[
{ {
icon: 'ant-design:user-add-outlined', icon: 'ant-design:user-add-outlined',
auth: 'department:addUser', auth: 'department:addUser',
tooltip: '添加人员', tooltip: '添加人员',
onClick: handleAddUser.bind(null, record), onClick: handleAddUser.bind(null, record)
}, },
{ {
icon: 'clarity:note-edit-line', icon: 'clarity:note-edit-line',
auth: 'department:edit', auth: 'department:edit',
onClick: handleEdit.bind(null, record), onClick: handleEdit.bind(null, record)
}, },
{ {
icon: 'ant-design:delete-outlined', icon: 'ant-design:delete-outlined',
color: 'error', color: 'error',
auth: 'department:delete', auth: 'department:delete',
popConfirm: { popConfirm: {
title: t('是否确认删除'), title: t('是否确认删除'),
confirm: handleDelete.bind(null, record), confirm: handleDelete.bind(null, record)
}, }
}, }
]" ]"
/> />
</template> </template>
</template> </template>
</BasicTable> </BasicTable>
<DeptDrawer @register="registerDrawer" @success="handleSuccess" /> <DeptDrawer @register="registerDrawer" @success="handleSuccess" />
<SelectMember <SelectMember
v-if="visible" v-if="visible"
:visible="visible" :isShowTree="false"
:multiple="true" :multiple="true"
:selectedIds="selectedUserIds" :selectedIds="selectedUserIds"
:isShowTree="false" :visible="visible"
@close=" @change="handleDeptUser"
() => { @close="
visible = false; () => {
} visible = false;
" }
@change="handleDeptUser" "
/> />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, h, ref } from 'vue'; import { defineComponent, h, ref } from 'vue';
import { BasicTable, useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table'; import { BasicTable, useTable, TableAction, BasicColumn, FormSchema } from '/@/components/Table';
import { useModal } from '/@/components/Modal'; import { useModal } from '/@/components/Modal';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '/@/components/Page';
import DeptDrawer from './components/DeptDrawer.vue'; import DeptDrawer from './components/DeptDrawer.vue';
import { Switch } from 'ant-design-vue'; import { Switch } from 'ant-design-vue';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '/@/hooks/web/useMessage';
// import { useI18n } from 'vue-i18n'; // import { useI18n } from 'vue-i18n';
import { SelectMember } from '/@/components/SelectOrganizational/index'; import { SelectMember } from '/@/components/SelectOrganizational/index';
import { import { deleteDepartment, getDepartmentEnabledTree, getDepartmentTrees, getDepartmentUserList, updateDepartmentUser } from '/@/api/system/department';
deleteDepartment, import { useI18n } from '/@/hooks/web/useI18n';
getDepartmentEnabledTree,
getDepartmentUserList,
updateDepartmentUser,
} from '/@/api/system/department';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
export const columns: BasicColumn[] = [
{
title: t('组织名称'),
dataIndex: 'name',
width: 400,
align: 'left',
sorter: true,
},
{
title: '组织编码',
dataIndex: 'code',
sorter: true,
align: 'left',
width: 100,
},
{ const { t } = useI18n();
title: t('状态'), export const columns: BasicColumn[] = [
dataIndex: 'enabledMark', {
width: 80, title: t('组织名称'),
sorter: true, dataIndex: 'name',
align: 'left', width: 400,
customRender: ({ record }) => { align: 'left',
const enabledMark = record.enabledMark == 1 ? true : false; sorter: true
return h(Switch, { checked: enabledMark });
},
},
{
title: t('主页'),
dataIndex: 'website',
width: 200,
align: 'left',
sorter: true,
},
{
title: t('地址'),
dataIndex: 'address',
width: 200,
align: 'left',
sorter: true,
},
{
title: t('备注'),
dataIndex: 'remark',
align: 'left',
width: 150,
sorter: true,
},
];
export const searchFormSchema: FormSchema[] = [
{
field: 'name',
label: t('组织名称'),
component: 'Input',
},
{
field: 'code',
label: t('组织编码'),
component: 'Input',
},
{
field: 'enabledMark',
label: t('状态'),
component: 'Select',
componentProps: {
options: [
{ label: t('启用'), value: 1 },
{ label: t('停用'), value: 0 },
],
},
},
];
export default defineComponent({
name: 'DeptManagement',
components: { BasicTable, TableAction, DeptDrawer, PageWrapper, SelectMember },
setup() {
const { notification } = useMessage();
const [registerDrawer, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: t('组织列表'),
api: getDepartmentEnabledTree,
columns,
formConfig: {
rowProps: {
gutter: 16,
},
schemas: searchFormSchema,
actionColOptions: { span: 16 },
showResetButton: false,
}, },
beforeFetch: (params) => { {
return { title: '组织编码',
...params, dataIndex: 'code',
isOrg: 1, sorter: true,
}; align: 'left',
width: 100
}, },
pagination: {
pageSize: 20, {
title: t('状态'),
dataIndex: 'enabledMark',
width: 80,
sorter: true,
align: 'left',
customRender: ({ record }) => {
const enabledMark = record.enabledMark == 1 ? true : false;
return h(Switch, { checked: enabledMark });
}
}, },
striped: false, {
useSearchForm: true, title: t('主页'),
showTableSetting: true, dataIndex: 'website',
showIndexColumn: false, width: 200,
actionColumn: { align: 'left',
width: 100, sorter: true
title: t('操作'),
dataIndex: 'action',
slots: { customRender: 'action' },
}, },
tableSetting: { {
size: false, title: t('地址'),
setting: false, dataIndex: 'address',
width: 200,
align: 'left',
sorter: true
}, },
}); {
title: t('备注'),
dataIndex: 'remark',
align: 'left',
width: 150,
sorter: true
}
];
const visible = ref<boolean>(false); export const searchFormSchema: FormSchema[] = [
const selectedUserIds = ref<string[]>([]); {
const deptId = ref(''); field: 'name',
label: t('组织名称'),
component: 'Input'
},
{
field: 'code',
label: t('组织编码'),
component: 'Input'
},
{
field: 'enabledMark',
label: t('状态'),
component: 'Select',
componentProps: {
options: [
{ label: t('启用'), value: 1 },
{ label: t('停用'), value: 0 }
]
}
}
];
function handleCreate() { export default defineComponent({
openModal(true, { name: 'DeptManagement',
isUpdate: false, components: { BasicTable, TableAction, DeptDrawer, PageWrapper, SelectMember },
}); setup() {
} const { notification } = useMessage();
const [registerDrawer, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
title: t('组织列表'),
api: getDepartmentTrees,
columns,
formConfig: {
rowProps: {
gutter: 16
},
schemas: searchFormSchema,
actionColOptions: { span: 16 },
showResetButton: false
},
beforeFetch: (params) => {
return {
...params,
isOrg: 1
};
},
pagination: {
pageSize: 20
},
striped: false,
useSearchForm: true,
showTableSetting: true,
showIndexColumn: false,
actionColumn: {
width: 100,
title: t('操作'),
dataIndex: 'action',
slots: { customRender: 'action' }
},
tableSetting: {
size: false,
setting: false
}
});
function handleEdit(record: Recordable) { const visible = ref<boolean>(false);
openModal(true, { const selectedUserIds = ref<string[]>([]);
record, const deptId = ref('');
isUpdate: true,
});
}
function handleDelete(record: Recordable) { function handleCreate() {
deleteDepartment([record.id]).then((_) => { openModal(true, {
reload(); isUpdate: false
notification.success({ });
message: t('提示'), }
description: t('删除成功'),
}); //提示消息
});
}
function handleAddUser(record: Recordable) {
deptId.value = record.id;
getDepartmentUserList({ id: record.id }).then((res) => {
selectedUserIds.value = res.map((it) => {
return it.id;
});
visible.value = true;
});
}
function handleDeptUser(v) { function handleEdit(record: Recordable) {
updateDepartmentUser({ id: deptId.value, userIds: v }).then(() => { openModal(true, {
notification.success({ record,
message: '添加人员', isUpdate: true
description: t('成功'), });
}); }
});
}
function handleSuccess() { function handleDelete(record: Recordable) {
reload(); deleteDepartment([record.id]).then((_) => {
} reload();
notification.success({
message: t('提示'),
description: t('删除成功')
}); //提示消息
});
}
return { function handleAddUser(record: Recordable) {
registerTable, deptId.value = record.id;
registerDrawer, getDepartmentUserList({ id: record.id }).then((res) => {
handleCreate, selectedUserIds.value = res.map((it) => {
handleEdit, return it.id;
handleDelete, });
handleAddUser, visible.value = true;
handleDeptUser, });
handleSuccess, }
visible,
selectedUserIds, function handleDeptUser(v) {
t, updateDepartmentUser({ id: deptId.value, userIds: v }).then(() => {
}; notification.success({
}, message: '添加人员',
}); description: t('成功')
});
});
}
function handleSuccess() {
reload();
}
function handleExpand(expanded, record) {
if (!expanded) {
return;
}
const { id } = record;
if (record?.children.length || record._loaded) {
return;
}
getDepartmentTrees({ id }).then((result) => {
const node = result[0];
if (node?.children.length) {
node.children.forEach((item) => {
item.children = [];
item.key = item.id;
});
record.children = node.children;
}
record._loaded = true;
});
}
return {
registerTable,
registerDrawer,
handleCreate,
handleEdit,
handleDelete,
handleAddUser,
handleDeptUser,
handleSuccess,
handleExpand,
visible,
selectedUserIds,
t
};
}
});
</script> </script>

View File

@ -0,0 +1,111 @@
<template>
<BasicTable @register="registerTable" @selection-change="selectionChange">
<template #toolbar>
<div class="button-box">
<RejectProcess
:taskId="taskId"
:processId="processId"
@close="reload"
@restart="restartProcess"
class="mr-2"
><a-button v-auth="'processtasks:withdraw'">{{ t('撤回') }}</a-button></RejectProcess
>
</div>
</template>
<template #currentProgress="{ record }">
<a-progress v-if="record.currentProgress" :percent="record.currentProgress" size="small" />
</template>
</BasicTable>
<LaunchProcess
v-if="restartProcessVisible"
:schemaId="schemaId"
:taskId="taskId"
@close="restartProcessClose"
/>
</template>
<script setup lang="ts">
import userTaskTable from './../../hooks/userTaskTable';
import { ref } from 'vue';
import LookProcess from './../LookProcess.vue';
import LaunchProcess from './../LaunchProcess.vue';
import RejectProcess from './../RejectProcess.vue';
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
import { getSchemaTask } from '/@/api/workflow/process';
import { TaskTypeUrl } from '/@/enums/workflowEnum';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
const restartProcessVisible = ref(false);
const configColumns: BasicColumn[] = [
{
title: t('流水号'),
dataIndex: 'serialNumber',
width: 80,
},
{
title: t('流程名称'),
dataIndex: 'processName',
width: '32%',
align: 'left',
},
{
title: t('任务名称'),
dataIndex: 'currentTaskName',
width: '17%',
align: 'left',
},
{
title: t('当前进度'),
dataIndex: 'currentProgress',
width: '17%',
slots: { customRender: 'currentProgress' },
},
{
title: t('发起人'),
dataIndex: 'originator',
align: 'left',
width: 80,
},
{
title: t('发起时间'),
dataIndex: 'createTime',
align: 'left',
width: 120,
},
];
const { formConfig, processId, taskId, schemaId, selectionChange } = userTaskTable();
const [registerTable, { reload }] = useTable({
title: t('已办任务列表'),
api: getSchemaTask,
rowKey: 'id',
columns: configColumns,
formConfig: formConfig(),
beforeFetch: (params) => {
return { data: params, taskUrl: TaskTypeUrl.FINISHED_TASKS };
},
useSearchForm: true,
showTableSetting: true,
striped: false,
pagination: {
pageSize: 18,
},
indexColumnProps: {
width: 50,
},
});
function restartProcess() {
restartProcessVisible.value = true;
}
function restartProcessClose() {
restartProcessVisible.value = false;
reload();
}
</script>
<style scoped></style>