@titaui/pc 1.9.45 → 1.9.49

package/src/components/point-demo/index.js

@@ -1,381 +1,426 @@
-import React, { useEffect, useState, useRef, useCallback } from "react";
+import React, {
+  useEffect, useState, useRef, useCallback,
+} from "react";
 // import {  message } from 'antd';
-import Toast from '../toast';
+import axios from "axios";
+import ReactDOM from "react-dom";
+import Toast from "../toast";
 import Dialog from "../dialog";
-import axios from 'axios'
-import ReactDOM from 'react-dom'
-import {getTenantInfo} from '../../utils/helpers';
-// const isMobile = window.userAgent === 'mobile'
-const isMobile = document.body.clientWidth < 768
-import Input from './input'
+import { getTenantInfo } from "../../utils/helpers";
+import Input from "./input";
 import SelectLayer from "./drop-down-box";
-import close from "./image/icon-canceled.svg"
-import logo from "./image/logo.svg"
-import { getOkrClassifyList, getOkrClassifyList1 } from './constant';
-import './index.scss';
+import close from "./image/icon-canceled.svg";
+import logo from "./image/logo.svg";
+import { getOkrClassifyList, getOkrClassifyList1 } from "./constant";
+import "./index.scss";
+// const isMobile = window.userAgent === 'mobile'
+const isMobile = document.body.clientWidth < 768;
 
-export default (props) => {
-    const { visible = true, setVisible,localKey = 'issubmitted' } = props
-    const isPerformance = getTenantInfo().tenantType == 2;
-    // console.log(isMobile)
-    // console.log(document.body.clientWidth<800)
-    let uname = BSGlobal.loginUserInfo.Name
-    let uid = BSGlobal.tenantInfo.Id
-    let source = BSGlobal.tenantInfo.Source
-    let lname = BSGlobal.loginUserInfo.Name
-    let lmobile = BSGlobal.loginUserInfo.Mobile
-    let lcompany = BSGlobal.tenantInfo.Name
+export default function (props) {
+  const { visible = true, setVisible, localKey = "issubmitted" } = props;
+  const isPerformance = getTenantInfo().tenantType == 2;
+  // console.log(isMobile)
+  // console.log(document.body.clientWidth<800)
+  const uname = BSGlobal.loginUserInfo.Name;
+  const uid = BSGlobal.tenantInfo.Id;
+  const source = BSGlobal.tenantInfo.Source;
+  const lname = BSGlobal.loginUserInfo.Name;
+  const lmobile = BSGlobal.loginUserInfo.Mobile;
+  const lcompany = BSGlobal.tenantInfo.Name;
 
-    const [name, setName] = useState(lname)
-    const [errMsg, setErrMsg] = useState('')
+  const [name, setName] = useState(lname);
+  const [errMsg, setErrMsg] = useState("");
 
-    const [phone, setPhone] = useState(lmobile)
-    const [errMsg1, setErrMsg1] = useState('')
+  const [phone, setPhone] = useState(lmobile);
+  const [errMsg1, setErrMsg1] = useState("");
 
-    const [company, setCompany] = useState(lcompany)
-    const [errMsg2, setErrMsg2] = useState('')
+  const [company, setCompany] = useState(lcompany);
+  const [errMsg2, setErrMsg2] = useState("");
 
-    const [errMsgNum, setErrMsgNum] = useState('')
-    const [errMsgIde, setErrMsgIde] = useState('')
-    const [errMsgModule, setErrMsgMoudle] = useState('')
+  const [errMsgNum, setErrMsgNum] = useState("");
+  const [errMsgIde, setErrMsgIde] = useState("");
+  const [errMsgModule, setErrMsgMoudle] = useState("");
 
-    const [modules, setModules] = useState([])
+  const [modules, setModules] = useState([]);
 
-    const [code, setCode] = useState('')
-    const [errMsg3, setErrMsg3] = useState('')
-    const [yzm_guid, setYzm_guid] = useState(null)
+  const [code, setCode] = useState("");
+  const [errMsg3, setErrMsg3] = useState("");
+  const [yzm_guid, setYzm_guid] = useState(null);
 
-    useEffect(() => {
-        setYzm_guid(renderCode())
-    }, [])
-    // 输入框系列产品
-    const onBlurName = () => {
-        if (name == '') {
-            setErrMsg('姓名不能为空')
-        } else {
-            setErrMsg('')
-        }
+  useEffect(() => {
+    setYzm_guid(renderCode());
+  }, []);
+  // 输入框系列产品
+  const onBlurName = () => {
+    if (name == "") {
+      setErrMsg("姓名不能为空");
+    } else {
+      setErrMsg("");
     }
-    const onChangeName = (val) => {
-        setName(val)
-        if (val == '') {
-            setErrMsg('姓名不能为空')
-        } else {
-            setErrMsg('')
-        }
+  };
+  const onChangeName = (val) => {
+    setName(val);
+    if (val == "") {
+      setErrMsg("姓名不能为空");
+    } else {
+      setErrMsg("");
     }
-    const onBlurPhone = () => {
-        if (phone == '') {
-            setErrMsg1('手机号不能为空')
-        } else if (!/^1\d{10}$/.test(phone)) {
-            setErrMsg1('手机号格式不正确')
-        } else {
-            setErrMsg1('')
-        }
+  };
+  const onBlurPhone = () => {
+    if (phone == "") {
+      setErrMsg1("手机号不能为空");
+    } else if (!/^1\d{10}$/.test(phone)) {
+      setErrMsg1("手机号格式不正确");
+    } else {
+      setErrMsg1("");
     }
-    const onChangePhone = (val) => {
-        setPhone(val)
-        if (val == '') {
-            setErrMsg1('手机号不能为空')
-        } else {
-            setErrMsg1('')
-        }
+  };
+  const onChangePhone = (val) => {
+    setPhone(val);
+    if (val == "") {
+      setErrMsg1("手机号不能为空");
+    } else {
+      setErrMsg1("");
     }
-    const onBlurCompany = () => {
-        if (company == '') {
-            setErrMsg2('公司名称不能为空')
-        } else {
-            setErrMsg2('')
-        }
+  };
+  const onBlurCompany = () => {
+    if (company == "") {
+      setErrMsg2("公司名称不能为空");
+    } else {
+      setErrMsg2("");
     }
-    const onChangeCompany = (val) => {
-        setCompany(val)
-        if (val == '') {
-            setErrMsg2('公司名称不能为空')
-        } else {
-            setErrMsg2('')
-        }
+  };
+  const onChangeCompany = (val) => {
+    setCompany(val);
+    if (val == "") {
+      setErrMsg2("公司名称不能为空");
+    } else {
+      setErrMsg2("");
     }
-    const onChangeCode = (val) => {
-        setCode(val)
-        if (val == '') {
-            setErrMsg3('验证码不能为空')
-        } else {
-            setErrMsg3('')
-        }
+  };
+  const onChangeCode = (val) => {
+    setCode(val);
+    if (val == "") {
+      setErrMsg3("验证码不能为空");
+    } else {
+      setErrMsg3("");
     }
-    const onBlurCode = () => {
-        if (code == '') {
-            setErrMsg3('验证码不能为空')
-        } else {
-            setErrMsg3('')
-        }
+  };
+  const onBlurCode = () => {
+    if (code == "") {
+      setErrMsg3("验证码不能为空");
+    } else {
+      setErrMsg3("");
     }
+  };
 
-    //下拉框系列产品
-    const [selectValue, setSelectValue] = useState(0);
-    const handleSelectOkrClassify = useCallback((item) => {
-        setErrMsgNum('')
+  // 下拉框系列产品
+  const [selectValue, setSelectValue] = useState(0);
+  const handleSelectOkrClassify = useCallback((item) => {
+    setErrMsgNum("");
 
-        setSelectValue(item.value)
-    }, [])
+    setSelectValue(item.value);
+  }, []);
 
-    const [selectValue1, setSelectValue1] = useState(0);
-    const handleSelectOkrClassify1 = useCallback((item) => {
-        setErrMsgIde('')
+  const [selectValue1, setSelectValue1] = useState(0);
+  const handleSelectOkrClassify1 = useCallback((item) => {
+    setErrMsgIde("");
 
-        setSelectValue1(item.value)
-    }, [])
+    setSelectValue1(item.value);
+  }, []);
 
-    // 深度克隆
+  // 深度克隆
 
-    // 模块系列产品
-    const has = (module) => {
-        for (let i = 0; i < modules.length; i++) {
-            if (modules[i] == module) {
-                return true
-            }
-        }
-        return false
+  // 模块系列产品
+  const has = (module) => {
+    for (let i = 0; i < modules.length; i++) {
+      if (modules[i] == module) {
+        return true;
+      }
     }
+    return false;
+  };
 
-    const onClickAddModules = (module) => {
-        if (errMsgModule) {
-            setErrMsgMoudle('')
-        }
-        let data = JSON.parse(JSON.stringify(modules));
-        if (has(module)) {
-            data = data.filter(item => { return item != module })
-        } else {
-            data.push(module)
-        }
-        setModules(data)
+  const onClickAddModules = (module) => {
+    if (errMsgModule) {
+      setErrMsgMoudle("");
     }
-
-    // 验证码系列产品
-    const handelChangeImage = (e) => {
-        let yzm = renderCode() + "?v=" + (new Date()).getTime()
-        setYzm_guid(yzm)
+    let data = JSON.parse(JSON.stringify(modules));
+    if (has(module)) {
+      data = data.filter((item) => item != module);
+    } else {
+      data.push(module);
     }
-    const renderCode = () => {
-        let yzm_guid = new Date().getTime() + '';
-        for (let i = 0; i < 10; i++) {
-            yzm_guid += Math.floor(Math.random() * 10);
-        }
-        return yzm_guid;
+    setModules(data);
+  };
+
+  // 验证码系列产品
+  const handelChangeImage = (e) => {
+    const yzm = `${renderCode()}?v=${(new Date()).getTime()}`;
+    setYzm_guid(yzm);
+  };
+  const renderCode = () => {
+    let yzm_guid = `${new Date().getTime()}`;
+    for (let i = 0; i < 10; i++) {
+      yzm_guid += Math.floor(Math.random() * 10);
     }
+    return yzm_guid;
+  };
 
-    const onClickSubmit = () => {
-        let num = selectValue ? getOkrClassifyList()[selectValue - 1].label : ''
-        let identity = selectValue1 ? getOkrClassifyList1()[selectValue1 - 1].label : ''
-        if (!name || !phone || !company || !num || !identity || !modules.length > 0 || !code) {
-            if (!name) {
-                setErrMsg('姓名不能为空')
-            }
-            if (!phone) {
-                setErrMsg1('手机号码不能为空')
-            }
-            if (!company) {
-                setErrMsg2('公司名称不能为空')
-            }
-            if (!num) {
-                setErrMsgNum('公司人数不能为空')
-            }
-            if (!identity) {
-                setErrMsgIde('您的身份不能为空')
-            }
-            if (!code) {
-                setErrMsg3('验证码不能为空')
-            }
-            if (!modules.length > 0) {
-                setErrMsgMoudle('请至少选择一项')
-            }
+  const onClickSubmit = () => {
+    const num = selectValue ? getOkrClassifyList()[selectValue - 1].label : "";
+    const identity = selectValue1 ? getOkrClassifyList1()[selectValue1 - 1].label : "";
+    if (!name || !phone || !company || !num || !identity || !modules.length > 0 || !code) {
+      if (!name) {
+        setErrMsg("姓名不能为空");
+      }
+      if (!phone) {
+        setErrMsg1("手机号码不能为空");
+      }
+      if (!company) {
+        setErrMsg2("公司名称不能为空");
+      }
+      if (!num) {
+        setErrMsgNum("公司人数不能为空");
+      }
+      if (!identity) {
+        setErrMsgIde("您的身份不能为空");
+      }
+      if (!code) {
+        setErrMsg3("验证码不能为空");
+      }
+      if (!modules.length > 0) {
+        setErrMsgMoudle("请至少选择一项");
+      }
+    } else {
+      axios({
+        method: "post",
+        url: `${window.location.origin}/api/v1/markEmail/SendKefu`,
+        data: {
+          title: "预约演示",
+          content: `租户ID：${uid}，租户账号名称：${uname}，用户：$，手机号：${phone}，公司名称:${company}，公司人数：${num}，身份：${identity}，${isPerformance ? "公司绩效情况是" : "我感兴趣的模块是"}：${modules.join()}，news...`,
+          code,
+          keyRandomV2: yzm_guid.indexOf("?") !== -1 ? yzm_guid.slice(0, yzm_guid.indexOf("?")) : yzm_guid,
+          source,
+        },
+      }).then((res) => {
+        if (res.data.Code) {
+          // message.success('提交成功')
+          Toast.Success("提交成功");
+          setVisible(false);
+          localStorage.setItem(localKey, true);
         } else {
-            axios({
-                method: 'post',
-                url: `${window.location.origin}/api/v1/markEmail/SendKefu`,
-                data: {
-                    title: '预约演示',
-                    content: `租户ID：${uid}，租户账号名称：${uname}，用户：${name}，手机号：${phone}，公司名称:${company}，公司人数：${num}，身份：${identity}，${isPerformance?'公司绩效情况是':'我感兴趣的模块是'}：${modules.join()}，news...`,
-                    code: code,
-                    keyRandomV2: yzm_guid.indexOf('?') !== -1 ? yzm_guid.slice(0, yzm_guid.indexOf('?')) : yzm_guid,
-                    source: source,
-                },
-            }).then((res) => {
-                if (res.data.Code) {
-                    // message.success('提交成功')
-                    Toast.Success('提交成功')
-                    setVisible(false)
-                    localStorage.setItem(localKey, true)
-                } else {
-                    setCode('')
-                    handelChangeImage()
-                    setErrMsg3(res.data.Message)
-                    // message.error(res.data.Message)
-                    Toast.Warning(res.data.Message)
-                }
-            }).catch((error) => {
-                console.log(error)
-            }).finally(() => {
-              // @ts-ignore
-              window.titaTracker &&
-              // @ts-ignore
-              window.titaTracker('action').record({
-              actionName: '申请演示__提交',
-              actionGroup: '试用版-申请演示',
-              productName: '系统内-申请演示',
-            });
-          })
+          setCode("");
+          handelChangeImage();
+          setErrMsg3(res.data.Message);
+          // message.error(res.data.Message)
+          Toast.Warning(res.data.Message);
         }
-
-
+      }).catch((error) => {
+        console.log(error);
+      }).finally(() => {
+        // @ts-ignore
+        window.titaTracker
+              // @ts-ignore
+              && window.titaTracker("action").record({
+                actionName: "申请演示__提交",
+                actionGroup: "试用版-申请演示",
+                productName: "系统内-申请演示",
+              });
+      });
     }
+  };
 
-    const renderModal = () => {
-        return <div className="tita-appointment-demo">
-            <div className="tita-appointment-demo-close"
-                onClick={() => setVisible(false)}
-            ><img src={close} /></div>
-            <div className={"tita-appointment-demo-bcg" + (isPerformance ? ' performance-demo':'')}></div>
-            <div className="tita-appointment-demo-left">
-                <div className="tita-appointment-demo-left-title">
-                    {isPerformance ? '立即获取专业的绩效在线演示' : '立即获取 OKR 行业案例'}
-                </div>
-                <div className="tita-appointment-demo-left-subtitle">
-                    现在预约你将获得 15-30 分钟免费的 1对1 人工在线服务
-                </div>
-            </div>
-            <div className="tita-appointment-demo-right">
-                <div className="tita-appointment-demo-right-form">
-                    <div className="tita-appointment-demo-right-form-item">
-                        <Input className="tita-appointment-demo-right-form-item-left"
-                            label={'名称'} placeholder="请输入您的名称"
-                            id="name"
-                            errMsg={errMsg}
-                            required={true}
-                            value={name}
-                            onChange={(val) => onChangeName(val)}
-                            onBlur={onBlurName}
-                        />
-                        <Input className="tita-appointment-demo-right-form-item-right"
-                            label="手机号码" placeholder={'请输入手机号'}
-                            id="phone"
-                            errMsg={errMsg1}
-                            required={true}
-                            value={phone}
-                            onChange={(val) => onChangePhone(val)}
-                            onBlur={onBlurPhone}
-                        />
-                    </div>
-                    <div className="tita-appointment-demo-right-form-item">
+  const renderModal = () => (
+    <div className="tita-appointment-demo">
+      <div
+        className="tita-appointment-demo-close"
+        onClick={() => setVisible(false)}
+      >
+        <img src={close} />
+      </div>
+      <div className={`tita-appointment-demo-bcg${isPerformance ? " performance-demo" : ""}`} />
+      <div className="tita-appointment-demo-left">
+        <div className="tita-appointment-demo-left-title">
+          {isPerformance ? "立即获取专业的绩效在线演示" : "立即获取 OKR 行业案例"}
+        </div>
+        <div className="tita-appointment-demo-left-subtitle">
+          现在预约你将获得 15-30 分钟免费的 1对1 人工在线服务
+        </div>
+      </div>
+      <div className="tita-appointment-demo-right">
+        <div className="tita-appointment-demo-right-form">
+          <div className="tita-appointment-demo-right-form-item">
+            <Input
+              className="tita-appointment-demo-right-form-item-left"
+              label="名称"
+              placeholder="请输入您的名称"
+              id="name"
+              errMsg={errMsg}
+              required
+              value={name}
+              onChange={(val) => onChangeName(val)}
+              onBlur={onBlurName}
+            />
+            <Input
+              className="tita-appointment-demo-right-form-item-right"
+              label="手机号码"
+              placeholder="请输入手机号"
+              id="phone"
+              errMsg={errMsg1}
+              required
+              value={phone}
+              onChange={(val) => onChangePhone(val)}
+              onBlur={onBlurPhone}
+            />
+          </div>
+          <div className="tita-appointment-demo-right-form-item">
 
-                        <SelectLayer
-                            className="tita-appointment-demo-right-form-item-left"
-                            style={{ width: '192px' }}
-                            items={getOkrClassifyList1()}
-                            initValue={selectValue1}
-                            renderSuffixIcon
-                            initText={'请选择'}
-                            onChangeClassify={handleSelectOkrClassify1}
-                            title="您的身份"
-                            errMsg={errMsgIde}
-                        />
-                        <SelectLayer
-                            className="tita-appointment-demo-right-form-item-right"
-                            style={{ width: '218.06px' }}
-                            items={getOkrClassifyList()}
-                            initValue={selectValue}
-                            renderSuffixIcon
-                            initText={'请选择'}
-                            onChangeClassify={handleSelectOkrClassify}
-                            title="公司人数"
-                            errMsg={errMsgNum}
-                        />
-                    </div>
-                    <Input
-                        className="tita-appointment-demo-right-form-item"
-                        label="公司名称" placeholder="公司全称"
-                        id="company"
-                        errMsg={errMsg2}
-                        required={true}
-                        value={company}
-                        onChange={(val) => onChangeCompany(val)}
-                        onBlur={onBlurCompany}
-                    />
+            <SelectLayer
+              className="tita-appointment-demo-right-form-item-left"
+              style={{ width: "192px" }}
+              items={getOkrClassifyList1()}
+              initValue={selectValue1}
+              renderSuffixIcon
+              initText="请选择"
+              onChangeClassify={handleSelectOkrClassify1}
+              title="您的身份"
+              errMsg={errMsgIde}
+            />
+            <SelectLayer
+              className="tita-appointment-demo-right-form-item-right"
+              style={{ width: "218.06px" }}
+              items={getOkrClassifyList()}
+              initValue={selectValue}
+              renderSuffixIcon
+              initText="请选择"
+              onChangeClassify={handleSelectOkrClassify}
+              title="公司人数"
+              errMsg={errMsgNum}
+            />
+          </div>
+          <Input
+            className="tita-appointment-demo-right-form-item"
+            label="公司名称"
+            placeholder="公司全称"
+            id="company"
+            errMsg={errMsg2}
+            required
+            value={company}
+            onChange={(val) => onChangeCompany(val)}
+            onBlur={onBlurCompany}
+          />
 
-                    <div className="tita-appointment-demo-right-form-code">
-                        <Input className="tita-appointment-demo-right-form-code-left"
-                            label="验证码" placeholder="请输入验证码"
-                            id="code"
-                            errMsg={errMsg3}
-                            required={true}
-                            value={code}
-                            onChange={(val) => onChangeCode(val)}
-                            onBlur={onBlurCode}
-                        />
-                        <img src={`${window.location.origin}/Account/Account/GetCaptchaImgV2/${yzm_guid}`} alt='' onClick={handelChangeImage} />
-                    </div>
-                    {!isPerformance && <div className="tita-appointment-demo-right-form-item ">
-                        <div className="tita-appointment-demo-right-form-item-module-errmsg">{errMsgModule && errMsgModule}</div>
-                        <div className="tita-appointment-demo-right-form-item-module">
-                            您感兴趣的模块是（可多选）<span className="required">*</span>
-                        </div>
-                        <div className="tita-appointment-demo-right-form-item-modules">
-                            <div className={`${has('OKR 目标管理') ? 'tita-appointment-demo-right-form-item-modules-item-active' : ''} tita-appointment-demo-right-form-item-modules-item`}
-                                onClick={() => onClickAddModules('OKR 目标管理')}
-                            >OKR 目标管理</div>
-                            <div className={`${has("绩效考核") ? 'tita-appointment-demo-right-form-item-modules-item-active' : ''} tita-appointment-demo-right-form-item-modules-item`}
-                                onClick={() => onClickAddModules("绩效考核")}
-                            >绩效考核</div>
-                            <div className={`${has('项目管理') ? 'tita-appointment-demo-right-form-item-modules-item-active' : ''} tita-appointment-demo-right-form-item-modules-item`}
-                                onClick={() => onClickAddModules('项目管理')}
-                            >项目管理</div>
-                            <div className={`${has('计划管理') ? 'tita-appointment-demo-right-form-item-modules-item-active' : ''} tita-appointment-demo-right-form-item-modules-item`}
-                                onClick={() => onClickAddModules('计划管理')}
-                            >计划管理</div>
-                        </div>
-                    </div>}
-                    {
-                        isPerformance && <div className="tita-appointment-demo-right-form-item ">
-                        <div className="tita-appointment-demo-right-form-item-module-errmsg">{errMsgModule && errMsgModule}</div>
-                        <div className="tita-appointment-demo-right-form-item-module">
-                        你们企业目前的绩效现状（可多选）<span className="required">*</span>
-                        </div>
-                        <div className="tita-appointment-demo-right-form-item-modules">
-                            <div className={`${has('做过绩效') ? 'tita-appointment-demo-right-form-item-modules-item-active' : ''} tita-appointment-demo-right-form-item-modules-item`}
-                                onClick={() => onClickAddModules('做过绩效')}
-                            > 做过绩效</div>
-                            <div className={`${has('没有做过') ? 'tita-appointment-demo-right-form-item-modules-item-active' : ''} tita-appointment-demo-right-form-item-modules-item`}
-                                onClick={() => onClickAddModules('没有做过')}
-                            >没有做过</div>
-                            <div className={`${has('有软件') ? 'tita-appointment-demo-right-form-item-modules-item-active' : ''} tita-appointment-demo-right-form-item-modules-item`}
-                                onClick={() => onClickAddModules('有软件')}
-                            >有软件</div>
-                            <div className={`${has('无软件') ? 'tita-appointment-demo-right-form-item-modules-item-active' : ''} tita-appointment-demo-right-form-item-modules-item`}
-                                onClick={() => onClickAddModules('无软件')}
-                            >无软件</div>
+          <div className="tita-appointment-demo-right-form-code">
+            <Input
+              className="tita-appointment-demo-right-form-code-left"
+              label="验证码"
+              placeholder="请输入验证码"
+              id="code"
+              errMsg={errMsg3}
+              required
+              value={code}
+              onChange={(val) => onChangeCode(val)}
+              onBlur={onBlurCode}
+            />
+            <img src={`${window.location.origin}/Account/Account/GetCaptchaImgV2/${yzm_guid}`} alt="" onClick={handelChangeImage} />
+          </div>
+          {!isPerformance && (
+          <div className="tita-appointment-demo-right-form-item ">
+            <div className="tita-appointment-demo-right-form-item-module-errmsg">{errMsgModule && errMsgModule}</div>
+            <div className="tita-appointment-demo-right-form-item-module">
+              您感兴趣的模块是（可多选）
+              <span className="required">*</span>
+            </div>
+            <div className="tita-appointment-demo-right-form-item-modules">
+              <div
+                className={`${has("OKR 目标管理") ? "tita-appointment-demo-right-form-item-modules-item-active" : ""} tita-appointment-demo-right-form-item-modules-item`}
+                onClick={() => onClickAddModules("OKR 目标管理")}
+              >
+                OKR 目标管理
+              </div>
+              <div
+                className={`${has("绩效考核") ? "tita-appointment-demo-right-form-item-modules-item-active" : ""} tita-appointment-demo-right-form-item-modules-item`}
+                onClick={() => onClickAddModules("绩效考核")}
+              >
+                绩效考核
+              </div>
+              <div
+                className={`${has("项目管理") ? "tita-appointment-demo-right-form-item-modules-item-active" : ""} tita-appointment-demo-right-form-item-modules-item`}
+                onClick={() => onClickAddModules("项目管理")}
+              >
+                项目管理
+              </div>
+              <div
+                className={`${has("计划管理") ? "tita-appointment-demo-right-form-item-modules-item-active" : ""} tita-appointment-demo-right-form-item-modules-item`}
+                onClick={() => onClickAddModules("计划管理")}
+              >
+                计划管理
+              </div>
+            </div>
+          </div>
+          )}
+          {
+                        isPerformance && (
+                        <div className="tita-appointment-demo-right-form-item ">
+                          <div className="tita-appointment-demo-right-form-item-module-errmsg">{errMsgModule && errMsgModule}</div>
+                          <div className="tita-appointment-demo-right-form-item-module">
+                            你们企业目前的绩效现状（可多选）
+                            <span className="required">*</span>
+                          </div>
+                          <div className="tita-appointment-demo-right-form-item-modules">
+                            <div
+                              className={`${has("做过绩效") ? "tita-appointment-demo-right-form-item-modules-item-active" : ""} tita-appointment-demo-right-form-item-modules-item`}
+                              onClick={() => onClickAddModules("做过绩效")}
+                            >
+                              {" "}
+                              做过绩效
+                            </div>
+                            <div
+                              className={`${has("没有做过") ? "tita-appointment-demo-right-form-item-modules-item-active" : ""} tita-appointment-demo-right-form-item-modules-item`}
+                              onClick={() => onClickAddModules("没有做过")}
+                            >
+                              没有做过
+                            </div>
+                            <div
+                              className={`${has("有软件") ? "tita-appointment-demo-right-form-item-modules-item-active" : ""} tita-appointment-demo-right-form-item-modules-item`}
+                              onClick={() => onClickAddModules("有软件")}
+                            >
+                              有软件
+                            </div>
+                            <div
+                              className={`${has("无软件") ? "tita-appointment-demo-right-form-item-modules-item-active" : ""} tita-appointment-demo-right-form-item-modules-item`}
+                              onClick={() => onClickAddModules("无软件")}
+                            >
+                              无软件
+                            </div>
+                          </div>
                         </div>
-                    </div>
+                        )
                     }
-                    <div className="tita-appointment-demo-right-form-submit"
-                        onClick={onClickSubmit}
-                    >提交</div>
-                </div>
-            </div>
-
+          <div
+            className="tita-appointment-demo-right-form-submit"
+            onClick={onClickSubmit}
+          >
+            提交
+          </div>
         </div>
-    }
+      </div>
 
-    // return visibile && ReactDOM.createPortal(renderModal(), document.body);
-    return <Dialog 
-        visible={visible} 
-        noFooter
-        footer=''
-        style={{width:'872px',height:'520px'}}
-        noHeadLine
-        noCloseIcon>
-        {renderModal()}
-    </Dialog>
+    </div>
+  );
 
-
-}
+  // return visibile && ReactDOM.createPortal(renderModal(), document.body);
+  return (
+    <Dialog
+      visible={visible}
+      noFooter
+      footer=""
+      style={{ width: "872px", height: "520px" }}
+      noHeadLine
+      noCloseIcon
+    >
+      {renderModal()}
+    </Dialog>
+  );
+}