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

* feat: 空间编辑保存名字同步 * feat: 团队空间空数据隐藏分页器 * feat: 问卷列表添加协作者输入为空时不发接口请求 * feat: 管理团队文字对齐向左 * feat: 团队空间编辑保存名字同步 * feat: 隐藏校验框border * feat: 问卷列表添加协作者为空时不触发请求 * feat: 隐藏协作管理搜索框校验边框样式 --------- Co-authored-by: jiangchunfu <jiangchunfu@kaike.la>
2024-10-31 18:00:03 +08:00 · 2024-10-31 18:00:03 +08:00 · 20f01768cf
commit 20f01768cf
parent f6202d4f91
6 changed files with 110 additions and 66 deletions
--- 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)
--- 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>
--- 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">
--- 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"
--- 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)
--- 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) {