@titaui/pc 1.7.45 → 1.7.49

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

@@ -1,403 +0,0 @@
-import React, { useEffect, useState, useRef, useCallback } from "react";
-// import {  message } from 'antd';
-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 SelectLayer from "./drop-down-box";
-import close from "./image/icon-canceled.svg"
-import logo from "./image/logo.svg"
-import './index.scss';
-const okrClassifyList = [
-    { label: "1-10", value: 1 },
-    { label: "11-20", value: 2 },
-    { label: "21-50", value: 3 },
-    { label: "51-100", value: 4 },
-    { label: "101-200", value: 5 },
-    { label: "201-500", value: 6 },
-    { label: "501-1000", value: 7 },
-    { label: "1001-5000", value: 8 },
-    { label: "5001-10000", value: 9 },
-    { label: "10000+", value: 10 },
-    { label: "我代表一组公司", value: 11 },
-];
-const okrClassifyList1 = [
-    { label: "企业 CEO", value: 1 },
-    { label: "HRD", value: 2 },
-    { label: "HR 专员", value: 3 },
-    { label: "IT 负责人", value: 4 },
-    { label: "采购专员", value: 5 },
-    { label: "业务部门主管", value: 6 },
-    { label: "其他", value: 7 },
-];
-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
-
-    const [name, setName] = useState(lname)
-    const [errMsg, setErrMsg] = useState('')
-
-    const [phone, setPhone] = useState(lmobile)
-    const [errMsg1, setErrMsg1] = useState('')
-
-    const [company, setCompany] = useState(lcompany)
-    const [errMsg2, setErrMsg2] = useState('')
-
-    const [errMsgNum, setErrMsgNum] = useState('')
-    const [errMsgIde, setErrMsgIde] = useState('')
-    const [errMsgModule, setErrMsgMoudle] = useState('')
-
-    const [modules, setModules] = useState([])
-
-    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('')
-        }
-    }
-    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 onChangePhone = (val) => {
-        setPhone(val)
-        if (val == '') {
-            setErrMsg1('手机号不能为空')
-        } else {
-            setErrMsg1('')
-        }
-    }
-    const onBlurCompany = () => {
-        if (company == '') {
-            setErrMsg2('公司名称不能为空')
-        } else {
-            setErrMsg2('')
-        }
-    }
-    const onChangeCompany = (val) => {
-        setCompany(val)
-        if (val == '') {
-            setErrMsg2('公司名称不能为空')
-        } else {
-            setErrMsg2('')
-        }
-    }
-    const onChangeCode = (val) => {
-        setCode(val)
-        if (val == '') {
-            setErrMsg3('验证码不能为空')
-        } else {
-            setErrMsg3('')
-        }
-    }
-    const onBlurCode = () => {
-        if (code == '') {
-            setErrMsg3('验证码不能为空')
-        } else {
-            setErrMsg3('')
-        }
-    }
-
-    //下拉框系列产品
-    const [selectValue, setSelectValue] = useState(0);
-    const handleSelectOkrClassify = useCallback((item) => {
-        setErrMsgNum('')
-
-        setSelectValue(item.value)
-    }, [])
-
-    const [selectValue1, setSelectValue1] = useState(0);
-    const handleSelectOkrClassify1 = useCallback((item) => {
-        setErrMsgIde('')
-
-        setSelectValue1(item.value)
-    }, [])
-
-    // 深度克隆
-
-    // 模块系列产品
-    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 handelChangeImage = (e) => {
-        let 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 ? okrClassifyList[selectValue - 1].label : ''
-        let identity = selectValue1 ? okrClassifyList1[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}，用户：${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: '系统内-申请演示',
-            });
-          })
-        }
-
-
-    }
-
-    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">
-
-                        <SelectLayer
-                            className="tita-appointment-demo-right-form-item-left"
-                            style={{ width: '192px' }}
-                            items={okrClassifyList1}
-                            initValue={selectValue1}
-                            renderSuffixIcon
-                            initText="请选择"
-                            onChangeClassify={handleSelectOkrClassify1}
-                            title="您的身份"
-                            errMsg={errMsgIde}
-                        />
-                        <SelectLayer
-                            className="tita-appointment-demo-right-form-item-right"
-                            style={{ width: '218.06px' }}
-                            items={okrClassifyList}
-                            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}
-                    />
-
-                    <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>
-                    </div>
-                    }
-                    <div className="tita-appointment-demo-right-form-submit"
-                        onClick={onClickSubmit}
-                    >提交</div>
-                </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>
-
-
-}

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

@@ -1,200 +0,0 @@
-$baseFontSize: 37.5; //默认基准font-size
-
-@function px2rem($px) {
-    @return $px / $baseFontSize * 1rem;
-}
-
-.tita-appointment-demo {
-    width: 872px;
-    height: 520px;
-    background: #FFFFFF;
-    border-radius: 8px;
-    display: flex;
-
-    &-close {
-        width: 18px;
-        height: 18px;
-        position: absolute;
-        top: 14px;
-        right: 35px;
-        cursor: pointer;
-        z-index: 3;
-
-        img {
-            width: 18px;
-            height: 18px;
-        }
-    }
-
-    &-bcg {
-        width: 528px;
-        height: 390px;
-        background: url('./image/demo-bcg.png') no-repeat;
-        background-size: 528px 390px;
-        position: absolute;
-        left: 1px;
-        bottom: -15px;
-        &.performance-demo {
-            background-image: url('./image/performance-bcg.png');
-            background-repeat: no-repeat;
-            background-size: 455px 386px;
-            background-position: bottom left;
-        }
-    }
-
-    &-left {
-        margin: 36px 0 0 32px;
-
-        &-title {
-            font-size: 26px;
-            font-weight: 600;
-            color: #141C28;
-            line-height: 40px;
-        }
-
-        &-subtitle {
-            font-size: 14px;
-            font-weight: 400;
-            color: #6F7886;
-            line-height: 22px;
-            margin-top: 4px;
-        }
-    }
-
-    &-right {
-        z-index: 2;
-
-        &-form {
-            width: 420px;
-            margin-left: 36px;
-
-            &-code {
-                margin-top: 16px;
-                display: flex;
-
-                &-left {
-                    width: 309px;
-                }
-
-                img {
-                    width: 100px;
-                    height: 34px;
-                    cursor: pointer;
-                    margin-left: 10px;
-                    margin-top: 26px;
-                }
-            }
-
-            &-double {
-                display: flex;
-                margin-top: 40px;
-
-                &-left {
-                    margin-right: 10px;
-                }
-            }
-
-            &-item {
-                width: 420px;
-                box-sizing: border-box !important;
-                margin-top: 16px;
-                position: relative;
-
-                &:nth-of-type(1) {
-                    display: flex;
-                    margin-top: 40px;
-                }
-
-                &:nth-of-type(2) {
-                    display: flex;
-                }
-
-                &-left {
-                    margin-right: 10px;
-                }
-
-                &-module-errmsg {
-                    position: absolute;
-                    top: 66px;
-                    left: 12px;
-                    font-size: 12px;
-                    font-weight: 400;
-                    color: #F05E5E;
-                    line-height: 18px;
-                }
-
-                &-module {
-                    margin-bottom: 11px;
-                    font-size: 14px;
-                    line-height: 22px;
-                    font-weight: 600;
-                    color: #3F4755;
-
-                    .required {
-                        color: #F05E5E;
-                        font-size: 14px;
-                        vertical-align: middle;
-                    }
-                }
-
-                &-modules {
-                    margin-top: 4px;
-                    display: flex;
-
-                    &-item {
-                        cursor: pointer;
-                        box-sizing: border-box !important;
-                        height: 32px;
-                        width: 94px;
-                        background: #FFFFFF;
-                        border-radius: 4px;
-                        border: 1px solid #E9ECF0;
-                        line-height: 30px;
-                        text-align: center;
-                        color: #3F4755;
-                        font-size: 14px;
-                        font-weight: 400;
-
-                        &:nth-of-type(1) {
-                            width: 107px;
-                        }
-
-                        &:not(:nth-of-type(1)) {
-                            margin-left: 10px;
-                        }
-
-                        &:hover {
-                            background: #E9F1FF;
-                        }
-
-                        &-active {
-                            background: #E9F1FF;
-                            color: #2879FF;
-                            border: none;
-                            line-height: 32px;
-                        }
-                    }
-                }
-            }
-
-            &-submit {
-                cursor: pointer;
-                margin-top: 24px;
-                box-sizing: border-box !important;
-                width: 420px;
-                height: 36px;
-                line-height: 36px;
-                text-align: center;
-                background: #2879FF;
-                border-radius: 4px;
-                font-size: 14px;
-                font-weight: 400;
-                color: #FFFFFF;
-
-                &:hover {
-                    background: #5C8EFF;
-                }
-            }
-        }
-    }
-}