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;