添加demo

src/pages/demo/index.tsx

@@ -2,109 +2,109 @@
  * @Author: code4eat awesomedema@gmail.com
  * @Date: 2023-03-03 11:30:33
  * @LastEditors: code4eat awesomedema@gmail.com
- * @LastEditTime: 2023-11-30 19:45:14
+ * @LastEditTime: 2023-11-09 13:49:35
  * @FilePath: /KC-MiddlePlatform/src/pages/platform/setting/pubDicTypeMana/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 
 
-import { createFromIconfontCN } from '@ant-design/icons';
-import { ModalForm, ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
-import { ProColumns } from '@ant-design/pro-table';
-import { Dropdown, Input, MenuProps, message, Tooltip, Popconfirm, TreeProps } from 'antd';
 
-import { Key } from 'react';
-import { useEffect, useRef, useState } from 'react';
-import DirectoryTree from 'antd/es/tree/DirectoryTree';
-import { DataNode } from 'antd/es/tree';
+import KCIMPagecontainer from '@/components/KCIMPageContainer';
+import { KCIMTable } from '@/components/KCIMTable';
+import { formatMoneyNumber } from '@/utils/format';
+import { createFromIconfontCN } from '@ant-design/icons';
+import FormItem from 'antd/es/form/FormItem';
 
-import { getAccountingItemMap, addTableData, delData, getAccountingList, batchDelTableData } from './service';
+import { ActionType, ProFormDatePicker, ProFormDateTimePicker, ProFormInstance, ProFormText } from '@ant-design/pro-components';
+import { ModalForm, ProFormDependency, ProFormDigit, ProFormRadio, ProFormSelect, ProFormSwitch } from '@ant-design/pro-form'
+import { ProColumns } from '@ant-design/pro-table';
+import { Input, message, Popconfirm, Form } from 'antd';
+import { Fragment, useEffect, useRef, useState } from 'react';
 
+import 'moment/locale/zh-cn';
+import locale from 'antd/es/date-picker/locale/zh_CN';
 
-import './style.less';
 
-import expandedIcon from '../../../static/treenode_open.png';
-import closeIcon from '../../../static/treenode_collapse.png';
 
+import { addData, delData, editData, getDrugTableData, getDrugTypeReq, importDataPost } from './service';
 
-import '../../utils/zhongtaiB'
-import KCIMPagecontainer from '@/components/KCIMPageContainer';
-import { KCIMTable } from '@/components/KCIMTable';
+import './style.less';
+import KCIMUpload from '@/components/KCIMUpload';
+import { downloadTemplateReq } from '@/utils/tooljs';
 
-import TableSelecter from './tableSelector';
-import { getDeepestTreeData } from '@/utils/tooljs';
-import { ActionType } from '@ant-design/pro-components';
 
 const IconFont = createFromIconfontCN({
     scriptUrl: '',
 });
 
-let _currentSelectedType: any = undefined;
 
-const ChargeItemMap = () => {
+
+export default function DrugCostManagement() {
 
     const [tableDataFilterParams, set_tableDataFilterParams] = useState<any | undefined>();
     const [tableDataSearchKeywords, set_tableDataSearchKeywords] = useState<string>('');
-
-    const [treeData, set_treeData] = useState<any[]>([]);
-    const [currentSelectedTreeNode, set_currentSelectedTreeNode] = useState<null | any>(null);
-    const [expandedKeys, set_expandedKeys] = useState<Key[]>([]);
-    const [autoExpandParent, set_autoExpandParent] = useState(true);
-    const [searchValue, set_searchValue] = useState('');
-    const [currentTreeDataFilter, set_currentTreeDataFilter] = useState({ name: '全部', code: 0 });
-    const [treeFilterVisible, set_treeFilterVisible] = useState(false);
-    const [selectedRowKeys,set_selectedRowKeys] = useState<Key[]>([]);
-
-    const [tableSelecterVisible, set_tableSelecterVisible] = useState(false);
-
-    const [treeDataDefault, set_treeDataDefault] = useState<any[]>([]);
-
-    const [leftDataSearchKeyVal, set_leftDataSearchKeyVal] = useState<undefined | string>(undefined);
-
     const tableRef = useRef<ActionType>();
-
-    const column: ProColumns[] = [
+    const formRef = useRef<ProFormInstance>();
+    const [stopStat,set_stopStat] = useState(0);
+    const columns: ProColumns[] = [
 
         {
-            title: '收费项目代码',
-            ellipsis: true,
-            width: 120,
-            dataIndex: 'itemCode',
-
+            title: '项目代码',
+            dataIndex: 'code',
         },
         {
-            title: '收费项目名称',
-            dataIndex: 'itemName',
-
+            title: '项目名称',
+            dataIndex: 'name',
         },
         {
-            title: '收费项目类别',
-            width: 100,
+            title: '项目类型',
             dataIndex: 'typeName',
         },
+        {
+            title: '单价',
+            dataIndex: 'price',
+            renderText(num) {
+                return formatMoneyNumber(num)
+            },
+        },
+        {
+            title: '成本',
+            dataIndex: 'cost',
+            renderText(num) {
+                return formatMoneyNumber(num)
+            },
+        },
+        {
+            title: '停用',
+            dataIndex: 'status',
+            renderText(stat) {
+                return stat ? '是' : '否'
+            },
+        },
         {
             title: '操作',
             key: 'option',
-            width: 60,
+            width: 120,
             valueType: 'option',
             render: (_: any, record: any) => {
                 return [
+                    <UpDataActBtn key={'act'} record={record} type='EDIT' />,
                     <Popconfirm
                         title="是否确认删除？"
                         key="del"
-                        onConfirm={() => delTableData(record.id)}
+                        onConfirm={() => delTableData(record)}
                     >
                         <a>删除</a>
                     </Popconfirm>
                 ]
             },
         },
+
     ]
 
 
     const getTableData = async (params: any) => {
-
-        const resp = await getAccountingItemMap({ ...params });
+        const resp = await getDrugTableData({...params,stop:stopStat});
         if (resp) {
             return {
                 data: resp.list,
@@ -113,335 +113,249 @@ const ChargeItemMap = () => {
                 pageSize: resp.pageSize,
                 totalPage: resp.totalPage,
             }
-        } else {
-            return []
         }
+        return []
     }
 
-
-    //获取左侧列表
-    const getPageLeftData = async () => {
-        const resp = await getAccountingList('', currentTreeDataFilter.code);
-        set_treeData(resp);
-        set_treeDataDefault(resp);
-    }
-
-    const delTableData = async (id: number) => {
-        const resp = await delData(id);
+    const delTableData = async (record: any) => {
+        const resp = await delData(record.id);
         if (resp) {
             message.success('操作成功！');
             tableRef.current?.reload();
+            // message.success('操作成功!');
         }
     }
 
+    const updateTable = async (formVal: any, type: 'EDIT' | "ADD") => {
 
-    const tableSelecterCommit = async (keys: Key[], rows: any[]) => {
-
-        const arr = rows.map((a, index) => ({
-            itemCode: a.itemCode,
-            itemName: a.itemName,
-            type: a.itemType,
-        }));
         const result = {
-            accountingCode: currentSelectedTreeNode.accountingCode,
-            accountingName: currentSelectedTreeNode.accountingName,
-            itemMaps: arr
-        }
-        const resp = await addTableData(result);
-        if (resp) {
-            message.success('操作成功');
-            set_tableSelecterVisible(false);
-            tableRef.current?.reload();
-        }
-    }
-
-
-
-    const tableDataSearchHandle = (paramName: string) => {
-
-        set_tableDataFilterParams({
-            ...tableDataFilterParams,
-            [`${paramName}`]: tableDataSearchKeywords
-        })
-
-    }
-
-    const batchDelHandle = async () => {
-        const resp = await batchDelTableData(selectedRowKeys);
-        if (resp) {
-            message.success('操作成功！');
-            set_selectedRowKeys([]);
-            tableRef.current?.reload();
-        }
-    }
-
-
-    const onSelect: TreeProps['onSelect'] = (selectedKeys, info: any) => {
-        const { node } = info;
-        if (!node.children || node.children.length == 0) {
-            set_currentSelectedTreeNode(node);
+            ...formVal
         }
-    };
-
-    const onExpand = (newExpandedKeys: React.Key[]) => {
-        // setExpandedKeys(newExpandedKeys);
-        // setAutoExpandParent(false);
-        set_expandedKeys(newExpandedKeys);
-        set_autoExpandParent(false);
-    };
 
-
-    const dataList: any[] = [];
-
-    const getParentKey = (key: React.Key, tree: any[]): React.Key => {
-        let parentKey: React.Key;
-        for (let i = 0; i < tree.length; i++) {
-            const node = tree[i];
-            if (node.children) {
-                if (node.children.some((item: { accountingCode: React.Key; }) => item.accountingCode === key)) {
-                    parentKey = node.accountingCode;
-                } else if (getParentKey(key, node.children)) {
-                    parentKey = getParentKey(key, node.children);
-                }
+        if (type == 'ADD') {
+            const resp = await addData(result);
+            if (resp) {
+                tableRef.current?.reload();
+                message.success('操作成功！');
             }
+
         }
-        return parentKey!;
-    };
+        if (type == 'EDIT') {
 
-    const generateList = (data: any[]) => {
-        for (let i = 0; i < data.length; i++) {
-            const node = data[i];
-            dataList.push(node);
-            if (node.children) {
-                generateList(node.children);
+            const resp = await editData({...result});
+            if (resp) {
+                tableRef.current?.reload();
+                message.success('操作成功！');
             }
         }
-    };
-
-    generateList(treeData as any);
+        return true;
 
+    }
 
-    const onTreeSearchKeyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 
-        const { value } = e.target;
+    const UpDataActBtn = ({ record, type }: { record: any, type: 'EDIT' | 'ADD' }) => {
 
-        const newExpandedKeys = dataList
-            .map((item) => {
-                if (item.accountingName.indexOf(value) > -1) {
-                    return getParentKey(item.accountingCode, treeData);
+        return (
+            <ModalForm
+                title={`${type == 'EDIT' ? '编辑' : '新增'}药品`}
+                width={350}
+                formRef={formRef}
+                initialValues={type == 'EDIT' ? {
+                    ...record,
+                } : {status:0}}
+                trigger={
+                    type == 'EDIT' ? <a key="edit" >编辑</a> : <span className='add'>新增</span>
                 }
-                return null;
-            });
+                onFinish={(val) => {
+                    return updateTable(type == 'EDIT' ? { ...record, ...val } : { ...val }, type);
+                }}
+                modalProps={{ destroyOnClose: true }}
+                colProps={{ span: 24 }}
+                grid
+            >
+                <ProFormText
+                    name="code"
+                    label="项目代码："
+                    placeholder="请输入"
+                    rules={[{ required: true, message: '项目代码不能为空!' }]}
+                />
+                <ProFormText
+                    name="name"
+                    label="项目名称："
+                    placeholder="请输入"
+                    rules={[{ required: true, message: '项目名称不能为空!' }]}
+                />
+                <ProFormSelect
+                    name="type"
+                    label="项目类型："
+                    placeholder="请选择"
+                    request={async () => {
+                        const resp = await getDrugTypeReq();
+                        if(resp){
+                              return resp.map((a:any)=>({label:a.name,value:a.code}))
+                        }
+                    }}
+                    rules={[{ required: true, message: '项目类型不能为空!' }]}
+                />
+                <ProFormDigit
+                    name="price"
+                    label="单价："
+                    placeholder="请输入"
+                    rules={[{ required: true, message: '单价不能为空!' }]}
+                />
+                <ProFormDigit
+                    name="cost"
+                    label="成本："
+                    placeholder="请输入"
+                    rules={[{ required: true, message: '成本不能为空!' }]}
+                />
+                <Form.Item style={{ width: 322 }} label={<span style={{}}><i style={{ fontSize: 14, color: '#FF4060', fontWeight: 400, position: 'relative', paddingRight: 4, paddingLeft: 4 }}>*</i>停用：</span>}>
+                    <div style={{ display: 'flex', flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
+                        <ProFormRadio.Group
+                            name="status"
+                            noStyle
+                            colProps={{ span: 10 }}
+                            options={[
+                                {
+                                    label: '否',
+                                    value: 0
+                                },
+                                {
+                                    label: '是',
+                                    value: 1
+                                }
+                            ]}
+                        />
+                        {/* style={{position:'relative',left:-10}}  */}
+                        <ProFormDependency name={['status']}>
+                            {
+                                ({ status }) => {
+                                    // console.log({report});
+                                    return (
+
+                                        status ? <ProFormDateTimePicker fieldProps={{locale}} name="stopTime" placeholder="请选择停用时间" rules={[{ required: true, message: '时间不能为空!' }]} colProps={{ span: 14 }} noStyle  />:null
+                                    )
+                                }
+                            }
+                        </ProFormDependency>
 
-        set_expandedKeys(newExpandedKeys as React.Key[]);
-        set_searchValue(value);
-        set_autoExpandParent(true);
-    }
+                    </div>
+                </Form.Item>
 
-    //左侧树结构筛选
-    const changeTreeDataFilter = (obj: any) => {
 
-        set_currentTreeDataFilter(obj);
-        set_treeFilterVisible(false);
+            </ModalForm>
+        )
     }
 
+    const tableDataSearchHandle = (paramName: string) => {
 
+        set_tableDataFilterParams({
+            ...tableDataFilterParams,
+            [`${paramName}`]: tableDataSearchKeywords
+        })
 
-    useEffect(() => {
-
-        if (currentSelectedTreeNode) {
-            set_tableDataFilterParams({ ...tableDataFilterParams, accountingCode: currentSelectedTreeNode.accountingCode });
-        }
-    }, [currentSelectedTreeNode])
-
-    useEffect(() => {
-        //初始化左侧树结构数据后
-
-        if (treeData?.length > 0) {
-            if (!currentSelectedTreeNode) {
-                if (treeData[0].children && treeData[0].children.length > 0) {
-                    const [node, nodeParent] = getDeepestTreeData(treeData[0], 'children');
-                    set_currentSelectedTreeNode(node);
-                    set_expandedKeys([nodeParent.accountingCode]);
-                } else {
-                    set_currentSelectedTreeNode(treeData[0]);
-                    set_expandedKeys([treeData[0].accountingCode]);
-                }
+    }
 
+    const downloadTemplate = async () => {
+        await downloadTemplateReq('/costAccount/setting/exportDrug');
+    };
+    
+      const importData = () => {
+        return (
+          <ModalForm
+            width={360}
+            title={`导入数据`}
+            trigger={
+              <a className="import" key="3">
+                导入
+              </a>
             }
-        }
-    }, [treeData]);
+            submitter={{
+              render: (props, defaultDoms) => {
+                const needBtn = defaultDoms.filter((b) => {
+                  return b.key != 'rest';
+                });
+                return [
+                  // <Button
+                  //     key="ok"
+                  //     onClick={auditType == '0' ? () => downloadTemplate(index) : () => { }}
+                  // >
+                  //     下载模板
+                  // </Button>,
+                  ...needBtn,
+                ];
+              },
+            }}
+            onFinish={async (values) => {
+              const {
+                importFile: { fileList },
+              } = values;
+    
+              let formData = new FormData();
+              formData.append('file', fileList[0].originFileObj);
+              const resp = await importDataPost(formData);
+    
+              if (resp) {
+                tableRef.current?.reload();
+                return true;
+              }
+            }}
+          >
+            <FormItem name={'importFile'}>
+              <KCIMUpload downloadTemplateFile={() => downloadTemplate()} />
+            </FormItem>
+          </ModalForm>
+        );
+      };
 
-    useEffect(() => {
-        getPageLeftData();
-    }, [currentTreeDataFilter])
 
     useEffect(() => {
-        getPageLeftData();
-    }, [])
-
 
+    }, [])
 
     return (
-        <KCIMPagecontainer title={false} className='ChargeItemMap'>
-            <TableSelecter
-                onVisibleChange={(bool) => set_tableSelecterVisible(bool)}
-                title='添加'
-                rowKey={'itemCode'}
-                defaultSelectedKeys={[]}
-                record={_currentSelectedType}
-                open={tableSelecterVisible}
-                onFinish={(keys, rows) => tableSelecterCommit(keys, rows)}
-            />
-
-            {selectedRowKeys.length > 0 && (
-                <div className='bottomBar'>
-                    <span>已选择<a>{selectedRowKeys.length}</a>项</span>
-                    <a onClick={() => batchDelHandle()}>批量删除</a>
-                </div>
-            )}
-
-            {
-                treeFilterVisible && (
-                    <div className='selecterList'>
-                        <div onClick={() => changeTreeDataFilter({ name: '全部', code: 0 })} className={currentTreeDataFilter.code == 0 ? 'list on' : 'list'}>全部</div>
-                        <div onClick={() => changeTreeDataFilter({ name: '已对照', code: 1 })} className={currentTreeDataFilter.code == 2 ? 'list on' : 'list'}>{'未对照'}</div>
-                        <div onClick={() => changeTreeDataFilter({ name: '未对照', code: 2 })} className={currentTreeDataFilter.code == 1 ? 'list on' : 'list'}>{'已对照'}</div>
-                    </div>
-                )
-            }
-
-            <div className='left'>
-                <div className='toolbar'>
-                    <Input placeholder={'会计科目名称'} allowClear
-                        suffix={
-                            <IconFont type="iconsousuo" style={{ color: '#99A6BF' }} />
-                        }
-                        value={leftDataSearchKeyVal}
-                        style={{ width: 156 }}
-                        onChange={onTreeSearchKeyChange}
-                    />
-                    <Tooltip placement="top" title={currentTreeDataFilter.name}>
-                        <div className={currentTreeDataFilter.code == 0 ? 'filter' : currentTreeDataFilter.code == 1 ? 'filter orange' : 'filter blue'} onClick={() => set_treeFilterVisible(true)}></div>
-                    </Tooltip>
-
-
-                </div>
-
-                <div className='wrap'>
-                    {
-                        treeData && treeData.length > 0 && currentSelectedTreeNode && (
-                            <DirectoryTree
-                                fieldNames={{ title: 'accountingName', key: 'accountingCode' }}
-                                rootStyle={{ height: '100%', paddingBottom: 50, padding: '0 16px' }}
-                                onSelect={onSelect}
-                                onExpand={onExpand}
-                                expandedKeys={expandedKeys}
-                                autoExpandParent={autoExpandParent}
-                                selectedKeys={[currentSelectedTreeNode.accountingCode]}
-                                blockNode={true}
-
-                                icon={() => null}
-
-                                titleRender={
-                                    (nodeData: any) => {
-                                        const strTitle = nodeData.accountingName as string;
-                                        const index = strTitle.indexOf(searchValue);
-                                        const beforeStr = strTitle.substring(0, index);
-                                        const afterStr = strTitle.slice(index + searchValue.length);
-                                        const title =
-                                            index > -1 ? (
-                                                <span>
-                                                    {beforeStr}
-                                                    <span className="site-tree-search-value" style={{ color: '#3377ff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{searchValue}</span>
-                                                    {afterStr}
-                                                </span>
-                                            ) : (
-                                                <span className='strTitle'>{strTitle}</span>
-                                            );
-                                        return <div style={{
-                                            display: 'flex', flexDirection: 'row',
-                                            width: '100%',
-                                            justifyContent: 'space-between', alignItems: 'center', height: 32,
-                                            borderRadius: '4px',
-                                            overflow: 'hidden',
-                                            color: '#17181A',
-                                            textOverflow: 'ellipsis',
-                                            whiteSpace: 'nowrap'
-
-                                        }}>
-                                            {title}
-                                            {!nodeData.map && <span className={nodeData.unitType ? 'point lastChild' : 'point'}></span>}
-                                        </div>
-                                    }
-                                }
-                                defaultSelectedKeys={[currentSelectedTreeNode.accountingCode]}
-                                treeData={treeData as unknown as DataNode[]}
-                                // treeData={treeDataNew}
-                                switcherIcon={(props: any) => {
-                                    const { expanded } = props;
-                                    return !expanded ? <img style={{ width: 20, height: 20, position: 'relative', top: 5 }} src={expandedIcon} /> : <img style={{ width: 20, height: 20, position: 'relative', top: 5 }} src={closeIcon} />
-                                }}
-                            />
-                        )
-                    }
-                </div>
-            </div>
-            <div className='right'>
-                <div className='toolBar'>
-                    <div className='filter'>
-                        <div className='filterItem'>
-                            <span className='label' style={{ whiteSpace: 'nowrap' }}> 检索：</span>
-                            <Input placeholder={'收费项目名称'} allowClear
-                                suffix={
-                                    <IconFont type="iconsousuo" style={{ color: '#99A6BF' }} onClick={() => tableDataSearchHandle('itemName')} />
-                                }
-                                onChange={(e) => {
-                                    set_tableDataSearchKeywords(e.target.value);
-                                    if (e.target.value.length == 0) {
-                                        set_tableDataFilterParams({
-                                            ...tableDataFilterParams,
-                                            itemName: ''
-                                        });
-                                    }
-                                }}
-                                onPressEnter={(e) => {
-
+        <KCIMPagecontainer className='DrugCostManagement' title={false}>
+            <div className='toolBar'>
+                <div className='filter'>
+                    <div className='filterItem'>
+                        <span className='label' style={{ whiteSpace: 'nowrap' }}> 项目名称：</span>
+                        <Input placeholder={'请输入'} allowClear
+                            suffix={
+                                <IconFont type="iconsousuo"  style={{color:'#99A6BF'}} onClick={() => tableDataSearchHandle('name')} />
+                            }
+                            onChange={(e) => {
+                                set_tableDataSearchKeywords(e.target.value);
+                                if (e.target.value.length == 0) {
                                     set_tableDataFilterParams({
                                         ...tableDataFilterParams,
-                                        itemName: (e.target as HTMLInputElement).value
+                                        name: ''
                                     });
-                                }}
+                                }
+                            }}
+                            onPressEnter={(e) => {
 
-                            />
-                        </div>
-                    </div>
-                    <div className='btnGroup'>
-                        <span className='add' onClick={() => set_tableSelecterVisible(true)}>添加</span>
+                                set_tableDataFilterParams({
+                                    ...tableDataFilterParams,
+                                    name: (e.target as HTMLInputElement).value
+                                });
+                            }}
+
+                        />
                     </div>
                 </div>
-                <div style={{ marginTop: 16 }}>
-                    {currentSelectedTreeNode && <KCIMTable actionRef={tableRef} columns={column}
-                        scroll={{ y: 500 }}
-                        rowKey='id'
-                        params={tableDataFilterParams}
-                        request={(params) => getTableData(params)}
-                        tableAlertRender={false}
-                        rowSelection={{
-                            onChange(selectedRowKeys, selectedRows, info) {
-                                set_selectedRowKeys(selectedRowKeys);
-                            },
-                        }}
-                    />}
+                <div className='btnGroup'>
+                    <span style={{paddingRight:16}}><ProFormSwitch noStyle fieldProps={{size:'small',onChange:(bool)=>{
+                        set_stopStat(bool ? 1 : 0);
+                        tableRef.current?.reload();
+                    }}} /> 显示停用项目</span>
+                    {importData()}
+                    <UpDataActBtn record type='ADD' />
                 </div>
             </div>
+
+            <div style={{ marginTop: 16 }}>
+                <KCIMTable columns={columns as ProColumns[]} actionRef={tableRef} rowKey='id' params={tableDataFilterParams} request={(params) => getTableData(params)} />
+            </div>
         </KCIMPagecontainer>
     )
 }
-
-
-export default ChargeItemMap;
-function getParentKey(code: any, treeData: any[]) {
-    throw new Error('Function not implemented.');
-}
-

src/pages/demo/service.ts

@@ -1,75 +1,109 @@
 /*
  * @Author: code4eat awesomedema@gmail.com
- * @Date: 2023-03-07 11:12:10
+ * @Date: 2023-03-03 16:31:27
  * @LastEditors: code4eat awesomedema@gmail.com
- * @LastEditTime: 2023-11-30 10:34:32
- * @FilePath: /KC-MiddlePlatform/src/pages/platform/setting/pubDicMana/service.ts
+ * @LastEditTime: 2023-11-08 16:17:15
+ * @FilePath: /KC-MiddlePlatform/src/pages/platform/setting/pubDicTypeMana/service.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 
 
 
-import { string } from 'mathjs';
-import { Key } from 'react';
 import { request } from 'umi';
 
-
-//获取左侧数据
-export const getAccountingList = (accountingName:string,type:number) => {
-  return request('/costAccount/setting/getAccountingList', {
+//获取table列表数据
+
+export type DrugTableDataType = {
+  id:number,
+  hospId:number,
+  code:number,
+  name:string,
+  type:string,
+  price:number,
+  cost:number,
+  status:number,
+  stopTime:string
+}
+
+
+export const getDrugTableData = (params?:any) => {
+  return request<{
+       current:number;
+       list:DrugTableDataType[];
+       pageSize:number;
+       totalCount:number;
+       totalPage:number;
+  }>('/costAccount/setting/getDrugList', {
     method: 'GET',
-    params:{accountingName,type}
+    params:{...params}
   });
 };
 
-//获取右侧表格数据
-
-export const getAccountingItemMap = (params:{accountingCode:string,itemName?:string,pageSize:number,current:number}) => {
-    return request('/costAccount/setting/getAccountingItemMap', {
-      method: 'GET',
-      params:{...params}
-    });
-};
-
-//获取可添加列表
-export const getAddableTableData = (type:number,name?:string) => {
-  return request('/costAccount/setting/getAccountingItemDictList', {
+//获取药品类型
+export const getDrugTypeReq = () => {
+  return request('/costAccount/setting/getDrugType', {
     method: 'GET',
-    params:{type,name}
   });
 };
 
 
 
-//新增表格数据
+//新增
+export type AddTableDataType = {
+  code:string,
+  name:string,
+  type:string,
+  price:number,
+  cost:number,
+  status:number,
+  stopTime:string
+}
 
-export const addTableData = (data:any) => {
-  return request('/costAccount/setting/addAccountingItemMap', {
+export const addData = (data:AddTableDataType) => {
+  return request('/costAccount/setting/addDrug', {
     method: 'POST',
     data
   });
 };
 
 
+//导入数据
+export const importDataPost = (data:any) => {
+  return request('/costAccount/setting/importDrug', {
+    method: 'POST',
+    data
+  });
+};
+
 
 
-//删除表格操作
-export const delData = (id:number) => {
-    return request('/costAccount/setting/deleteAccountingItemMap', {
-      method: 'POST',
-      params:{id}
-    });
-};
+//编辑表格数据
 
+export type TableRowEditType = {
+  id:number;
+}&AddTableDataType
 
-//批量删除表格数据
-export const batchDelTableData = (ids:Key[]) => {
-  return request('/costAccount/setting/batchDeleteAccountingItemMap', {
+export const editData = (data:any) => {
+  return request('/costAccount/setting/editDrug', {
     method: 'POST',
-    data:[...ids]
+    data
   });
 };
 
+//删除表格操作
+export const delData = (id:string) => {
+  return request('/costAccount/setting/deleteDrug', {
+    method: 'POST',
+    params:{id}
+  });
+};
+
+
+
+
+
+
+
 
 
 

src/pages/demo/style.less

@@ -1,260 +1,55 @@
-.row-dragging {
+.DrugCostManagement {
+  padding: 16px;
+  background: #FFFFFF;
+  border-radius: 4px;
 
-  .cost-ant-table-cell {
-    width: 130px;
-  }
-}
-
-.TableSelecter {
-
-  .pfm-ant-modal-footer {
-    display: none !important;
-  }
 
-  .footer {
+  .toolBar {
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
-    margin-top: 15px;
-
-    span {
-      display: inline-block;
-      width: 56px;
-      height: 24px;
-      font-size: 14px;
-      line-height: 23px;
-      text-align: center;
-      border-radius: 4px;
-      cursor: pointer;
-
-      &.ok {
-        color: #FFFFFF;
-        background: #3377FF;
-        margin-left: 8px;
-      }
-
-      &.cancel {
-        border: 1px solid #DAE2F2;
-      }
-    }
-
-  }
-}
-
-.ChargeItemMap {
-  width: 100%;
-  height: calc(100vh - 48px);
-  position: relative;
-
-  .bottomBar {
-    position: absolute;
-    bottom: -16px;
-    left: -16px;
-    width: 102.5%;
-    height: 48px;
-    display: flex;
-    padding: 0 16px;
-    flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    background: #FFFFFF;
-    box-shadow: 0px -8px 16px 0px rgba(64, 85, 128, 0.1);
-
-    &>span {
-      font-size: 14px;
-      font-weight: 400;
-      color: #17181A;
-    }
-
-    &>a {
-      width: 80px;
-      height: 24px;
-      line-height: 24px;
-      font-size: 14px;
-      font-weight: 400;
-      color: #FFFFFF;
-      text-align: center;
-      background: #3377FF;
-      border-radius: 4px;
-    }
-  }
-
-  .selecterList {
-    position: absolute;
-    z-index: 99;
-    top: 44px;
-    left: 180px;
-    width: 120px;
-    height: 104px;
-    background: #FFFFFF;
-    box-shadow: 0px 8px 16px 0px rgba(64, 85, 128, 0.1);
-    border-radius: 4px;
-    padding: 4px;
-
-    .list {
-      position: relative;
-      height: 32px;
-      line-height: 16px;
-      border-radius: 2px;
-      font-size: 14px;
-      cursor: pointer;
-      padding: 8px;
-      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-      font-weight: 400;
-      color: #17181A;
 
-      &.on {
-        font-weight: 500;
-        background: rgba(51, 119, 255, 0.08);
-
-        &::after {
-          position: absolute;
-          right: 8px;
-          display: inline-block;
-          content: '';
-          width: 16px;
-          height: 16px;
-          background: url('../../../static/gou_blue.png');
-          background-size: contain;
-        }
-      }
-    }
-  }
-
-  .left {
-    float: left;
-    border-radius: 4px;
-    width: 220px;
-    height: calc(100vh - 80px);
-    overflow: hidden;
-    margin-right: 16px;
-    padding: 16px 0px;
-    background: #FFFFFF;
-
-
-    .toolbar {
+    .filter {
       display: flex;
       flex-direction: row;
-      justify-content: space-between;
+      justify-content: flex-start;
       align-items: center;
-      padding: 0 16px;
 
-      .filter {
-        position: relative;
-        width: 24px;
-        height: 24px;
-        background: #FAFCFF;
-        border-radius: 4px;
-        border: 1px solid #DAE2F2;
-        margin-left: 8px;
-        cursor: pointer;
-        background: url('../../../static/filter.png');
-        background-size: 16px 16px;
-        background-position: center;
-        background-repeat: no-repeat;
-
-        &.orange {
-          &::after {
-            position: absolute;
-            z-index: 9;
-            top: 1px;
-            right: 1px;
-            display: inline-block;
-            content: '';
-            width: 4px;
-            height: 4px;
-            border-radius: 50%;
-            background: #FF9832;
-          }
-        }
-
-        &.blue {
-          &::after {
-            position: absolute;
-            z-index: 9;
-            top: 1px;
-            right: 1px;
-            display: inline-block;
-            content: '';
-            width: 4px;
-            height: 4px;
-            border-radius: 50%;
-            background: #3377FF;
-          }
-        }
+      .filterItem {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
       }
     }
 
-    .wrap {
-      margin-top: 16px;
-      height: calc((100vh - 80px) - 75px);
-      overflow: hidden;
-      overflow-y: scroll;
-      // border: 1px solid red;
-
-      .cos-ant-tree.cos-ant-tree-directory .cos-ant-tree-treenode-selected:hover::before,
-      .cos-ant-tree.cos-ant-tree-directory .cos-ant-tree-treenode-selected::before {
+    .btnGroup {
+      .import {
+        cursor: pointer;
+        display: inline-block;
+        font-size: 14px;
+        font-weight: 400;
+        color: #17181A;
+        line-height: 24px;
+        padding: 0 14px;
+        margin-right: 8px;
+        background: #FAFCFF;
         border-radius: 4px;
-        background: rgb(240 242 245 / 100%);
-      }
-
-      .cos-ant-tree.cos-ant-tree-directory .cos-ant-tree-treenode .cos-ant-tree-node-content-wrapper.cos-ant-tree-node-selected {
-        font-weight: bold;
-
+        border: 1px solid #DAE2F2;
       }
-
-      .cost-ant-tree.cost-ant-tree-directory .cost-ant-tree-treenode-selected::before {
+      .add {
+        cursor: pointer;
+        display: inline-block;
+        font-size: 14px;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 24px;
+        padding: 0 14px;
+        background: #3377FF;
         border-radius: 4px;
-        background: rgb(240 242 245 / 100%);
       }
-
     }
-  }
-
-  .right {
-    float: left;
-    width: calc(100% - 236px);
-    padding: 16px;
-    border-radius: 4px;
-    background: #FFFFFF;
-
-    .toolBar {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-
-      .filter {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        align-items: center;
 
-        .filterItem {
-          display: flex;
-          flex-direction: row;
-          justify-content: center;
-          align-items: center;
-        }
-      }
-
-      .btnGroup {
-        .add {
-          cursor: pointer;
-          display: inline-block;
-          font-size: 14px;
-          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
-          font-weight: 400;
-          color: #FFFFFF;
-          line-height: 24px;
-          padding: 0 14px;
-          background: #3377FF;
-          border-radius: 4px;
-          margin-left: 8px;
-        }
-      }
-
-
-    }
   }
-}
+}

src/pages/demo/tableSelector.tsx

@@ -1,201 +0,0 @@
-import React, { Key, useEffect, useState } from "react";
-import { Input, Select } from 'antd'
-import { KCIMTable } from "@/components/KCIMTable";
-import { createFromIconfontCN } from "@ant-design/icons";
-
-
-import { ModalForm, ProColumns, ProFormSelect, ProFormText } from "@ant-design/pro-components";
-
-import { set } from "lodash";
-import { getAddableTableData } from "./service";
-
-
-// import './style.less';
-
-
-interface TableSelecterProps {
-    record: any
-}
-
-const IconFont = createFromIconfontCN({
-    scriptUrl: '',
-});
-
-
-
-
-const TableSelecter = ({ record, open, title, onVisibleChange, rowKey = 'id', request, onFinish, defaultSelectedKeys }: {
-    record: any, open: boolean, title: string, onVisibleChange: (bool: boolean) => void, defaultSelectedKeys: Key[],
-    rowKey?: string, request?: (params: any) => Promise<any>, onFinish?: (selectedKeys: React.Key[], selectedRows: any[]) => void
-}) => {
-
-
-    const Table = React.forwardRef(({ }: TableSelecterProps, ref) => {
-
-        const [datasource, set_datasource] = useState<any[]>([]);
-        const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
-        const [selectedRows, set_selectedRows] = useState<any[]>([]);
-        const [showList, set_showList] = useState<any[]>([]);
-        const [type, set_type] = useState<number>(3);
-        const [keyword, set_keyword] = useState<string | undefined>(undefined);
-
-
-        const columns: ProColumns[] = [
-            {
-                title: '收费项目代码',
-                ellipsis:true,
-                dataIndex: 'itemCode',
-            },
-            {
-                title: '收费项目名称',
-                ellipsis:true,
-                dataIndex: 'itemName',
-            }
-        ];
-
-
-        const onSelectChange = (newSelectedRowKeys: React.Key[], selectedRows: any) => {
-            setSelectedKeys([...newSelectedRowKeys]);
-            set_selectedRows([...selectedRows]);
-
-        };
-
-        const saveHandle = async () => {
-            const selectedRowCodes = selectedRows.map((a) => a[`${rowKey}`]);
-            const rows = datasource.filter((a) => selectedRowCodes.includes(a[`${rowKey}`]));
-            onFinish && onFinish(selectedKeys, rows);
-        }
-
-        const getTableData = async () => {
-            const resp = await getAddableTableData(type);
-
-            let selectedCodes: string[] = [];
-            let selectedRows: any[] = [];
-            if (resp) {
-                const data = resp.map((a: any) => {
-                    if (defaultSelectedKeys.includes(a[`${rowKey}`])) {
-                        selectedCodes.push(a[`${rowKey}`]);
-                        selectedRows.push(a);
-                        const needItem = record.departList.filter((b: any) => a[`${rowKey}`] == b[`${rowKey}`]);
-
-                        return {
-                            ...a,
-                            flag: needItem[0].isManager ? true : false
-                        }
-                    } else {
-                        return a
-                    }
-                });
-
-                set_showList(data);
-                set_selectedRows([...selectedRows]);
-                setSelectedKeys([...selectedCodes]);
-                set_datasource([...datasource, ...data]);
-            }
-
-
-            return Promise.resolve([]);
-        }
-
-        useEffect(() => {
-            // console.log({code, keyword});
-            const result = datasource.filter((a) => {
-                return a.itemName.indexOf(keyword) != -1 
-            });
-
-            set_showList([...result]);
-        }, [keyword]);
-
-        useEffect(()=>{
-            getTableData()
-        },[type]);
-
-
-        return (
-            <div >
-                <div className="filter" style={{marginBottom:8,display:'flex',flexDirection:'row',alignItems:'center'}}>
-                    <ProFormSelect
-                         noStyle
-                         style={{marginRight:8}}
-                         options={[
-                            {label:'药品',value:1},
-                            {label:'材料',value:2},
-                            {label:'项目',value:3}
-                         ]}
-                         fieldProps={{
-                             defaultValue:3,
-                             onChange(value, option) {
-                                set_type(value);
-                                set_keyword('');
-                             },
-                         }}
-                    />
-                    <ProFormText noStyle placeholder={'项目名称'}
-                        fieldProps={{
-                            value:keyword,
-                            suffix: <IconFont style={{ color: '#99A6BF' }} type="iconsousuo" />,
-                            onChange: (e) => {
-                                if (e.target.value.length != 0) {
-                                    set_keyword(e.target.value);
-                                } else {
-                                    set_keyword('');
-                                }
-                            }
-                        }}
-                    />
-                </div>
-
-                <KCIMTable columns={columns}
-                    options={{
-                        density: true,
-                        setting: {
-                            listsHeight: 100,
-                        },
-                    }}
-                    rowKey={rowKey}
-                    scroll={{ y: 400 }}
-                    tableAlertRender={false}
-                    rowSelection={{
-                        // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
-                        // 注释该行则默认不显示下拉选项
-                        // selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
-                        selectedRowKeys: selectedKeys,
-                        onChange: onSelectChange,
-                    }}
-                    pagination={{ showTitle: false, showSizeChanger: true,simple:true }}
-                    dataSource={showList}
-
-                />
-                <div className='footer'>
-                    <span className='cancel' onClick={() => close()}>取消</span>
-                    <span className='ok' onClick={() => saveHandle()}>{`确认(${selectedKeys.length > 0 && selectedKeys.length})`}</span>
-                </div>
-            </div>
-
-        )
-    });
-
-    const close = () => {
-        onVisibleChange && onVisibleChange(false);
-    }
-
-
-    return (
-        <ModalForm className="TableSelecter" title={title} width={400} submitter={{
-            render: false
-        }} open={open} modalProps={{
-            closable: false,
-        }}>
-            <Table
-                // ref={tableSelecterRef}
-                record={undefined}
-            ></Table>
-        </ModalForm>
-    )
-
-}
-
-
-
-
-export default TableSelecter