zls

src/pages/staff/list/editRole.jsx

@@ -1,8 +1,15 @@
-import React from 'react';
-import { Form, Input, Button, Icon, Select } from 'antd';
+import React, { useState } from 'react';
+
+import { Checkbox, Row, Col, Input, Menu, Dropdown, Button, Icon, message, Table, Tooltip, Tabs, Radio, Divider, Tag, DatePicker, Select, Form, Alert, Card } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../../style/GoodsList.less';
+import XForm, { FieldTypes } from '../../../components/XForm';
+import Wangedit from '../../../components/Wangedit/Wangedit'
+import channels from './channelList.less';
+
+import Tagss from '../components/Tagss.jsx';
 
+const { TextArea } = Input;
 
 
 /**
@@ -11,17 +18,226 @@ import styles from '../../style/GoodsList.less';
  * @param {*} props
  * @returns
  */
+const Edit = (props) => {
+
+
+
+  // const [tab, changeTab] = useState('basic')
+
+  const Permission = [
+    '项目管理',
+    '员工管理',
+    '客户管理',
+    '系统管理',
+    '渠道管理',
+    '轮播图管理',
+    '资讯管理',
+    '活动管理',
+    '积分商城',
+    '首页数据',
+  ]
+
+  // const Basic = (props) => {
+
+  //   const dataSource = [
+
+
+  //     {
+  //       name: '员工管理',
+  //       per: [
+  //         '111111',
+  //         '22222',
+  //         '33333',
+  //       ]
+  //     },
+  //     {
+  //       name: '角色管理',
+  //       per: [
+  //         '444',
+  //         '555',
+  //         '666',
+  //       ]
+  //     },
+  //   ];
+
+  //   const columns = [
+  //     // {
+  //     //   title: '商品图片',
+  //     //   dataIndex: 'img',
+  //     //   key: 'img',
+  //     //   align: 'center',
+
+  //     //   render: (text, record) => <img src={record.img} className={channels.touxiang} />,
+  //     // },
+  //     {
+  //       title: '员工管理',
+  //       dataIndex: 'name',
+  //       key: 'name',
+  //       align: 'left',
+  //       render: text => <a>{text}</a>,
+  //     },
+
+  //     {
+  //       // title: '操作  ',
+  //       dataIndex: 'status',
+  //       key: 'per',
+  //       align: 'left',
+  //       render: () => <>
+  //         {/* {pre.map((item,index)=>(
+  //       <Checkbox>{item[index]}</Checkbox>
+
+
+  //               ))} */}
+  //       </>,
+  //     },
+  //   ];
+  //   return <Table dataSource={dataSource} columns={columns} />
+
+
+
+
+  // }
+  // const [Card] = useState('Poster')
+
+  const Poster = (props) => {
+
+    const dataSource = [
+
+
+      {
+        name: '员工管理',
+        per: [
+          '111111',
+          '22222',
+          '33333',
+        ]
+      },
+      {
+        name: '角色管理',
+        per: [
+          '444',
+          '555',
+          '666',
+        ]
+      },
+    ];
+
+
+    const gridStyle1 = {
+      width: '20%',
+      textAlign: 'left',
+    };
+    const gridStyle2 = {
+      width: '80%',
+      textAlign: 'left',
+    };
 
+{/* <Checkbox>{Permission[index]}</Checkbox> */}
+    return <>
+      <div style={{}}>
 
-function header(props) {
-  const { getFieldDecorator } = props.form
-  return (
+        {Permission.map((item, index) => (
 
-    <>
-     <div>编辑角色</div>
+
+          <Card title={<Checkbox>{Permission[index]}</Checkbox>} bordered={true} style={{ width: '100%' }}>
+            
+              {dataSource.map((items, indexs) => (
+              <>
+                <Card.Grid style={gridStyle1}><Checkbox>{items.name}</Checkbox></Card.Grid>
+                
+                <Card.Grid style={gridStyle2}>
+                {items.per.map((itemss,indexss) =>(
+                  <Checkbox>{items.per[indexss]}</Checkbox>
+                ))}
+                </Card.Grid>
+                </>
+            ))}
+            
+          </Card>
+
+
+
+        ))}
+      </div>
     </>
-  )
+  }
+
+  const Share = (props) => {
+    return <div>Share</div>
+  }
+
+
+
+
+  const fields = [
+    {
+      label: '角色名称',
+      name: 'roleName',
+      type: FieldTypes.Text,
+      // placeholder: '名称',
+      value: ''
+    },
+
+
+
+    {
+      label: '简介',
+      name: 'roleIntroduction',
+      render: <TextArea className={channels.inpuitTxt} ></TextArea>,
+      value: ''
+
+    },
+
+    {
+      label: '菜单权限',
+      name: 'rolePermission',
+      render:
+        <>
+          <div>
+
+            <Poster />
+
+            {/* <Radio.Group value={tab} defaultValue="1" buttonStyle="solid">
+             
+        <Checkbox>Checkbox</Checkbox>
+                {Permission.map((item,index)=>(
+                  <Radio.Button style={BottonStyle} value="{index}">{Permission[index]}</Radio.Button>
+                 
+                ))}
+            </Radio.Group>
+          
+          </div>
+          <div>
+             
+          <Table dataSource={Permission[index]} columns={columns} />
+           
+             */}
+          </div>
+        </>,
+
+    }
+    // {
+    //   label: '状态',
+    //   name: 'roleState',
+    //   render: <Radio.Group>
+    //     <Radio.Button style={{background:'#f0f0f0'}} value="a">禁用</Radio.Button>
+    //     <Radio.Button style={{background:'#f0f0f0',color:'#ff7e48'}} value="b">启用</Radio.Button>
+    //   </Radio.Group>,
+    //   value: 'b'
+    // },
+
+  ]
+
+  const handleSubmit = val => {
+    window.console.log('submit data --->', val)
+  }
+  return <XForm onSubmit={handleSubmit} fields={fields}></XForm>
+
+
+
+
 }
-const WrappedHeader = Form.create({ name: 'header' })(header);
 
-export default WrappedHeader
+
+
+export default Edit

src/pages/staff/list/editStaff.jsx

@@ -21,6 +21,13 @@ const { TextArea } = Input;
 const Edit = (props) => {
 
   const fields = [
+    {
+      label: '名称',
+      name: 'staffName',
+      type: FieldTypes.Text,
+      // placeholder: '名称',
+      value: ''
+    },
     {
       label: '公司',
       name: 'staffCompany',
@@ -114,7 +121,7 @@ const Edit = (props) => {
   const handleSubmit = val => {
     window.console.log('submit data --->', val)
   }
-  return <XForm onSubmit={handleSubmit} fields={fields} offset={8}></XForm>
+  return <XForm onSubmit={handleSubmit} fields={fields} push={8}></XForm>