kn-cli 1.0.97 → 1.0.98

package/templates/template_admin/public/src/pages/auth/user/index.jsx

@@ -0,0 +1,271 @@
+import React from 'react';
+import {
+  Space,
+  Form,
+  Button,
+  Input,
+  Select,
+  Tabs,
+  Badge
+  // @ts-ignore
+} from 'antd';
+// @ts-ignore
+import {useNavigate,} from 'react-router-dom';
+// @ts-ignore
+import {PlusOutlined} from '@ant-design/icons';
+
+import ruler from '@/utils/rule';
+import {px2rem} from '@/utils';
+import {Layout,SearchBar,TitleBar,Content,Panel} from '@/pages/components/layout'
+import {emUserState} from '@/dictionary';
+import Table from '@/components/table';
+import { usePaginationWithForm } from '@/hooks';
+import Link from '@/components/link';
+import {FormatTableService,FormatGetRequest} from '@/services'
+import {
+  GET_LIST,
+} from '@/services/demo';
+
+
+import ShowEdit from './dialog';
+
+
+const AuthUser = () => {
+  const navigator = useNavigate();
+
+  const [form] = Form.useForm();
+  
+  const page = usePaginationWithForm({
+    afterService: [FormatTableService],
+    beforeService:[FormatGetRequest],
+    service: GET_LIST,
+    pagination: { pageSize: 15 },
+    form
+  });
+
+  const onSearch=()=>{
+    page.update({ pagination: { current: 1 }, clear: true });
+  }
+  const onReset=()=>{}
+
+  const onPageChange = (current, pageSize) => {
+    page.update({ pagination: { current, pageSize }, clear: true });
+  };
+
+  const onCreate=()=>{
+    navigator('/auth/user/create')
+  }
+  const onEdit=async (record)=>{
+    const req = await ShowEdit({id:record.id})
+  }
+
+  const columnsInternalUsers = [
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      render:(text,record)=>(<Table.Column minWidth={60} maxWidth={88}>{text}</Table.Column>)
+    },
+    {
+      title: '用户名',
+      dataIndex: 'name',
+      render:(text,record)=>(<Table.Column minWidth={60} maxWidth={80}>{text}</Table.Column>)
+    },
+    {
+      title: '职位',
+      dataIndex: 'name',
+      render:(text,record)=>(<Table.Column minWidth={60} maxWidth={94}>{text}</Table.Column>)
+    },
+    {
+      title: '所在部门',
+      dataIndex: 'longName',
+      render:(text,record)=>(<Table.Column minWidth={100} maxWidth={224}>{text}</Table.Column>)
+    },
+    {
+      title: '角色',
+      dataIndex: 'name',
+      render:(text,record)=>(<Table.Column minWidth={80} maxWidth={111}>{text}</Table.Column>)
+    },
+    {
+      title: '模块权限(补充)',
+      dataIndex: 'longName',
+      render:(text,record)=>(<Table.Column minWidth={120} maxWidth={187}>{text}</Table.Column>)
+    },
+    {
+      title: '产品权限(补充)',
+      dataIndex: 'longName',
+      render:(text,record)=>(<Table.Column minWidth={129} maxWidth={211}>{text}</Table.Column>)
+    },
+    {
+      title: '状态',
+      dataIndex: 'select',
+      width:70,
+      fixed:'right',
+      render:(state)=>{
+        const stateLabel = emUserState.getLabel(`${state}`);
+        if(!stateLabel)return '-'
+        const colors={
+          '1':'green',
+          '0':'red',
+          '2':'#FAAD14',
+        }
+        return  <Badge
+            color={colors[`${state}`]}
+            text={stateLabel}
+          />
+      }
+    },
+    {
+      title: '操作',
+      key: 'option',
+      width:104,
+      fixed:'right',
+      align:'center',
+      render: (_, record) => {
+        return <Link onClick={onEdit.bind(this,record)} >编辑</Link>
+
+      } 
+    },
+  ];
+  const columnsExternalUsers = [
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      fixed:'left',
+      render:(text,record)=>(<Table.Column minWidth={60} maxWidth={88} item={record}>{text}</Table.Column>)
+
+    },
+    {
+      title: '公司',
+      dataIndex: 'name',
+      render:(text,record)=>(<Table.Column minWidth={80} maxWidth={224}>{text}</Table.Column>)
+    },
+    {
+      title: '所在部门',
+      dataIndex: 'name',
+      render:(text,record)=>(<Table.Column minWidth={80} maxWidth={224}>{text}</Table.Column>)
+    },
+    {
+      title: '角色',
+      dataIndex: 'name',
+      render:(text,record)=>(<Table.Column minWidth={60} maxWidth={110}>{text}</Table.Column>)
+    },
+    {
+      title: '模块权限(补充)',
+      dataIndex: 'longName',
+      render:(text,record)=>(<Table.Column minWidth={120} maxWidth={187}>{text}</Table.Column>)
+    },
+    {
+      title: '产品权限(补充)',
+      dataIndex: 'longName',
+      render:(text,record)=>(<Table.Column minWidth={129} maxWidth={211}>{text}</Table.Column>)
+    },
+    {
+      title: '状态',
+      dataIndex: 'select',
+      width:70,
+      fixed:'right',
+      render:(state)=>{
+        const stateLabel = emUserState.getLabel(`${state}`);
+        if(!stateLabel)return '-'
+        const colors={
+          '1':'green',
+          '0':'red',
+          '2':'#FAAD14',
+        }
+        return  <Badge
+            color={colors[`${state}`]}
+            text={stateLabel}
+          />
+      }
+    },
+    {
+      title: '操作',
+      key: 'option',
+      width:104,
+      fixed:'right',
+      align:'center',
+      render: (_, record) => {
+        return <Link onClick={onEdit.bind(this,record)} >编辑</Link>
+      } 
+    },
+  ];
+  const tabs = [
+    {
+      key: '1',
+      label: '内部用户',
+      children: <Table page={page}
+        columns={columnsInternalUsers}
+        pagination={{
+          onChange: onPageChange,
+        }}
+      />,
+    },
+    {
+      key: '2',
+      label: '外部用户',
+      children: <Table page={page}
+        columns={columnsExternalUsers}
+        pagination={{
+          onChange: onPageChange,
+        }}
+      />,
+
+    },
+  ];
+
+  const onTab=()=>{}
+  return (
+    <Layout>
+      <SearchBar>
+        <TitleBar label='用户管理' />
+        <Form form={form} layout="inline" initialValues={{status:'',keyword:'',dep:'',role:''}}>
+          <Form.Item label="关键字" name={'keyword'} rules={ruler.KEYWORDS}>
+            <Input placeholder="请输入用户名/姓名" onPressEnter={onSearch} />
+          </Form.Item>
+          <Form.Item label="状态" name={'status'} style={{width:px2rem(150)}}>
+            <Select>
+              <Select.Option value=''>全部</Select.Option>
+              {emUserState.selectOptions}
+            </Select>
+          </Form.Item>
+
+          <Form.Item label="部门" name={'dep'} style={{width:px2rem(150)}}>
+            <Select>
+              <Select.Option value=''>全部</Select.Option>
+              {emUserState.selectOptions}
+            </Select>
+          </Form.Item>
+
+          <Form.Item label="角色" name={'role'} style={{width:px2rem(150)}}>
+            <Select>
+              <Select.Option value=''>全部</Select.Option>
+              {emUserState.selectOptions}
+            </Select>
+          </Form.Item>
+
+          <Space size='middle'>
+            <Button onClick={onSearch} type="primary">
+              搜索
+            </Button>
+            <Button onClick={onReset}>
+              重置
+            </Button>
+          </Space>
+        </Form>
+      </SearchBar>
+
+      <Content>
+        <Panel>
+          <Tabs defaultActiveKey="1" items={tabs} onChange={onTab}
+            tabBarExtraContent={
+              {right:<Button icon={<PlusOutlined />} type='primary' onClick={onCreate}>新建用户</Button>}
+            }
+          />
+        </Panel>
+      </Content>
+      
+    </Layout>
+  )
+}
+
+export default AuthUser;

package/templates/template_admin/public/src/pages/components/layout/index.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+// @ts-ignore
+import { useNavigate } from 'react-router-dom';
+import _TitleBar from './titleBar';
+// @ts-ignore
+import styles from './index.less';
+
+
+
+export const Layout = (props) => {
+  const { children,className='' } = props;
+  return (
+  <section className={`${styles.layout} ${className}`}>
+    {children}
+  </section>
+  )
+};
+
+export const Content = (props) => {
+  const { children,className='' } = props;
+  return (
+  <section className={`${styles.contentPadding} ${className}`}>
+    {children}
+  </section>
+  )
+};
+
+export const Panel = (props) => {
+  const { children,className='', title='' } = props;
+  return (
+  <section className={`${styles.panel} ${className}`}>
+    {title&&<label className={styles.panelTitle}>{title}</label>}
+    {children}
+  </section>
+  )
+};
+
+
+
+export const SearchBar = (props) => {
+  const { children } = props;
+  return <section className={styles.search}>{children}</section>;
+};
+
+/**
+ * 二级子页面的头部返回导航栏
+ * @param {object} props 
+ * @param {()=>void} [props.onClick] - 监听点击返回按钮，如果没有onClick则触发默认回退操作 
+ * @param {string|JSX.Element} [props.children] - 展示在返回按钮右侧区域的元素
+ * 
+ * @returns {JSX.Element}
+ */
+export const NavBackTitle=(props)=>{
+  const {children,onClick:_onClick}= props;
+  const navigate = useNavigate()
+  const onClick=()=>{
+    if(_onClick){
+      _onClick();
+      return;
+    }
+    navigate(-1);
+
+  }
+  return (
+    <div className={styles.navBack}>
+      <div className={styles.backWrap} onClick={onClick}>
+        <div className={styles.arrowBack}></div>
+      </div>
+      <span className={styles.navLabel}>{children||''}</span>
+    </div>
+  )
+}
+
+export const TitleBar = _TitleBar
+export default { Layout, Content, Panel, SearchBar, TitleBar };

package/templates/template_admin/public/src/pages/components/layout/index.less

@@ -0,0 +1,78 @@
+@import '~@/_mixin.less';
+
+.layout{
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.contentPadding{
+  position: relative;
+  margin-top: 16px;
+  padding:16px;
+  padding-top: 0;
+  width: 100%;
+  flex:1;
+  overflow: auto;
+}
+
+.panel {
+  padding: 24px;
+  border-radius: 8px;
+  background-color: white;
+  &:not(:last-child){
+    margin-bottom: 16px;
+  }
+  .panelTitle{
+    font-size: 16px;
+    color:#1F2329;
+    font-weight: bold;
+  }
+}
+.search {
+  background-color: #fff;
+  padding: 14px 16px;
+  min-height: 48px;
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
+}
+
+
+.navBack{
+  display: flex;
+  align-items: center;
+  column-gap: 14px;
+  .backWrap{
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    border:1px solid #BBBFC4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    &:hover{
+      border-color: #a6adb8;
+      .arrowBack{
+        border-color: #a6adb8;
+      }
+    }
+    .arrowBack{
+      width: 8px;
+      height: 8px;
+      border:1px solid #BBBFC4;
+      border-right: 0;
+      border-bottom: 0;
+      transform: translateX(25%) rotateZ(-45deg);
+    }
+  }
+  .navLabel{
+    font-weight: 600;
+    font-size: 20px;
+    color: #1F2329;
+    line-height: 23px;
+  }
+}

package/templates/template_admin/public/src/pages/components/layout/titleBar/index.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+// @ts-ignore
+import { useNavigate } from 'react-router-dom';
+
+// @ts-ignore
+import imgArrow from '@/assets/images/arrow.png';
+// @ts-ignore
+import styles from './index.less';
+
+const TitleBar = (props) => {
+  const { optionLeft, optionRight,label,showBack,className='' } = props;
+
+  const navigate = useNavigate();
+  const onBack=()=>{
+    navigate(-1);
+  }
+  return (
+    <section className={`${styles.title} ${className}`}>
+      <hgroup className={styles.left}>
+        {showBack&&<div className={styles.iconBack} onClick={onBack}><img src={imgArrow} /></div>}
+        {label&&<span className={styles.label}>{label}</span>}
+        <div className={styles.left}>{optionLeft || ''}</div>
+      </hgroup>
+      <div className={styles.right}>{optionRight || ''}</div>
+    </section>
+  );
+};
+export default TitleBar;

package/templates/template_admin/public/src/pages/components/layout/titleBar/index.less

@@ -0,0 +1,44 @@
+@import '~@/_mixin.less';
+
+
+.title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 36px;
+
+  .iconBack{
+    margin-right: 8px;
+    width: 24px;
+    height: 24px;
+    background-color: #F5F8FF;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    img{
+      width: 16px;
+      height: 16px;
+      transform: rotateY(180deg);
+    }
+  }
+  .label{
+    font-weight: bold;
+    font-size: 18px;
+    color:#000;
+
+  }
+  .right,
+  .left {
+    display: flex;
+    align-items: center;
+    .no-select;
+
+  }
+  .right{
+    column-gap: 16px;
+  }
+}
+
+

package/templates/template_admin/public/src/pages/components/select/account/index.jsx

@@ -0,0 +1,114 @@
+
+import React, { useEffect, useState } from 'react';
+// @ts-ignore
+import { Select } from 'antd';
+import {GET_LIST} from '@/services/demo';
+
+
+/**
+ * 账号选择
+ * 数据来源：服务设置-账号管理-所有枚举
+ * @param {object} props 
+ * @param {'single'|'multiple'} [props.mode='single'] - 单选/多选模式
+ * @param {(value:string|string[],items:object[])=>void} [props.onChange] - 选择发生变化时的回调
+ * @param {string|string[]} [props.value] - 选择发生变化时的回调
+ * @param {boolean} [props.withData=false] - 返回的数据是否包含原始用户数据
+ * @param {object} [props.style={}] - 样式
+ * @param {string} [props.placeholder] - 提示
+ * @param {boolean} [props.allowClear=falsse] - 一键删除按钮
+ * 
+ * 
+ * 
+ * @returns {JSX.Element}
+ */
+const SelectAccount=(props)=>{
+  const {mode='single',value:_value,onChange,withData=false,style:_style={},placeholder='',allowClear=false} = props;
+  const [list,setList]= useState([]);
+
+  const [value,setValue]=useState(mode=='single'?'':[]);
+
+  const init = async ()=>{
+    const req = await GET_LIST();
+    if(req?.code==0){
+      let users= req.data.map(user=>{
+        const {id,name} = user;
+        
+        // return <Select.Option value={`${id}`} data={user}>{`${name}(${account})`}</Select.Option>
+        return {
+          label:`${name}`,
+          value:`${id}`,
+          data:user
+        }
+      })
+      setList(users);
+    }else{setList([])}
+  }
+
+
+  const onUserChange=(newValue,options)=>{
+    if(onChange)onChange(newValue,options);
+  }
+
+  const onFilter=(input,option)=>{
+    const {label,value}= option;
+    if( `${label}`.toLocaleLowerCase().indexOf(input.toLocaleLowerCase()) >=0 ){
+      return true;
+    }
+    return false;
+  }
+
+  // useEffect(()=>{
+  //   if(list&&list.length>0){
+  //     if(mode=='single'){
+  //       let find = list.filter(user=>user.value == value);
+  //       if(!find || !find[0]){
+  //         if(onChange)onChange(undefined);
+  //       }
+  //     }else{
+  //       let newValue=[];
+  //       value.forEach(id=>{
+  //         let find = list.filter(user=>user.value == id);
+  //         if(find && find[0]){
+  //           newValue.push(id);
+  //         }
+  //       })
+  //       if(onChange)onChange(newValue);
+
+  //     }
+  //   }
+  // },[list])
+
+  useEffect(()=>{
+    init();
+  },[])
+  useEffect(()=>{
+    if(!_value){
+      setValue(undefined);
+      return;
+    }
+    let req;
+    if(mode=='multiple' && Array.isArray(_value)){
+      req= _value.map(id=>`${id}`)
+    }else{
+      req = `${_value}`
+    }
+    setValue(req)
+  },[_value]);
+
+  return (
+    <Select
+      style={{..._style}}
+      placeholder={placeholder}
+      allowClear={allowClear?true:false}
+      // @ts-ignore
+      mode={mode}
+      showSearch
+      value={value}
+      options={list}
+      onChange={onUserChange}
+      filterOption={onFilter}
+    />
+  );
+}
+
+export default SelectAccount;

package/templates/template_admin/public/src/pages/components/select/device/index.jsx

@@ -0,0 +1,83 @@
+
+import React, { useEffect, useState } from 'react';
+// @ts-ignore
+import { Select } from 'antd';
+import {DEVICE_ENUM} from '@/services/device';
+
+
+
+/**
+ * 设备选择框
+ * 数据来源：手机管理-所有枚举
+ * @param {object} props 
+ * @param {'single'|'multiple'} [props.mode='single'] - 单选/多选模式
+ * @param {(value:string|string[])=>void} [props.onChange] - 选择发生变化时的回调
+ * @param {string|string[]} [props.value] - 选择发生变化时的回调
+ * @param {object} [props.deviceType={}] - 调用枚举接口可用的传参
+ * 
+ * @returns {JSX.Element}
+ */
+const SelectDevice=(props)=>{
+  const {mode='single',value:_value,deviceType={},onChange} = props;
+  const [list,setList]= useState([]);
+
+  const [value,setValue]=useState(mode=='single'?'':[]);
+
+  const init = async ()=>{
+    const req = await DEVICE_ENUM(deviceType);
+    if(req?.code==0){
+      let devices= req.data.map(device=>{
+        const {id,title} = device;
+        let strId = `${id}`.padStart(2,'0');
+        return {
+          label:`[${strId}]${title}`,
+          value:`${id}`,
+          data:device
+        }
+      })
+      setList(devices);
+    }else{setList([])}
+  }
+  const onDeviceChange=(newValue)=>{
+    if(onChange)onChange(newValue);
+  }
+
+  const onFilter=(input,option)=>{
+    const {label,value}= option;
+    if( `${label}`.indexOf(input) >=0 ||
+      `${value}`.indexOf(input) >=0 
+    ){
+      return true;
+    }
+    return false;
+  }
+
+  useEffect(()=>{
+    init();
+  },[])
+  useEffect(()=>{
+    if(!_value){
+      setValue(mode=='multiple'?[]:'');
+      return;
+    }
+    let req;
+    if(mode=='multiple' && Array.isArray(_value) ){
+      req= _value.map(id=>`${id}`)
+    }else{
+      req = `${_value}`
+    }
+    setValue(req)
+  },[_value]);
+  return (
+    <Select
+      mode={mode}
+      showSearch
+      value={value}
+      options={list}
+      onChange={onDeviceChange}
+      filterOption={onFilter}
+    />
+  );
+}
+
+export default SelectDevice;