Merge pull request #5 from kne-union/linzp

添加新模块

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kne-components/components-biz",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "业务组件库",
   "scripts": {
     "init": "husky",
@@ -65,7 +65,7 @@
   },
   "devDependencies": {
     "@craco/craco": "^7.1.0",
-    "@kne/modules-dev": "^2.1.1",
+    "@kne/modules-dev": "^2.1.2",
     "@kne/react-fetch": "^1.4.3",
     "@kne/remote-loader": "^1.2.3",
     "@testing-library/jest-dom": "^6.4.2",

src/components/BillingCenter/Detail/RightOptions.js

@@ -0,0 +1,26 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import { Tabs } from 'antd';
+
+const RightOptions = createWithRemoteLoader({
+  modules: []
+})(({ remoteModules }) => {
+  const [] = remoteModules;
+  return (
+    <Tabs
+      items={[
+        {
+          key: '1',
+          label: '状态一',
+          children: ''
+        },
+        {
+          key: '2',
+          label: '状态二',
+          children: ''
+        }
+      ]}
+    />
+  );
+});
+
+export default RightOptions;

src/components/BillingCenter/Detail/index.js

@@ -0,0 +1,44 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import Fetch from '@kne/react-fetch';
+import { useSearchParams } from 'react-router-dom';
+import RightOptions from './RightOptions';
+
+const Detail = createWithRemoteLoader({
+  modules: ['components-core:Layout@Page', 'components-core:Global@usePreset', 'components-core:InfoPage', 'components-core:Descriptions']
+})(({ remoteModules, ...props }) => {
+  const [Page, usePreset, InfoPage, Descriptions] = remoteModules;
+  const { apis } = usePreset();
+  const [searchParams] = useSearchParams();
+  return (
+    <Fetch
+      {...Object.assign({}, apis.testApi.getDetail, { params: { id: searchParams.get('id') } })}
+      render={({ data, reload }) => {
+        return (
+          <Page {...props} name="Detail" option={<RightOptions />}>
+            <InfoPage>
+              <InfoPage.Part title="详情信息">
+                <InfoPage.Part>
+                  <Descriptions
+                    dataSource={[
+                      [{ label: 'ID', content: data.id }],
+                      [
+                        {
+                          label: '名称',
+                          content: data.name
+                        }
+                      ],
+                      [{ label: 'description', content: data.description }]
+                    ]}
+                  />
+                </InfoPage.Part>
+                <InfoPage.Part title="详情信息2">详情信息详情信息详情信息详情信息详情信息详情信息详情信息详情信息</InfoPage.Part>
+              </InfoPage.Part>
+            </InfoPage>
+          </Page>
+        );
+      }}
+    />
+  );
+});
+
+export default Detail;

src/components/BillingCenter/FormInner/index.js

@@ -0,0 +1,21 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+
+const FormInner = createWithRemoteLoader({
+  modules: ['components-core:FormInfo']
+})(({ remoteModules }) => {
+  const [FormInfo] = remoteModules;
+  const { Input, TextArea } = FormInfo.fields;
+  return (
+    <>
+      <FormInfo
+        list={[
+          <Input name="field1" label="字段一" rule="REQ" />,
+          <Input name="field2" label="字段二" rule="REQ" />,
+          <TextArea name="description" label="描述" block />
+        ]}
+      />
+    </>
+  );
+});
+
+export default FormInner;

src/components/BillingCenter/List/getColumns.js

@@ -0,0 +1,37 @@
+const getColumns = () => {
+  return [
+    {
+      name: 'id',
+      title: '编号',
+      type: 'serialNumber',
+      primary: true,
+      hover: true,
+      onClick: () => {}
+    },
+    {
+      name: 'name',
+      title: '名称',
+      type: 'mainInfo'
+    },
+    {
+      name: 'status',
+      title: '状态',
+      type: 'tag',
+      valueOf: () => {
+        return { type: 'success', text: '成功' };
+      }
+    },
+    {
+      name: 'description',
+      title: '描述',
+      type: 'description'
+    },
+    {
+      name: 'createdTime',
+      title: '添加时间',
+      type: 'datetime'
+    }
+  ];
+};
+
+export default getColumns;

src/components/BillingCenter/List/index.js

@@ -0,0 +1,157 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import getColumns from './getColumns';
+import { useRef, useState } from 'react';
+import { Space, Button, App } from 'antd';
+import FormInner from '../FormInner';
+
+const stateType = [
+  { tab: '全部', key: 'all' },
+  {
+    tab: '状态一',
+    key: '1'
+  },
+  {
+    tab: '状态二',
+    key: '2'
+  }
+];
+
+const stateTypeMap = new Map(stateType.map(item => [item.key, item]));
+
+const List = createWithRemoteLoader({
+  modules: [
+    'components-core:Layout@TablePage',
+    'components-core:Filter',
+    'components-core:Global@usePreset',
+    'components-core:FormInfo@useFormModal',
+    'components-core:StateBar'
+  ]
+})(({ remoteModules }) => {
+  const [TablePage, Filter, usePreset, useFormModal, StateBar] = remoteModules;
+  const { ajax, apis } = usePreset();
+  const { SearchInput, getFilterValue, fields: filterFields } = Filter;
+  const { InputFilterItem } = filterFields;
+  const ref = useRef(null);
+  const [filter, setFilter] = useState([]);
+  const filterValue = getFilterValue(filter);
+  const formModal = useFormModal();
+  const { message } = App.useApp();
+
+  return (
+    <TablePage
+      {...Object.assign({}, apis.testApi.getList, {
+        data: Object.assign({}, filterValue)
+      })}
+      ewf={ref}
+      name="List"
+      topArea={
+        <StateBar
+          type="radio"
+          size="small"
+          activeKey={filterValue.stateType || 'all'}
+          onChange={value => {
+            const currentState = stateTypeMap.get(value);
+            setFilter(filter => {
+              const newFilter = filter.slice(0);
+              const currentIndex = filter.findIndex(item => item.name === 'stateType');
+              if (currentIndex === -1) {
+                newFilter.push({ name: 'stateType', value: { label: currentState.tab, value: currentState.key } });
+              } else {
+                newFilter.splice(currentIndex, 1, {
+                  name: 'stateType',
+                  value: { label: currentState.tab, value: currentState.key }
+                });
+              }
+              return newFilter;
+            });
+          }}
+          stateOption={stateType}
+        />
+      }
+      page={{
+        filter: {
+          value: filter,
+          onChange: setFilter,
+          list: [[<InputFilterItem label="条件一" name="filter1" />, <InputFilterItem label="条件二" name="filter2" />]]
+        },
+        titleExtra: (
+          <Space align="center">
+            <SearchInput name="name" label="名称" />
+            <Button
+              type="primary"
+              onClick={() => {
+                formModal({
+                  title: '添加数据',
+                  autoClose: true,
+                  formProps: {
+                    onSubmit: async data => {
+                      const { data: resData } = await ajax(Object.assign({}, apis.testApi.add, { data }));
+                      if (resData.code !== 0) {
+                        return false;
+                      }
+                      message.success('添加成功');
+                      ref.current?.reload();
+                    }
+                  },
+                  children: <FormInner />
+                });
+              }}
+            >
+              添加
+            </Button>
+          </Space>
+        )
+      }}
+      columns={[
+        ...getColumns(),
+        {
+          name: 'options',
+          title: '操作',
+          type: 'options',
+          fixed: 'right',
+          valueOf: item => {
+            return [
+              {
+                children: '编辑',
+                onClick: async () => {
+                  formModal({
+                    title: '编辑数据',
+                    autoClose: true,
+                    formProps: {
+                      data: Object.assign({}, item),
+                      onSubmit: async data => {
+                        const { data: resData } = await ajax(
+                          Object.assign({}, apis.testApi.save, { data: Object.assign({}, data, { id: item.id }) })
+                        );
+                        if (resData.code !== 0) {
+                          return false;
+                        }
+                        message.success('保存成功');
+                        ref.current?.reload();
+                      }
+                    },
+                    children: <FormInner />
+                  });
+                }
+              },
+              {
+                children: '删除',
+                confirm: true,
+                onClick: async () => {
+                  const { data: resData } = await ajax(Object.assign({}, apis.testApi.remove, { data: { id: item.id } }));
+                  if (resData.code !== 0) {
+                    return false;
+                  }
+                  message.success('删除成功');
+                  ref.current?.reload();
+                }
+              }
+            ];
+          }
+        }
+      ]}
+    />
+  );
+});
+
+export default List;