CRM源码下载-客户管理系统源码PHP全开源

八卦谈佚名 ▪ 2022-12-30 18:44:49

CRM或客户关系管理系统是管理与客户关系的好方法。这是一个很好的了解工具，也是一种纯粹的乐趣。

CRM源码下载及演示站：c.xsymz.icu

在这篇文章中，我们将讨论如何使用React.js创建一个CRM应用程序，材料UI，我们也将使用其他集成，如Asana创建一个票，当我们的应用程序上创建一个谷歌表，每当交易添加到用户。

建立反应

让我们首先使用create-react-app创建一个样板

npx create-react-app crm-app

安装材料界面

我们将使用材质UI作为一个UI库。它加快了开发速度，因为我们不需要手动使用太多CSS。

创建一个ContentTable组件

我们正在使用一个由材质UI组成的表格组件来快速建立一个支持分页的表格，我们将使用自定义分页操作，你可以在这里阅读更多关于它的信息。这会给我们一个单独的分量。它处理分页，为了简单起见，我们将把该函数提取到另一个组件中。

要创建第一个组件，请在src目录中创建一个目录，并将其称为components。继续在' components '中创建另一个目录，我们将其命名为ContentTable，我们将在其中创建一个同名的文件ContentTable.js。

const customers = [

{

id: 1,

email: "xcollier@goodwin.com",

phone: "+1-267-551-8666",

company: "Larkin Group",

label: "Marketing",

{

id: 2,

email: "stokes.hubert@hotmail.com",

phone: "+1-580-977-4361",

company: "Bednar-Sawayn",

label: "Newsletter",

{

id: 3,

email: "diana45@hotmail.com",

phone: "+1-202-918-2132",

company: "Rolfson and Sons ",

label: "Ads",

{

id: 4,

email: "ctromp@kassulke.info",

phone: "+1-215-480-3687",

company: "Wisoky, Windler and Nienow",

label: "Newsletter",

{

id: 5,

email: "voreilly@yahoo.com",

phone: "+1-203-883-5460",

company: "Schmidt, Streich and Schuster",

label: "Ads",

];

src /组件/ ListCustomer / ListCustomer.js

并且，将从Material UI的文档中复制表的代码，我们将通过我们的静态数组来填充表中的数据。

import { React, useState } from "react";

import {

Table,

TableBody,

TableContainer,

TableFooter,

TablePagination,

TableRow,

Paper,

TableCell,

TableHead,

} from "@mui/material";

const customers = [

{

id: 1,

email: "xcollier@goodwin.com",

phone: "+1-267-551-8666",

company: "Larkin Group",

label: "Marketing",

{

id: 2,

email: "stokes.hubert@hotmail.com",

phone: "+1-580-977-4361",

company: "Bednar-Sawayn",

label: "Newsletter",

{

id: 3,

email: "diana45@hotmail.com",

phone: "+1-202-918-2132",

company: "Rolfson and Sons ",

label: "Ads",

{

id: 4,

email: "ctromp@kassulke.info",

phone: "+1-215-480-3687",

company: "Wisoky, Windler and Nienow",

label: "Newsletter",

{

id: 5,

email: "voreilly@yahoo.com",

phone: "+1-203-883-5460",

company: "Schmidt, Streich and Schuster",

label: "Ads",

];

const ContentTable = () => {

const [page, setPage] = useState(0);

const [rowsPerPage, setRowsPerPage] = useState(5);

const emptyRows =

page > 0 ? Math.max(0, (1 + page) * rowsPerPage - customers.length) : 0;

const handleChangePage = (event, newPage) => {

setPage(newPage);

};

const handleChangeRowsPerPage = (event) => {

setRowsPerPage(parseInt(event.target.value, 10));

setPage(0);

};

return (

<TableCell

align="left"

sx={{

backgroundColor: "black",

color: "white",

borderRight: "1px solid white",

}}

Name

</TableCell>

<TableCell

align="left"

sx={{

backgroundColor: "black",

color: "white",

borderRight: "1px solid white",

}}

Company

</TableCell>

<TableCell

align="left"

sx={{

backgroundColor: "black",

color: "white",

borderRight: "1px solid white",

}}

</TableCell>

<TableCell

align="left"

sx={{

backgroundColor: "black",

color: "white",

borderRight: "1px solid white",

}}

Phone

</TableCell>

</TableRow>

</TableHead>

{customers &&

(rowsPerPage > 0

? customers.slice(

page * rowsPerPage,

page * rowsPerPage + rowsPerPage

)

: customers

).map((row, index) => (

<TableCell

component="th"

scope="row"

sx={{ width: 160, borderRight: "1px solid black" }}

{row.name}

</TableCell>

<TableCell

sx={{ width: 160, borderRight: "1px solid black" }}

align="left"

{row.company}

</TableCell>

<TableCell

sx={{ width: 160, borderRight: "1px solid black" }}

align="left"

{row.email}

</TableCell>

{row.phone}

</TableCell>

</TableRow>

))}

{emptyRows > 0 && (

</TableRow>

)}

</TableBody>

<TablePagination

rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}

colSpan={3}

count={customers}

rowsPerPage={rowsPerPage}

page={page}

SelectProps={{

inputProps: {

"aria-label": "rows per page",

native: true,

}}

onPageChange={handleChangePage}

onRowsPerPageChange={handleChangeRowsPerPage}

ActionsComponent={TablePaginationActions}

</TableRow>

</TableFooter>

</Table>

</TableContainer>

);

};

export default ContentTable;

src /组件/ ContentTable / ContentTable.js

上面的代码会抱怨TablePaginationActions是未定义的，所以让我们处理它。

接下来，我们将创建一个实用组件，它将帮助我们进行分页，材质UI使用它作为一个演示，但提取它的外部使ContentTable更干净。

在componenets中创建一个目录，命名为Pagination，并在其中创建一个index.js文件。

import { React } from "react";

import PropTypes from "prop-types";

import { useTheme } from "@mui/material/styles";

import { Box, IconButton } from "@mui/material";

import FirstPageIcon from "@mui/icons-material/FirstPage";

import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";

import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";

import LastPageIcon from "@mui/icons-material/LastPage";

export const TablePaginationActions = (props) => {

const theme = useTheme();

const { count, page, rowsPerPage, onPageChange } = props;

const handleFirstPageButtonClick = (event) => {

onPageChange(event, 0);

};

const handleBackButtonClick = (event) => {

onPageChange(event, page - 1);

};

const handleNextButtonClick = (event) => {

onPageChange(event, page + 1);

};

const handleLastPageButtonClick = (event) => {

onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));

};

return (

<IconButton

onClick={handleFirstPageButtonClick}

disabled={page === 0}

aria-label="first page"

{theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}

</IconButton>

<IconButton

onClick={handleBackButtonClick}

disabled={page === 0}

aria-label="previous page"

{theme.direction === "rtl" ? (

) : (

)}

</IconButton>

<IconButton

onClick={handleNextButtonClick}

disabled={page >= Math.ceil(count / rowsPerPage) - 1}

aria-label="next page"

{theme.direction === "rtl" ? (

) : (

)}

</IconButton>

<IconButton

onClick={handleLastPageButtonClick}

disabled={page >= Math.ceil(count / rowsPerPage) - 1}

aria-label="last page"

{theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}

</IconButton>

</Box>

);

};

TablePaginationActions.propTypes = {

onPageChange: PropTypes.func.isRequired,

page: PropTypes.number.isRequired,

rowsPerPage: PropTypes.number.isRequired,

};

src /组件/分页/ index.js

现在我们可以在ContentTable组件中导入Pagination组件，错误就会消失。最终结果应该是这样的

创建一个模态组件

现在我们的表格已经准备好了，让我们来看看模态组件，我们想要这个模态在用户点击表格中的任何一行时弹出。我们将使用材质UI的模态组件，你可以在这里阅读更多

在模态中，我们需要3列:

第一列将显示关于特定客户的更多信息

第二列将包含注释功能，用户可以在此给客户留下注释。

第三栏是一个功能，为用户添加交易，并在Asana上创建一个任务。

就像这样

import { React } from "react";

import { styled } from "@mui/material/styles";

import { Typography, Fade, Modal, Grid, Paper, Backdrop } from "@mui/material";

const Item = styled(Paper)(({ theme }) => ({

...theme.typography.body2,

padding: theme.spacing(1),

textAlign: "center",

color: theme.palette.text.secondary,

boxShadow: "none",

}));

export default function Modals() {

return (

<p>

<Modal

aria-labelledby="transition-modal-title"

aria-describedby="transition-modal-description"

open={open}

closeAfterTransition

BackdropComponent={Backdrop}

BackdropProps={{

timeout: 500,

}}

<Grid

container

spacing={1}

sx={{

width: "95%",

height: "95%",

backgroundColor: "white",

position: "absolute",

top: "4%",

left: "3%",

}}

Name

</Typography>

Company

</Typography>

Phone

</Typography>

</Typography>

Label

</Typography>

</Grid>

<Grid

item

xs={6}

sx={{ backgroundColor: "lightgray", padding: "5px" }}

Notes

</Typography>

</Item>

</Grid>

<Item>

Deals

</Typography>

Track the revenue opportunities associated with this record

</Typography>

</Item>

Tickets

</Typography>

Track the customer requests associated with this record

</Typography>

</Item>

</Grid>

</Fade>

</Modal>

</p>

);

}

src /组件/模态/ Modal.js

我们大量利用材质UI的网格布局来制作这个列结构，你可以在这里获得更多的阅读

最终结果是这样的

整合CRM有很多好处，从加强你的营销努力到提供一个个性化的访客资料。这是一个极好的工具，可以促进你与客户的关系。最重要的是，它提供了一致的信息，以提高您的转化率。

本文禁止转载或摘编