|
@@ -8,9 +8,7 @@ import type { MenuProps } from "antd";
|
|
|
import { Button, Dropdown, Menu } from "antd";
|
|
import { Button, Dropdown, Menu } from "antd";
|
|
|
import { SearchOutlined } from "@ant-design/icons";
|
|
import { SearchOutlined } from "@ant-design/icons";
|
|
|
|
|
|
|
|
-import HeadBar from "../../../components/studio/HeadBar";
|
|
|
|
|
import LeftSider from "../../../components/studio/LeftSider";
|
|
import LeftSider from "../../../components/studio/LeftSider";
|
|
|
-import Footer from "../../../components/studio/Footer";
|
|
|
|
|
|
|
|
|
|
const { Content } = Layout;
|
|
const { Content } = Layout;
|
|
|
|
|
|
|
@@ -54,131 +52,129 @@ const Widget = () => {
|
|
|
const { studioname } = useParams();
|
|
const { studioname } = useParams();
|
|
|
return (
|
|
return (
|
|
|
<Layout>
|
|
<Layout>
|
|
|
- <Layout>
|
|
|
|
|
- <LeftSider selectedKeys="recent" />
|
|
|
|
|
- <Content>
|
|
|
|
|
- <Layout>{studioname}</Layout>
|
|
|
|
|
- <ProTable<IItem>
|
|
|
|
|
- columns={[
|
|
|
|
|
- {
|
|
|
|
|
- title: intl.formatMessage({ id: "dict.fields.sn.label" }),
|
|
|
|
|
- dataIndex: "id",
|
|
|
|
|
- key: "id",
|
|
|
|
|
- width: 50,
|
|
|
|
|
- search: false,
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- title: intl.formatMessage({ id: "forms.fields.title.label" }),
|
|
|
|
|
- dataIndex: "title",
|
|
|
|
|
- key: "title",
|
|
|
|
|
- tip: "过长会自动收缩",
|
|
|
|
|
- ellipsis: true,
|
|
|
|
|
- render: (text, row, index, action) => {
|
|
|
|
|
- return (
|
|
|
|
|
|
|
+ <LeftSider selectedKeys="recent" />
|
|
|
|
|
+ <Content>
|
|
|
|
|
+ <Layout>{studioname}</Layout>
|
|
|
|
|
+ <ProTable<IItem>
|
|
|
|
|
+ columns={[
|
|
|
|
|
+ {
|
|
|
|
|
+ title: intl.formatMessage({ id: "dict.fields.sn.label" }),
|
|
|
|
|
+ dataIndex: "id",
|
|
|
|
|
+ key: "id",
|
|
|
|
|
+ width: 50,
|
|
|
|
|
+ search: false,
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: intl.formatMessage({ id: "forms.fields.title.label" }),
|
|
|
|
|
+ dataIndex: "title",
|
|
|
|
|
+ key: "title",
|
|
|
|
|
+ tip: "过长会自动收缩",
|
|
|
|
|
+ ellipsis: true,
|
|
|
|
|
+ render: (text, row, index, action) => {
|
|
|
|
|
+ return (
|
|
|
|
|
+ <div>
|
|
|
<div>
|
|
<div>
|
|
|
- <div>
|
|
|
|
|
- <Link to="edit/12345">{row.title}</Link>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div>{row.subtitle}</div>
|
|
|
|
|
|
|
+ <Link to="edit/12345">{row.title}</Link>
|
|
|
</div>
|
|
</div>
|
|
|
- );
|
|
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- title: intl.formatMessage({ id: "forms.fields.publicity.label" }),
|
|
|
|
|
- dataIndex: "publicity",
|
|
|
|
|
- key: "publicity",
|
|
|
|
|
- width: 100,
|
|
|
|
|
- search: false,
|
|
|
|
|
- filters: true,
|
|
|
|
|
- onFilter: true,
|
|
|
|
|
- valueEnum: {
|
|
|
|
|
- all: { text: "全部", status: "Default" },
|
|
|
|
|
- 0: { text: "禁用", status: "Success" },
|
|
|
|
|
- 10: { text: "私有", status: "Processing" },
|
|
|
|
|
- 20: { text: "链接阅读", status: "Default" },
|
|
|
|
|
- 30: { text: "公开阅读", status: "Default" },
|
|
|
|
|
- 40: { text: "公开可编辑", status: "Default" },
|
|
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- title: intl.formatMessage({ id: "forms.fields.created-at.label" }),
|
|
|
|
|
- key: "created-at",
|
|
|
|
|
- width: 100,
|
|
|
|
|
- search: false,
|
|
|
|
|
- dataIndex: "createdAt",
|
|
|
|
|
- valueType: "date",
|
|
|
|
|
- sorter: (a, b) => a.createdAt - b.createdAt,
|
|
|
|
|
|
|
+ <div>{row.subtitle}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ );
|
|
|
},
|
|
},
|
|
|
- {
|
|
|
|
|
- title: "操作",
|
|
|
|
|
- key: "option",
|
|
|
|
|
- width: 120,
|
|
|
|
|
- valueType: "option",
|
|
|
|
|
- render: (text, row, index, action) => [
|
|
|
|
|
- <Dropdown.Button type="link" key={index} overlay={menu}>
|
|
|
|
|
- {intl.formatMessage({ id: "buttons.edit" })}
|
|
|
|
|
- </Dropdown.Button>,
|
|
|
|
|
- ],
|
|
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: intl.formatMessage({ id: "forms.fields.publicity.label" }),
|
|
|
|
|
+ dataIndex: "publicity",
|
|
|
|
|
+ key: "publicity",
|
|
|
|
|
+ width: 100,
|
|
|
|
|
+ search: false,
|
|
|
|
|
+ filters: true,
|
|
|
|
|
+ onFilter: true,
|
|
|
|
|
+ valueEnum: {
|
|
|
|
|
+ all: { text: "全部", status: "Default" },
|
|
|
|
|
+ 0: { text: "禁用", status: "Success" },
|
|
|
|
|
+ 10: { text: "私有", status: "Processing" },
|
|
|
|
|
+ 20: { text: "链接阅读", status: "Default" },
|
|
|
|
|
+ 30: { text: "公开阅读", status: "Default" },
|
|
|
|
|
+ 40: { text: "公开可编辑", status: "Default" },
|
|
|
},
|
|
},
|
|
|
- ]}
|
|
|
|
|
- rowSelection={{
|
|
|
|
|
- // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
|
|
|
|
|
- // 注释该行则默认不显示下拉选项
|
|
|
|
|
- selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
|
|
|
|
|
- }}
|
|
|
|
|
- tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => (
|
|
|
|
|
- <Space size={24}>
|
|
|
|
|
- <span>
|
|
|
|
|
- 已选 {selectedRowKeys.length} 项
|
|
|
|
|
- <Button type="link" style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
|
|
|
|
|
- 取消选择
|
|
|
|
|
- </Button>
|
|
|
|
|
- </span>
|
|
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: intl.formatMessage({ id: "forms.fields.created-at.label" }),
|
|
|
|
|
+ key: "created-at",
|
|
|
|
|
+ width: 100,
|
|
|
|
|
+ search: false,
|
|
|
|
|
+ dataIndex: "createdAt",
|
|
|
|
|
+ valueType: "date",
|
|
|
|
|
+ sorter: (a, b) => a.createdAt - b.createdAt,
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ title: "操作",
|
|
|
|
|
+ key: "option",
|
|
|
|
|
+ width: 120,
|
|
|
|
|
+ valueType: "option",
|
|
|
|
|
+ render: (text, row, index, action) => [
|
|
|
|
|
+ <Dropdown.Button type="link" key={index} overlay={menu}>
|
|
|
|
|
+ {intl.formatMessage({ id: "buttons.edit" })}
|
|
|
|
|
+ </Dropdown.Button>,
|
|
|
|
|
+ ],
|
|
|
|
|
+ },
|
|
|
|
|
+ ]}
|
|
|
|
|
+ rowSelection={{
|
|
|
|
|
+ // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
|
|
|
|
|
+ // 注释该行则默认不显示下拉选项
|
|
|
|
|
+ selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
|
|
|
|
|
+ }}
|
|
|
|
|
+ tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => (
|
|
|
|
|
+ <Space size={24}>
|
|
|
|
|
+ <span>
|
|
|
|
|
+ 已选 {selectedRowKeys.length} 项
|
|
|
|
|
+ <Button type="link" style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
|
|
|
|
|
+ 取消选择
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </Space>
|
|
|
|
|
+ )}
|
|
|
|
|
+ tableAlertOptionRender={() => {
|
|
|
|
|
+ return (
|
|
|
|
|
+ <Space size={16}>
|
|
|
|
|
+ <Button type="link">批量删除</Button>
|
|
|
</Space>
|
|
</Space>
|
|
|
- )}
|
|
|
|
|
- tableAlertOptionRender={() => {
|
|
|
|
|
- return (
|
|
|
|
|
- <Space size={16}>
|
|
|
|
|
- <Button type="link">批量删除</Button>
|
|
|
|
|
- </Space>
|
|
|
|
|
- );
|
|
|
|
|
- }}
|
|
|
|
|
- request={async (params = {}, sorter, filter) => {
|
|
|
|
|
- // TODO
|
|
|
|
|
- console.log(params, sorter, filter);
|
|
|
|
|
|
|
+ );
|
|
|
|
|
+ }}
|
|
|
|
|
+ request={async (params = {}, sorter, filter) => {
|
|
|
|
|
+ // TODO
|
|
|
|
|
+ console.log(params, sorter, filter);
|
|
|
|
|
|
|
|
- const size = params.pageSize || 20;
|
|
|
|
|
- return {
|
|
|
|
|
- total: 1 << 12,
|
|
|
|
|
- success: true,
|
|
|
|
|
- data: Array.from(Array(size).keys()).map((x) => {
|
|
|
|
|
- const id = ((params.current || 1) - 1) * size + x + 1;
|
|
|
|
|
|
|
+ const size = params.pageSize || 20;
|
|
|
|
|
+ return {
|
|
|
|
|
+ total: 1 << 12,
|
|
|
|
|
+ success: true,
|
|
|
|
|
+ data: Array.from(Array(size).keys()).map((x) => {
|
|
|
|
|
+ const id = ((params.current || 1) - 1) * size + x + 1;
|
|
|
|
|
|
|
|
- var it: IItem = {
|
|
|
|
|
- id,
|
|
|
|
|
- title: `title ${id}`,
|
|
|
|
|
- subtitle: `subtitle ${id}`,
|
|
|
|
|
- publicity: (Math.floor(Math.random() * 3) + 1) * 10,
|
|
|
|
|
- createdAt: Date.now() - Math.floor(Math.random() * 2000000000),
|
|
|
|
|
- };
|
|
|
|
|
- return it;
|
|
|
|
|
- }),
|
|
|
|
|
- };
|
|
|
|
|
- }}
|
|
|
|
|
- rowKey="id"
|
|
|
|
|
- bordered
|
|
|
|
|
- pagination={{
|
|
|
|
|
- showQuickJumper: true,
|
|
|
|
|
- showSizeChanger: true,
|
|
|
|
|
- }}
|
|
|
|
|
- search={false}
|
|
|
|
|
- options={{
|
|
|
|
|
- search: true,
|
|
|
|
|
- }}
|
|
|
|
|
- />
|
|
|
|
|
- </Content>
|
|
|
|
|
- </Layout>
|
|
|
|
|
|
|
+ var it: IItem = {
|
|
|
|
|
+ id,
|
|
|
|
|
+ title: `title ${id}`,
|
|
|
|
|
+ subtitle: `subtitle ${id}`,
|
|
|
|
|
+ publicity: (Math.floor(Math.random() * 3) + 1) * 10,
|
|
|
|
|
+ createdAt: Date.now() - Math.floor(Math.random() * 2000000000),
|
|
|
|
|
+ };
|
|
|
|
|
+ return it;
|
|
|
|
|
+ }),
|
|
|
|
|
+ };
|
|
|
|
|
+ }}
|
|
|
|
|
+ rowKey="id"
|
|
|
|
|
+ bordered
|
|
|
|
|
+ pagination={{
|
|
|
|
|
+ showQuickJumper: true,
|
|
|
|
|
+ showSizeChanger: true,
|
|
|
|
|
+ }}
|
|
|
|
|
+ search={false}
|
|
|
|
|
+ options={{
|
|
|
|
|
+ search: true,
|
|
|
|
|
+ }}
|
|
|
|
|
+ />
|
|
|
|
|
+ </Content>
|
|
|
</Layout>
|
|
</Layout>
|
|
|
);
|
|
);
|
|
|
};
|
|
};
|