feat: add dict page

locales/zh_CN.json

@@ -84,9 +84,9 @@
       "searchPlaceholder": "搜索图标",
       "clearIcon": "清除图标"
     },
-    "copyText":{
-      "tooltip":"复制",
-      "message":"复制成功"
+    "copyText": {
+      "tooltip": "复制",
+      "message": "复制成功"
     }
   },
   "login": {

src/components/common/HelpInfo.vue

@@ -9,7 +9,7 @@ const props = defineProps<Props>()
 <template>
   <n-tooltip :show-arrow="false" trigger="hover">
     <template #trigger>
-      <icon-park-outline-help  class="op-50 cursor-help"/>
+      <icon-park-outline-help class="op-50 cursor-help" />
     </template>
     {{ props.message }}
   </n-tooltip>

src/components/common/NovaIcon.vue

@@ -46,7 +46,7 @@ function getLocalIcon(icon: string) {
     <template v-else>
       <Icon :icon="icon" />
     </template>
-</n-icon>
+  </n-icon>
 </template>
 
 <style scoped></style>

src/hooks/useEcharts.ts

@@ -79,7 +79,8 @@ export function useEcharts(el: Ref<HTMLElement | null>, chartOptions: Ref<ECOpti
 
   async function render() {
     // 宽或高不存在时不渲染
-    if (!width || !height) return
+    if (!width || !height)
+      return
 
     const chartTheme = appStore.colorMode ? 'dark' : 'light'
     await nextTick()

src/layouts/mixMenu.layout.vue

@@ -52,7 +52,7 @@ onMounted(() => {
 
 const sideMenu = ref<MenuOption[]>([])
 function handleSideMenu(key: string) {
-  // @ts-ignore
+  // @ts-expect-error no error at here
   const targetMenu = routeStore.menus.find(i => i.key === key)
   if (targetMenu) {
     sideMenu.value = targetMenu.children ? targetMenu.children : [targetMenu]

src/service/api/login.ts

@@ -5,8 +5,8 @@ interface Ilogin {
   password: string
 }
 
-export function fetchLogin(params: Ilogin) {
-  const methodInstance = request.Post<Service.ResponseResult<Api.Login.Info>>('/login', params)
+export function fetchLogin(data: Ilogin) {
+  const methodInstance = request.Post<Service.ResponseResult<Api.Login.Info>>('/login', data)
   methodInstance.meta = {
     authRole: null,
   }

src/service/api/system.ts

@@ -2,14 +2,25 @@ import { request } from '../http'
 
 // 获取所有路由信息
 export function fetchAllRoutes() {
-  return request.Get<Service.ResponseResult<AppRoute.RowRoute[]> >('/getUserRoutes')
+  return request.Get<Service.ResponseResult<AppRoute.RowRoute[]>>('/getUserRoutes')
 }
 
 // 获取所有用户信息
 export function fetchUserPage() {
-  return request.Get<Service.ResponseResult<Entity.User[]> >('/userPage')
+  return request.Get<Service.ResponseResult<Entity.User[]>>('/userPage')
 }
 // 获取所有角色列表
 export function fetchRoleList() {
-  return request.Get<Service.ResponseResult<Entity.Role[]> >('/role/list')
+  return request.Get<Service.ResponseResult<Entity.Role[]>>('/role/list')
+}
+
+// 获取所有字典列表
+export function fetchDictList() {
+  return request.Get<Service.ResponseResult<Entity.Dict[]>>('/dict/list')
+}
+
+// 获取所有字典列表
+export function fetchDictContent(id: number) {
+  const params = { id }
+  return request.Get<Service.ResponseResult<Entity.Dict[]>>('/dict/contentById', { params })
 }

src/typings/entities/dict.d.ts

@@ -0,0 +1,12 @@
+/// <reference path="../global.d.ts"/>
+
+/* 字典数据库表字段 */
+namespace Entity {
+
+  interface Dict {
+    id?: number
+    pid?: number
+    dictLabel?: string
+    dictValue?: number
+  }
+}

src/views/setting/account/index.vue

@@ -199,19 +199,20 @@ const treeData = ref([
       </n-card>
 
       <n-card class="flex-1">
-        <NSpace vertical size="large">
-          <div class="flex gap-4">
-            <NButton type="primary" @click="modalRef.openModal('add')">
-              <template #icon>
-                <icon-park-outline-add-one />
-              </template>
-              新建用户
-            </NButton>
-          </div>
+        <template #header>
+          <NButton type="primary" @click="modalRef.openModal('add')">
+            <template #icon>
+              <icon-park-outline-add-one />
+            </template>
+            新建用户
+          </NButton>
+        </template>
+        <NSpace vertical>
           <n-data-table :columns="columns" :data="listData" :loading="loading" />
           <Pagination :count="count" @change="changePage" />
-          <TableModal ref="modalRef" modal-name="用户" />
         </NSpace>
+
+        <TableModal ref="modalRef" modal-name="用户" />
       </n-card>
     </NSpace>
   </n-flex>

src/views/setting/dictionary/components/TableModal.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { useBoolean } from '@/hooks'
+
+interface Props {
+  modalName?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modalName: '',
+})
+
+const emit = defineEmits<{
+  open: []
+  close: []
+}>()
+
+const { bool: modalVisible, setTrue: showModal, setFalse: hiddenModal } = useBoolean(false)
+
+const { bool: submitLoading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
+
+const formDefault: Entity.Dict = {
+  dictLabel: '',
+  dictValue: -1,
+}
+const formModel = ref<Entity.Dict>({ ...formDefault })
+
+type ModalType = 'add' | 'view' | 'edit'
+const modalType = shallowRef<ModalType>('add')
+const modalTitle = computed(() => {
+  const titleMap: Record<ModalType, string> = {
+    add: '添加',
+    view: '查看',
+    edit: '编辑',
+  }
+  return `${titleMap[modalType.value]}${props.modalName}`
+})
+
+async function openModal(type: ModalType = 'add', data: any) {
+  emit('open')
+  modalType.value = type
+  showModal()
+  const handlers = {
+    async add() {
+      formModel.value = { ...formDefault }
+    },
+    async view() {
+      if (!data)
+        return
+      formModel.value = { ...data }
+    },
+    async edit() {
+      if (!data)
+        return
+      formModel.value = { ...data }
+    },
+  }
+  await handlers[type]()
+}
+
+function closeModal() {
+  hiddenModal()
+  endLoading()
+  emit('close')
+}
+
+defineExpose({
+  openModal,
+})
+
+const formRef = ref()
+async function submitModal() {
+  const handlers = {
+    async add() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          window.$message.success('模拟新增成功')
+          resolve(true)
+        }, 2000)
+      })
+    },
+    async edit() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          window.$message.success('模拟编辑成功')
+          resolve(true)
+        }, 2000)
+      })
+    },
+    async view() {
+      return true
+    },
+  }
+  await formRef.value?.validate()
+  startLoading()
+  await handlers[modalType.value]() && closeModal()
+}
+
+const rules = {
+  dictLabel: {
+    required: true,
+    message: '请输入字典名称',
+    trigger: 'blur',
+  },
+  aaa: {
+    required: true,
+    message: '请输入字典值',
+    trigger: 'blur',
+  },
+}
+</script>
+
+<template>
+  <n-modal
+    v-model:show="modalVisible"
+    :mask-closable="false"
+    preset="card"
+    :title="modalTitle"
+    class="w-700px"
+    :segmented="{
+      content: true,
+      action: true,
+    }"
+  >
+    <n-form ref="formRef" :rules="rules" label-placement="left" :model="formModel" :label-width="100" :disabled="modalType === 'view'">
+      <n-form-item label="字典名称" path="dictLabel">
+        <n-input v-model:value="formModel.dictLabel" />
+      </n-form-item>
+      <n-form-item label="字典值" path="dictValue">
+        <n-input-number v-model:value="formModel.dictValue" />
+      </n-form-item>
+    </n-form>
+    <template #action>
+      <n-space justify="center">
+        <n-button @click="closeModal">
+          取消
+        </n-button>
+        <n-button type="primary" :loading="submitLoading" @click="submitModal">
+          提交
+        </n-button>
+      </n-space>
+    </template>
+  </n-modal>
+</template>