@yorha2b-lab/autodev 2.1.17 → 2.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorha2b-lab/autodev",
-  "version": "2.1.17",
+  "version": "2.1.19",
   "description": "基于视觉大模型的前端(react+Antd)全自动 CRUD 代码生成器",
   "bin": {
     "autodev": "bin/autodev.js"

package/templates/react/components/EditableCell.js

@@ -3,10 +3,18 @@ import React, { useRef, useState, useEffect, useContext } from 'react'
 
 const EditableContext = React.createContext(null)
 
-export const EditableRow = ({ index, ...props }) => {
+export const EditableRow = ({ index, record, ...props }) => {
+
     const [form] = Form.useForm()
+
+    useEffect(() => {
+        if (record) {
+            form.setFieldsValue(record)
+        }
+    }, [record])
+
     return (
-        <Form form={form} component={false}>
+        <Form form={form} component={false} onValuesChange={(changedValue, allValue) => props?.onValuesChange?.({ changedValue, allValue, form })}>
             <EditableContext.Provider value={form}>
                 <tr {...props} />
             </EditableContext.Provider>
@@ -14,7 +22,7 @@ export const EditableRow = ({ index, ...props }) => {
     )
 }
 
-export const EditableCell = ({ title, record, editable, children, dataIndex, placeholder, handleSave, rules = [], options = [], editType = 'text', ...restProps }) => {
+export const EditableCell = ({ title, record, editable, disabled, children, dataIndex, placeholder, handleSave, defaultEdit, rules = [], options = [], editType = 'text', ...restProps }) => {
 
     const inputRef = useRef(null)
     const form = useContext(EditableContext)
@@ -37,7 +45,9 @@ export const EditableCell = ({ title, record, editable, children, dataIndex, pla
     const save = async () => {
         try {
             const values = await form.validateFields()
-            toggleEdit()
+            if (!defaultEdit) {
+                toggleEdit()
+            }
             handleSave({ ...record, ...values })
         } catch (errInfo) {
             console.log('保存失败:', errInfo)
@@ -46,13 +56,25 @@ export const EditableCell = ({ title, record, editable, children, dataIndex, pla
 
     let inputNode
 
+    const formProps = {
+        rules,
+        name: dataIndex,
+        style: { margin: 0 },
+    }
+
+    const commonProps = {
+        onBlur: save,
+        disabled: disabled,
+        placeholder: placeholder ?? title,
+    }
+
     switch (editType) {
-        case 'number':
-            inputNode = <InputNumber ref={inputRef} onPressEnter={save} onBlur={save} placeholder={placeholder ?? title} />
-            break
         case 'select':
-            inputNode = <Select ref={inputRef} options={options} onBlur={save} placeholder={placeholder ?? title} />
+            inputNode = <Select ref={inputRef} options={options} {...commonProps} />
             break;
+        case 'number':
+            inputNode = <InputNumber ref={inputRef} onPressEnter={save} {...commonProps} />
+            break
         case 'checkbox':
             inputNode = (
                 <div tabIndex={-1} onBlur={e => {
@@ -61,19 +83,21 @@ export const EditableCell = ({ title, record, editable, children, dataIndex, pla
                         save()
                     }
                 }}>
-                    <Checkbox.Group ref={inputRef} options={options} />
+                    <Form.Item {...formProps}>
+                        <Checkbox.Group ref={inputRef} options={options} disabled={disabled} {...(options.length === 1 ? { onChange: save } : {})} />
+                    </Form.Item>
                 </div>
             )
             break;
         default:
-            inputNode = <Input ref={inputRef} onPressEnter={save} onBlur={save} placeholder={placeholder ?? title} />
+            inputNode = <Input ref={inputRef} onPressEnter={save} {...commonProps} />
     }
 
     return (
         <td {...restProps}>
             {editable ? (
-                editing ? (
-                    <Form.Item rules={rules} name={dataIndex} style={{ margin: 0 }}>
+                editing || defaultEdit ? (
+                    <Form.Item {...(['checkbox'].includes(editType) ? { style: formProps.style } : formProps)}>
                         {inputNode}
                     </Form.Item>
                 ) : (

package/templates/react/components/MyModalTable.js

@@ -15,17 +15,18 @@ export const MyModalTable = ({ api, onOk, title, width, footer, visible, columns
 
     const handleTableChange = (pagination, filters, sorter) => setSearch({ ...search, pageNo: pagination.current, pageSize: pagination.pageSize, orderBy: sorter.column ? sorter.field : undefined })
 
-    const handleOk = () => {
+    const handleOk = async () => {
         if (onOk) {
             try {
                 setPending(true)
-                onOk()
+                await onOk()
                 setPending(false)
             } catch (error) {
                 console.log('操作失败:', error)
+            } finally {
+                setPending(false)
             }
         }
-        setModal({ visible: false })
     }
 
     return (

package/templates/react/components/MyTable.js

@@ -1,43 +1,31 @@
 import { Table } from 'antd'
-import { useRef, useMemo, useEffect } from 'react'
 import { EditableRow, EditableCell } from './EditableCell'
+import { useRef, useMemo, useEffect, useCallback } from 'react'
 
-const components = {
-    body: {
-        row: EditableRow,
-        cell: EditableCell,
-    }
-}
-
-export const MyTable = ({ size, query, total, search, autoScroll, onChange, pagination, rowClassName, customSave, setDataSource, columns = [], rowSelection, rowKey = 'id', loading = false, dataSource = [], scroll = { x: 'max-content' }, ...restProps }) => {
+export const MyTable = ({ size, query, total, search, autoScroll, onChange, pagination, rowClassName, customSave, setDataSource, lineFormChange, columns = [], rowSelection, rowKey = 'id', loading = false, dataSource = [], scroll = { x: 'max-content' }, ...restProps }) => {
 
     const tableRef = useRef(null)
     const hasScrolledRef = useRef(false)
 
     const isEditable = useMemo(() => columns.some(col => col.editType), [columns])
 
-    const handleSave = row => {
-        const newData = [...dataSource]
-        const index = newData.findIndex(item => row[rowKey] === item[rowKey])
-        const item = newData[index]
-        newData.splice(index, 1, { ...item, ...row })
-        setDataSource(newData)
-        customSave?.({ ...item, ...row })
-    }
-
-    const paginationConfig = useMemo(() => {
-
-        if (!pagination) return false
+    const handleSave = useCallback((row) => {
+        setDataSource(prev => {
+            const newData = [...prev]
+            const index = newData.findIndex(item => row[rowKey] === item[rowKey])
+            const item = newData[index]
+            newData.splice(index, 1, { ...item, ...row })
+            customSave?.({ ...item, ...row }, newData)
+            return newData
+        })
+    }, [rowKey, customSave, setDataSource])
 
-        return {
-            total,
-            showSizeChanger: true,
-            current: search?.pageNo,
-            pageSize: search?.pageSize,
-            showTotal: (total) => `共 ${total} 条`,
-            ...(typeof pagination === 'object' ? pagination : {})
+    const components = useMemo(() => ({
+        body: {
+            row: EditableRow,
+            cell: EditableCell,
         }
-    }, [total, search, pagination])
+    }), [])
 
     const mergedColumns = useMemo(() => {
         return columns.map(col => {
@@ -53,13 +41,29 @@ export const MyTable = ({ size, query, total, search, autoScroll, onChange, pagi
                     rules: col.rules,
                     options: col.options,
                     editType: col.editType,
-                    editable: !!col.editType,
                     dataIndex: col.dataIndex,
-                    placeholder: col.placeholder
+                    placeholder: col.placeholder,
+                    defaultEdit: col.defaultEdit,
+                    disabled: col.specialDisabled ? record.disabled : col.disabled,
+                    editable: col.specialEditType ? record.needEdit && !!col.editType : !!col.editType,
                 }),
             }
         })
-    }, [columns])
+    }, [columns, handleSave])
+
+    const paginationConfig = useMemo(() => {
+
+        if (!pagination) return false
+
+        return {
+            total,
+            showSizeChanger: true,
+            current: search?.pageNo,
+            pageSize: search?.pageSize,
+            showTotal: (total) => `共 ${total} 条`,
+            ...(typeof pagination === 'object' ? pagination : {})
+        }
+    }, [total, search, pagination])
 
     useEffect(() => {
         if (!autoScroll || !dataSource?.length || query?.rowIndex === undefined) return
@@ -92,6 +96,7 @@ export const MyTable = ({ size, query, total, search, autoScroll, onChange, pagi
                 rowSelection={rowSelection}
                 pagination={paginationConfig}
                 components={isEditable ? components : undefined}
+                onRow={(record, index) => ({ record, index, onValuesChange: lineFormChange })}
                 rowClassName={(record, index) => {
                     const externalClass = typeof rowClassName === 'function' ? rowClassName(record, index) : rowClassName
                     const classes = [externalClass]

package/templates/react/components/index.js

@@ -71,7 +71,7 @@ export const formNode = ({ item }) => {
     const commonProps = {
         disabled: item.readOnly,
         style: { width: item.width ?? '100%' },
-        placeholder: item.placeholder ?? `请${['select', 'cascader', 'date', 'daterange'].includes(item.type) ? '选择' : '输入'}`,
+        placeholder: item.placeholder ?? `请${['select', 'cascader', 'date'].includes(item.type) ? '选择' : '输入'}`,
         ...item.props
     }
 
@@ -82,8 +82,6 @@ export const formNode = ({ item }) => {
             return <InputNumber  {...commonProps} />
         case 'ossUpload':
             return <AliyunOSSUpload {...commonProps} />
-        case 'daterange':
-            return <DatePicker.RangePicker {...commonProps} />
         case 'radio':
             return <Radio.Group options={item.options} {...commonProps} />
         case 'treeSelect':
@@ -96,6 +94,8 @@ export const formNode = ({ item }) => {
             return <Tree checkable treeData={item.options} {...commonProps} />
         case 'textarea':
             return <Input.TextArea autoSize={{ minRows: 4 }} {...commonProps} />
+        case 'daterange':
+            return <DatePicker.RangePicker {...commonProps} placeholder={undefined} />
         case 'cascader':
             return <Cascader showSearch allowClear options={item.options} {...commonProps} />
         case 'upload':

package/templates/react/handlebars/MyTable.hbs

@@ -1,7 +1,7 @@
 <MyTable
-    rowKey='id'
     query={query}
     total={total}
+    rowKey={rowKey}
     search={search}
     loading={loading}
     dataSource={dataSource}
@@ -20,7 +20,7 @@
     {{#if hasRowSelection}}
     {{{{raw}}}}
     rowSelection={{
-        selectedRowKeys: selectedRows.map(item => item.id),
+        selectedRowKeys: selectedRows.map(item => item[rowKey]),
         onChange: (keys, rows) => setSelectedRows(rows)
     }}
     {{{{/raw}}}}

package/templates/react/handlebars/hookBlock.hbs

@@ -2,8 +2,15 @@ const initParams = {{#if hasTabs}}{ type: tabs[0].key }{{else}}{}{{/if}}
 
 const query = formatQuery(Object.fromEntries(new URLSearchParams(location.search).entries()),  {{formItems}})
 
-const { total, loading, dataSource, search, setSearch, setDataSource, refresh } = useTableQuery(
-    async params => await request('/api/{{fileName}}', { method: 'POST', body: params }),
-    response => ({ data: response?.data ?? [], total: response?.total ?? 0 }),
-    {...initParams, ...query},
-)
+const { total, columns, loading, dataSource, search, setSearch, setDataSource, refresh } = useTableQuery({
+        api: async params => await request('/api/{{fileName}}', { method: 'POST', body: params }),
+        initialParams: { pageNo: 1, pageSize: 10, ...query },
+        cols:[],//前端指定列数组
+        formatResponse: response => {
+            return {
+                data: response?.data ?? [],
+                total: response?.data?.total ?? 0,
+                columns: [],//可选,解析接口动态列;优先级高于cols
+            }
+        },
+    })

package/templates/react/handlebars/stateBlock.hbs

@@ -1,3 +1,5 @@
+
+const rowKey = 'id'
 const [form] = Form.useForm()
 const [modal, setModal] = useState({ visible:false, title:'', formItems:[] })
 {{#if hasRowSelection}}

package/templates/react/hooks/useTableQuery.js

@@ -1,11 +1,12 @@
 import { useRef, useState, useEffect, useCallback } from 'react'
 
-export const useTableQuery = (api, formatResponse, initialParams = {}) => {
+export const useTableQuery = ({ api, cols = [], initialParams = {}, formatResponse }) => {
 
     const [total, setTotal] = useState(0)
+    const [columns, setColumns] = useState(cols)
     const [loading, setLoading] = useState(false)
     const [dataSource, setDataSource] = useState([])
-    const [search, setSearch] = useState({ pageNo: 1, pageSize: 10, ...initialParams })
+    const [search, setSearch] = useState(initialParams)
 
     const apiRef = useRef(api)
     const fetchIdRef = useRef(0)
@@ -14,6 +15,8 @@ export const useTableQuery = (api, formatResponse, initialParams = {}) => {
         apiRef.current = api
     }, [api])
 
+    const getColumnSchema = cols => cols.map(col => ({ title: col.title, dataIndex: col.dataIndex })).join('|')
+
     const fetchData = useCallback(async () => {
         if (!apiRef.current) return
         setLoading(true)
@@ -21,7 +24,10 @@ export const useTableQuery = (api, formatResponse, initialParams = {}) => {
         try {
             const response = await apiRef.current(search)
             if (currentFetchId !== fetchIdRef.current) return
-            const { data, total } = formatResponse(response ?? {})
+            const { data, total, columns: newCols } = formatResponse(response ?? {})
+            if (newCols && getColumnSchema(newCols) !== getColumnSchema(columns)) {
+                setColumns(newCols)
+            }
             setDataSource(data)
             setTotal(total ?? 0)
         } catch (error) {
@@ -37,5 +43,5 @@ export const useTableQuery = (api, formatResponse, initialParams = {}) => {
         fetchData()
     }, [fetchData])
 
-    return { total, loading, dataSource, search, setSearch, setDataSource, refresh: fetchData }
+    return { total, columns, loading, dataSource, search, setSearch, setDataSource, refresh: fetchData }
 }