onbus_crm.git - Gitblit

<template>
  <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>
      </a-row>
 
 
      <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>
    </a-collapse-panel>
  </a-collapse>
 
  <ScheduleDetailModal @register="registerScheduleModal"></ScheduleDetailModal>
 
</template>
<script lang="ts" setup>
import {projectList} from './data';
import {PlusSquareOutlined,FileImageFilled,PlusCircleOutlined} from '@ant-design/icons-vue';
import {BasicArrow} from "@/components/Basic";
import {ref} from 'vue';
import ScheduleDetailModal from './ScheduleDetail.vue';
 
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');
  EventBus.emit('openScheduleModal', {
    title: '新建任务',
    content: '新建任务内容'
  });
};
 
const activeKey = ref(['1']);
function addBusinessForm(event) {
  Logger.log('addBusinessForm', event);
  event.stopPropagation();
}
 
 
 
 
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,
  {
    // 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: 'id',
      width: 70
    },
    {
      title: '商机名称',
      // defaultHidden: true,
      dataIndex: 'cluesName',
      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,
  //   pageSize: 20,
  //   field: 'name',
  //   order: 'ascend',
  // },
  rowKey: 'id',
  // showTableSetting: false,
  // showIndexColumn: false, // 是否显示序号列
  // useSearchForm: false, // 使用搜索表单
  // clickToRowSelect: false,
  pagination: {
    // pageSize: 20,
    pageSizeOptions: ['10', '20', '50', '100'],
    defaultPageSize: 20,
    // showSizeChanger: 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;
  }
}
 
 
</style>