feat:完善客户Drawer详情

Sanakey

6 天以前 cb165187ddcf5d9cfd8aad97a2868d0343b14bd9

 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>-->
  <!--&lt;!&ndash;    <template v-for="item in projectList" :key="item.title"></template>&ndash;&gt;-->
  <!--  </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>