From cb165187ddcf5d9cfd8aad97a2868d0343b14bd9 Mon Sep 17 00:00:00 2001
From: Sanakey <714737083@qq.com>
Date: 星期五, 27 九月 2024 18:14:48 +0800
Subject: [PATCH] feat:完善客户Drawer详情
---
src/views/clues/components/drawer/Schedule.vue | 6
src/views/customer/components/drawer/Business.vue | 286 +++++++++++-----
src/components/Upload/src/BasicUpload.vue | 5
src/views/customer/components/Drawer.vue | 2
src/components/NewSchedule/src/scheduleFormData.tsx | 2
src/views/clues/components/drawer/Dynamic.vue | 10
src/views/clues/components/drawer/index.vue | 5
src/views/clues/components/Drawer.vue | 3
src/views/customer/components/drawer/Document.vue | 233 +++++++++++--
src/views/customer/components/drawer/Dynamic.vue | 257 ++++++++++++--
src/views/customer/components/drawer/Tips.vue | 203 +++--------
mock/clues/clues-table.ts | 1
src/views/customer/components/drawer/index.vue | 5
13 files changed, 690 insertions(+), 328 deletions(-)
diff --git a/mock/clues/clues-table.ts b/mock/clues/clues-table.ts
index 89c4617..5b9f27c 100644
--- a/mock/clues/clues-table.ts
+++ b/mock/clues/clues-table.ts
@@ -15,6 +15,7 @@
for (let index = 0; index < 200; index++) {
result.push({
id: `${index}`,
+ color: Random.color(),
cluesName: '@ctitle()',
formId: `@integer(100000, 999999)`,
archiveTime: '@datetime',
diff --git a/src/components/NewSchedule/src/scheduleFormData.tsx b/src/components/NewSchedule/src/scheduleFormData.tsx
index 3138fbd..1305c31 100644
--- a/src/components/NewSchedule/src/scheduleFormData.tsx
+++ b/src/components/NewSchedule/src/scheduleFormData.tsx
@@ -102,7 +102,7 @@
colors.map((item) => {
return <RadioButton class="mr-5px" value={item.type_id} onChange={onChange}
style={{backgroundColor: item.color,borderColor:item.color}}>
- <span class={ model[field] === item.type_id ?'':'c-white select-none op0'}>鉁�</span>
+ <span class={'c-white' + (model[field] === item.type_id ?'':' select-none op0')}>鉁�</span>
</RadioButton>;
})
}
diff --git a/src/components/Upload/src/BasicUpload.vue b/src/components/Upload/src/BasicUpload.vue
index 92aff62..122830b 100644
--- a/src/components/Upload/src/BasicUpload.vue
+++ b/src/components/Upload/src/BasicUpload.vue
@@ -162,4 +162,9 @@
function handlePreviewDelete(url: string) {
emit('preview-delete', url);
}
+
+ // 鏆撮湶openUploadModal 渚涚埗缁勪欢浣跨敤
+ defineExpose({
+ openUploadModal,
+ });
</script>
diff --git a/src/views/clues/components/Drawer.vue b/src/views/clues/components/Drawer.vue
index 49a4501..ec71ae4 100644
--- a/src/views/clues/components/Drawer.vue
+++ b/src/views/clues/components/Drawer.vue
@@ -1,11 +1,12 @@
<template>
<BasicDrawer
+ class="basic-drawer-1"
v-bind="$attrs"
title="Basic Drawer"
@register="registerDrawer"
:maskClosable="false"
:keyboard="false"
- width="500px"
+ width="550px"
>
<template #title>
<div class="text-right">
diff --git a/src/views/clues/components/drawer/Dynamic.vue b/src/views/clues/components/drawer/Dynamic.vue
index bf131d2..49b1e4b 100644
--- a/src/views/clues/components/drawer/Dynamic.vue
+++ b/src/views/clues/components/drawer/Dynamic.vue
@@ -8,7 +8,7 @@
娣诲姞璺熻繘
</a-button>
</div>
- <div ref="wrapEl">
+ <div ref="loadingEl">
<div class="mb-20px flex justify-between flex-items-center">
<span class="font-bold">鍏� {{totalData}} 鏉�</span>
<TreeSelect
@@ -120,16 +120,18 @@
}
// 鍔ㄦ�佸垪琛ㄥ姞杞�
- const wrapEl = ref<ElRef>(null);
+ const loadingEl = ref<ElRef>(null);
const [openWrapLoading, closeWrapLoading] = useLoading({
- target: wrapEl,
+ target: loadingEl,
props: {
tip: '鍔犺浇涓�...',
absolute: true,
},
});
// 鍔ㄦ�佸垪琛ㄦ暟鎹�
- getCluesDynamicData();
+ setTimeout(()=>{
+ getCluesDynamicData();
+ },50)
async function getCluesDynamicData(){
openWrapLoading();
let params = {
diff --git a/src/views/clues/components/drawer/Schedule.vue b/src/views/clues/components/drawer/Schedule.vue
index a76795b..bfc19be 100644
--- a/src/views/clues/components/drawer/Schedule.vue
+++ b/src/views/clues/components/drawer/Schedule.vue
@@ -92,12 +92,6 @@
});
};
-const pagination = {
- onChange: (page: number) => {
- console.log(page);
- },
- pageSize: 3,
-};
const openChange = (status: boolean) => {
Logger.log('openChange', status);
diff --git a/src/views/clues/components/drawer/index.vue b/src/views/clues/components/drawer/index.vue
index f4289f0..c7dc367 100644
--- a/src/views/clues/components/drawer/index.vue
+++ b/src/views/clues/components/drawer/index.vue
@@ -150,7 +150,10 @@
background-color: @component-background;
}
.scroll-wrap{
- height: calc(100vh - 290px);
+ height: calc(100vh - 310px);
}
+ //:deep(.scrollbar__wrap) {
+ // padding: 10px !important;
+ //}
}
</style>
diff --git a/src/views/customer/components/Drawer.vue b/src/views/customer/components/Drawer.vue
index 49a4501..5d0baf4 100644
--- a/src/views/customer/components/Drawer.vue
+++ b/src/views/customer/components/Drawer.vue
@@ -5,7 +5,7 @@
@register="registerDrawer"
:maskClosable="false"
:keyboard="false"
- width="500px"
+ width="550px"
>
<template #title>
<div class="text-right">
diff --git a/src/views/customer/components/drawer/Business.vue b/src/views/customer/components/drawer/Business.vue
index a76795b..5041e3c 100644
--- a/src/views/customer/components/drawer/Business.vue
+++ b/src/views/customer/components/drawer/Business.vue
@@ -1,88 +1,74 @@
<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 v-if="column.key === 'cluesName'">
- <div>
- <Avatar :size="16" :style="'background-color:'+ record.color"></Avatar>
- <span class="ml-5px">
- {{ record.cluesName }}
- </span>
- </div>
+
+ <BasicTable
+ @register="registerTable"
+ >
+ <template #bodyCell="{ column, record, index }">
+ <template v-if="column.key === 'cluesName'">
+ <div>
+ <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>
+ </template>
+ </template>
+
+ </BasicTable>
+ <template #extra >
+ <PlusCircleOutlined @click="addBusinessForm" />
</template>
- </template>
- </BasicTable>
+ </a-collapse-panel>
+ </a-collapse>
+
<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>
- </div>
- <!-- <List :class="prefixCls" item-layout="horizontal" :data-source="projectList" :grid="{ column: 1, gutter: 12}" :pagination="pagination" >-->
- <!-- <template #renderItem="{ item }">-->
- <!-- <ListItem>-->
- <!-- -->
- <!-- </ListItem>-->
-
- <!-- </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');
@@ -92,22 +78,86 @@
});
};
-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);
-};
-const dropDownTitle = ref('鏈畬鎴�');
-const onMenuItemClick = (e: any) => {
- let titles = ['鏈畬鎴�', '宸插畬鎴�'];
- Logger.log('onMenuItemClick', e);
- dropDownTitle.value = titles[e.key];
-};
+
+
+
+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,
+ };
+ 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,
@@ -136,16 +186,48 @@
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,
@@ -158,7 +240,6 @@
// showIndexColumn: false, // 鏄惁鏄剧ず搴忓彿鍒�
// useSearchForm: false, // 浣跨敤鎼滅储琛ㄥ崟
// clickToRowSelect: false,
- // formConfig: getFormConfig(), // 鎼滅储琛ㄥ崟閰嶇疆
pagination: {
// pageSize: 20,
pageSizeOptions: ['10', '20', '50', '100'],
@@ -167,18 +248,27 @@
},
});
-
-
-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>
diff --git a/src/views/customer/components/drawer/Document.vue b/src/views/customer/components/drawer/Document.vue
index 6a3a75a..6a1aec6 100644
--- a/src/views/customer/components/drawer/Document.vue
+++ b/src/views/customer/components/drawer/Document.vue
@@ -1,21 +1,60 @@
<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>
@@ -24,7 +63,7 @@
</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';
@@ -34,6 +73,9 @@
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 = () => {
@@ -44,23 +86,39 @@
});
};
+// 鑾峰彇瀛愮粍浠剁殑寮曠敤
+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 [
@@ -90,16 +148,32 @@
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,
@@ -112,27 +186,118 @@
// 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>
diff --git a/src/views/customer/components/drawer/Dynamic.vue b/src/views/customer/components/drawer/Dynamic.vue
index bf131d2..1d81243 100644
--- a/src/views/customer/components/drawer/Dynamic.vue
+++ b/src/views/customer/components/drawer/Dynamic.vue
@@ -1,6 +1,60 @@
<template>
<div :class="prefixCls" >
<div class="mb-20px">
+ <div class="mb-10px flex justify-between flex-items-center">
+ <div class="relative">
+ <a-dropdown :trigger="['click']">
+ <a-tooltip placement="top">
+ <template #title>
+ <span>鍒囨崲鍟嗘満</span>
+ </template>
+ <Icon
+ icon="iconamoon:swap"
+ class="cursor-pointer"
+ @click=""
+ :size="16"
+ />
+ </a-tooltip>
+ <template #overlay>
+ <a-menu
+ v-model:selectedKeys="selectedBusinessTitleKeys"
+ style="width: 220px"
+ @click="handleBusinessTitleClick"
+ :items="businessTitleArray"
+ >
+ </a-menu>
+ </template>
+ </a-dropdown>
+ <span class="font-bold ml-5px">{{ businessTitle }}</span>
+ </div>
+ <a-dropdown :trigger="['click']">
+ <MoreOutlined class="cursor-pointer mr-10px"/>
+ <template #overlay>
+ <a-menu>
+ <a-menu-item key="0" @click="editBusiness">
+ <span >缂栬緫鍟嗘満淇℃伅</span>
+ </a-menu-item>
+ <a-menu-item key="1" @click="addBusiness">
+ <span>鏂板缓鍟嗘満</span>
+ </a-menu-item>
+ <a-menu-item key="2" @click="removeBusiness">鍒犻櫎鍟嗘満</a-menu-item>
+ </a-menu>
+ </template>
+ </a-dropdown>
+ </div>
+ <a-row :gutter="12">
+ <a-col :span="10" class="font-size-13px">
+ 閿�鍞噾棰� <span class="c-gray-4">CNY 0.00</span>
+ </a-col>
+ <a-col :span="10" class="font-size-13px">
+ 缁撴潫鏃ユ湡 <span class="c-red-5">2024-10-30</span>
+ </a-col>
+ <a-col :span="4" class="font-size-13px">
+ 澶囨敞 <span class="c-gray-4">--</span>
+ </a-col>
+ </a-row>
+ </div>
+ <div class="mb-20px">
<a-button type="primary" shape="round" block @click="openFollowUpModal">
<template #icon>
<PlusCircleOutlined />
@@ -8,50 +62,86 @@
娣诲姞璺熻繘
</a-button>
</div>
- <div ref="wrapEl">
- <div class="mb-20px flex justify-between flex-items-center">
- <span class="font-bold">鍏� {{totalData}} 鏉�</span>
- <TreeSelect
- v-model:value="currentDynamicType"
- :dropdownStyle="{color: 'red'}"
- style="width: 120px"
- placeholder="Please select"
- :allow-clear="false"
- :bordered="false"
- tree-default-expand-all
- :tree-data="dynamicTypeTree"
- @change="handleDynamicTypeChange"
- >
- </TreeSelect>
+ <div class="mb-20px">
+ <ScheduleDetailModal @register="registerScheduleModal"></ScheduleDetailModal>
+ <div class="mb-10px flex justify-between flex-items-center">
+ <span class="font-bold">璁″垝鏃ョ▼</span>
+ <a-button shape="round" @click="openScheduleModal">娣诲姞鏃ョ▼</a-button>
</div>
- <Timeline >
- <TimelineItem v-for="item in dynamicList" :key="item.id">
- <Row>
- <Col span="16" class="c-gray-4">
+ <div>
+ <template v-for="(item,index) in scheduleList" :key="item.id">
+ <a-row class="cursor-pointer mb-10px" :gutter="12" @click="handleScheduleRowClick" :data-index="index">
+ <a-col span="10" >
+ <a-avatar class="mb-3px" :size="10" :style="'background-color:'+ item.color" ></a-avatar>
+ <span class="ml-5px c-blue">{{ item.beginTime }}</span>
+ </a-col>
+ <a-col span="14">
+ <span>{{ item.cluesName }}</span>
+ </a-col>
+ </a-row>
+ </template>
+ </div>
+ </div>
+ <div ref="loadingEl">
+ <div class="mb-20px flex justify-between flex-items-center">
+ <span class="font-bold">鍘嗗彶鍔ㄦ��</span>
+
+<!-- <a-tree-select-->
+<!-- v-model:value="currentDynamicType"-->
+<!-- :dropdownStyle="{color: 'red'}"-->
+<!-- style="width: 120px"-->
+<!-- placeholder="Please select"-->
+<!-- :allow-clear="false"-->
+<!-- :bordered="false"-->
+<!-- tree-default-expand-all-->
+<!-- :tree-data="dynamicTypeTree"-->
+<!-- @change="handleDynamicTypeChange"-->
+<!-- >-->
+<!-- </a-tree-select>-->
+ </div>
+ <div class="mb-20px">
+ <a-radio-group size="default" v-model:value="currentDynamicType">
+ <a-radio-button value="0">鍏ㄩ儴({{totalData}})</a-radio-button>
+ <a-radio-button value="1">璺熻繘璁板綍({{totalData}})</a-radio-button>
+ <a-radio-button value="2">寰�鏉ラ偖浠�({{totalData}})</a-radio-button>
+ <a-radio-button value="3">鑱婂ぉ璁板綍({{totalData}})</a-radio-button>
+ <a-radio-button value="4">鍏朵粬({{totalData}})</a-radio-button>
+ </a-radio-group>
+<!-- <a-button type="primary">鍏ㄩ儴({{totalData}})</a-button>-->
+<!-- <a-button type="primary">璺熻繘璁板綍({{totalData}})</a-button>-->
+<!-- <a-button type="primary">寰�鏉ラ偖浠�({{totalData}})</a-button>-->
+<!-- <a-button type="primary">鑱婂ぉ璁板綍({{totalData}})</a-button>-->
+<!-- <a-button type="primary">鍏朵粬({{totalData}})</a-button>-->
+
+ </div>
+ <a-timeline >
+ <a-timeline-item v-for="item in dynamicList" :key="item.id">
+ <a-row>
+ <a-col span="16" class="c-gray-4">
{{item.cluesName}}
- </Col>
- <Col :offset="2" span="6" class="c-gray-4">
+ </a-col>
+ <a-col :offset="2" span="6" class="c-gray-4">
{{item.privateTime}}
- </Col>
- </Row>
+ </a-col>
+ </a-row>
<div>
{{item.failStatusName}}
</div>
<div>
- <ImagePreviewGroup>
+ <a-image-preview-group>
<template v-for="(img,index) in item.imageList" :key="index">
- <Image :width="100" class="pr-10px" :src="img" />
+ <a-image :width="100" class="pr-10px" :src="img" />
</template>
- </ImagePreviewGroup>
+ </a-image-preview-group>
</div>
- </TimelineItem>
- </Timeline>
+ </a-timeline-item>
+ </a-timeline>
</div>
<!-- show-size-changer-->
<!-- show-quick-jumper-->
<!-- :show-total="total => `鍏� ${total} 鏉℃暟鎹甡"-->
- <Pagination
+ <a-pagination
class="text-right"
v-model:current="currentPage"
v-model:page-size="pageSize"
@@ -64,24 +154,42 @@
</div>
</template>
<script lang="ts" setup>
- import { Timeline,Row,Col,ImagePreviewGroup,Image,Pagination,TreeSelect } from 'ant-design-vue';
+import {
+ Timeline,
+ Row,
+ Col,
+ ImagePreviewGroup,
+ Image,
+ Pagination,
+ TreeSelect,
+} from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { applicationList } from './data';
import {cluesDynamicApi} from "@/api/clues/dynamic";
import {ref,unref,getCurrentInstance} from "vue";
import {useLoading} from "@/components/Loading";
- import {PlusCircleOutlined} from "@ant-design/icons-vue";
+ import {PlusCircleOutlined, PlusOutlined, SettingOutlined} from "@ant-design/icons-vue";
import {treeOptionsListApi} from "@/api/demo/tree";
import EventBus from "@/utils/eventBus";
- const TimelineItem = Timeline.Item;
+ import {MoreOutlined} from "@ant-design/icons-vue";
+ import {BasicHelp} from "@/components/Basic";
+ import {log} from "vxe-table";
+ import {useModal} from "@/components/Modal";
+ import ScheduleDetailModal from "@/views/clues/components/drawer/ScheduleDetail.vue";
+ import {projectList} from "@/views/clues/components/drawer/data";
+ import {cluesListApi} from "@/api/clues/table";
+ // const TimelineItem = Timeline.Item;
- const prefixCls = 'clues-tab-dynamic';
+ const prefixCls = 'customer-tab-dynamic';
+ let scheduleList = ref([] as any[]);
let dynamicList = ref([] as any[]);
let totalData = ref(0);
let currentPage = ref(1);
let pageSize = ref(10);
+
+
const handlePageChange = (current: number, size: number) => {
currentPage.value = current;
@@ -100,8 +208,75 @@
};
// let _this = getCurrentInstance();
+ let businessTitle = ref('鏂板晢鏈�');
+ let selectedBusinessTitleKeys = ref('1');
+ let businessTitleArray = ref([
+ {
+ key: '1',
+ label: '鏂板晢鏈�',
+ title: '鏂板晢鏈�',
+ },
+ {
+ key: '2',
+ label: '璁㈠崟纭',
+ title: '璁㈠崟纭',
+ },
+ {
+ key: '3',
+ label: '鏈夋剰鍚�',
+ title: '鏈夋剰鍚�',
+ },
+ {
+ key: '4',
+ label: '娴嬭瘯鏂扮殑鏈轰細',
+ title: '娴嬭瘯鏂扮殑鏈轰細',
+ },
+ ]);
+ function handleBusinessTitleClick(e){
+ Logger.log('handleBusinessTitleClick',e);
+ selectedBusinessTitleKeys.value = e?.key;
+ businessTitle.value = e?.item?.title;
+ }
+
+ // 鏃ョ▼鐩稿叧
+ const [registerScheduleModal, {openModal, setModalProps}] = useModal();
+ const openScheduleModal = () => {
+ Logger.log('鐐瑰嚮openScheduleModal');
+ EventBus.emit('openScheduleModal', {
+ title: '鏂板缓浠诲姟',
+ content: '鏂板缓浠诲姟鍐呭'
+ });
+ };
+ function handleScheduleRowClick(e) {
+ let index = e?.currentTarget?.dataset?.index;
+ Logger.log('handleScheduleRowClick', scheduleList.value[index]);
+ openModal(true, {
+ // record,
+ // isUpdate: true,
+ });
+ }
+ getCustomerScheduleList();
+ async function getCustomerScheduleList(){
+ let params = {
+ page: 1,
+ pageSize: 10,
+ };
+ try {
+ let res = await cluesListApi(params)
+ Logger.log('cluesListApi...',res);
+ // console.log(_this);
+ // _this.$set(dynamicList,res.items)
+ scheduleList.value = res.items;
+
+ } catch (e) {
+ Logger.error(e);
+ } finally {
+ }
+ }
+
+
// 鍔ㄦ�佺被鍨媡reeData
- let currentDynamicType = ref('0-0');
+ let currentDynamicType = ref('0');
let dynamicTypeTree = ref([]);
getTreeData();
async function getTreeData() {
@@ -120,17 +295,19 @@
}
// 鍔ㄦ�佸垪琛ㄥ姞杞�
- const wrapEl = ref<ElRef>(null);
+ const loadingEl = ref<ElRef>(null);
const [openWrapLoading, closeWrapLoading] = useLoading({
- target: wrapEl,
+ target: loadingEl,
props: {
tip: '鍔犺浇涓�...',
absolute: true,
},
});
// 鍔ㄦ�佸垪琛ㄦ暟鎹�
- getCluesDynamicData();
- async function getCluesDynamicData(){
+ setTimeout(()=>{
+ getCustomerDynamicList();
+ },50)
+ async function getCustomerDynamicList(){
openWrapLoading();
let params = {
page: currentPage.value,
@@ -153,9 +330,11 @@
closeWrapLoading();
}
}
+
+
</script>
<style lang="less">
- .clues-tab-dynamic {
+ .customer-tab-dynamic {
.ant-select-arrow{
color: #000;
}
diff --git a/src/views/customer/components/drawer/Tips.vue b/src/views/customer/components/drawer/Tips.vue
index a76795b..b652300 100644
--- a/src/views/customer/components/drawer/Tips.vue
+++ b/src/views/customer/components/drawer/Tips.vue
@@ -1,61 +1,29 @@
<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>
- </template>
- </Dropdown>
- </Col>
- <Col span="12" :style="'text-align:right'">
- <Tooltip title="鏂板缓鏃ョ▼">
- <PlusSquareOutlined class="cursor-pointer" style="fontSize:24px;color: #aaa"
- @click="openScheduleModal"/>
- </Tooltip>
+ <div ref="loadingEl" class="bg-gray-50 p-10px">
+ <a-divider>
+ <span class="c-gray font-size-12px">浠ヤ笅鏄巻鍙茶褰�</span>
+ </a-divider>
+ <a-card class="mb-15px" style="width: auto" v-for="item in cardList" :key="item.id">
+ <p class="tips-title">
+ <AimOutlined class="c-amber-5" />
+ 鍟嗘満"<a class="">{{item.cluesName}}</a>"宸茶繃浜嗙粨鍗曟棩鏈�
+ </p>
+ <p class="tips-content font-size-12px">
+ "<a class="">{{item.cluesName}}</a>"宸茶繃浜嗙粨鍗曟棩鏈燂紝浣嗕粛鏈粨鏉燂紙璧㈠崟/杈撳崟锛夛紝璇峰敖蹇窡杩�
+ </p>
+ <p class="tips-time">
- </Col>
- </Row>
- <BasicTable
- @register="registerTable"
- @row-click="handleScheduleRowClick"
- >
- <template #bodyCell="{ column, record }">
- <template v-if="column.key === 'cluesName'">
- <div>
- <Avatar :size="16" :style="'background-color:'+ record.color"></Avatar>
- <span class="ml-5px">
- {{ record.cluesName }}
- </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>
-
+ </p>
+ <a-flex justify="space-between">
+ <span class="c-gray font-size-12px">{{item.privateTime}}</span>
+ <a-button class="font-size-12px" type="link">缂栬緫鍟嗘満</a-button>
+ </a-flex>
+ </a-card>
+ <a-divider>
+ <span class="c-gray font-size-12px">宸叉樉绀哄叏閮ㄥ唴瀹�</span>
+ </a-divider>
</div>
+
<!-- <List :class="prefixCls" item-layout="horizontal" :data-source="projectList" :grid="{ column: 1, gutter: 12}" :pagination="pagination" >-->
<!-- <template #renderItem="{ item }">-->
<!-- <ListItem>-->
@@ -69,19 +37,18 @@
<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 {AimOutlined} from '@ant-design/icons-vue';
import {BasicArrow} from "@/components/Basic";
-import {ref} from 'vue';
+import {onMounted, ref} from 'vue';
import ScheduleDetailModal from './ScheduleDetail.vue';
-const ListItem = List.Item;
-const MenuItem = Menu.Item;
import EventBus from '@/utils/eventBus';
import {BasicTable, ColumnChangeParam, TableAction, useTable} from "@/components/Table";
-import {cluesListApi} from "@/api/clues/table";
+import {cluesDynamicApi} from "@/api/clues/dynamic";
import {getEditCellColumns, getFormConfig} from "@/views/clues/components/tableData";
import {useModal} from "@/components/Modal";
+import {useLoading} from "@/components/Loading";
const [registerScheduleModal, {openModal, setModalProps}] = useModal();
const openScheduleModal = () => {
@@ -92,93 +59,45 @@
});
};
-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 [
- registerTable,
- {
- // setLoading,
- // setProps,
- // getColumns,
- // getDataSource,
- // getRawDataSource,
- // reload,
- // getPaginationRef,
- // setPagination,
- // getSelectRows,
- // getSelectRowKeys,
- // setSelectedRowKeys,
- // clearSelectedRowKeys,
- },
-] = useTable({
- canResize: true,
- api: cluesListApi,
- // beforeFetch: (params) => {
- // console.log('beforeFetch', params);
- // params.pageNo = params.page;
- // // return Promise.resolve(params);
- // },
- showIndexColumn: false,
- columns: [
- {
- // title: '',
- // defaultHidden: true,
- dataIndex: 'cluesName',
- width: 200
- },
- {
- // title: '',
- dataIndex: 'archiveTime',
- width: 200,
- },
- ],
- // defSort: {
- // pageNo: 1,
- // pageSize: 20,
- // field: 'name',
- // order: 'ascend',
- // },
- rowKey: 'id',
- // showTableSetting: false,
- // showIndexColumn: false, // 鏄惁鏄剧ず搴忓彿鍒�
- // useSearchForm: false, // 浣跨敤鎼滅储琛ㄥ崟
- // clickToRowSelect: false,
- // formConfig: getFormConfig(), // 鎼滅储琛ㄥ崟閰嶇疆
- pagination: {
- // pageSize: 20,
- pageSizeOptions: ['10', '20', '50', '100'],
- defaultPageSize: 20,
- // showSizeChanger: true,
+let cardList = ref([] as any[]);
+// tips Loading
+const loadingEl = ref<ElRef>(null);
+const [openWrapLoading, closeWrapLoading] = useLoading({
+ target: loadingEl,
+ props: {
+ tip: '鍔犺浇涓�...',
+ absolute: true,
},
});
+// tips鍒楄〃鏁版嵁
+// 鑾峰彇瀹㈡埛鍗＄墖鏁版嵁
+setTimeout(() => {
+ getCustomerCardData();
+}, 50);
+async function getCustomerCardData(){
+ openWrapLoading();
+ let params = {
+ page: 1,
+ pageSize: 10,
+ };
+ try {
+ // cluesDynamicApi(params).then(res => {
+ //
+ // })
+ let res = await cluesDynamicApi(params)
+ Logger.log('cluesDynamicApi...',res);
+ // console.log(_this);
+ // _this.$set(dynamicList,res.items)
+ cardList.value = res.items;
-
-
-function handleScheduleRowClick(e) {
- Logger.log('handleScheduleRowClick', e);
- openModal(true, {
- // record,
- // isUpdate: true,
- });
+ } catch (e) {
+ Logger.error(e);
+ } finally {
+ closeWrapLoading();
+ }
}
-const prefixCls = 'account-center-project';
</script>
-<style lang="less" >
+<style lang="less" scoped>
</style>
diff --git a/src/views/customer/components/drawer/index.vue b/src/views/customer/components/drawer/index.vue
index a094217..a706754 100644
--- a/src/views/customer/components/drawer/index.vue
+++ b/src/views/customer/components/drawer/index.vue
@@ -154,7 +154,10 @@
background-color: @component-background;
}
.scroll-wrap{
- height: calc(100vh - 290px);
+ height: calc(100vh - 310px);
+ }
+ :deep(.scrollbar__wrap) {
+ padding: 5px !important;
}
}
</style>
--
Gitblit v1.8.0