feat: list模块优化

2024-07-09 11:36:18 +08:00 · 2024-07-09 11:36:18 +08:00 · 64a1caf0dd
commit 64a1caf0dd
parent 33f18742dd
9 changed files with 162 additions and 136 deletions
--- a/web/src/management/pages/create/components/CreateForm.vue
+++ b/web/src/management/pages/create/components/CreateForm.vue
@ -42,7 +42,7 @@ 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'
+import { useWorkSpaceStore } from '@/management/stores/workSpace'

 interface Props {
  selectType?: string
@ -52,7 +52,7 @@ const props = withDefaults(defineProps<Props>(), {
  selectType: 'normal'
 })

-const teamSpaceStore = useTeamSpaceStore()
+const workSpaceStore = useWorkSpaceStore()
 const ruleForm = ref<any>(null)

 const state = reactive({
@ -92,8 +92,8 @@ const submit = () => {
      surveyType: selectType,
      ...state.form
    }
-    if (teamSpaceStore.workSpaceId) {
-      payload.workspaceId = teamSpaceStore.workSpaceId
+    if (workSpaceStore.workSpaceId) {
+      payload.workspaceId = workSpaceStore.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
@ -123,7 +123,7 @@ 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 { useWorkSpaceStore } from '@/management/stores/workSpace'
 import { useSurveyListStore } from '@/management/stores/surveyList'
 import ModifyDialog from './ModifyDialog.vue'
 import TagModule from './TagModule.vue'
@ -144,8 +144,8 @@ import {
 } from '@/management/config/listConfig'

 const surveyListStore = useSurveyListStore()
-const teamSpaceStore = useTeamSpaceStore()
-const { workSpaceId } = storeToRefs(teamSpaceStore)
+const workSpaceStore = useWorkSpaceStore()
+const { workSpaceId } = storeToRefs(workSpaceStore)
 const router = useRouter()
 const props = defineProps({
  loading: {
@ -433,7 +433,7 @@ const onSelectChange = (selectKey, selectValue) => {
  onReflush()
 }
 const onButtonChange = (effectKey, effectValue) => {
-  surveyListStore.reserButtonValueMap()
+  surveyListStore.resetButtonValueMap()
  surveyListStore.changeButtonValueMap(effectKey, effectValue)
  onReflush()
 }
--- a/web/src/management/pages/list/components/MemberList.vue
+++ b/web/src/management/pages/list/components/MemberList.vue
@ -18,9 +18,9 @@
 import { computed } from 'vue'
 import { type IMember, type ListItem } from '@/management/utils/types/workSpace'
 import OperationSelect from './OperationSelect.vue'
-import { useTeamSpaceStore } from '@/management/stores/teamSpace'
+import { useWorkSpaceStore } from '@/management/stores/workSpace'

-const teamSpaceStore = useTeamSpaceStore()
+const workSpaceStore = useWorkSpaceStore()
 const props = withDefaults(
  defineProps<{
    members: IMember[]
@ -43,7 +43,7 @@ const list = computed({
  }
 })
 const currentUserId = computed(() => {
-  return teamSpaceStore.spaceDetail?.currentUserId
+  return workSpaceStore.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
@ -77,11 +77,11 @@ 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'
+import { useWorkSpaceStore } from '@/management/stores/workSpace'

 const showSpaceModify = ref(false)
 const modifyType = ref('edit')
-const teamSpaceStore = useTeamSpaceStore()
+const workSpaceStore = useWorkSpaceStore()
 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 teamSpaceStore.teamSpaceList
+  return workSpaceStore.workSpaceList
 })
 const isAdmin = (id: string) => {
  return (
-    teamSpaceStore.teamSpaceList.find((item: any) => item._id === id)?.currentUserRole ===
+    workSpaceStore.workSpaceList.find((item: any) => item._id === id)?.currentUserRole ===
    UserRole.Admin
  )
 }

 const handleModify = async (id: string) => {
-  await teamSpaceStore.getSpaceDetail(id)
+  await workSpaceStore.getSpaceDetail(id)
  modifyType.value = 'edit'
  showSpaceModify.value = true
 }
@ -115,15 +115,15 @@ const handleDelete = (id: string) => {
    }
  )
    .then(async () => {
-      await teamSpaceStore.deleteSpace(id)
-      await teamSpaceStore.getSpaceList()
+      await workSpaceStore.deleteSpace(id)
+      await workSpaceStore.getSpaceList()
    })
    .catch(() => {})
 }

 const onCloseModify = () => {
  showSpaceModify.value = false
-  teamSpaceStore.getSpaceList()
+  workSpaceStore.getSpaceList()
 }

 // const handleCurrentChange = (current) => {
--- a/web/src/management/pages/list/components/SpaceModify.vue
+++ b/web/src/management/pages/list/components/SpaceModify.vue
@ -1,7 +1,21 @@
 <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>
@ -9,7 +23,11 @@
        <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>

@ -32,9 +50,9 @@ 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'
+import { useWorkSpaceStore } from '@/management/stores/workSpace'

-const teamSpaceStore = useTeamSpaceStore()
+const workSpaceStore = useWorkSpaceStore()
 const emit = defineEmits(['on-close-codify', 'onFocus', 'change', 'blur'])
 const props = defineProps({
  type: String,
@ -69,11 +87,11 @@ const rules = {
  ]
 }
 const spaceDetail = computed(() => {
-  return teamSpaceStore.spaceDetail
+  return workSpaceStore.spaceDetail
 })
 const formDisabled = computed(() => {
  return spaceDetail.value?._id
-    ? teamSpaceStore.teamSpaceList.find((item: any) => item._id === spaceDetail.value?._id)
+    ? workSpaceStore.workSpaceList.find((item: any) => item._id === spaceDetail.value?._id)
        ?.currentUserRole !== UserRole.Admin
    : false
 })
@ -91,7 +109,7 @@ const onClose = () => {
    members: [] as IMember[]
  }
  // 清空空间详情
-  teamSpaceStore.setSpaceDetail(null)
+  workSpaceStore.setSpaceDetail(null)
  emit('on-close-codify')
 }

@ -126,10 +144,10 @@ const handleMembersChange = (val: IMember[]) => {
  formModel.value.members = val
 }
 const handleUpdate = async () => {
-  await teamSpaceStore.updateSpace(formModel.value)
+  await workSpaceStore.updateSpace(formModel.value)
 }
 const handleAdd = async () => {
-  await teamSpaceStore.addSpace(formModel.value)
+  await workSpaceStore.addSpace(formModel.value)
 }
 </script>

--- a/web/src/management/pages/list/index.vue
+++ b/web/src/management/pages/list/index.vue
@ -68,15 +68,15 @@ 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'
-import { useTeamSpaceStore } from '@/management/stores/teamSpace'
+import { useWorkSpaceStore } from '@/management/stores/workSpace'
 import { useSurveyListStore } from '@/management/stores/surveyList'

 const userStore = useUserStore()
-const teamSpaceStore = useTeamSpaceStore()
+const workSpaceStore = useWorkSpaceStore()
 const surveyListStore = useSurveyListStore()

 const { surveyList, surveyTotal } = storeToRefs(surveyListStore)
-const { spaceMenus, workSpaceId, spaceType } = storeToRefs(teamSpaceStore)
+const { spaceMenus, workSpaceId, spaceType } = storeToRefs(workSpaceStore)
 const router = useRouter()
 const userInfo = computed(() => {
  return userStore.userInfo
@ -87,25 +87,25 @@ const activeIndex = ref('1')
 const handleSpaceSelect = (id: any) => {
  if (id === SpaceType.Personal) {
    // 点击个人空间菜单
-    if (teamSpaceStore.spaceType === SpaceType.Personal) {
+    if (workSpaceStore.spaceType === SpaceType.Personal) {
      return
    }
-    teamSpaceStore.changeSpaceType(SpaceType.Personal)
-    teamSpaceStore.changeWorkSpace('')
+    workSpaceStore.changeSpaceType(SpaceType.Personal)
+    workSpaceStore.changeWorkSpace('')
  } else if (id === SpaceType.Group) {
    // 点击团队空间组菜单
-    if (teamSpaceStore.spaceType === SpaceType.Group) {
+    if (workSpaceStore.spaceType === SpaceType.Group) {
      return
    }
-    teamSpaceStore.changeSpaceType(SpaceType.Group)
-    teamSpaceStore.changeWorkSpace('')
+    workSpaceStore.changeSpaceType(SpaceType.Group)
+    workSpaceStore.changeWorkSpace('')
  } else if (!Object.values(SpaceType).includes(id)) {
    // 点击具体团队空间
-    if (teamSpaceStore.workSpaceId === id) {
+    if (workSpaceStore.workSpaceId === id) {
      return
    }
-    teamSpaceStore.changeSpaceType(SpaceType.Teamwork)
-    teamSpaceStore.changeWorkSpace(id)
+    workSpaceStore.changeSpaceType(SpaceType.Teamwork)
+    workSpaceStore.changeWorkSpace(id)
  }

  fetchSurveyList()
@ -115,7 +115,7 @@ onMounted(() => {
  fetchSurveyList()
 })
 const fetchSpaceList = () => {
-  teamSpaceStore.getSpaceList()
+  workSpaceStore.getSpaceList()
 }
 const fetchSurveyList = async (params?: any) => {
  if (!params) {
--- a/web/src/management/store/list/index.js
+++ b/web/src/management/store/list/index.js
@ -37,7 +37,7 @@ export default {
    spaceType: SpaceType.Personal,
    workSpaceId: '',
    spaceDetail: null,
-    teamSpaceList: [],
+    workSpaceList: [],
    // 列表管理
    surveyList: [],
    surveyTotal: 0,
@ -52,7 +52,7 @@ export default {
    }
  },
  getters: {
-    listFliter(state) {
+    listFilter(state) {
      return [
        {
          comparator: '',
@ -96,25 +96,25 @@ export default {
    }
  },
  mutations: {
-    updateSpaceMenus(state, teamSpace) {
+    updateSpaceMenus(state, workSpace) {
      // 更新空间列表下的团队空间
-      set(state, 'spaceMenus[1].children', teamSpace)
+      set(state, 'spaceMenus[1].children', workSpace)
    },
    changeSpaceType(state, spaceType) {
      state.spaceType = spaceType
    },
    changeWorkSpace(state, workSpaceId) {
      // 切换空间清除筛选条件
-      this.commit('list/reserSelectValueMap')
-      this.commit('list/reserButtonValueMap')
+      this.commit('list/resetSelectValueMap')
+      this.commit('list/resetButtonValueMap')
      this.commit('list/setSearchVal', '')
      state.workSpaceId = workSpaceId
    },
    setSpaceDetail(state, data) {
      state.spaceDetail = data
    },
-    setTeamSpaceList(state, data) {
-      state.teamSpaceList = data
+    setWorkSpaceList(state, data) {
+      state.workSpaceList = data
    },
    setSurveyList(state, list) {
      state.surveyList = list
@ -125,7 +125,7 @@ export default {
    setSearchVal(state, data) {
      state.searchVal = data
    },
-    reserSelectValueMap(state) {
+    resetSelectValueMap(state) {
      state.selectValueMap = {
        surveyType: '',
        'curStatus.status': ''
@ -134,7 +134,7 @@ export default {
    changeSelectValueMap(state, { key, value }) {
      state.selectValueMap[key] = value
    },
-    reserButtonValueMap(state) {
+    resetButtonValueMap(state) {
      state.buttonValueMap = {
        'curStatus.date': '',
        createDate: -1
@ -151,14 +151,14 @@ export default {

        if (res.code === CODE_MAP.SUCCESS) {
          const { list } = res.data
-          const teamSpace = list.map((item) => {
+          const workSpace = list.map((item) => {
            return {
              id: item._id,
              name: item.name
            }
          })
-          commit('setTeamSpaceList', list)
-          commit('updateSpaceMenus', teamSpace)
+          commit('setWorkSpaceList', list)
+          commit('updateSpaceMenus', workSpace)
        } else {
          ElMessage.error('getSpaceList' + res.errmsg)
        }
@ -221,7 +221,7 @@ export default {
    },
    async getSurveyList({ state, getters, commit }, payload) {
      const filterString = JSON.stringify(
-        getters.listFliter.filter((item) => {
+        getters.listFilter.filter((item) => {
          return item.condition[0].value
        })
      )
--- a/web/src/management/stores/surveyList.ts
+++ b/web/src/management/stores/surveyList.ts
@ -1,74 +1,13 @@
-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 { CODE_MAP } from '@/management/api/base'
+import { getSurveyList as getSurveyListReq } from '@/management/api/survey'
+
+import { useWorkSpaceStore } from './workSpace'
 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>>({
@ -117,7 +56,7 @@ function useSearchSurvey() {
  const listOrder = computed(() => {
    return Object.entries(buttonValueMap.value)
      .filter(([, effectValue]) => effectValue)
-      .reduce((prev: { field: string, value: string | number }[], item) => {
+      .reduce((prev: { field: string; value: string | number }[], item) => {
        const [effectKey, effectValue] = item
        prev.push({ field: effectKey, value: effectValue })
        return prev
@ -165,3 +104,66 @@ function useSearchSurvey() {
    changeButtonValueMap
  }
 }
+
+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 workSpaceStore = useWorkSpaceStore()
+  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: workSpaceStore.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,
+    listFilter: listFilter,
+    listOrder,
+    resetSearch,
+    getSurveyList,
+    resetSelectValueMap,
+    resetButtonValueMap,
+    changeSelectValueMap,
+    changeButtonValueMap
+  }
+})
--- a/web/src/management/stores/workSpace.ts
+++ b/web/src/management/stores/workSpace.ts
@ -1,3 +1,9 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+
+import { CODE_MAP } from '@/management/api/base'
 import {
  createSpace,
  updateSpace as updateSpaceReq,
@ -5,16 +11,16 @@ import {
  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 {
+  type SpaceDetail,
+  type SpaceItem,
+  type IWorkspace
+} from '@/management/utils/types/workSpace'
+
 import { useSurveyListStore } from './surveyList'
-import { type SpaceDetail, type SpaceItem, type IWorkspace } from '@/management/utils/types/workSpace'

-
-export const useTeamSpaceStore = defineStore('teamSpace', () => {
+export const useWorkSpaceStore = defineStore('workSpace', () => {
  // list空间
  const spaceMenus = ref([
    {
@ -32,7 +38,7 @@ export const useTeamSpaceStore = defineStore('teamSpace', () => {
  const spaceType = ref(SpaceType.Personal)
  const workSpaceId = ref('')
  const spaceDetail = ref<SpaceDetail | null>(null)
-  const teamSpaceList = ref<SpaceItem[]>([])
+  const workSpaceList = ref<SpaceItem[]>([])

  const surveyListStore = useSurveyListStore()

@ -42,14 +48,14 @@ export const useTeamSpaceStore = defineStore('teamSpace', () => {

      if (res.code === CODE_MAP.SUCCESS) {
        const { list } = res.data
-        const teamSpace = list.map((item: SpaceDetail) => {
+        const workSpace = list.map((item: SpaceDetail) => {
          return {
            id: item._id,
            name: item.name
          }
        })
-        teamSpaceList.value = list
-        spaceMenus.value[1].children = teamSpace
+        workSpaceList.value = list
+        spaceMenus.value[1].children = workSpace
      } else {
        ElMessage.error('getSpaceList' + res.errmsg)
      }
@ -126,7 +132,7 @@ export const useTeamSpaceStore = defineStore('teamSpace', () => {
    spaceType,
    workSpaceId,
    spaceDetail,
-    teamSpaceList,
+    workSpaceList,
    getSpaceList,
    getSpaceDetail,
    changeSpaceType,