批量添加记录

src/pages/websites/record/index.tsx

@@ -10,7 +10,7 @@ import {
   websiteDnsRecordssAtom,
   websiteDnsRecordsSearchAtom,
 } from '@/store/websites/record'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import Action from '@/components/action/Action.tsx'
 import {
   BetaSchemaForm,
@@ -19,7 +19,7 @@ import {
 } from '@ant-design/pro-components'
 import ListPageLayout from '@/layout/ListPageLayout.tsx'
 import { useStyle } from './style'
-import { FilterOutlined, QuestionCircleOutlined } from '@ant-design/icons'
+import { FilterOutlined, MinusCircleOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons'
 import { getValueCount, unSetColumnRules } from '@/utils'
 import { Table as ProTable } from '@/components/table'
 import Popconfirm from '@/components/popconfirm'
@@ -48,6 +48,7 @@ const WebsiteDnsRecords = () => {
   const [ searchKey, setSearchKey ] = useState(search?.title)
 
   const currentDomain = domainList?.rows?.find?.(item => item.id === id)
+  const isBatch = useRef(false)
 
   useEffect(() => {
     if (id) {
@@ -57,6 +58,27 @@ const WebsiteDnsRecords = () => {
 
   const columns = useMemo(() => {
 
+    const batchDomain = {
+      title: '域名',
+      dataIndex: 'domains',
+      hideInSearch: true,
+      hideInTable: true,
+      hideInSetting: true,
+      formItemProps:{
+        rules: [
+          { required: true,}
+        ]
+      },
+      renderFormItem: (_schema, config) => {
+        return <div>
+          <Input.TextArea
+                  {...config}
+                  rows={5}
+                  placeholder={t(`${i18nPrefix}.columns.domains`, '一行一个域名，最多支持10000个；\n支持复制黏贴到输入框，但请核对数据是否正确。')}/>
+        </div>
+      }
+    }
+
     return [
       {
         title: 'ID',
@@ -73,7 +95,6 @@ const WebsiteDnsRecords = () => {
         hideInTable: true,
         hideInSetting: true,
       },
-
       {
         title: t(`${i18nPrefix}.columns.domain_id`, 'domain_id'),
         dataIndex: 'domain_id',
@@ -82,6 +103,7 @@ const WebsiteDnsRecords = () => {
         hideInTable: true,
         hideInSetting: true,
       },
+      isBatch.current ? batchDomain : null,
       {
         title: t(`${i18nPrefix}.columns.type`, '记录类型'),
         tooltip: '指解析记录的用途，例如：网站、邮箱',
@@ -104,7 +126,7 @@ const WebsiteDnsRecords = () => {
           return record.type
         }
       },
-      {
+      !isBatch.current ? {
         title: t(`${i18nPrefix}.columns.name`, '主机记录'),
         dataIndex: 'name',
         tooltip: '指域名前缀，例如：www',
@@ -139,6 +161,61 @@ const WebsiteDnsRecords = () => {
                    }/>
           </div>
         }
+      } : {
+        title: t(`${i18nPrefix}.columns.names`, '主机记录'),
+        dataIndex: 'names',
+        tooltip: '指域名前缀，例如：www',
+        formItemProps: {
+          rules: [
+            { required: true, }
+          ]
+        },
+        renderFormItem: (_schema, config) => {
+
+          return <Form.List name="names"
+                            {..._schema.formItemProps}
+                            {...config}
+          >
+            {
+              (fields, { add, remove }) => {
+                return <>
+                  {fields.map((field) => {
+                    return (
+                            <>
+                              <Form.Item>
+                                <Form.Item
+                                        {...field} key={field.key}
+                                        validateTrigger={[ 'onChange', 'onBlur' ]}
+                                        noStyle
+                                >
+                                  <Input style={{ width: '90%' }} placeholder={'指域名前缀，例如：www'}/>
+                                </Form.Item>
+                                {fields.length > 1 ? (
+                                        <MinusCircleOutlined
+                                                className="dynamic-delete-button"
+                                                onClick={() => remove(field.name)}
+                                        />
+                                ) : null}
+                              </Form.Item>
+
+                            </>
+                    )
+                  })}
+                  <Form.Item noStyle={true}>
+                    <Button
+                            type="dashed"
+                            onClick={() => add()}
+                            style={{ width: '90%' }}
+                            icon={<PlusOutlined/>}
+                    >
+                      添加记录
+                    </Button>
+                  </Form.Item>
+                </>
+              }
+            }
+          </Form.List>
+        }
       },
       {
         title: t(`${i18nPrefix}.columns.content`, '记录值'),
@@ -228,8 +305,8 @@ const WebsiteDnsRecords = () => {
           </Popconfirm>
         ]
       }
-    ] as ProColumns[]
-  }, [ isDeleting, currentWebsiteDnsRecords, search, currentDomain ])
+    ].filter(Boolean) as ProColumns[]
+  }, [ isDeleting, currentWebsiteDnsRecords, search, currentDomain, isBatch.current ])
 
   useEffect(() => {
 
@@ -252,6 +329,7 @@ const WebsiteDnsRecords = () => {
                       <Space>
                         <Button key={'add'}
                                 onClick={() => {
+                                  isBatch.current = false
                                   form.resetFields()
                                   form.setFieldsValue({
                                     id: 0,
@@ -260,6 +338,17 @@ const WebsiteDnsRecords = () => {
                                   setOpen(true)
                                 }}
                                 type={'primary'}>{t(`${i18nPrefix}.add`, '添加记录')}</Button>
+                        <Button key={'add'}
+                                onClick={() => {
+                                  isBatch.current = true
+                                  form.resetFields()
+                                  form.setFieldsValue({
+                                    id: 0,
+                                    ttl: 1,
+                                  })
+                                  setOpen(true)
+                                }}
+                                type={'primary'}>{t(`${i18nPrefix}.batchAdd`, '批量添加记录')}</Button>
                       </Space>
                     }
                     toolbar={{
@@ -356,7 +445,10 @@ const WebsiteDnsRecords = () => {
                     }}
                     loading={isSubmitting}
                     onFinish={async (values) => {
-                      saveOrUpdate(values)
+                      saveOrUpdate({
+                        ...values,
+                        domain_id: id,
+                      })
                     }}
                     columns={columns as ProFormColumnsType[]}/>
             <BetaSchemaForm