kn-cli 1.0.60 → 1.0.62

package/templates/template_oa/public/src/components/FormRow/index.less

@@ -0,0 +1,67 @@
+// @import '@/_reset.scss';
+
+  .formRow {
+    border: 1px solid #eaeaea;
+    & > hgroup {
+      max-width: 100%;
+      height: 100%;
+    }
+    //防止超长不换行
+    .ant-checkbox-group,
+    .ant-radio-group {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .row{
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .formRowBody{
+    display: flex;
+  }
+  .formRowBody:not(:first-child) {
+    .formRow {
+      border-top: 0;
+    }
+  }
+  .formRow:not(:first-child) {
+    width: 50%;
+    border-left: 0;
+    & > hgroup {
+      width: 2000px;
+    }
+  }
+  .formRow:first-child {
+    flex-grow:1;
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+
+    background-color: #f8f8f8;
+    color: #666;
+    padding: 7px 30px;
+    height: 100%;
+    font-size: 14px;
+    & > div {
+      position: relative;
+      font-size: inherit;
+      width: 130px;
+      font-weight: 400;
+      &[required]:before {
+        font-size: 12px;
+        content: '*';
+        color: #f04134;
+        position: absolute;
+        left: -10px;
+      }
+    }
+  }
+  .data {
+    padding: 3px 9px;
+    flex:1;
+    flex-wrap: wrap;
+  }

package/templates/template_oa/public/src/components/FormTable/index.jsx

@@ -0,0 +1,136 @@
+import React ,{useImperativeHandle,useState,forwardRef} from 'react';
+import uuid from 'js-uuid';
+
+const TableFormItem =(props,ref)=> {
+  const {Table,form,formItemName,saveLast} = props;
+  const getNewId=()=>{
+    let ret = uuid.v4();
+    return ret;
+  }
+
+  const getInitalValue=(initialValue)=>{
+    let tempInitValue=[];
+    if(initialValue){
+      tempInitValue=initialValue.map((item,idx)=>{
+        item._rowKey=getNewId();
+        return item;
+      });
+    }
+    return tempInitValue
+  }
+  const [value,setValue] = useState(()=>(getInitalValue(props.initialValue)));
+
+  const onChange = (value) => {
+    if (props.onChange) {
+      props.onChange(value);
+    }
+    if (props.onRefresh) {
+      props.onRefresh(value);
+  }
+  };
+
+  
+  const onCopy=async (record, index, event)=> {
+    if (event) event.preventDefault();
+    const { getFieldValue } = form;
+    const formData = (getFieldValue(formItemName) || []);  
+
+    let newdata = null;
+    if(props.onCopy){
+      newdata = props.onCopy(record,index);
+      if(!newdata)return;
+    }else{
+      newdata = { ...props.newdata };
+    }
+    newdata = {...formData[index]};
+    newdata._rowKey=getNewId();
+    
+    let newFormData = onInsert(newdata,index);
+    onChange(newFormData);
+  }
+
+
+  const onDel = (record,index,event) => {
+    if (event) event.preventDefault();
+    const { getFieldValue, setFieldsValue } = form;
+
+    const formData = [...(getFieldValue(formItemName) || [])];
+    let isLast = formData.length === 1;
+    formData.splice(index,1);
+    setValue([]);
+    setFieldsValue({[formItemName]:[]});
+
+    setValue(formData);
+    setFieldsValue({[formItemName]:formData});
+
+    if (saveLast && isLast) {
+      onAdd(record, index, event)
+    } else {
+      onChange(formData);
+    }
+  };
+
+  const onReset=(initValue,event)=>{
+    if (event) event.preventDefault();
+    const {setFieldsValue } = form;
+    const {initialValue} = props;
+    
+    initValue = initValue||initialValue;
+    initValue = getInitalValue(initValue);
+
+    setValue([]);
+    setFieldsValue({[formItemName]:[]})
+    setValue(initValue);
+    setFieldsValue({[formItemName]:[...initValue]});
+  }
+
+  const onInsert= (newdata,index)=>{
+    const { getFieldValue, setFieldsValue } = form;
+    const oldData = (getFieldValue(formItemName) || []);
+    let formData = [...oldData];
+    if(index>=0){
+      formData.splice(index+1,0,newdata);
+    }else{
+      formData.push(newdata);
+    }
+    setValue([]);
+    setFieldsValue({[formItemName]:[]})
+    setValue(formData);
+    setFieldsValue({[formItemName]:formData})
+    return formData;
+  }
+
+  const onAdd = (record, index , event) => {
+    if (event) event.preventDefault();
+
+    let newdata=null;
+    if(props.onAdd){
+      newdata = props.onAdd(record,index);
+      if(!newdata)return;
+    }else{
+      newdata = { ...props.newdata };
+    }
+    newdata._rowKey = getNewId();
+    let formData = onInsert(newdata,index);
+    onChange(formData);
+  };
+
+  useImperativeHandle(ref, () => ({
+    onReset,
+  }));
+
+
+  return (
+   
+    <Table
+      {...{rowKey: '_rowKey',...props.antTableOptions}}
+      dataSource={value}
+      columns={props.columns({formItemName,onDel, onAdd,onReset,onCopy})}
+    />
+  
+  )
+}
+
+
+
+export default forwardRef(TableFormItem);

package/templates/template_oa/public/src/components/IFrame/index.less

@@ -1,4 +1,4 @@
 
 .iframeWrap{
-  border:1px solid red;
+  // border:1px solid red;
 }

package/templates/template_oa/public/src/components/Layout/Basic/index.jsx

@@ -7,23 +7,29 @@ import styles from './index.less';
 const LayoutBasic=(props)=>{
   const {nav=""} = props;
   return ( 
-    <section className={styles.windowWrap}>
+    <section className={styles.htmlWrap}>
       <Iframe name='header' url={OA_MENU_HOST} className={styles.iframeHeader} />
-      <section className={styles.centerWrap}>
+      <section className={styles.headerSpace}></section>
 
-        <div className={styles.crumbs}>
-          <b>当前位置：</b>
-          <span>服务</span>
-          <span style={{ margin: '0 4px' }}>{'>'}</span>
-          <a>{document.title}</a>
-        </div>
-        <section className={styles.content}>
-          {nav}
-          <section className={styles.body}>
-            <Outlet />
+      <section className={styles.bodyWrap}>
+        <section className={styles.centerWrap}>
+          <div className={styles.crumbs}>
+            <b>当前位置：</b>
+            <span>法务部</span>
+            <span style={{ margin: '0 4px' }}>{'>'}</span>
+            <a>{document.title}</a>
+          </div>
+          <section className={styles.content}>
+            {nav}
+            <section className={styles.body}>
+              <Outlet />
+            </section>
           </section>
+          <section className={styles.footerSpace}></section>
+
         </section>
       </section>
+
     </section>
   )
 }

package/templates/template_oa/public/src/components/Layout/Basic/index.less

@@ -1,44 +1,54 @@
 @import '~@/_variable.less';
 
-.windowWrap{
+.htmlWrap{
   width:100%;
   height:100%;
+  overflow: hidden;
+  display: block;
+  display: flex;
+  flex-direction: column;
+}
+.bodyWrap{
+  flex:1;
+  width: 100%;
   overflow: auto;
   overflow: scroll;
   -webkit-overflow-scrolling: touch;
-  display: block;
-  text-align: center;
 }
-
 .centerWrap {
   min-width: 1200px;
   max-width: 1600px;
   position: relative;
-  display: inline-block;
+  margin: 0 auto;
+  padding: 0 20px;
   z-index:0;
-  padding-bottom: var(--height-footer);
-
 }
-
+.footerSpace{
+  width: 100%;
+  height:var(--height-footer);
+}
 .iframeHeader{
   min-width: 100%;
   width: 1200px;
   height: var(--height-header);
   min-height: var(--height-header);
-  position: sticky;
+  border:1px solid red;
+  position: fixed;
   left:0;
   top:0;
   z-index: 2;
   font-size: 60px;
   overflow: hidden;
-  border:1px solid red;
+}
+.headerSpace{
+  width: 100%;
+  height: var(--height-header);
 }
 
 .crumbs{
   height: 36px;
   width: 100%;
   max-width: 1600px;
-  padding:0 20px;
   font-size: 14px;
   color: #666;
   margin-bottom: 2px;

package/templates/template_oa/public/src/components/Layout/index.jsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import ProviderApp from '@/provider/app';
 
+
 import {Outlet} from 'react-router-dom';
 import { ConfigProvider } from 'antd';
 import LayoutBasic from './Basic';
 import LayoutCenterBody from './CenterBody';
 import zhCN from 'antd/lib/locale/zh_CN';
 
-
 import styles from './index.less';
+styles;
 
 // 站点最基础的layout，用于控制一些全局环境变量
 const Layout = (props) => {

package/templates/template_oa/public/src/components/Nav/index.jsx

@@ -1,121 +1,184 @@
-import React, { useEffect, useState } from 'react';
+import { Menu } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import {matchPath,useLocation,useNavigate,} from 'react-router-dom';
+import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import {useLoading} from '@/hooks';
 
-import { Menu, Spin } from 'antd';
-import {GET_LEFT_MENU} from '@/services/auth';
+import styles from './index.less';
 
-import {
-  SettingOutlined,
-  HddOutlined,
-  ProfileOutlined,
-  FileTextOutlined,
-  LineChartOutlined,
-  FundViewOutlined,
-  ProjectOutlined,
-} from '@ant-design/icons';
+const ICON_NAME={
+  'AppstoreOutlined':<AppstoreOutlined />,
+  'MailOutlined':<MailOutlined />,
+  'SettingOutlined':<SettingOutlined />,
+}
 
-import styles from './index.less';
 
+const SUB_MENU_CONFIG=[
+  {
+    path:'/video',//匹配菜单路由是/video的菜单
+    // routeTemplate:''匹配某个模板菜单的模板
+    subRoute:[
+      {
+        path:'/video/detail',//将video/detail这个路由匹配给菜单/video
+        // routeTemplate:''//也可以将某个路由模板匹配给某个菜单
+      }
+    ]
+  },
+]
 
+const MenuRoute=[
+  {
+    label:'内容管理',
+    icon:'AppstoreOutlined',
+    children:[
+      {label:'剧集管理',path:'/video'},
+    ]
+  },
+  {
+    label:'用户中心',
+    icon:'CustomerServiceOutlined',
+    path:'/my'
+  },
+]
 
-export const LayoutByLeftNav = (props) => {
-  const [loading, setLoading] = useState(true);
-  const [menuInfo, setMenuInfo] = useState([]);
+const LeftMenu=(props)=>{
 
-  useEffect(() => {
-    GET_LEFT_MENU().then((ret) => {
-      setMenuInfo(ret.info);
-      setLoading(false);
-    });
-  }, []);
+  const loader = useLoading();
+  const [menus,setMenus] = useState([]);
+  const [openKeys,setOpenKeys] = useState([]);
+  const [selectedKeys,setSelectKeys] = useState([]);
+  const curRoute = useLocation();
+  const nav = useNavigate();
 
-  function btnMenu(e) {
-    let link = e.item.props.link;
-    location.href = link;
-  }
+  const MENU_KEY_COUNTER=useRef(1);
+  const MENU_KEY=useRef({});
 
-  function createMenu() {
-    let openSubs = [];
-    menuInfo.forEach((sub) => {
-      if (sub.children && sub.children.length > 0) {
-        // 强行就展开
-        openSubs.push(sub.menu_name);
-        // 如果当前选中的是子目录则展开父级目录
-        // for (let i = 0; i < sub.children.length; i++) {
-        //   if (props.selected.includes(sub.children[i].menu_name)) {
-        //     openSubs.push(sub.menu_name);
-        //     break;
-        //   }
-        // }
+  const getSubConfig=(menu)=>{
+    const {path,routeTemplate}= menu;
+    for(let i=0;i<SUB_MENU_CONFIG.length;i++){
+      let sub= SUB_MENU_CONFIG[i];
+      if(routeTemplate&&sub.routeTemplate&&routeTemplate==sub.routeTemplate){
+        return sub.subRoute;
       }
-    });
-
-    function getIcon(icon) {
-      switch (icon) {
-        case 'investproduct':
-          return <LineChartOutlined />;
-        case 'product':
-          return <HddOutlined />;
-        case 'manufacturer':
-          return <ProfileOutlined />;
-        case 'report':
-          return <FileTextOutlined />;
-        case 'system':
-          return <SettingOutlined />;
-        case 'ip_product':
-          return <FundViewOutlined />;
-        case 'ip_manage':
-          return <ProjectOutlined />;
+      if(path&&sub.path&&path==sub.path){
+        return sub.subRoute;
       }
+    }
+    return null;
+  }
 
-      return '';
+  const translateMenu=(data={},parent)=>{
+    const {label,icon,children,path}= data;
+    let myKey = `${MENU_KEY_COUNTER.current}`
+    let item ={
+      key:myKey,
+      label,
+      source:data,
+      path,
+      routepath:parent?`${parent.key}-${myKey}`:myKey
+    } 
+    MENU_KEY.current[myKey] = item;
+    MENU_KEY_COUNTER.current++;
+    if(icon){
+      item.icon= ICON_NAME[icon];
     }
+    let subRoute= getSubConfig(data);
+    item.source.subRoute= subRoute;
+    if(children){
+      item.children = children.map(childData=>{
+        return translateMenu(childData,item)
+      })
+    }
+    return item;
+  }
 
-    return (
-      <section>
-        <Menu
-          selectedKeys={[props.selected]}
-          defaultOpenKeys={openSubs}
-          className={styles.nav}
-          mode='inline'
-          onClick={btnMenu}
-        >
-          {menuInfo.map((sub, subIdx) => {
-            return sub.children && sub.children.length > 0 ? (
-              <Menu.SubMenu key={sub.menu_name} icon={getIcon(sub?.icon)} title={sub.menu_name}>
-                {sub.children
-                  ? sub.children.map((menu, idx) => {
-                      return (
-                        <Menu.Item key={menu.menu_name} link={menu.link_path}>
-                          {menu.menu_name}
-                        </Menu.Item>
-                      );
-                    })
-                  : ''}
-              </Menu.SubMenu>
-            ) : (
-              <Menu.Item key={sub.menu_name} icon={getIcon(sub?.icon)} link={sub.link_path}>
-                {sub.menu_name}
-              </Menu.Item>
-            );
-          })}
-        </Menu>
-      </section>
-    );
+
+  window.matchPath=matchPath;
+
+
+  const GET_ROUTE_MENU=(menuList)=>{
+    let groupKeys=[];
+    for(let key in menuList){
+      const menuItem = menuList[key];
+      const {path,routeTemplate,subRoute}= menuItem.source;
+      if(path){
+        let fn = matchPath;
+        let match= fn(routeTemplate||path,curRoute.pathname);
+        if(!match&&subRoute){
+          match= subRoute.some(sub=>{
+            let subMatch= fn(sub.routeTemplate||sub.path,curRoute.pathname);
+            if(subMatch){
+              return true;
+            }
+            return false;
+          })
+        }
+        if(match){
+          groupKeys = menuItem.routepath?menuItem.routepath.split('-'):'';
+        }
+      }
+    }
+    return groupKeys;
+  }
+
+  const loadMenu= async ()=>{
+    loader.setLoading(true);
+    // const req= await GET_LEFT_MENU();
+
+
+    const req= {code:0,info:MenuRoute}
+    if(req.info){
+      const menuList= req.info.map(menu=>{
+        return translateMenu(menu)
+      })
+      setMenus(menuList);
+    }else{
+      setMenus([]);
+    }
+    loader.setLoading(false);
+  }
+
+  useEffect(()=>{
+    loadMenu();
+  },[])
+
+  useEffect(()=>{
+    let groupKeys= GET_ROUTE_MENU(MENU_KEY.current);
+    setOpenKeys(groupKeys);
+    let selectKey =groupKeys[groupKeys.length-1];
+    setSelectKeys([selectKey])
+  },[curRoute,menus]);
+
+  const onClickMenuItem=(e)=>{
+    const { item, key, keyPath, domEvent } = e;
+    const menuData = MENU_KEY.current[key];
+    if(menuData.path){
+      nav(menuData.path);
+    }
+  }
+  const onOpenChange=(keys)=>{
+    setOpenKeys(keys);
   }
-  
   return (
     <section
       className={styles.wrap}
     >
-      {loading ? (
-        <section className={styles.loadingWrap} >
-            <Spin />
-        </section>
-      ) : (
-        createMenu()
-      )}
+    
+        <Menu
+          selectedKeys={selectedKeys}
+          className={styles.nav}
+          openKeys={openKeys}
+          onOpenChange={onOpenChange}
+          onClick={onClickMenuItem}
+          mode="inline"
+          items={loader.loading?[]:menus}
+        />
+
     </section>
-  );
-};
 
-export default LayoutByLeftNav;
+   
+  )
+}
+
+export default LeftMenu;
+

package/templates/template_oa/public/src/components/Select/DepSelect/index.jsx

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import { Select } from 'antd';
+
+/**
+ * 所属部门选择器
+ */
+function DepSelect(props) {
+  const [value, setValue] = useState(props?.value || '');
+  const [list] = useState(props.list || null);
+
+  useEffect(() => {
+    if (props?.value) setValue(props.value);
+  }, [value]);
+
+  function filterOption(inputValue, option) {
+    if (option.data.ORG_NAME && option.data.ORG_NAME.toLocaleLowerCase().includes(inputValue.toLocaleLowerCase())) {
+      return true;
+    }
+
+    return false;
+  }
+  function onChange(options, selected) {
+    setValue(options);
+    if (props.onChange) props.onChange(options, selected);
+  }
+
+  return (
+    <Select
+      value={`${value}`}
+      loading={!list}
+      style={{ width: '100%' }}
+      onChange={onChange}
+      showSearch
+      filterOption={filterOption}
+    >
+      {list?.map((item) => {
+        return (
+          <Select.Option data={item} key={item.ORG_ID} value={`${item.ORG_ID}`}>
+            {item.ORG_NAME}
+          </Select.Option>
+        );
+      })}
+    </Select>
+  );
+}
+
+export default DepSelect;