feat: 新增角色列表

2025-09-24 07:49:47 +08:00 · 2025-05-09 23:26:09 +08:00
parent b70ddb31e9
commit 67b5af9892
25 changed files with 869 additions and 125 deletions
--- a/src/views/system/role/modules/role-search.vue
+++ b/src/views/system/role/modules/role-search.vue
@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useNaiveForm } from '@/hooks/common/form';
+import { useDict } from '@/hooks/business/dict';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'RoleSearch'
+});
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+
+const dateRangeCreateTime = ref<[string, string] | null>(null);
+
+const model = defineModel<Api.System.RoleSearchParams>('model', { required: true });
+
+const { options: sysNormalDisableOptions } = useDict('sys_normal_disable');
+
+async function reset() {
+  dateRangeCreateTime.value = null;
+  Object.assign(model.value.params!, {});
+  await restoreValidation();
+  emit('reset');
+}
+
+async function search() {
+  await validate();
+  if (dateRangeCreateTime.value?.length) {
+    model.value.params!.beginTime = `${dateRangeCreateTime.value[0]} 00:00:00`;
+    model.value.params!.endTime = `${dateRangeCreateTime.value[1]} 23:59:59`;
+  }
+  emit('search');
+}
+</script>
+
+<template>
+  <NCard :bordered="false" size="small" class="card-wrapper">
+    <NCollapse>
+      <NCollapseItem :title="$t('common.search')" name="user-search">
+        <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
+          <NGrid responsive="screen" item-responsive>
+            <NFormItemGi span="24 s:12 m:6" label="角色名称" path="roleName" class="pr-24px">
+              <NInput v-model:value="model.roleName" placeholder="请输入角色名称" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="权限字符" path="roleKey" class="pr-24px">
+              <NInput v-model:value="model.roleKey" placeholder="请输入权限字符" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="角色状态" path="status" class="pr-24px">
+              <NSelect
+                v-model:value="model.status"
+                placeholder="请选择角色状态"
+                :options="sysNormalDisableOptions"
+                clearable
+              />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="创建时间" path="createTime" class="pr-24px">
+              <NDatePicker
+                v-model:formatted-value="dateRangeCreateTime"
+                update-value-on-close
+                class="w-full"
+                type="daterange"
+                value-format="yyyy-MM-dd"
+                clearable
+              />
+            </NFormItemGi>
+            <NFormItemGi span="24" class="pr-24px">
+              <NSpace class="w-full" justify="end">
+                <NButton @click="reset">
+                  <template #icon>
+                    <icon-ic-round-refresh class="text-icon" />
+                  </template>
+                  {{ $t('common.reset') }}
+                </NButton>
+                <NButton type="primary" ghost @click="search">
+                  <template #icon>
+                    <icon-ic-round-search class="text-icon" />
+                  </template>
+                  {{ $t('common.search') }}
+                </NButton>
+              </NSpace>
+            </NFormItemGi>
+          </NGrid>
+        </NForm>
+      </NCollapseItem>
+    </NCollapse>
+  </NCard>
+</template>
+
+<style scoped></style>