From 33f18742dd72b560f239210ac975b8070a3dbe1e Mon Sep 17 00:00:00 2001
From: ysansan <hippeauxie@gmail.com>
Date: Mon, 8 Jul 2024 21:54:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20list=E6=A8=A1=E5=9D=97=E7=9A=84pinia?=
 =?UTF-8?q?=E8=BF=81=E7=A7=BB=20(#323)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: list模块的pinia迁移

* fix: type check error

* fix: reserSelectValueMap， reserButtonValueMap 命名修正，addSpace和updateSpace 参数类型约束

---------

Co-authored-by: Ysansan <ysansan98@outlook.com>
---
 .../pages/create/components/CreateForm.vue    |  10 +-
 .../pages/list/components/BaseList.vue        |  45 ++---
 .../pages/list/components/MemberList.vue      |   6 +-
 .../pages/list/components/SpaceList.vue       |  25 ++-
 .../pages/list/components/SpaceModify.vue     |  48 ++---
 web/src/management/pages/list/index.vue       |  63 +++----
 web/src/management/store/index.js             |   4 +-
 web/src/management/stores/surveyList.ts       | 167 ++++++++++++++++++
 web/src/management/stores/teamSpace.ts        | 139 +++++++++++++++
 web/src/management/utils/types/workSpace.ts   |  21 ++-
 10 files changed, 425 insertions(+), 103 deletions(-)
 create mode 100644 web/src/management/stores/surveyList.ts
 create mode 100644 web/src/management/stores/teamSpace.ts

diff --git a/web/src/management/pages/create/components/CreateForm.vue b/web/src/management/pages/create/components/CreateForm.vue
index ae07eac5..614a122d 100644
--- a/web/src/management/pages/create/components/CreateForm.vue
+++ b/web/src/management/pages/create/components/CreateForm.vue
@@ -38,13 +38,11 @@
 <script setup lang="ts">
 import { ref, reactive, computed, toRefs } from 'vue'
 import { useRouter } from 'vue-router'
-import { useStore } from 'vuex'
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
-
 import { createSurvey } from '@/management/api/survey'
-
 import { SURVEY_TYPE_LIST } from '../types'
+import { useTeamSpaceStore } from '@/management/stores/teamSpace'
 
 interface Props {
   selectType?: string
@@ -54,6 +52,7 @@ const props = withDefaults(defineProps<Props>(), {
   selectType: 'normal'
 })
 
+const teamSpaceStore = useTeamSpaceStore()
 const ruleForm = ref<any>(null)
 
 const state = reactive({
@@ -79,7 +78,6 @@ const checkForm = (fn: Function) => {
 }
 
 const router = useRouter()
-const store = useStore()
 const submit = () => {
   if (!state.canSubmit) {
     return
@@ -94,8 +92,8 @@ const submit = () => {
       surveyType: selectType,
       ...state.form
     }
-    if (store.state.list.workSpaceId) {
-      payload.workspaceId = store.state.list.workSpaceId
+    if (teamSpaceStore.workSpaceId) {
+      payload.workspaceId = teamSpaceStore.workSpaceId
     }
     const res: any = await createSurvey(payload)
     if (res?.code === 200 && res?.data?.id) {
diff --git a/web/src/management/pages/list/components/BaseList.vue b/web/src/management/pages/list/components/BaseList.vue
index fa1ff189..ecc88eb5 100644
--- a/web/src/management/pages/list/components/BaseList.vue
+++ b/web/src/management/pages/list/components/BaseList.vue
@@ -105,9 +105,9 @@
 
 <script setup>
 import { ref, computed, unref } from 'vue'
-import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
 import { get, map } from 'lodash-es'
+import { storeToRefs } from 'pinia'
 
 import { ElMessage, ElMessageBox } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
@@ -123,6 +123,8 @@ import EmptyIndex from '@/management/components/EmptyIndex.vue'
 import { CODE_MAP } from '@/management/api/base'
 import { QOP_MAP } from '@/management/utils/constant.ts'
 import { deleteSurvey } from '@/management/api/survey'
+import { useTeamSpaceStore } from '@/management/stores/teamSpace'
+import { useSurveyListStore } from '@/management/stores/surveyList'
 import ModifyDialog from './ModifyDialog.vue'
 import TagModule from './TagModule.vue'
 import StateModule from './StateModule.vue'
@@ -141,7 +143,9 @@ import {
   buttonOptionsDict
 } from '@/management/config/listConfig'
 
-const store = useStore()
+const surveyListStore = useSurveyListStore()
+const teamSpaceStore = useTeamSpaceStore()
+const { workSpaceId } = storeToRefs(teamSpaceStore)
 const router = useRouter()
 const props = defineProps({
   loading: {
@@ -162,17 +166,9 @@ const fields = ['type', 'title', 'remark', 'owner', 'state', 'createDate', 'upda
 const showModify = ref(false)
 const modifyType = ref('')
 const questionInfo = ref({})
-
 const currentPage = ref(1)
-const searchVal = computed(() => {
-  return store.state.list.searchVal
-})
-const selectValueMap = computed(() => {
-  return store.state.list.selectValueMap
-})
-const buttonValueMap = computed(() => {
-  return store.state.list.buttonValueMap
-})
+const { searchVal, selectValueMap, buttonValueMap } = storeToRefs(surveyListStore)
+
 const currentComponent = computed(() => {
   return (componentName) => {
     switch (componentName) {
@@ -247,9 +243,6 @@ const order = computed(() => {
     }, [])
   return JSON.stringify(formatOrder)
 })
-const workSpaceId = computed(() => {
-  return store.state.list.workSpaceId
-})
 
 const onReflush = async () => {
   const filterString = JSON.stringify(
@@ -298,7 +291,7 @@ const getToolConfig = (row) => {
       label: '协作'
     }
   ]
-  if (!store.state.list.workSpaceId) {
+  if (!workSpaceId.value) {
     if (!row.isCollaborated) {
       // 创建人显示协作按钮
       funcList = funcList.concat(permissionsBtn)
@@ -430,19 +423,18 @@ const onRowClick = (row) => {
   })
 }
 const onSearchText = (e) => {
-  store.commit('list/setSearchVal', e)
+  searchVal.value = e
   currentPage.value = 1
   onReflush()
 }
 const onSelectChange = (selectKey, selectValue) => {
-  store.commit('list/changeSelectValueMap', { key: selectKey, value: selectValue })
-  // selectValueMap.value[selectKey] = selectValue
+  surveyListStore.changeSelectValueMap(selectKey, selectValue)
   currentPage.value = 1
   onReflush()
 }
 const onButtonChange = (effectKey, effectValue) => {
-  store.commit('list/reserButtonValueMap')
-  store.commit('list/changeButtonValueMap', { key: effectKey, value: effectValue })
+  surveyListStore.reserButtonValueMap()
+  surveyListStore.changeButtonValueMap(effectKey, effectValue)
   onReflush()
 }
 
@@ -464,16 +456,20 @@ const onCooperClose = () => {
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
+
     .select {
       display: flex;
     }
+
     .search {
       display: flex;
     }
   }
+
   .list-wrapper {
     padding: 10px 20px;
     background: #fff;
+
     .list-table {
       min-height: 620px;
     }
@@ -481,11 +477,13 @@ const onCooperClose = () => {
 
   .list-pagination {
     margin-top: 20px;
+
     :deep(.el-pagination) {
       display: flex;
       justify-content: flex-end;
     }
   }
+
   :deep(.el-table__header) {
     .tableview-header .el-table__cell {
       .cell {
@@ -495,21 +493,26 @@ const onCooperClose = () => {
       }
     }
   }
+
   :deep(.tableview-row) {
     .tableview-cell {
       padding: 5px 0;
+
       &.link {
         cursor: pointer;
       }
+
       .cell .cell-span {
         font-size: 14px;
       }
     }
   }
 }
+
 .el-select-dropdown__wrap {
   background: #eee;
 }
+
 .el-select-dropdown__item.hover {
   background: #fff;
 }
diff --git a/web/src/management/pages/list/components/MemberList.vue b/web/src/management/pages/list/components/MemberList.vue
index dedb06be..1832198c 100644
--- a/web/src/management/pages/list/components/MemberList.vue
+++ b/web/src/management/pages/list/components/MemberList.vue
@@ -16,11 +16,11 @@
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useStore } from 'vuex'
 import { type IMember, type ListItem } from '@/management/utils/types/workSpace'
 import OperationSelect from './OperationSelect.vue'
+import { useTeamSpaceStore } from '@/management/stores/teamSpace'
 
-const store = useStore()
+const teamSpaceStore = useTeamSpaceStore()
 const props = withDefaults(
   defineProps<{
     members: IMember[]
@@ -43,7 +43,7 @@ const list = computed({
   }
 })
 const currentUserId = computed(() => {
-  return store.state.list.spaceDetail?.currentUserId
+  return teamSpaceStore.spaceDetail?.currentUserId
 })
 const handleRemove = (index: number) => {
   list.value.splice(index, 1)
diff --git a/web/src/management/pages/list/components/SpaceList.vue b/web/src/management/pages/list/components/SpaceList.vue
index a9237e96..07d8c987 100644
--- a/web/src/management/pages/list/components/SpaceList.vue
+++ b/web/src/management/pages/list/components/SpaceList.vue
@@ -71,17 +71,17 @@
 </template>
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
-import { useStore } from 'vuex'
 import { ElMessageBox } from 'element-plus'
 import 'element-plus/theme-chalk/src/message-box.scss'
 import { get, map } from 'lodash-es'
 import { spaceListConfig } from '@/management/config/listConfig'
 import SpaceModify from './SpaceModify.vue'
 import { UserRole } from '@/management/utils/types/workSpace'
+import { useTeamSpaceStore } from '@/management/stores/teamSpace'
 
 const showSpaceModify = ref(false)
 const modifyType = ref('edit')
-const store = useStore()
+const teamSpaceStore = useTeamSpaceStore()
 const fields = ['name', 'surveyTotal', 'memberTotal', 'owner', 'createDate']
 const fieldList = computed(() => {
   return map(fields, (f) => {
@@ -89,17 +89,17 @@ const fieldList = computed(() => {
   })
 })
 const dataList = computed(() => {
-  return store.state.list.teamSpaceList
+  return teamSpaceStore.teamSpaceList
 })
 const isAdmin = (id: string) => {
   return (
-    store.state.list.teamSpaceList.find((item: any) => item._id === id)?.currentUserRole ===
+    teamSpaceStore.teamSpaceList.find((item: any) => item._id === id)?.currentUserRole ===
     UserRole.Admin
   )
 }
 
 const handleModify = async (id: string) => {
-  await store.dispatch('list/getSpaceDetail', id)
+  await teamSpaceStore.getSpaceDetail(id)
   modifyType.value = 'edit'
   showSpaceModify.value = true
 }
@@ -115,15 +115,17 @@ const handleDelete = (id: string) => {
     }
   )
     .then(async () => {
-      await store.dispatch('list/deleteSpace', id)
-      await store.dispatch('list/getSpaceList')
+      await teamSpaceStore.deleteSpace(id)
+      await teamSpaceStore.getSpaceList()
     })
     .catch(() => {})
 }
+
 const onCloseModify = () => {
   showSpaceModify.value = false
-  store.dispatch('list/getSpaceList')
+  teamSpaceStore.getSpaceList()
 }
+
 // const handleCurrentChange = (current) => {
 //   this.currentPage = current
 //   this.init()
@@ -133,6 +135,7 @@ const onCloseModify = () => {
 .list-wrap {
   padding: 20px;
   background: #fff;
+
   .list-table {
     :deep(.el-table__header) {
       .tableview-header .el-table__cell {
@@ -143,22 +146,28 @@ const onCloseModify = () => {
         }
       }
     }
+
     :deep(.tableview-row) {
       .tableview-cell {
         padding: 5px 0;
+
         &.link {
           cursor: pointer;
         }
+
         .cell .cell-span {
           font-size: 14px;
         }
       }
     }
+
     .tool-root {
       display: flex;
+
       &:first-child {
         margin-left: -10px;
       }
+
       .tool-root-btn-text {
         font-weight: normal !important;
       }
diff --git a/web/src/management/pages/list/components/SpaceModify.vue b/web/src/management/pages/list/components/SpaceModify.vue
index 668fd038..f32465b4 100644
--- a/web/src/management/pages/list/components/SpaceModify.vue
+++ b/web/src/management/pages/list/components/SpaceModify.vue
@@ -1,21 +1,7 @@
 <template>
-  <el-dialog
-    class="base-dialog-root"
-    :model-value="visible"
-    width="40%"
-    :title="formTitle"
-    @close="onClose"
-  >
-    <el-form
-      class="base-form-root"
-      ref="ruleForm"
-      :model="formModel"
-      :rules="rules"
-      label-position="top"
-      size="large"
-      @submit.prevent
-      :disabled="formDisabled"
-    >
+  <el-dialog class="base-dialog-root" :model-value="visible" width="40%" :title="formTitle" @close="onClose">
+    <el-form class="base-form-root" ref="ruleForm" :model="formModel" :rules="rules" label-position="top" size="large"
+      @submit.prevent :disabled="formDisabled">
       <el-form-item label="团队空间名称" prop="name">
         <el-input v-model="formModel.name" />
       </el-form-item>
@@ -23,11 +9,7 @@
         <el-input v-model="formModel.description" />
       </el-form-item>
       <el-form-item label="添加成员" prop="members">
-        <MemberSelect
-          :members="formModel.members"
-          @select="handleMemberSelect"
-          @change="handleMembersChange"
-        />
+        <MemberSelect :members="formModel.members" @select="handleMemberSelect" @change="handleMembersChange" />
       </el-form-item>
     </el-form>
 
@@ -44,15 +26,15 @@
 
 <script lang="ts" setup>
 import { computed, ref, shallowRef, onMounted } from 'vue'
-import { useStore } from 'vuex'
 import { pick as _pick } from 'lodash-es'
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
 import { QOP_MAP } from '@/management/utils/constant'
 import MemberSelect from './MemberSelect.vue'
 import { type IMember, type IWorkspace, UserRole } from '@/management/utils/types/workSpace'
+import { useTeamSpaceStore } from '@/management/stores/teamSpace'
 
-const store = useStore()
+const teamSpaceStore = useTeamSpaceStore()
 const emit = defineEmits(['on-close-codify', 'onFocus', 'change', 'blur'])
 const props = defineProps({
   type: String,
@@ -64,7 +46,8 @@ const ruleForm = shallowRef<any>(null)
 const formTitle = computed(() => {
   return props.type === QOP_MAP.ADD ? '创建团队空间' : '管理团队空间'
 })
-const formModel = ref<IWorkspace>({
+const formModel = ref<Required<IWorkspace>>({
+  _id: '',
   name: '',
   description: '',
   members: [] as IMember[]
@@ -86,28 +69,29 @@ const rules = {
   ]
 }
 const spaceDetail = computed(() => {
-  return store.state.list.spaceDetail
+  return teamSpaceStore.spaceDetail
 })
 const formDisabled = computed(() => {
   return spaceDetail.value?._id
-    ? store.state.list.teamSpaceList.find((item: any) => item._id === spaceDetail.value._id)
-        .currentUserRole !== UserRole.Admin
+    ? teamSpaceStore.teamSpaceList.find((item: any) => item._id === spaceDetail.value?._id)
+        ?.currentUserRole !== UserRole.Admin
     : false
 })
 
 onMounted(() => {
   if (props.type === QOP_MAP.EDIT) {
-    formModel.value = _pick(spaceDetail.value, ['_id', 'name', 'description', 'members'])
+    formModel.value = _pick(spaceDetail.value as any, ['_id', 'name', 'description', 'members'])
   }
 })
 const onClose = () => {
   formModel.value = {
+    _id: '',
     name: '',
     description: '',
     members: [] as IMember[]
   }
   // 清空空间详情
-  store.commit('list/setSpaceDetail', null)
+  teamSpaceStore.setSpaceDetail(null)
   emit('on-close-codify')
 }
 
@@ -142,10 +126,10 @@ const handleMembersChange = (val: IMember[]) => {
   formModel.value.members = val
 }
 const handleUpdate = async () => {
-  await store.dispatch('list/updateSpace', formModel.value)
+  await teamSpaceStore.updateSpace(formModel.value)
 }
 const handleAdd = async () => {
-  await store.dispatch('list/addSpace', formModel.value)
+  await teamSpaceStore.addSpace(formModel.value)
 }
 </script>
 
diff --git a/web/src/management/pages/list/index.vue b/web/src/management/pages/list/index.vue
index 4b2cc0ee..33b4a069 100644
--- a/web/src/management/pages/list/index.vue
+++ b/web/src/management/pages/list/index.vue
@@ -60,60 +60,52 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
+import { storeToRefs } from 'pinia'
 import BaseList from './components/BaseList.vue'
 import SpaceList from './components/SpaceList.vue'
 import SliderBar from './components/SliderBar.vue'
 import SpaceModify from './components/SpaceModify.vue'
 import { SpaceType } from '@/management/utils/types/workSpace'
 import { useUserStore } from '@/management/stores/user'
-const store = useStore()
+import { useTeamSpaceStore } from '@/management/stores/teamSpace'
+import { useSurveyListStore } from '@/management/stores/surveyList'
+
 const userStore = useUserStore()
+const teamSpaceStore = useTeamSpaceStore()
+const surveyListStore = useSurveyListStore()
+
+const { surveyList, surveyTotal } = storeToRefs(surveyListStore)
+const { spaceMenus, workSpaceId, spaceType } = storeToRefs(teamSpaceStore)
 const router = useRouter()
 const userInfo = computed(() => {
   return userStore.userInfo
 })
-const loading = ref(false)
-const surveyList = computed(() => {
-  return store.state.list.surveyList
-})
-const surveyTotal = computed(() => {
-  return store.state.list.surveyTotal
-})
-const activeIndex = ref('1')
 
-const spaceMenus = computed(() => {
-  return store.state.list.spaceMenus
-})
-const workSpaceId = computed(() => {
-  return store.state.list.workSpaceId
-})
-const spaceType = computed(() => {
-  return store.state.list.spaceType
-})
+const loading = ref(false)
+const activeIndex = ref('1')
 const handleSpaceSelect = (id: any) => {
   if (id === SpaceType.Personal) {
     // 点击个人空间菜单
-    if (store.state.list.spaceType === SpaceType.Personal) {
+    if (teamSpaceStore.spaceType === SpaceType.Personal) {
       return
     }
-    store.commit('list/changeSpaceType', SpaceType.Personal)
-    store.commit('list/changeWorkSpace', '')
+    teamSpaceStore.changeSpaceType(SpaceType.Personal)
+    teamSpaceStore.changeWorkSpace('')
   } else if (id === SpaceType.Group) {
     // 点击团队空间组菜单
-    if (store.state.list.spaceType === SpaceType.Group) {
+    if (teamSpaceStore.spaceType === SpaceType.Group) {
       return
     }
-    store.commit('list/changeSpaceType', SpaceType.Group)
-    store.commit('list/changeWorkSpace', '')
+    teamSpaceStore.changeSpaceType(SpaceType.Group)
+    teamSpaceStore.changeWorkSpace('')
   } else if (!Object.values(SpaceType).includes(id)) {
     // 点击具体团队空间
-    if (store.state.list.workSpaceId === id) {
+    if (teamSpaceStore.workSpaceId === id) {
       return
     }
-    store.commit('list/changeSpaceType', SpaceType.Teamwork)
-    store.commit('list/changeWorkSpace', id)
+    teamSpaceStore.changeSpaceType(SpaceType.Teamwork)
+    teamSpaceStore.changeWorkSpace(id)
   }
 
   fetchSurveyList()
@@ -123,7 +115,7 @@ onMounted(() => {
   fetchSurveyList()
 })
 const fetchSpaceList = () => {
-  store.dispatch('list/getSpaceList')
+  teamSpaceStore.getSpaceList()
 }
 const fetchSurveyList = async (params?: any) => {
   if (!params) {
@@ -136,7 +128,7 @@ const fetchSurveyList = async (params?: any) => {
     params.workspaceId = workSpaceId.value
   }
   loading.value = true
-  await store.dispatch('list/getSurveyList', params)
+  await surveyListStore.getSurveyList(params)
   loading.value = false
 }
 const modifyType = ref('add')
@@ -172,27 +164,33 @@ const handleLogout = () => {
     justify-content: space-between;
     align-items: center;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
+
     .left {
       display: flex;
       align-items: center;
       width: calc(100% - 200px);
+
       .logo-img {
         width: 90px;
         height: fit-content;
         padding-right: 20px;
       }
+
       .el-menu {
         width: 100%;
         height: 56px;
         border: none !important;
+
         :deep(.el-menu-item, .is-active) {
           border: none !important;
         }
       }
     }
+
     .login-info {
       display: flex;
       align-items: center;
+
       .login-info-img {
         margin-left: 10px;
         height: 30px;
@@ -209,10 +207,12 @@ const handleLogout = () => {
       color: #faa600;
     }
   }
+
   .content-wrap {
     position: relative;
     height: calc(100% - 56px);
   }
+
   .list-content {
     position: relative;
     height: 100%;
@@ -227,6 +227,7 @@ const handleLogout = () => {
       justify-content: space-between;
       align-items: center;
       margin-bottom: 24px;
+
       .operation {
         flex: 0 1 auto;
         display: flex;
@@ -239,9 +240,11 @@ const handleLogout = () => {
       .create-btn {
         background: #4a4c5b;
       }
+
       .space-btn {
         background: $primary-color;
       }
+
       .btn {
         width: 132px;
         height: 32px;
diff --git a/web/src/management/store/index.js b/web/src/management/store/index.js
index f297afed..7d8eb427 100644
--- a/web/src/management/store/index.js
+++ b/web/src/management/store/index.js
@@ -1,7 +1,7 @@
 import { createStore } from 'vuex'
 import edit from './edit'
 // import user from './user'
-import list from './list'
+// import list from './list'
 import actions from './actions'
 import mutations from './mutations'
 import state from './state'
@@ -14,6 +14,6 @@ export default createStore({
   modules: {
     edit,
     // user,
-    list
+    // list
   }
 })
diff --git a/web/src/management/stores/surveyList.ts b/web/src/management/stores/surveyList.ts
new file mode 100644
index 00000000..35d5d19e
--- /dev/null
+++ b/web/src/management/stores/surveyList.ts
@@ -0,0 +1,167 @@
+import { CODE_MAP } from '@/management/api/base'
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+import { getSurveyList as getSurveyListReq } from '@/management/api/survey'
+import { defineStore } from 'pinia'
+import { useTeamSpaceStore } from './teamSpace'
+import { ref, computed } from 'vue'
+
+export const useSurveyListStore = defineStore('surveyList', () => {
+  const surveyList = ref([])
+  const surveyTotal = ref(0)
+
+  const {
+    searchVal,
+    selectValueMap,
+    buttonValueMap,
+    listFilter,
+    listOrder,
+    resetSearch,
+    resetSelectValueMap,
+    resetButtonValueMap,
+    changeSelectValueMap,
+    changeButtonValueMap
+  } = useSearchSurvey()
+
+  const teamSpaceStore = useTeamSpaceStore()
+  async function getSurveyList(payload: { curPage?: number; pageSize?: number }) {
+    const filterString = JSON.stringify(
+      listFilter.value.filter((item) => {
+        return item.condition[0].value
+      })
+    )
+    const orderString = JSON.stringify(listOrder.value)
+    try {
+      const params = {
+        curPage: payload?.curPage || 1,
+        pageSize: payload?.pageSize || 10, // 默认一页10条
+        filter: filterString,
+        order: orderString,
+        workspaceId: teamSpaceStore.workSpaceId
+      }
+
+      const res: any = await getSurveyListReq(params)
+      if (res.code === CODE_MAP.SUCCESS) {
+        surveyList.value = res.data.data
+        surveyTotal.value = res.data.count
+      } else {
+        ElMessage.error(res.errmsg)
+      }
+    } catch (error) {
+      ElMessage.error('getSurveyList status' + error)
+    }
+  }
+
+  return {
+    surveyList,
+    surveyTotal,
+    searchVal,
+    selectValueMap,
+    buttonValueMap,
+    listFliter: listFilter,
+    listOrder,
+    resetSearch,
+    getSurveyList,
+    resetSelectValueMap,
+    resetButtonValueMap,
+    changeSelectValueMap,
+    changeButtonValueMap
+  }
+})
+
+function useSearchSurvey() {
+  const searchVal = ref('')
+  const selectValueMap = ref<Record<string, any>>({
+    surveyType: '',
+    'curStatus.status': ''
+  })
+
+  const buttonValueMap = ref<Record<string, any>>({
+    'curStatus.date': '',
+    createDate: -1
+  })
+
+  const listFilter = computed(() => {
+    return [
+      {
+        comparator: '',
+        condition: [
+          {
+            field: 'title',
+            value: searchVal.value,
+            comparator: '$regex'
+          }
+        ]
+      },
+      {
+        comparator: '',
+        condition: [
+          {
+            field: 'curStatus.status',
+            value: selectValueMap.value['curStatus.status']
+          }
+        ]
+      },
+      {
+        comparator: '',
+        condition: [
+          {
+            field: 'surveyType',
+            value: selectValueMap.value.surveyType
+          }
+        ]
+      }
+    ]
+  })
+
+  const listOrder = computed(() => {
+    return Object.entries(buttonValueMap.value)
+      .filter(([, effectValue]) => effectValue)
+      .reduce((prev: { field: string, value: string | number }[], item) => {
+        const [effectKey, effectValue] = item
+        prev.push({ field: effectKey, value: effectValue })
+        return prev
+      }, [])
+  })
+
+  function resetSelectValueMap() {
+    selectValueMap.value = {
+      surveyType: '',
+      'curStatus.status': ''
+    }
+  }
+
+  function resetButtonValueMap() {
+    buttonValueMap.value = {
+      'curStatus.date': '',
+      createDate: -1
+    }
+  }
+
+  function changeSelectValueMap(key: string, value: string | number) {
+    selectValueMap.value[key] = value
+  }
+
+  function changeButtonValueMap(key: string, value: string | number) {
+    buttonValueMap.value[key] = value
+  }
+
+  function resetSearch() {
+    searchVal.value = ''
+    resetSelectValueMap()
+    resetButtonValueMap()
+  }
+
+  return {
+    searchVal,
+    selectValueMap,
+    buttonValueMap,
+    listFilter,
+    listOrder,
+    resetSearch,
+    resetSelectValueMap,
+    resetButtonValueMap,
+    changeSelectValueMap,
+    changeButtonValueMap
+  }
+}
diff --git a/web/src/management/stores/teamSpace.ts b/web/src/management/stores/teamSpace.ts
new file mode 100644
index 00000000..d0902c7a
--- /dev/null
+++ b/web/src/management/stores/teamSpace.ts
@@ -0,0 +1,139 @@
+import {
+  createSpace,
+  updateSpace as updateSpaceReq,
+  deleteSpace as deleteSpaceReq,
+  getSpaceList as getSpaceListReq,
+  getSpaceDetail as getSpaceDetailReq
+} from '@/management/api/space'
+import { CODE_MAP } from '@/management/api/base'
+import { SpaceType } from '@/management/utils/types/workSpace'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useSurveyListStore } from './surveyList'
+import { type SpaceDetail, type SpaceItem, type IWorkspace } from '@/management/utils/types/workSpace'
+
+
+export const useTeamSpaceStore = defineStore('teamSpace', () => {
+  // list空间
+  const spaceMenus = ref([
+    {
+      icon: 'icon-wodekongjian',
+      name: '我的空间',
+      id: SpaceType.Personal
+    },
+    {
+      icon: 'icon-tuanduikongjian',
+      name: '团队空间',
+      id: SpaceType.Group,
+      children: []
+    }
+  ])
+  const spaceType = ref(SpaceType.Personal)
+  const workSpaceId = ref('')
+  const spaceDetail = ref<SpaceDetail | null>(null)
+  const teamSpaceList = ref<SpaceItem[]>([])
+
+  const surveyListStore = useSurveyListStore()
+
+  async function getSpaceList() {
+    try {
+      const res: any = await getSpaceListReq()
+
+      if (res.code === CODE_MAP.SUCCESS) {
+        const { list } = res.data
+        const teamSpace = list.map((item: SpaceDetail) => {
+          return {
+            id: item._id,
+            name: item.name
+          }
+        })
+        teamSpaceList.value = list
+        spaceMenus.value[1].children = teamSpace
+      } else {
+        ElMessage.error('getSpaceList' + res.errmsg)
+      }
+    } catch (err) {
+      ElMessage.error('getSpaceList' + err)
+    }
+  }
+
+  async function getSpaceDetail(id: string) {
+    try {
+      const _id = id || workSpaceId.value
+      const res: any = await getSpaceDetailReq(_id)
+      if (res.code === CODE_MAP.SUCCESS) {
+        spaceDetail.value = res.data
+      } else {
+        ElMessage.error('getSpaceList' + res.errmsg)
+      }
+    } catch (err) {
+      ElMessage.error('getSpaceList' + err)
+    }
+  }
+
+  function changeSpaceType(id: SpaceType) {
+    spaceType.value = id
+  }
+
+  function changeWorkSpace(id: string) {
+    workSpaceId.value = id
+    surveyListStore.resetSearch()
+  }
+
+  async function deleteSpace(id: string) {
+    try {
+      const res: any = await deleteSpaceReq(id)
+
+      if (res.code === CODE_MAP.SUCCESS) {
+        ElMessage.success('删除成功')
+      } else {
+        ElMessage.error(res.errmsg)
+      }
+    } catch (err: any) {
+      ElMessage.error(err)
+    }
+  }
+
+  async function updateSpace(params: Required<IWorkspace>) {
+    const { _id: workspaceId, name, description, members } = params
+    const res: any = await updateSpaceReq({ workspaceId, name, description, members })
+
+    if (res?.code === CODE_MAP.SUCCESS) {
+      ElMessage.success('更新成功')
+    } else {
+      ElMessage.error(res?.errmsg)
+    }
+  }
+
+  async function addSpace(params: IWorkspace) {
+    const { name, description, members } = params
+    const res: any = await createSpace({ name, description, members })
+
+    if (res.code === CODE_MAP.SUCCESS) {
+      ElMessage.success('添加成功')
+    } else {
+      ElMessage.error('createSpace  code err' + res.errmsg)
+    }
+  }
+
+  function setSpaceDetail(data: null | SpaceDetail) {
+    spaceDetail.value = data
+  }
+
+  return {
+    spaceMenus,
+    spaceType,
+    workSpaceId,
+    spaceDetail,
+    teamSpaceList,
+    getSpaceList,
+    getSpaceDetail,
+    changeSpaceType,
+    changeWorkSpace,
+    addSpace,
+    deleteSpace,
+    updateSpace,
+    setSpaceDetail
+  }
+})
diff --git a/web/src/management/utils/types/workSpace.ts b/web/src/management/utils/types/workSpace.ts
index e6ca90d7..00be8b4e 100644
--- a/web/src/management/utils/types/workSpace.ts
+++ b/web/src/management/utils/types/workSpace.ts
@@ -11,11 +11,12 @@ export interface MenuItem {
 }
 
 export type IWorkspace = {
-  id?: string
+  _id?: string
   name: string
   description: string
   members: IMember[]
 }
+
 export type IMember = {
   userId: string
   username: string
@@ -23,6 +24,24 @@ export type IMember = {
   _id?: string
 }
 
+export interface SpaceDetail {
+  _id?: string
+  name: string
+  currentUserId?: string
+  description: string
+  members: IMember[]
+}
+
+export type SpaceItem = Required<Omit<SpaceDetail, 'members'>> & {
+  createDate: string
+  curStatus: { date: number, status: string }
+  memberTotal: number
+  currentUserRole: string
+  owner: string
+  ownerId: string
+  surveyTotal: number
+}
+
 export enum SpaceType {
   Personal = 'personal',
   Group = 'group',