CRM系统前端
查看 | 历史 | 提交 | 提交对比
Sanakey
2024-09-14 abcc94512041409b4e1d4f56e51a442f9c762f09
提交 | 用户 | age
ec4248 1 <template>
0884a2 2   <Row class="mb-10px">
S 3     <Col span="12">
4       <Dropdown :trigger="['click']" arrow @openChange="openChange">
5         <span class="cursor-pointer" @click.prevent>
abcc94 6           {{ dropDownTitle }}
S 7           <BasicArrow :expand="false" down/>
0884a2 8         </span>
S 9         <template #overlay>
10           <Menu @click="onMenuItemClick">
abcc94 11             <MenuItem key="0">
0884a2 12               <span>未完成</span>
S 13             </MenuItem>
14             <MenuItem key="1">
15               <span>已完成</span>
16             </MenuItem>
17           </Menu>
18         </template>
19       </Dropdown>
20     </Col>
21     <Col span="12" :style="'text-align:right'">
22       <Tooltip title="新建日程">
abcc94 23         <PlusSquareOutlined class="cursor-pointer" style="fontSize:24px;color: #aaa"
S 24                             @click="openScheduleModal"/>
0884a2 25       </Tooltip>
S 26
27     </Col>
28   </Row>
29   <BasicTable
30     @register="registerTable"
abcc94 31     @row-click="handleScheduleRowClick"
0884a2 32   >
abcc94 33     <template #bodyCell="{ column, record }">
S 34       <template v-if="column.key === 'cluesName'">
35         <div>
36           <Avatar :size="16" :style="'background-color:'+ record.color"></Avatar>
37           <span class="ml-5px">
38             {{ record.cluesName }}
39           </span>
40         </div>
41       </template>
42     </template>
0884a2 43   </BasicTable>
abcc94 44   <ScheduleDetailModal @register="registerScheduleModal"></ScheduleDetailModal>
0884a2 45   <div>
S 46     <template v-for="item in projectList" :key="item.title">
47       <Row class="cursor-pointer" :gutter="[22,26]" align="middle">
48         <Col span="12">
49           <Avatar :size="16" :style="'background-color:'+ item.color"></Avatar>
50           <span class="ml-5px">{{ item.title }}</span>
ec4248 51         </Col>
0884a2 52         <Col span="12" :style="'text-align:right'">
S 53           <span>{{ item.content }}</span>
54         </Col>
55       </Row>
56     </template>
57
58   </div>
abcc94 59   <!--  <List :class="prefixCls" item-layout="horizontal" :data-source="projectList" :grid="{ column: 1, gutter: 12}" :pagination="pagination" >-->
S 60   <!--    <template #renderItem="{ item }">-->
61   <!--      <ListItem>-->
62   <!--        -->
63   <!--      </ListItem>-->
0884a2 64
abcc94 65   <!--    </template>-->
S 66   <!--&lt;!&ndash;    <template v-for="item in projectList" :key="item.title"></template>&ndash;&gt;-->
67   <!--  </List>-->
ec4248 68 </template>
S 69 <script lang="ts" setup>
abcc94 70 import {List, Avatar, Card, Row, Col, Dropdown, Menu, Tooltip, Tag} from 'ant-design-vue';
S 71 import {projectList} from './data';
72 import {PlusSquareOutlined} from '@ant-design/icons-vue';
73 import {BasicArrow} from "@/components/Basic";
74 import {ref} from 'vue';
75 import ScheduleDetailModal from './ScheduleDetail.vue';
ec4248 76
abcc94 77 const ListItem = List.Item;
S 78 const MenuItem = Menu.Item;
0884a2 79
abcc94 80 import EventBus from '@/utils/eventBus';
S 81 import {BasicTable, ColumnChangeParam, TableAction, useTable} from "@/components/Table";
82 import {cluesListApi} from "@/api/clues/table";
83 import {getEditCellColumns, getFormConfig} from "@/views/clues/components/tableData";
84 import {useModal} from "@/components/Modal";
0884a2 85
abcc94 86 const [registerScheduleModal, {openModal, setModalProps}] = useModal();
S 87 const openScheduleModal = () => {
88   Logger.log('点击openScheduleModal');
89   EventBus.emit('openScheduleModal', {
90     title: '新建任务',
91     content: '新建任务内容'
0884a2 92   });
abcc94 93 };
ec4248 94
abcc94 95 const pagination = {
S 96   onChange: (page: number) => {
97     console.log(page);
98   },
99   pageSize: 3,
100 };
101
102 const openChange = (status: boolean) => {
103   Logger.log('openChange', status);
104 };
105 const dropDownTitle = ref('未完成');
106 const onMenuItemClick = (e: any) => {
107   let titles = ['未完成', '已完成'];
108   Logger.log('onMenuItemClick', e);
109   dropDownTitle.value = titles[e.key];
110 };
111
112 const [
113   registerTable,
114   {
115     // setLoading,
116     // setProps,
117     // getColumns,
118     // getDataSource,
119     // getRawDataSource,
120     // reload,
121     // getPaginationRef,
122     // setPagination,
123     // getSelectRows,
124     // getSelectRowKeys,
125     // setSelectedRowKeys,
126     // clearSelectedRowKeys,
127   },
128 ] = useTable({
129   canResize: true,
130   api: cluesListApi,
131   // beforeFetch: (params) => {
132   //   console.log('beforeFetch', params);
133   //   params.pageNo = params.page;
134   //   // return Promise.resolve(params);
135   // },
136   showIndexColumn: false,
137   columns: [
138     {
139       // title: '',
140       // defaultHidden: true,
141       dataIndex: 'cluesName',
142       width: 200
143     },
144     {
145       // title: '',
146       dataIndex: 'archiveTime',
147       width: 200,
148     },
149   ],
150   // defSort: {
151   //   pageNo: 1,
152   //   pageSize: 20,
153   //   field: 'name',
154   //   order: 'ascend',
155   // },
156   rowKey: 'id',
157   // showTableSetting: false,
158   // showIndexColumn: false, // 是否显示序号列
159   // useSearchForm: false, // 使用搜索表单
160   // clickToRowSelect: false,
161   // formConfig: getFormConfig(), // 搜索表单配置
162   pagination: {
163     // pageSize: 20,
164     pageSizeOptions: ['10', '20', '50', '100'],
165     defaultPageSize: 20,
166     // showSizeChanger: true,
167   },
168 });
169
170
171
172 function handleScheduleRowClick(e) {
173   Logger.log('handleScheduleRowClick', e);
174   openModal(true, {
175     // record,
176     // isUpdate: true,
177   });
178 }
179
180 const prefixCls = 'account-center-project';
ec4248 181 </script>
abcc94 182 <style lang="less" >
ec4248 183
S 184 </style>