| | |
| | | <template> |
| | | <a-collapse v-model:activeKey="activeKey" ghost> |
| | | <a-collapse class="customer-modal-document" v-model:activeKey="activeKey" ghost> |
| | | <a-collapse-panel key="1" header="文档"> |
| | | <BasicTable |
| | | @register="registerTable" |
| | | @row-click="handleScheduleRowClick" |
| | | > |
| | | <template #bodyCell="{ column, record }"> |
| | | <template #bodyCell="{ column, record, index }"> |
| | | <template v-if="column.key === 'cluesName'"> |
| | | <div> |
| | | <a-avatar :size="16" :style="'background-color:'+ record.color"></a-avatar> |
| | | <span class="ml-5px"> |
| | | {{ record.cluesName }} |
| | | </span> |
| | | <FileImageFilled class="icon-color font-size-20px" /> |
| | | <a class="ml-5px c-black" data-index="{{index}}" @click="setImgVisible(record.id)"> |
| | | {{ record.cluesName }} |
| | | </a> |
| | | <a-image |
| | | :style="{ display: 'none' }" |
| | | :preview="{ |
| | | visible: index == curImgIndex, |
| | | onVisibleChange: setImgVisible, |
| | | }" |
| | | :src="record.avatar" |
| | | /> |
| | | </div> |
| | | </template> |
| | | <template v-else-if="column.key === 'action'"> |
| | | <TableAction |
| | | stopButtonPropagation |
| | | :dropDownActions="[ |
| | | { |
| | | label: '发送邮件', |
| | | onClick: handleWriteEmail.bind(null, record), |
| | | }, |
| | | { |
| | | label: '下载附件', |
| | | onClick: handleDownloadFiles.bind(null, record), |
| | | }, |
| | | { |
| | | label: '删除文件', |
| | | onClick: handleDeleteFiles.bind(null, record), |
| | | }, |
| | | ]" |
| | | /> |
| | | </template> |
| | | </template> |
| | | |
| | | </BasicTable> |
| | | <template #extra > |
| | | <PlusCircleOutlined @click="addUploadFile" /> |
| | | <BasicUpload |
| | | ref="uploadRef" |
| | | :maxSize="20" |
| | | :maxNumber="10" |
| | | @change="handleUploadFileChange" |
| | | :api="uploadApi" |
| | | class="customer-modal-document-btn" |
| | | :accept="['image/*']" |
| | | /> |
| | | </template> |
| | | </a-collapse-panel> |
| | | </a-collapse> |
| | | |
| | |
| | | </template> |
| | | <script lang="ts" setup> |
| | | import {projectList} from './data'; |
| | | import {PlusSquareOutlined} from '@ant-design/icons-vue'; |
| | | import {PlusSquareOutlined,FileImageFilled,PlusCircleOutlined} from '@ant-design/icons-vue'; |
| | | import {BasicArrow} from "@/components/Basic"; |
| | | import {ref} from 'vue'; |
| | | import ScheduleDetailModal from './ScheduleDetail.vue'; |
| | |
| | | import {cluesListApi} from "@/api/clues/table"; |
| | | import {getEditCellColumns, getFormConfig} from "@/views/clues/components/tableData"; |
| | | import {useModal} from "@/components/Modal"; |
| | | import {uploadApi} from "@/api/sys/upload"; |
| | | import {BasicUpload} from "@/components/Upload"; |
| | | import {useMessage} from "@/hooks/web/useMessage"; |
| | | |
| | | const [registerScheduleModal, {openModal, setModalProps}] = useModal(); |
| | | const openScheduleModal = () => { |
| | |
| | | }); |
| | | }; |
| | | |
| | | // 获取子组件的引用 |
| | | const uploadRef = ref(); |
| | | function addUploadFile(event) { |
| | | Logger.log('addUploadFile', event); |
| | | event.stopPropagation(); |
| | | if (uploadRef.value) { |
| | | Logger.log('uploadRef', uploadRef.value); |
| | | uploadRef.value.openUploadModal(); |
| | | } |
| | | |
| | | } |
| | | // const addUploadFile = (event: MouseEvent) => { |
| | | // Logger.log('addUploadFile', event); |
| | | // // If you don't want click extra trigger collapse, you can prevent this: |
| | | // event.stopPropagation(); |
| | | // |
| | | // }; |
| | | const { createMessage } = useMessage(); |
| | | function handleUploadFileChange(list: string[]) { |
| | | createMessage.success(`已上传文件${JSON.stringify(list)}`); |
| | | } |
| | | |
| | | const activeKey = ref(['1']); |
| | | |
| | | 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 curImgIndex = ref<boolean>(-1); |
| | | const setImgVisible = (value): void => { |
| | | Logger.log('setImgVisible', value); |
| | | if (value === false) { |
| | | curImgIndex.value = -1; |
| | | } else { |
| | | curImgIndex.value = value; |
| | | } |
| | | // imgVisible.value = value; |
| | | }; |
| | | |
| | | const [ |
| | |
| | | showIndexColumn: false, |
| | | columns: [ |
| | | { |
| | | // title: '', |
| | | title: '文件名称', |
| | | // defaultHidden: true, |
| | | dataIndex: 'cluesName', |
| | | width: 200 |
| | | }, |
| | | { |
| | | // title: '', |
| | | title: '关联类型', |
| | | dataIndex: 'statusId', |
| | | width: 200, |
| | | }, |
| | | { |
| | | title: '文件大小', |
| | | dataIndex: 'formId', |
| | | width: 80, |
| | | }, |
| | | { |
| | | title: '添加人', |
| | | dataIndex: 'name', |
| | | width: 80, |
| | | }, |
| | | { |
| | | title: '上传日期', |
| | | dataIndex: 'archiveTime', |
| | | width: 200, |
| | | }, |
| | | |
| | | ], |
| | | // defSort: { |
| | | // pageNo: 1, |
| | |
| | | // showIndexColumn: false, // 是否显示序号列 |
| | | // useSearchForm: false, // 使用搜索表单 |
| | | // clickToRowSelect: false, |
| | | // formConfig: getFormConfig(), // 搜索表单配置 |
| | | pagination: { |
| | | // pageSize: 20, |
| | | pageSizeOptions: ['10', '20', '50', '100'], |
| | | defaultPageSize: 20, |
| | | // showSizeChanger: true, |
| | | }, |
| | | actionColumn: { |
| | | width: 50, |
| | | title: '操作', |
| | | dataIndex: 'action', |
| | | fixed: 'right', |
| | | }, |
| | | useSearchForm: true, // 使用搜索表单 |
| | | formConfig: { |
| | | // labelWidth: 100, |
| | | // layout: 'horizontal', |
| | | rowProps: { |
| | | // justify: 'start', |
| | | gutter: 12, |
| | | }, |
| | | showActionButtonGroup: false, |
| | | // showResetButton: false, |
| | | // showSubmitButton: false, |
| | | schemas: [ |
| | | { |
| | | field: `field1`, |
| | | label: ``, |
| | | component: 'Input', |
| | | componentProps: { |
| | | placeholder: '搜索文档名称', |
| | | }, |
| | | colProps: { |
| | | span:8, |
| | | }, |
| | | }, |
| | | { |
| | | field: 'recurringDates', |
| | | label: '', |
| | | component: 'Select', |
| | | colProps: { |
| | | span:8, |
| | | }, |
| | | componentProps: { |
| | | options: [ |
| | | { |
| | | label: '全部类型', |
| | | value: '1', |
| | | }, |
| | | { |
| | | label: '邮件附件', |
| | | value: '2', |
| | | }, |
| | | { |
| | | label: '手动上传', |
| | | value: '3', |
| | | }, |
| | | { |
| | | label: '销售订单已导单据', |
| | | value: '4', |
| | | }, |
| | | { |
| | | label: '报价单已导单据', |
| | | value: '5', |
| | | }, |
| | | ], |
| | | }, |
| | | defaultValue: '1' |
| | | }, |
| | | { |
| | | field: '[startDate, endDate]', |
| | | label: '', |
| | | component: 'RangePicker', |
| | | componentProps: { |
| | | style: {width: '100%'}, |
| | | format: 'YYYY-MM-DD', |
| | | placeholder: ['开始日期、时间', '结束日期、时间'], |
| | | // showTime: {format: 'HH:mm:ss'}, |
| | | }, |
| | | colProps: { |
| | | span:8, |
| | | }, |
| | | }, |
| | | ], |
| | | }, |
| | | |
| | | }); |
| | | |
| | | |
| | | |
| | | function handleScheduleRowClick(e) { |
| | | Logger.log('handleScheduleRowClick', e); |
| | | openModal(true, { |
| | | // record, |
| | | // isUpdate: true, |
| | | }); |
| | | function handleWriteEmail(record: Recordable) { |
| | | Logger.log('点击了写邮件', record); |
| | | } |
| | | function handleDownloadFiles(record: Recordable) { |
| | | Logger.log('点击了下载文件', record); |
| | | } |
| | | function handleDeleteFiles(record: Recordable) { |
| | | Logger.log('点击了删除文件', record); |
| | | } |
| | | |
| | | const prefixCls = 'account-center-project'; |
| | | </script> |
| | | <style lang="less" > |
| | | <style lang="less" scoped> |
| | | .customer-modal-document{ |
| | | .icon-color{ |
| | | color: #1890ff; |
| | | } |
| | | :deep(&-btn) .ant-space{ |
| | | display: none; |
| | | } |
| | | :deep(.ant-collapse-content-box), :deep(.onbus-basic-table) { |
| | | padding: 0; |
| | | } |
| | | } |
| | | |
| | | |
| | | </style> |