|
@@ -1,6 +1,5 @@
|
|
|
import ProTable from '@ant-design/pro-table'
|
|
|
import React from 'react'
|
|
|
-import { createUid } from '@/utils/util'
|
|
|
import { Button, Tag } from 'antd'
|
|
|
import { ColumnsType } from 'antd/lib/table'
|
|
|
import { isNullOrUnDef } from '@/utils/is'
|
|
@@ -39,11 +38,12 @@ type AssemblyDetailProps = {
|
|
|
|
|
|
const AssemblyDetail: React.FC<AssemblyDetailProps> = ({ record, refresh }) => {
|
|
|
const [modal, ModalDOM] = useModal()
|
|
|
+
|
|
|
const columns: ColumnsType<API.AssemblyItem> = [
|
|
|
{
|
|
|
title: '组件名称',
|
|
|
dataIndex: 'name',
|
|
|
- align: 'center',
|
|
|
+ onHeaderCell: () => ({ style: { textAlign: 'center' } }),
|
|
|
renderText: name => <span>{assemblyToNameMap[name]}</span>
|
|
|
},
|
|
|
{
|
|
@@ -55,13 +55,18 @@ const AssemblyDetail: React.FC<AssemblyDetailProps> = ({ record, refresh }) => {
|
|
|
{
|
|
|
title: '组件标题',
|
|
|
dataIndex: 'title',
|
|
|
- align: 'center',
|
|
|
+ onHeaderCell: () => ({ style: { textAlign: 'center' } }),
|
|
|
renderText: title => <span>{assemblyToTitleMap[title]}</span>
|
|
|
},
|
|
|
{
|
|
|
title: '操作',
|
|
|
dataIndex: 'operate',
|
|
|
- align: 'center'
|
|
|
+ align: 'center',
|
|
|
+ renderText: () => (
|
|
|
+ <div className="divide-x divide-bg-gray-400 flex flex-row items-center">
|
|
|
+ <span className="px-2 text-primary cursor-pointer hover:text-hex-967bbd">组件配置</span>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
}
|
|
|
]
|
|
|
|
|
@@ -69,12 +74,11 @@ const AssemblyDetail: React.FC<AssemblyDetailProps> = ({ record, refresh }) => {
|
|
|
<div className={styles.drawerTableBox}>
|
|
|
<ProTable
|
|
|
search={false}
|
|
|
- rowKey="ID"
|
|
|
+ rowKey="id"
|
|
|
columns={columns}
|
|
|
dataSource={
|
|
|
!isNullOrUnDef(record?.assembly)
|
|
|
? record?.assembly.map(item => ({
|
|
|
- ID: createUid(),
|
|
|
name: item,
|
|
|
type: item,
|
|
|
title: item
|
|
@@ -83,28 +87,23 @@ const AssemblyDetail: React.FC<AssemblyDetailProps> = ({ record, refresh }) => {
|
|
|
}
|
|
|
className="absolute"
|
|
|
pagination={false}
|
|
|
- toolbar={{
|
|
|
- actions: [
|
|
|
- <Button
|
|
|
- key="key"
|
|
|
- onClick={() => {
|
|
|
- modal.open({
|
|
|
- title: '添加组件',
|
|
|
- okText: '确认',
|
|
|
- cancelText: '取消',
|
|
|
- width: 1000,
|
|
|
- wrapClassName: 'modalTableBox',
|
|
|
- children: (
|
|
|
- <AddAssemblyModal defaultData={record} refresh={refresh} close={() => modal.close()} />
|
|
|
- ),
|
|
|
- footer: null
|
|
|
- })
|
|
|
- }}>
|
|
|
- 添加组件
|
|
|
- </Button>
|
|
|
- ]
|
|
|
- }}
|
|
|
+ toolBarRender={false}
|
|
|
/>
|
|
|
+ <Button
|
|
|
+ className="buttonBox"
|
|
|
+ onClick={() => {
|
|
|
+ modal.open({
|
|
|
+ title: '添加组件',
|
|
|
+ okText: '确认',
|
|
|
+ cancelText: '取消',
|
|
|
+ width: 1000,
|
|
|
+ wrapClassName: 'modalTableBox',
|
|
|
+ children: <AddAssemblyModal defaultData={record} refresh={refresh} close={() => modal.close()} />,
|
|
|
+ footer: null
|
|
|
+ })
|
|
|
+ }}>
|
|
|
+ 添加组件
|
|
|
+ </Button>
|
|
|
{ModalDOM}
|
|
|
</div>
|
|
|
)
|