试用期：
diff --git a/web/client/src/sections/humanAffairs/containers/salersDistribution/importSalersModal.js b/web/client/src/sections/humanAffairs/containers/salersDistribution/importSalersModal.js
new file mode 100644
index 0000000..a10cdaa
--- /dev/null
+++ b/web/client/src/sections/humanAffairs/containers/salersDistribution/importSalersModal.js
@@ -0,0 +1,272 @@
+'use strict';
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Modal, Form, Button, Notification } from '@douyinfe/semi-ui';
+import { IconUpload } from '@douyinfe/semi-icons';
+import cityData from '../../components/city.json';
+import XLSX from 'xlsx'
+//下载模板和上传文件读取
+const ImportSalersModal = props => {
+ const { dispatch, actions, onCancel, rzMembers } = props
+ const { humanAffairs } = actions;
+ const [msg, setMsg] = useState('')
+ const [loading, setLoading] = useState('')
+ const [postData, setPostData] = useState([])
+ const [allProvinces, setAllProvinces] = useState([])
+ //初始化
+ useEffect(() => {
+ let allProvinces = [];//所有省
+ cityData.map(cd => {
+ allProvinces.push(cd.name);
+ });
+ setAllProvinces(allProvinces);
+ }, []);
+
+ const confirm = () => {
+ if (postData.length) {
+ setLoading(true)
+ dispatch(humanAffairs.addSalesMemberBulk(postData)).then(res => {
+ if (res.success) {
+ onCancel()
+ }
+ setLoading(false)
+ })
+ } else {
+ Notification.warning({ content: '没有数据可以提交，请上传数据文件', duration: 2 })
+ }
+ }
+
+ const dldCsvMb = () => {
+ //表头
+ let head = "员工编号,姓名,销售区域（省/直辖市）,销售区域（市）,业务线\n"
+ //数据
+ //let data = 1 + ',' + 2 + ',' + 3 + ',' + 4 + ',' + 5
+ let templateCsv = "data:text/csv;charset=utf-8,\ufeff" + head;
+ //创建一个a标签
+ let link = document.createElement("a");
+ //为a标签设置属性
+ link.setAttribute("href", templateCsv);
+ link.setAttribute("download", "人资系统销售人员信息导入模板.csv");
+ //点击a标签
+ link.click();
+ }
+ const download = () => {
+ //dldTemplate();
+ dldCsvMb();
+ // let str = "";
+ // rule.forEach((v, i) => {
+ // str += `${v}\r\n`
+ // })
+ // dldText("填写说明.txt", str);
+ }
+
+ // const dldText = (filename, text) => {
+ // var element = document.createElement('a');
+ // element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+ // element.setAttribute('download', filename);
+
+ // element.style.display = 'none';
+ // document.body.appendChild(element);
+
+ // element.click();
+ // document.body.removeChild(element);
+ // }
+ const fileLimit = '.csv';
+
+ const getFileBlob = (url) => {
+ return new Promise((resolve, reject) => {
+ let request = new XMLHttpRequest()
+ request.open("GET", url, true)
+ request.responseType = "blob"
+ request.onreadystatechange = e => {
+ if (request.readyState == 4) {
+ if (request.status == 200) {
+ if (window.FileReader) {
+ let reader = new FileReader();
+ reader.readAsBinaryString(request.response);
+ reader.onload = event => {
+ try {
+ const { result } = event.target;
+ // 以二进制流方式读取得到整份excel表格对象
+ const workbook = XLSX.read(result, {
+ type: "binary",
+ cellDates: true,//设为true，将天数的时间戳转为时间格式
+ codepage: 936//解决了乱码问题
+ });
+ let data = []; // 存储获取到的数据
+ // 遍历每张工作表进行读取（这里默认只读取第一张表）
+ for (const sheet in workbook.Sheets) {
+ if (workbook.Sheets.hasOwnProperty(sheet)) {
+ data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
+ }
+ }
+ resolve(data);//导出数据
+ } catch (e) {
+ reject("失败");
+ }
+ }
+ }
+ }
+ }
+ }
+ request.send();
+ })
+ }
+
+ const judgeProvinces = (provinces) => {
+ let noMark = 0;
+ provinces?.split('、')?.map(p => {
+ if (allProvinces.indexOf(p) == -1) {
+ noMark++
+ }
+ })
+ return !noMark;
+ }
+
+ const judgeCities = (provinces, cities) => {
+ if (!cities) {//可以不填
+ return true;
+ }
+ let nowCities = [];
+ cityData.filter(cd => provinces?.split('、').indexOf(cd.name) != -1).map(d => {
+ d.children?.map(c => {
+ nowCities.push(c.name)
+ })
+ })
+ let noMark = 0;
+ cities?.split('、')?.map(p => {
+ if (nowCities.indexOf(p) == -1) {
+ noMark++
+ }
+ })
+ return !noMark;
+ }
+
+ const judgeNull = (value) => {
+ return value ? String(value).trim().replace(/\s*/g, "") : null;
+ }
+
+ return (
+
{
+ setMsg('')
+ setLoading(false)
+ setPostData([])
+ onCancel()
+ }}
+ >
+
+
+
+ )
+}
+
+function mapStateToProps(state) {
+ const { auth, global, MemberList } = state;
+ return {
+ user: auth.user,
+ actions: global.actions,
+ rzMembers: MemberList.data?.rows || [],
+ }
+}
+
+export default connect(mapStateToProps)(ImportSalersModal);
\ No newline at end of file
diff --git a/web/client/src/sections/humanAffairs/containers/salersDistribution/personnelDistribution.jsx b/web/client/src/sections/humanAffairs/containers/salersDistribution/personnelDistribution.jsx
new file mode 100644
index 0000000..b472776
--- /dev/null
+++ b/web/client/src/sections/humanAffairs/containers/salersDistribution/personnelDistribution.jsx
@@ -0,0 +1,350 @@
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import { connect } from 'react-redux';
+import moment from 'moment'
+import { Select, Input, Button, Popconfirm, Radio, Tooltip, Table, Pagination, Skeleton } from '@douyinfe/semi-ui';
+import SalesMemberModal from './salesMemberModal'
+import ImportSalersModal from './importSalersModal'
+import { IconSearch } from '@douyinfe/semi-icons';
+import { SkeletonScreen } from "$components";
+import '../../style.less'
+
+const PersonnelDistribution = (props) => {
+ const { dispatch, actions } = props
+ const { humanAffairs } = actions;
+ const [keywordTarget, setKeywordTarget] = useState('dep');
+ const [keyword, setKeyword] = useState('');//搜索内容
+ const [limits, setLimits] = useState()//每页实际条数
+ const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
+ const [modalV, setModalV] = useState(false);
+ const [dataToEdit, setDataToEdit] = useState(null);
+ const [tableData, setTableData] = useState([]);
+ const [importModalV, setImportModalV] = useState(false);
+ const page = useRef(query.page);
+ function seachValueChange(value) {
+ setKeyword(value)
+ }
+
+ useEffect(() => {
+ dispatch(humanAffairs.getMemberList())
+ getMemberSearchList()
+ }, []);
+
+ useEffect(() => {
+ getMemberSearchList()//查询人员列表
+ }, [query])
+
+ function getMemberSearchList() {
+ let kt = keywordTarget == 'place' ? '' : keywordTarget;
+ let k = keywordTarget == 'place' ? '' : keyword;
+ let placeSearch = keywordTarget == 'place' ? keyword : '';
+ dispatch(humanAffairs.getSalesList({ keywordTarget: kt, keyword: k, placeSearch, ...query })).then(r => {
+ if (r.success) {
+ setTableData(r.payload?.data?.rows);
+ setLimits(r.payload?.data?.count)
+ }
+ })
+ }
+
+ function handleRow(record, index) {// 给偶数行设置斑马纹
+ if (index % 2 === 0) {
+ return {
+ style: {
+ background: '#FAFCFF',
+ }
+ };
+ } else {
+ return {};
+ }
+ }
+
+ const closeAndFetch = () => {
+ setModalV(false)
+ getMemberSearchList();
+ }
+
+ const starHeader = (header) => {
+ return
+
{header}
+
+ }
+
+ const getMultis = (arrStr) => {//默认展示2个
+ return
+ {
+ arrStr.length ?
+ arrStr.map((ite, idx) => {
+ return (
+
+ {idx < 2 ?
+
+ {ite}
+
: ''
+ }
+ {
+ arrStr.length > 2 && idx == 2 ?
+
+
+ +{arrStr.length - 2}
+
+
+ : ''
+ }
+
+ )
+ }) : '-'
+ }
+
+ }
+
+ const columns = [{
+ title: '序号',
+ dataIndex: 'id',
+ key: 'id',
+ width: 60,
+ render: (text, record, index) => index + 1
+ }, {
+ title: starHeader('姓名'),
+ dataIndex: 'name',
+ key: 'name',
+ width: 80
+ },
+ {
+ title: starHeader('部门名称'),
+ dataIndex: 'department',
+ key: 'department',
+ width: 200,
+ render: (text, r, index) => {
+ let arrStr = text.map(t => t.name);
+ return getMultis(arrStr);
+ }
+ }, {
+ title: '销售区域(省/直辖市)',
+ dataIndex: 'provinces',
+ key: 'provinces',
+ width: 160,
+ render: (text, record, index) => {
+ return getMultis(text?.split('、') || []);
+ }
+ }, {
+ title: '销售区域(市)',
+ dataIndex: 'cities',
+ key: 'cities',
+ width: 160,
+ render: (text, record, index) => {
+ return text ? getMultis(text?.split('、') || []) : '-';
+ }
+ }, {
+ title: '业务线',
+ dataIndex: 'businessLines',
+ key: 'businessLines',
+ width: 120,
+ render: (text, record, index) => {
+ return text ? getMultis(text?.split('、') || []) : '-';
+ }
+ }, {
+ title: starHeader('岗位'),
+ dataIndex: 'post',
+ key: 'post',
+ width: 120,
+ render: (text, record) =>
{text || '-'}
+ }, {
+ title: starHeader('入职时间'),
+ dataIndex: 'hireDate',
+ key: 'hireDate',
+ width: 120,
+ render: (text, record) =>
{text || '-'}
+ }, {
+ title: starHeader('转正时间'),
+ dataIndex: 'regularDate',
+ key: 'regularDate',
+ width: 120,
+ render: (text, record) =>
{text || '-'}
+ }, {
+ title: starHeader('工龄'),
+ dataIndex: 'workYears',
+ key: 'workYears',
+ width: 120,
+ render: (_, r, index) => {
+ return (r.hireDate ?
{String(moment(new Date()).diff(r.hireDate, 'years', true)).substring(0, 3) + '年'} : '-')
+ },
+ }, {
+ title: '操作',
+ dataIndex: 'action',
+ width: 120,
+ render: (text, record) => {
+ return
+
onEdit(record)}>编辑
+
confirmDelete(record.pepUserId)} style={{ width: 330 }}
+ > 删除
+
+ }
+ }];
+
+ const onEdit = (data) => {
+ setModalV(true);
+ setDataToEdit(data);
+ }
+
+ const confirmDelete = (pepUserId) => {
+ dispatch(humanAffairs.delSalesMember({ pepUserId, msg: '删除销售人员信息' })).then(res => {
+ if (res.success) {
+ getMemberSearchList();
+ }
+ });
+ }
+ const scroll = useMemo(() => ({}), []);
+ return (
+
+
招聘
+
/
+
销售统计
+
/
+
销售人员分布
+
+
+
+
+
+
销售人员分布
+
DISTRIBUTION OF SALES PERSONNEL
+
+
+
+
+
+
{
+ setModalV(true);
+ setDataToEdit(null);
+ }}>
+ 新增
+
+
+
+
+
+ }
+ showClear
+ placeholder='请输入关键词搜索'
+ value={keyword}
+ style={{ width: 346 }}
+ onChange={seachValueChange}>
+
+
+
+
+
+
{ setImportModalV(true); }}>
+ 导入
+
+ {/*
+ 导出
+
*/}
+
+
+
+
+
+ 表格中带有认证标识"
+
+ "信息的为系统基础数据，来源于项企PEP、钉钉等系统，其他数据均为导入或自定义数据
+
+
+
+
+ {
+ if (sorter.key == 'userCode') {
+ if (sorter.sortOrder == 'descend') {
+ setOrder({ orderBy: 'code', orderDirection: 'DESC' })
+ } else {
+ setOrder({ orderBy: 'code', orderDirection: 'ASC' })
+ }
+ } else if (sorter.key == 'age') {
+ if (sorter.sortOrder == 'descend') {
+ setOrder({ orderBy: 'age', orderDirection: 'DESC' })
+ } else {
+ setOrder({ orderBy: 'age', orderDirection: 'ASC' })
+ }
+ } else {
+ if (sorter.sortOrder == 'descend') {
+ setOrder({ orderBy: 'hiredate', orderDirection: 'DESC' })
+ } else {
+ setOrder({ orderBy: 'hiredate', orderDirection: 'ASC' })
+ }
+ }
+ }}
+ onRow={handleRow}
+ scroll={scroll}
+ />
+
+
+
+
+
+ 共{limits}条信息
+
+
{
+ setQuery({ limit: pageSize, page: currentPage - 1 });
+ page.current = currentPage - 1
+ }}
+ />
+
+
+ {
+ peoplePro == 'noValid' ?
+
+ 没有符合条件的结果
+
:
+ peoplePro?.name ? (
+
+
+ {renderPeopleItem('姓名：', peoplePro.name)}
+
+
+
+
+
+ 所属部门：
+
+ {getMultis(arrStr)}
+
+
+
+ {renderPeopleItem('入职时间：', peoplePro.hireDate)}
+ {renderPeopleItem('岗位：', peoplePro.post)}
+
+ {renderPeopleItem('转正时间：', peoplePro.regularDate)}
+ {renderPeopleItem('工龄：', peoplePro.hireDate ? String(moment(new Date()).diff(peoplePro.hireDate, 'years', true)).substring(0, 3) + '年' : '-')}
+
+
+ ) : ('')
+ }
+
+
+
+
+
+ {label}
+
+
+ {value || '-'}
+
+
