From bf15dbb29d015ca1c30b1478fdd6a13032f42c37 Mon Sep 17 00:00:00 2001 From: liuyiliang Date: Mon, 24 Feb 2025 15:20:45 +0800 Subject: [PATCH] fc --- packages/examination/src/App.tsx | 6 +- .../examination/src/api/statistical/index.tsx | 10 + .../src/components/contentMain/index.js | 5 + packages/examination/src/style/common.css | 7 + .../examination/src/views/slider/index.js | 78 ++++-- .../examination/src/views/slider/menu.tsx | 30 ++- .../src/views/statistical/detail.tsx | 34 +++ .../src/views/statistical/list.tsx | 247 ++++++++++++++++++ 8 files changed, 384 insertions(+), 33 deletions(-) create mode 100644 packages/examination/src/api/statistical/index.tsx create mode 100644 packages/examination/src/views/statistical/detail.tsx create mode 100644 packages/examination/src/views/statistical/list.tsx diff --git a/packages/examination/src/App.tsx b/packages/examination/src/App.tsx index 7ef1e73..5face0d 100644 --- a/packages/examination/src/App.tsx +++ b/packages/examination/src/App.tsx @@ -1,10 +1,11 @@ import React from 'react' -import { Layout } from 'antd'; +import {Layout, Select} from 'antd'; import Header from 'views/header'; import Slider from 'views/slider'; import ContentMain from 'components/contentMain'; const { Content, Footer, Sider } = Layout; + class App extends React.Component { state = { collapsed: false, @@ -18,6 +19,9 @@ class App extends React.Component { this.setState({collapsed: value}) } + componentDidMount() { + } + render() { const { collapsed } = this.state; return ( diff --git a/packages/examination/src/api/statistical/index.tsx b/packages/examination/src/api/statistical/index.tsx new file mode 100644 index 0000000..ec94e96 --- /dev/null +++ b/packages/examination/src/api/statistical/index.tsx @@ -0,0 +1,10 @@ +import axios from '../axios'; + +export function getList(obj: any){ + console.log("1",obj) + return axios({ + url: "/ex/statistics/page", + method: "post", + data: obj + }) +} \ No newline at end of file diff --git a/packages/examination/src/components/contentMain/index.js b/packages/examination/src/components/contentMain/index.js index ec08e42..725fdb8 100644 --- a/packages/examination/src/components/contentMain/index.js +++ b/packages/examination/src/components/contentMain/index.js @@ -21,6 +21,9 @@ import Store from 'views/store_manage'; // 店铺管理 import DemoList from 'views/demo/demoList'; // demo list +import Customer from 'views/statistical/list'; +import CustomerDetail from 'views/statistical/detail'; + class ContentMain extends Component { render() { return ( @@ -35,6 +38,8 @@ class ContentMain extends Component { + + diff --git a/packages/examination/src/style/common.css b/packages/examination/src/style/common.css index 992b3ff..f8da2c1 100644 --- a/packages/examination/src/style/common.css +++ b/packages/examination/src/style/common.css @@ -159,6 +159,13 @@ body { font-weight: 600; } +.logo p{ + color: rgba(16, 16, 16, 1); + font-size: larger; + text-align: center; + font-family: PingFangSC-regular; +} + .logo img { position: absolute; width: 110px; diff --git a/packages/examination/src/views/slider/index.js b/packages/examination/src/views/slider/index.js index e5786c5..4f49868 100644 --- a/packages/examination/src/views/slider/index.js +++ b/packages/examination/src/views/slider/index.js @@ -2,14 +2,10 @@ import React from 'react' import { Menu } from 'antd'; import { Link, withRouter } from 'react-router-dom' import menuList from './menu' -import { createFromIconfontCN } from '@ant-design/icons'; +import { FolderOutlined, FileTextOutlined } from '@ant-design/icons'; const { SubMenu } = Menu; -const IconFont = createFromIconfontCN({ - scriptUrl: [ - '//at.alicdn.com/t/font_2370456_9g9eu6j06v.js', - ], -}); + class Slider extends React.Component { constructor(props) { super(props); @@ -35,7 +31,7 @@ class Slider extends React.Component { return ( - {icon && } + {title} @@ -45,40 +41,64 @@ class Slider extends React.Component { // 二级菜单 renderSubMenu = ({ key, icon, title, subs }) => { return ( - {icon && }{title}}> - { - subs && subs.map(item => { - return item.subs && item.subs.length > 0 ? this.renderSubMenu(item) : this.renderMenuItem(item) - }) + + {icon && } + {title} + } + > + {subs && + subs.map((item) => + item.subs && item.subs.length > 0 + ? this.renderSubMenu(item) + : this.renderMenuItem(item) + )} - ) - } + ); + }; handleMenu = (e) => { this.setState({ selectedKeys: [e.key] }) // console.log('menu======', e) } + // onOpenChange = (openKeys) => { + // // console.log('change=====', openKeys) + // if (openKeys.length === 0 || openKeys.length === 1) { + // this.setState({ + // openKeys + // }) + // return + // } + // + // //最新展开的菜单 + // const latestOpenKey = openKeys[openKeys.length - 1] + // if (latestOpenKey.includes(openKeys[0])) { + // this.setState({ openKeys }) + // } else { + // this.setState({ + // openKeys: [latestOpenKey] + // }) + // } + // } + onOpenChange = (openKeys) => { - // console.log('change=====', openKeys) - if (openKeys.length === 0 || openKeys.length === 1) { - this.setState({ - openKeys - }) - return - } + // 这里只控制展开的菜单项 + const latestOpenKey = openKeys[openKeys.length - 1]; - //最新展开的菜单 - const latestOpenKey = openKeys[openKeys.length - 1] - if (latestOpenKey.includes(openKeys[0])) { - this.setState({ openKeys }) + if (this.state.openKeys.includes(latestOpenKey)) { + this.setState({ + openKeys: openKeys.length === 1 ? [] : openKeys + }); } else { this.setState({ - openKeys: [latestOpenKey] - }) + openKeys + }); } - } + }; render() { const { openKeys, selectedKeys } = this.state; @@ -91,7 +111,7 @@ class Slider extends React.Component { this.props.collapsed ?
LOGO
:
-

重构项目LOGO

+

安责险系统

{/* */}
} diff --git a/packages/examination/src/views/slider/menu.tsx b/packages/examination/src/views/slider/menu.tsx index efcc6f6..73b3292 100644 --- a/packages/examination/src/views/slider/menu.tsx +++ b/packages/examination/src/views/slider/menu.tsx @@ -1,8 +1,27 @@ const menuList = [ { - title: '首页', - key: 'home', - icon: 'icon-home' + title: '统计分析看板', + key: 'statistical_analysis_dashboard', + icon: 'icon', + subs: [ + { + title: '统计动态看板', + key: 'dynamic_dashboard', + icon: 'icon', + subs: [ + { + title: '客户列表', + key: 'customer', + icon: 'icon', + }, + { + title: '服务统计', + key: 'demoList2', + icon: 'icon', + } + ] + } + ] }, { title: 'demo', @@ -77,6 +96,11 @@ const menuList = [ key: 'store', } ] + }, + { + title: '首页', + key: 'home', + icon: 'icon-home' } ] diff --git a/packages/examination/src/views/statistical/detail.tsx b/packages/examination/src/views/statistical/detail.tsx new file mode 100644 index 0000000..59b7a9d --- /dev/null +++ b/packages/examination/src/views/statistical/detail.tsx @@ -0,0 +1,34 @@ +import React from 'react' +import { useLocation } from 'react-router-dom'; +import {Breadcrumb, Descriptions} from 'antd'; + +const Detail = () => { + const location = useLocation(); + // @ts-ignore + const { record } = location.state || {}; // Access the record passed from the previous page + + if (!record) { + return
No record found!
; + } + + + return ( +
+ {/**/} + {/* {breadcrumb.map((item, index) => (*/} + {/* {item}*/} + {/* ))}*/} + {/**/} +

客户详情

+ + {record.customerNo} + {record.customerName} + {record.typePname} + {record.contacts} + {record.contactsPhone} + +
+ ); +} + +export default Detail; diff --git a/packages/examination/src/views/statistical/list.tsx b/packages/examination/src/views/statistical/list.tsx new file mode 100644 index 0000000..778fca4 --- /dev/null +++ b/packages/examination/src/views/statistical/list.tsx @@ -0,0 +1,247 @@ +import React from 'react' +import { Form, Input, Button, DatePicker, Table, Modal, Select, Descriptions} from 'antd' +import { getList } from 'api/statistical' +import Detail from 'components/order_manage/promotion_detail' + +import { dictionary } from "api/dict/index"; + +const { Option } = Select + +const { RangePicker } = DatePicker; + +interface Props { + currentId: number +} + +interface State { + listQuery: { + keyword: string, + page: number, + num: number, + activityName?: string, + memberName?: string, + mobile?: number | string, + start?: number, + end?: number + }, + order_time?: string[], + list: object[], + total: any, + loading: boolean, + detailVisible: boolean, + currentId: number, + affiliationDict: any, + manageTypeDict: any, + showDetail: boolean +} + +class Customer extends React.Component{ + formRef = React.createRef(); + constructor(props: Props) { + super(props); + this.state = { + listQuery: { + keyword: '', + page: 1, + num: 20 + }, + list: [], + total: 0, + loading: false, + detailVisible: false, + currentId: 0, + affiliationDict: undefined, + manageTypeDict: undefined, + showDetail: false + } + // this.getListApi = this.getListApi.bind(this) + } + componentDidMount() { + this.getListApi(this.state.listQuery) + this.getDict() + } + // 列表接口 + getListApi(listQuery: object) { + this.setState({ loading: true }); + getList(listQuery).then(res => { + this.setState({ + loading: false, + list: res.data.rows, + total: res.data.total + }) + }).catch(() => { }) + } + getDict() { + dictionary('affiliation').then((res) => { + if(res.data){ + this.setState({ affiliationDict: res.data }) + } + }) + dictionary('manage_type').then((res) => { + if(res.data){ + this.setState({ manageTypeDict: res.data }) + } + }) + } + // handleDetail(text: any, record: any) { + // // console.log(text) + // // console.log(record) + // this.setState({ + // detailVisible: true, + // currentId: text.orderId, + // showDetail: true + // }) + // } + handleDetail(record: any) { + // @ts-ignore + const { history } = this.props; + history.push({ + pathname: '/customerDetail', + state: { record }, + }); + } + + render() { + const onFinish = (values: object) => { + const { customerNo, customerName, typePname, contacts, contactsPhone } = JSON.parse(JSON.stringify(values)) + const _listQuery = { ...this.state.listQuery, customerNo, customerName, typePname, contacts, contactsPhone } + this.setState({ listQuery: _listQuery }) + this.getListApi(this.state.listQuery) + // console.log(this.state.listQuery) + } + const onFinishFailed = (errorInfo: object) => { + console.log('failes', errorInfo) + } + const columns: any = [ + { title: '客户编号', dataIndex: 'customerNo', key: 'customerNo', align: 'center', width: 180 }, + { title: '企业名称', dataIndex: 'customerName', key: 'customerName', align: 'center', width: 150 }, + { title: '行业分类', dataIndex: 'typePname', key: 'typePname', align: 'center', width: 120 }, + { title: '企业联系人', dataIndex: 'contacts', key: 'contacts', align: 'center', width: 120 }, + { title: '企业联系电话', dataIndex: 'contactsPhone', key: 'contactsPhone', align: 'center', width: 120 }, + { + title: '操作', + key: 'operation', + align: 'center', + fixed: 'right', + width: 100, + // render: (text: any, record: any) =>

{ this.handleDetail(text, record) }}>查看

, + render: (text: any, record: any) =>

{ this.handleDetail(record) }}>查看

, + } + ]; + // 分页切换 + const changePage = (current: number, pageSize?: number) => { + const query = { ...this.state.listQuery, page: current, num: pageSize || 20 } + console.log('query', query) + setTimeout(() => { + this.setState({ listQuery: query }) + this.getListApi(this.state.listQuery) + }, 0) + } + + // 多少每页 + const selectchange = (page: number, num: number) => { + const query = { ...this.state.listQuery, page, num } + this.setState({ listQuery: query }) + this.getListApi(query); + } + + // 详情model + const handleCancel = () => { + this.setState({ detailVisible: false }) + + }; + + const onReset = () => { + const form = this.formRef.current; + // 获取字段的当前值 + const keyword = form.getFieldValue('keyword'); + const affiliation = form.getFieldValue('affiliation'); + const manageType = form.getFieldValue('manageType'); + + console.log('Current values before reset:', keyword, affiliation, manageType); + + // 清空字段值 + form.resetFields(); + }; + + const { list, loading, affiliationDict, manageTypeDict } = this.state; + return ( +
+ {/* {JSON.stringify(this.state.listQuery)} */} +
查询条件
+
+
+ + + + + + + + + + + + + + + +
+
+ `共 ${total} 条`, + onShowSizeChange: selectchange, + onChange: changePage + }} /> + {/* 查看详情 */} + + 关闭 + + ]}> + + + + ) + } +} + +export default Customer; \ No newline at end of file