OAManage.git - Gitblit

			@@ -1,164 +1,664 @@
			import { postIdentityLoginLoginOa } from '@/services/WebApi/login';
			import { postOaRoleGetRoleList } from '@/services/WebApi/oaRole';
			import { postOaStaffGetStaffList, postOaStaffNewStaff } from '@/services/WebApi/oaStaff';
			import { DownOutlined } from '@ant-design/icons';
			import { PageContainer } from '@ant-design/pro-components';
			import { useModel } from '@umijs/max';
			import { Card, theme } from 'antd';
			import React from 'react';

			/**
			* 每个单独的卡片，为了复用样式抽成了组件
			* @param param0
			* @returns
			*/
			const InfoCard: React.FC<{
			title: string;
			index: number;
			desc: string;
			href: string;
			}> = ({ title, href, index, desc }) => {
			const { useToken } = theme;

			const { token } = useToken();

			return (
			<div
			style={{
			backgroundColor: token.colorBgContainer,
			boxShadow: token.boxShadow,
			borderRadius: '8px',
			fontSize: '14px',
			color: token.colorTextSecondary,
			lineHeight: '22px',
			padding: '16px 19px',
			minWidth: '220px',
			flex: 1,
			}}
			>
			<div
			style={{
			display: 'flex',
			gap: '4px',
			alignItems: 'center',
			}}
			>
			<div
			style={{
			width: 48,
			height: 48,
			lineHeight: '22px',
			backgroundSize: '100%',
			textAlign: 'center',
			padding: '8px 16px 16px 12px',
			color: '#FFF',
			fontWeight: 'bold',
			backgroundImage:
			"url('https://gw.alipayobjects.com/zos/bmw-prod/daaf8d50-8e6d-4251-905d-676a24ddfa12.svg')",
			}}
			>
			{index}
			</div>
			<div
			style={{
			fontSize: '16px',
			color: token.colorText,
			paddingBottom: 8,
			}}
			>
			{title}
			</div>
			</div>
			<div
			style={{
			fontSize: '14px',
			color: token.colorTextSecondary,
			textAlign: 'justify',
			lineHeight: '22px',
			marginBottom: 8,
			}}
			>
			{desc}
			</div>
			<a href={href} target="_blank" rel="noreferrer">
			了解更多 {'>'}
			</a>
			</div>
			);
			};

			import { history, useModel } from '@umijs/max';
			import { Button, Col, DatePicker, Divider, Form, Input, Modal, Radio, Row, Select, Space, Tree } from 'antd';
			import TextArea from 'antd/es/input/TextArea';
			import { Router } from 'express';
			import React, { useEffect, useState } from 'react';
			import { flushSync } from 'react-dom';
			import moment from 'moment';
			import { postOaJobLevelGetJobLevelList } from '@/services/WebApi/oaJobLevel';
			import { postOaJobGetJobList } from '@/services/WebApi/oaJob';
			import { postOaDepartmentGetDepartmentList } from '@/services/WebApi/oaDepartment';
			import { postOaJobPositionGetJobPositionList } from '@/services/WebApi/oaJobPosition';
			const Welcome: React.FC = () => {
			const { token } = theme.useToken();
			const { initialState } = useModel('@@initialState');
			const [treeData, setTreeData] = useState([]);
			const [expandedKeys, setExpandedKeys] = useState([]);
			const { initialState, setInitialState, refresh } = useModel('@@initialState');
			const [dialogTitle, setDialogTitle] = useState('新建用户');
			const [addDialogVisible, setAddDialogVisible] = useState(false);
			const [birthday, setBirthday] = useState("")
			const [formRef] = Form.useForm();
			const [currentRoleId, setCurrentRoleId] = useState('');
			const [jobList, setJobList] = useState([]);
			const [oaJobLevelList, setOaJobLevelList] = useState([]);
			const [deplist, setDepList] = useState([]);
			const [jobPositionList, setJobPositionList] = useState([]);

			const getStaffList = async (roleList) => {
			const res = await postOaStaffGetStaffList({ start: 0, size: 100, orgId: 5 });
			const staffList = res.datas.map((item: any) => {
			return {
			key: item.id + 'staff',
			title: item.name,
			roleId: item.role?.id,
			...item,
			};
			});
			for (let i = 0; i < roleList.length; i++) {
			const item = roleList[i];
			item.children = staffList.filter((staff) => staff.roleId === item.id);
			if (item.children && item.children.length > 0) {
			item.children = item.children.map((staff) => {
			return {
			...staff,
			parent: item,
			};
			});
			}
			}
			console.log(roleList, 'roleList');

			setTreeData(roleList);
			};
			const getRoleList = async () => {
			const res = await postOaRoleGetRoleList({ start: 0, size: 100, orgId: 4 });
			if (res && res.datas.length > 0) {
			const treeRoles = res.datas.map((item: any) => {
			return {
			key: item.id,
			title: item.name,
			children: [],
			...item,
			};
			});

			const keyList = treeRoles.map((item) => item.key);
			setExpandedKeys(keyList);
			getStaffList(treeRoles);
			}
			};

			const selecStaff = (id, parent) => {
			postIdentityLoginLoginOa({ staffId: id }).then((res) => {
			flushSync(() => {
			setInitialState((s: any) => ({
			...s,
			selectRole: parent,
			}));
			});
			// setInitialState({
			// ...initialState,
			// selectRole: parent,
			// });

			refresh();
			history.push('/organizationDesign');
			});
			};

			const addStaff = (id, parent) => {
			setAddDialogVisible(true);
			setDialogTitle('新建用户');
			setCurrentRoleId(id);
			}

			const MyTreeNode = ({ title, children, id, parent }) => {
			return (
			<div style={{ width: '200px', display: 'flex', justifyContent: 'space-between' }}>
			<span>{title}</span>

			{children ? (
			<span
			onClick={() => {
			addStaff(id, parent);
			}}
			style={{ color: '#1890ff', cursor: 'pointer' }}
			>
			新增用户
			</span>
			) : (
			<span
			onClick={() => {
			selecStaff(id, parent);
			}}
			style={{ color: '#1890ff', cursor: 'pointer' }}
			>
			操作
			</span>
			)}
			</div>
			);
			};

			const handleOk = () => {

			formRef.validateFields().then((values) => {

			for (const key in values) {
			if (values[key] === undefined) {
			values[key] = ""
			}
			if (values[key] != null && typeof values[key] === 'object') {
			values[key] = moment(values[key]).format('YYYY-MM-DD');
			}
			}
			const params = {
			...values,
			sex: "1",
			isOnJob: true,
			roleId: currentRoleId,
			PinYin: "pinyin",
			positionSalary: 2,
			performanceRates: 2,
			performanceSalary: 2,
			publicRates: 2,
			socialRates: 2,
			orgId: 5
			}

			postOaStaffNewStaff(params).then((res) => {
			setAddDialogVisible(false);
			getRoleList();
			})
			})
			}
			const handleCancel = () => {
			console.log('OK');
			setAddDialogVisible(false);
			}

			const getJobPositionList = async () => {
			const res = await postOaJobPositionGetJobPositionList({ start: 0, size: 100, orgId: 5 });
			const options = res.datas.map((item) => {
			return {
			value: item.id,
			label: item.name,
			}
			})
			setJobPositionList(options);
			console.log(res, "getDepList");
			}
			const getDepList = async () => {
			const res = await postOaDepartmentGetDepartmentList({ start: 0, size: 100, orgId: 5 });
			const options = res.datas.map((item) => {
			return {
			value: item.id,
			label: item.name,
			}
			})
			setDepList(options);
			console.log(res, "getDepList");
			}
			const getJobLevelList = async () => {
			const res = await postOaJobLevelGetJobLevelList({ start: 0, size: 100, orgId: 5 });
			const options = res.datas.map((item) => {
			return {
			value: item.id,
			label: item.name,
			}
			})
			setOaJobLevelList(options);
			console.log(res, "getJobLevelList");
			}
			useEffect(() => {
			getRoleList();
			getJobLevelList();
			getJobList();
			getDepList();
			getJobPositionList();
			console.log(initialState, "initialState");

			}, []);


			const getJobList = () => {
			postOaJobGetJobList({ start: 0, size: 100, orgId: 5 }).then((res) => {

			const options = res.datas.map((item) => {
			return {
			value: item.id,
			label: item.name,
			}
			})
			setJobList(options);
			})
			}
			return (
			<PageContainer>
			<Card
			style={{
			borderRadius: 8,
			}}
			styles={{
			body: {
			backgroundImage:
			initialState?.settings?.navTheme === 'realDark'
			? 'background-image: linear-gradient(75deg, #1A1B1F 0%, #191C1F 100%)'
			: 'background-image: linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%)',
			},
			}}
			<div>
			<Tree
			style={{ width: '300px' }}
			titleRender={(nodeData) => <MyTreeNode {...nodeData} />}
			defaultExpandAll
			expandedKeys={expandedKeys}
			showLine
			switcherIcon={<DownOutlined />}
			treeData={treeData}
			/>
			</div>

			<Modal
			title={dialogTitle}
			width={900}
			onOk={handleOk}
			open={addDialogVisible}
			// confirmLoading={confirmLoading}
			centered={true}
			onCancel={handleCancel}
			>
			<div
			style={{
			backgroundPosition: '100% -30%',
			backgroundRepeat: 'no-repeat',
			backgroundSize: '274px auto',
			backgroundImage:
			"url('https://gw.alipayobjects.com/mdn/rms_a9745b/afts/img/A*BuFmQqsB2iAAAAAAAAAAAAAAARQnAQ')",
			}}
			>
			<div
			style={{
			fontSize: '20px',
			color: token.colorTextHeading,
			}}
			>
			欢迎使用 Ant Design Pro
			</div>
			<p
			style={{
			fontSize: '14px',
			color: token.colorTextSecondary,
			lineHeight: '22px',
			marginTop: 16,
			marginBottom: 32,
			width: '65%',
			}}
			>
			Ant Design Pro 是一个整合了 umi，Ant Design 和 ProComponents
			的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
			</p>
			<div
			style={{
			display: 'flex',
			flexWrap: 'wrap',
			gap: 16,
			}}
			>
			<InfoCard
			index={1}
			href="https://umijs.org/docs/introduce/introduce"
			title="了解 umi"
			desc="umi 是一个可扩展的企业级前端应用框架,umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。"
			/>
			<InfoCard
			index={2}
			title="了解 ant design"
			href="https://ant.design"
			desc="antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。"
			/>
			<InfoCard
			index={3}
			title="了解 Pro Components"
			href="https://procomponents.ant.design"
			desc="ProComponents 是一个基于 Ant Design 做了更高抽象的模板组件，以一个组件就是一个页面为开发理念，为中后台开发带来更好的体验。"
			/>
			</div>
			<div style={{ height: '80vh', overflow: 'auto' }}>
			<Form form={formRef} layout="vertical" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
			<Row>
			<Col span={12}>
			<Form.Item label="员工姓名" name="name" rules={[{ required: true, message: '请输入员工姓名' }]}>
			<Input />
			</Form.Item>
			</Col>
			<Col span={12}>
			<Form.Item label="部门名称" name="departmentId">
			<Select
			options={deplist}
			/>
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="身份证号" name="idNum" rules={[{ required: true, message: '请输入员工姓名' }]}>
			<Input />
			</Form.Item>
			</Col>
			<Col span={12}>
			<Form.Item label="性别" name="sex">
			<Select
			defaultValue="1"
			options={[
			{
			value: '0',
			label: '女',
			},
			{
			value: '1',
			label: '男',
			},
			]}
			/>
			</Form.Item>
			</Col>
			</Row>

			<Row>
			<Col span={12}>
			<Form.Item label="籍贯" name="nativePlace">
			<Input />
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="雇佣类型" name="employmentType">
			<Select
			defaultValue="1"
			options={[
			{
			value: '0',
			label: '兼职',
			},
			{
			value: '1',
			label: '全职',
			},
			]}
			/>
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="出生年月" name="birthday">
			<DatePicker value={birthday} />
			</Form.Item>
			</Col>
			<Col span={12}>
			<Form.Item label="民族" name="race">
			<Select
			defaultValue="1"
			options={[
			{
			value: '1',
			label: '汉族',
			},
			{
			value: '2',
			label: '藏族',
			},
			]}
			/>
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="婚姻状况" name="marriageStatus">
			<Select
			defaultValue="1"
			options={[
			{
			value: '1',
			label: '已婚',
			},
			{
			value: '2',
			label: '未婚',
			},
			]}
			/>
			</Form.Item>
			</Col>
			<Col span={12}>
			<Form.Item label="政治面貌" name="politicalStatus">
			<Select
			defaultValue="1"
			options={[
			{
			value: '1',
			label: '群众',
			},
			{
			value: '2',
			label: '党员',
			},
			]}
			/>
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="毕业院校" name="graduateSchool">
			<Input />
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="专业" name="major">
			<Input />
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="职称" name="title">
			<Select
			defaultValue="1"
			options={[
			{
			value: '1',
			label: '教授',
			},
			{
			value: '2',
			label: '老师',
			},
			]}
			/>
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="工种" name="jobType">
			<Select
			defaultValue="1"
			options={[
			{
			value: '1',
			label: '技工',
			},
			{
			value: '2',
			label: '工程师',
			},
			]}
			/>
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="文化程度" name="educationLevel">
			<Select
			defaultValue="1"
			options={[
			{
			value: '1',
			label: '初中',
			},
			{
			value: '2',
			label: '高中',
			},
			]}
			/>
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="手机" name="mobilePhone">
			<Input />
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="联系地址" name="contactAddress">
			<Input />
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="电子邮件" name="eMail">
			<Input />
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="家庭住址" name="homeAddress">
			<Input />
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="联系电话" name="phone">
			<Input />
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={24}>
			<Form.Item label="备注" name="remarks">
			<TextArea rows={4} />
			</Form.Item>
			</Col>
			</Row>
			<Divider orientation="left">岗位信息</Divider>
			<Row>
			<Col span={12}>
			<Form.Item label="工号" name="jobNumber">
			<Input />
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="所在城市" name="city">
			<Select
			defaultValue="1"
			options={[
			{
			value: '1',
			label: '上海',
			},
			{
			value: '2',
			label: '北京 ',
			},
			]}
			/>
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="岗位" name="station">
			<Select
			options={jobPositionList}
			/>
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="是否在职" name="isOnJob">
			<Radio.Group
			options={[
			{ value: 1, label: '离职' },
			{ value: 2, label: '在职' },
			]}
			/>
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="入职时间" name="joinDate">
			<DatePicker format="YYYY-MM-DD" />
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="离职时间" name="offJobDate">
			<DatePicker format="YYYY-MM-DD" />
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={24}>
			<Form.Item label="是否退休" name="isRetire">
			<Radio.Group
			options={[
			{ value: 1, label: '否' },
			{ value: 2, label: '是' },
			]}
			/>
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="参加工作时间" name="beginWorkDate">
			<DatePicker format="YYYY-MM-DD" />
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="带薪休假天数" name="payDayOffs">
			<Input />
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="职位" name="jobId">
			<Select
			options={jobList}
			/>
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="职级" name="jobPositionId">
			<Select
			options={oaJobLevelList}
			/>
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="基本工资" name="name333">
			<Input />
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="职级工资" name="positionSalary">
			<Input />
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="绩效系数" name="performanceRates">
			<Input />
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="绩效工资" name="performanceSalary">
			<Input />
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="社保基数" name="socialRates">
			<Input />
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="公积金基数" name="publicRates">
			<Input />
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="绩效等级" name="performanceLevel">
			<Select
			defaultValue="1"
			options={[
			{
			value: '1',
			label: '1',
			},
			]}
			/>
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="晋升潜力" name="promoteLevel">
			<Select
			defaultValue="1"
			options={[
			{
			value: '1',
			label: 'A',
			},
			]}
			/>
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={12}>
			<Form.Item label="社保账户" name="socialAccount">
			<Input />
			</Form.Item>
			</Col>

			<Col span={12}>
			<Form.Item label="银行账号" name="bankAccount">
			<Input />
			</Form.Item>
			</Col>
			</Row>
			</Form>
			</div>
			</Card>
			</Modal>
			</PageContainer>
			);
			};