| 提交 | 用户 | age | ||
| f353bc | 1 | <template> |
| cb1651 | 2 | <a-collapse :class="prefixCls" v-model:activeKey="activeKey" ghost> |
| S | 3 | <a-collapse-panel key="1" header="商机"> |
| 4 | <a-row :gutter="[12,12]" class="pb-20px"> | |
| 5 | <template v-for="item in cardList" :key="item.title"> | |
| 6 | <a-col :span="8"> | |
| 7 | <a-card :class="`${prefixCls}-card`"> | |
| 8 | <div :class="`${prefixCls}-card-title`"> | |
| 9 | <!-- <BasicTitle :helpMessage="item.tips"></BasicTitle>--> | |
| 10 | {{ item.title }} | |
| 11 | <span v-if="item?.tips?.length>0" ><BasicHelp :text="item.tips" placement="top" /></span> | |
| 12 | </div> | |
| 13 | <div :class="`${prefixCls}__card-detail font-bold`"> | |
| 14 | {{ item.detail || '--' }} | |
| 15 | </div> | |
| 16 | </a-card> | |
| 17 | </a-col> | |
| f353bc | 18 | </template> |
| cb1651 | 19 | </a-row> |
| f353bc | 20 | |
| cb1651 | 21 | |
| S | 22 | <BasicTable |
| 23 | @register="registerTable" | |
| 24 | > | |
| 25 | <template #bodyCell="{ column, record, index }"> | |
| 26 | <template v-if="column.key === 'cluesName'"> | |
| 27 | <div> | |
| 28 | <a class="ml-5px "> | |
| 29 | {{ record.cluesName }} | |
| 30 | </a> | |
| 31 | </div> | |
| 32 | </template> | |
| 33 | <template v-if="column.key === 'status'"> | |
| 34 | <a-tag color="green"> | |
| 35 | {{ record.status }} | |
| 36 | </a-tag> | |
| 37 | </template> | |
| 38 | <template v-if="column.key === 'endTime'"> | |
| 39 | <span class="c-red"> | |
| 40 | {{ record.endTime }} | |
| 41 | </span> | |
| 42 | </template> | |
| 43 | </template> | |
| 44 | ||
| 45 | </BasicTable> | |
| 46 | <template #extra > | |
| 47 | <PlusCircleOutlined @click="addBusinessForm" /> | |
| f353bc | 48 | </template> |
| cb1651 | 49 | </a-collapse-panel> |
| S | 50 | </a-collapse> |
| 51 | ||
| f353bc | 52 | <ScheduleDetailModal @register="registerScheduleModal"></ScheduleDetailModal> |
| S | 53 | |
| 54 | </template> | |
| 55 | <script lang="ts" setup> | |
| 56 | import {projectList} from './data'; | |
| cb1651 | 57 | import {PlusSquareOutlined,FileImageFilled,PlusCircleOutlined} from '@ant-design/icons-vue'; |
| f353bc | 58 | import {BasicArrow} from "@/components/Basic"; |
| S | 59 | import {ref} from 'vue'; |
| 60 | import ScheduleDetailModal from './ScheduleDetail.vue'; | |
| 61 | ||
| cb1651 | 62 | import { BasicHelp } from '@/components/Basic'; |
| f353bc | 63 | import EventBus from '@/utils/eventBus'; |
| S | 64 | import {BasicTable, ColumnChangeParam, TableAction, useTable} from "@/components/Table"; |
| 65 | import {cluesListApi} from "@/api/clues/table"; | |
| 66 | import {getEditCellColumns, getFormConfig} from "@/views/clues/components/tableData"; | |
| 67 | import {useModal} from "@/components/Modal"; | |
| cb1651 | 68 | import {Row} from "ant-design-vue"; |
| S | 69 | import {applicationList} from "@/views/demo/page/account/center/data"; |
| 70 | import Business from "@/router/routes/modules/business"; | |
| 71 | import {cluesDynamicApi} from "@/api/clues/dynamic"; | |
| f353bc | 72 | const [registerScheduleModal, {openModal, setModalProps}] = useModal(); |
| S | 73 | const openScheduleModal = () => { |
| 74 | Logger.log('点击openScheduleModal'); | |
| 75 | EventBus.emit('openScheduleModal', { | |
| 76 | title: '新建任务', | |
| 77 | content: '新建任务内容' | |
| 78 | }); | |
| 79 | }; | |
| 80 | ||
| cb1651 | 81 | const activeKey = ref(['1']); |
| S | 82 | function addBusinessForm(event) { |
| 83 | Logger.log('addBusinessForm', event); | |
| 84 | event.stopPropagation(); | |
| 85 | } | |
| f353bc | 86 | |
| cb1651 | 87 | |
| S | 88 | |
| 89 | ||
| 90 | let cardList = ref([ | |
| 91 | { | |
| 92 | title: '赢单商机金额(CNY)', | |
| 93 | detail: '0.00', | |
| 94 | }, | |
| 95 | { | |
| 96 | title: '赢单商机均价(CNY)', | |
| 97 | detail: '0.00', | |
| 98 | }, | |
| 99 | { | |
| 100 | title: '首次赢单日期', | |
| 101 | tips: '所有赢单商机中最早的结束日期', | |
| 102 | detail: '', | |
| 103 | }, | |
| 104 | { | |
| 105 | title: '最近赢单日期', | |
| 106 | tips: '所有赢单商机中最近的结束日期', | |
| 107 | detail: '', | |
| 108 | }, | |
| 109 | { | |
| 110 | title: '进行中的商机数', | |
| 111 | tips: '「进行中」是指除赢单&输单之外的商机阶段', | |
| 112 | detail: '10', | |
| 113 | }, | |
| 114 | { | |
| 115 | title: '赢单商机数', | |
| 116 | detail: '0', | |
| 117 | }, | |
| 118 | { | |
| 119 | title: '赢单率', | |
| 120 | detail: '0%', | |
| 121 | }, | |
| 122 | { | |
| 123 | title: '平均销售周期', | |
| 124 | detail: '0小时', | |
| 125 | }, | |
| 126 | { | |
| 127 | title: '已生效回款单数', | |
| 128 | detail: '0', | |
| 129 | }, | |
| 130 | { | |
| 131 | title: '已生效回款金额', | |
| 132 | detail: '0', | |
| 133 | }, | |
| 134 | ]); | |
| 135 | // 商机总览列表数据 | |
| 136 | setTimeout(() => { | |
| 137 | // getCustomerCardData(); | |
| 138 | }, 50); | |
| 139 | async function getCustomerCardData(){ | |
| 140 | let params = { | |
| 141 | page: 1, | |
| 142 | pageSize: 10, | |
| 143 | }; | |
| 144 | try { | |
| 145 | let res = await cluesDynamicApi(params) | |
| 146 | Logger.log('cluesDynamicApi...',res); | |
| 147 | cardList.value = res.items; | |
| 148 | } catch (e) { | |
| 149 | Logger.error(e); | |
| 150 | } finally { | |
| 151 | } | |
| 152 | } | |
| 153 | ||
| 154 | // const pagination = { | |
| 155 | // onChange: (page: number) => { | |
| 156 | // console.log(page); | |
| 157 | // }, | |
| 158 | // pageSize: 3, | |
| 159 | // }; | |
| 160 | ||
| f353bc | 161 | |
| S | 162 | const [ |
| 163 | registerTable, | |
| 164 | { | |
| 165 | // setLoading, | |
| 166 | // setProps, | |
| 167 | // getColumns, | |
| 168 | // getDataSource, | |
| 169 | // getRawDataSource, | |
| 170 | // reload, | |
| 171 | // getPaginationRef, | |
| 172 | // setPagination, | |
| 173 | // getSelectRows, | |
| 174 | // getSelectRowKeys, | |
| 175 | // setSelectedRowKeys, | |
| 176 | // clearSelectedRowKeys, | |
| 177 | }, | |
| 178 | ] = useTable({ | |
| 179 | canResize: true, | |
| 180 | api: cluesListApi, | |
| 181 | // beforeFetch: (params) => { | |
| 182 | // console.log('beforeFetch', params); | |
| 183 | // params.pageNo = params.page; | |
| 184 | // // return Promise.resolve(params); | |
| 185 | // }, | |
| 186 | showIndexColumn: false, | |
| 187 | columns: [ | |
| 188 | { | |
| cb1651 | 189 | title: '商机编号', |
| S | 190 | // defaultHidden: true, |
| 191 | dataIndex: 'id', | |
| 192 | width: 70 | |
| 193 | }, | |
| 194 | { | |
| 195 | title: '商机名称', | |
| f353bc | 196 | // defaultHidden: true, |
| S | 197 | dataIndex: 'cluesName', |
| 198 | width: 200 | |
| 199 | }, | |
| 200 | { | |
| cb1651 | 201 | title: '当前阶段', |
| S | 202 | dataIndex: 'status', |
| 203 | width: 120, | |
| f353bc | 204 | }, |
| cb1651 | 205 | { |
| S | 206 | title: '销售金额', |
| 207 | dataIndex: 'formId', | |
| 208 | width: 80, | |
| 209 | }, | |
| 210 | { | |
| 211 | title: '结束日期', | |
| 212 | dataIndex: 'endTime', | |
| 213 | width: 100, | |
| 214 | }, | |
| 215 | { | |
| 216 | title: '已生效回款金额', | |
| 217 | dataIndex: 'formId', | |
| 218 | width: 80, | |
| 219 | }, | |
| 220 | { | |
| 221 | title: '未回款金额', | |
| 222 | dataIndex: 'formId', | |
| 223 | width: 80, | |
| 224 | }, | |
| 225 | { | |
| 226 | title: '负责人', | |
| 227 | dataIndex: 'name', | |
| 228 | width: 80, | |
| 229 | }, | |
| 230 | ||
| f353bc | 231 | ], |
| S | 232 | // defSort: { |
| 233 | // pageNo: 1, | |
| 234 | // pageSize: 20, | |
| 235 | // field: 'name', | |
| 236 | // order: 'ascend', | |
| 237 | // }, | |
| 238 | rowKey: 'id', | |
| 239 | // showTableSetting: false, | |
| 240 | // showIndexColumn: false, // 是否显示序号列 | |
| 241 | // useSearchForm: false, // 使用搜索表单 | |
| 242 | // clickToRowSelect: false, | |
| 243 | pagination: { | |
| 244 | // pageSize: 20, | |
| 245 | pageSizeOptions: ['10', '20', '50', '100'], | |
| 246 | defaultPageSize: 20, | |
| 247 | // showSizeChanger: true, | |
| 248 | }, | |
| 249 | }); | |
| 250 | ||
| cb1651 | 251 | const prefixCls = 'customer-modal-business'; |
| S | 252 | </script> |
| 253 | <style lang="less" scoped> | |
| 254 | .customer-modal-business{ | |
| 255 | .icon-color{ | |
| 256 | color: #1890ff; | |
| 257 | } | |
| 258 | :deep(&-btn) .ant-space{ | |
| 259 | display: none; | |
| 260 | } | |
| 261 | :deep(.ant-collapse-content-box), :deep(.onbus-basic-table){ | |
| 262 | padding: 0; | |
| 263 | } | |
| 264 | :deep(&-card) .ant-card-body{ | |
| 265 | padding: 10px; | |
| 266 | background-color: #f9f9f9; | |
| 267 | } | |
| 268 | :deep(&-card-title) .onbus-basic-title{ | |
| 269 | padding: 0; | |
| 270 | } | |
| f353bc | 271 | } |
| S | 272 | |
| 273 | ||
| 274 | </style> | |
