kn-cli 1.0.64 → 1.0.65

package/templates/template_oa_jwt/public/src/components/Select/StaffSelect/index.jsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react';
+import { Select } from 'antd';
+import CSS from './index.less';
+CSS;
+const StaffSelect = (props) => {
+  const [userList, setUserList] = useState(props.userList || null);
+  const [value, setValue] = useState(props?.defaultValue || []);
+
+  function checkUserCanFind(value, name) {
+    let find = false;
+    for (let i = 0; i < userList.length; i++) {
+      if (userList[i].USR_UID === value) {
+        find = true;
+        break;
+      }
+    }
+    if (!find) {
+      console.log(`未发现用户${value}${name}`);
+      let list = [...userList];
+      list.push({
+        USR_UID: value,
+        USR_CN: name,
+        REAL_NAME:name,
+        USR_JOB_ID: '',
+      });
+      setUserList(list);
+    }
+  }
+
+  useEffect(() => {
+    if (props?.value) {
+      setValue(props.value);
+      
+      // 如果某些员工因为离职，数据不在了，那么这里补上一条
+      if (props.ifnofound) {
+        if (props.value.constructor === Array) {
+          for (let i = 0; i < props.value.length; i++) {
+            checkUserCanFind(props.value[i], props.ifnofound[i]);
+          }
+        } else {
+          checkUserCanFind(props.value, props.ifnofound);
+        }
+      }
+    }
+  }, [value]);
+
+  function onChange(options, selected) {
+    setValue(options);
+    let ret = [];
+    if (selected?.map) {
+      ret = selected.map((item) => {
+        return item.data;
+      });
+    } else {
+      if (selected.data) {
+        ret.push(selected.data);
+      }
+    }
+    if (props.onChange) props.onChange(options,ret);
+  }
+
+  function filterOption(inputValue, option) {
+    if (
+      (option.data.REAL_NAME && option.data.REAL_NAME.includes(inputValue)) ||
+      (option.data.USR_JOB_ID && option.data.USR_JOB_ID.includes(inputValue)) ||
+      (option.data.USR_USERNAME && option.data.USR_USERNAME.includes(inputValue))
+    ) {
+      return true;
+    }
+
+    return false;
+  }
+
+  return (
+    <Select
+      loading={!userList}
+      // labelInValue
+      optionLabelProp='label'
+      value={value}
+      showSearch
+      mode={props.mode}
+      style={{ width: '100%' }}
+      onChange={onChange}
+      filterOption={filterOption}
+    >
+      {userList &&
+        userList.map((user, idx) => {
+          return (
+            <Select.Option key={user.USR_UID} data={user} value={props.valIsLabel ? `${user.REAL_NAME}(${user.USR_JOB_ID})` : user.USR_UID} label={`${user.REAL_NAME}(${user.USR_JOB_ID})`}>
+              {`${user.REAL_NAME}(${user.USR_JOB_ID})`}
+            </Select.Option>
+          );
+        })}
+    </Select>
+  );
+};
+export default StaffSelect;

package/templates/template_oa_jwt/public/src/components/Select/StaffSelect/index.less

@@ -0,0 +1,24 @@
+.content {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 120px;
+  background: #fafafa;
+  z-index: 10;
+  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
+
+  :global {
+    .ant-col {
+      button {
+        margin-left: 10px;
+        border: 1px solid #d8d8d8;
+      }
+      &:first-child {
+        button {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}

package/templates/template_oa_jwt/public/src/components/Toast/index.jsx

@@ -0,0 +1,60 @@
+import React,{useEffect} from 'react';
+import ReactDOM from 'react-dom';
+import styles from './index.less';
+import Popup from '@/components/Popup/index.jsx';
+
+const toastList=[];
+const runNext=()=>{
+  let props = toastList[0];
+  if(props){
+    const {message,delay,resolve,position}=props;
+    let popup = Popup(resolve,{cantouch:true});
+    ReactDOM.render(
+      <Toast destory={popup.destory} message={message} delay={delay} position={position}/>,
+      popup.dom
+    );
+  }
+}
+
+const Toast=props=>{
+  const {
+    message,
+    delay=1000*2,
+    destory,
+    position='top'
+  }=props;
+  useEffect(()=>{
+    setTimeout(()=>{
+      destory();
+      toastList.shift();
+      runNext();
+    },delay);
+  },[])
+  const ANITYPE={
+    'center':'animate__slideInDown',
+    'top':'animate__slideInDown',
+    'bottom':'animate__slideInUp'
+  }
+  return (
+    <section className={styles.wrap} data-position={position}>
+      <div className={styles.content+ ` ${ANITYPE[position]} animate__animated animate__fast`} dangerouslySetInnerHTML={{ __html:message }}>
+      </div>
+    </section>
+  )
+}
+
+
+const ShowToast=props=>{
+  if(typeof props === 'string'){
+    props = {message:props}
+  }
+  return new Promise((resolve) => {
+    props.resolve = resolve;
+    toastList.push(props);
+    if(toastList.length===1){
+      runNext();
+    }
+  });
+}
+
+export default ShowToast;

package/templates/template_oa_jwt/public/src/components/Toast/index.less

@@ -0,0 +1,43 @@
+@import '~@/_variable.less';
+
+.wrap{
+  position: fixed;
+  left:0;
+  top:0;
+  width:100%;
+  height:100%;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  z-index:var(--z-toast);
+  &[data-position=top]{
+    justify-content: flex-start;
+    padding-top:80px;
+  }
+  &[data-position=bottom]{
+    justify-content: flex-end;
+    padding-bottom:80px;
+  }
+  .content{
+    min-height:30px;
+    min-width:60px;
+
+    background: rgba(0,0,0,.8);
+    opacity:.8;
+    border-radius: var(--radius-default);
+    padding:var(--padding-small) var(--padding-default);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 14px;
+    color: #FFFFFF;
+    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.24);
+
+
+  }
+}

package/templates/template_oa_jwt/public/src/components/Upload/index.jsx

@@ -0,0 +1,358 @@
+import React, { useState,useEffect } from 'react';
+import { Upload, message,Button } from 'antd';
+import { UPLOAD_FILE,GET_DOWNLOAD_FILE } from "@/services/common.js";
+// import {getUploadToken,setMediaInfo} from '@/services/common.js';
+// import COS  from 'cos-js-sdk-v5';
+
+import { UploadOutlined } from '@ant-design/icons';
+
+
+function DELAY(time){
+  return new Promise(reslove=>{
+    setTimeout(reslove,time);
+  })
+}
+
+// export async function uploadToCos(files,onProgress,params){
+//   if(params&&params.userId){
+//     params.type=1;
+//   }
+//   let token = await getUploadToken(params);
+//   let key = token?.data?.fileKey||Date.now();
+//   let baseUrl = token?.data?.baseUrl;
+//   let credentials={};
+//   let data={};
+  
+//   if(+token?.code===0){
+//     credentials = token.data.credentials;
+//     data=token.data;
+//   }
+
+
+//   var cos = new COS({
+//     getAuthorization:(options,callback)=>{
+//       callback({
+//         TmpSecretId: credentials.tmpSecretId,
+//         TmpSecretKey: credentials.tmpSecretKey,
+//         XCosSecurityToken: credentials.sessionToken,
+//         StartTime: data.startTime, 
+//         ExpiredTime: data.expiredTime,
+//       })
+//     }
+//   });
+
+ 
+//   return new Promise(reslove=>{
+//     cos.putObject({
+//       Bucket:data.bucket,
+//       Region:data.region,
+//       Key:key,
+//       StorageClass: 'STANDARD',
+//       Body:files,
+//       onProgress: function(progressData) {
+//         if(onProgress)onProgress({percent:progressData.percent*100})
+//         console.log(JSON.stringify(progressData));
+//       }
+//     },function(err, data) {
+//       if(data){
+//         reslove({url:`${baseUrl}/${key}`,key:key});
+//         return;
+//       }
+//       reslove()
+//     })
+//   })
+  
+
+
+// }
+
+function CHECK_FILE_TYPE(types, filename) {
+  let reg = '';
+
+  if (types.constructor === Array) {
+    types = types.join('|');
+  }
+  reg = `[.](${types})$`;
+  reg = new RegExp(reg, 'i');
+  return reg.test(filename);
+}
+
+
+const getImageInfo= async (file)=>{
+  return new Promise(resolve=>{
+    var reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload =()=>{
+      let img = new Image();
+      img.onload=()=>{
+        resolve({width:img.width,height:img.height});
+      }
+      img.src=reader.result;
+    }
+  })
+}
+const getVideoInfo= async (file)=>{
+  return new Promise(resolve=>{
+    var reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload =()=>{
+      let video = document.createElement('video');
+      video.addEventListener('canplay',(e)=>{
+        const {videoWidth,videoHeight} = e.target;
+        resolve({width:videoWidth,height:videoHeight});
+      })
+      video.setAttribute('src',reader.result);
+      // document.body.appendChild(img);
+    }
+  })
+}
+export const uploadFile=async (props,detail)=>{
+  // let response = await UPLOAD_FILE(detail.file, {}, detail.onProgress);
+  // await DELAY(1000);
+  // detail.onProgress({ percent: 20 });
+  // await DELAY(1000);
+  // detail.onProgress({ percent: 100 });
+
+  // mock 拦截上传模拟上传完成用
+  // let url='';
+  // switch(detail.file.type){
+  //   case 'image/jpeg':
+  //   case 'image/png':url='https://officialwebsite-static.kingnet.com/20201130132001-%E6%9C%AA%E5%91%BD%E5%90%8D_meitu_1.jpg';break;
+  //   case 'video/mp4':url="http://yayapt-1254024138.cos.ap-shanghai.myqcloud.com/1607653172352"
+  // }
+  // let response = {  url: url, key: detail.file.uid } ;
+
+  
+  let mimeType = detail.file.type;
+  let fileName=detail.file.name;
+  let type = 1;
+  let fileSize = detail.file.size;
+  let module=props?.from||'';
+  if(/^video/.test(mimeType)){
+    type=2;//视频
+  }else if(/^image/.test(mimeType)){
+    type=1;//图片
+  }
+
+  let info=null;
+  // if(props.getWidthHeight){
+  if(type===2){
+    info =await getVideoInfo(detail.file);
+  }else if(type===1){
+    info = await getImageInfo(detail.file);
+  }
+  let uploadServiceType = 'oa';
+  // }
+  let response;
+  if(uploadServiceType==='oa')response = await UPLOAD_FILE(detail.file,null,detail.onProgress);
+  // if(uploadServiceType==='cos')response = await uploadToCos(detail.file,detail.onProgress,props.params);
+
+  if (response) {
+    // if(uploadServiceType==='cos'){
+    //   let infoRet = await setMediaInfo({
+    //     fileKey:response.key, 
+    //     fileName,
+    //     mimeType,
+    //     fileSize,
+    //     type,
+    //     module,
+    //     mediaWidth:info?.width,
+    //     mediaHeight:info?.height});
+    //   if(!infoRet){
+    //     return;
+    //   }
+    // }
+    if(detail?.onSuccess){
+      detail.onSuccess({
+        server_link: response.url,
+        client_name:response.key,
+        info:info,
+      });
+    }
+    return {
+      server_link: response.url,
+      client_name:response.key,
+      info:info,
+    };
+
+  } else {
+    if(detail?.onError){
+      detail.onError();
+    }
+    return;
+  }
+}
+
+
+/**
+ *
+ * {
+ *  uid:'',//唯一id，负数为默认文件
+ *  url:'',//下载链接
+ *  status:'done',//上传状态
+ *  name:'1.png',//文件名称
+ *  formData:{ //存放提交给接口表单用的文件参数
+ *    server_name:'',
+ *    cli_name:''
+ *  }
+ * }
+ */
+const UploadHelper = (props) => {
+  // const [count, setCount] = useState(0);
+  // console.log(`upload helper value:${props.value}`)
+  const [fileList, setFileList] = useState([]);
+  const updateValue=()=>{
+
+    let defaultFile=[];
+    let ret=[];
+    if(props.value){
+      if(props.value.map){
+        defaultFile=[...props.value];
+      }else{
+        defaultFile.push(props.value);
+      }
+    }
+    else if(props.defaultFile){
+      if(props.defaultFile.map){
+        defaultFile=[...props.defaultFile];
+      }else{
+        defaultFile.push(props.defaultFile);
+      }
+    }
+
+    if (!defaultFile || defaultFile.length <= 0) {
+
+    } 
+    else{
+        ret= defaultFile?.map((file, idx) => {
+          let client_name,server_link,thumbUrl,info;
+          if( typeof file ==='string' ){
+            server_link = file;
+            client_name = '';
+          }else{
+            client_name=file.client_name
+            server_link=file.server_link;
+            thumbUrl=file.thumbUrl;
+            info=file.info;
+            
+          }
+          return {
+            uid: '-' + idx,
+            name: client_name,
+            url: server_link,
+            status: 'done',
+            thumbUrl: file.thumbUrl || props.thumbUrl||null,
+            formData: {
+              server_link: server_link,
+              client_name: client_name,
+              info:info,
+            },
+          };
+        });
+    }
+    setFileList(ret);
+    
+  }
+
+  useEffect(()=>{
+    updateValue();
+  },[props.value,props.defaultFile])
+  function beforeUpload(acceptTypes, file) {
+    if (acceptTypes && !CHECK_FILE_TYPE(acceptTypes, file.name)) {
+      message.error( `文件类型不正确,仅支持:${acceptTypes.join(';')}` );
+      return false;
+    }
+    if (props.maxSize && file.size / 1024 > props.maxSize) {
+      if(props.maxSize>1024){
+        message.error( `文件大小不能超过:${props.maxSize/1024}MB` );
+        return false;
+      }
+      message.error( `文件大小不能超过:${props.maxSize}KB` );
+      return false;
+    }
+    return true;
+  }
+
+  function onChangeFile(detail) {
+    let fileList = [];
+    let changeFlie = [];
+    let change = true;
+    // console.log(JSON.stringify(detail.fileList));
+    detail.fileList.forEach((file) => {
+      if (file.status) {
+        fileList.push(file);
+        if (file.status === 'uploading') {
+          change = false;
+        }
+        if (file.status === 'done' && file.response && !file.formData) {
+          file.formData = {
+            server_link: file.response.server_link,
+            client_name: file.response.client_name,
+            info:file.response.info||null,
+          };
+          file.formData.thumbUrl = GET_DOWNLOAD_FILE(file.formData.server_link)
+        }
+        if (file.status === 'done' && file.formData) {
+          changeFlie.push(file.formData);
+        }
+      }
+    });
+    setFileList(fileList);
+    if (change) {
+      if (props.onChange) props.onChange(changeFlie);
+    }
+  }
+
+  
+  const BtnUpload=()=>{
+    let {listType} = props;
+
+    if(listType==='text' || !listType){
+      return (
+        <Button icon={<UploadOutlined />}>上传</Button>
+      )
+    }
+    return (
+      <div style={{ marginTop: 8 }}>上传图片</div>
+    )
+  }
+  function renderChildren(){
+    let {listType,multiple,disabled} = props;
+    
+
+    //单图模式，在有文件的情况下不显示上传按钮
+    if(!multiple){
+      if(fileList.length>0){
+        return '';
+      }
+    }
+    if(disabled){
+      return '无';
+    }
+
+    return <BtnUpload />;
+
+  }
+  function onPreview(file){
+    window.open(GET_DOWNLOAD_FILE(file.formData.server_link));
+  }
+  return (
+    <Upload
+      multiple={props.multiple}
+      beforeUpload={beforeUpload.bind(this, props.acceptTypes)}
+      onChange={onChangeFile}
+      customRequest={uploadFile.bind(this,props)}
+      disabled={props.disabled}
+      fileList={fileList}
+      listType={props.listType}
+      onPreview={props.onPreview||onPreview}
+      showUploadList={props.showUploadList}
+      className={props.className}
+      // previewFile={onPreview}
+    >
+      {renderChildren()}
+    </Upload>
+  );
+};
+
+export default UploadHelper;

package/templates/template_oa_jwt/public/src/components/title/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import CSS from './index.less';
+
+const PageTitle = (props) => {
+  return (
+    <section className={CSS.title}>
+      <div className={CSS.rect}></div>
+      <h3 className={CSS.text}>{props.children}</h3>
+    </section>
+  )
+}
+export default PageTitle;

package/templates/template_oa_jwt/public/src/components/title/index.less

@@ -0,0 +1,21 @@
+@import '~@/_variable.less';
+
+.title{
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: var(--margin-small);
+  margin-bottom: var(--margin-default);
+}
+.rect {
+  background: var(--color-primary);
+  margin-right: 7px;
+  width: 4px;
+  height: 18px;
+  display: block;
+}
+.text{
+  font-size: 16px;
+  color: #555;
+  margin: 0;
+}

package/templates/template_oa_jwt/public/src/dictionary/index.js

@@ -0,0 +1,20 @@
+import { useDictionary } from '@/hooks';
+// import { GET_PROJECT } from '@/services/dataset';
+import { Select, Radio } from 'antd';
+useDictionary.SetConfig({ SelectOption: Select.Option, RadioOption: Radio });
+
+// export const useProjectList = useDictionary.createDictionary({
+//   api: async () => {
+//     const req = await GET_PROJECT();
+//     if (req?.code == 0) {
+//       const list = req.data.map(item => {
+//         const { app_id: id, name: label, _id: name } = item;
+//         return {
+//           id, label, name
+//         }
+//       });
+//       return { code: 0, data: { body: [{ id: '', label: '全部项目', name: 'all' }, ...list] } };
+//     }
+//     return null;
+//   }
+// });

package/templates/template_oa_jwt/public/src/hooks/index.jsx

@@ -0,0 +1,21 @@
+
+
+import useImageLoader from './useImageLoader';
+import useDelay from './useDelay';
+import usePreload from './usePreload';
+import useSearch from './useSearch';
+import useUpdate from './useUpdate';
+import useLoading from './useLoading';
+import {useDictionary, usePagination,usePaginationWithForm} from 'kn-hooks';
+
+export {
+  useDictionary,
+  usePaginationWithForm,
+  usePagination,
+  useImageLoader,
+  useDelay,
+  usePreload,
+  useSearch,
+  useUpdate,
+  useLoading
+}

package/templates/template_oa_jwt/public/src/hooks/useDelay.jsx

@@ -0,0 +1,29 @@
+import { useRef,useState,useMemo, useEffect } from 'react';
+
+const useDelay=()=>{
+  const [loading,setLoading] = useState(false);
+  const refSet = useRef();
+  refSet.current = setLoading;
+  useEffect(()=>{
+    refSet.current = setLoading;
+  },[setLoading]);
+
+  const actions=useMemo(()=>{
+    const wait=(ms)=>{
+      refSet.current(true);
+      return new Promise(res=>{
+        setTimeout(()=>{
+          refSet.current(false);
+          res();
+        }, ms);
+      })
+    }
+    return {
+      wait,
+      loading
+    };
+  },[loading]);
+  return actions;
+}
+
+export default useDelay;