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

* feat: list模块的pinia迁移

* fix: type check error

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

---------

Co-authored-by: Ysansan <ysansan98@outlook.com>
This commit is contained in:
ysansan 2024-07-08 21:54:59 +08:00 committed by GitHub
parent 5b96ad7c69
commit 33f18742dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 425 additions and 103 deletions

View File

@ -38,13 +38,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, computed, toRefs } from 'vue' import { ref, reactive, computed, toRefs } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/src/message.scss' import 'element-plus/theme-chalk/src/message.scss'
import { createSurvey } from '@/management/api/survey' import { createSurvey } from '@/management/api/survey'
import { SURVEY_TYPE_LIST } from '../types' import { SURVEY_TYPE_LIST } from '../types'
import { useTeamSpaceStore } from '@/management/stores/teamSpace'
interface Props { interface Props {
selectType?: string selectType?: string
@ -54,6 +52,7 @@ const props = withDefaults(defineProps<Props>(), {
selectType: 'normal' selectType: 'normal'
}) })
const teamSpaceStore = useTeamSpaceStore()
const ruleForm = ref<any>(null) const ruleForm = ref<any>(null)
const state = reactive({ const state = reactive({
@ -79,7 +78,6 @@ const checkForm = (fn: Function) => {
} }
const router = useRouter() const router = useRouter()
const store = useStore()
const submit = () => { const submit = () => {
if (!state.canSubmit) { if (!state.canSubmit) {
return return
@ -94,8 +92,8 @@ const submit = () => {
surveyType: selectType, surveyType: selectType,
...state.form ...state.form
} }
if (store.state.list.workSpaceId) { if (teamSpaceStore.workSpaceId) {
payload.workspaceId = store.state.list.workSpaceId payload.workspaceId = teamSpaceStore.workSpaceId
} }
const res: any = await createSurvey(payload) const res: any = await createSurvey(payload)
if (res?.code === 200 && res?.data?.id) { if (res?.code === 200 && res?.data?.id) {

View File

@ -105,9 +105,9 @@
<script setup> <script setup>
import { ref, computed, unref } from 'vue' import { ref, computed, unref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { get, map } from 'lodash-es' import { get, map } from 'lodash-es'
import { storeToRefs } from 'pinia'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import 'element-plus/theme-chalk/src/message.scss' 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 { CODE_MAP } from '@/management/api/base'
import { QOP_MAP } from '@/management/utils/constant.ts' import { QOP_MAP } from '@/management/utils/constant.ts'
import { deleteSurvey } from '@/management/api/survey' import { deleteSurvey } from '@/management/api/survey'
import { useTeamSpaceStore } from '@/management/stores/teamSpace'
import { useSurveyListStore } from '@/management/stores/surveyList'
import ModifyDialog from './ModifyDialog.vue' import ModifyDialog from './ModifyDialog.vue'
import TagModule from './TagModule.vue' import TagModule from './TagModule.vue'
import StateModule from './StateModule.vue' import StateModule from './StateModule.vue'
@ -141,7 +143,9 @@ import {
buttonOptionsDict buttonOptionsDict
} from '@/management/config/listConfig' } from '@/management/config/listConfig'
const store = useStore() const surveyListStore = useSurveyListStore()
const teamSpaceStore = useTeamSpaceStore()
const { workSpaceId } = storeToRefs(teamSpaceStore)
const router = useRouter() const router = useRouter()
const props = defineProps({ const props = defineProps({
loading: { loading: {
@ -162,17 +166,9 @@ const fields = ['type', 'title', 'remark', 'owner', 'state', 'createDate', 'upda
const showModify = ref(false) const showModify = ref(false)
const modifyType = ref('') const modifyType = ref('')
const questionInfo = ref({}) const questionInfo = ref({})
const currentPage = ref(1) const currentPage = ref(1)
const searchVal = computed(() => { const { searchVal, selectValueMap, buttonValueMap } = storeToRefs(surveyListStore)
return store.state.list.searchVal
})
const selectValueMap = computed(() => {
return store.state.list.selectValueMap
})
const buttonValueMap = computed(() => {
return store.state.list.buttonValueMap
})
const currentComponent = computed(() => { const currentComponent = computed(() => {
return (componentName) => { return (componentName) => {
switch (componentName) { switch (componentName) {
@ -247,9 +243,6 @@ const order = computed(() => {
}, []) }, [])
return JSON.stringify(formatOrder) return JSON.stringify(formatOrder)
}) })
const workSpaceId = computed(() => {
return store.state.list.workSpaceId
})
const onReflush = async () => { const onReflush = async () => {
const filterString = JSON.stringify( const filterString = JSON.stringify(
@ -298,7 +291,7 @@ const getToolConfig = (row) => {
label: '协作' label: '协作'
} }
] ]
if (!store.state.list.workSpaceId) { if (!workSpaceId.value) {
if (!row.isCollaborated) { if (!row.isCollaborated) {
// //
funcList = funcList.concat(permissionsBtn) funcList = funcList.concat(permissionsBtn)
@ -430,19 +423,18 @@ const onRowClick = (row) => {
}) })
} }
const onSearchText = (e) => { const onSearchText = (e) => {
store.commit('list/setSearchVal', e) searchVal.value = e
currentPage.value = 1 currentPage.value = 1
onReflush() onReflush()
} }
const onSelectChange = (selectKey, selectValue) => { const onSelectChange = (selectKey, selectValue) => {
store.commit('list/changeSelectValueMap', { key: selectKey, value: selectValue }) surveyListStore.changeSelectValueMap(selectKey, selectValue)
// selectValueMap.value[selectKey] = selectValue
currentPage.value = 1 currentPage.value = 1
onReflush() onReflush()
} }
const onButtonChange = (effectKey, effectValue) => { const onButtonChange = (effectKey, effectValue) => {
store.commit('list/reserButtonValueMap') surveyListStore.reserButtonValueMap()
store.commit('list/changeButtonValueMap', { key: effectKey, value: effectValue }) surveyListStore.changeButtonValueMap(effectKey, effectValue)
onReflush() onReflush()
} }
@ -464,16 +456,20 @@ const onCooperClose = () => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
.select { .select {
display: flex; display: flex;
} }
.search { .search {
display: flex; display: flex;
} }
} }
.list-wrapper { .list-wrapper {
padding: 10px 20px; padding: 10px 20px;
background: #fff; background: #fff;
.list-table { .list-table {
min-height: 620px; min-height: 620px;
} }
@ -481,11 +477,13 @@ const onCooperClose = () => {
.list-pagination { .list-pagination {
margin-top: 20px; margin-top: 20px;
:deep(.el-pagination) { :deep(.el-pagination) {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
} }
:deep(.el-table__header) { :deep(.el-table__header) {
.tableview-header .el-table__cell { .tableview-header .el-table__cell {
.cell { .cell {
@ -495,21 +493,26 @@ const onCooperClose = () => {
} }
} }
} }
:deep(.tableview-row) { :deep(.tableview-row) {
.tableview-cell { .tableview-cell {
padding: 5px 0; padding: 5px 0;
&.link { &.link {
cursor: pointer; cursor: pointer;
} }
.cell .cell-span { .cell .cell-span {
font-size: 14px; font-size: 14px;
} }
} }
} }
} }
.el-select-dropdown__wrap { .el-select-dropdown__wrap {
background: #eee; background: #eee;
} }
.el-select-dropdown__item.hover { .el-select-dropdown__item.hover {
background: #fff; background: #fff;
} }

View File

@ -16,11 +16,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue' import { computed } from 'vue'
import { useStore } from 'vuex'
import { type IMember, type ListItem } from '@/management/utils/types/workSpace' import { type IMember, type ListItem } from '@/management/utils/types/workSpace'
import OperationSelect from './OperationSelect.vue' import OperationSelect from './OperationSelect.vue'
import { useTeamSpaceStore } from '@/management/stores/teamSpace'
const store = useStore() const teamSpaceStore = useTeamSpaceStore()
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
members: IMember[] members: IMember[]
@ -43,7 +43,7 @@ const list = computed({
} }
}) })
const currentUserId = computed(() => { const currentUserId = computed(() => {
return store.state.list.spaceDetail?.currentUserId return teamSpaceStore.spaceDetail?.currentUserId
}) })
const handleRemove = (index: number) => { const handleRemove = (index: number) => {
list.value.splice(index, 1) list.value.splice(index, 1)

View File

@ -71,17 +71,17 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { ElMessageBox } from 'element-plus' import { ElMessageBox } from 'element-plus'
import 'element-plus/theme-chalk/src/message-box.scss' import 'element-plus/theme-chalk/src/message-box.scss'
import { get, map } from 'lodash-es' import { get, map } from 'lodash-es'
import { spaceListConfig } from '@/management/config/listConfig' import { spaceListConfig } from '@/management/config/listConfig'
import SpaceModify from './SpaceModify.vue' import SpaceModify from './SpaceModify.vue'
import { UserRole } from '@/management/utils/types/workSpace' import { UserRole } from '@/management/utils/types/workSpace'
import { useTeamSpaceStore } from '@/management/stores/teamSpace'
const showSpaceModify = ref(false) const showSpaceModify = ref(false)
const modifyType = ref('edit') const modifyType = ref('edit')
const store = useStore() const teamSpaceStore = useTeamSpaceStore()
const fields = ['name', 'surveyTotal', 'memberTotal', 'owner', 'createDate'] const fields = ['name', 'surveyTotal', 'memberTotal', 'owner', 'createDate']
const fieldList = computed(() => { const fieldList = computed(() => {
return map(fields, (f) => { return map(fields, (f) => {
@ -89,17 +89,17 @@ const fieldList = computed(() => {
}) })
}) })
const dataList = computed(() => { const dataList = computed(() => {
return store.state.list.teamSpaceList return teamSpaceStore.teamSpaceList
}) })
const isAdmin = (id: string) => { const isAdmin = (id: string) => {
return ( return (
store.state.list.teamSpaceList.find((item: any) => item._id === id)?.currentUserRole === teamSpaceStore.teamSpaceList.find((item: any) => item._id === id)?.currentUserRole ===
UserRole.Admin UserRole.Admin
) )
} }
const handleModify = async (id: string) => { const handleModify = async (id: string) => {
await store.dispatch('list/getSpaceDetail', id) await teamSpaceStore.getSpaceDetail(id)
modifyType.value = 'edit' modifyType.value = 'edit'
showSpaceModify.value = true showSpaceModify.value = true
} }
@ -115,15 +115,17 @@ const handleDelete = (id: string) => {
} }
) )
.then(async () => { .then(async () => {
await store.dispatch('list/deleteSpace', id) await teamSpaceStore.deleteSpace(id)
await store.dispatch('list/getSpaceList') await teamSpaceStore.getSpaceList()
}) })
.catch(() => {}) .catch(() => {})
} }
const onCloseModify = () => { const onCloseModify = () => {
showSpaceModify.value = false showSpaceModify.value = false
store.dispatch('list/getSpaceList') teamSpaceStore.getSpaceList()
} }
// const handleCurrentChange = (current) => { // const handleCurrentChange = (current) => {
// this.currentPage = current // this.currentPage = current
// this.init() // this.init()
@ -133,6 +135,7 @@ const onCloseModify = () => {
.list-wrap { .list-wrap {
padding: 20px; padding: 20px;
background: #fff; background: #fff;
.list-table { .list-table {
:deep(.el-table__header) { :deep(.el-table__header) {
.tableview-header .el-table__cell { .tableview-header .el-table__cell {
@ -143,22 +146,28 @@ const onCloseModify = () => {
} }
} }
} }
:deep(.tableview-row) { :deep(.tableview-row) {
.tableview-cell { .tableview-cell {
padding: 5px 0; padding: 5px 0;
&.link { &.link {
cursor: pointer; cursor: pointer;
} }
.cell .cell-span { .cell .cell-span {
font-size: 14px; font-size: 14px;
} }
} }
} }
.tool-root { .tool-root {
display: flex; display: flex;
&:first-child { &:first-child {
margin-left: -10px; margin-left: -10px;
} }
.tool-root-btn-text { .tool-root-btn-text {
font-weight: normal !important; font-weight: normal !important;
} }

View File

@ -1,21 +1,7 @@
<template> <template>
<el-dialog <el-dialog class="base-dialog-root" :model-value="visible" width="40%" :title="formTitle" @close="onClose">
class="base-dialog-root" <el-form class="base-form-root" ref="ruleForm" :model="formModel" :rules="rules" label-position="top" size="large"
:model-value="visible" @submit.prevent :disabled="formDisabled">
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-form-item label="团队空间名称" prop="name">
<el-input v-model="formModel.name" /> <el-input v-model="formModel.name" />
</el-form-item> </el-form-item>
@ -23,11 +9,7 @@
<el-input v-model="formModel.description" /> <el-input v-model="formModel.description" />
</el-form-item> </el-form-item>
<el-form-item label="添加成员" prop="members"> <el-form-item label="添加成员" prop="members">
<MemberSelect <MemberSelect :members="formModel.members" @select="handleMemberSelect" @change="handleMembersChange" />
:members="formModel.members"
@select="handleMemberSelect"
@change="handleMembersChange"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -44,15 +26,15 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, shallowRef, onMounted } from 'vue' import { computed, ref, shallowRef, onMounted } from 'vue'
import { useStore } from 'vuex'
import { pick as _pick } from 'lodash-es' import { pick as _pick } from 'lodash-es'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/src/message.scss' import 'element-plus/theme-chalk/src/message.scss'
import { QOP_MAP } from '@/management/utils/constant' import { QOP_MAP } from '@/management/utils/constant'
import MemberSelect from './MemberSelect.vue' import MemberSelect from './MemberSelect.vue'
import { type IMember, type IWorkspace, UserRole } from '@/management/utils/types/workSpace' 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 emit = defineEmits(['on-close-codify', 'onFocus', 'change', 'blur'])
const props = defineProps({ const props = defineProps({
type: String, type: String,
@ -64,7 +46,8 @@ const ruleForm = shallowRef<any>(null)
const formTitle = computed(() => { const formTitle = computed(() => {
return props.type === QOP_MAP.ADD ? '创建团队空间' : '管理团队空间' return props.type === QOP_MAP.ADD ? '创建团队空间' : '管理团队空间'
}) })
const formModel = ref<IWorkspace>({ const formModel = ref<Required<IWorkspace>>({
_id: '',
name: '', name: '',
description: '', description: '',
members: [] as IMember[] members: [] as IMember[]
@ -86,28 +69,29 @@ const rules = {
] ]
} }
const spaceDetail = computed(() => { const spaceDetail = computed(() => {
return store.state.list.spaceDetail return teamSpaceStore.spaceDetail
}) })
const formDisabled = computed(() => { const formDisabled = computed(() => {
return spaceDetail.value?._id return spaceDetail.value?._id
? store.state.list.teamSpaceList.find((item: any) => item._id === spaceDetail.value._id) ? teamSpaceStore.teamSpaceList.find((item: any) => item._id === spaceDetail.value?._id)
.currentUserRole !== UserRole.Admin ?.currentUserRole !== UserRole.Admin
: false : false
}) })
onMounted(() => { onMounted(() => {
if (props.type === QOP_MAP.EDIT) { 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 = () => { const onClose = () => {
formModel.value = { formModel.value = {
_id: '',
name: '', name: '',
description: '', description: '',
members: [] as IMember[] members: [] as IMember[]
} }
// //
store.commit('list/setSpaceDetail', null) teamSpaceStore.setSpaceDetail(null)
emit('on-close-codify') emit('on-close-codify')
} }
@ -142,10 +126,10 @@ const handleMembersChange = (val: IMember[]) => {
formModel.value.members = val formModel.value.members = val
} }
const handleUpdate = async () => { const handleUpdate = async () => {
await store.dispatch('list/updateSpace', formModel.value) await teamSpaceStore.updateSpace(formModel.value)
} }
const handleAdd = async () => { const handleAdd = async () => {
await store.dispatch('list/addSpace', formModel.value) await teamSpaceStore.addSpace(formModel.value)
} }
</script> </script>

View File

@ -60,60 +60,52 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted } from 'vue' import { ref, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import BaseList from './components/BaseList.vue' import BaseList from './components/BaseList.vue'
import SpaceList from './components/SpaceList.vue' import SpaceList from './components/SpaceList.vue'
import SliderBar from './components/SliderBar.vue' import SliderBar from './components/SliderBar.vue'
import SpaceModify from './components/SpaceModify.vue' import SpaceModify from './components/SpaceModify.vue'
import { SpaceType } from '@/management/utils/types/workSpace' import { SpaceType } from '@/management/utils/types/workSpace'
import { useUserStore } from '@/management/stores/user' 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 userStore = useUserStore()
const teamSpaceStore = useTeamSpaceStore()
const surveyListStore = useSurveyListStore()
const { surveyList, surveyTotal } = storeToRefs(surveyListStore)
const { spaceMenus, workSpaceId, spaceType } = storeToRefs(teamSpaceStore)
const router = useRouter() const router = useRouter()
const userInfo = computed(() => { const userInfo = computed(() => {
return userStore.userInfo 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(() => { const loading = ref(false)
return store.state.list.spaceMenus const activeIndex = ref('1')
})
const workSpaceId = computed(() => {
return store.state.list.workSpaceId
})
const spaceType = computed(() => {
return store.state.list.spaceType
})
const handleSpaceSelect = (id: any) => { const handleSpaceSelect = (id: any) => {
if (id === SpaceType.Personal) { if (id === SpaceType.Personal) {
// //
if (store.state.list.spaceType === SpaceType.Personal) { if (teamSpaceStore.spaceType === SpaceType.Personal) {
return return
} }
store.commit('list/changeSpaceType', SpaceType.Personal) teamSpaceStore.changeSpaceType(SpaceType.Personal)
store.commit('list/changeWorkSpace', '') teamSpaceStore.changeWorkSpace('')
} else if (id === SpaceType.Group) { } else if (id === SpaceType.Group) {
// //
if (store.state.list.spaceType === SpaceType.Group) { if (teamSpaceStore.spaceType === SpaceType.Group) {
return return
} }
store.commit('list/changeSpaceType', SpaceType.Group) teamSpaceStore.changeSpaceType(SpaceType.Group)
store.commit('list/changeWorkSpace', '') teamSpaceStore.changeWorkSpace('')
} else if (!Object.values(SpaceType).includes(id)) { } else if (!Object.values(SpaceType).includes(id)) {
// //
if (store.state.list.workSpaceId === id) { if (teamSpaceStore.workSpaceId === id) {
return return
} }
store.commit('list/changeSpaceType', SpaceType.Teamwork) teamSpaceStore.changeSpaceType(SpaceType.Teamwork)
store.commit('list/changeWorkSpace', id) teamSpaceStore.changeWorkSpace(id)
} }
fetchSurveyList() fetchSurveyList()
@ -123,7 +115,7 @@ onMounted(() => {
fetchSurveyList() fetchSurveyList()
}) })
const fetchSpaceList = () => { const fetchSpaceList = () => {
store.dispatch('list/getSpaceList') teamSpaceStore.getSpaceList()
} }
const fetchSurveyList = async (params?: any) => { const fetchSurveyList = async (params?: any) => {
if (!params) { if (!params) {
@ -136,7 +128,7 @@ const fetchSurveyList = async (params?: any) => {
params.workspaceId = workSpaceId.value params.workspaceId = workSpaceId.value
} }
loading.value = true loading.value = true
await store.dispatch('list/getSurveyList', params) await surveyListStore.getSurveyList(params)
loading.value = false loading.value = false
} }
const modifyType = ref('add') const modifyType = ref('add')
@ -172,27 +164,33 @@ const handleLogout = () => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
.left { .left {
display: flex; display: flex;
align-items: center; align-items: center;
width: calc(100% - 200px); width: calc(100% - 200px);
.logo-img { .logo-img {
width: 90px; width: 90px;
height: fit-content; height: fit-content;
padding-right: 20px; padding-right: 20px;
} }
.el-menu { .el-menu {
width: 100%; width: 100%;
height: 56px; height: 56px;
border: none !important; border: none !important;
:deep(.el-menu-item, .is-active) { :deep(.el-menu-item, .is-active) {
border: none !important; border: none !important;
} }
} }
} }
.login-info { .login-info {
display: flex; display: flex;
align-items: center; align-items: center;
.login-info-img { .login-info-img {
margin-left: 10px; margin-left: 10px;
height: 30px; height: 30px;
@ -209,10 +207,12 @@ const handleLogout = () => {
color: #faa600; color: #faa600;
} }
} }
.content-wrap { .content-wrap {
position: relative; position: relative;
height: calc(100% - 56px); height: calc(100% - 56px);
} }
.list-content { .list-content {
position: relative; position: relative;
height: 100%; height: 100%;
@ -227,6 +227,7 @@ const handleLogout = () => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 24px; margin-bottom: 24px;
.operation { .operation {
flex: 0 1 auto; flex: 0 1 auto;
display: flex; display: flex;
@ -239,9 +240,11 @@ const handleLogout = () => {
.create-btn { .create-btn {
background: #4a4c5b; background: #4a4c5b;
} }
.space-btn { .space-btn {
background: $primary-color; background: $primary-color;
} }
.btn { .btn {
width: 132px; width: 132px;
height: 32px; height: 32px;

View File

@ -1,7 +1,7 @@
import { createStore } from 'vuex' import { createStore } from 'vuex'
import edit from './edit' import edit from './edit'
// import user from './user' // import user from './user'
import list from './list' // import list from './list'
import actions from './actions' import actions from './actions'
import mutations from './mutations' import mutations from './mutations'
import state from './state' import state from './state'
@ -14,6 +14,6 @@ export default createStore({
modules: { modules: {
edit, edit,
// user, // user,
list // list
} }
}) })

View File

@ -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
}
}

View File

@ -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
}
})

View File

@ -11,11 +11,12 @@ export interface MenuItem {
} }
export type IWorkspace = { export type IWorkspace = {
id?: string _id?: string
name: string name: string
description: string description: string
members: IMember[] members: IMember[]
} }
export type IMember = { export type IMember = {
userId: string userId: string
username: string username: string
@ -23,6 +24,24 @@ export type IMember = {
_id?: string _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 { export enum SpaceType {
Personal = 'personal', Personal = 'personal',
Group = 'group', Group = 'group',