feat:完善客户Drawer详情

Sanakey

6 天以前 cb165187ddcf5d9cfd8aad97a2868d0343b14bd9

 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>