<template>
|
<Row class="mb-10px">
|
<Col span="12">
|
<Dropdown :trigger="['click']" arrow @openChange="openChange">
|
<span class="cursor-pointer" @click.prevent>
|
{{ dropDownTitle }}
|
<BasicArrow :expand="false" down/>
|
</span>
|
<template #overlay>
|
<Menu @click="onMenuItemClick">
|
<MenuItem key="0">
|
<span>未完成</span>
|
</MenuItem>
|
<MenuItem key="1">
|
<span>已完成</span>
|
</MenuItem>
|
</Menu>
|
</template>
|
</Dropdown>
|
</Col>
|
<Col span="12" :style="'text-align:right'">
|
<Tooltip title="新建日程">
|
<PlusSquareOutlined class="cursor-pointer" style="fontSize:24px;color: #aaa"
|
@click="openScheduleModal"/>
|
</Tooltip>
|
|
</Col>
|
</Row>
|
<BasicTable
|
@register="registerTable"
|
@row-click="handleScheduleRowClick"
|
>
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'cluesName'">
|
<div>
|
<Avatar :size="16" :style="'background-color:'+ record.color"></Avatar>
|
<span class="ml-5px">
|
{{ record.cluesName }}
|
</span>
|
</div>
|
</template>
|
</template>
|
</BasicTable>
|
<ScheduleDetailModal @register="registerScheduleModal"></ScheduleDetailModal>
|
<div>
|
<template v-for="item in projectList" :key="item.title">
|
<Row class="cursor-pointer" :gutter="[22,26]" align="middle">
|
<Col span="12">
|
<Avatar :size="16" :style="'background-color:'+ item.color"></Avatar>
|
<span class="ml-5px">{{ item.title }}</span>
|
</Col>
|
<Col span="12" :style="'text-align:right'">
|
<span>{{ item.content }}</span>
|
</Col>
|
</Row>
|
</template>
|
|
</div>
|
<!-- <List :class="prefixCls" item-layout="horizontal" :data-source="projectList" :grid="{ column: 1, gutter: 12}" :pagination="pagination" >-->
|
<!-- <template #renderItem="{ item }">-->
|
<!-- <ListItem>-->
|
<!-- -->
|
<!-- </ListItem>-->
|
|
<!-- </template>-->
|
<!--<!– <template v-for="item in projectList" :key="item.title"></template>–>-->
|
<!-- </List>-->
|
</template>
|
<script lang="ts" setup>
|
import {List, Avatar, Card, Row, Col, Dropdown, Menu, Tooltip, Tag} from 'ant-design-vue';
|
import {projectList} from './data';
|
import {PlusSquareOutlined} from '@ant-design/icons-vue';
|
import {BasicArrow} from "@/components/Basic";
|
import {ref} from 'vue';
|
import ScheduleDetailModal from './ScheduleDetail.vue';
|
|
const ListItem = List.Item;
|
const MenuItem = Menu.Item;
|
|
import EventBus from '@/utils/eventBus';
|
import {BasicTable, ColumnChangeParam, TableAction, useTable} from "@/components/Table";
|
import {cluesListApi} from "@/api/clues/table";
|
import {getEditCellColumns, getFormConfig} from "@/views/clues/components/tableData";
|
import {useModal} from "@/components/Modal";
|
|
const [registerScheduleModal, {openModal, setModalProps}] = useModal();
|
const openScheduleModal = () => {
|
Logger.log('点击openScheduleModal');
|
EventBus.emit('openScheduleModal', {
|
title: '新建任务',
|
content: '新建任务内容'
|
});
|
};
|
|
const pagination = {
|
onChange: (page: number) => {
|
console.log(page);
|
},
|
pageSize: 3,
|
};
|
|
const openChange = (status: boolean) => {
|
Logger.log('openChange', status);
|
};
|
const dropDownTitle = ref('未完成');
|
const onMenuItemClick = (e: any) => {
|
let titles = ['未完成', '已完成'];
|
Logger.log('onMenuItemClick', e);
|
dropDownTitle.value = titles[e.key];
|
};
|
|
const [
|
registerTable,
|
{
|
// setLoading,
|
// setProps,
|
// getColumns,
|
// getDataSource,
|
// getRawDataSource,
|
// reload,
|
// getPaginationRef,
|
// setPagination,
|
// getSelectRows,
|
// getSelectRowKeys,
|
// setSelectedRowKeys,
|
// clearSelectedRowKeys,
|
},
|
] = useTable({
|
canResize: true,
|
api: cluesListApi,
|
// beforeFetch: (params) => {
|
// console.log('beforeFetch', params);
|
// params.pageNo = params.page;
|
// // return Promise.resolve(params);
|
// },
|
showIndexColumn: false,
|
columns: [
|
{
|
// title: '',
|
// defaultHidden: true,
|
dataIndex: 'cluesName',
|
width: 200
|
},
|
{
|
// title: '',
|
dataIndex: 'archiveTime',
|
width: 200,
|
},
|
],
|
// defSort: {
|
// pageNo: 1,
|
// pageSize: 20,
|
// field: 'name',
|
// order: 'ascend',
|
// },
|
rowKey: 'id',
|
// showTableSetting: false,
|
// showIndexColumn: false, // 是否显示序号列
|
// useSearchForm: false, // 使用搜索表单
|
// clickToRowSelect: false,
|
// formConfig: getFormConfig(), // 搜索表单配置
|
pagination: {
|
// pageSize: 20,
|
pageSizeOptions: ['10', '20', '50', '100'],
|
defaultPageSize: 20,
|
// showSizeChanger: true,
|
},
|
});
|
|
|
|
function handleScheduleRowClick(e) {
|
Logger.log('handleScheduleRowClick', e);
|
openModal(true, {
|
// record,
|
// isUpdate: true,
|
});
|
}
|
|
const prefixCls = 'account-center-project';
|
</script>
|
<style lang="less" >
|
|
</style>
|
