| | |
| | | <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> |
| | | <a-collapse :class="prefixCls" v-model:activeKey="activeKey" ghost> |
| | | <a-collapse-panel key="1" header="商机"> |
| | | <a-row :gutter="[12,12]" class="pb-20px"> |
| | | <template v-for="item in cardList" :key="item.title"> |
| | | <a-col :span="8"> |
| | | <a-card :class="`${prefixCls}-card`"> |
| | | <div :class="`${prefixCls}-card-title`"> |
| | | <!-- <BasicTitle :helpMessage="item.tips"></BasicTitle>--> |
| | | {{ item.title }} |
| | | <span v-if="item?.tips?.length>0" ><BasicHelp :text="item.tips" placement="top" /></span> |
| | | </div> |
| | | <div :class="`${prefixCls}__card-detail font-bold`"> |
| | | {{ item.detail || '--' }} |
| | | </div> |
| | | </a-card> |
| | | </a-col> |
| | | </template> |
| | | </Dropdown> |
| | | </Col> |
| | | <Col span="12" :style="'text-align:right'"> |
| | | <Tooltip title="新建日程"> |
| | | <PlusSquareOutlined class="cursor-pointer" style="fontSize:24px;color: #aaa" |
| | | @click="openScheduleModal"/> |
| | | </Tooltip> |
| | | </a-row> |
| | | |
| | | </Col> |
| | | </Row> |
| | | |
| | | <BasicTable |
| | | @register="registerTable" |
| | | @row-click="handleScheduleRowClick" |
| | | > |
| | | <template #bodyCell="{ column, record }"> |
| | | <template #bodyCell="{ column, record, index }"> |
| | | <template v-if="column.key === 'cluesName'"> |
| | | <div> |
| | | <Avatar :size="16" :style="'background-color:'+ record.color"></Avatar> |
| | | <span class="ml-5px"> |
| | | <a class="ml-5px "> |
| | | {{ record.cluesName }} |
| | | </a> |
| | | </div> |
| | | </template> |
| | | <template v-if="column.key === 'status'"> |
| | | <a-tag color="green"> |
| | | {{ record.status }} |
| | | </a-tag> |
| | | </template> |
| | | <template v-if="column.key === 'endTime'"> |
| | | <span class="c-red"> |
| | | {{ record.endTime }} |
| | | </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 #extra > |
| | | <PlusCircleOutlined @click="addBusinessForm" /> |
| | | </template> |
| | | </a-collapse-panel> |
| | | </a-collapse> |
| | | |
| | | </div> |
| | | <!-- <List :class="prefixCls" item-layout="horizontal" :data-source="projectList" :grid="{ column: 1, gutter: 12}" :pagination="pagination" >--> |
| | | <!-- <template #renderItem="{ item }">--> |
| | | <!-- <ListItem>--> |
| | | <!-- --> |
| | | <!-- </ListItem>--> |
| | | <ScheduleDetailModal @register="registerScheduleModal"></ScheduleDetailModal> |
| | | |
| | | <!-- </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 {PlusSquareOutlined,FileImageFilled,PlusCircleOutlined} 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 { BasicHelp } from '@/components/Basic'; |
| | | 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"; |
| | | |
| | | import {Row} from "ant-design-vue"; |
| | | import {applicationList} from "@/views/demo/page/account/center/data"; |
| | | import Business from "@/router/routes/modules/business"; |
| | | import {cluesDynamicApi} from "@/api/clues/dynamic"; |
| | | const [registerScheduleModal, {openModal, setModalProps}] = useModal(); |
| | | const openScheduleModal = () => { |
| | | Logger.log('点击openScheduleModal'); |
| | |
| | | }); |
| | | }; |
| | | |
| | | const pagination = { |
| | | onChange: (page: number) => { |
| | | console.log(page); |
| | | }, |
| | | pageSize: 3, |
| | | }; |
| | | const activeKey = ref(['1']); |
| | | function addBusinessForm(event) { |
| | | Logger.log('addBusinessForm', event); |
| | | event.stopPropagation(); |
| | | } |
| | | |
| | | const openChange = (status: boolean) => { |
| | | Logger.log('openChange', status); |
| | | |
| | | |
| | | |
| | | let cardList = ref([ |
| | | { |
| | | title: '赢单商机金额(CNY)', |
| | | detail: '0.00', |
| | | }, |
| | | { |
| | | title: '赢单商机均价(CNY)', |
| | | detail: '0.00', |
| | | }, |
| | | { |
| | | title: '首次赢单日期', |
| | | tips: '所有赢单商机中最早的结束日期', |
| | | detail: '', |
| | | }, |
| | | { |
| | | title: '最近赢单日期', |
| | | tips: '所有赢单商机中最近的结束日期', |
| | | detail: '', |
| | | }, |
| | | { |
| | | title: '进行中的商机数', |
| | | tips: '「进行中」是指除赢单&输单之外的商机阶段', |
| | | detail: '10', |
| | | }, |
| | | { |
| | | title: '赢单商机数', |
| | | detail: '0', |
| | | }, |
| | | { |
| | | title: '赢单率', |
| | | detail: '0%', |
| | | }, |
| | | { |
| | | title: '平均销售周期', |
| | | detail: '0小时', |
| | | }, |
| | | { |
| | | title: '已生效回款单数', |
| | | detail: '0', |
| | | }, |
| | | { |
| | | title: '已生效回款金额', |
| | | detail: '0', |
| | | }, |
| | | ]); |
| | | // 商机总览列表数据 |
| | | setTimeout(() => { |
| | | // getCustomerCardData(); |
| | | }, 50); |
| | | async function getCustomerCardData(){ |
| | | let params = { |
| | | page: 1, |
| | | pageSize: 10, |
| | | }; |
| | | const dropDownTitle = ref('未完成'); |
| | | const onMenuItemClick = (e: any) => { |
| | | let titles = ['未完成', '已完成']; |
| | | Logger.log('onMenuItemClick', e); |
| | | dropDownTitle.value = titles[e.key]; |
| | | }; |
| | | try { |
| | | let res = await cluesDynamicApi(params) |
| | | Logger.log('cluesDynamicApi...',res); |
| | | cardList.value = res.items; |
| | | } catch (e) { |
| | | Logger.error(e); |
| | | } finally { |
| | | } |
| | | } |
| | | |
| | | // const pagination = { |
| | | // onChange: (page: number) => { |
| | | // console.log(page); |
| | | // }, |
| | | // pageSize: 3, |
| | | // }; |
| | | |
| | | |
| | | const [ |
| | | registerTable, |
| | |
| | | showIndexColumn: false, |
| | | columns: [ |
| | | { |
| | | // title: '', |
| | | title: '商机编号', |
| | | // defaultHidden: true, |
| | | dataIndex: 'id', |
| | | width: 70 |
| | | }, |
| | | { |
| | | title: '商机名称', |
| | | // defaultHidden: true, |
| | | dataIndex: 'cluesName', |
| | | width: 200 |
| | | }, |
| | | { |
| | | // title: '', |
| | | dataIndex: 'archiveTime', |
| | | width: 200, |
| | | title: '当前阶段', |
| | | dataIndex: 'status', |
| | | width: 120, |
| | | }, |
| | | { |
| | | title: '销售金额', |
| | | dataIndex: 'formId', |
| | | width: 80, |
| | | }, |
| | | { |
| | | title: '结束日期', |
| | | dataIndex: 'endTime', |
| | | width: 100, |
| | | }, |
| | | { |
| | | title: '已生效回款金额', |
| | | dataIndex: 'formId', |
| | | width: 80, |
| | | }, |
| | | { |
| | | title: '未回款金额', |
| | | dataIndex: 'formId', |
| | | width: 80, |
| | | }, |
| | | { |
| | | title: '负责人', |
| | | dataIndex: 'name', |
| | | width: 80, |
| | | }, |
| | | |
| | | ], |
| | | // defSort: { |
| | | // pageNo: 1, |
| | |
| | | // showIndexColumn: false, // 是否显示序号列 |
| | | // useSearchForm: false, // 使用搜索表单 |
| | | // clickToRowSelect: false, |
| | | // formConfig: getFormConfig(), // 搜索表单配置 |
| | | pagination: { |
| | | // pageSize: 20, |
| | | pageSizeOptions: ['10', '20', '50', '100'], |
| | |
| | | }, |
| | | }); |
| | | |
| | | |
| | | |
| | | function handleScheduleRowClick(e) { |
| | | Logger.log('handleScheduleRowClick', e); |
| | | openModal(true, { |
| | | // record, |
| | | // isUpdate: true, |
| | | }); |
| | | const prefixCls = 'customer-modal-business'; |
| | | </script> |
| | | <style lang="less" scoped> |
| | | .customer-modal-business{ |
| | | .icon-color{ |
| | | color: #1890ff; |
| | | } |
| | | :deep(&-btn) .ant-space{ |
| | | display: none; |
| | | } |
| | | :deep(.ant-collapse-content-box), :deep(.onbus-basic-table){ |
| | | padding: 0; |
| | | } |
| | | :deep(&-card) .ant-card-body{ |
| | | padding: 10px; |
| | | background-color: #f9f9f9; |
| | | } |
| | | :deep(&-card-title) .onbus-basic-title{ |
| | | padding: 0; |
| | | } |
| | | } |
| | | |
| | | const prefixCls = 'account-center-project'; |
| | | </script> |
| | | <style lang="less" > |
| | | |
| | | </style> |