|
|
@@ -1,12 +1,252 @@
|
|
|
<template>
|
|
|
- <div class="">
|
|
|
-
|
|
|
- </div>
|
|
|
+ <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 }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ <bs-table v-bind="tableOptions">
|
|
|
+ <!-- <template #searchRight>
|
|
|
+ <div>
|
|
|
+ <a-button type="primary" @click="openCuleDrawer">
|
|
|
+ <span>新增客户登记</span>
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ </template> -->
|
|
|
+ </bs-table>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
-<script setup >
|
|
|
-import {ref,reactive} from "vue"
|
|
|
+<script setup lang="jsx">
|
|
|
+import { ref, reactive } from "vue"
|
|
|
+import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
|
|
|
+import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
|
|
|
+const activeKey = ref(0)
|
|
|
+const tabsOptions = [
|
|
|
+ {
|
|
|
+ title: '全部',
|
|
|
+ icon: 'AppstoreOutlined',
|
|
|
+ params: {
|
|
|
+ a: 1
|
|
|
+ },
|
|
|
+ onClick: (value) => {
|
|
|
+ console.log(value);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '客户列表',
|
|
|
+ icon: 'TeamOutlined',
|
|
|
+ params: {
|
|
|
+
|
|
|
+ },
|
|
|
+ onClick: (value) => {
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '审核中',
|
|
|
+ icon: 'FileSyncOutlined',
|
|
|
+ params: {
|
|
|
+
|
|
|
+ },
|
|
|
+ onClick: (value) => {
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '无效客户',
|
|
|
+ icon: 'UserDeleteOutlined',
|
|
|
+ params: {
|
|
|
+
|
|
|
+ },
|
|
|
+ onClick: (value) => {
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+]
|
|
|
+const {
|
|
|
+ tableOptions,
|
|
|
+ setTablePropsValue: setValue,
|
|
|
+ getTablePropsValue: getValue,
|
|
|
+} = useBsTable({
|
|
|
+ tableOptions: {
|
|
|
+ // url:''
|
|
|
+ gridOptions: {
|
|
|
+ loading: false,
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ type: 'seq',
|
|
|
+ width: 80,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'id',
|
|
|
+ title: '客户名称',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ title: '客户ID',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name1',
|
|
|
+ title: '客户地址',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name2',
|
|
|
+ title: '客户类型',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ title: '客户来源',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ title: '是否合作项目',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ title: '合作金额(元)',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ title: '操作人',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ title: '操作时间',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ title: '项目类型',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ title: '工程属性',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ title: '业务类型',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ title: '归属营销经理',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ title: '归属营销部门',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ title: '创建人',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ title: '创建时间',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // fixed: 'right',
|
|
|
+ cellRender: {
|
|
|
+ name: 'CellOption',
|
|
|
+ extraProps: {
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ title: '查看详情',
|
|
|
+ code: 'view',
|
|
|
+ display: ({ row }) => {
|
|
|
+ return DISPLAY_STATE.VISIBLE;
|
|
|
+ },
|
|
|
+ disabled({ row }) {
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ onClick({ row }) { },
|
|
|
+ extraProps: {},
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ searchConfig: {
|
|
|
+ enabled: true,
|
|
|
+ fieldSpan: 4,
|
|
|
+ fields: [
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ label: '客户名称',
|
|
|
+ component: 'a-input',
|
|
|
+ componentProps: {
|
|
|
+ placeholder: '请输入客户名称',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ label: '客户地址',
|
|
|
+ component: 'a-input',
|
|
|
+ componentProps: {
|
|
|
+ placeholder: '请输入客户地址',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'name',
|
|
|
+ label: '客户类型',
|
|
|
+ component: 'a-select',
|
|
|
+ componentProps: {
|
|
|
+ placeholder: '请输入客户类型',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ onSearch() {
|
|
|
+ fetchTableData();
|
|
|
+ },
|
|
|
+ onReset() {
|
|
|
+ fetchTableData();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ pagerConfig: {
|
|
|
+ enabled: true,
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
+ toolbarConfig: {
|
|
|
+ enable: true,
|
|
|
+ displayToolbar: DISPLAY_STATE.VISIBLE,
|
|
|
+ leftButtons: [{
|
|
|
+ code: 'btn1',
|
|
|
+ title: '新客户登记',
|
|
|
+ props: {
|
|
|
+ type: 'primary',
|
|
|
+ disabled: false,
|
|
|
+ onClick(event) {
|
|
|
+ message.success('ok');
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ // toolbarConfig: {
|
|
|
+ // onRefresh() {
|
|
|
+ // fetchTableData();
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ },
|
|
|
+});
|
|
|
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+.customer-management {
|
|
|
+ background-color: #fff;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .tabs {
|
|
|
+ padding: 0 24px;
|
|
|
|
|
|
+ :deep(.anticon) {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
lirenjie