搜索结果列表页面开发

src/components/UserNameSpace/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <d-editable-select
+    remote
+    enable-lazy-load
+    v-model="nameSpaceId"
+    :options="namespaceList"
+    :loading="loading"
+    :max-height="300"
+    :size="size"
+    placeholder="昵称"
+    :remote-method="remoteMethod"
+    @load-more="loadMore"
+  >
+  </d-editable-select>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { useAccountStore } from '@/stores/user';
+import { getManageableGroups } from '@/api/user';
+interface NameSpace {
+  id:number|string;
+  visibility?:string;
+  name:string;
+}
+interface NameSpaceOption {
+  value:NameSpace['id'];
+  visibility?:NameSpace['visibility'];
+  label:NameSpace['name']
+}
+interface UserNameSpaceProps{
+  size:string;
+  modelValue:NameSpace|null;// 绑定的namespace
+}
+const props = withDefaults(defineProps<UserNameSpaceProps>(), {
+  size: 'lg',
+  modelValue: null
+});
+const emits = defineEmits(['update:modelValue']);
+const createRepoDataStr = sessionStorage.getItem('createRepoData');
+const createRepoData = createRepoDataStr ? JSON.parse(createRepoDataStr) : null;
+sessionStorage.removeItem('createRepoData');
+const user = useAccountStore();
+const { username, id } = user.accountInfo;
+const search = ref('');
+const nameSpaceId = ref('');
+const namespaceList = ref<NameSpaceOption[]>([]);
+const pageSize = ref(10);
+const totalCount = ref(0);
+const loading = ref(false);
+const bindInit = ref<any>(null);
+const remoteMethod = async function(query:string) { // 关键字搜索
+  search.value = query;
+  pageSize.value = 10;
+  await getNameSpace();
+};
+const loadMore = async function() {
+  if (totalCount.value <= pageSize.value) return;// 数据加载完了不需要请求了
+  pageSize.value += 10;
+  await getNameSpace();
+};
+watch(() => nameSpaceId.value, (val) => {
+  const obj = namespaceList.value.find((item: any) => item.value === val);
+  emits('update:modelValue', obj ? { id: obj.value, name: obj.label, visibility: obj.visibility } : null);
+});
+async function init() { // 初始化
+  if (props.modelValue?.name) { // 防止第一页没有当前初始化namespace
+    search.value = props.modelValue?.name;
+    await getNameSpace();
+    bindInit.value = namespaceList.value.find(v => v.label === props.modelValue?.name);
+    search.value = '';
+  }
+  await getNameSpace();
+  const bindId = props.modelValue?.id || bindInit.value?.value;
+  nameSpaceId.value = props.modelValue && bindId ? bindId : createRepoData ? createRepoData.value : id;
+}
+init();
+async function getNameSpace() { // 获取命名空间枚举
+  loading.value = true;
+  const result = await getManageableGroups({
+    page: 1,
+    per_page: pageSize.value,
+    search: search.value,
+    is_root: true
+  });
+  loading.value = false;
+  if (result.data) {
+    const { content, total } = result.data.data;
+    const nameList = content.map((item: any) => ({
+      value: item.id,
+      label: item.full_name,
+      visibility: item.visibility
+    }));
+    if (props.modelValue?.id && !nameList.find(v => (v.value === props.modelValue?.id))) {
+      const { id, name, visibility } = props.modelValue;
+      nameList.unshift({ value: id, label: name, visibility });
+    } else nameList.unshift(createRepoData || { value: id, label: username });
+    namespaceList.value = nameList;
+    totalCount.value = total;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>