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

import React,{useState,useEffect,useRef,useContext,useMemo} from 'react'
import { Table, Radio,Switch,Button,Form,message, InputNumber,DatePicker,Upload,Row,Col,Image,Modal,Input} from "antd"
import { EditOutlined,DeleteOutlined,EyeOutlined } from '@ant-design/icons';
import { httpget2, httppost2 } from '../../../../utils/request'
import { handleData } from "../../../../utils/tools"
import apiurl from '../../../../service/apiurl'
import PfViewModal from "./pfViewModal"
import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';
import moment from 'moment'
const { Dragger } = Upload;

export default function PfDetail({ record, Item, refresh, onCancel,tabs }) {
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
    const EditableContext = React.createContext(null);
const EditableRow = ({ index, ...props }) => {
  const [form] = Form.useForm();
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  );
};
    const EditableCell = ({
        title,
        editable,
        children,
        dataIndex,
        record,
        handleSave,
        ...restProps
      }) => {
        const [editing, setEditing] = useState(false);
        const inputRef = useRef(null);
        const form = useContext(EditableContext);
        useEffect(() => {
          if (editing) {
            inputRef.current.focus();
          }
        }, [editing]);
        const toggleEdit = () => {
            if(Item.view) return
          setEditing(!editing);
          form.setFieldsValue({
            [dataIndex]: record[dataIndex],
          });
        };
        const save = async () => {
          try {
            const values = await form.validateFields();
              toggleEdit();
            handleSave({
              ...record,
              ...values,
            });
          } catch (errInfo) {
            console.log('Save failed:', errInfo);
          }
        };
        let childNode = children;
        if (editable) {
          childNode = editing ? (
           <Form form={form}>
            <Form.Item
              style={{
                margin: 0,
              }}
              name={dataIndex}
            >
              <InputNumber min={0} max={record?.standardScore} ref={inputRef} onPressEnter={save} onBlur={save} />
            </Form.Item>
                  
           </Form> 
          ) : (
            <div
              className="editable-cell-value-wrap"
              style={{
                paddingRight: 24,
              }}
              onClick={toggleEdit}
            >
              {children}
            </div>
          );
        }
        return <td {...restProps}>{childNode}</td>;
    };
    
     // 总分
     const [tableData, setTableData] = useState([])
     const score = useMemo(() => tableData?.reduce((total, cur) => total + (cur?.assessScore ?? 0), 0), [tableData]);
    const columns = [
        {
          title: "考核类目",
          dataIndex: "name",
          key:"name",
          width: 150,
          align: "center",
          onCell: (row) => ({ rowSpan: row.rowSpan || 0 })
        },
        {
          title: '指标名称',
          key: 'indicatorName',
          dataIndex: 'indicatorName',
          width: 200,
          align: "center",
        },
        {
          title: '标准分数',
          key: 'standardScore',
          dataIndex: 'standardScore',
          width: 70,
          align: "center",
        },
        {
            title: `考核得分(${score ?? ''})`,
            key: 'assessScore',
            dataIndex: 'assessScore',
            width: 80,
            align: "center",
            editable: true,
        },
        {
            title: '是否需要整改',
            key: 'isNeedRectify1',
            dataIndex: 'isNeedRectify1',
            width: 150,
            align: "center",
            render: (text, row) => {
                const checked = compareScore(row) 
                return (
                    <>
                    <Switch
                        checkedChildren="是"
                        unCheckedChildren="否"
                        checked={checked}
                    />
                    
                    {(checked && !Item.view) ? <EditOutlined
                        title='编辑'
                        style={{ marginLeft: 10, cursor: 'pointer' }}
                        onClick={() => { zgCallback(row) }}
                    /> : (checked && Item.view) ?
                        <EyeOutlined
                            title='查看'
                            style={{ marginLeft: 10, cursor: 'pointer' }}
                            onClick={() => { zgView(row) }}
                        /> : null
                    }
                   
                    </>
                )
            }
        },
    ]
    const components = {
        body: {
          row: EditableRow,  
          cell: EditableCell,
        },
      };
    const newcolumns = columns.map((col) => {
        if (!col.editable) {
          return col;
        }
        return {
          ...col,
          onCell: (record) => ({
            record,
            editable: col.editable,
            dataIndex: col.dataIndex,
            title: col.title,
            handleSave,
          }),
        };
    });
    const handleSave = (row) => {
        const newData = [...tableData];
        const index = newData.findIndex((item) => row.id === item.id);
        const item = newData[index];
        newData.splice(index, 1, {
          ...item,
          ...row,
        });
        setTableData(newData);
        tableDataRef.current = newData
    };


    const tableDataRef = useRef(null)
    const getZbTableData = async (id, type) => {
        const url = type == 1 ? apiurl.rcgl.jdkh.khmbgl.info :
            apiurl.rcgl.jdkh.khrwgl.pfDetail 
        try {
          const res = await httpget2(url + `/${id}`)
          if (res.code == 200) {
            res.data.forEach(item => {
              if (item.rowSpan) delete item.rowSpan;
            })
            const result = handleData(res.data, "name")
              setTableData(result)
              tableDataRef.current = result;
          }
        } catch (error) {
          console.log(error);
        }
    }
      
    // 分数进行比较
    const compareScore = (row) => {
        let isBelowStandard = false;
        if (Item.tabs != 2) {
            isBelowStandard = row.standardScore > row.assessScore ? true : false;
            return isBelowStandard;
        } else {
            for (let i = 0; row[`assessScore${i}`] !== undefined; i++) {
                if (row[`assessScore${i}`] < row.standardScore) {
                    isBelowStandard = true;
                    break;
                }
            }
        }
        return isBelowStandard
    }
    // 处理清单任务查看详情
    const handleTableData = (obj) => {
        let rrlts = {};
        const arr = Object.values(obj).map(item => {
            item.map((it, index) => {
                it['teamUserName' + index] = it.teamUserName;
                it['assessScore' + index] = it.assessScore;
                it['problemDesc' + index] = it.problemDesc;
                it['rectifyRequirement' + index] = it.rectifyRequirement;
                it['rectifyLastDate' + index] = it.rectifyLastDate;
                it['files' + index] = it.files;
                it["count"] = index +1;
                rrlts = { ...rrlts, ...it }
            })
            return rrlts
        })
        return arr
    }

    const handleTableData2 = (obj) => {
      const names = Object.values(obj)?.[0]?.map(o=>o.teamUserName)
      const obj2 = {}
      for(let key in obj){
        const arr = []
        names?.map((name)=>{
          obj?.[key]?.map((item)=>{
            if(name===item.teamUserName){
              arr.push(item)
            }
          })
        })
        obj2[key] = arr
      }
      return obj2
    }
    // 获取清单查看数据
    const [qdColumns, setQdColumns] = useState(newcolumns)
    const [qdWidth, setQdWidth] = useState()
    const getQdViewData = async (id) => {
        try {
            const res = await httpget2(apiurl.rcgl.jdkh.khrwgl.qdView + `/${id}`)
            if (res.code == 200) {
                const linshi = handleTableData2(res.data)//将接口里用户的顺序统一
                const result = handleTableData(linshi);
                const insertCols = [];
                 result.forEach((item, index, arr) => {
                    const total  = arr?.reduce((total, cur) => total + (cur["assessScore" + index] || 0), 0)
                    if (item["teamUserName" + index]) {
                        insertCols.push( {
                            title: item['teamUserName' + index] + `(${total})`,
                            key: "assessScore" + index,
                            dataIndex: "assessScore" + index,
                            width: 80,
                            align: "center",
                        })
                    }
                 })
                // 综合得分
                const zfScore = result?.reduce((total,cur) => total + (cur?.indicatorScore || 0),0 )
                insertCols.push({
                    title: "综合得分" +  `(${zfScore})`,
                    key: "indicatorScore",
                    dataIndex: "indicatorScore",
                    width: 100,
                    align: "center",
                    render: (v, r) => (
                        <div style={{display:"flex",columnGap:10,justifyContent:"center"}}>
                            <span>{record?.scoreWay ==1 ? "取最低": record?.scoreWay ==2 ? "平均" : ''}</span>
                            <span>{v}</span>
                        </div>
                    )
                })
                columns.splice(3, 1, ...insertCols)
                const width = columns?.reduce((total, cur) => total + (cur?.width || 0), 0);
                setQdWidth(width)
                setQdColumns(columns)
                result.forEach(item => {
                    if (item.rowSpan) delete item.rowSpan;
                  })
                const newData = handleData(result, "name")
                setTableData(newData)
             
            }
        } catch (error) {
            console.log(error);
            
        }
    }

    // 重置评分
    const resetPf = () => {
        const newData = [...tableData];
        newData.forEach(item => {
            item.assessScore = ''
        })
        setTableData(newData)
        tableDataRef.current = newData
    }
   
    // 保存评分
    const savepf = async () => {
        const params = {
            taskId: record.id,
            score,
            ratings: tableData.map(item => ({
                indicatorId: item.indicatorId,
                standardScore: item.standardScore,
                assessScore: item.assessScore,
                teamId: Item.id,
                isNeedRectify: item.isNeedRectify || 0,
                problemDesc: item.problemDesc,
                rectifyRequirement: item.rectifyRequirement,
                rectifyLastDate: item.rectifyLastDate,
                files: item.files,
                fileList:undefined,
                rectifyStatus:0
            }))
        }
        try {
            const res =await httppost2(apiurl.rcgl.jdkh.khrwgl.savePf, params)
            if (res.code == 200) {
                message.success("保存成功")
                refresh()
            } else {
                message.error("保存失败")
            }
        } catch (error) {
            console.log(error);
        }
    }

    // 确认完成
    const confirm = async () => {
        const params = {
            taskId: record.id,
            score,
            ratings: tableData.map(item => ({
                indicatorId: item.indicatorId,
                standardScore: item.standardScore,
                assessScore: item.assessScore,
                teamId: Item.id,
                isNeedRectify: item.isNeedRectify || 0,
                problemDesc: item.problemDesc,
                rectifyRequirement: item.rectifyRequirement,
                rectifyLastDate: item.rectifyLastDate,
                files: item.files,
                fileList:undefined,
                rectifyStatus:0
            }))
        }
        if(tableData.length>0){
          let flag = true //fasle有位评分的
          params.ratings?.map((item)=>{
            if(item.assessScore==null){
              flag = false
            }
          })
          if(!flag){
            message.error('请输入全部考核评分')
            return
          }
        }
        try {
            const res = await httppost2(apiurl.rcgl.jdkh.khrwgl.confirmpf, params)
            if (res.code == 200) { 
                message.success("评分完成")
                refresh()
                onCancel()
            }
        } catch (error) {
            console.log(error);
            
        }
    }

    // 查看评分详情
    const [zgViewOpen, setzgViewOpen] = useState(false)
    const zgView = (record) => {
        setzgViewOpen(true)
        setZgItem(record)
    }
   const [clickItem, setClickItem] = useState()
    // 点击某一行的回调
    const handleRowClick = (record) => {
        setClickItem(record)
    }
    const handleRadioChange = (e) => {
      if (e.target.value == 1) {
        if (tabs == 2) {
          getQdViewData(Item?.id)
        } else {
          getZbTableData(Item?.id,2)
        }
      } else {
        // debugger
        const newData = tabs == 2 ? tableData.filter(item => item.standardScore > item.indicatorScore) :
        tableData.filter(item => item.standardScore > item.assessScore)
        newData.forEach(item => {
          if (item.rowSpan) delete item.rowSpan;
        })
      const res = handleData(newData, "name")
          setTableData(res);
      }
    }

    // 整改
    const [zgOpen, setZgOpen] = useState(false)
    const [form1] = Form.useForm();
    const [loading, setLoading] = useState(false)
    const [imgloading, setImgLoading] = useState(false)
    const [imgfileList, setImgFileList] = useState([]) //上传文件列表

    const [zgItem, setZgItem] = useState("")
    const zgCallback = (e) => {
        setZgOpen(true)
        setZgItem(e)
        console.log("ee",e);
        
    }

    const imgbeforeUpload = (file) => {
        const isJpgOrPng =
          file.type === 'image/jpeg' ||
          file.type === 'image/jpg' ||
          file.type === 'image/png';
        
        if (!isJpgOrPng) {
          message.error('请上传图片格式的文件！');
        }
        const isLt2M = file.size / 1024 / 1024 < 5;
        if (!isLt2M) {
          message.error('图片大小需小于5M!');
        }
        return isJpgOrPng && isLt2M ? true : Upload.LIST_IGNORE;
      };
    const imgdeleteFile = (fileId) => {
        let filterFile = imgfileList.filter(item => item.response?.data?.fileId !== fileId);
        setImgFileList(filterFile)
      }
      const imgfileChange = (info) => {
        console.log("info",info);
        if (info.file.status === "done") {
          setImgLoading(false);
        }
        if (info.file.status === "uploading") {
          setImgLoading(true);
        }
        if (info.file.status === "error") {
          message.error("文件上传失败")
          setImgLoading(false);
        }
        setImgFileList(info.fileList)
    }
    // 整改数据
    const onfinish = (values) => {
        let files = imgfileList.map(item => ({ fileId: item.response?.data?.fileId }))
        values.files = files;
        values.isNeedRectify = 1;
        values.fileList = imgfileList.map(item => item.response.data);
        const newData = tableData.map(item => {
            if (item.id == zgItem.id) {
                return {...item, ...values}
            } else {
                return item
            }
        })
        setTableData(newData)
        setZgOpen(false)
        setZgItem("")
        form1.resetFields();
    }
  
    // 获取指标表格数据
    useEffect(() => {
        // if (Item.type != "start") {
        //     if (tabs == 2) {
        //         getQdViewData(Item?.id)
        //     } else {
        //         getZbTableData(Item?.id,2)
        //     }
        // } else {
        //     getZbTableData(record?.templateId,1)
            
      // }
          if (tabs == 2) {
                getQdViewData(Item?.id)
            } else {
                getZbTableData(Item?.id,2)
            }
    }, [record, Item])
    
    useEffect(() => {
        const file = zgItem?.fileList ? zgItem.fileList : zgItem.files
        if (file) {   
          const imgFile = file?.map(o => ({
            name: o.fileName,
            response: {
                  data: {
                    filePath: o.filePath,
                    fileId:o.fileId
                  }
                },
        }))
        setImgFileList(imgFile)
        } else {
            setImgFileList([])
        }
        form1.setFieldsValue({...zgItem})
      }, [zgItem])
  
  return (
      <div>
        <Radio.Group style={{marginBottom:10}} defaultValue={1} onChange={(e) => handleRadioChange(e)}>
                  <Radio value={1}>显示全部</Radio>
                  <Radio value={2}>仅显示扣分项目</Radio>
          </Radio.Group>
        <Table
          components={components}
          rowKey="id"
          columns={Item?.tabs != 2 ?newcolumns :qdColumns }
          dataSource={tableData}
          scroll={{x:Item?.tabs != 2 ? 500: qdWidth, y: "calc( 100vh - 400px )"}}
          pagination={false}
          onRow={(record, rowIndex) => {
            return {
                onClick: () => handleRowClick(record),
                onDoubleClick:(record, rowIndex) => setClickItem()
            };
              }}
          />
          {clickItem ? <div style={{backgroundColor:"#f2f2f2",marginTop:20,padding:10}}>
              {clickItem?.indicatorRatings?.map(item => (
                  <div key={item.id}>
                      <div>{item?.ratingDesc}</div>
                </div>
            ))}
          </div> : null}
          {!Item?.view ? 
          <div className='btns' style={{display:"flex",marginTop:40,justifyContent:"space-between"}}>
              <Button type="primary" onClick={resetPf}>重置评分</Button>
              <div style={{display:"flex",columnGap:10}}>
                 <Button type="primary" onClick={onCancel}>取消</Button>
                 <Button onClick={savepf}>保存</Button>
                 <Button type="primary" onClick={confirm}>确认完成</Button>
              </div>
          </div> 
              :
              <div className='btns' style={{display:"flex",marginTop:40,justifyContent:"flex-end"}}>
                  <Button onClick={onCancel} type='primary'>关闭</Button>
                  </div>
          }

          {/* 整改 */}
          <Modal
              open={zgOpen}
              width={800}
              footer={null}
              onCancel={() => { setZgOpen(false);form1.resetFields(); }}
              title="整改详情"
              destroyOnClose={true}
          >
              <Form
                  form={form1}
                  {...formItemLayout}
                  onFinish={onfinish}
                //   initialValues={zgItem}
              >
                  <Row>
                <Col span={24}>
                  <Form.Item
                    label="问题描述"
                    name="problemDesc"
                    labelCol={{ span: 3 }}
                    wrapperCol={{ span: 19 }}
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                  <Input.TextArea  style={{width:'100%',minHeight:'100px'}} allowClear />
                  </Form.Item>
              </Col>  
                  </Row>
                  <Row>
                <Col span={24}>
                  <Form.Item
                    label="整改要求"
                    name="rectifyRequirement"
                    labelCol={{ span: 3 }}
                    wrapperCol={{ span: 19 }}
                  >
                  <Input.TextArea  style={{width:'100%',minHeight:'100px'}} allowClear />
                  </Form.Item>
              </Col>  
                  </Row>
                  <Row>
          <Col span={12}>
              <Form.Item
                label="整改期限"
                name="rectifyLastDate"
                getValueFromEvent={(e,dateString) => dateString}
                getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
              >
                <DatePicker  format={'YYYY-MM-DD'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>  
                  </Row>
                  <Row>
          <Col span={24}>
              <Form.Item
                label="现场图片"
                name="fieldId"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
              >
            
                <Dragger
                name='file'
                action="/gunshiApp/tsg/assessTeamRating/file/upload/singleSimple"
                onChange={imgfileChange}
                beforeUpload={imgbeforeUpload}
                onDrop={(info) => { console.log(info); }}
                  fileList={imgfileList}
                  disabled={imgloading}
              >
                  <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
                  <p className="ant-upload-hint">
                    支持扩展名：.jpg .png 
                </p>
              </Dragger>
              
              <Row gutter={[16]}>
                {
                   loading ? <span>文件正在上传中，请等待</span> :
                  imgfileList.length > 0 && imgfileList.map(file => {
                  return (
                      <Col span={12}>
                        <div className={'file-item'}  >
                        <div className='file-description'>
                            <Image width={60} src={url +file.response?.data?.filePath} alt='' />
                            <span>{file.name}</span>
                          </div>
                        <div
                          className={'delete-icon'}
                          onClick={() => imgdeleteFile(file.response?.data?.fileId)}
                        >
                          <DeleteOutlined
                          />
                          </div>
                        </div>
                      </Col>
                  )
                })
                }

              </Row>
              </Form.Item>
          </Col>
                  </Row>
                  <Form.Item {...btnItemLayout}>
            <Button type="primary" htmlType="submit">
               提交
            </Button>
          </Form.Item>
              </Form>
          </Modal>

          {/* 评分详情中整改的详情查看 */}
          <Modal
            open={zgViewOpen}
            width={800}
            footer={null}
            onCancel={() => { setzgViewOpen(false); ;setZgItem('');}}
            title="查看"
            destroyOnClose
            wrapClassName='zgview-modal'
          >
              <PfViewModal zgItem={zgItem} record={Item} onCancel={() => {setzgViewOpen(false); ;setZgItem('');}} />
          </Modal>
    </div>
  )
}