@/utils/utils#getTableColumns JavaScript Examples
The following examples show how to use
@/utils/utils#getTableColumns.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addContentType({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
return dealError(error, addFormRef, hide, "添加");
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updateContentType(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
return dealError(error, updateFormRef, hide, "修改");
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removeContentType(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide()
return dealRemoveError(error, "删除");
}
};
const dateFieldList = []
const base_columns = [{
title: 'id',
hideInForm: true,
hideInSearch: true,
dataIndex: 'id',
valueType: 'digit',
rules: [
],
},
{
title: 'app_label',
dataIndex: 'app_label',
rules: [
{
required: true,
message: 'app_label为必填项',
},
],
},
{
title: 'model',
dataIndex: 'model',
rules: [
{
required: true,
message: 'model为必填项',
},
],
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除content type吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const [formOrder, setFormOrder] = useState([]);
useEffect(() => {
queryContentTypeDisplayOrder().then(r => {
setFormOrder(r.form_order)
})
}, [])
const table_columns = getTableColumns(cp);
let order_cp = deepCopy(base_columns);
const form_ordered = orderForm(formOrder, order_cp);
const create_columns = [...form_ordered];
const update_cp = deepCopy(form_ordered)
const update_columns = getUpdateColumns(update_cp);
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
useEffect(() => {
queryContentTypeListDisplay().then(value => {
setColumnsStateMap(value)
})
}, [])
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="content type表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Button type="primary" onClick={() => exportExcelAll(paramState, queryContentType, table_columns, 'content type-All')}>
<ExportOutlined /> 导出全部
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索content type" onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
else if (e.key === 'export_current') {
exportExcelCurrent(selectedRows, table_columns, 'content type-select')
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="export_current">导出已选</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryContentType({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
search={{}}
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
search={{}}
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
Example #2
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addGroup({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
return dealError(error, addFormRef, hide, "添加");
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updateGroup(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
return dealError(error, updateFormRef, hide, "修改");
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removeGroup(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide()
return dealRemoveError(error, "删除");
}
};
const dateFieldList = []
const base_columns = [{
title: 'id',
hideInForm: true,
hideInSearch: true,
dataIndex: 'id',
valueType: 'digit',
rules: [
],
},
{
title: 'name',
dataIndex: 'name',
rules: [
{
required: true,
message: 'name为必填项',
},
],
},
{
title: 'permissions',
dataIndex: 'permissions',
rules: [
],
width: '80%',
renderFormItem: (item, {value, onChange, type, defaultRender}) => {
return dealManyToManyField(item, value,onChange,type, permissionsManyToManyList)
},
render: (text, record) => {
return renderManyToMany(text)
},
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除group吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const [formOrder, setFormOrder] = useState([]);
useEffect(() => {
queryGroupDisplayOrder().then(r => {
setFormOrder(r.form_order)
})
}, [])
const table_columns = getTableColumns(cp);
let order_cp = deepCopy(base_columns);
const form_ordered = orderForm(formOrder, order_cp);
const create_columns = [...form_ordered];
const update_cp = deepCopy(form_ordered)
const update_columns = getUpdateColumns(update_cp);
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
useEffect(() => {
queryGroupListDisplay().then(value => {
setColumnsStateMap(value)
})
}, [])
const [permissionsManyToManyList, setPermissionsManyToManyList] = useState([]);
useEffect(() => {
queryPermission({all:1}).then(value => {
setPermissionsManyToManyList(value);
});
}, []);
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="group表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Button type="primary" onClick={() => exportExcelAll(paramState, queryGroup, table_columns, 'group-All')}>
<ExportOutlined /> 导出全部
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索group" onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
else if (e.key === 'export_current') {
exportExcelCurrent(selectedRows, table_columns, 'group-select')
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="export_current">导出已选</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryGroup({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
search={{}}
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
search={{}}
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
Example #3
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addPermission({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
return dealError(error, addFormRef, hide, "添加");
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updatePermission(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
return dealError(error, updateFormRef, hide, "修改");
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removePermission(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide()
return dealRemoveError(error, "删除");
}
};
const dateFieldList = []
const base_columns = [{
title: 'id',
hideInForm: true,
hideInSearch: true,
dataIndex: 'id',
valueType: 'digit',
rules: [
],
},
{
title: 'name',
dataIndex: 'name',
rules: [
{
required: true,
message: 'name为必填项',
},
],
},
{
title: 'content_type',
dataIndex: 'content_type',
rules: [
{
required: true,
message: 'content_type为必填项',
},
],
renderFormItem: (item, {value, onChange}) => {
return dealForeignKeyField(item, value, onChange, content_typeForeignKeyList);
},
render: (text, record) => {
return renderForeignKey(text, content_typeVerboseNameMap);
},
},
{
title: 'codename',
dataIndex: 'codename',
rules: [
{
required: true,
message: 'codename为必填项',
},
],
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除permission吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const [formOrder, setFormOrder] = useState([]);
useEffect(() => {
queryPermissionDisplayOrder().then(r => {
setFormOrder(r.form_order)
})
}, [])
const table_columns = getTableColumns(cp);
let order_cp = deepCopy(base_columns);
const form_ordered = orderForm(formOrder, order_cp);
const create_columns = [...form_ordered];
const update_cp = deepCopy(form_ordered)
const update_columns = getUpdateColumns(update_cp);
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
useEffect(() => {
queryPermissionListDisplay().then(value => {
setColumnsStateMap(value)
})
}, [])
const [content_typeForeignKeyList, setContent_typeForeignKeyList] = useState([]);
useEffect(() => {
queryContentType({all: 1}).then(value => {
setContent_typeForeignKeyList(value);
});
}, []);
const [content_typeVerboseNameMap, setContent_typeVerboseNameMap] = useState([]);
useEffect(() => {
queryContentTypeVerboseName().then(value => {
setContent_typeVerboseNameMap(value);
});
}, []);
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="permission表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Button type="primary" onClick={() => exportExcelAll(paramState, queryPermission, table_columns, 'permission-All')}>
<ExportOutlined /> 导出全部
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索permission" onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
else if (e.key === 'export_current') {
exportExcelCurrent(selectedRows, table_columns, 'permission-select')
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="export_current">导出已选</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryPermission({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
search={{}}
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
search={{}}
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
Example #4
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addTAnalysis({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
return dealError(error, addFormRef, hide, "添加");
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updateTAnalysis(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
return dealError(error, updateFormRef, hide, "修改");
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removeTAnalysis(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide()
return dealRemoveError(error, "删除");
}
};
const dateFieldList = []
const base_columns = [{
title: '序号',
dataIndex: 'number',
valueType: 'digit',
rules: [
],
},
{
title: 'openid',
dataIndex: 'openid',
rules: [
],
},
{
title: '昵称',
dataIndex: 'nickname',
rules: [
],
},
{
title: '姓名',
dataIndex: 'name',
rules: [
],
},
{
title: '垃圾',
hideInSearch: true,
dataIndex: 'picture_trush',
rules: [
],
render: (text, record) => {
return <img src={text} width="80px" alt=""/>
},
renderFormItem: (_, {type, defaultRender, ...rest}, form) => {
const imageUrl = form.getFieldValue('picture_trush');
return <UploadAvatar img={imageUrl}/>
},
},
{
title: '结果',
dataIndex: 'machine_answer',
rules: [
],
},
{
title: '精度',
dataIndex: 'precisions',
rules: [
],
},
{
title: '时间',
dataIndex: 'data_time',
rules: [
],
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除识别结果吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const [formOrder, setFormOrder] = useState([]);
useEffect(() => {
queryTAnalysisDisplayOrder().then(r => {
setFormOrder(r.form_order)
})
}, [])
const table_columns = getTableColumns(cp);
let order_cp = deepCopy(base_columns);
const form_ordered = orderForm(formOrder, order_cp);
const create_columns = [...form_ordered];
const update_cp = deepCopy(form_ordered)
const update_columns = getUpdateColumns(update_cp);
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
useEffect(() => {
queryTAnalysisListDisplay().then(value => {
setColumnsStateMap(value)
})
}, [])
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="识别结果表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Button type="primary" onClick={() => exportExcelAll(paramState, queryTAnalysis, table_columns, '识别结果-All')}>
<ExportOutlined /> 导出全部
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索识别结果" onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
else if (e.key === 'export_current') {
exportExcelCurrent(selectedRows, table_columns, '识别结果-select')
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="export_current">导出已选</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryTAnalysis({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
search={{}}
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
search={{}}
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
Example #5
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addTCamera({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
return dealError(error, addFormRef, hide, "添加");
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updateTCamera(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
return dealError(error, updateFormRef, hide, "修改");
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removeTCamera(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide()
return dealRemoveError(error, "删除");
}
};
const dateFieldList = []
const base_columns = [{
title: '序号',
dataIndex: 'number',
valueType: 'digit',
rules: [
],
},
{
title: 'openid',
dataIndex: 'openid',
rules: [
],
},
{
title: '姓名',
dataIndex: 'name',
rules: [
],
},
{
title: '昵称',
dataIndex: 'nickname',
rules: [
],
},
{
title: '人脸',
hideInSearch: true,
dataIndex: 'face',
rules: [
],
render: (text, record) => {
return <img src={text} width="80px" alt=""/>
},
renderFormItem: (_, {type, defaultRender, ...rest}, form) => {
const imageUrl = form.getFieldValue('face');
return <UploadAvatar img={imageUrl}/>
},
},
{
title: '匹配',
hideInSearch: true,
dataIndex: 'picture_face',
rules: [
],
render: (text, record) => {
return <img src={text} width="80px" alt=""/>
},
renderFormItem: (_, {type, defaultRender, ...rest}, form) => {
const imageUrl = form.getFieldValue('picture_face');
return <UploadAvatar img={imageUrl}/>
},
},
{
title: '垃圾',
hideInSearch: true,
dataIndex: 'picture_trush',
rules: [
],
render: (text, record) => {
return <img src={text} width="80px" alt=""/>
},
renderFormItem: (_, {type, defaultRender, ...rest}, form) => {
const imageUrl = form.getFieldValue('picture_trush');
return <UploadAvatar img={imageUrl}/>
},
},
{
title: '时间',
dataIndex: 'data_time',
rules: [
],
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除投放记录吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const [formOrder, setFormOrder] = useState([]);
useEffect(() => {
queryTCameraDisplayOrder().then(r => {
setFormOrder(r.form_order)
})
}, [])
const table_columns = getTableColumns(cp);
let order_cp = deepCopy(base_columns);
const form_ordered = orderForm(formOrder, order_cp);
const create_columns = [...form_ordered];
const update_cp = deepCopy(form_ordered)
const update_columns = getUpdateColumns(update_cp);
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
useEffect(() => {
queryTCameraListDisplay().then(value => {
setColumnsStateMap(value)
})
}, [])
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="投放记录表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Button type="primary" onClick={() => exportExcelAll(paramState, queryTCamera, table_columns, '投放记录-All')}>
<ExportOutlined /> 导出全部
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索投放记录" onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
else if (e.key === 'export_current') {
exportExcelCurrent(selectedRows, table_columns, '投放记录-select')
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="export_current">导出已选</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryTCamera({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
search={{}}
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
search={{}}
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
Example #6
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addTUser({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
return dealError(error, addFormRef, hide, "添加");
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updateTUser(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
return dealError(error, updateFormRef, hide, "修改");
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removeTUser(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide()
return dealRemoveError(error, "删除");
}
};
const dateFieldList = []
const base_columns = [{
title: 'openid',
dataIndex: 'openid',
rules: [
{
required: true,
message: 'openid为必填项',
},
],
},
{
title: '姓名',
dataIndex: 'name',
rules: [
],
},
{
title: '昵称',
dataIndex: 'nickname',
rules: [
],
},
{
title: '人脸',
hideInSearch: true,
dataIndex: 'face',
rules: [
],
render: (text, record) => {
return <img src={text} width="80px" alt=""/>
},
renderFormItem: (_, {type, defaultRender, ...rest}, form) => {
const imageUrl = form.getFieldValue('face');
return <UploadAvatar img={imageUrl}/>
},
},
{
title: 'field_token',
dataIndex: 'field_token',
rules: [
],
},
{
title: '积分',
dataIndex: 'integral',
valueType: 'digit',
rules: [
],
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除用户概览吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const [formOrder, setFormOrder] = useState([]);
useEffect(() => {
queryTUserDisplayOrder().then(r => {
setFormOrder(r.form_order)
})
}, [])
const table_columns = getTableColumns(cp);
let order_cp = deepCopy(base_columns);
const form_ordered = orderForm(formOrder, order_cp);
const create_columns = [...form_ordered];
const update_cp = deepCopy(form_ordered)
const update_columns = getUpdateColumns(update_cp);
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
useEffect(() => {
queryTUserListDisplay().then(value => {
setColumnsStateMap(value)
})
}, [])
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="用户概览表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Button type="primary" onClick={() => exportExcelAll(paramState, queryTUser, table_columns, '用户概览-All')}>
<ExportOutlined /> 导出全部
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索用户概览" onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
else if (e.key === 'export_current') {
exportExcelCurrent(selectedRows, table_columns, '用户概览-select')
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="export_current">导出已选</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryTUser({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
search={{}}
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
search={{}}
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
Example #7
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updatePassWordModalVisible, handleUpdatePassWordModalVisible] = useState(false);
const [updatePasswordForm] = Form.useForm();
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addUserProfile({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
return dealError(error, addFormRef, hide, "添加");
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updateUserProfile(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
return dealError(error, updateFormRef, hide, "修改");
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removeUserProfile(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide()
return dealRemoveError(error, "删除");
}
};
const handlePassWordUpdate = () => {
if (updatePasswordForm.getFieldValue('password') !== updatePasswordForm.getFieldValue('re_password')) {
updatePasswordForm.setFields([{
name: 're_password',
errors: ['两次密码不一致'],
}]);
} else {
updatePasswordForm.validateFields().then(
value => {
updateUserPassword({
...value,
username: updateFormValues["username"],
}).then(
message.success('密码修改成功'),
handleUpdatePassWordModalVisible(false),
);
},
);
updatePasswordForm.submit;
}
};
const dateFieldList = ["last_login","date_joined"]
const base_columns = [{
title: 'id',
hideInForm: true,
hideInSearch: true,
dataIndex: 'id',
valueType: 'digit',
rules: [
],
},
{
title: 'password',
hideInTable: true,
hideInSearch: true,
dataIndex: 'password',
rules: [
{
required: true,
message: 'password为必填项',
},
],
},
{
title: 'last_login',
dataIndex: 'last_login',
valueType: 'dateTime',
rules: [
],
},
{
title: 'is_superuser',
initialValue: false,
dataIndex: 'is_superuser',
rules: [
],
render: (text, record) => {
return BooleanDisplay(text);
},
renderFormItem: (item, {value, onChange}) => {
return BooleanFormItem(value, onChange);
},
},
{
title: 'username',
dataIndex: 'username',
rules: [
{
required: true,
message: 'username为必填项',
},
],
},
{
title: 'first_name',
dataIndex: 'first_name',
rules: [
],
},
{
title: 'last_name',
dataIndex: 'last_name',
rules: [
],
},
{
title: 'email',
dataIndex: 'email',
rules: [
],
},
{
title: 'is_staff',
initialValue: false,
dataIndex: 'is_staff',
rules: [
],
render: (text, record) => {
return BooleanDisplay(text);
},
renderFormItem: (item, {value, onChange}) => {
return BooleanFormItem(value, onChange);
},
},
{
title: 'is_active',
initialValue: true,
dataIndex: 'is_active',
rules: [
],
render: (text, record) => {
return BooleanDisplay(text);
},
renderFormItem: (item, {value, onChange}) => {
return BooleanFormItem(value, onChange);
},
},
{
title: 'date_joined',
hideInForm: true,
dataIndex: 'date_joined',
valueType: 'dateTime',
rules: [
],
},
{
title: '性别',
initialValue: "female",
dataIndex: 'gender',
rules: [
],
valueEnum:{"male":"男","female":"女"}
},
{
title: '头像',
hideInSearch: true,
dataIndex: 'image',
valueType: 'avatar',
rules: [
{
required: true,
message: '头像为必填项',
},
],
renderFormItem: (_, {type, defaultRender, ...rest}, form) => {
const imageUrl = form.getFieldValue('image');
return <UploadAvatar img={imageUrl}/>
},
},
{
title: 'groups',
dataIndex: 'groups',
rules: [
],
renderFormItem: (item, {value, onChange, type, defaultRender}) => {
return dealManyToManyField(item, value,onChange,type, groupsManyToManyList)
},
render: (text, record) => {
return renderManyToMany(text)
},
},
{
title: 'user_permissions',
dataIndex: 'user_permissions',
rules: [
],
renderFormItem: (item, {value, onChange, type, defaultRender}) => {
return dealManyToManyField(item, value,onChange,type, user_permissionsManyToManyList)
},
render: (text, record) => {
return renderManyToMany(text)
},
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
record.last_login = record.last_login === null ? record.last_login : moment(record.last_login);record.date_joined = record.date_joined === null ? record.date_joined : moment(record.date_joined);
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<KeyOutlined onClick={() => {
handleUpdatePassWordModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除登入管理吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const [formOrder, setFormOrder] = useState([]);
useEffect(() => {
queryUserProfileDisplayOrder().then(r => {
setFormOrder(r.form_order)
})
}, [])
const table_columns = getTableColumns(cp);
let order_cp = deepCopy(base_columns);
const form_ordered = orderForm(formOrder, order_cp);
const create_columns = [...form_ordered];
const update_cp = deepCopy(form_ordered)
const update_columns = getUpdateColumns(update_cp);
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
useEffect(() => {
queryUserProfileListDisplay().then(value => {
setColumnsStateMap(value)
})
}, [])
const [groupsManyToManyList, setGroupsManyToManyList] = useState([]);
useEffect(() => {
queryGroup({all:1}).then(value => {
setGroupsManyToManyList(value);
});
}, []);const [user_permissionsManyToManyList, setUser_permissionsManyToManyList] = useState([]);
useEffect(() => {
queryPermission({all:1}).then(value => {
setUser_permissionsManyToManyList(value);
});
}, []);
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="登入管理表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Button type="primary" onClick={() => exportExcelAll(paramState, queryUserProfile, table_columns, '登入管理-All')}>
<ExportOutlined /> 导出全部
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索登入管理" onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
else if (e.key === 'export_current') {
exportExcelCurrent(selectedRows, table_columns, '登入管理-select')
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
<Menu.Item key="export_current">导出已选</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryUserProfile({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
search={twoColumns}
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
search={twoColumns}
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
{
<UpdatePasswordForm
onCancel={() => {
handleUpdatePassWordModalVisible(false);
}}
handleUpdate={handlePassWordUpdate}
updateModalVisible={updatePassWordModalVisible}
userName={updateFormValues["username"]}
>
<Form form={updatePasswordForm}>
<FormItem
labelCol={{
span: 5,
}}
wrapperCol={{
span: 15,
}}
label="密码"
name="password"
rules={[
{
required: true,
message: '请输入密码！',
},
]}
>
<Input.Password placeholder="请输入密码" type="password" />
</FormItem>
<FormItem
labelCol={{
span: 5,
}}
wrapperCol={{
span: 15,
}}
label="重复密码"
name="re_password"
rules={[
{
required: true,
message: '请输入重复密码',
},
]}
>
<Input.Password placeholder="请再次输入密码" type="password" />
</FormItem>
</Form>
</UpdatePasswordForm>
}
</PageHeaderWrapper>
);
}
Example #8
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addEmailVerifyRecord({...fields});
hide();
message.success('添加成功');
return true;
} catch (error) {
if ('fields_errors' in error.data) {
for (let key in error.data.fields_errors) {
var value = error.data.fields_errors[key];
addFormRef.current.setFields([
{
name: key,
errors: value,
},
]);
}
} else {
message.error('非字段类型错误');
}
hide();
message.error('添加失败');
return false;
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updateEmailVerifyRecord(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
if ('fields_errors' in error.data) {
for (let key in error.data.fields_errors) {
var value = error.data.fields_errors[key];
updateFormRef.current.setFields([
{
name: key,
errors: value,
},
]);
}
} else {
message.error('非字段类型错误');
}
hide();
message.error('修改失败请重试！');
return false;
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removeEmailVerifyRecord(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide();
message.error('删除失败，请重试');
return false;
}
};
const dateFieldList = ["send_time"]
const base_columns = [{
title: 'ID',
dataIndex: 'id',
hideInForm: true,
hideInSearch: true,
rules: [
{
required: true,
message: 'ID为必填项',
},
],
},{
title: '验证码',
dataIndex: 'code',
rules: [
{
required: true,
message: '验证码为必填项',
},
],
},{
title: '邮箱',
dataIndex: 'email',
rules: [
{
required: true,
message: '邮箱为必填项',
},
],
},{
title: '验证码类型',
dataIndex: 'send_type',
rules: [
{
required: true,
message: '验证码类型为必填项',
},
],
valueEnum: {
register:"注册",forget:"找回密码",update_email:"修改邮箱"
},
},{
title: '发送时间',
dataIndex: 'send_time',
valueType: 'dateTime',
hideInForm: true,
rules: [
{
required: true,
message: '发送时间为必填项',
},
],
render: (text, record) => {
return dealDateTimeDisplay(text);
},
}, {
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
record.send_time = moment(record.send_time);
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除邮箱验证码吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const table_columns = getTableColumns(cp);
const update_columns = [...base_columns];
const create_columns = [...base_columns];
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{x: '100%'}}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="邮箱验证码表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, {selectedRows}) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Input.Search style={{marginRight: 20}} placeholder="搜索邮箱验证码 " onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({selectedRowKeys, selectedRows}) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryEmailVerifyRecord({...params, sorter, filter})}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
form={
{
labelCol: {span: 6},
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
form={{
initialValues: updateFormValues, labelCol: {span: 6},
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
Example #9
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addTyAdminEmailVerifyRecord({ ...fields });
hide();
message.success('添加成功');
return true;
} catch (error) {
if ('fields_errors' in error.data) {
for (let key in error.data.fields_errors) {
var value = error.data.fields_errors[key];
addFormRef.current.setFields([
{
name: key,
errors: value,
},
]);
}
} else {
message.error('非字段类型错误');
}
hide();
message.error('添加失败');
return false;
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updateTyAdminEmailVerifyRecord(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
if ('fields_errors' in error.data) {
for (let key in error.data.fields_errors) {
var value = error.data.fields_errors[key];
updateFormRef.current.setFields([
{
name: key,
errors: value,
},
]);
}
} else {
message.error('非字段类型错误');
}
hide();
message.error('修改失败请重试！');
return false;
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removeTyAdminEmailVerifyRecord(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide();
message.error('删除失败，请重试');
return false;
}
};
const dateFieldList = ["send_time"]
const base_columns = [{
title: 'ID',
dataIndex: 'id',
hideInForm: true,
hideInSearch: true,
rules: [
{
required: true,
message: 'ID为必填项',
},
],
}, {
title: '验证码',
dataIndex: 'code',
rules: [
{
required: true,
message: '验证码为必填项',
},
],
}, {
title: '邮箱',
dataIndex: 'email',
rules: [
{
required: true,
message: '邮箱为必填项',
},
],
}, {
title: '验证码类型',
dataIndex: 'send_type',
rules: [
{
required: true,
message: '验证码类型为必填项',
},
],
valueEnum: {
register: "注册", forget: "找回密码", update_email: "修改邮箱", login_auth: "登录授权"
},
}, {
title: '发送时间',
dataIndex: 'send_time',
valueType: 'dateTime',
hideInForm: true,
rules: [
{
required: true,
message: '发送时间为必填项',
},
],
render: (text, record) => {
return dealDateTimeDisplay(text);
},
}, {
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
record.send_time = moment(record.send_time);
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除TyAdmin邮箱验证码吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const table_columns = getTableColumns(cp);
const update_columns = [...base_columns];
const create_columns = [...base_columns];
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
const [showDropdown, setShowDropdown] = useState(false)
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{ x: '100%' }}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="TyAdmin邮箱验证码表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Input.Search style={{ marginRight: 20 }} placeholder="搜索TyAdmin邮箱验证码 " onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryTyAdminEmailVerifyRecord({ ...params, sorter, filter })}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<Card>
<DragTree />
</Card>
<Form >
<Form.Item
style={{ marginBottom: 24 }}
name="userName"
placeholder="菜单图标"
label="菜单图标"
rules={[
{
required: true,
message: '请输入用户名!',
},
]}
>
<IconDisplay />
</Form.Item>
</Form>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
form={
{
labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
form={{
initialValues: updateFormValues, labelCol: { span: 6 },
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
Example #10
| Source File: index.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
TableList = () => {
const [createModalVisible, handleModalVisible] = useState(false);
const [updateModalVisible, handleUpdateModalVisible] = useState(false);
const [updateFormValues, setUpdateFormValues] = useState({});
const actionRef = useRef();
const addFormRef = useRef();
const updateFormRef = useRef();
const handleAdd = async fields => {
const hide = message.loading('正在添加');
try {
await addTyAdminSysLog({...fields});
hide();
message.success('添加成功');
return true;
} catch (error) {
if ('fields_errors' in error.data) {
for (let key in error.data.fields_errors) {
var value = error.data.fields_errors[key];
addFormRef.current.setFields([
{
name: key,
errors: value,
},
]);
}
} else {
message.error('非字段类型错误');
}
hide();
message.error('添加失败');
return false;
}
};
const handleUpdate = async (value, current_id) => {
const hide = message.loading('正在修改');
try {
await updateTyAdminSysLog(value, current_id);
hide();
message.success('修改成功');
return true;
} catch (error) {
if ('fields_errors' in error.data) {
for (let key in error.data.fields_errors) {
var value = error.data.fields_errors[key];
updateFormRef.current.setFields([
{
name: key,
errors: value,
},
]);
}
} else {
message.error('非字段类型错误');
}
hide();
message.error('修改失败请重试！');
return false;
}
};
const handleRemove = async selectedRows => {
const hide = message.loading('正在删除');
if (!selectedRows) return true;
try {
const ids = selectedRows.map(row => row.id).join(',');
await removeTyAdminSysLog(ids);
hide();
message.success('删除成功');
return true;
} catch (error) {
hide();
message.error('删除失败，请重试');
return false;
}
};
const dateFieldList = ["action_time"]
const base_columns = [{
title: 'ID',
dataIndex: 'id',
hideInForm: true,
hideInSearch: true,
rules: [
{
required: true,
message: 'ID为必填项',
},
],
},{
title: '动作时间',
dataIndex: 'action_time',
valueType: 'dateTime',
hideInForm: true,
rules: [
{
required: true,
message: '动作时间为必填项',
},
],
render: (text, record) => {
return dealDateTimeDisplay(text);
},
},{
title: '操作ip',
dataIndex: 'ip_addr',
rules: [
{
required: true,
message: '操作ip为必填项',
},
],
},{
title: '操作flag',
dataIndex: 'action_flag',
rules: [
{
required: true,
message: '操作flag为必填项',
},
],
},{
title: '日志记录',
dataIndex: 'message',
valueType: 'textarea',
ellipsis: true,
rules: [
{
required: true,
message: '日志记录为必填项',
},
],
},{
title: '日志类型',
dataIndex: 'log_type',
rules: [
{
required: true,
message: '日志类型为必填项',
},
],
},{
title: '用户',
dataIndex: 'user_name',
rules: [
{
required: true,
message: '用户为必填项',
},
],
}, {
title: '操作',
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 100,
render: (text, record) => (
<>
<EditOutlined title="编辑" className="icon" onClick={async () => {
record.action_time = moment(record.action_time);
handleUpdateModalVisible(true);
setUpdateFormValues(record);
}} />
<Divider type="vertical" />
<Popconfirm
title="您确定要删除系统日志吗？"
placement="topRight"
onConfirm={() => {
handleRemove([record])
actionRef.current.reloadAndRest();
}}
okText="确定"
cancelText="取消"
>
<DeleteOutlined title="删除" className="icon" />
</Popconfirm>
</>
),
},];
let cp = deepCopy(base_columns);
const table_columns = getTableColumns(cp);
const update_columns = [...base_columns];
const create_columns = [...base_columns];
const [columnsStateMap, setColumnsStateMap] = useState({});
const [paramState, setParamState] = useState({});
return (
<PageHeaderWrapper>
<ProTable
beforeSearchSubmit={(params => {
dealTime(params, dateFieldList);
return params;
})}
params={paramState}
scroll={{x: '100%'}}
columnsStateMap={columnsStateMap}
onColumnsStateChange={(map) => setColumnsStateMap(map)}
headerTitle="系统日志表格"
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, {selectedRows}) => [
<Button type="primary" onClick={() => handleModalVisible(true)}>
<PlusOutlined /> 新建
</Button>,
<Input.Search style={{marginRight: 20}} placeholder="搜索系统日志 " onSearch={value => {
setParamState({
search: value,
});
actionRef.current.reload();
}} />,
selectedRows && selectedRows.length > 0 && (
<Dropdown
overlay={
<Menu
onClick={async e => {
if (e.key === 'remove') {
await handleRemove(selectedRows);
actionRef.current.reloadAndRest();
}
}}
selectedKeys={[]}
>
<Menu.Item key="remove">批量删除</Menu.Item>
</Menu>
}
>
<Button>
批量操作 <DownOutlined />
</Button>
</Dropdown>
),
]}
tableAlertRender={({selectedRowKeys, selectedRows}) => (
selectedRowKeys.length > 0 ? <div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div> : false
)}
request={(params, sorter, filter) => queryTyAdminSysLog({...params, sorter, filter})}
columns={table_columns}
rowSelection={{}}
/>
<CreateForm onCancel={() => handleModalVisible(false)} modalVisible={createModalVisible}>
<ProTable
formRef={addFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleAdd(value);
if (success) {
handleModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
form={
{
labelCol: {span: 6},
labelAlign: 'left',
}}
columns={create_columns}
rowSelection={{}}
/>
</CreateForm>
<UpdateForm onCancel={() => handleUpdateModalVisible(false)} modalVisible={updateModalVisible}>
<ProTable
formRef={updateFormRef}
onSubmit={async value => {
richTrans(value);
const success = await handleUpdate(value, updateFormValues.id);
if (success) {
handleUpdateModalVisible(false);
if (actionRef.current) {
actionRef.current.reload();
}
}
}}
rowKey="key"
type="form"
form={{
initialValues: updateFormValues, labelCol: {span: 6},
labelAlign: 'left',
}}
columns={update_columns}
rowSelection={{}}
/>
</UpdateForm>
</PageHeaderWrapper>
);
}
