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

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';
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 }) => {
  console.log("record",record);
  
  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 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)
      // debugger
    } else {
      setkhTableData([])
    }

  };

   // 删除考核对象
  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 person = () => {
    const e = form.getFieldValue("assessTeams")
    setSelectPerson(selectPerson)
    setTransferOpen(true)
  }
  // 考核模版显示
  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())
    } 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)
   }
   
 }, [mode,record])
  
  
 useEffect(() => {
   getDeptList()
}, [])
 
  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 />
              </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;