@titaui/pc 1.9.45 → 1.9.49

package/src/components/okrcase-library/okrcases-components/submitOkr-dialog.tsx

@@ -1,92 +1,96 @@
 import React, { useRef, useEffect, useState } from "react";
-import { postSurvey, getOkrOrderInfo, getOkrCaseProducts, postOkrCasesOrder } from '../server/network'
-import Toast from '../../toast';
-import { Modal } from 'tita-ui';
-import Dialog from '../../dialog'
-import Form from '../../form'
+import { Modal } from "tita-ui";
+import {
+  postSurvey, getOkrOrderInfo, getOkrCaseProducts, postOkrCasesOrder,
+} from "../server/network";
+import Toast from "../../toast";
+import Dialog from "../../dialog";
+import Form from "../../form";
 import { getLocale } from "../../../utils/getLocale";
-const { Fields } = Form
+
+const { Fields } = Form;
 
 interface Props1 {
   handleShowSubmitOkrWindow: Function;
   isShowSubmitOkrWindow: boolean;
   allViewAreaRef: any;
 }
-export const SubmitDialog = (props: Props1) => {
-
-  const { handleShowSubmitOkrWindow, isShowSubmitOkrWindow, allViewAreaRef } = props
-  const [type, setType] = useState('')
-  const [job, setJob] = useState('')
-  const [scene, setScene] = useState('')
+export function SubmitDialog(props: Props1) {
+  const { handleShowSubmitOkrWindow, isShowSubmitOkrWindow, allViewAreaRef } = props;
+  const [type, setType] = useState("");
+  const [job, setJob] = useState("");
+  const [scene, setScene] = useState("");
 
-  const formRef = useRef<any>()
+  const formRef = useRef<any>();
 
   const onSubmitButtonClick = () => {
     const body = {
       type,
       position: job,
-      scene
-    }
-    //校验
-    const err = formRef.current.verifing({ truonlyFirstErrore: false })
+      scene,
+    };
+    // 校验
+    const err = formRef.current.verifing({ truonlyFirstErrore: false });
     if (err.length) {
       console.log(err);
     } else {
       postSurvey(body).then((res) => {
-        Toast.Success('发送成功')
-        handleShowSubmitOkrWindow(false)
+        Toast.Success("发送成功");
+        handleShowSubmitOkrWindow(false);
       }).catch(() => {
-        Toast.Warning('发送失败')
-      })
+        Toast.Warning("发送失败");
+      });
     }
-
-  }
-
+  };
 
   return (
     <Dialog visible={isShowSubmitOkrWindow} noFooter width="480px" destroyOnClose noCloseIcon getContainer={() => document.body}>
       <div className="okr-cases-library__submitWindow">
-        <img src={require('../image/submit小驴.svg')} />
+        <img src={require("../image/submit小驴.svg")} />
         <div className="tu-icon-canceled" onClick={() => handleShowSubmitOkrWindow(false)} />
         <Form ref={formRef}>
           <Fields.Input
             name="type"
-            label={"OKR 的类型"}
-            placeholder={"如销售团队"}
-            require={true}
+            label="OKR 的类型"
+            placeholder="如销售团队"
+            require
             verifies={[{
-              'tip': "OKR类型不能为空",
-              'test': /\S/,
+              tip: "OKR类型不能为空",
+              test: /\S/,
             }]}
             onChange={setType}
           />
           <Fields.Input
             name="job"
-            label={"OKR 的岗位"}
-            placeholder={"如销售VP"}
-            require={true}
+            label="OKR 的岗位"
+            placeholder="如销售VP"
+            require
             verifies={[{
-              'tip': "OKR岗位不能为空",
-              'test': /\S/,
+              tip: "OKR岗位不能为空",
+              test: /\S/,
             }]}
             onChange={setJob}
           />
           <Fields.Textarea
             name="scene"
-            label={'OKR 应用场景'}
-            placeholder='如销售VP针对 「如何管理好团队」这个问题，应该创建怎样的 目标及关键成果'
+            label="OKR 应用场景"
+            placeholder="如销售VP针对 「如何管理好团队」这个问题，应该创建怎样的 目标及关键成果"
             require={false}
             onChange={setScene}
-            resizeType='none'
+            resizeType="none"
             areaHeight={96}
           />
         </Form>
-        <div className="okr-cases-library__submitWindow-submitButton"
-          onClick={onSubmitButtonClick}>{getLocale('Pro_detail_Submission')}</div>
+        <div
+          className="okr-cases-library__submitWindow-submitButton"
+          onClick={onSubmitButtonClick}
+        >
+          {getLocale("Pro_detail_Submission")}
+        </div>
       </div>
     </Dialog>
 
-  )
+  );
 }
 
 interface Props2 {
@@ -95,97 +99,114 @@ interface Props2 {
   allViewAreaRef: any;
 }
 
-
-export const PayDialog = (props: Props2) => {
-  const { isShowPayWindow, handleShowPayWindow, allViewAreaRef } = props
+export function PayDialog(props: Props2) {
+  const { isShowPayWindow, handleShowPayWindow, allViewAreaRef } = props;
 
   const getOrderInfoTimers = useRef(0);
   const [price, setPrice] = useState();
   const [packageId] = useState(() => {
-    //@ts-ignore
+    // @ts-ignore
     const { Version } = window.BSGlobal.tenantAuthentication;
-    //@ts-ignore
+    // @ts-ignore
     const { tenantType } = window.BSGlobal.tenantInfo;
     // 外部注冊賬號使用的產品ID不同
-    if (Version == 1 && tenantType == 3) return 'D9E059E4-4303-4EE2-9275-AE2FA74BBAA6';
-    return '60AFAD35-5273-4A06-B2F4-9A3193096BE7'
+    if (Version == 1 && tenantType == 3) return "D9E059E4-4303-4EE2-9275-AE2FA74BBAA6";
+    return "60AFAD35-5273-4A06-B2F4-9A3193096BE7";
   });
-  const [orderId, setOrderId] = useState('');
-  const [payCode, setPayCode] = useState('directPay');
-  const [payName, setPayName] = useState('支付宝');
+  const [orderId, setOrderId] = useState("");
+  const [payCode, setPayCode] = useState("directPay");
+  const [payName, setPayName] = useState("支付宝");
 
   useEffect(() => {
     // 获取OKR产品信息
-    getOkrCaseProducts(packageId).then(products => {
+    getOkrCaseProducts(packageId).then((products) => {
       if (!products.length) return;
-      const { 'Id': productId, priceY, name } = products[0];
+      const { Id: productId, priceY, name } = products[0];
 
       setPrice(priceY);
 
       // 获取订单信息
       postOkrCasesOrder({
-        'PackageId': packageId,
-        'Description': name,
-        'Products': [{
-          'ProductId': productId,
-          'Total': 1,
-        }]
-      }).then(orderInfo => {
-        const { 'Id': orderId, AliModel } = orderInfo;
+        PackageId: packageId,
+        Description: name,
+        Products: [{
+          ProductId: productId,
+          Total: 1,
+        }],
+      }).then((orderInfo) => {
+        const { Id: orderId, AliModel } = orderInfo;
         const { PayCode, PayName } = AliModel;
         setPayCode(PayCode);
         setOrderId(orderId);
         setPayName(PayName);
       });
     });
-  }, [])
+  }, []);
 
-  //点击立即支付后，2分钟内，每个10s，循环获取订单信息
-  const loopOrderInfo = orderId => {
+  // 点击立即支付后，2分钟内，每个10s，循环获取订单信息
+  const loopOrderInfo = (orderId) => {
     if (getOrderInfoTimers.current === 12) {
-      getOrderInfoTimers.current = 1
+      getOrderInfoTimers.current = 1;
     }
     setTimeout(() => {
       // 循环获取订单信息 2 分钟
       if (getOrderInfoTimers.current < 12) {
-        getOkrOrderInfo(orderId).then(res => {
+        getOkrOrderInfo(orderId).then((res) => {
           getOrderInfoTimers.current += 1;
-          //@ts-ignore
-          const { OrderStatus } = res
+          // @ts-ignore
+          const { OrderStatus } = res;
           // 未支付成功重新获取订单
           if (OrderStatus != 2) {
-            loopOrderInfo(orderId)
+            loopOrderInfo(orderId);
           } else {
             // 订单已支付
             Modal.success({
-              'title': '支付成功',
-              'content': 'OKR案例库已开通',
-              'okText': '立即使用',
-              'onOk': async () => {
+              title: "支付成功",
+              content: "OKR案例库已开通",
+              okText: "立即使用",
+              onOk: async () => {
                 // 跳转页面
-                window.location.reload()
+                window.location.reload();
               },
             });
           }
-        })
+        });
       }
     }, 10 * 1000); // 10s
-  }
+  };
 
   return (
     <Dialog visible={isShowPayWindow} noFooter width="480px" destroyOnClose noCloseIcon getContainer={() => allViewAreaRef.current}>
       <div className="okr-cases-library__payWindow">
-        <img src={require('../image/支付背景浮出.png')} />
-        <div className="tu-icon-canceled" onClick={() => handleShowPayWindow(false)} style={{ width: '18px', height: '18px' }} />
-        <p className="okr-cases-library__payWindow__head">{price} 购买千份 OKR 案例库</p>
-        <p className="okr-cases-library__payWindow__detail">可查看 使用案例库所有行业的案例 <a href="https://club.tita.com/okr-examples" target="_blank">{getLocale('Mod_Checkdetails')}</a></p>
-        <div className="okr-cases-library__payWindow__amount">应付金额：<b><span style={{ fontSize: '32px' }}>19.8</span>元/年</b></div>
-        <a className="okr-cases-library__payWindow__payButton" onClick={() => loopOrderInfo(orderId)}
-          href={`/app/payorder?orderid=${orderId}&mobile=13552865071&defcode=${payCode}&defCodeName=${payName}&IsContactCustomerService=false`} target="_blank">
-          立即支付</a>
+        <img src={require("../image/支付背景浮出.png")} />
+        <div className="tu-icon-canceled" onClick={() => handleShowPayWindow(false)} style={{ width: "18px", height: "18px" }} />
+        <p className="okr-cases-library__payWindow__head">
+          {price}
+          {" "}
+          购买千份 OKR 案例库
+        </p>
+        <p className="okr-cases-library__payWindow__detail">
+          可查看 使用案例库所有行业的案例
+          <a href="https://club.tita.com/okr-examples" target="_blank" rel="noreferrer">{getLocale("Mod_Checkdetails")}</a>
+        </p>
+        <div className="okr-cases-library__payWindow__amount">
+          应付金额：
+          <b>
+            <span style={{ fontSize: "32px" }}>19.8</span>
+            元/年
+          </b>
+        </div>
+        <a
+          className="okr-cases-library__payWindow__payButton"
+          onClick={() => loopOrderInfo(orderId)}
+          href={`/app/payorder?orderid=${orderId}&mobile=13552865071&defcode=${payCode}&defCodeName=${payName}&IsContactCustomerService=false`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          立即支付
+        </a>
       </div>
     </Dialog>
 
-  )
+  );
 }
-

package/src/components/okrcase-library/server/network.js

@@ -1,110 +1,103 @@
 import { useState } from "react";
-import axios from 'axios';
-import { getApiUrl } from '../../../utils/request-v1';
-
-const labelUrl = getApiUrl('okrTemplate/getLabel');
-const caseUrl = getApiUrl('okrTemplate/getByLabel');
-const email_usUrl = getApiUrl('okrTemplate/sedEmail');
-const searchUrl = getApiUrl('okrTemplate/search');
-const surveyUrl = getApiUrl('okrTemplate/survey')
-const applyUrl = getApiUrl('okrTemplate/usedTemplate')
-const likeUrl = getApiUrl('okrTemplate/like')
-const articleUrl = getApiUrl('okrTemplate/article')
-const totalNumberUrl = getApiUrl('okrTemplate/allTemplateNum')
-const isHadBuyOKRcasesUrl = getApiUrl('PayService/buyOkrTemplate')
-const PayOrderUrl = getApiUrl('PayService/PayOrder')
-const ProductsUrl = getApiUrl('PayService/products')
-const OkrCasesOrderUrl = getApiUrl('PayService/CommitOrder')
-
-const pageParam = { pageSize: 10 }//一次加载的个数
+import axios from "axios";
+import { getApiUrl } from "../../../utils/request-v1";
+
+const labelUrl = getApiUrl("okrTemplate/getLabel");
+const caseUrl = getApiUrl("okrTemplate/getByLabel");
+const email_usUrl = getApiUrl("okrTemplate/sedEmail");
+const searchUrl = getApiUrl("okrTemplate/search");
+const surveyUrl = getApiUrl("okrTemplate/survey");
+const applyUrl = getApiUrl("okrTemplate/usedTemplate");
+const likeUrl = getApiUrl("okrTemplate/like");
+const articleUrl = getApiUrl("okrTemplate/article");
+const totalNumberUrl = getApiUrl("okrTemplate/allTemplateNum");
+const isHadBuyOKRcasesUrl = getApiUrl("PayService/buyOkrTemplate");
+const PayOrderUrl = getApiUrl("PayService/PayOrder");
+const ProductsUrl = getApiUrl("PayService/products");
+const OkrCasesOrderUrl = getApiUrl("PayService/CommitOrder");
+
+const pageParam = { pageSize: 10 };// 一次加载的个数
 
 // 对象转 queryParams
 const queryParams = (params = {}) => {
-  let queryStr = '?';
+  let queryStr = "?";
   for (const key in params) {
     if (params.hasOwnProperty(key)) {
-      queryStr = queryStr + `${key}=${params[key]}&`;
+      queryStr += `${key}=${params[key]}&`;
     }
   }
-  return queryStr.length == 1 ? '' : queryStr.slice(0, -1)
-}
+  return queryStr.length == 1 ? "" : queryStr.slice(0, -1);
+};
 
-//搜索
-export const postSearchCases = async (value = '', pageNum = 1) => {
+// 搜索
+export const postSearchCases = async (value = "", pageNum = 1) => {
   const res = await axios.post(searchUrl, {
     ...pageParam,
     key: value,
-    pageNumber: pageNum
-  })
-  return res.data
-}
+    pageNumber: pageNum,
+  });
+  return res.data;
+};
 
 // 请求案例
 export const postForCases = async (body = {}) => {
-  const res = await axios.post(caseUrl, { ...pageParam, ...body })
-  return res.data.Data
-}
+  const res = await axios.post(caseUrl, { ...pageParam, ...body });
+  return res.data.Data;
+};
 
-//请求标签信息
+// 请求标签信息
 export const getLabels = async (param = {}) => {
-  const res = await axios.get(labelUrl + queryParams({ ...param }))
-  return res.data.Data
-}
-
-//发送我想要的okr类型
-export const postSurvey = (body = {}) => {
-  return axios.post(surveyUrl, { ...body })
-}
-
-//套用接口
-export const postApply = (templateId) => {
-  return axios.post(applyUrl, { templateId })
-}
-
-//点赞接口
-export const postLike = (type, templateId) => {
-  return axios.post(likeUrl, { type, templateId })
-}
-
-//文章接口
-export const getEssay = async (activeNavId = 0) => {
+  const res = await axios.get(labelUrl + queryParams({ ...param }));
+  return res.data.Data;
+};
+
+// 发送我想要的okr类型
+export const postSurvey = (body = {}) => axios.post(surveyUrl, { ...body });
+
+// 套用接口
+export const postApply = (templateId) => axios.post(applyUrl, { templateId });
 
+// 点赞接口
+export const postLike = (type, templateId) => axios.post(likeUrl, { type, templateId });
+
+// 文章接口
+export const getEssay = async (activeNavId = 0) => {
   const res = await axios.get(articleUrl + queryParams({
-    "labelId": activeNavId,
-    "pageNum": 0,
-    "pageSize": 0,
-  }))
-  return res.data.Data
-}
-
-//案例总数
+    labelId: activeNavId,
+    pageNum: 0,
+    pageSize: 0,
+  }));
+  return res.data.Data;
+};
+
+// 案例总数
 export const gettotalNumber = async () => {
-  const res = await axios.get(totalNumberUrl)
-  return res.data.Data.obj
-}
+  const res = await axios.get(totalNumberUrl);
+  return res.data.Data.obj;
+};
 
-//是否购买案例库
+// 是否购买案例库
 export const getIsHadBuyOKRcases = async () => {
-  const res = await axios.get(isHadBuyOKRcasesUrl)
-  return res.data.Data
-}
+  const res = await axios.get(isHadBuyOKRcasesUrl);
+  return res.data.Data;
+};
 
-//获取产品信息
+// 获取产品信息
 export const getOkrCaseProducts = async (packageId) => {
-  const res = await axios.get(ProductsUrl + queryParams({ 'packageId': packageId }))
-  return res.data.Data
-}
+  const res = await axios.get(ProductsUrl + queryParams({ packageId }));
+  return res.data.Data;
+};
 
-//提交订单
+// 提交订单
 export const postOkrCasesOrder = async (params = {}) => {
-  const res = await axios.post(OkrCasesOrderUrl, { ...params })
+  const res = await axios.post(OkrCasesOrderUrl, { ...params });
 
-  return res.data.Data
-}
+  return res.data.Data;
+};
 
-//获取订单信息 （通过state判断是否支付）
+// 获取订单信息 （通过state判断是否支付）
 export const getOkrOrderInfo = async (orderId) => {
-  const res = await axios.get(PayOrderUrl + queryParams({ 'order_id': orderId }))
+  const res = await axios.get(PayOrderUrl + queryParams({ order_id: orderId }));
 
-  return res.data.Data
-}
+  return res.data.Data;
+};

package/src/components/okrcase-library-card/index.tsx

@@ -1,9 +1,11 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import firework from '../firework';
-import { postApply, postLike } from '../okrcase-library/server/network.js';
-import { CardItem } from '../okrcase-library';
-import { getLocale } from '../../utils/getLocale';
-import '../okrcase-library/index.scss';
+import React, {
+  useState, useCallback, useRef, useEffect,
+} from "react";
+import firework from "../firework";
+import { postApply, postLike } from "../okrcase-library/server/network.js";
+import { CardItem } from "../okrcase-library";
+import { getLocale } from "../../utils/getLocale";
+import "../okrcase-library/index.scss";
 
 interface Props {
   onApplyTpl: Function;
@@ -11,9 +13,11 @@ interface Props {
   index: number;
 }
 
-const OkrCaseCard = (props: Props) => {
+function OkrCaseCard(props: Props) {
   const { onApplyTpl, cardInfo, index } = props;
-  const { parentName, name, subelements, usedNum, id, isLike, like } = cardInfo;
+  const {
+    parentName, name, subelements, usedNum, id, isLike, like,
+  } = cardInfo;
 
   const [likeNum, setLikeNum] = useState(like);
   const [hasLike, setHasLike] = useState(isLike);
@@ -21,7 +25,7 @@ const OkrCaseCard = (props: Props) => {
 
   const [isApplyBtnShow, setIsApplyBtnShow] = useState(false);
   // const [isBlue, setIsBlue] = useState(index % 4 > 1 ? true : false)
-  const isBlue = index % 4 > 1 ? true : false;
+  const isBlue = index % 4 > 1;
   const likeRef = useRef<any>();
 
   useEffect(() => {
@@ -33,15 +37,15 @@ const OkrCaseCard = (props: Props) => {
   const setFirework = useCallback(() => {
     const { x, y } = (likeRef.current as any).getBoundingClientRect();
     firework({
-      x: x,
-      y: y,
+      x,
+      y,
       images: [
-        require('../okrcase-library/image/thumb-up.svg'),
-        require('../okrcase-library/image/666.svg'),
-        require('../okrcase-library/image/bixin.svg'),
-        require('../okrcase-library/image/fighting.svg'),
-        require('../okrcase-library/image/nice.svg'),
-        require('../okrcase-library/image/welldone.svg'),
+        require("../okrcase-library/image/thumb-up.svg"),
+        require("../okrcase-library/image/666.svg"),
+        require("../okrcase-library/image/bixin.svg"),
+        require("../okrcase-library/image/fighting.svg"),
+        require("../okrcase-library/image/nice.svg"),
+        require("../okrcase-library/image/welldone.svg"),
       ],
     });
   }, []);
@@ -63,12 +67,12 @@ const OkrCaseCard = (props: Props) => {
     postApply(id);
     onApplyTpl(cardInfo);
     // @ts-ignore
-    window.titaTracker &&
+    window.titaTracker
       // @ts-ignore
-      window.titaTracker('action').record({
-        action: getLocale('Per_Ass_Pop_button_Apply'),
-        actionGroup: getLocale('OKR_OKRex_Casebase'),
-        productName: getLocale('OKR_OKRex_Casebase'),
+      && window.titaTracker("action").record({
+        action: getLocale("Per_Ass_Pop_button_Apply"),
+        actionGroup: getLocale("OKR_OKRex_Casebase"),
+        productName: getLocale("OKR_OKRex_Casebase"),
       });
   };
 
@@ -82,31 +86,35 @@ const OkrCaseCard = (props: Props) => {
         className={`okr-cases-library__cardList__card__title
             ${
               isBlue
-                ? 'okr-cases-library__cardList__card__title-blue'
-                : 'okr-cases-library__cardList__card__title-red'
+                ? "okr-cases-library__cardList__card__title-blue"
+                : "okr-cases-library__cardList__card__title-red"
             }`}
       >
         <div className="okr-cases-library__cardList__card__title__label">
-          「{parentName}」
+          「
+          {parentName}
+          」
         </div>
         <div className="okr-cases-library__cardList__card__title__name">
-          O {name}
+          O
+          {" "}
+          {name}
         </div>
-        {
-          <div
-            className={`okr-cases-library__cardList__card__title__btn 
+        <div
+          className={`okr-cases-library__cardList__card__title__btn 
                 ${
-                  isApplyBtnShow &&
-                  'okr-cases-library__cardList__card__title__btn-show'
+                  isApplyBtnShow
+                  && "okr-cases-library__cardList__card__title__btn-show"
                 }
                 ${
                   isBlue
-                    ? 'okr-cases-library__cardList__card__title__btn-blue'
-                    : 'okr-cases-library__cardList__card__title__btn-red'
+                    ? "okr-cases-library__cardList__card__title__btn-blue"
+                    : "okr-cases-library__cardList__card__title__btn-red"
                 }`}
-            onClick={() => handleApplyBtnClick(id)}
-          >{getLocale('Per_Ass_Pop_button_Apply')}</div>
-        }
+          onClick={() => handleApplyBtnClick(id)}
+        >
+          {getLocale("Per_Ass_Pop_button_Apply")}
+        </div>
       </div>
       <div className="okr-cases-library__cardList__card__content">
         {subelements.map((item, krindex) => (
@@ -116,28 +124,33 @@ const OkrCaseCard = (props: Props) => {
           >
             <div
               style={{
-                color: isBlue ? '#2879FF' : '#F05E5E',
-                float: 'left',
-                marginRight: '5px',
+                color: isBlue ? "#2879FF" : "#F05E5E",
+                float: "left",
+                marginRight: "5px",
               }}
             >
-              KR{krindex + 1}{' '}
+              KR
+              {krindex + 1}
+              {" "}
             </div>
-            <div style={{ float: 'left', width: 'calc(100% - 36px)' }}>
-              {' '}
+            <div style={{ float: "left", width: "calc(100% - 36px)" }}>
+              {" "}
               {item.name}
             </div>
           </div>
         ))}
       </div>
       <div className="okr-cases-library__cardList__card__footer">
-        <div>{usedNumber}次套用</div>
+        <div>
+          {usedNumber}
+          次套用
+        </div>
         <div>
           {hasLike ? (
             <img
-              src={require('../okrcase-library/image/thumb-up.svg')}
+              src={require("../okrcase-library/image/thumb-up.svg")}
               onClick={() => handleLikeClick(hasLike, id)}
-              style={{ cursor: 'pointer' }}
+              style={{ cursor: "pointer" }}
             />
           ) : (
             <span
@@ -151,6 +164,6 @@ const OkrCaseCard = (props: Props) => {
       </div>
     </div>
   );
-};
+}
 
 export default OkrCaseCard;