调整合同待办已办功能
This commit is contained in:
parent
dc87bbca61
commit
589ddf5954
|
@ -1,9 +1,12 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { Page } from '@vben/common-ui';
|
||||||
import TodoPage from '../../components/todo-page/todo-page.vue';
|
import TodoPage from '../../components/todo-page/todo-page.vue';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<TodoPage :module="['contractSetup']" />
|
<Page content-class="h-full">
|
||||||
|
<TodoPage :module="['contractSetup']" />
|
||||||
|
</Page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, reactive } from 'vue';
|
import { onMounted, reactive, ref, watch } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
import { Page } from '@vben/common-ui';
|
import { Page } from '@vben/common-ui';
|
||||||
|
@ -26,6 +26,46 @@ const { xGridRef: xGrid2Ref, triggerProxy: triggerProxy2 } = useVxeTable({
|
||||||
ref: 'xGrid2Ref',
|
ref: 'xGrid2Ref',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// emit 用于发出事件
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:module', value: string[]): void;
|
||||||
|
}>();
|
||||||
|
// 创建一个本地的 module 值,作为双向绑定的中间值
|
||||||
|
const localModule = ref((props.module || []).slice()); // 创建一个本地副本
|
||||||
|
|
||||||
|
// 防止无限循环的标志
|
||||||
|
let isInternalUpdate = false;
|
||||||
|
|
||||||
|
// 监听 props.module 的变化,并同步到 localModule
|
||||||
|
watch(
|
||||||
|
() => props.module,
|
||||||
|
(newVal) => {
|
||||||
|
if (!isInternalUpdate) {
|
||||||
|
// 如果不是内部触发的,则同步更新 localModule
|
||||||
|
localModule.value = newVal?.slice() || [];
|
||||||
|
triggerProxy('reload'); // 触发其他操作
|
||||||
|
triggerProxy2('reload'); // 触发其他操作
|
||||||
|
console.log('module prop changed:', newVal);
|
||||||
|
}
|
||||||
|
// 重置标志
|
||||||
|
isInternalUpdate = false;
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
// 监听 localModule 的变化,并向父组件发出更新事件
|
||||||
|
watch(
|
||||||
|
localModule,
|
||||||
|
(newValue) => {
|
||||||
|
// 只有当 localModule 和 props.module 不同时才触发 emit
|
||||||
|
if (JSON.stringify(newValue) !== JSON.stringify(props.module)) {
|
||||||
|
isInternalUpdate = true; // 标记此次更新是内部更新
|
||||||
|
emit('update:module', newValue); // 发出更新事件
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true },
|
||||||
|
);
|
||||||
|
|
||||||
/** Hooks - 表格 */
|
/** Hooks - 表格 */
|
||||||
const gridOptions = reactive(
|
const gridOptions = reactive(
|
||||||
gridProps({
|
gridProps({
|
||||||
|
@ -98,77 +138,75 @@ function toDetail(type: string, id: string, row?: any) {
|
||||||
|
|
||||||
onMounted(() => {});
|
onMounted(() => {});
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
defineExpose({});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Page content-class="h-full flex flex-col">
|
<a-space class="flex h-full flex-col" direction="vertical" size="small">
|
||||||
<a-space class="flex h-full flex-col" direction="vertical" size="small">
|
<a-card
|
||||||
<a-card
|
:body-style="{ flex: '1' }"
|
||||||
:body-style="{ flex: '1' }"
|
class="flex h-full flex-col"
|
||||||
class="flex h-full flex-col"
|
size="small"
|
||||||
size="small"
|
title="待办"
|
||||||
title="待办"
|
>
|
||||||
>
|
<vxe-grid ref="xGridRef" v-bind="gridOptions">
|
||||||
<vxe-grid ref="xGridRef" v-bind="gridOptions">
|
<template #toolbar_buttons> </template>
|
||||||
<template #toolbar_buttons> </template>
|
<template #title_slot="{ row }">
|
||||||
<template #title_slot="{ row }">
|
<span
|
||||||
<span
|
class="cursor-pointer text-blue-500 hover:underline"
|
||||||
class="cursor-pointer text-blue-500 hover:underline"
|
@click="toDetail(row.module, row.businessId, row)"
|
||||||
@click="toDetail(row.module, row.businessId, row)"
|
>
|
||||||
>
|
{{ row.contractName }}
|
||||||
{{ row.contractName }}
|
</span>
|
||||||
</span>
|
</template>
|
||||||
</template>
|
<template #operate="{ row }">
|
||||||
<template #operate="{ row }">
|
<a-button
|
||||||
<a-button
|
class="text-blue-500"
|
||||||
class="text-blue-500"
|
size="small"
|
||||||
size="small"
|
type="text"
|
||||||
type="text"
|
@click="
|
||||||
@click="
|
toDetailPage('approval', '', {
|
||||||
toDetailPage('approval', '', {
|
contractId: row.contractId,
|
||||||
contractId: row.contractId,
|
flowInstanceId: row.flowInstanceId,
|
||||||
flowInstanceId: row.flowInstanceId,
|
})
|
||||||
})
|
"
|
||||||
"
|
>
|
||||||
>
|
查看
|
||||||
查看
|
</a-button>
|
||||||
</a-button>
|
</template>
|
||||||
</template>
|
</vxe-grid>
|
||||||
</vxe-grid>
|
</a-card>
|
||||||
</a-card>
|
<a-card
|
||||||
<a-card
|
:body-style="{ flex: '1' }"
|
||||||
:body-style="{ flex: '1' }"
|
class="flex h-full flex-col"
|
||||||
class="flex h-full flex-col"
|
size="small"
|
||||||
size="small"
|
title="已办"
|
||||||
title="已办"
|
>
|
||||||
>
|
<vxe-grid ref="xGrid2Ref" v-bind="grid2Options">
|
||||||
<vxe-grid ref="xGrid2Ref" v-bind="grid2Options">
|
<template #toolbar_buttons> </template>
|
||||||
<template #toolbar_buttons> </template>
|
<template #title_slot="{ row }">
|
||||||
<template #title_slot="{ row }">
|
<span>
|
||||||
<span>
|
{{ row.contractName }}
|
||||||
{{ row.contractName }}
|
</span>
|
||||||
</span>
|
</template>
|
||||||
</template>
|
<template #operate="{ row }">
|
||||||
<template #operate="{ row }">
|
<a-button
|
||||||
<a-button
|
class="text-blue-500"
|
||||||
class="text-blue-500"
|
size="small"
|
||||||
size="small"
|
type="text"
|
||||||
type="text"
|
@click="
|
||||||
@click="
|
toDetailPage('approval', '', {
|
||||||
toDetailPage('approval', '', {
|
contractId: row.contractId,
|
||||||
contractId: row.contractId,
|
flowInstanceId: row.flowInstanceId,
|
||||||
flowInstanceId: row.flowInstanceId,
|
})
|
||||||
})
|
"
|
||||||
"
|
>
|
||||||
>
|
查看
|
||||||
查看
|
</a-button>
|
||||||
</a-button>
|
</template>
|
||||||
</template>
|
</vxe-grid>
|
||||||
</vxe-grid>
|
</a-card>
|
||||||
</a-card>
|
</a-space>
|
||||||
</a-space>
|
|
||||||
</Page>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
@ -5,84 +5,25 @@ import { Page } from '@vben/common-ui';
|
||||||
|
|
||||||
import Apis from '#/api';
|
import Apis from '#/api';
|
||||||
import { useVxeTable } from '#/hooks/vxeTable';
|
import { useVxeTable } from '#/hooks/vxeTable';
|
||||||
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
|
import { DICT_TYPE, getDictDatasAsync, getDictOptions } from '#/utils/dict';
|
||||||
import { getTodoColumns } from '#/views/contract/schema';
|
import TodoPage from '#/views/contract/components/todo-page/todo-page.vue';
|
||||||
import { toDetailPage } from '#/views/contract/utils';
|
|
||||||
import { useRouter } from 'vue-router';
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const { xGridRef, triggerProxy, gridProps } = useVxeTable({ ref: 'xGridRef' });
|
|
||||||
const { xGridRef: xGrid2Ref, triggerProxy: triggerProxy2 } = useVxeTable({
|
|
||||||
ref: 'xGrid2Ref',
|
|
||||||
});
|
|
||||||
const treeData = ref();
|
const treeData = ref();
|
||||||
|
const todoPageRef = ref();
|
||||||
const selectedKeys = ref<string[]>([]);
|
const selectedKeys = ref<string[]>([]);
|
||||||
|
|
||||||
/** Hooks - 表格 */
|
let treeKeys = ref([]);
|
||||||
const gridOptions = reactive(
|
|
||||||
gridProps({
|
|
||||||
columns: getTodoColumns({ type: 'todo' }),
|
|
||||||
proxyConfig: {
|
|
||||||
autoLoad: true,
|
|
||||||
ajax: {
|
|
||||||
query: ({ page }) => {
|
|
||||||
return Apis.home.get_todo({
|
|
||||||
params: {
|
|
||||||
pageNum: page.currentPage,
|
|
||||||
pageSize: page.pageSize,
|
|
||||||
moduleId: selectedKeys.value[0],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
pagerConfig: {
|
|
||||||
enabled: true,
|
|
||||||
},
|
|
||||||
toolbarConfig: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
/** Hooks - 表格 */
|
function onTreeSelect(e) {
|
||||||
const grid2Options = reactive(
|
console.log(e);
|
||||||
gridProps({
|
treeKeys.value = e;
|
||||||
columns: getTodoColumns({ type: 'done' }),
|
|
||||||
proxyConfig: {
|
|
||||||
autoLoad: true,
|
|
||||||
ajax: {
|
|
||||||
query: ({ page }) => {
|
|
||||||
return Apis.home.get_done({
|
|
||||||
params: {
|
|
||||||
pageNum: page.currentPage,
|
|
||||||
pageSize: page.pageSize,
|
|
||||||
moduleId: selectedKeys.value[0],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
pagerConfig: {
|
|
||||||
enabled: true,
|
|
||||||
},
|
|
||||||
toolbarConfig: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
function onTreeSelect() {
|
|
||||||
triggerProxy('reload');
|
|
||||||
triggerProxy2('reload');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const expandedKeys = ref<string[]>([]);
|
const expandedKeys = ref<string[]>([]);
|
||||||
|
|
||||||
async function loadDataByDictType() {
|
async function loadDataByDictType() {
|
||||||
const data = getDictOptions(DICT_TYPE.contract_todo_type);
|
const dictMap = await getDictDatasAsync([DICT_TYPE.contract_todo_type]);
|
||||||
|
const data = dictMap[DICT_TYPE.contract_todo_type] || [];
|
||||||
data.forEach((item) => {
|
data.forEach((item) => {
|
||||||
item.key = item.value;
|
item.key = item.value;
|
||||||
item.title = item.label;
|
item.title = item.label;
|
||||||
|
@ -92,22 +33,6 @@ async function loadDataByDictType() {
|
||||||
treeData.value = [{ title: '全部', key: 'all', children: data }];
|
treeData.value = [{ title: '全部', key: 'all', children: data }];
|
||||||
}
|
}
|
||||||
|
|
||||||
function toDetail(type: string, id: string, row?: any) {
|
|
||||||
switch (type) {
|
|
||||||
case 'contractSetup': {
|
|
||||||
router.push(`/contract/approval/edit/${id}`);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'selectMerchant': {
|
|
||||||
router.push(`/contract/business/edit/${row.contractId}`);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default: {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadDataByDictType();
|
loadDataByDictType();
|
||||||
});
|
});
|
||||||
|
@ -131,63 +56,7 @@ onMounted(() => {
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="19" class="min-w-700px flex flex-col">
|
<a-col :span="19" class="min-w-700px flex flex-col">
|
||||||
<a-card
|
<TodoPage ref="todoPageRef" v-model:module="treeKeys"></TodoPage>
|
||||||
:body-style="{ flex: '1' }"
|
|
||||||
class="flex h-full flex-col"
|
|
||||||
size="small"
|
|
||||||
title="待办"
|
|
||||||
>
|
|
||||||
<vxe-grid ref="xGridRef" v-bind="gridOptions" class="flex-1">
|
|
||||||
<template #toolbar_buttons> </template>
|
|
||||||
<template #title_slot="{ row }">
|
|
||||||
<span
|
|
||||||
class="cursor-pointer text-blue-500 hover:underline"
|
|
||||||
@click="toDetail(row.module, row.businessId, row)"
|
|
||||||
>
|
|
||||||
{{ row.contractName }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<template #operate="{ row }">
|
|
||||||
<a-button
|
|
||||||
class="text-blue-500"
|
|
||||||
size="small"
|
|
||||||
type="text"
|
|
||||||
@click="
|
|
||||||
toDetailPage('approval', '', { contractId: row.contractId })
|
|
||||||
"
|
|
||||||
>
|
|
||||||
查看
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
</vxe-grid>
|
|
||||||
</a-card>
|
|
||||||
<a-card
|
|
||||||
:body-style="{ flex: '1' }"
|
|
||||||
class="flex h-full flex-col"
|
|
||||||
size="small"
|
|
||||||
title="已办"
|
|
||||||
>
|
|
||||||
<vxe-grid ref="xGrid2Ref" v-bind="grid2Options" class="flex-1">
|
|
||||||
<template #toolbar_buttons> </template>
|
|
||||||
<template #title_slot="{ row }">
|
|
||||||
<span class="">
|
|
||||||
{{ row.contractName }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<template #operate="{ row }">
|
|
||||||
<a-button
|
|
||||||
class="text-blue-500"
|
|
||||||
size="small"
|
|
||||||
type="text"
|
|
||||||
@click="
|
|
||||||
toDetailPage('approval', '', { contractId: row.contractId })
|
|
||||||
"
|
|
||||||
>
|
|
||||||
查看
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
</vxe-grid>
|
|
||||||
</a-card>
|
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</Page>
|
</Page>
|
||||||
|
|
Loading…
Reference in New Issue