import React, { useEffect, useState } from 'react';
import { SetData } from './../../data.d';
import type { ProColumns } from '@ant-design/pro-table';
import { EditableProTable } from '@ant-design/pro-table';
import { Space } from 'antd'
import { StarOutlined } from '_@ant-design_icons@4.6.4@@ant-design/icons';
// import { Button } from 'antd';
import styles from '../CommercialInsurance/style.less'
interface Model{
specialappointmentA: SetData[],
specialClick: (value: SetData[]) => void
}
export const Appointment = (props: Model) => {
let { specialappointmentA, specialClick } = props;
console.log(specialappointmentA, 'specialappointmentAspecialappointmentA');
const [showStar, setShowStar] = useState(false) // 默認選擇的時候增加星星
const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
const [dataSource, setDataSource] = useState<SetData[]>(specialappointmentA);
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]) //
const columns: ProColumns<SetData>[] = [
{
title: '序列號',
dataIndex: 'specId',
key: 'specId',
formItemProps: (form, { rowIndex }) => { // 設置哪列能編輯
return {
rules: rowIndex > 2 ? [{ required: true, message: '此項為必填項' }] : [],
};
},
// 第二行不允許編輯
editable: (text, record, index) => {
return false // 控制哪行能編寫 控制所有序列號都不能更改
},
width: '30%',
},
{
title: '特約內容',
key: 'content',
dataIndex: 'content',
},
{
title: '操作',
valueType: 'option',
width: 200,
render: (text, record, _, action) => [
record.isModify == 2? <div key='1'> // 根據數據返回 判斷 哪行能編輯 增加動態操作按鈕
<Space>
<a
key="editable"
onClick={() => {
console.log(text, record, 'action');
action?.startEditable?.(record.key);
}}
>
編輯
</a>
<a
key="delete"
onClick={() => {
setDataSource(dataSource.filter((item) => item.key !== record.key));
}}
>
刪除
</a>
</Space>
</div> : <div key='2'></div>
],
},
]
useEffect(() => {
let key:React.Key[] = []
specialappointmentA.map(item => {
if (item.useFlag == '1') {
key.push(item.key)
}
})
setSelectedRowKeys(key) // 當頁面初始化的時候 遍歷傳入數據的數組 判斷當useFlag 為1 的時候 把 值為1的選項默認選擇
}, [])
const rowSelection = {
selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys: React.Key[], selectedRows: SetData[]) => {
setSelectedRowKeys(selectedRowKeys)
},
getCheckboxProps: (record: SetData) => ({
disabled: record.useFlag == '1' ,
// name: record.name,
}),
};
return (
<>
<EditableProTable<SetData>
rowSelection={{
...rowSelection,
}}
rowClassName={(record, index) => {
console.log(record, index);
if (record.useFlag == '1') {
return styles.inputStar
}
}}
// style={{minHeight: '250px'}}
headerTitle=""
// className={styles.inputStar}
columns={columns}
rowKey="key"
controlled={true}
value={dataSource}
recordCreatorProps={false} // 關閉新建
tableAlertRender={false}
onChange={setDataSource}
editable={{
type: 'multiple',
editableKeys,
onSave: async (rowKey, data, row) => {
specialappointmentA.forEach(item => {
if (item.key == rowKey) {
item = data
let message = []
message.push(item)
specialClick(message)
}
})
},
onChange: setEditableRowKeys,
}}
/>
</>
);
};
export default Appointment;