选择部门返回本地(缓存)

src/app.config.ts

@@ -61,6 +61,7 @@ export default defineAppConfig({
         'depCur/depCur',
         'addCur/addCur',
         'spotMeeting/spotMeeting',
+        'selectDep/selectDep',
       ]
     }
   ],

src/pages/manage/addStudent/addStudent.tsx

@@ -1,5 +1,5 @@
 import {Button, Form, Input, View} from "@tarojs/components";
-import {useEffect, useState} from "react";
+import {useCallback, useEffect, useState} from "react";
 import {ManageApi, Student} from "@/api/manage";
 import Icon from "@/components/icon";
 import Taro from "@tarojs/taro";
@@ -7,7 +7,6 @@ import {curriculum} from "@/api";
 import './addStudent.scss'
 import {getCurrentInstance} from "@tarojs/runtime";
 import {Profile} from '@/store'
-import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
 
 interface Department {
   id: number
@@ -17,7 +16,6 @@ interface Department {
 const AddStudent = () => {
   const [userInfo, setUerInfo] = useState<Student | null>(null)
   const [department, setDepartment] = useState<Department[]>([])
-  const [show, setShow] = useState(false)
   const [depIds, setDepIds] = useState<number[]>([])
   const params = getCurrentInstance()?.router?.params as { id?: number }
   const [disable, setDisable] = useState(false)
@@ -53,33 +51,18 @@ const AddStudent = () => {
         Taro.navigateBack()
       }, 500)
     } catch (e) {
-      console.log(e)
     }
     Taro.hideLoading()
     setDisable(true)
   }
 
-  function changeDepIds(item: Department) {
-    const ids: number[] = JSON.parse(JSON.stringify(depIds))
-    const index = depIds.indexOf(item.id)
-    if (index === -1) {
-      ids.push(item.id)
-    } else {
-      ids.splice(index, 1)
-    }
 
-    if (ids.length < 1) {
-      Taro.showToast({title: '最少一个部门'})
-      return
-    }
-    setDepIds(ids)
-  }
-
-  function formatDep() {
+  const formatDep = useCallback(() => {
+    console.log(depIds,12)
     const selected = department.filter(d => depIds.includes(d.id)).map(d => d.title)
     const top4 = selected.splice(0, 3).join('、')
     return top4 + (selected.length ? "+" + selected.length : '')
-  }
+  }, [depIds])
 
   async function getUserInfo() {
     const res = await ManageApi.userInfo(params.id!)
@@ -87,12 +70,24 @@ const AddStudent = () => {
     setDepIds(res.dep_ids)
   }
 
+  const jumSetDep = useCallback(() => {
+    Taro.navigateTo({url: `/pages/manage/selectDep/selectDep?depIds=${JSON.stringify(depIds)}`})
+  }, [depIds])
+
   useEffect(() => {
     getDepartment()
     if (params.id) {
       getUserInfo()
     }
-  }, [params.id])
+  }, [])
+
+  Taro.useDidShow(() => {
+    const deps = Taro.getStorageSync('selectDep')
+    if (deps && deps.length) {
+      setDepIds(deps)
+      Taro.removeStorageSync('selectDep')
+    }
+  })
 
   return (
     <View className='bg-white px-2'>
@@ -116,7 +111,7 @@ const AddStudent = () => {
 
         <View className='item'>
           <View>所属部门</View>
-          <View className='flex align-center' onClick={() => setShow(true)}>
+          <View className='flex align-center' onClick={jumSetDep}>
             <View>
               {depIds.length ? formatDep() : '请选择'}
             </View>
@@ -126,20 +121,6 @@ const AddStudent = () => {
 
         <Button className='add button' formType='submit' disabled={disable}>新建</Button>
       </Form>
-
-      <CustomPageContainer show={show} round>
-        <View className='px-2 pt-1' style='text-align:right' onClick={() => setShow(false)}>确定</View>
-        <View className='h-4 p-2 flex flex-wrap align-start'>
-          {department?.map(item => {
-            return (
-              <View className={'mx-2 dep ' + (depIds.includes(item.id) ? ' depSelected' : '')}
-                    onClick={() => changeDepIds(item)}>
-                {item.title}
-              </View>
-            )
-          })}
-        </View>
-      </CustomPageContainer>
     </View>
   )
 }

src/pages/manage/selectDep/selectDep.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '选择部门',
+})

src/pages/manage/selectDep/selectDep.tsx

@@ -0,0 +1,58 @@
+import React, {FC, useCallback, useEffect, useState} from "react";
+import {Checkbox, View} from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import {curriculum} from "@/api";
+import PopPut from "@/components/popPut/popPut";
+import folder from "@/static/img/folder.png";
+import MyButton from "@/components/button/MyButton";
+
+const SelectDep: FC = () => {
+  const {depIds} = Taro.getCurrentInstance()?.router?.params as { depIds: string }
+  const [ids, setIds] = useState<number[]>([])
+  const [deps, setDeps] = useState<Manage[]>([])
+
+  useEffect(() => {
+    curriculum.department().then(res => {
+      setDeps(res.data)
+    })
+
+    setIds(JSON.parse(depIds))
+  }, [])
+
+  const onChange = useCallback((id: number) => {
+    setIds([
+      ...ids,
+      id
+    ])
+  }, [ids])
+
+  function ok() {
+    if (!ids.length) {
+      Taro.showToast({title: '请选着部门', icon: "error"})
+      return
+    }
+    Taro.setStorageSync('selectDep', ids)
+    Taro.navigateBack({delta: 1})
+  }
+
+  return (
+    <View className='px-2 bg-white'>
+      {deps.map(d => <View className='flex align-center' key={d.id} onClick={()=>onChange(d.id)}>
+        <Checkbox value={d.id + ''} checked={ids.includes(d.id)}/>
+        <PopPut
+          key={d.id}
+          title={d.name}
+          chevron
+          leftImage={folder}
+        />
+      </View>)}
+
+      <View className={'my-3'}>
+        <MyButton onClick={ok}>确定</MyButton>
+      </View>
+
+    </View>
+  )
+}
+
+export default SelectDep