空间管理样式调整 (#441)

* feat: 空间编辑保存名字同步

* feat: 团队空间空数据隐藏分页器

* feat: 问卷列表添加协作者输入为空时不发接口请求

* feat: 管理团队文字对齐向左

* feat: 团队空间编辑保存名字同步

* feat: 隐藏校验框border

* feat: 问卷列表添加协作者为空时不触发请求

* feat: 隐藏协作管理搜索框校验边框样式

---------

Co-authored-by: jiangchunfu <jiangchunfu@kaike.la>

web/src/management/components/CooperModify/MemberSelect.vue

@@ -3,6 +3,7 @@
     <el-select-v2
       v-model="value"
       filterable
+      class="search-name"
       remote
       :remote-method="remoteMethod"
       clearable
@@ -58,7 +59,8 @@ const value = ref('')
 const selectOptions = ref<ListItem[]>([])
 const loading = ref(false)
 
-const remoteMethod = async (query: string) => {
+const remoteMethod = async (q: string) => {
+  const query = q.trim()
   if (query !== '') {
     loading.value = true
     const res: any = await getUserList(query)

web/src/management/components/CooperModify/ModifyDialog.vue

@@ -115,6 +115,9 @@ const rules = {
     {
       trigger: 'change',
       validator: (rule: any, value: IMember[], callback: Function) => {
+        if (value.length === 0) {
+          callback('请添加协作者')
+        }
         if (value.filter((item: IMember) => !item.role.length).length) {
           callback('请设置协作者对应权限')
         }
@@ -186,8 +189,18 @@ const handleMembersChange = (val: IMember[]) => {
 }
 </script>
 
-<style lang="scss" rel="lang/scss" scoped>
+<style lang="scss" scoped>
 .base-form-root {
   padding: 20px;
+
+  :deep(.list-wrapper .el-select) {
+    .el-select__placeholder {
+      text-align: right;
+    }
+  }
+}
+
+:deep(.el-form-item.is-error .search-name .el-select__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-border-color) inset;
 }
 </style>

web/src/management/components/CooperModify/OperationSelect.vue

@@ -125,6 +125,11 @@ const handleCheckAll = (val: CheckboxValueType) => {
   :deep(.el-select__wrapper) {
     border: none;
     box-shadow: none;
+    &:hover,
+    &:focus {
+      border: none;
+      box-shadow: none;
+    }
   }
   :deep(.ishovering) {
     border: none;
@@ -134,11 +139,11 @@ const handleCheckAll = (val: CheckboxValueType) => {
     display: flex;
     justify-content: flex-end;
   }
-  .operation-select {
-    :deep(.el-select__placeholder) {
-      text-align: right;
-    }
-  }
+  // .operation-select {
+  //   :deep(.el-select__placeholder) {
+  //     text-align: right;
+  //   }
+  // }
 }
 </style>
 <style lang="scss">

web/src/management/pages/list/components/SpaceList.vue

@@ -2,7 +2,8 @@
   <div class="search">
     <TextSearch placeholder="请输入空间名称" :value="searchVal" @search="onSearchText" />
   </div>
-  <div class="list-wrap" v-if="props.total > 0">
+  <template v-if="total > 0">
+    <div class="list-wrap">
       <el-table
         ref="multipleListTable"
         class="list-table"
@@ -54,9 +55,6 @@
         </el-table-column>
       </el-table>
     </div>
-  <div v-else>
-    <EmptyIndex :data="!searchVal ? noSpaceDataConfig : noSpaceSearchDataConfig" />
-  </div>
     <div class="list-pagination">
       <el-pagination
         v-model:current-page="curPage"
@@ -67,6 +65,12 @@
       >
       </el-pagination>
     </div>
+  </template>
+
+  <div v-else>
+    <EmptyIndex :data="!searchVal ? noSpaceDataConfig : noSpaceSearchDataConfig" />
+  </div>
+
   <SpaceModify
     v-if="showSpaceModify"
     :type="modifyType"

web/src/management/pages/list/components/SpaceModify.vue

@@ -55,7 +55,7 @@ import { useWorkSpaceStore } from '@/management/stores/workSpace'
 import MemberSelect from '@/management/components/CooperModify/MemberSelect.vue'
 
 const workSpaceStore = useWorkSpaceStore()
-const emit = defineEmits(['on-close-codify', 'onFocus', 'change', 'blur'])
+const emit = defineEmits(['on-close-codify', 'onFocus', 'change', 'blur', 'updateData'])
 const props = defineProps({
   type: String,
   width: String,
@@ -128,6 +128,7 @@ const onConfirm = async () => {
       } else {
         try {
           await handleUpdate()
+          emit('updateData', formModel.value)
           emit('on-close-codify', 'update')
         } catch (err) {
           ElMessage.error('createSpace status err' + err)

web/src/management/pages/list/index.vue

@@ -55,6 +55,7 @@
       :type="modifyType"
       :visible="showSpaceModify"
       @on-close-codify="onCloseModify"
+      @update-data="onCloseModifyInTeamWork"
     />
   </div>
 </template>
@@ -71,6 +72,7 @@ import TopNav from '@/management/components/TopNav.vue'
 import { SpaceType } from '@/management/utils/workSpace'
 import { useWorkSpaceStore } from '@/management/stores/workSpace'
 import { useSurveyListStore } from '@/management/stores/surveyList'
+import { type IWorkspace } from '@/management/utils/workSpace'
 
 const workSpaceStore = useWorkSpaceStore()
 const surveyListStore = useSurveyListStore()
@@ -149,6 +151,23 @@ const onSetGroup = async () => {
   showSpaceModify.value = true
 }
 
+const onCloseModifyInTeamWork = (data: IWorkspace) => {
+  if (spaceType.value === SpaceType.Teamwork) {
+    const currentData = workSpaceList.value.find((item) => item._id === data._id)
+    if (currentData) {
+      currentData.name = data.name
+      currentData.memberTotal = data.members.length
+      currentData.description = data.description
+    }
+    const currentMenus: any = spaceMenus.value?.[1]?.children?.find(
+      (item: { id: string; name: string }) => item.id === data._id
+    )
+    if (currentMenus) {
+      currentMenus.name = data.name
+    }
+  }
+}
+
 const onCloseModify = (type: string) => {
   showSpaceModify.value = false
   if (type === 'update' && spaceListRef.value) {