feat: 完成用户列表

src/components/advanced/table-header-operation.vue

@@ -11,18 +11,21 @@ interface Props {
   loading?: boolean;
   showAdd?: boolean;
   showDelete?: boolean;
+  showExport?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   itemAlign: undefined,
   showAdd: true,
-  showDelete: true
+  showDelete: true,
+  showExport: false
 });
 
 interface Emits {
   (e: 'add'): void;
   (e: 'delete'): void;
   (e: 'refresh'): void;
+  (e: 'export'): void;
 }
 
 const emit = defineEmits<Emits>();
@@ -42,6 +45,10 @@ function batchDelete() {
 function refresh() {
   emit('refresh');
 }
+
+function handleExport() {
+  emit('export');
+}
 </script>
 
 <template>
@@ -65,7 +72,14 @@ function refresh() {
         </template>
         {{ $t('common.confirmDelete') }}
       </NPopconfirm>
+      <NButton v-if="showExport" size="small" ghost type="warning" @click="handleExport">
+        <template #icon>
+          <icon-ic-round-download class="text-icon" />
+        </template>
+        导出
+      </NButton>
     </slot>
+    <slot name="after"></slot>
     <NButton size="small" @click="refresh">
       <template #icon>
         <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />

src/components/custom/post-select.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useLoading } from '@sa/hooks';
+import type { SelectProps } from 'naive-ui';
+import { ref, useAttrs, watch } from 'vue';
+import { fetchGetPostSelect } from '@/service/api/system';
+
+defineOptions({
+  name: 'PostSelect'
+});
+
+interface Props {
+  deptId?: string;
+  [key: string]: any;
+}
+
+const props = defineProps<Props>();
+
+const value = defineModel<string | null>('value', { required: true });
+
+const attrs: SelectProps = useAttrs();
+
+const { loading: roleLoading, startLoading: startRoleLoading, endLoading: endRoleLoading } = useLoading();
+
+/** the enabled role options */
+const roleOptions = ref<CommonType.Option<CommonType.IdType>[]>([]);
+
+watch(
+  () => props.deptId,
+  () => {
+    if (!props.deptId) return;
+    getRoleOptions();
+  },
+  { immediate: true }
+);
+
+async function getRoleOptions() {
+  startRoleLoading();
+  const { error, data } = await fetchGetPostSelect(props.deptId);
+
+  if (!error) {
+    roleOptions.value = data.map(item => ({
+      label: item.postName,
+      value: item.postId
+    }));
+  }
+  endRoleLoading();
+}
+</script>
+
+<template>
+  <NSelect
+    v-model:value="value"
+    :loading="roleLoading"
+    :options="roleOptions"
+    v-bind="attrs"
+    placeholder="请选择岗位"
+  />
+</template>
+
+<style scoped></style>

src/components/custom/role-select.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useLoading } from '@sa/hooks';
+import type { SelectProps } from 'naive-ui';
+import { ref, useAttrs } from 'vue';
+import { fetchGetRoleSelect } from '@/service/api/system';
+
+defineOptions({
+  name: 'RoleSelect'
+});
+
+interface Props {
+  [key: string]: any;
+}
+
+defineProps<Props>();
+
+const value = defineModel<string | null>('value', { required: true });
+
+const attrs: SelectProps = useAttrs();
+
+const { loading: roleLoading, startLoading: startRoleLoading, endLoading: endRoleLoading } = useLoading();
+
+/** the enabled role options */
+const roleOptions = ref<CommonType.Option<CommonType.IdType>[]>([]);
+
+async function getRoleOptions() {
+  startRoleLoading();
+  const { error, data } = await fetchGetRoleSelect();
+
+  if (!error) {
+    roleOptions.value = data.map(item => ({
+      label: item.roleName,
+      value: item.roleId
+    }));
+  }
+  endRoleLoading();
+}
+
+getRoleOptions();
+</script>
+
+<template>
+  <NSelect
+    v-model:value="value"
+    :loading="roleLoading"
+    :options="roleOptions"
+    v-bind="attrs"
+    placeholder="请选择角色"
+  />
+</template>
+
+<style scoped></style>