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

* feat: 空间编辑保存名字同步 * feat: 团队空间空数据隐藏分页器 * feat: 问卷列表添加协作者输入为空时不发接口请求 * feat: 管理团队文字对齐向左 * feat: 团队空间编辑保存名字同步 * feat: 隐藏校验框border * feat: 问卷列表添加协作者为空时不触发请求 * feat: 隐藏协作管理搜索框校验边框样式 --------- Co-authored-by: jiangchunfu <[email protected]>
didi · Feb 5, 2025 · 50fab6e · 50fab6e
1 parent 7d77e16
commit 50fab6e
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 66 deletions.
diff --git a/web/src/management/components/CooperModify/MemberSelect.vue b/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)

diff --git a/web/src/management/components/CooperModify/ModifyDialog.vue b/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>
diff --git a/web/src/management/components/CooperModify/OperationSelect.vue b/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">

diff --git a/web/src/management/pages/list/components/SpaceList.vue b/web/src/management/pages/list/components/SpaceList.vue
@@ -2,71 +2,75 @@
   <div class="search">
     <TextSearch placeholder="请输入空间名称" :value="searchVal" @search="onSearchText" />
   </div>
-  <div class="list-wrap" v-if="props.total > 0">
-    <el-table
-      ref="multipleListTable"
-      class="list-table"
-      :data="data"
-      empty-text="暂无数据"
-      row-key="_id"
-      header-row-class-name="tableview-header"
-      row-class-name="tableview-row"
-      cell-class-name="tableview-cell"
-      v-loading="loading"
-      :height="550"
-      style="width: 100%"
-    >
-      <el-table-column column-key="space" width="20" />
-      <el-table-column
-        v-for="field in fieldList"
-        :key="(field as any)?.key"
-        :label="(field as any).title"
-        :column-key="(field as any).key"
-        :width="(field as any).width"
-        :min-width="(field as any).width || (field as any).minWidth"
-        class-name="link"
+  <template v-if="total > 0">
+    <div class="list-wrap">
+      <el-table
+        ref="multipleListTable"
+        class="list-table"
+        :data="data"
+        empty-text="暂无数据"
+        row-key="_id"
+        header-row-class-name="tableview-header"
+        row-class-name="tableview-row"
+        cell-class-name="tableview-cell"
+        v-loading="loading"
+        :height="550"
+        style="width: 100%"
       >
-        <template #default="scope">
-          <template v-if="(field as any).comp">
-            <component :is="(field as any).comp" type="table" :value="scope.row" />
+        <el-table-column column-key="space" width="20" />
+        <el-table-column
+          v-for="field in fieldList"
+          :key="(field as any)?.key"
+          :label="(field as any).title"
+          :column-key="(field as any).key"
+          :width="(field as any).width"
+          :min-width="(field as any).width || (field as any).minWidth"
+          class-name="link"
+        >
+          <template #default="scope">
+            <template v-if="(field as any).comp">
+              <component :is="(field as any).comp" type="table" :value="scope.row" />
+            </template>
+            <template v-else>
+              <span class="cell-span">{{ scope.row[(field as any).key] }}</span>
+            </template>
           </template>
-          <template v-else>
-            <span class="cell-span">{{ scope.row[(field as any).key] }}</span>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          :width="200"
+          label-class-name="operation"
+          class-name="table-options"
+        >
+          <template #default="scope">
+            <div class="space-tool-bar">
+              <ToolBar
+                :data="scope.row"
+                :tool-width="50"
+                :tools="getTools(scope.row)"
+                @click="handleClick"
+              />
+            </div>
           </template>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="操作"
-        :width="200"
-        label-class-name="operation"
-        class-name="table-options"
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="list-pagination">
+      <el-pagination
+        v-model:current-page="curPage"
+        background
+        @current-change="handleCurrentChange"
+        layout="prev, pager, next"
+        :total="props.total"
       >
-        <template #default="scope">
-          <div class="space-tool-bar">
-            <ToolBar
-              :data="scope.row"
-              :tool-width="50"
-              :tools="getTools(scope.row)"
-              @click="handleClick"
-            />
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
+      </el-pagination>
+    </div>
+  </template>
+
   <div v-else>
     <EmptyIndex :data="!searchVal ? noSpaceDataConfig : noSpaceSearchDataConfig" />
   </div>
-  <div class="list-pagination">
-    <el-pagination
-      v-model:current-page="curPage"
-      background
-      @current-change="handleCurrentChange"
-      layout="prev, pager, next"
-      :total="props.total"
-    >
-    </el-pagination>
-  </div>
+
   <SpaceModify
     v-if="showSpaceModify"
     :type="modifyType"

diff --git a/web/src/management/pages/list/components/SpaceModify.vue b/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)

diff --git a/web/src/management/pages/list/index.vue b/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) {