字典管理

src/apis/modules/dict.js

@@ -0,0 +1,26 @@
+/**
+ *  区域模块接口
+ */
+import request from '@/utils/request'
+// 获取项目列表
+export const getProjectList = (params) => request.basic.get('/api/v1/dictionary-categories', params)
+// 获取单挑数据
+export const getItem = (id) => request.basic.get(`/api/v1/dictionary-categories/${id}`)
+// 添加条目
+export const createItem = (params) => request.basic.post('/api/v1/dictionary-categories', params)
+// 更新role
+export const updateItem = (id, params) => request.basic.put(`/api/v1/dictionary-categories/${id}`, params)
+// 删除数据
+export const delItem = (id) => request.basic.delete(`/api/v1/dictionary-categories/${id}`)
+
+// 获取单挑数据
+export const getDetailCode = (params) => request.basic.get(`/api/v1/dictionaries`,params)
+// 获取单挑数据
+export const getDetailItem = (id) => request.basic.get(`/api/v1/dictionaries/${id}`)
+// 添加条目
+export const createDetailItem = (params) => request.basic.post('/api/v1/dictionaries', params)
+// 更新role
+export const updateDetailItem = (id, params) => request.basic.put(`/api/v1/dictionaries/${id}`, params)
+// 删除数据
+export const delDetailItem = (id) => request.basic.delete(`/api/v1/dictionaries/${id}`)
+

src/hooks/index.js

@@ -4,3 +4,4 @@ export { default as useMenu } from './useMenu'
 export { default as useModal } from './useModal'
 export { default as useMultiTab } from './useMultiTab'
 export { default as usePagination } from './usePagination'
+export { default as useSpining } from './useSpining'

src/hooks/useSpining.js

@@ -0,0 +1,15 @@
+import { ref } from 'vue'
+export default () => {
+    const spining = ref(false) // 直接使用基本类型ref
+    const showSpining = () => {
+        spining.value = true
+    }
+    const hideSpining = () => {
+        spining.value = false
+    }
+    return {
+        spining, // 直接暴露ref
+        showSpining,
+        hideSpining,
+    }
+}

src/locales/lang/zh-CN/menu.js

@@ -32,4 +32,6 @@ export default {
     account: '个人页',
     'account.trigger': '触发报错',
     'account.logout': '退出登录',
+    'dict': '字典管理',
+    'dict-detail': '字典数据',
 }

src/router/routes/dict.js

@@ -0,0 +1,10 @@
+export default [
+    {
+        path: '/system/dict',
+        name: 'dict',
+        component: () => import('/system/dict/index.vue'),
+        meta: {
+            title: '字典管理',
+        },
+    },
+]

src/router/routes/system.js

@@ -57,6 +57,28 @@ export default [
                     permission: '*',
                 },
             },
+            {
+                path: 'dict',
+                name: 'dict',
+                component: 'system/dictionary/index.vue',
+                meta: {
+                    title: '字典管理',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'dict-detail',
+                name: 'dict-detail',
+                component: 'system/dictionary/detail.vue',
+                meta: {
+                    title: '字典数据',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
         ],
     },
 ]

src/views/system/dict/components/EditDictDialog.vue

@@ -66,6 +66,7 @@ function handleEdit(record = {}) {
  * 确定
  */
 function handleOk() {
+    console.log('handleOk')
     formRef.value
         .validateFields()
         .then(async (values) => {
@@ -77,6 +78,7 @@ function handleOk() {
                 let result = null
                 switch (modal.value.type) {
                     case 'create':
+                        console.log('create')
                         result = await apis.common.create(params).catch(() => {
                             throw new Error()
                         })
@@ -93,6 +95,7 @@ function handleOk() {
                     emit('ok')
                 }
             } catch (error) {
+                console.log(error)
                 hideLoading()
             }
         })

src/views/system/dictionary/components/Department.vue

@@ -0,0 +1,169 @@
+<template>
+    <a-card
+        :body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
+        :style="{
+            position: 'sticky',
+            top: appStore.mainOffsetTop,
+            height: appStore.mainHeight,
+        }">
+        <template #title>
+            <a-input-search placeholder="搜索部门"></a-input-search>
+        </template>
+        <x-scrollbar class="pa-8-2">
+            <a-spin :spinning="loading">
+                <a-tree
+                    block-node
+                    :selected-keys="selectedKeys"
+                    :tree-data="listData"
+                    :field-names="{ key: 'id', children: 'children' }"
+                    @select="onSelect">
+                    <template #title="{ title }">
+                        <span class="ant-tree-title__name">{{ title }}</span>
+                        <span class="ant-tree-title__actions">
+                            <a-dropdown
+                                :trigger="['click']"
+                                @click.stop>
+                                <x-action-button>
+                                    <more-outlined></more-outlined>
+                                </x-action-button>
+                                <template #overlay>
+                                    <a-menu>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            添加子部门
+                                        </a-menu-item>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            编辑
+                                        </a-menu-item>
+                                        <a-menu-item @click="handleDelete">删除</a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
+                        </span>
+                    </template>
+                </a-tree>
+                <empty
+                    v-if="!listData.length"
+                    :image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
+            </a-spin>
+        </x-scrollbar>
+        <template #actions>
+            <span @click="$refs.editDepartmentDialogRef.handleCreate()">
+                <plus-outlined></plus-outlined>
+                新建部门
+            </span>
+        </template>
+    </a-card>
+
+    <edit-department-dialog
+        ref="editDepartmentDialogRef"
+        @ok="onOk"></edit-department-dialog>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+import { ref, watch } from 'vue'
+import { usePagination } from '@/hooks'
+import apis from '@/apis'
+import { Empty, Modal, message } from 'ant-design-vue'
+import { config } from '@/config'
+import { head, get, find } from 'lodash-es'
+import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import EditDepartmentDialog from './EditDepartmentDialog.vue'
+
+const props = defineProps({
+    value: {
+        type: String,
+        default: '',
+    },
+})
+
+const emit = defineEmits(['change', 'update:value'])
+
+const appStore = useAppStore()
+const { listData, loading, showLoading, hideLoading } = usePagination()
+
+const editDepartmentDialogRef = ref()
+const selectedKeys = ref([props.value])
+
+watch(
+    () => props.value,
+    (val) => {
+        if (val === selectedKeys.value?.[0]) return
+        selectedKeys.value = [val]
+    }
+)
+
+getList()
+
+/**
+ * 获取列表
+ * @returns {Promise<void>}
+ */
+async function getList() {
+    try {
+        showLoading()
+        const { code, data } = await apis.common.getPageList().catch(() => {
+            throw new Error()
+        })
+        hideLoading()
+        if (config('http.code.success') === code) {
+            const { records } = data
+            listData.value = records
+            if (listData.value.length) {
+                selectedKeys.value = [get(head(listData.value), 'id')]
+                trigger()
+            }
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        okText: '确认',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+function onSelect(keys) {
+    if (!keys.length) return
+    selectedKeys.value = keys
+    trigger()
+}
+
+async function onOk() {
+    await getList()
+}
+
+function trigger() {
+    const value = head(selectedKeys.value)
+    const record = find(listData.value, { id: value })
+    emit('update:value', value)
+    emit('change', record)
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/system/dictionary/components/EditDepartmentDialog.vue

@@ -0,0 +1,131 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="480"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-form-item
+                label="部门名称"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+            <a-form-item
+                label="上级部门"
+                name="parent_id">
+                <a-tree-select v-model:value="formData.parent_id"></a-tree-select>
+            </a-form-item>
+            <a-form-item
+                label="部门负责人"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref('取消')
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建部门',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑部门',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    cancelText.value = '取消'
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/system/dictionary/components/EditDialog.vue

@@ -0,0 +1,154 @@
+<template>
+    <a-modal :open="modal.open" :title="modal.title" :width="800" :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose" :cancel-text="cancelText" :ok-text="okText" @ok="handleOk" @cancel="handleCancel">
+        <a-spin :spinning="spining">
+            <a-form ref="formRef" :model="formData" :rules="formRules">
+                <a-card class="mb-8-2">
+                    <a-row :gutter="12">
+                        <a-col :span="24">
+                            <a-form-item :label="'字典名称'" name="name">
+                                <a-input :placeholder="'请输入字典名称'" v-model:value="formData.name"
+                                    style="width: 100%;"></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item :label="'备注'" name="introduction">
+                                <a-input :placeholder="'请输入备注'" v-model:value="formData.introduction"
+                                    style="width: 100%;"></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item :label="'状态'" name="status">
+                                <a-radio-group v-model:value="formData.status" :options="[
+                                    { label: '启用', value: 'enabled' },
+                                    { label: '停用', value: 'disabled' },
+                                ]"></a-radio-group>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                </a-card>
+            </a-form>
+        </a-spin>
+    </a-modal>
+</template>
+
+<script setup>
+import { ref, h, onBeforeMount } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal, useSpining } from '@/hooks'
+import { message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const { spining, showSpining, hideSpining } = useSpining()
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+formRules.value = {
+    name: { required: true, message: '请输入字典名称' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建字典',
+    })
+    formData.value.status = 'enabled'
+}
+
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑字典',
+    })
+    try {
+        showSpining()
+        const { data, success } = await apis.dict.getItem(record.id).catch()
+        if (!success) {
+            hideModal()
+            return
+        }
+       formData.value = { ...data }
+        hideSpining()
+    } catch (error) {
+        message.error({ content: error.message })
+        hideSpining()
+    }
+
+}
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value.validateFields().then(async (values) => {
+        try {
+
+            showLoading()
+            const params = {
+                ...formData.value,
+            }
+            let result = null
+            switch (modal.value.type) {
+                case 'create':
+                    params.companyId = 'C001'
+                    result = await apis.dict.createItem(params).catch((error) => {
+                        console.log(error.message)
+                        throw new Error(error)
+                    })
+                    break
+                case 'edit':
+                    result = await apis.dict.updateItem(formData.value.id, params).catch(() => {
+                        console.log(error.message)
+                        throw new Error(error)
+                    })
+                    break
+            }
+            hideLoading()
+            if (config('http.code.success') === result?.success) {
+                hideModal()
+                emit('ok')
+            }
+        } catch (error) {
+            message.error({ content: error.message })
+            hideLoading()
+        }
+    })
+        .catch((e) => {
+            hideLoading()
+        })
+}
+
+// 在 setup 中添加这些方法
+
+/**
+ * 取消
+ */
+function handleCancel() {
+
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+
+</script>
+
+<style lang="less" scoped></style>

src/views/system/dictionary/components/EditDialogDetail.vue

@@ -0,0 +1,166 @@
+<template>
+    <a-modal :open="modal.open" :title="modal.title" :width="800" :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose" :cancel-text="cancelText" :ok-text="okText" @ok="handleOk" @cancel="handleCancel">
+        <a-spin :spinning="spining">
+            <a-form ref="formRef" :model="formData" :rules="formRules">
+                <a-card class="mb-8-2">
+                    <a-row :gutter="12">
+                        <a-col :span="24">
+                            <a-form-item :label="'字典标签'" name="introduction">
+                                <a-input :placeholder="'请输入字典标签'" v-model:value="formData.introduction"
+                                    style="width: 100%;"></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item :label="'字典值'" name="dval">
+                                <a-input :placeholder="'请输入字典值'" v-model:value="formData.dval"
+                                    style="width: 100%;"></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item :label="'备注'" name="remark">
+                                <a-input :placeholder="'请输入备注'" v-model:value="formData.remark"
+                                    style="width: 100%;"></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="24">
+                            <a-form-item :label="'状态'" name="status">
+                                <a-radio-group v-model:value="formData.status" :options="[
+                                    { label: '启用', value: 'enabled' },
+                                    { label: '停用', value: 'disabled' },
+                                ]"></a-radio-group>
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                </a-card>
+            </a-form>
+        </a-spin>
+    </a-modal>
+</template>
+
+<script setup>
+import { ref, h, onBeforeMount,defineProps } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal, useSpining } from '@/hooks'
+import { message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const { spining, showSpining, hideSpining } = useSpining()
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+formRules.value = {
+    introduction: { required: true, message: '请输入字典标签' },
+    dval: { required: true, message: '请输入字典值' },
+}
+const props=defineProps({
+    categoryCode:{
+        type:String,
+        default:''
+    }
+})
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建字典数据',
+    })
+    formData.value.status = 'enabled'
+}
+
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑字典数据',
+    })
+    try {
+        showSpining()
+        const { data, success } = await apis.dict.getDetailItem(record.id).catch()
+        if (!success) {
+            hideModal()
+            return
+        }
+        formData.value = { ...data }
+        hideSpining()
+    } catch (error) {
+        message.error({ content: error.message })
+        hideSpining()
+    }
+
+}
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value.validateFields().then(async (values) => {
+        try {
+
+            showLoading()
+            const params = {
+                ...formData.value,
+            }
+            let result = null
+            switch (modal.value.type) {
+                case 'create':
+                        params.categoryCode=props.categoryCode
+                    result = await apis.dict.createDetailItem(params).catch((error) => {
+                        console.log(error.message)
+                        throw new Error(error)
+                    })
+                    break
+                case 'edit':
+                    result = await apis.dict.updateDetailItem(formData.value.id, params).catch(() => {
+                        console.log(error.message)
+                        throw new Error(error)
+                    })
+                    break
+            }
+            hideLoading()
+            if (config('http.code.success') === result?.success) {
+                hideModal()
+                emit('ok')
+            }
+        } catch (error) {
+            message.error({ content: error.message })
+            hideLoading()
+        }
+    })
+        .catch((e) => {
+            hideLoading()
+        })
+}
+
+// 在 setup 中添加这些方法
+
+/**
+ * 取消
+ */
+function handleCancel() {
+
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+
+</script>
+
+<style lang="less" scoped></style>

src/views/system/dictionary/detail.vue

@@ -0,0 +1,176 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form :label-col="{ style: { width: '100px' } }" :model="searchFormData" layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item :label="'字典名称'" name="name">
+                            <a-input :placeholder="'请输入字典名称'" v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col class="align-right" v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button ghost type="primary" @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row :gutter="8" :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <a-button type="primary" @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        添加数据
+                    </a-button>
+                </x-action-bar>
+                <a-table :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
+                    :scroll="{ x: 1000 }" @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.user.edit') }}</template>
+                                    <edit-outlined /> </a-tooltip></x-action-button>
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title>字典数据</template>
+                                    <plus-outlined /> </a-tooltip></x-action-button>
+                            <x-action-button @click="handleDelete(record)">
+                                <a-tooltip>
+                                    <template #title>{{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" /> </a-tooltip></x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusUserTypeEnum } from '@/enums/system'
+import { usePagination } from '@/hooks'
+import { useRoute, useRouter } from 'vue-router'
+import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+defineOptions({
+    name: 'dictionary-detail',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = [
+    { title: '字典名称', dataIndex: 'name' },
+    { title: 'ID', dataIndex: 'id' },
+    { title: '备注', dataIndex: 'introduction', key: 'introduction' },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 130 },
+]
+
+const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } =
+    usePagination()
+
+const editDialogRef = ref()
+const router = useRouter()
+getPageList(router.currentRoute.value.query.id)
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList(id) {
+    try {
+        showLoading()
+      
+        if (id) {
+         console.log(router)
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.dict
+            .getDetailItem(id)
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+        }
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: t('pages.system.user.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success } = await apis.dict.delItem(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetPagination()
+    getPageList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/system/dictionary/index.vue

@@ -0,0 +1,284 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form :label-col="{ style: { width: '100px' } }" :model="searchFormData" layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item :label="'字典名称'" name="name">
+                            <a-input :placeholder="'请输入字典名称'" v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col class="align-right" v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button ghost type="primary" @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row :gutter="8" :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <a-button type="primary" @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        添加字典
+                    </a-button>
+                </x-action-bar>
+                <a-table :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
+                    :scroll="{ x: 1000 }" @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                          <template v-if="'status' === column.dataIndex">
+                            <a-tag v-if="record.status === 'enabled'" :color="'green'">启用</a-tag>
+                            <a-tag v-if="record.status === 'disabled'" :color="'red'">停用</a-tag>
+                        </template>
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.user.edit') }}</template>
+                                    <edit-outlined /> </a-tooltip></x-action-button>
+                            <x-action-button @click="handleDetail(record)">
+                                <a-tooltip>
+                                    <template #title>字典数据</template>
+                                    <plus-outlined /> </a-tooltip></x-action-button>
+                            <x-action-button @click="handleDelete(record)">
+                                <a-tooltip>
+                                    <template #title>{{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" /> </a-tooltip></x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+    <a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name" :root-style="{ color: 'blue' }"
+        style="color: red" title="字典数据" placement="right" @after-open-change="afterOpenChange" width="800">
+         <x-action-bar class="mb-8-2">
+                    <a-button type="primary" @click="$refs.editDetailDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        添加数据
+                    </a-button>
+                </x-action-bar>
+         <a-table :columns="detailColumns" :data-source="listDetailData" :loading="detailLoading" >
+             
+                    <template #bodyCell="{ column, record }">
+                         <template v-if="'status' === column.key">
+                            <a-tag v-if="record.status === 'enabled'" :color="'green'">启用</a-tag>
+                            <a-tag v-if="record.status === 'disabled'" :color="'red'">停用</a-tag>
+                        </template>
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDetailDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.user.edit') }}</template>
+                                    <edit-outlined /> </a-tooltip></x-action-button>
+                            <x-action-button @click="handleDetailDelete(record)">
+                                <a-tooltip>
+                                    <template #title>{{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" /> </a-tooltip></x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+    </a-drawer>
+    <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
+    <edit-dialog-detail ref="editDetailDialogRef" @ok="onOkDetail" :categoryCode="currentCode"></edit-dialog-detail>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusUserTypeEnum } from '@/enums/system'
+import { usePagination } from '@/hooks'
+import { useRoute, useRouter } from 'vue-router'
+import EditDialog from './components/EditDialog.vue'
+import EditDialogDetail from './components/EditDialogDetail.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+defineOptions({
+    name: 'dictionary',
+})
+const open = ref(false);
+const { t } = useI18n() // 解构出t方法
+const router = useRouter()
+const columns = [
+    { title: '字典名称', dataIndex: 'name' },
+    { title: '字典类型', dataIndex: 'code' },
+    { title: '备注', dataIndex: 'introduction', key: 'introduction' },
+    { title: '状态', dataIndex: 'status', key: 'status' },
+
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 130 },
+]
+const currentCode = ref('');
+const detailLoading = ref(false);
+const listDetailData = ref([]);
+const detailColumns = [
+    { title: '字典标签', dataIndex: 'introduction',width:200 },
+    { title: '字典值', dataIndex: 'dval',width:80 },
+    { title: '备注', dataIndex: 'remark', key: 'remark' },
+    { title: '状态', dataIndex: 'status', key: 'status',width:100 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 130 },
+]
+const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } =
+    usePagination()
+
+const editDialogRef = ref()
+const editDetailDialogRef = ref()
+getPageList()
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList() {
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.dict
+            .getProjectList({
+                pageSize,
+                current: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: t('pages.system.user.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success } = await apis.dict.delItem(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+/**
+ * 删除
+ */
+function handleDetailDelete({ id }) {
+    Modal.confirm({
+        title: t('pages.system.user.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success } = await apis.dict.delDetailItem(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getDetailList(currentCode.value)
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+function handleDetail(record) {
+    // router.push({ path: '/system/dictionary/detail', query: { id: record.id } })
+    open.value = true;
+    currentCode.value=record.code;
+    getDetailList(record.code)
+}
+function getDetailList(code) {
+    try {
+        detailLoading.value = true
+        apis.dict
+            .getDetailCode({ categoryCode: code })
+            .then((res) => {
+                if (config('http.code.success') === res.success) {
+                    listDetailData.value = res.data
+                }
+                 detailLoading.value = false
+            })
+            .catch(() => {
+                throw new Error()
+            })
+    } catch (error) {
+        detailLoading.value = false
+    }
+}
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetPagination()
+    getPageList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
+}
+async function onOkDetail() {
+    if(currentCode.value){
+        await getDetailList(currentCode.value)
+    }
+}
+function afterOpenChange(open) {
+    console.log(open);
+  }
+</script>
+
+<style lang="less" scoped></style>