tsg-web/src/views/rcgl/jdkh/khrwgl/form.js

788 lines
25 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

import React,{useEffect,useState,useMemo,useRef} from 'react';
import { Form, Button, Input, Row,Upload, Col, Table, DatePicker, TreeSelect,message,Image,Modal,Radio ,Transfer } from 'antd';
import { DeleteOutlined,FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined,UserOutlined } from '@ant-design/icons';
import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';
import apiurl from '../../../../service/apiurl';
import { httpget2, httppost2,xyt_httpget2 } from '../../../../utils/request';
import NormalSelect from '../../../../components/Form/NormalSelect';
import MbForm from "./mbForm"
import PersonForm from './transfer';
import "./index.less"
import moment from 'moment';
import {getCurrentQuarter,convertQuarterToDate,getQuarterStartEndDates} from "../../../../utils/tools"
const { RangePicker } = DatePicker
const { Dragger } = Upload;
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
const taskFreq = [
{label:"年度",value:1},
{label:"季度",value:2},
{label:"月度",value:3},
]
const columns = [
{
title: '考核对象',
dataIndex: 'objectUserName',
key: 'objectUserName',
align: "center",
width: 200,
},
{
title: '标准得分',
dataIndex: 'standardScore',
align:"center",
key: 'standardScore',
width:200
},
{
title: '考核模版',
dataIndex: 'templateName',
align:"center",
key: 'templateName',
width: 200,
render: (v, r) => <a onClick={() => {templateModal(r)}}>{v}</a>
},
{
title: '操作',
dataIndex: 'operator',
align:"center",
key: 'operator',
width: 200,
render:(value,record) => <a onClick={() =>deleteObject(record)}>删除</a>
},
];
const newColumns = useMemo(() => {
if (mode == "view") {
const news = columns;
news.pop();
news.unshift({
title: '序号',
dataIndex: 'inxs',
key: 'inxs',
align: "center",
width: 60,
render: (v, record, i) => <span>{i + 1}</span>
})
return news;
} else {
return columns;
}
},[mode])
const [treeValue, setTreeValue] = useState([])
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
const [form] = Form.useForm();
const [freq, setFreq] = useState()
const [transferOpen, setTransferOpen] = useState(false)
const [deptList, setDeptList] = useState([])
const [deptUserList, setDeptUserList] = useState([])
const [fileList, setFileList] = useState([]) //上传文件列表
const [fileIds, setFileIds] = useState([])
const [iframeSrc, setIframeSrc] = useState('')
const [pdfViewOPen, setPdfViewOPen] = useState(false)
const [loading, setLoading] = useState(false)
const onfinish = (values) => {
const userId = localStorage.getItem('userId')
const userName = localStorage.getItem('userName')
values.createTime = values.createTime?moment(values.createTime).format("YYYY-MM-DD 00:00:00"):''
values.createUserId = userId;
values.createUserName = userName;
const filterTemplate = templateList.find(item => item.id == values.templateId);
values.assessObjects = values.assessObjects.map(o => {
const filterData = deptUserList.find(item => item.userId == o);
return {
objectUserId: filterData.userId,
objectUserName: filterData.nickName,
standardScore: filterTemplate.standardScore
}
})
values.assessTeams = values.assessTeams.map(o => {
const filterData = deptUserList.find(item => item.userId == o);
return {
teamUserId: filterData.userId,
teamUserName: filterData.nickName,
standardScore: filterTemplate.standardScore
}
})
let files = fileList?.map(item => ({ fileId: item.response?.data?.fileId }));
values.files = files;
if (mode === 'edit') {
onEdit(apiurl.rcgl.jdkh.khrwgl.edit, { ...record, ...values });
}
if (mode === 'save') {
values.startDate = values.dateRangeSo[0];
values.endDate = values.dateRangeSo[1];
onSave(apiurl.rcgl.jdkh.khrwgl.save,values)
}
}
// 获取部门数据
const getDeptList = async() => {
try {
const result = await xyt_httpget2(apiurl.rcgl.zbgl.zbb.deptlist);
if (result.code == 200) {
setDeptList(result.data);
getDeptUser()
}
} catch (error) {
console.log(error);
}
}
// 获取部门人员数据
const getDeptUser = async() => {
try {
const result = await xyt_httpget2(apiurl.rcgl.zbgl.zbb.userList, {pageNum:1,pageSize:9999});
if (result.code == 200) {
setDeptUserList(result.rows)
}
} catch (error) {
console.log(error);
}
}
const buildTree = (data, parentId) => {
let tree = [];
data.forEach((node) => {
node.title = node.deptName;
node.key = node.deptId;
if (node.parentId === parentId) {
let children = buildTree(data, node.deptId);
if (children.length) {
node.children = children;
}
tree.push(node);
}
});
return tree;
}
const handleTreeList = (dept, user) => {
const deptArr = dept.map(item => {
return {
...item,
value: item.deptId,
title: item.deptName,
// disabled: item.userId ? false : true,
children: user.filter(u => u.deptId == item.deptId).map(u => ({
...u,
value: u.userId,
title: u.nickName,
}))
}
})
const treelist = buildTree(deptArr, 0)
return treelist
}
const treeList = useMemo(() => {
if (deptUserList?.length > 0 && deptList?.length > 0) {
return handleTreeList(deptList,deptUserList)
} else {
return []
}
}, [deptUserList, deptList])
/**
* @description 文件下载
* @param {String} params 文件fileId
*/
const download = (params) => {
let downloadLink = document.createElement("a");
downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/tsg/assessTask/file/download/${params.fileId}`;
downloadLink.download = `${params.fileName}`;
downloadLink.style.display = "none";
// 将链接添加到页面中
document.body.appendChild(downloadLink);
// 模拟点击事件,开始下载
downloadLink.click();
}
/**
* @description 上传图片
* @param {string} file 上传的文件
*/
const fileChange = (info) => {
if (info.file.status === "done") {
setLoading(false);
}
if (info.file.status === "uploading") {
setLoading(true);
}
if (info.file.status === "error") {
message.error("文件上传失败")
setLoading(false);
}
let fileIds = info.fileList.map(file => {
return file.response?.data?.fileId
})
setFileIds(fileIds)
setFileList(info.fileList)
}
/**
* @description pdf文件预览
* @param {String} params 文件预览url
*/
const viewPdf = (params) => {
setIframeSrc(params)
setPdfViewOPen(true)
}
/**
* @description 删除上传的图片
* @param {string} id 删除的id
*/
const deleteFile = (fileId) => {
let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
setFileList(filterFile)
}
const [templateList, setTemplateList] = useState([])
// 根据考核频次获取考核模版
const getTemplateList = async(freq=3) => {
try {
const result = await httppost2(apiurl.rcgl.jdkh.khrwgl.templateList + `/${freq}`);
if (result.code == 200) {
setTemplateList(result.data.map(item => ({...item,label:item.templateName, value:item.id,templateId:item.id})))
}
} catch (error) {
console.log(error);
}
}
const [khTableData, setkhTableData] = useState([])
const [taskType, setTaskType] = useState(2)
const khTableDataRef = useRef(null);
khTableDataRef.current = khTableData;
const onvaluesChange = (changedValues, allValues) => {
if (allValues.templateId && allValues?.assessObjects?.length > 0) {
const filterData = templateList.find(item => item.id == allValues.templateId);
const khObject = allValues.assessObjects.map(item => {
let objectUserName = deptUserList.find(o => o.userId == item)?.nickName
return { objectUserName, ...filterData,id: item }
})
setkhTableData(khObject)
} else {
setkhTableData([])
}
if ("taskFreq" in changedValues) {
setTaskType(changedValues["taskFreq"]);
}
if ("assessBatch" in changedValues) {
console.log(moment(changedValues["assessBatch"]).endOf('days').format("YYYY-MM-DD"));
const assessBatchData = convertQuarterToDate(changedValues["assessBatch"]);
const assessBatchValues = taskType == 2 ? assessBatchData.startDate : changedValues["assessBatch"]
const taskName = taskType == 2 ? getCurrentQuarter(assessBatchData.startDate).name :
taskType == 1 ? `${changedValues["assessBatch"]}年考核` :`${moment(changedValues["assessBatch"]).year()}${moment(changedValues["assessBatch"]).month() + 1}月考核`
const date = taskType == 2 ?
[moment(assessBatchData.startDate), moment(assessBatchData.endDate)] :
taskType == 1 ? [moment(changedValues["assessBatch"]).startOf('year'), moment(changedValues["assessBatch"]).endOf('year')] :
[moment(changedValues["assessBatch"]).startOf('month'), moment(changedValues["assessBatch"]).endOf('month')]
form.setFieldValue("assessBatch", assessBatchValues)
form.setFieldValue("taskName", taskName)
form.setFieldValue("dateRangeSo",date)
}
};
// 删除考核对象
const deleteObject = (record) => {
const filterData = khTableDataRef.current.filter(item => item.id != record.id)
const value = filterData.map(item =>item.id)
form.setFieldValue("assessObjects", value)
setTreeValue(value)
setkhTableData(filterData)
}
// 获取考核成员
const getKhMember = async(id) => {
try {
const result = await httpget2(apiurl.rcgl.jdkh.khrwgl.detail + `/${id}`);
if (result.code == 200) {
const ids = result.data.assessTeams.map(item => item.teamUserId - 0)
form.setFieldValue("assessTeams", ids)
setkhTableData(result.data.assessObjects?.map(item => ({...item,templateName:result.data?.templateName,templateId:result?.data.templateId})))
const file = result.data.files?.map(o => ({
name: o.fileName,
response: {
data: {
filePath: o.filePath,
fileId:o.fileId
}
},
}))
setFileList(file)
}
} catch (error) {
console.log(error);
}
}
const [selectPerson, setSelectPerson] = useState([])
const handlePerson = (e) => {
setTransferOpen(false)
setSelectPerson(e)
const name = e.map(o => {
const arr = deptList.find(item => item.deptId == o)?.deptName
return arr;
})
form.setFieldValue("assessTeams", name)
}
// 考核模版显示
const [mbOpen, setMbOpen] = useState(false)
const [mbItem, setMbItem] = useState({})
const templateModal = (v) => {
setMbOpen(true)
setMbItem(v)
}
useEffect(() => {
if (freq) {
setkhTableData([])
form.setFieldValue("templateId", '')
getTemplateList(freq)
}
}, [freq])
useEffect(() => {
if (mode == "save") {
const name = localStorage.getItem('userName')
form.setFieldValue("createUserName", name)
form.setFieldValue("createTime", moment())
form.setFieldValue("taskFreq", 2)
} else {
form.setFieldValue("assessObjects", record.assessObjects.map(item => item.objectUserId - 0))
form.setFieldValue("dateRangeSo", [moment(record.startDate), moment(record.endDate)])
console.log("record",record);
getKhMember(record.id)
getTemplateList(record.taskFreq)
setTaskType(record.taskFreq)
}
}, [mode,record])
useEffect(() => {
getDeptList()
}, [])
useEffect(() => {
if (mode == "save") {
if (taskType == 2) {
getTemplateList(taskType)
const { startDate, endDate } = getQuarterStartEndDates(getCurrentQuarter('').value, moment().year());
form.setFieldValue("assessBatch", moment())
form.setFieldValue("taskName", getCurrentQuarter('').name)
form.setFieldValue("dateRangeSo",[moment(startDate), moment(endDate)])
} else if (taskType == 1) {
form.setFieldValue("assessBatch", moment())
form.setFieldValue("taskName", `${moment().year()}年考核`)
form.setFieldValue("dateRangeSo",[moment().startOf('year'), moment().endOf('year')])
} else {
form.setFieldValue("assessBatch", moment().format('YYYY-MM-DD'))
form.setFieldValue("taskName", `${moment().year()}${moment().month() + 1}月考核`)
form.setFieldValue("dateRangeSo",[moment().startOf('month'), moment().endOf('month')])
}
}
}, [taskType,mode])
return (
<>
<Form
form={form}
{...formItemLayout}
onFinish={onfinish}
initialValues={record}
onValuesChange={onvaluesChange}
>
<Row>
<Col span={12}>
<Form.Item
label="考核频次"
name="taskFreq"
rules={[
{
required: true,
},
]}
>
<NormalSelect
disabled={mode == "view"}
style={{ width: '100%' }}
allowClear
options={taskFreq}
onChange={(e) => setFreq(e)}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="综合得分计算方式"
name="scoreWay"
rules={[
{
required: true,
},
]}
labelCol={{style: {marginLeft:-20}}}
>
<Radio.Group disabled={mode === 'view'} >
<Radio value={1}>取最低</Radio>
<Radio value={2}>平均</Radio>
</Radio.Group>
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
label="考核批次"
name="assessBatch"
getValueFromEvent={(e,dateString) => dateString}
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
rules={[
{
required: true,
},
]}
>
<DatePicker
disabled={mode === 'view'}
// format={'YYYY-MM-DD'}
style={{ width: '100%' }}
allowClear
picker={taskType == 2 ? "quarter" : taskType == 1 ? "year" : "month"}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="考核任务名称"
name="taskName"
rules={[
{
required: true,
},
]}
>
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
label="考核周期"
name="dateRangeSo"
rules={[
{
required: true,
},
]}
getValueFromEvent={(e,dateString) => dateString}
getValueProps={(value) => {
return {
value: value ? [value[0]&&moment(value[0]),value[1]&&moment(value[1])] : undefined
};
}}
>
<RangePicker
allowClear
style={{ width: '100%' }}
format={'YYYY-MM-DD'}
disabled={mode === 'view'}
/>
</Form.Item>
</Col>
{mode != "view" ?
<Col span={12}>
<Form.Item
label="考核模板"
name="templateId"
rules={[
{
required: true,
},
]}
>
<NormalSelect
disabled={mode === 'view'}
style={{ width: '100%' }}
allowClear
options={templateList}
// fieldNames={{ label: "templateName",value:"id" }}
/>
</Form.Item>
</Col> : null
}
</Row>
<Row>
<Col span={24}>
<Form.Item
label="考核对象"
name="assessObjects"
labelCol={{ span: 3 }}
wrapperCol={{ span: 19 }}
rules={[
{
required: true,
},
]}
>
<TreeSelect
treeCheckable={true}
showSearch
disabled={mode==='view'}
style={{
width: '100%',
}}
dropdownStyle={{
maxHeight: 400,
overflow: 'auto',
}}
allowClear
treeDefaultExpandAll
treeData={treeList}
treeNodeFilterProp='title'
// value={["1","33"]}
onChange={(e) => { setTreeValue(e)}}
/>
</Form.Item>
</Col>
</Row>
<Row>
<Col span={24}>
<Form.Item
label="考核组成员"
name="assessTeams"
labelCol={{ span: 3 }}
wrapperCol={{ span: 19 }}
rules={[
{
required: true,
},
]}
>
<TreeSelect
treeCheckable={true}
showSearch
disabled={mode==='view'}
style={{
width: '100%',
}}
dropdownStyle={{
maxHeight: 400,
overflow: 'auto',
}}
allowClear
treeDefaultExpandAll
treeData={treeList}
treeNodeFilterProp='title'
/>
{/* <Input
suffix={
<UserOutlined
style={{ cursor: 'pointer' }}
onClick={person}
/>}
allowClear
disabled={mode==='view'}
// onFocus={() => setTransferOpen(true)}
/> */}
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
label="创建人"
name="createUserName"
>
<Input disabled={true} style={{width:'100%'}} allowClear />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="创建时间"
name="createTime"
getValueFromEvent={(e,dateString) => dateString}
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
>
<DatePicker disabled={true} style={{width:'100%'}} allowClear format={"YYYY-MM-DD HH:mm:ss"} />
</Form.Item>
</Col>
</Row>
<Table
columns={newColumns}
pagination={false}
dataSource={khTableData}
rowKey="id"
scroll={{ x: width, y: "calc( 100vh - 400px )" }}
/>
<Row style={{marginTop:20}}>
<Col span={24}>
<Form.Item
label="考核方案"
name="fieldId"
labelCol={{ span: 3 }}
wrapperCol={{ span: 19 }}
>
{mode !== "view" &&
<Dragger
name='file'
// multiple
action="/gunshiApp/tsg/assessTask/file/upload/singleSimple"
onChange={fileChange}
onDrop={(info) => { console.log(info.dataTransfer.files); }}
fileList={fileList}
disabled={loading}
// onSuccess={handleSuccess}
>
<p className="ant-upload-text">点击或拖拽文件到此区域上传 最大50M</p>
<p className="ant-upload-hint">
支持扩展名.doc .docx .pdf .jpg .png .xlsx .xls
</p>
</Dragger>
}
<Row gutter={[16]}>
{
loading ? <span>文件正在上传中请等待</span> :
fileList?.length > 0 && fileList?.map(file => {
return (
<Col span={12}>
<div className="file-item" style={{width:"75%"}}>
<div className='file-description'>
{file.name.indexOf('.docx') > -1 ?
<div
onClick={() => { download(file.response?.data?.fileId) }}
style={{ cursor: 'pointer' }}
>
<FileWordOutlined
style={{ fontSize: 40 }}
/>
</div>
:
file.name.indexOf('.pdf') > -1 ?
<div
onClick={() => { viewPdf(file.response?.data?.fileId) }}
style={{ cursor: 'pointer' }}
>
<FilePdfOutlined style={{ fontSize: 40 }} />
</div>
:
file.name.indexOf('.zip') > -1 ?
<div
onClick={() => { download(file.response?.data?.fileId) }}
style={{ cursor: 'pointer' }}
>
<FileZipOutlined style={{ fontSize: 40 }} />
</div>
:
file.name.indexOf('.xlsx') > -1 ?
<div
onClick={() => { download(file.response?.data?.fileId) }}
style={{ cursor: 'pointer' }}
>
<FileExcelOutlined style={{ fontSize: 40 }} />
</div>
:
<Image width={60} src={url +file.response?.data?.filePath} alt='' />
}
<span>{file.name}</span>
</div>
<div className={mode == "view" ? 'delete-icon disable-icon' : 'delete-icon'} onClick={() => deleteFile(file.response?.data?.fileId)}>
<DeleteOutlined />
</div>
</div>
</Col>
)
})
}
</Row>
</Form.Item>
</Col>
</Row>
{
mode==='view'?null:(
<>
<Form.Item {...btnItemLayout}>
<Button type="primary" htmlType="submit">
{mode === 'save' ? '提交' : '修改'}
</Button>
</Form.Item>
</>
)
}
</Form>
{/* 选择考核组成员 */}
<Modal
open={transferOpen}
width={800}
title="选择人员"
footer={null}
onCancel={() => setTransferOpen(false)}
// onOk={() => setTransferOpen(true)}
destroyOnClose
>
<PersonForm
treeList={treeList}
deptList={deptList}
callback={handlePerson}
onCancel={() => { setTransferOpen(false) }}
selectPerson={selectPerson}
/>
</Modal>
{/* pdf预览 */}
<Modal
open={pdfViewOPen}
width={1000}
title=""
footer={null}
style={{marginTop:"-5%"}}
onCancel={() => {
setPdfViewOPen(false)
}}
>
<iframe
style={{
height: '80vh',
width: '100%',
border: 0,
marginTop: 20,
}}
src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/tsg/assessTask/file/download/${iframeSrc}`)}`}
/>
</Modal>
{/* 模版 */}
<Modal
open={mbOpen}
width={1000}
title="查看"
onCancel={() => setMbOpen(false)}
footer={null}
destroyOnClose
>
<MbForm record={mbItem} mode="view" />
</Modal>
</>
);
}
export default ModalForm;