feat: 问卷空间协作能力前端 (#246)

web/.eslintrc.cjs

@@ -11,5 +11,11 @@ module.exports = {
  ],
  parserOptions: {
  ecmaVersion: 'latest'
+ },
+ rules: {
+ 'no-empty-pattern': 'off',
+ "vue/multi-word-component-names": ["error", {
+ "ignores": ["index"]
+ }]
  }
 }

web/components.d.ts

@@ -19,6 +19,9 @@ declare module 'vue' {
  ElFormItem: typeof import('element-plus/es')['ElFormItem']
  ElInput: typeof import('element-plus/es')['ElInput']
  ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+ ElMenu: typeof import('element-plus/es')['ElMenu']
+ ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+ ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
  ElOption: typeof import('element-plus/es')['ElOption']
  ElPagination: typeof import('element-plus/es')['ElPagination']
  ElPopover: typeof import('element-plus/es')['ElPopover']
@@ -27,6 +30,7 @@ declare module 'vue' {
  ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
  ElRow: typeof import('element-plus/es')['ElRow']
  ElSelect: typeof import('element-plus/es')['ElSelect']
+ ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
  ElSlider: typeof import('element-plus/es')['ElSlider']
  ElSwitch: typeof import('element-plus/es')['ElSwitch']
  ElTable: typeof import('element-plus/es')['ElTable']
@@ -44,6 +48,7 @@ declare module 'vue' {
  IEpDelete: typeof import('~icons/ep/delete')['default']
  IEpLoading: typeof import('~icons/ep/loading')['default']
  IEpMinus: typeof import('~icons/ep/minus')['default']
+ IEpMore: typeof import('~icons/ep/more')['default']
  IEpPlus: typeof import('~icons/ep/plus')['default']
  IEpQuestionFilled: typeof import('~icons/ep/question-filled')['default']
  IEpRank: typeof import('~icons/ep/rank')['default']

web/src/management/api/space.ts

@@ -0,0 +1,75 @@
+import axios from './base'
+
+// 空间
+export const createSpace = ({ name, description, members }: any) => {
+ return axios.post('/workspace', { name, description, members })
+}
+
+export const updateSpace = ({ workspaceId, name, description, members }: any) => {
+ return axios.post(`/workspace/${workspaceId}`, { name, description, members })
+}
+
+export const getSpaceList = () => {
+ return axios.get('/workspace')
+}
+
+export const getSpaceDetail = (workspaceId: string) => {
+ return axios.get(`/workspace/${workspaceId}`)
+}
+
+export const deleteSpace = (workspaceId: string) => {
+ return axios.delete(`/workspace/${workspaceId}`)
+}
+
+export const getUserList = (username: string) => {
+ return axios.get(`/user/getUserList`, {
+ params: {
+ username
+ }
+ })
+}
+
+// 协作权限列表
+export const getPermissionList = () => {
+ return axios.get('collaborator/getPermissionList')
+}
+
+export const saveCollaborator = ({ surveyId, collaborators }: any) => {
+ return axios.post('collaborator/batchSave', {
+ surveyId,
+ collaborators
+ })
+}
+
+// 添加协作人
+export const addCollaborator = ({ surveyId, userId, permissions }: any) => {
+ return axios.post('collaborator', {
+ surveyId,
+ userId,
+ permissions
+ })
+}
+// 更新问卷协作信息
+export const updateCollaborator = ({ surveyId, userId, permissions }: any) => {
+ return axios.post('collaborator/changeUserPermission', {
+ surveyId,
+ userId,
+ permissions
+ })
+}
+// 获取问卷协作信息
+export const getCollaborator = (surveyId: string) => {
+ return axios.get(`collaborator`, {
+ params: {
+ surveyId
+ }
+ })
+}
+// 获取问卷协作权限
+export const getCollaboratorPermissions = (surveyId: string) => {
+ return axios.get(`collaborator/permissions`, {
+ params: {
+ surveyId
+ }
+ })
+}

web/src/management/api/survey.js

@@ -1,12 +1,13 @@
 import axios from './base'
 
-export const getSurveyList = ({ curPage, filter, order }) => {
+export const getSurveyList = ({ curPage, filter, order, workspaceId }) => {
  return axios.get('/survey/getList', {
  params: {
  pageSize: 10,
  curPage,
  filter,
- order
+ order,
+ workspaceId
  }
  })
 }

web/src/management/components/LeftMenu.vue

@@ -1,19 +1,40 @@
 <template>
  <div class="nav">
  <LogoIcon />
- <RouterLink v-for="(tab, index) in tabs" :key="index" class="tab-btn" :to="tab.to" replace>
- <div class="icon">
- <i class="iconfont" :class="tab.icon"></i>
- </div>
- <p>{{ tab.text }}</p>
- </RouterLink>
+ <template v-for="(tab, index) in tabs" :key="tab.text + index">
+ <router-link :to="tab.to" v-slot="{ isActive }">
+ <div
+ :class="[
+ 'tab-btn',
+ (['QuestionEditIndex', 'QuestionEditSetting', 'QuestionSkinSetting'].includes(
+ route.name
+ ) &&
+ tab.to.name === 'QuestionEditIndex') ||
+ isActive
+ ? 'router-link-active'
+ : ''
+ ]"
+ >
+ <div class="icon">
+ <i class="iconfont" :class="tab.icon"></i>
+ </div>
+ <p>{{ tab.text }}</p>
+ </div>
+ </router-link>
+ </template>
  </div>
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
+import { useStore } from 'vuex'
+import { useRoute } from 'vue-router'
+const route = useRoute()
 import LogoIcon from './LogoIcon.vue'
+import { SurveyPermissions } from '@/management/utils/types/workSpace.ts'
+const store = useStore()
 
-const tabs = [
+const tabArr = [
  {
  text: '编辑问卷',
  icon: 'icon-bianji',
@@ -36,6 +57,19 @@ const tabs = [
  }
  }
 ]
+const tabs = ref([])
+onMounted(async () => {
+ await store.dispatch('fetchCooperPermissions', route.params.id)
+ // 如果有问卷管理权限，则加入问卷编辑和投放菜单
+ if (store.state.cooperPermissions.includes(SurveyPermissions.SurveyManage)) {
+ tabs.value.push(tabArr[0])
+ tabs.value.push(tabArr[1])
+ }
+ // 如果有数据分析权限，则加入数据分析菜单
+ if (store.state.cooperPermissions.includes(SurveyPermissions.DataManage)) {
+ tabs.value.push(tabArr[2])
+ }
+})
 </script>
 <style lang="scss" scoped>
 .nav {

web/src/management/pages/create/components/CreateForm.vue

@@ -38,6 +38,7 @@
 <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'
 
@@ -78,7 +79,7 @@ const checkForm = (fn: Function) => {
 }
 
 const router = useRouter()
-
+const store = useStore()
 const submit = () => {
  if (!state.canSubmit) {
  return
@@ -89,10 +90,14 @@ const submit = () => {
  return
  }
  state.canSubmit = false
- const res:any = await createSurvey({
+ const payload: any = {
  surveyType: selectType,
  ...state.form
- })
+ }
+ if (store.state.list.workSpaceId) {
+ payload.workspaceId = store.state.list.workSpaceId
+ }
+ const res: any = await createSurvey(payload)
  if (res?.code === 200 && res?.data?.id) {
  const id = res.data.id
  router.push({

web/src/management/pages/create/components/NavHeader.vue

@@ -30,7 +30,7 @@ const onBack = () => {
 
 const toHomePage = () => {
  router.push({
- name: 'Home'
+ name: 'survey'
  })
 }
 </script>

web/src/management/pages/edit/modules/generalModule/TitlePanel.vue

@@ -1,17 +1,17 @@
 <template>
  <div class="title-container">
  <div
-  class="title"
-  @mouseover="showFullTitle"
-  @mousemove="updateTooltipPosition"
-  @mouseleave="hideFullTitle"
+ class="title"
+ @mouseover="showFullTitle"
+ @mousemove="updateTooltipPosition"
+ @mouseleave="hideFullTitle"
  >
  {{ title }}
  </div>
  <div
-  class="tooltip"
-  v-if="tooltipVisible"
-  :style="{ top: tooltipPosition.top + 'px', left: tooltipPosition.left + 'px' }"
+ class="tooltip"
+ v-if="tooltipVisible"
+ :style="{ top: tooltipPosition.top + 'px', left: tooltipPosition.left + 'px' }"
  >
  {{ title }}
  </div>
@@ -73,5 +73,3 @@ const hideFullTitle = () => {
  white-space: nowrap;
 }
 </style>
-
-

web/src/management/pages/edit/modules/logicModule/components/ConditionView.vue

@@ -49,7 +49,7 @@
  </div>
 </template>
 <script setup lang="ts">
-import { defineProps, computed, inject, ref, type ComputedRef } from 'vue'
+import { computed, inject, ref, type ComputedRef } from 'vue'
 import { ConditionNode, RuleNode } from '@/common/logicEngine/RuleBuild'
 import { qAbleList } from '@/management/utils/constant.js'
 import { cleanRichText } from '@/common/xss'

web/src/management/pages/edit/modules/settingModule/skin/PreviewPanel.vue

@@ -29,18 +29,18 @@ import MaterialGroup from '@/management/pages/edit/components/MaterialGroup.vue'
 import { useStore } from 'vuex'
 import communalLoader from '@materials/communals/communalLoader.js'
 
-const HeaderContent = ()=>communalLoader.loadComponent('HeaderContent')
-const MainTitle = ()=>communalLoader.loadComponent('MainTitle')
-const SubmitButton = ()=>communalLoader.loadComponent('SubmitButton')
-const LogoIcon = ()=>communalLoader.loadComponent('LogoIcon')
+const HeaderContent = () => communalLoader.loadComponent('HeaderContent')
+const MainTitle = () => communalLoader.loadComponent('MainTitle')
+const SubmitButton = () => communalLoader.loadComponent('SubmitButton')
+const LogoIcon = () => communalLoader.loadComponent('LogoIcon')
 
 export default defineComponent({
  components: {
  MaterialGroup,
- HeaderContent:HeaderContent(),
- MainTitle:MainTitle(),
- SubmitButton:SubmitButton(),
- LogoIcon:LogoIcon()
+ HeaderContent: HeaderContent(),
+ MainTitle: MainTitle(),
+ SubmitButton: SubmitButton(),
+ LogoIcon: LogoIcon()
  },
  setup() {
  const store = useStore()