312 lines
8.8 KiB
JavaScript
312 lines
8.8 KiB
JavaScript
import React,{useEffect,useState,useMemo,useRef} from 'react';
|
||
import { Form, Button, Input, Row,Table, Col, Popconfirm, InputNumber,Image,Modal,Typography, message} from 'antd';
|
||
import { DeleteOutlined,FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
|
||
import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';
|
||
import { httpget2, httppost2,xyt_httpget2 } from '../../../../utils/request';
|
||
import apiurl from '../../../../service/apiurl';
|
||
import NormalSelect from '../../../../components/Form/NormalSelect';
|
||
import ZbForm from "./Zbform";
|
||
import moment from 'moment';
|
||
import {handleData} from "../../../../utils/tools"
|
||
|
||
|
||
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||
|
||
console.log("record",record);
|
||
|
||
const columns = [
|
||
{
|
||
title: "考核类目",
|
||
dataIndex: "name",
|
||
key:"name",
|
||
width: 150,
|
||
align: "center",
|
||
onCell: (row) => ({ rowSpan: row.rowSpan || 0 })
|
||
},
|
||
{
|
||
title: '指标名称',
|
||
key: 'indicatorName',
|
||
dataIndex: 'indicatorName',
|
||
width: 250,
|
||
align: "center",
|
||
},
|
||
{
|
||
title: '标准分数',
|
||
key: 'standardScore',
|
||
dataIndex: 'standardScore',
|
||
width: 100,
|
||
align: "center",
|
||
},
|
||
{
|
||
title: '操作', key: 'operation1', width: 240, fixed: 'right', align: 'center',
|
||
render: (_, record) => {
|
||
return (
|
||
<div>
|
||
<Popconfirm
|
||
title="确定要删除?"
|
||
onConfirm={() => handleDelete(record.id)}
|
||
>
|
||
<a>删除</a>
|
||
</Popconfirm>
|
||
</div>
|
||
)
|
||
},
|
||
},
|
||
]
|
||
|
||
const templateFreqOptions = [
|
||
{
|
||
label: "年度",
|
||
value:1
|
||
},
|
||
{
|
||
label: "季度",
|
||
value:2
|
||
},
|
||
{
|
||
label: "月度",
|
||
value:3
|
||
},
|
||
]
|
||
const [form] = Form.useForm();
|
||
const [standardScore1, setStandardScore] = useState('')
|
||
const [zbOpen, setZbOpen] = useState(false)
|
||
const [tableData, setTableData] = useState([])
|
||
const [selectKeys, setSelectKeys] = useState([])
|
||
const tableDataRef = useRef(null)
|
||
tableDataRef.current = tableData;
|
||
const newColumns = useMemo(() => {
|
||
let data = columns;
|
||
if (mode == "view") {
|
||
data.pop();
|
||
return data
|
||
} else {
|
||
return data;
|
||
}
|
||
}, [mode])
|
||
const handleAddRow = () => {
|
||
setZbOpen(true)
|
||
|
||
};
|
||
|
||
|
||
const handleDelete = (key) => {
|
||
const newData = tableDataRef.current.filter((item) => item.id !== key);
|
||
newData.forEach(item => {
|
||
if (item.rowSpan) delete item.rowSpan;
|
||
})
|
||
const result = handleData(newData, "name")
|
||
setTableData(result)
|
||
setSelectKeys(newData.map(item => item.id))
|
||
let total = newData.reduce((total,cur) => total + Number(cur.standardScore),0)
|
||
setStandardScore(total)
|
||
};
|
||
|
||
|
||
const onfinish = (values) => {
|
||
// 校验等级划分
|
||
if (values.excellentScore == undefined) {
|
||
message.error("优秀分数不能为空")
|
||
return
|
||
}
|
||
if (values.goodScore == undefined) {
|
||
message.error("良好分数不能为空")
|
||
return
|
||
}
|
||
if (values.passScore == undefined) {
|
||
message.error("合格分数不能为空")
|
||
return
|
||
}
|
||
const userId = localStorage.getItem('userId')
|
||
const userName = localStorage.getItem('userName')
|
||
values.indicatorIds = selectKeys;
|
||
values.standardScore = standardScore1;
|
||
values.createUserId = userId
|
||
values.createUserName = userName
|
||
if (mode === 'edit') {
|
||
onEdit(apiurl.rcgl.jdkh.khmbgl.edit,{...record,...values})
|
||
}
|
||
if (mode === 'save') {
|
||
onSave(apiurl.rcgl.jdkh.khmbgl.save,values)
|
||
}
|
||
}
|
||
|
||
|
||
const onSubmit = (data) => {
|
||
setZbOpen(false)
|
||
// 重新对数据做处理
|
||
data.data.forEach(item => {
|
||
if (item.rowSpan) delete item.rowSpan;
|
||
})
|
||
const result = handleData(data.data, "name")
|
||
let total = data.data.reduce((total,cur) => total + Number(cur.standardScore),0)
|
||
setStandardScore(total)
|
||
setTableData(result)
|
||
setSelectKeys(data.keys)
|
||
// 自动填充等级划分
|
||
form.setFieldValue("excellentScore",(total * 0.92).toFixed(2))
|
||
form.setFieldValue("goodScore",(total * 0.85).toFixed(2))
|
||
form.setFieldValue("passScore",(total * 0.70).toFixed(2))
|
||
}
|
||
|
||
const getZbTableData = async(id) => {
|
||
try {
|
||
const res = await httpget2(apiurl.rcgl.jdkh.khmbgl.info + `/${id}`)
|
||
if (res.code == 200) {
|
||
let total = res.data.reduce((total,cur) => total + Number(cur.standardScore),0)
|
||
setStandardScore(total)
|
||
setSelectKeys(res.data.map(item => item.id))
|
||
res.data.forEach(item => {
|
||
if (item.rowSpan) delete item.rowSpan;
|
||
})
|
||
const result = handleData(res.data, "name")
|
||
setTableData(result)
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
|
||
}
|
||
}
|
||
useEffect(() => {
|
||
if (mode !== "save") {
|
||
getZbTableData(record.id)
|
||
}
|
||
|
||
}, [record,mode])
|
||
|
||
|
||
|
||
return (
|
||
<>
|
||
<Form
|
||
form={form}
|
||
{...formItemLayout}
|
||
onFinish={onfinish}
|
||
initialValues={record}
|
||
>
|
||
<Row>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
label="模板名称"
|
||
name="templateName"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
},
|
||
]}
|
||
>
|
||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
label="考核频次"
|
||
name="templateFreq"
|
||
>
|
||
<NormalSelect disabled={mode==='view'} style={{ width: '100%' }} allowClear options={templateFreqOptions} />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
|
||
<Row>
|
||
<Col span={12}>
|
||
<Form.Item
|
||
label="考核内容"
|
||
>
|
||
<Button
|
||
type="primary"
|
||
disabled={mode == "view"}
|
||
onClick={handleAddRow}
|
||
style={{ width: '30%' }}>添加指标</Button>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
<div style={{display:"flex",justifyContent:"space-between"}}>
|
||
<span style={{ marginLeft: "auto" }}>标准分数：{ standardScore1}</span>
|
||
</div>
|
||
<Table
|
||
rowKey="id"
|
||
columns={newColumns}
|
||
dataSource={tableData}
|
||
scroll={{ y: "calc( 100vh - 400px )"}}
|
||
pagination={false}
|
||
/>
|
||
<Row style={{marginTop:20}}>
|
||
<Col span={8}>
|
||
<Form.Item label="等级划分" >
|
||
<Form.Item label={<span style={{fontWeight:"bold"}}>优秀</span>} required colon={false}>
|
||
<Form.Item name="excellentScore" noStyle>
|
||
<InputNumber
|
||
min={0}
|
||
max={standardScore1}
|
||
style={{ width: "45%" }}
|
||
disabled={mode == "view"}
|
||
/>
|
||
</Form.Item>
|
||
<span className="ant-form-text"> 分及以上</span>
|
||
</Form.Item>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item >
|
||
<Form.Item label={<span style={{fontWeight:"bold"}}>良好</span>} required colon={false}>
|
||
<Form.Item name="goodScore" noStyle >
|
||
<InputNumber
|
||
min={0}
|
||
max={standardScore1}
|
||
style={{ width: "45%" }}
|
||
disabled={mode == "view"}
|
||
/>
|
||
</Form.Item>
|
||
<span className="ant-form-text"> 分及以上</span>
|
||
</Form.Item>
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={8}>
|
||
<Form.Item >
|
||
<Form.Item label={<span style={{fontWeight:"bold"}}>合格</span>} required colon={false}>
|
||
<Form.Item name="passScore" noStyle >
|
||
<InputNumber
|
||
min={0}
|
||
max={standardScore1}
|
||
style={{ width: "45%" }}
|
||
disabled={mode == "view"}
|
||
/>
|
||
</Form.Item>
|
||
<span className="ant-form-text"> 分及以上</span>
|
||
</Form.Item>
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
{
|
||
mode==='view'?null:(
|
||
|
||
<Form.Item wrapperCol={{span:2,offset:22}}>
|
||
<Button type="primary" htmlType="submit" >
|
||
{mode === 'save' ? '保存' :
|
||
'修改'}
|
||
</Button>
|
||
</Form.Item>
|
||
|
||
)
|
||
}
|
||
</Form>
|
||
|
||
<Modal
|
||
open={zbOpen}
|
||
width={1000}
|
||
destroyOnClose
|
||
footer={null}
|
||
onCancel={() => {
|
||
setZbOpen(false)
|
||
}}
|
||
title="选择指标"
|
||
>
|
||
<ZbForm onSubmit={onSubmit} selectKeys={selectKeys} />
|
||
</Modal>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default ModalForm;
|