kn-cli 1.0.64 → 1.0.66

package/templates/template_oa_jwt/public/src/pages/components/totalRecord/index.less

@@ -0,0 +1,16 @@
+
+
+.totalRecord{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+  margin-bottom: 5px;
+  .count{
+    color:#32a3fa;
+    margin:0 3px;
+  }
+  .operGroup{
+    display: flex;
+  }
+}

package/templates/template_oa_jwt/public/src/pages/demo/detail/index.jsx

@@ -0,0 +1,14 @@
+import React, { useEffect, useState, useRef } from 'react';
+
+
+
+const Page = () => {
+
+  return (
+    <section>
+      video detail
+    </section>
+  )
+}
+
+export default Page;

package/templates/template_oa_jwt/public/src/pages/demo/index.jsx

@@ -0,0 +1,399 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useParams, useSearchParams,useNavigate } from 'react-router-dom';
+
+import {usePaginationWithForm} from '@/hooks';
+import {GET_LIST,TEST_AUTH} from '@/services/demo';
+import {GET_STAFF_LIST,GET_DEP_LIST} from '@/services/common';
+
+import { Table, Input, Button, Form,Checkbox,Radio } from 'antd';
+import {FormBlockByTitle} from '@/components/Layout/FormBlock';
+import styles from './index.less';
+import PageTitle from '@/pages/components/pageTitle';
+import TotalRecord from '@/pages/components/totalRecord';
+import {ShowErrorAlert,ShowAlert,ShowConfirm} from '@/components/Dialog';
+import ShowToast from '@/components/Toast';
+import Empty from '@/components/Empty';
+import FormRow from '@/components/FormRow';
+import FormTable from '@/components/FormTable';
+import UploadHelper from '@/components/Upload';
+import StaffSelect from '@/components/Select/StaffSelect';
+import DepSelect from  '@/components/Select/DepSelect';
+import ProviderApp from '@/provider/app';
+
+const Page = () => {
+  const providerApp = ProviderApp.useContainer();
+  const navigate= useNavigate();
+  const [form] = Form.useForm();
+  const [formEdit]= Form.useForm();
+  const [formTable]= Form.useForm();
+  const [staff,setStaffList] = useState(null);
+  const [depList,setDepList] = useState(null);
+
+
+  const [edit,setEdit]= useState(false);
+  const [noData,setNoData]= useState(true);
+  const [formData,setFormData]=useState({
+    name:'cc',
+    age:156,
+    files:[{client_name:'abc.jpg',server_link:'abc.jpg'}],
+    manager:'69379379356ab1b1a1920d9052021900',
+    managerName:'王悦',
+    dep:'816',
+    depName:'平台技术中心',
+    fruit:'西瓜',
+    color:'蓝色'
+  });
+
+  const [tableFormList,setTableFormList]=useState({
+    list:[
+      {id:'1',name:'name1',age:'age1'},
+      {id:'2',name:'name2',age:'age2'},
+      {id:'3',name:'name3',age:'age3'},
+    ]
+  });
+
+  const request = usePaginationWithForm({
+    service:GET_LIST,
+    pagination:{pageSize:10},
+    form:form
+  })
+
+  const init=async ()=>{
+    let staff =  GET_STAFF_LIST();
+    let ret =  GET_DEP_LIST();
+    staff = await staff;
+    ret = await ret;
+    if(staff&&staff.code==1){
+      setStaffList(staff.info)
+    }
+    if(ret&&ret.code==1){
+      setDepList(ret.info);
+    }
+  }
+  useEffect(()=>{
+    init();
+  },[])
+  useEffect(()=>{
+    if(request?.pagination?.total>0){
+      setNoData(false);
+      console.log('有数据了')
+    }
+  },[request.pagination])
+
+  useEffect(()=>{
+    console.log('初次查询')
+    request.update();
+  },[])
+
+  const columns=[{
+    dataIndex:'id',
+    title:'id',
+    render:(_,record,idx)=>{
+      return record.id;
+    }
+  },{
+    dataIndex:'value',
+    title:'数据值',
+    render:(_,record,idx)=>{
+      return record.value||'-'
+    }
+  }];
+
+  const getDataSource=()=>{
+    if(request?.data?.length>0){
+      let req=request?.data[request.pagination.current-1]||[];
+      return req;
+    }
+    return [];
+  }
+
+
+  const onPageChange=(current,pageSize)=>{
+    request.update({pagination:{current,pageSize}})
+  }
+  const onSearch=()=>{
+    request.update();
+  }
+  const onReset=()=>{
+    request.reset();
+  }
+
+  const onDetail=()=>{
+    navigate('/detail')
+  }
+
+  const onAlert= async (type)=>{
+    switch(type){
+      case 'ShowErrorAlert':{ShowErrorAlert('错误啦');}break;
+      case 'ShowAlert':{ShowAlert('提示框');}break;
+      case 'ShowConfirm':{
+        const req= await ShowConfirm({content:'你确定吗？'})
+        if(req){
+          ShowToast('确认')
+        }else{
+          ShowToast('取消')
+        }
+      }break;
+      case 'ShowToast':{
+        ShowToast('toast')
+      }
+    }
+    
+  }
+  const onNoData=()=>{
+    setNoData(true)
+  }
+  const onEdit=()=>{
+    setEdit(true);
+  }
+  const onSave= async ()=>{
+    try{
+      const req= await formEdit.validateFields();
+      if(req){
+        setFormData(req)
+      }
+    }catch(ex){
+      ShowToast(ex);
+      return;
+    }
+    setEdit(false);
+
+  }
+  const onCancel=()=>{
+    formEdit.resetFields();
+    setEdit(false)
+  }
+
+  const createColumn=({formItemName,onAdd,onDel,onCopy})=> {
+    let ret = [
+      {
+        align: 'center',
+        dataIndex: 'name',
+        title:'name',
+        width: 60,
+        render: (text, record, index) => {
+          return (
+            <Form.Item name={[formItemName,index,'name']} >
+              <Input />
+            </Form.Item>
+          );
+        },
+      },
+
+      {
+        align: 'center',
+        dataIndex: 'age',
+        title:'age',
+        width: 60,
+        render: (text, record, index) => {
+          return (
+            <Form.Item name={[formItemName,index,'age']} >
+              <Input />
+            </Form.Item>
+          );
+        },
+      },
+    ];
+    ret.push({
+      align: 'center',
+      dataIndex: 'oper',
+      title: '操作',
+      width: 120,
+      render: (text, record, index) => {
+        return (
+          <div>
+          <Button type='link' style={{marginRight:"12px"}} onClick={onDel.bind(this, record, index)} >
+            删除
+          </Button>
+
+          <Button type='link' style={{marginRight:"12px"}}  onClick={onCopy.bind(this, record, index)}>
+            复制
+          </Button>
+
+          <Button type='link' onClick={onAdd.bind(this, record, index)}>
+            添加
+          </Button>
+          </div>
+          
+        );
+      },
+    });
+  
+    return ret;
+  };
+
+  const onPrintFormTable= async ()=>{
+    
+    try{
+      const req= await formTable.validateFields();
+      console.log(req);
+    }catch(ex){
+      ShowToast(ex);
+      return;
+    }
+  }
+  const onLogout=()=>{
+    providerApp.logout();
+  }
+  const onKsso=()=>{
+    TEST_AUTH();
+  }
+  return (
+    <section className={styles.wrap}>
+
+      <PageTitle>管理系统</PageTitle>
+      <FormBlockByTitle title='查询结果'>
+        <Form
+          form={form}
+          layout='inline'
+          colon={false}
+        >
+          <Form.Item name='keywords' labelAlign='left' label='关键字'>
+            <Input placeholder='产品编码/产品名称/产品型号/部门/单号' />
+          </Form.Item>
+
+          <Button style={{marginRight:'12px'}} type='primary' onClick={onSearch}>
+            查询
+          </Button>
+          <Button onClick={onReset}>
+            重置
+          </Button>
+        </Form>
+        <TotalRecord count={request?.pagination?.total||'-'} right={
+          <>
+            <Button type='primary'className={styles.margin}>导出</Button>
+            <Button onClick={onDetail} className={styles.margin}>查看详情页面</Button>
+            <Button onClick={onNoData} className={styles.margin}>模拟空数据</Button>
+
+          </>
+        } />
+        {
+          noData?<Empty />:
+          <Table 
+            className={styles.table}
+            rowKey='id' 
+            columns={columns}
+            loading={!request?.data?.length>0} 
+            dataSource={getDataSource()} 
+            // pagination={false} 
+            pagination={{
+              current:request?.pagination?.current,
+              pageSize:request?.pagination?.pageSize,
+              onChange:onPageChange,
+              total:request?.pagination?.total
+            }}
+          />
+        }
+      </FormBlockByTitle>
+      
+
+      <FormBlockByTitle title='表单' rightBtns={
+          edit?
+          (<>
+            <Button type='primary' onClick={onSave} className={styles.margin}>保存</Button>
+            <Button onClick={onCancel} className={styles.margin}>取消</Button>
+          </>):(<Button type='primary' onClick={onEdit} className={styles.margin}>编辑</Button>)
+      }>
+        <Form initialValues={formData} form={formEdit}>
+          <FormRow>
+            <FormRow.Col label='姓名' required editmode={edit} txtdata={formData?.name}>
+              <Form.Item name='name'>
+                <Input />
+              </Form.Item>
+            </FormRow.Col>
+            <FormRow.Col label='年龄' editmode={edit} txtdata={formData?.age}>
+              <Form.Item name='age'>
+                <Input />
+              </Form.Item>
+            </FormRow.Col>
+          </FormRow>
+          <FormRow>
+            <FormRow.Col label='负责人' editmode={edit} txtdata={formData?.managerName}>
+              <Form.Item name='manager'>
+                <StaffSelect 
+                  // mode='multiple'
+                  userList={staff}                  
+                />
+              </Form.Item>
+            </FormRow.Col>
+            <FormRow.Col label='部门' editmode={edit} txtdata={formData?.depName}>
+              <Form.Item name='dep'>
+                <DepSelect 
+                  // mode='multiple'
+                  list={depList}
+                />
+              </Form.Item>
+            </FormRow.Col>
+          </FormRow>
+          <FormRow>
+            <FormRow.Col label='水果' editmode={edit}  txtdata={formData?.fruit}>
+                <Form.Item name='fruit'>
+                  <Checkbox.Group options={[
+                    {label:'苹果',value:'苹果'},
+                    {label:'西瓜',value:'西瓜'},
+                    {label:'桔子',value:'桔子'},
+
+                  ]}/>
+                </Form.Item>
+            </FormRow.Col>
+            <FormRow.Col label='颜色' editmode={edit}  txtdata={formData?.color}>
+                <Form.Item name='color'>
+                  <Radio.Group>
+                    <Radio value="红色">红色</Radio>
+                    <Radio value="黄色">黄色</Radio>
+                    <Radio value="蓝色">蓝色</Radio>
+                  </Radio.Group>
+                </Form.Item>
+            </FormRow.Col>
+          </FormRow>
+
+          <FormRow>
+            <FormRow.Col label='附件' editmode={true} >
+              <Form.Item name='files'>
+                <UploadHelper 
+                  disabled={!edit}
+                ></UploadHelper>
+              </Form.Item>
+            </FormRow.Col>
+          </FormRow>
+        </Form>
+      </FormBlockByTitle>
+
+      <FormBlockByTitle title='表格中的表单' 
+        rightBtns={
+          <Button type='primary' onClick={onPrintFormTable} className={styles.margin}>打印当前表单值</Button>
+        }>
+        <Form form={formTable} initialValues={{...tableFormList}}>
+          <FormTable
+            Table={Table}
+            initialValue={tableFormList.list}
+            form={formTable}
+            formItemName='list'
+            antTableOptions={{ bordered: true, pagination: false }}
+            newdata={{
+              name: '',
+              age:''
+            }}
+            columns={createColumn}
+            saveLast
+          /> 
+        </Form>
+      </FormBlockByTitle>
+      <FormBlockByTitle title='其它功能'>
+        <Button className={styles.margin} onClick={onAlert.bind(this,'ShowErrorAlert')}>ShowErrorAlert</Button>
+        <Button className={styles.margin} onClick={onAlert.bind(this,'ShowAlert')}>ShowAlert</Button>
+        <Button className={styles.margin} onClick={onAlert.bind(this,'ShowConfirm')}>ShowConfirm</Button>
+        <Button className={styles.margin} onClick={onAlert.bind(this,'ShowToast')}>ShowToast</Button>
+
+        <Button className={styles.margin} onClick={onKsso}>调用接口自动登录测试</Button>
+
+        <Button className={styles.margin} onClick={onLogout}>登出OA</Button>
+        
+        
+      </FormBlockByTitle>
+
+    </section>
+  )
+}
+
+export default Page;

package/templates/template_oa_jwt/public/src/pages/demo/index.less

@@ -0,0 +1,15 @@
+
+.wrap{
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding:10px 24px 24px 24px;
+  background-color: white;
+}
+
+.table{
+  margin:12px 0;
+}
+.margin{
+  margin:0 8px;
+}

package/templates/template_oa_jwt/public/src/pages/login/index.jsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useParams, useSearchParams,useNavigate } from 'react-router-dom';
+import ProviderApp from '@/provider/app';
+import Iframe from '@/components/IFrame';
+
+
+import styles from './index.less';
+
+const Page = () => {
+  const navigate= useNavigate();
+  const [search] = useSearchParams();
+  const providerApp = ProviderApp.useContainer();
+
+  const onLogin=()=>{
+    
+  }
+  const goHome = () => {
+    navigate('/');
+  }
+  return (
+    <section className={styles.body} onClick={onLogin}>
+      右键 - OA插件 - cookie操作 - 将系统的cookie写入本站
+
+      <div style={{color: '#2a96fc', marginTop: '30px'}} onClick={goHome}>跳到首页</div>
+    </section>
+  )
+}
+
+export default Page;

package/templates/template_oa_jwt/public/src/pages/login/index.less

@@ -0,0 +1,44 @@
+
+.link{
+  display: block;
+}
+
+.body{
+  width: 100%;
+  height:100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+}
+.wrap{
+  padding:26px 32px;
+  background-color: #ccc;
+  .title{
+    font-size: 24px;
+    font-weight: var(--weight-Medium);
+    margin-bottom: 24px;
+  }
+ 
+  hgroup{
+    margin-bottom: 16px;
+    display: block;
+    .inputLabel{
+      display: block;
+      font-size: 13px;
+      font-weight: var(--weight-Medium);
+      color: #86909C;
+      line-height: 22px;
+    }
+  }
+  .input{
+    width: 336px;
+    border-radius: 4px;
+    border: 1px solid #E5E6EB;
+  }
+  .btn{
+    width: 336px;
+    margin-top: 18px;
+  }
+}

package/templates/template_oa_jwt/public/src/pages/redirect/index.jsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import PageLoading from '@/components/Page/PageLoading';
+import { CHANGE_TOKEN, setRefreshToken } from '@/services/token'
+import { setJwt } from '@/services';
+import { toHref } from '@/utils';
+
+/**
+ * 过度页 - 用cookie换取token，在跳转到指定页面
+ * @returns 
+ */
+const Redirect = () => {
+
+  const [searchParams] = useSearchParams();
+
+  useEffect(() => {
+    const code = searchParams.get('code');
+    const state = searchParams.get('state');
+    const {id} = JSON.parse(state);
+    CHANGE_TOKEN({ code }).then(res => {
+      if (res) {
+        setJwt(res.data.access_token);
+        setRefreshToken(res.data.refresh_token);
+        toHref(`/#/${id ? '/' + id : ''}`, true);
+      }
+    })
+  }, [])
+  return <PageLoading />
+}
+
+export default Redirect;

package/templates/template_oa_jwt/public/src/provider/app.jsx

@@ -0,0 +1,66 @@
+import {  useState,useMemo, useEffect } from 'react';
+import {  useSearchParams,useNavigate } from 'react-router-dom';
+import {setLogout,setToLogin,setRefreshToken} from '@/services/token';
+import { setJwt } from '@/services';
+
+import { createContainer } from "unstated-next"
+const useApp=() =>{
+  const [search] = useSearchParams();
+  const navigate= useNavigate();
+  const [loading,setLoading] = useState(true);
+  const [nav,setNavConfig] = useState({visible:true,syncDocumentTitle:false});
+  const [user,setUser] = useState(null);
+
+
+  const setNav=(config)=>{
+    setNavConfig({...nav,...config});
+  }
+
+  const logout=()=>{
+    setJwt('');
+    setRefreshToken('');
+    location.href='/'
+    console.log('退出登录')
+  }
+
+  const toLogin=async (loginUrl)=>{
+    // if(BUILD_ENV==='localdebug'){
+    //   navigate('/login');
+    // }else{
+      const redirectUrl = `${location.origin}/#/redirect?code={code}&state={state}`;
+      const id = location.href.split('/#/')[1] || '';
+
+      const callback = JSON.stringify({
+        callback: encodeURIComponent(redirectUrl),
+        id,
+      })
+
+      let redirect=`${loginUrl}?state=${callback}`;
+
+      location.href=redirect;
+      
+    // }
+  }
+  setToLogin(toLogin);
+  setLogout(logout);
+
+
+  const action=useMemo(()=>{
+    return {
+      loading,
+      setLoading,
+      nav,
+      setNav,
+      setUser,
+      user,
+      logout,
+      toLogin
+    }
+  },[loading,nav,setNav,user,setUser,logout,toLogin]);
+
+  return action
+}
+
+const App = createContainer(useApp);
+
+export default App;

package/templates/template_oa_jwt/public/src/route.jsx

@@ -0,0 +1,45 @@
+import React,{Suspense} from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+
+import { LayoutBasic, Layout } from '@/components/Layout';
+import PageLoading from '@/components/Page/PageLoading';
+
+import Login from '@/pages/login';
+// import {AuthLogin} from '@/components/Auth';
+
+
+const delayLoader=(loader)=>{
+  return new Promise(resolve=>{
+    loader.then(req=>{
+      setTimeout(()=>{
+        resolve(req);
+      },5000)
+    })
+  })
+}
+
+
+const Demo = React.lazy(()=>import('@/pages/demo'));
+const DemoDetail = React.lazy(()=>import('@/pages/demo/detail'));
+const Redirect = React.lazy(()=>import('@/pages/redirect'));
+
+
+export const RouteList = (
+  <Routes>
+    <Route path='/' element={<Suspense fallback={<PageLoading />}><Layout /></Suspense>}>
+      <Route path='/redirect' element={<Redirect />} /> 
+      <Route path='login' element={<Login />} />
+
+      <Route
+        path='/'
+        element={
+          <LayoutBasic />
+        }
+      >
+        <Route path='/' element={<Demo />} />
+        <Route path='/detail' element={<DemoDetail />} />
+      </Route>
+    </Route>
+  </Routes>
+);
+