Skip to content

C
CivManage
Commit c65c49e5 authored by shaoan123's avatar shaoan123
Browse files
Options

优化台账列表管理界面

parent 7611a2e2
Pipeline #31717 skipped with stages
        Hide whitespace changes
        Inline Side-by-side
        Showing with 105 additions and 69 deletions
        src/pages/platformCenter/standingBook/editorModal.jsx
        View file @ c65c49e5
        import React, { useState, useEffect } from 'react';
        import { Form, Modal, Input, Select, Tooltip, Button, notification, Image } from 'antd';
        import { Form, Modal, Input, Select, Tooltip, Button, notification, Image, Menu, Dropdown } from 'antd';
        import {
        PlusOutlined,
        InfoCircleOutlined
        InfoCircleOutlined,
        DownOutlined
        } from '@ant-design/icons';
        import {
        LoadEventFields
        ......@@ -32,6 +33,7 @@ const AddModal = props => {
        const [types, setTypes] = useState(''); // 弹窗类型
        const [Order, setOrder] = useState(''); // 弹窗类型
        const [checkedList, setCheckedList] = useState([])
        const [Type,setType] = useState('')
        const [characterValue, setCharacterValue] = useState('')
        const [standingType, setStandingType] = useState(['台账', '反馈', '设备']);
        const [form] = Form.useForm();
        ......@@ -42,7 +44,7 @@ const AddModal = props => {
        if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        let data = type == 'add' ? { ...obj, ...inputValue, Order: maxLength } : { ...obj, Order,ID:formObj.ID }
        let data = type == 'add' ? { ...obj, ...inputValue, Order: maxLength } : { ...obj, Order, ID: formObj.ID }
        GetCMLedger_OperateLedger(data)
        .then(res => {
        setLoading(false);
        ......@@ -85,6 +87,7 @@ const AddModal = props => {
        res.data.root && form.setFieldsValue({ ...res.data.root });
        setInputVaule({ ...res.data.root })
        setOrder(res.data.root.Order)
        setType(res.data.root.Type)
        changTable(res.data.root.TableName)
        })
        }
        ......@@ -110,6 +113,7 @@ const AddModal = props => {
        },
        };
        const getTableData = () => {
        setType('')
        GetCM_Ledger_LoadLedgerTable().then(res => {
        if (res.msg === 'Ok') {
        setStandingTable(res.data.root)
        ......@@ -181,6 +185,11 @@ const AddModal = props => {
        inputText[type] = e.target.value
        setInputVaule(inputText)
        }
        const inputType = (e) => {
        setType(e.target.value)
        form.setFieldsValue({ Type:e.target.value })
        }
        return (
        <Modal
        title={`${type === 'add' ? '台账配置' : '台账编辑'}`}
        ......@@ -203,13 +212,27 @@ const AddModal = props => {
        <Item
        label="分组"
        name="Type"
        rules={[{ required: true, message: '请选择分组' }]}
        >
        <Select
        placeholder="选择分组"
        optionFilterProp="children"
        >
        {tableData.length ? tableData.map((item, index) => { return <Option key={index} value={item.type}>{item.type}</Option> }) : ''}
        </Select>
        <div>
        <Input
        className="ue-editable-select-input"
        onChange={inputType}
        value = {Type}
        >
        </Input>
        <Dropdown
        placement='bottomRight'
        style={{width:'10rem'}}
        overlay={<Menu>
        {tableData.length ? tableData.map((item, index) => { return <Menu.Item onClick={()=>{setType(item); form.setFieldsValue({ Type:item})}} style={{width:'26.6rem'}} key={index}>{item}</Menu.Item> }) : ''}
        </Menu>} >
        <div className={styles.linkDrowp} onClick={e => e.preventDefault()}>
        <DownOutlined style={{fontSize:'12px',color:'rgba(0, 0, 0, 0.25)'}} />
        </div>
        </Dropdown>
        {/* {tableData.length ? tableData.map((item, index) => { return <Option key={index} value={item}>{item}</Option> }) : ''} */}
        </div>
        </Item>
        <Item
        label="台账类型"
        ......@@ -245,11 +268,11 @@ const AddModal = props => {
        </Item>
        <Item
        label={<div className={styles.formData_label}>
        <Tooltip title={<Image
        width={200}
        src={taizhang}
        />}><InfoCircleOutlined style={{ color: '#1890FF', padding: '0.2rem 0.2rem 0 0' }} /></Tooltip><span>台账字段</span> </div>}
        label={<div className={styles.formData_label}>
        <Tooltip title={<Image
        width={200}
        src={taizhang}
        />}><InfoCircleOutlined style={{ color: '#1890FF', padding: '0.2rem 0.2rem 0 0' }} /></Tooltip><span>台账字段</span> </div>}
        name="Fields"
        >
        ......@@ -288,12 +311,12 @@ const AddModal = props => {
        </Item>
        <Item
        label={<div className={styles.formData_label}>
        <Tooltip
        title={<Image
        width={200}
        src={editor}
        />}><InfoCircleOutlined style={{ color: '#1890FF', padding: '0.2rem 0.2rem 0 0' }} /></Tooltip><span>编辑字段</span> </div>}
        label={<div className={styles.formData_label}>
        <Tooltip
        title={<Image
        width={200}
        src={editor}
        />}><InfoCircleOutlined style={{ color: '#1890FF', padding: '0.2rem 0.2rem 0 0' }} /></Tooltip><span>编辑字段</span> </div>}
        name="EditFields"
        >
        ......@@ -303,11 +326,11 @@ const AddModal = props => {
        </div>
        </Item>
        <Item
        label={<div className={styles.formData_label}>
        <Tooltip title={<Image
        width={200}
        src={web}
        />}><InfoCircleOutlined style={{ color: '#1890FF', padding: '0.2rem 0.2rem 0 0' }} /></Tooltip><span>前端字段</span> </div>}
        label={<div className={styles.formData_label}>
        <Tooltip title={<Image
        width={200}
        src={web}
        />}><InfoCircleOutlined style={{ color: '#1890FF', padding: '0.2rem 0.2rem 0 0' }} /></Tooltip><span>前端字段</span> </div>}
        name="WebFields"
        >
        ......@@ -317,11 +340,11 @@ const AddModal = props => {
        </div>
        </Item>
        <Item
        label={<div className={styles.formData_label}>
        <Tooltip title={<Image
        width={100}
        src={hand}
        />}><InfoCircleOutlined style={{ color: '#1890FF', padding: '0.2rem 0.2rem 0 0' }} /></Tooltip><span>手持字段</span> </div>}
        label={<div className={styles.formData_label}>
        <Tooltip title={<Image
        width={100}
        src={hand}
        />}><InfoCircleOutlined style={{ color: '#1890FF', padding: '0.2rem 0.2rem 0 0' }} /></Tooltip><span>手持字段</span> </div>}
        name="MobileFields"
        >
        ......
        src/pages/platformCenter/standingBook/standingBook.jsx
        View file @ c65c49e5
        ......@@ -20,7 +20,7 @@ import {
        } from '@ant-design/icons';
        import classnames from 'classnames';
        import PageContainer from '@/components/BasePageContainer';
        import { GetCM_Ledger_LoadLedgers, removeFields,CM_Ledger_RmoveLedger } from '@/services/standingBook/api';
        import { GetCM_Ledger_LoadLedgers, CM_Ledger_RmoveLedger } from '@/services/standingBook/api';
        import AddModal from './editorModal'
        import styles from './standingBook.less';
        const standingBook = props => {
        ......@@ -40,7 +40,7 @@ const standingBook = props => {
        setFormObj(record);
        setIsType('edit');
        setIsVisible(true);
        };
        const Submit = prop => {
        setIsVisible(false);
        ......@@ -154,14 +154,15 @@ const standingBook = props => {
        GetCM_Ledger_LoadLedgers().then(res => {
        setTreeLoading(false);
        if (res.msg === 'Ok' && res.data.root) {
        setMaxLength(res.data.root.length+1)
        setMaxLength(res.data.root.length + 1)
        let arr = formateArrDataA(res.data.root, 'type')
        let newArr = []
        Object.keys(arr).map((item, index) => {
        newArr.push({ type: item, key: index })
        newArr.push(item)
        })
        setAllData(arr);
        setPickItem(newArr[0].type)
        setPickItem(newArr[0])
        console.log(newArr, 'newArr');
        setTableData(newArr);
        }
        });
        ......@@ -243,39 +244,41 @@ const standingBook = props => {
        [styles.orgContainerHide]: !treeVisible,
        })}
        >
        <div>
        <span
        style={{
        fontSize: '15px ',
        fontWeight: 'bold',
        color: '#333E51',
        paddingLeft: '14px'
        }}
        >
        台账列表
        </span>
        <Tooltip title="添加台账表">
        <PlusSquareFilled
        {treeVisible ? <>
        <div>
        <span
        style={{
        color: '#1890FF',
        fontSize: '25px',
        verticalAlign: 'middle',
        float: 'right',
        paddingRight: '14px'
        fontSize: '15px ',
        fontWeight: 'bold',
        color: '#333E51',
        paddingLeft: '14px'
        }}
        onClick={e => showPopup()}
        />
        </Tooltip>
        <hr style={{ width: '100%', color: '#eeecec' }} />
        {
        tableData && (tableData.map((item) => {
        return <div className={classnames({
        [styles.listItem]: true,
        [styles.pickItem]: item.type === pickItem,
        })} onClick={e => setPickItem(item.type)} key={item.key}>{item.type}({allData[item.type].length}条) {item.type === pickItem ? <RightOutlined /> : ''} </div>
        })
        )}
        </div>
        >
        台账列表
        </span>
        <Tooltip title="添加台账表">
        <PlusSquareFilled
        style={{
        color: '#1890FF',
        fontSize: '25px',
        verticalAlign: 'middle',
        float: 'right',
        paddingRight: '14px'
        }}
        onClick={e => showPopup()}
        />
        </Tooltip>
        <hr style={{ width: '100%', color: '#eeecec' }} />
        {
        tableData.length && (tableData.map((item, index) => {
        return <div className={classnames({
        [styles.listItem]: true,
        [styles.pickItem]: item === pickItem,
        })} onClick={e => setPickItem(item)} key={index}>{item}({allData[item] ? allData[item].length : ''}条) {item === pickItem ? <RightOutlined /> : ''} </div>
        })
        )}
        </div></> : ''}
        <div className={styles.switcher}>
        {treeVisible && (
        <Tooltip title="隐藏台账列表">
        ......@@ -303,7 +306,7 @@ const standingBook = props => {
        columns={columns}
        dataSource={allData[pickItem]}
        // loading={tableLoading}
        scroll={{ y: 'calc(100vh - 150px)' }}
        scroll={{ x: 'max-content', y: 'calc(100vh - 150px)' }}
        // scroll={{ x: 'max-content' }}
        pagination={{
        showTotal: (total, range) =>
        ......@@ -315,9 +318,9 @@ const standingBook = props => {
        }}
        />
        </div>
        <AddModal visible={isVisible} type={isType} formObj={formObj} maxLength={maxLength} callBackSubmit={onSubmit} onCancel={() => setIsVisible(false)} tableData={tableData}/>
        <AddModal visible={isVisible} type={isType} formObj={formObj} maxLength={maxLength} callBackSubmit={onSubmit} onCancel={() => setIsVisible(false)} tableData={tableData} />
        </div>
        </PageContainer>
        );
        ......
        src/pages/platformCenter/standingBook/standingBook.less
        View file @ c65c49e5
        ......@@ -95,6 +95,7 @@
        min-width: calc(100vw - 582px);
        height: calc(100vh - 120px);
        overflow-x: hidden;
        border: none;
        }
        .orgContainer{
        height: calc(100vh - 74px);
        ......@@ -240,6 +241,15 @@
        // .ant-form-horizontal .ant-form-item-control {
        // margin-left: 10px;
        // }
        .linkDrowp{
        position: absolute;
        top: 0;
        left: 94.6%;
        width: 1rem;
        height: 100%;
        display: flex;
        align-items: center;
        }
        .title{
        display: flex;
        align-items: center;
        ......
        Markdown is supported
        0% or
        You are about to add 0 people to the discussion. Proceed with caution.
        Finish editing this message first!
        Please register or to comment