完善逻辑

Author: xiaotian

app/发货tpl.xlsx

@@ -1,4 +1,4 @@
-import { Button, Table } from 'antd'
+import { Button, Table, message } from 'antd'
 import Excel from 'exceljs'
 import { useState, useEffect } from 'react'
 const { ipcRenderer } = window.require('electron')
@@ -130,7 +130,8 @@ export default (props: DataPreviewProps) => {
     document.body.appendChild(a)
     a.click()
     document.body.removeChild(a)
-    ipcRenderer.send('export-res', kucunWb)
+
+    message.success('导出成功!')
   }
 
   return (

app/进货tpl.xlsx

@@ -1,71 +1,75 @@
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
-import { useContext } from 'react'
-import { Button, Form, Input, Select, Space } from 'antd'
+import { useContext, useState, useEffect } from 'react'
+import { Button, Form, Input, Select, Space, Modal, message } from 'antd'
 import { Ctx } from '@/pages'
 
 const { ipcRenderer } = window.require('electron')
 
 export default (props: { nextStep: () => void }) => {
   const [form] = Form.useForm()
-  const {setFahuoFile, setLaihuoFile, setColorMap} = useContext(Ctx)
+  const { setFahuoFile, setLaihuoFile, setColorMap } = useContext(Ctx)
   function handleLaihuoClick() {
     ipcRenderer.send('read-laihuo-excel')
     ipcRenderer.on('read-laihuo-success', (evt: any, fileName: string, file: ArrayBuffer) => {
-      form.setFields([{name: 'laihuo', value: fileName}])
+      form.setFields([{ name: 'laihuo', value: fileName }])
       setLaihuoFile(file)
     })
   }
   function handleFahuoClick() {
     ipcRenderer.send('read-fahuo-excel')
     ipcRenderer.on('read-fahuo-success', (evt: any, fileName: string, file: ArrayBuffer) => {
-      form.setFields([{name: 'fahuo', value: fileName}])
+      form.setFields([{ name: 'fahuo', value: fileName }])
       setFahuoFile(file)
     })
   }
   async function handleNextStep() {
     await form.validateFields()
     const values = form.getFieldsValue()
-    setColorMap(values.colorMaps.reduce((map: any, item: any) => ({...map, [item.cn]: item.en}), {}))
+    setColorMap(values.colorMaps.reduce((map: any, item: any) => ({ ...map, [item.cn]: item.en }), {}))
     props.nextStep()
   }
 
-  const defaultValue = {
-    colorMaps: [{
-      cn: '白底红花',
-      en: 'White with red flowers'
-    }, {
-      cn: '红橙点',
-      en: 'Red orange point'
-    }, {
-      cn: '酒红',
-      en: 'wine red'
-    }, {
-      cn: '白色',
-      en: 'white'
-    }, {
-      cn: '白底红花',
-      en: 'White printing'
-    }, {
-      cn: '黑色波点',
-      en: 'Black wave point'
-    }, {
-      cn: '黑色',
-      en: 'black'
-    }, {
-      cn: '深蓝花',
-      en: 'Deep blue flowers'
-    }, {
-      cn: '深绿',
-      en: 'dark green'
-    }]
+  const [saveVisible, setSaveVisible] = useState(false)
+  const [saveForm] = Form.useForm()
+  const [colorMapTpl, setColorMapTpl] = useState<Record<string, { cn: string, en: string }[]>>({})
+  const [selectedTpl, setSelectedTpl] = useState<string>()
+  useEffect(() => {
+    const tpl = JSON.parse(localStorage.getItem('colorMapTpls') ?? '{}')
+    setColorMapTpl(tpl)
+  }, [])
+  async function handleOpenSave() {
+    const value = form.getFieldsValue()
+    if (!value.colorMaps?.length) return
+    const validatePaths = value.colorMaps.reduce((res: any, item: any, i: number) => [...res, ['colorMaps', i, 'cn'], ['colorMaps', i, 'en']], [])
+    await form.validateFields(validatePaths)
+    setSaveVisible(true)
+    saveForm.resetFields()
   }
+  async function handleConfirmSave() {
+    await saveForm.validateFields()
+    const value = saveForm.getFieldsValue()
+    const colorMaps = form.getFieldsValue().colorMaps ?? []
+    colorMapTpl[value.name] = colorMaps
+    localStorage.setItem('colorMapTpls', JSON.stringify(colorMapTpl))
+
+    message.success('保存模版成功!')
+    setSaveVisible(false)
+  }
+  function handleCloseSave() {
+    setSaveVisible(false)
+  }
+  function handleSelectTpl(value: string) {
+    setSelectedTpl(value)
+    form.setFields([{ name: 'colorMaps', value: colorMapTpl[value] }])
+  }
+
   return (
-    <Form form={form} className="!mt-4 w-4/6" labelCol={{ span: 5 }} initialValues={defaultValue}>
+    <Form form={form} className="!mt-4 w-4/6" labelCol={{ span: 5 }}>
       <Form.Item label="来货表" name="laihuo" rules={[{ required: true, message: '请上传来货表!' }]}>
         <Input onClick={handleLaihuoClick} placeholder="点击上传" />
       </Form.Item>
       <Form.Item label="发货表" name="fahuo" rules={[{ required: true, message: '请上传发货表!' }]}>
-        <Input onClick={handleFahuoClick} placeholder="点击上传"/>
+        <Input onClick={handleFahuoClick} placeholder="点击上传" />
       </Form.Item>
       <Form.Item label="颜色映射" required>
         <div className="inline-block w-[295px] h-[250px] p-2 rounded bg-gray-8 align-top overflow-auto">
@@ -106,19 +110,37 @@ export default (props: { nextStep: () => void }) => {
                     <Button className="!w-7/12" type="primary" onClick={() => add()} block icon={<PlusOutlined />}>
                       添加
                     </Button>
-                    <Button className="!w-4/12">存为模版</Button>
+                    <Button className="!w-4/12" onClick={handleOpenSave}>存为模版</Button>
                   </div>
                 </Form.Item>
                 <Form.ErrorList errors={errors} />
               </>
             )}
           </Form.List>
         </div>
-        <Select className="inline-block !w-[80px] !ml-4 align-top" placeholder="模版"></Select>
+        <Select className="inline-block !w-[80px] !ml-4 align-top" placeholder="模版" value={selectedTpl} onChange={handleSelectTpl} showSearch>
+          {
+            Object.keys(colorMapTpl).map(key => <Select.Option value={key} key={key}>{key}</Select.Option>)
+          }
+        </Select>
       </Form.Item>
       <Form.Item className="!text-right">
         <Button type="primary" onClick={handleNextStep}>下一步</Button>
       </Form.Item>
+
+      <Modal title="保存颜色映射模版"
+        onOk={handleConfirmSave}
+        visible={saveVisible}
+        onCancel={handleCloseSave}
+        okText="确认"
+        cancelText="取消"
+        >
+        <Form form={saveForm}>
+          <Form.Item label="名称" name="name" rules={[{ required: true, message: '请输入名称!' }]}>
+            <Input placeholder='输入模版名称，可覆盖之前的'></Input>
+          </Form.Item>
+        </Form>
+      </Modal>
     </Form>
   )
 }