|
|
@@ -0,0 +1,233 @@
|
|
|
+<template>
|
|
|
+ <div class="customer-management">
|
|
|
+ <a-tabs v-model:activeKey="activeKey" class="tabs">
|
|
|
+ <a-tab-pane v-for="(item, index) in tabsOptions" :key="index">
|
|
|
+ <template #tab>
|
|
|
+ <span @click="item.onClick(item.params)">
|
|
|
+ <component :is="item.icon"></component>
|
|
|
+ {{ item.title }}({{ item.count }})
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ <bs-table v-bind="tableOptions"></bs-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup lang="jsx">
|
|
|
+import { ref, reactive, h, onMounted, watch } from 'vue';
|
|
|
+import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
|
|
|
+
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import { fetchTotalHeader } from '/@/api/customer-manage/index.js';
|
|
|
+
|
|
|
+
|
|
|
+const activeKey = ref(0);
|
|
|
+
|
|
|
+const tabsOptions = [
|
|
|
+ {
|
|
|
+ title: '交付中',
|
|
|
+ icon: 'AppstoreOutlined',
|
|
|
+ count: 0,
|
|
|
+ params: {
|
|
|
+ a: 1,
|
|
|
+ },
|
|
|
+ onClick: (value) => {
|
|
|
+ console.log(value);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '质保中',
|
|
|
+ icon: 'TeamOutlined',
|
|
|
+ count: 0,
|
|
|
+ params: {},
|
|
|
+ onClick: (value) => {},
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '已关闭',
|
|
|
+ count: 0,
|
|
|
+ icon: 'FileSyncOutlined',
|
|
|
+ params: {},
|
|
|
+ onClick: (value) => {},
|
|
|
+ },
|
|
|
+];
|
|
|
+const {
|
|
|
+ tableOptions,
|
|
|
+ setTablePropsValue: setValue,
|
|
|
+ getTablePropsValue: getValue,
|
|
|
+ fetchTableData,
|
|
|
+} = useBsTable({
|
|
|
+ tableOptions: {
|
|
|
+ url: '/supports/customer/queryPage',
|
|
|
+ gridOptions: {
|
|
|
+ height: 600,
|
|
|
+ loading: false,
|
|
|
+ data: [],
|
|
|
+ columns: [
|
|
|
+ // {
|
|
|
+ // type: 'seq',
|
|
|
+ // width: 80,
|
|
|
+ // },
|
|
|
+
|
|
|
+ {
|
|
|
+ field: 'customerName',
|
|
|
+ title: '项目名称',
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'customerId',
|
|
|
+ title: '项目ID',
|
|
|
+ width: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: '',
|
|
|
+ title: '项目状态',
|
|
|
+ width: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: '',
|
|
|
+ title: '合同总金额(元)',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: '',
|
|
|
+ title: '已回款总金额(元)',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: '',
|
|
|
+ title: '已回款比例(%)',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: '',
|
|
|
+ title: '未回款总金额(元)',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: '',
|
|
|
+ title: '已开票总金额(元)',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: '',
|
|
|
+ title: '未开票总金额(元)',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: '',
|
|
|
+ title: '罚款总金额(元)',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: '',
|
|
|
+ title: '形象进度(%)',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: '',
|
|
|
+ title: '合同进度(%)',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: '',
|
|
|
+ title: '产值进度(%)',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'id',
|
|
|
+ title: '项目类型',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: '',
|
|
|
+ title: '项目来源',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'customerType',
|
|
|
+ title: '参与服务商',
|
|
|
+ width: 150,
|
|
|
+ cellRender: {
|
|
|
+ name: 'CellDict',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'customerSource',
|
|
|
+ title: '参与服务商电话',
|
|
|
+ width: 150,
|
|
|
+ cellRender: {
|
|
|
+ name: 'CellDict',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'belongRegion',
|
|
|
+ title: '归属营销人员',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'customerGrade',
|
|
|
+ title: '归属营销部门',
|
|
|
+ width: 150,
|
|
|
+ cellRender: {
|
|
|
+ name: 'CellDict',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ searchConfig: {
|
|
|
+ enabled: true,
|
|
|
+ fieldSpan: 4,
|
|
|
+ fields: [
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ label: '项目名称',
|
|
|
+ component: 'a-input',
|
|
|
+ componentProps: {
|
|
|
+ placeholder: '请输入项目名称',
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ pagerConfig: {
|
|
|
+ enabled: true,
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ total: 0,
|
|
|
+ isFixed: false,
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ updateHeaderInfo();
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+const updateTabsCount = (counts) => {
|
|
|
+ counts.forEach((val, idx) => {
|
|
|
+ tabsOptions.value[idx].count = val || 0;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const updateHeaderInfo = async () => {
|
|
|
+ const headerInfo = await fetchTotalHeader();
|
|
|
+ const { customerQuantity, customerAuditQuantity, customerInvalidQuantity, customerValidQuantity } = headerInfo.data;
|
|
|
+ updateTabsCount([customerQuantity, customerAuditQuantity, customerInvalidQuantity, customerValidQuantity]);
|
|
|
+};
|
|
|
+
|
|
|
+watch(activeKey, () => {
|
|
|
+ fetchTableData();
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.customer-management {
|
|
|
+ background-color: #fff;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .tabs {
|
|
|
+ padding: 0 24px;
|
|
|
+
|
|
|
+ :deep(.anticon) {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|