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