feat(projects): manage page: manage_role

package.json

@@ -60,6 +60,7 @@
     "nprogress": "0.2.0",
     "pinia": "2.1.7",
     "vue": "3.4.21",
+    "vue-draggable-plus": "0.4.0",
     "vue-i18n": "9.12.0",
     "vue-router": "4.3.0"
   },

src/components/advanced/table-column-setting.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>, K = never">
+import { VueDraggable } from 'vue-draggable-plus';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'TableColumnSetting'
+});
+
+const columns = defineModel<AntDesign.TableColumnCheck[]>('columns', {
+  required: true
+});
+</script>
+
+<template>
+  <APopover placement="bottomRight" trigger="click">
+    <AButton size="small">
+      <div class="flex-y-center gap-8px">
+        <icon-ant-design-setting-outlined class="text-icon" />
+        <span>{{ $t('common.columnSetting') }}</span>
+      </div>
+    </AButton>
+    <template #content>
+      <VueDraggable v-model="columns">
+        <div
+          v-for="item in columns"
+          :key="item.key"
+          class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)"
+        >
+          <icon-mdi-drag class="mr-8px cursor-move text-icon" />
+          <ACheckbox v-model:checked="item.checked">
+            {{ item.title }}
+          </ACheckbox>
+        </div>
+      </VueDraggable>
+    </template>
+  </APopover>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'TableHeaderOperation'
+});
+
+interface Props {
+  disabledDelete?: boolean;
+  loading?: boolean;
+}
+
+defineProps<Props>();
+
+interface Emits {
+  (e: 'add'): void;
+  (e: 'delete'): void;
+  (e: 'refresh'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const columns = defineModel<AntDesign.TableColumnCheck[]>('columns', {
+  default: () => []
+});
+
+function add() {
+  emit('add');
+}
+
+function batchDelete() {
+  emit('delete');
+}
+
+function refresh() {
+  emit('refresh');
+}
+</script>
+
+<template>
+  <ASpace wrap class="justify-end lt-sm:w-200px">
+    <slot name="prefix"></slot>
+    <slot name="default">
+      <AButton size="small" ghost type="primary" @click="add">
+        <div class="flex-y-center gap-8px">
+          <icon-ic-round-plus class="text-icon" />
+          <span>{{ $t('common.add') }}</span>
+        </div>
+      </AButton>
+      <APopconfirm :description="$t('common.confirmDelete')" :disabled="disabledDelete" @confirm="batchDelete">
+        <AButton size="small" danger :disabled="disabledDelete">
+          <div class="flex-y-center gap-8px">
+            <icon-ic-round-delete class="text-icon" />
+            <span>{{ $t('common.batchDelete') }}</span>
+          </div>
+        </AButton>
+      </APopconfirm>
+    </slot>
+    <AButton size="small" @click="refresh">
+      <div class="flex-y-center gap-8px">
+        <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
+        <span>{{ $t('common.refresh') }}</span>
+      </div>
+    </AButton>
+    <TableColumnSetting v-model:columns="columns" />
+    <slot name="suffix"></slot>
+  </ASpace>
+</template>
+
+<style scoped></style>

src/constants/business.ts

@@ -0,0 +1,29 @@
+import { transformRecordToOption } from '@/utils/common';
+
+export const enableStatusRecord: Record<Api.Common.EnableStatus, App.I18n.I18nKey> = {
+  '1': 'page.manage.common.status.enable',
+  '2': 'page.manage.common.status.disable'
+};
+
+export const enableStatusOptions = transformRecordToOption(enableStatusRecord);
+
+export const userGenderRecord: Record<Api.SystemManage.UserGender, App.I18n.I18nKey> = {
+  '1': 'page.manage.user.gender.male',
+  '2': 'page.manage.user.gender.female'
+};
+
+export const userGenderOptions = transformRecordToOption(userGenderRecord);
+
+export const menuTypeRecord: Record<Api.SystemManage.MenuType, App.I18n.I18nKey> = {
+  '1': 'page.manage.menu.type.directory',
+  '2': 'page.manage.menu.type.menu'
+};
+
+export const menuTypeOptions = transformRecordToOption(menuTypeRecord);
+
+export const menuIconTypeRecord: Record<Api.SystemManage.IconType, App.I18n.I18nKey> = {
+  '1': 'page.manage.menu.iconType.iconify',
+  '2': 'page.manage.menu.iconType.local'
+};
+
+export const menuIconTypeOptions = transformRecordToOption(menuIconTypeRecord);

src/constants/common.ts

@@ -0,0 +1,8 @@
+import { transformRecordToOption } from '@/utils/common';
+
+export const yesOrNoRecord: Record<CommonType.YesOrNo, App.I18n.I18nKey> = {
+  Y: 'common.yesOrNo.yes',
+  N: 'common.yesOrNo.no'
+};
+
+export const yesOrNoOptions = transformRecordToOption(yesOrNoRecord);

src/hooks/common/form.ts

@@ -85,8 +85,13 @@ export function useAntdForm() {
     await formRef.value?.validate();
   }
 
+  function resetFields() {
+    formRef.value?.resetFields();
+  }
+
   return {
     formRef,
-    validate
+    validate,
+    resetFields
   };
 }