kn-cli 1.0.96 → 1.0.98

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import {
+  Space,
+  Form,
+  Button,
+  Input,
+  Select,
+  Tabs,
+  Badge
+  // @ts-ignore
+} from 'antd';
+// @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';
+
+// @ts-ignore
+import styles from './index.less';
+
+const AuthUserCreate = () => {
+  return (
+    <Layout>
+      <SearchBar>
+        <TitleBar label='新建用户' showBack optionRight={
+          <div className={styles.btns}>
+            <Button type='primary'>保存</Button>
+            <Button>取消</Button>
+          </div>
+        }/>
+      </SearchBar>
+
+      <Content>
+        <Panel title='基础信息'>
+          <div>123123</div>
+        </Panel>
+        <Panel title='权限配置'>
+          <div>123123</div>
+        </Panel>
+      </Content>
+      
+    </Layout>
+  )
+}
+
+export default AuthUserCreate;

package/templates/template_admin/public/src/pages/auth/user/create/index.less

@@ -0,0 +1,6 @@
+
+.btns{
+  display: flex;
+  align-items: center;
+  column-gap: 12px;
+}

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

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import ReactDom from 'react-dom';
+// @ts-ignore
+import { Modal, Form, Input, message,Spin } from 'antd';
+import Popup from '@/components/popup';
+import { UPDATE,GET_DETAIL } from '@/services/demo';
+import rule from '@/utils/rule';
+
+
+
+
+const DialogEdit = (props) => {
+  const { destory, id=null } = props;
+  const [form] = Form.useForm();
+  const [record,setRecord]=useState(null)
+
+  const init=async ()=>{
+    if(id){
+      const req= await GET_DETAIL({id})
+      if(req?.code==0 && req?.data){
+        let item= req.data;
+        setRecord(item);
+        return;
+      }
+    }
+    setRecord({})
+  }
+  const onOk = async () => {
+    try {
+      const values = await form.validateFields();
+      const params = {
+        ...values,
+      };
+      let res = null;
+      if (id) {
+        res = await UPDATE({id,...params});
+      } 
+      if (res?.code === 0) {
+        message.success('成功');
+        destory && destory(true);
+      }
+    } catch (errorInfo) {
+      console.log('Failed:', errorInfo);
+    }
+  };
+
+  const onCancel = () => {
+    form.resetFields();
+    destory && destory(false);
+  };
+
+  useEffect(()=>{
+    init();
+  },[])
+  const isEdit=id?true:false;
+  return (
+    <Modal
+      maskClosable={false}
+      title={isEdit? '编辑用户' : '新增用户'}
+      width={600}
+      open={true}
+      onOk={onOk}
+      onCancel={onCancel}
+    >
+      {
+        !record?
+        <Spin/>:
+        <Form labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} form={form} initialValues={record||{}}>
+          <Form.Item
+            label="姓名"
+            name="userId"
+            ruler={rule.INPUT}
+            required
+          >
+            <Input placeholder="请输入" disabled={isEdit}/>
+          </Form.Item>
+          <Form.Item label="昵称" name="bindNickname" ruler={rule.INPUT}>
+            <Input placeholder="请输入" />
+          </Form.Item>
+
+        </Form>
+      }
+    </Modal>
+  );
+};
+
+const ShowEdit = (props = {}) => {
+  return new Promise((resolve) => {
+    let popup = Popup(resolve);
+    ReactDom.render(
+      <DialogEdit destory={popup.destory} {...props} />,
+      popup.dom
+    );
+  });
+};
+export default ShowEdit;

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;
+  }
+}
+
+