feat: list模块的pinia迁移 (#323)

* feat: list模块的pinia迁移 * fix: type check error * fix: reserSelectValueMap， reserButtonValueMap 命名修正，addSpace和updateSpace 参数类型约束 --------- Co-authored-by: Ysansan <ysansan98@outlook.com>
2024-07-08 21:54:59 +08:00 · 2024-07-08 21:54:59 +08:00 · 33f18742dd
commit 33f18742dd
parent 5b96ad7c69
10 changed files with 425 additions and 103 deletions
--- 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) {
--- 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;
 }
--- 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)
--- 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;
      }
--- 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>

--- 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;
--- 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
  }
 })
--- a/web/src/management/stores/surveyList.ts
+++ 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
+  }
+}
--- a/web/src/management/stores/teamSpace.ts
+++ 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
+  }
+})
--- 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',