feat(projects): page manage_role

src/views/manage/role/index.vue

@@ -1,7 +1,225 @@
-<script setup lang="ts"></script>
+<script setup lang="tsx">
+import { ref } from 'vue';
+import { NButton, NPopconfirm } from 'naive-ui';
+import { useBoolean } from '@sa/hooks';
+import { fetchGetRoleList } from '@/service/api';
+import { useAppStore } from '@/store/modules/app';
+import { useTable } from '@/hooks/common/table';
+import { $t } from '@/locales';
+import { roleStatusOptions } from '@/constants/business';
+import { translateOptions } from '@/utils/common';
+import OperateRoleDrawer, { type OperateType } from './operate-role-drawer.vue';
+
+const appStore = useAppStore();
+const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
+
+const { columns, filteredColumns, data, loading, pagination, getData, searchParams, resetSearchParams } = useTable<
+  Api.SystemManage.Role,
+  typeof fetchGetRoleList,
+  'index' | 'operate'
+>({
+  apiFn: fetchGetRoleList,
+  apiParams: {
+    current: 1,
+    size: 10
+  },
+  transformer: res => {
+    const { records = [], current = 1, size = 10, total = 0 } = res.data || {};
+
+    return {
+      data: records,
+      pageNum: current,
+      pageSize: size,
+      total
+    };
+  },
+  columns: () => [
+    {
+      type: 'selection',
+      align: 'center',
+      width: 48
+    },
+    {
+      key: 'index',
+      title: $t('common.index'),
+      render: (_, index): string => getIndex(index),
+      width: 64,
+      align: 'center'
+    },
+    {
+      key: 'roleName',
+      title: $t('page.manage.role.roleName'),
+      align: 'center'
+    },
+    {
+      key: 'roleCode',
+      title: $t('page.manage.role.roleCode')
+    },
+    {
+      key: 'roleDesc',
+      title: $t('page.manage.role.roleDesc')
+    },
+    {
+      key: 'roleStatus',
+      title: $t('page.manage.role.roleStatus'),
+      align: 'center'
+    },
+    {
+      key: 'operate',
+      title: $t('common.operate'),
+      align: 'center',
+      width: 130,
+      render: row => (
+        <div class="flex-center gap-8px">
+          <NButton type="primary" ghost size="small" onClick={() => handleEdit(row.id)}>
+            {$t('common.edit')}
+          </NButton>
+          <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
+            {{
+              default: () => $t('common.confirmDelete'),
+              trigger: () => (
+                <NButton type="error" ghost size="small">
+                  {$t('common.delete')}
+                </NButton>
+              )
+            }}
+          </NPopconfirm>
+        </div>
+      )
+    }
+  ]
+});
+
+const operateType = ref<OperateType>('add');
+
+function handleAdd() {
+  operateType.value = 'add';
+  openDrawer();
+}
+
+const checkedRowKeys = ref<string[]>([]);
+
+async function handleBatchDelete() {
+  // request
+  console.log(checkedRowKeys.value);
+  window.$message?.success($t('common.deleteSuccess'));
+
+  checkedRowKeys.value = [];
+
+  getData();
+}
+
+/** the editing row data */
+const editingData = ref<Api.SystemManage.Role | null>(null);
+
+function handleEdit(id: number) {
+  operateType.value = 'edit';
+  editingData.value = data.value.find(item => item.id === id) || null;
+  openDrawer();
+}
+
+async function handleDelete(id: number) {
+  // request
+  console.log(id);
+  window.$message?.success($t('common.deleteSuccess'));
+
+  getData();
+}
+
+function getIndex(index: number) {
+  const { page = 0, pageSize = 10 } = pagination;
+
+  return String((page - 1) * pageSize + index + 1);
+}
+</script>
 
 <template>
-  <LookForward />
+  <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
+    <NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper">
+      <NForm :model="searchParams" label-placement="left">
+        <NGrid responsive="screen" item-responsive>
+          <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleName')" path="roleName" class="pr-24px">
+            <NInput v-model:value="searchParams.roleName" :placeholder="$t('page.manage.role.form.roleName')" />
+          </NFormItemGi>
+          <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleCode')" path="roleCode" class="pr-24px">
+            <NInput v-model:value="searchParams.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" />
+          </NFormItemGi>
+          <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleStatus')" path="roleStatus" class="pr-24px">
+            <NSelect
+              v-model:value="searchParams.roleStatus"
+              :placeholder="$t('page.manage.role.form.roleStatus')"
+              :options="translateOptions(roleStatusOptions)"
+              clearable
+            />
+          </NFormItemGi>
+          <NFormItemGi span="24 s:12 m:6">
+            <NSpace class="w-full" justify="end">
+              <NButton @click="resetSearchParams">
+                <template #icon>
+                  <icon-ic-round-refresh class="text-icon" />
+                </template>
+                {{ $t('common.reset') }}
+              </NButton>
+              <NButton type="primary" ghost @click="getData">
+                <template #icon>
+                  <icon-ic-round-search class="text-icon" />
+                </template>
+                {{ $t('common.search') }}
+              </NButton>
+            </NSpace>
+          </NFormItemGi>
+        </NGrid>
+      </NForm>
+    </NCard>
+    <NCard :title="$t('page.manage.role.title')" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
+      <template #header-extra>
+        <NSpace wrap justify="end" class="<sm:w-200px">
+          <NButton size="small" ghost type="primary" @click="handleAdd">
+            <template #icon>
+              <icon-ic-round-plus class="text-icon" />
+            </template>
+            {{ $t('common.add') }}
+          </NButton>
+          <NPopconfirm @positive-click="handleBatchDelete">
+            <template #trigger>
+              <NButton size="small" ghost type="error" :disabled="checkedRowKeys.length === 0">
+                <template #icon>
+                  <icon-ic-round-delete class="text-icon" />
+                </template>
+                {{ $t('common.batchDelete') }}
+              </NButton>
+            </template>
+            {{ $t('common.confirmDelete') }}
+          </NPopconfirm>
+          <NButton size="small" @click="getData">
+            <template #icon>
+              <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
+            </template>
+            {{ $t('common.refresh') }}
+          </NButton>
+          <TableColumnSetting v-model:columns="filteredColumns" />
+        </NSpace>
+      </template>
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys"
+        :columns="columns"
+        :data="data"
+        size="small"
+        :flex-height="!appStore.isMobile"
+        :scroll-x="640"
+        :loading="loading"
+        :pagination="pagination"
+        :row-key="item => item.id"
+        class="sm:h-full"
+      />
+      <OperateRoleDrawer
+        v-model:visible="drawerVisible"
+        :operate-type="operateType"
+        :row-data="editingData"
+        @submitted="getData"
+      />
+    </NCard>
+  </div>
 </template>
 
 <style scoped></style>

src/views/manage/role/operate-role-drawer.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+import { roleStatusOptions } from '@/constants/business';
+import { translateOptions } from '@/utils/common';
+
+defineOptions({
+  name: 'OperateRoleDrawer'
+});
+
+/**
+ * the type of operation
+ *
+ * - add: add role
+ * - edit: edit role
+ */
+export type OperateType = 'add' | 'edit';
+
+interface Props {
+  /** the type of operation */
+  operateType: OperateType;
+  /** the edit row data */
+  rowData?: Api.SystemManage.Role | null;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate } = useNaiveForm();
+const { defaultRequiredRule } = useFormRules();
+
+const title = computed(() => {
+  const titles: Record<OperateType, string> = {
+    add: $t('page.manage.role.addRole'),
+    edit: $t('page.manage.role.editRole')
+  };
+  return titles[props.operateType];
+});
+
+type Model = Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'roleDesc' | 'roleStatus'>;
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    roleName: '',
+    roleCode: '',
+    roleDesc: '',
+    roleStatus: null
+  };
+}
+
+type RuleKey = Exclude<keyof Model, 'roleDesc'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  roleName: defaultRequiredRule,
+  roleCode: defaultRequiredRule,
+  roleStatus: defaultRequiredRule
+};
+
+function handleUpdateModelWhenEdit() {
+  if (props.operateType === 'add') {
+    Object.assign(model, createDefaultModel());
+    return;
+  }
+
+  if (props.operateType === 'edit' && props.rowData) {
+    Object.assign(model, props.rowData);
+  }
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+  // request
+  window.$message?.success($t('common.updateSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModelWhenEdit();
+  }
+});
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="360">
+    <NDrawerContent :title="title" :native-scrollbar="false" closable>
+      <NForm ref="formRef" :model="model" :rules="rules">
+        <NFormItem :label="$t('page.manage.role.roleName')" path="roleName">
+          <NInput v-model:value="model.roleName" :placeholder="$t('page.manage.role.form.roleName')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.role.roleCode')" path="roleCode">
+          <NInput v-model:value="model.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.role.roleStatus')" path="roleStatus">
+          <NSelect
+            v-model:value="model.roleStatus"
+            :placeholder="$t('page.manage.role.form.roleStatus')"
+            :options="translateOptions(roleStatusOptions)"
+          />
+        </NFormItem>
+        <NFormItem :label="$t('page.manage.role.roleDesc')" path="roleDesc">
+          <NInput v-model:value="model.roleDesc" :placeholder="$t('page.manage.role.form.roleDesc')" />
+        </NFormItem>
+      </NForm>
+      <template #footer>
+        <NSpace :size="16">
+          <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+          <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
+        </NSpace>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped></style>

src/views/manage/route/index.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { onActivated } from 'vue';
+import { fetchGetRoleList } from '@/service/api';
 
-console.log('setup');
-
-onActivated(() => {
-  console.log('onActivated');
+fetchGetRoleList().then(res => {
+  console.log(res);
 });
 </script>