| 提交 | 用户 | age | ||
| f353bc | 1 | <template> |
| cb1651 | 2 | <a-collapse class="customer-modal-document" v-model:activeKey="activeKey" ghost> |
| f353bc | 3 | <a-collapse-panel key="1" header="文档"> |
| S | 4 | <BasicTable |
| 5 | @register="registerTable" | |
| 6 | > | |
| cb1651 | 7 | <template #bodyCell="{ column, record, index }"> |
| f353bc | 8 | <template v-if="column.key === 'cluesName'"> |
| S | 9 | <div> |
| cb1651 | 10 | <FileImageFilled class="icon-color font-size-20px" /> |
| S | 11 | <a class="ml-5px c-black" data-index="{{index}}" @click="setImgVisible(record.id)"> |
| 12 | {{ record.cluesName }} | |
| 13 | </a> | |
| 14 | <a-image | |
| 15 | :style="{ display: 'none' }" | |
| 16 | :preview="{ | |
| 17 | visible: index == curImgIndex, | |
| 18 | onVisibleChange: setImgVisible, | |
| 19 | }" | |
| 20 | :src="record.avatar" | |
| 21 | /> | |
| f353bc | 22 | </div> |
| S | 23 | </template> |
| cb1651 | 24 | <template v-else-if="column.key === 'action'"> |
| S | 25 | <TableAction |
| 26 | stopButtonPropagation | |
| 27 | :dropDownActions="[ | |
| 28 | { | |
| 29 | label: '发送邮件', | |
| 30 | onClick: handleWriteEmail.bind(null, record), | |
| 31 | }, | |
| 32 | { | |
| 33 | label: '下载附件', | |
| 34 | onClick: handleDownloadFiles.bind(null, record), | |
| 35 | }, | |
| 36 | { | |
| 37 | label: '删除文件', | |
| 38 | onClick: handleDeleteFiles.bind(null, record), | |
| 39 | }, | |
| 40 | ]" | |
| 41 | /> | |
| 42 | </template> | |
| f353bc | 43 | </template> |
| cb1651 | 44 | |
| f353bc | 45 | </BasicTable> |
| cb1651 | 46 | <template #extra > |
| S | 47 | <PlusCircleOutlined @click="addUploadFile" /> |
| 48 | <BasicUpload | |
| 49 | ref="uploadRef" | |
| 50 | :maxSize="20" | |
| 51 | :maxNumber="10" | |
| 52 | @change="handleUploadFileChange" | |
| 53 | :api="uploadApi" | |
| 54 | class="customer-modal-document-btn" | |
| 55 | :accept="['image/*']" | |
| 56 | /> | |
| 57 | </template> | |
| f353bc | 58 | </a-collapse-panel> |
| S | 59 | </a-collapse> |
| 60 | ||
| 61 | <ScheduleDetailModal @register="registerScheduleModal"></ScheduleDetailModal> | |
| 62 | ||
| 63 | </template> | |
| 64 | <script lang="ts" setup> | |
| 65 | import {projectList} from './data'; | |
| cb1651 | 66 | import {PlusSquareOutlined,FileImageFilled,PlusCircleOutlined} from '@ant-design/icons-vue'; |
| f353bc | 67 | import {BasicArrow} from "@/components/Basic"; |
| S | 68 | import {ref} from 'vue'; |
| 69 | import ScheduleDetailModal from './ScheduleDetail.vue'; | |
| 70 | ||
| 71 | import EventBus from '@/utils/eventBus'; | |
| 72 | import {BasicTable, ColumnChangeParam, TableAction, useTable} from "@/components/Table"; | |
| 73 | import {cluesListApi} from "@/api/clues/table"; | |
| 74 | import {getEditCellColumns, getFormConfig} from "@/views/clues/components/tableData"; | |
| 75 | import {useModal} from "@/components/Modal"; | |
| cb1651 | 76 | import {uploadApi} from "@/api/sys/upload"; |
| S | 77 | import {BasicUpload} from "@/components/Upload"; |
| 78 | import {useMessage} from "@/hooks/web/useMessage"; | |
| f353bc | 79 | |
| S | 80 | const [registerScheduleModal, {openModal, setModalProps}] = useModal(); |
| 81 | const openScheduleModal = () => { | |
| 82 | Logger.log('点击openScheduleModal'); | |
| 83 | EventBus.emit('openScheduleModal', { | |
| 84 | title: '新建任务', | |
| 85 | content: '新建任务内容' | |
| 86 | }); | |
| 87 | }; | |
| 88 | ||
| cb1651 | 89 | // 获取子组件的引用 |
| S | 90 | const uploadRef = ref(); |
| 91 | function addUploadFile(event) { | |
| 92 | Logger.log('addUploadFile', event); | |
| 93 | event.stopPropagation(); | |
| 94 | if (uploadRef.value) { | |
| 95 | Logger.log('uploadRef', uploadRef.value); | |
| 96 | uploadRef.value.openUploadModal(); | |
| 97 | } | |
| 98 | ||
| 99 | } | |
| 100 | // const addUploadFile = (event: MouseEvent) => { | |
| 101 | // Logger.log('addUploadFile', event); | |
| 102 | // // If you don't want click extra trigger collapse, you can prevent this: | |
| 103 | // event.stopPropagation(); | |
| 104 | // | |
| 105 | // }; | |
| 106 | const { createMessage } = useMessage(); | |
| 107 | function handleUploadFileChange(list: string[]) { | |
| 108 | createMessage.success(`已上传文件${JSON.stringify(list)}`); | |
| 109 | } | |
| 110 | ||
| f353bc | 111 | const activeKey = ref(['1']); |
| S | 112 | |
| cb1651 | 113 | const curImgIndex = ref<boolean>(-1); |
| S | 114 | const setImgVisible = (value): void => { |
| 115 | Logger.log('setImgVisible', value); | |
| 116 | if (value === false) { | |
| 117 | curImgIndex.value = -1; | |
| 118 | } else { | |
| 119 | curImgIndex.value = value; | |
| 120 | } | |
| 121 | // imgVisible.value = value; | |
| f353bc | 122 | }; |
| S | 123 | |
| 124 | const [ | |
| 125 | registerTable, | |
| 126 | { | |
| 127 | // setLoading, | |
| 128 | // setProps, | |
| 129 | // getColumns, | |
| 130 | // getDataSource, | |
| 131 | // getRawDataSource, | |
| 132 | // reload, | |
| 133 | // getPaginationRef, | |
| 134 | // setPagination, | |
| 135 | // getSelectRows, | |
| 136 | // getSelectRowKeys, | |
| 137 | // setSelectedRowKeys, | |
| 138 | // clearSelectedRowKeys, | |
| 139 | }, | |
| 140 | ] = useTable({ | |
| 141 | canResize: true, | |
| 142 | api: cluesListApi, | |
| 143 | // beforeFetch: (params) => { | |
| 144 | // console.log('beforeFetch', params); | |
| 145 | // params.pageNo = params.page; | |
| 146 | // // return Promise.resolve(params); | |
| 147 | // }, | |
| 148 | showIndexColumn: false, | |
| 149 | columns: [ | |
| 150 | { | |
| cb1651 | 151 | title: '文件名称', |
| f353bc | 152 | // defaultHidden: true, |
| S | 153 | dataIndex: 'cluesName', |
| 154 | width: 200 | |
| 155 | }, | |
| 156 | { | |
| cb1651 | 157 | title: '关联类型', |
| S | 158 | dataIndex: 'statusId', |
| 159 | width: 200, | |
| 160 | }, | |
| 161 | { | |
| 162 | title: '文件大小', | |
| 163 | dataIndex: 'formId', | |
| 164 | width: 80, | |
| 165 | }, | |
| 166 | { | |
| 167 | title: '添加人', | |
| 168 | dataIndex: 'name', | |
| 169 | width: 80, | |
| 170 | }, | |
| 171 | { | |
| 172 | title: '上传日期', | |
| f353bc | 173 | dataIndex: 'archiveTime', |
| S | 174 | width: 200, |
| 175 | }, | |
| cb1651 | 176 | |
| f353bc | 177 | ], |
| S | 178 | // defSort: { |
| 179 | // pageNo: 1, | |
| 180 | // pageSize: 20, | |
| 181 | // field: 'name', | |
| 182 | // order: 'ascend', | |
| 183 | // }, | |
| 184 | rowKey: 'id', | |
| 185 | // showTableSetting: false, | |
| 186 | // showIndexColumn: false, // 是否显示序号列 | |
| 187 | // useSearchForm: false, // 使用搜索表单 | |
| 188 | // clickToRowSelect: false, | |
| 189 | pagination: { | |
| 190 | // pageSize: 20, | |
| 191 | pageSizeOptions: ['10', '20', '50', '100'], | |
| 192 | defaultPageSize: 20, | |
| 193 | // showSizeChanger: true, | |
| 194 | }, | |
| cb1651 | 195 | actionColumn: { |
| S | 196 | width: 50, |
| 197 | title: '操作', | |
| 198 | dataIndex: 'action', | |
| 199 | fixed: 'right', | |
| 200 | }, | |
| 201 | useSearchForm: true, // 使用搜索表单 | |
| 202 | formConfig: { | |
| 203 | // labelWidth: 100, | |
| 204 | // layout: 'horizontal', | |
| 205 | rowProps: { | |
| 206 | // justify: 'start', | |
| 207 | gutter: 12, | |
| 208 | }, | |
| 209 | showActionButtonGroup: false, | |
| 210 | // showResetButton: false, | |
| 211 | // showSubmitButton: false, | |
| 212 | schemas: [ | |
| 213 | { | |
| 214 | field: `field1`, | |
| 215 | label: ``, | |
| 216 | component: 'Input', | |
| 217 | componentProps: { | |
| 218 | placeholder: '搜索文档名称', | |
| 219 | }, | |
| 220 | colProps: { | |
| 221 | span:8, | |
| 222 | }, | |
| 223 | }, | |
| 224 | { | |
| 225 | field: 'recurringDates', | |
| 226 | label: '', | |
| 227 | component: 'Select', | |
| 228 | colProps: { | |
| 229 | span:8, | |
| 230 | }, | |
| 231 | componentProps: { | |
| 232 | options: [ | |
| 233 | { | |
| 234 | label: '全部类型', | |
| 235 | value: '1', | |
| 236 | }, | |
| 237 | { | |
| 238 | label: '邮件附件', | |
| 239 | value: '2', | |
| 240 | }, | |
| 241 | { | |
| 242 | label: '手动上传', | |
| 243 | value: '3', | |
| 244 | }, | |
| 245 | { | |
| 246 | label: '销售订单已导单据', | |
| 247 | value: '4', | |
| 248 | }, | |
| 249 | { | |
| 250 | label: '报价单已导单据', | |
| 251 | value: '5', | |
| 252 | }, | |
| 253 | ], | |
| 254 | }, | |
| 255 | defaultValue: '1' | |
| 256 | }, | |
| 257 | { | |
| 258 | field: '[startDate, endDate]', | |
| 259 | label: '', | |
| 260 | component: 'RangePicker', | |
| 261 | componentProps: { | |
| 262 | style: {width: '100%'}, | |
| 263 | format: 'YYYY-MM-DD', | |
| 264 | placeholder: ['开始日期、时间', '结束日期、时间'], | |
| 265 | // showTime: {format: 'HH:mm:ss'}, | |
| 266 | }, | |
| 267 | colProps: { | |
| 268 | span:8, | |
| 269 | }, | |
| 270 | }, | |
| 271 | ], | |
| 272 | }, | |
| 273 | ||
| f353bc | 274 | }); |
| S | 275 | |
| 276 | ||
| 277 | ||
| cb1651 | 278 | function handleWriteEmail(record: Recordable) { |
| S | 279 | Logger.log('点击了写邮件', record); |
| 280 | } | |
| 281 | function handleDownloadFiles(record: Recordable) { | |
| 282 | Logger.log('点击了下载文件', record); | |
| 283 | } | |
| 284 | function handleDeleteFiles(record: Recordable) { | |
| 285 | Logger.log('点击了删除文件', record); | |
| f353bc | 286 | } |
| S | 287 | |
| 288 | </script> | |
| cb1651 | 289 | <style lang="less" scoped> |
| S | 290 | .customer-modal-document{ |
| 291 | .icon-color{ | |
| 292 | color: #1890ff; | |
| 293 | } | |
| 294 | :deep(&-btn) .ant-space{ | |
| 295 | display: none; | |
| 296 | } | |
| 297 | :deep(.ant-collapse-content-box), :deep(.onbus-basic-table) { | |
| 298 | padding: 0; | |
| 299 | } | |
| 300 | } | |
| 301 | ||
| f353bc | 302 | |
| S | 303 | </style> |
