From f36911f3c8b928de9026bc89d96f029a2f0345f3 Mon Sep 17 00:00:00 2001
From: Mrtangl <1807746833@qq.com>
Date: Wed, 22 Jun 2022 17:57:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=BC=96=E8=BE=91=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=83=A8=E9=97=A8=E3=80=81=E5=B2=97=E4=BD=8D=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/api/app.ts                       |  16 +-
 admin/src/components/upload/index.vue      | 162 ++++-----
 admin/src/views/permission/admin/edit.vue  | 387 +++++++++++++--------
 admin/src/views/permission/admin/index.vue | 181 +++++-----
 admin/src/views/setting/storage/edit.vue   |   7 +
 admin/src/views/setting/storage/index.vue  |  18 +
 6 files changed, 434 insertions(+), 337 deletions(-)
 create mode 100644 admin/src/views/setting/storage/edit.vue
 create mode 100644 admin/src/views/setting/storage/index.vue

diff --git a/admin/src/api/app.ts b/admin/src/api/app.ts
index a9f57691..0bc6c47d 100644
--- a/admin/src/api/app.ts
+++ b/admin/src/api/app.ts
@@ -1,41 +1,41 @@
 import request from '@/utils/request'
 
 export function apiFileCateAdd(params: any) {
-    return request.post('/album/cateAdd', params)
+    return request.post('/common/album/cateAdd', params)
 }
 
 export function apiFileCateEdit(params: { id: number; name: string }) {
-    return request.post('/album/cateRename', params)
+    return request.post('/common/album/cateRename', params)
 }
 
 // 文件分类删除
 export function apiFileCateDelete(params: { id: number }) {
-    return request.post('/album/cateDel', params)
+    return request.post('/common/album/cateDel', params)
 }
 
 // 文件分类列表
 export function apiFileCateLists(params: any) {
-    return request.get('/album/cateList', { params })
+    return request.get('/common/album/cateList', { params })
 }
 
 // 文件列表
 export function apiFileList(params: any) {
-    return request.get('/album/albumList', { params })
+    return request.get('/common/album/albumList', { params })
 }
 
 // 文件删除
 export function apiFileDelete(params: { ids: any[] }) {
-    return request.post('/album/albumDel', params)
+    return request.post('/common/album/albumDel', params)
 }
 
 // 文件移动
 export function apiFileMove(params: { ids: any[]; cid: number }) {
-    return request.post('/album/albumMove', params)
+    return request.post('/common/album/albumMove', params)
 }
 
 // 文件重命名
 export function apiFileRename(params: { id: number; name: string }) {
-    return request.post('/album/albumRename', params)
+    return request.post('/common/album/albumRename', params)
 }
 
 // 配置
diff --git a/admin/src/components/upload/index.vue b/admin/src/components/upload/index.vue
index 6f19d01e..26fe250a 100644
--- a/admin/src/components/upload/index.vue
+++ b/admin/src/components/upload/index.vue
@@ -39,93 +39,93 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref, ref } from 'vue'
-import { ElMessage, ElUpload } from 'element-plus'
-import { useStore } from '@/store'
-import { version } from '@/config/app'
-export default defineComponent({
-    components: {},
-    props: {
-        // 上传文件类型
-        type: {
-            type: String,
-            default: 'image'
+    import { computed, defineComponent, Ref, ref } from 'vue'
+    import { ElMessage, ElUpload } from 'element-plus'
+    import { useStore } from '@/store'
+    import { version } from '@/config/app'
+    export default defineComponent({
+        components: {},
+        props: {
+            // 上传文件类型
+            type: {
+                type: String,
+                default: 'image',
+            },
+            // 是否支持多选
+            multiple: {
+                type: Boolean,
+                default: true,
+            },
+            // 多选时最多选择几条
+            limit: {
+                type: Number,
+                default: 10,
+            },
+            // 上传时的额外参数
+            data: {
+                type: Object,
+                default: () => ({}),
+            },
+            // 是否显示上传进度
+            showProgress: {
+                type: Boolean,
+                default: false,
+            },
         },
-        // 是否支持多选
-        multiple: {
-            type: Boolean,
-            default: true
-        },
-        // 多选时最多选择几条
-        limit: {
-            type: Number,
-            default: 10
-        },
-        // 上传时的额外参数
-        data: {
-            type: Object,
-            default: () => ({})
-        },
-        // 是否显示上传进度
-        showProgress: {
-            type: Boolean,
-            default: false
-        }
-    },
-    emits: ['change', 'error'],
-    setup(props, { emit }) {
-        const store = useStore()
-        const uploadRefs: Ref<typeof ElUpload | null> = ref(null)
-        const action = ref(`${import.meta.env.VITE_APP_BASE_URL}/api/upload/${props.type}`)
-        const headers = computed(() => ({
-            token: store.getters.token,
-            version: version
-        }))
-        const visible = ref(false)
-        const fileList: Ref<any[]> = ref([])
+        emits: ['change', 'error'],
+        setup(props, { emit }) {
+            const store = useStore()
+            const uploadRefs: Ref<typeof ElUpload | null> = ref(null)
+            const action = ref(`${import.meta.env.VITE_APP_BASE_URL}/api/common/upload/${props.type}`)
+            const headers = computed(() => ({
+                token: store.getters.token,
+                version: version,
+            }))
+            const visible = ref(false)
+            const fileList: Ref<any[]> = ref([])
 
-        const handleProgress = (event: any, file: any, fileLists: any[]) => {
-            visible.value = true
-            fileList.value = fileLists
-        }
+            const handleProgress = (event: any, file: any, fileLists: any[]) => {
+                visible.value = true
+                fileList.value = fileLists
+            }
 
-        const handleSuccess = (event: any, file: any, fileLists: any[]) => {
-            const allSuccess = fileLists.every(item => item.status == 'success')
-            if (allSuccess) {
-                uploadRefs.value?.clearFiles()
+            const handleSuccess = (event: any, file: any, fileLists: any[]) => {
+                const allSuccess = fileLists.every((item) => item.status == 'success')
+                if (allSuccess) {
+                    uploadRefs.value?.clearFiles()
+                    visible.value = false
+                    emit('change')
+                }
+            }
+            const handleError = (event: any, file: any, fileLists: any[]) => {
+                ElMessage.error(`${file.name}文件上传失败`)
+                uploadRefs.value?.abort()
                 visible.value = false
                 emit('change')
+                emit('error')
             }
-        }
-        const handleError = (event: any, file: any, fileLists: any[]) => {
-            ElMessage.error(`${file.name}文件上传失败`)
-            uploadRefs.value?.abort()
-            visible.value = false
-            emit('change')
-            emit('error')
-        }
-        const handleExceed = () => {
-            ElMessage.error('超出上传上限，请重新上传')
-        }
-        const handleClose = () => {
-            uploadRefs.value?.abort()
-            uploadRefs.value?.clearFiles()
-            visible.value = false
-        }
-        return {
-            uploadRefs,
-            action,
-            headers,
-            visible,
-            fileList,
-            handleProgress,
-            handleSuccess,
-            handleError,
-            handleExceed,
-            handleClose
-        }
-    }
-})
+            const handleExceed = () => {
+                ElMessage.error('超出上传上限，请重新上传')
+            }
+            const handleClose = () => {
+                uploadRefs.value?.abort()
+                uploadRefs.value?.clearFiles()
+                visible.value = false
+            }
+            return {
+                uploadRefs,
+                action,
+                headers,
+                visible,
+                fileList,
+                handleProgress,
+                handleSuccess,
+                handleError,
+                handleExceed,
+                handleClose,
+            }
+        },
+    })
 </script>
 
 <style lang="scss"></style>
diff --git a/admin/src/views/permission/admin/edit.vue b/admin/src/views/permission/admin/edit.vue
index df26a6db..ea7d552f 100644
--- a/admin/src/views/permission/admin/edit.vue
+++ b/admin/src/views/permission/admin/edit.vue
@@ -27,12 +27,57 @@
                     <el-input v-model="formData.nickname" placeholder="请输入名称"></el-input>
                 </el-form-item>
 
+                <!-- 归属部门选择框 -->
+                <el-form-item label="归属部门" prop="deptId">
+                    <!-- <el-select v-model="formData.deptId" placeholder="请选择归属部门">
+						<el-option v-for="(item, index) in deptList" :key="index" :label="item.name" :value="item.id">
+						</el-option>
+					</el-select> -->
+                    <el-cascader
+                        v-model="formData.deptId"
+                        :options="deptList"
+                        :props="{
+                            value: 'id',
+                            label: 'name',
+                            checkStrictly: true,
+                        }"
+                        clearable
+                    />
+
+                    <!-- 新增 -->
+                    <router-link to="/organize/department" target="_blank">
+                        <el-button type="text" style="margin: 0 10px">新增部门</el-button>
+                    </router-link>
+                    <el-button type="text">|</el-button>
+                    <el-button type="text" @click="getDeptList">刷新</el-button>
+                </el-form-item>
+
+                <!-- 岗位选择框 -->
+                <el-form-item label="岗位" prop="postId">
+                    <el-select v-model="formData.postId" placeholder="请选择岗位">
+                        <el-option
+                            v-for="(item, index) in postList"
+                            :key="index"
+                            :label="item.name"
+                            :value="item.id"
+                        >
+                        </el-option>
+                    </el-select>
+
+                    <!-- 新增 -->
+                    <router-link to="/organize/post" target="_blank">
+                        <el-button type="text" style="margin: 0 10px">新增岗位</el-button>
+                    </router-link>
+                    <el-button type="text">|</el-button>
+                    <el-button type="text" @click="getPostList">刷新</el-button>
+                </el-form-item>
+
                 <!-- 角色选择框 -->
                 <el-form-item label="角色：" prop="role">
                     <el-select
                         v-model="formData.role"
                         placeholder="请选择角色"
-                        :disabled="formData.id == 1"
+                        :disabled="id && formData.root"
                     >
                         <el-option
                             v-for="(item, index) in roleList"
@@ -41,6 +86,13 @@
                             :value="item.id + ''"
                         ></el-option>
                     </el-select>
+
+                    <!-- 新增 -->
+                    <router-link to="/permission/role" target="_blank">
+                        <el-button type="text" style="margin: 0 10px">新增角色</el-button>
+                    </router-link>
+                    <el-button type="text">|</el-button>
+                    <el-button type="text" @click="getRoleList">刷新</el-button>
                 </el-form-item>
 
                 <!-- 密码输入框 -->
@@ -70,11 +122,7 @@
 
                 <!-- 多处登录 -->
                 <el-form-item label="支持多处登录">
-                    <el-switch
-                        v-model="formData.isMultipoint"
-                        :active-value="1"
-                        :inactive-value="0"
-                    />
+                    <el-switch v-model="formData.isMultipoint" :active-value="1" :inactive-value="0" />
                 </el-form-item>
             </el-form>
         </el-card>
@@ -84,163 +132,200 @@
     </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onMounted, reactive, Ref, ref, toRefs } from 'vue'
-import MaterialSelect from '@/components/material-select/index.vue'
-import FooterBtns from '@/components/footer-btns/index.vue'
-import { apiRoleLists, apiAdminDetail, apiAdminAdd, apiAdminEdit } from '@/api/auth'
-import { ElForm } from 'element-plus'
-import { useAdmin } from '@/core/hooks/app'
-import { ElMessage } from 'element-plus'
-export default defineComponent({
-    components: {
-        MaterialSelect,
-        FooterBtns
-    },
-    setup() {
-        const formRefs: Ref<typeof ElForm | null> = ref(null)
-        const { router, route } = useAdmin()
-        const id = computed(() => route.query?.id)
-        const loading = ref(false)
-        // 表单数据
-        const roleList: Ref<any[]> = ref([])
-        const { formData, rules } = toRefs(
-            reactive({
-                formData: {
-                    username: '',
-                    nickname: '',
-                    role: '',
-                    avatar: '',
-                    password: '',
-                    password_confirm: '',
-                    isDisable: 0,
-                    isMultipoint: 0
-                },
-                rules: {
-                    username: [
-                        {
-                            required: true,
-                            message: '请输入账号',
-                            trigger: ['blur']
-                        }
-                    ],
-                    nickname: [
-                        {
-                            required: true,
-                            message: '请输入名称',
-                            trigger: ['blur']
-                        }
-                    ],
-                    role: [
-                        {
-                            required: true,
-                            message: '请选择角色',
-                            trigger: ['blur']
-                        }
-                    ],
-                    password: [
-                        {
-                            required: true,
-                            message: '请输入密码',
-                            trigger: 'blur',
-                            pattern: /(^[^\s]*$)/ // 不能输入空格
+<script lang="ts" setup>
+    import { computed, defineComponent, onMounted, reactive, Ref, ref, toRefs } from 'vue'
+    import MaterialSelect from '@/components/material-select/index.vue'
+    import FooterBtns from '@/components/footer-btns/index.vue'
+    import { apiRoleLists, apiAdminDetail, apiAdminAdd, apiAdminEdit } from '@/api/auth'
+    import { apiDeptLists, apiPostLists } from '@/api/organize'
+    import { ElForm } from 'element-plus'
+    import { useAdmin } from '@/core/hooks/app'
+    import { ElMessage } from 'element-plus'
+
+    const formRefs: Ref<typeof ElForm | null> = ref(null)
+    const { router, route } = useAdmin()
+    const id = computed(() => route.query?.id)
+    const loading = ref(false)
+    // 表单数据
+    const roleList: Ref<any[]> = ref([]) // 角色
+    const deptList: Ref<any[]> = ref([]) // 部门
+    const postList: Ref<any[]> = ref([]) // 岗位
+
+    const { formData, rules } = toRefs(
+        reactive({
+            formData: {
+                username: '',
+                nickname: '',
+                role: '',
+                avatar: '',
+                password: '',
+                password_confirm: '',
+                isDisable: 0,
+                isMultipoint: 0,
+                deptId: '',
+                postId: '',
+            },
+            rules: {
+                username: [
+                    {
+                        required: true,
+                        message: '请输入账号',
+                        trigger: ['blur'],
+                    },
+                ],
+                nickname: [
+                    {
+                        required: true,
+                        message: '请输入名称',
+                        trigger: ['blur'],
+                    },
+                ],
+                role: [
+                    {
+                        required: true,
+                        message: '请选择角色',
+                        trigger: ['blur'],
+                    },
+                ],
+                password: [
+                    {
+                        required: true,
+                        message: '请输入密码',
+                        trigger: 'blur',
+                        pattern: /(^[^\s]*$)/, // 不能输入空格
+                    },
+                    {
+                        validator: (rule: object, value: string, callback: any) => {
+                            !value ? callback(new Error('请输入密码')) : callback()
                         },
-                        {
-                            validator: (rule: object, value: string, callback: any) => {
-                                !value ? callback(new Error('请输入密码')) : callback()
-                            },
-                            trigger: 'blur'
-                        }
-                    ] as any[],
-                    password_confirm: [
-                        {
-                            required: true,
-                            message: '请再次输入密码',
-                            trigger: 'blur',
-                            pattern: /(^[^\s]*$)/ // 不能输入空格
+                        trigger: 'blur',
+                    },
+                ] as any[],
+                password_confirm: [
+                    {
+                        required: true,
+                        message: '请再次输入密码',
+                        trigger: 'blur',
+                        pattern: /(^[^\s]*$)/, // 不能输入空格
+                    },
+                    {
+                        validator: (rule: object, value: string, callback: any) => {
+                            if (formData.value.password) {
+                                if (!value) callback(new Error('请再次输入密码'))
+                                if (value !== formData.value.password)
+                                    callback(new Error('两次输入密码不一致!'))
+                            }
+                            callback()
                         },
-                        {
-                            validator: (rule: object, value: string, callback: any) => {
-                                if (formData.value.password) {
-                                    if (!value) callback(new Error('请再次输入密码'))
-                                    if (value !== formData.value.password)
-                                        callback(new Error('两次输入密码不一致!'))
-                                }
-                                callback()
-                            },
-                            trigger: 'blur'
-                        }
-                    ] as any[]
-                }
-            })
-        )
+                        trigger: 'blur',
+                    },
+                ] as any[],
+            },
+        })
+    )
 
-        const getRoleList = () => {
-            apiRoleLists({
-                page_type: 1
-            }).then((res: any) => {
-                roleList.value = res.lists
+    const getRoleList = () => {
+        apiRoleLists({
+            page_type: 0,
+        }).then((res: any) => {
+            roleList.value = res.lists
 
-                if (formData.value.id == 1) {
-                    roleList.value.push({
-                        id: 0,
-                        name: '超级管理员'
-                    })
-                    console.log(formData.value.id, 'formData.value.id')
-                }
+            // if (formData.value.id == 1) {
+            //     roleList.value.push({
+            //         id: 0,
+            //         name: '超级管理员',
+            //     })
+            // }
+            if (id.value && formData.value.root == 1) {
+                roleList.value.push({
+                    id: 0,
+                    name: '系统管理员',
+                })
+            }
+        })
+    }
 
-                console.log('roleList.value', roleList.value)
-            })
+    // 获取部门联级列表
+    const getDeptList = () => {
+        apiDeptLists({}).then((res: any) => {
+            // console.log(res.lists, 'res.lists')
+
+            deptList.value = isDisabled(res)
+        })
+    }
+
+    // 判断是否禁用， 添加禁用字段disabled
+    const isDisabled = (treeArr: any) => {
+        let newTree = treeArr.map((item: any) => {
+            const children = item.children || []
+            if (children.length) isDisabled(children)
+
+            if (item.status == 0) {
+                item.disabled = true
+            } else {
+                item.disabled = false
+            }
+            return item
+        })
+        return newTree
+    }
+
+    // 获取岗位列表
+    const getPostList = () => {
+        apiPostLists({
+            page_type: 0,
+        }).then((res: any) => {
+            postList.value = res.lists
+        })
+    }
+
+    const getAdminDetail = () => {
+        if (!id.value) {
+            rules.value.password
+            rules.value.password_confirm
+            return
         }
-        const getAdminDetail = () => {
-            if (!id.value) {
-                rules.value.password
-                rules.value.password_confirm
+        loading.value = true
+        apiAdminDetail({
+            id: id.value,
+        })
+            .then((res: any) => {
+                formData.value = res
+            })
+            .finally(() => {
+                loading.value = false
+            })
+    }
+
+    const onSubmit = () => {
+        formRefs.value?.validate((valid: boolean) => {
+            if (!valid) {
                 return
             }
-            loading.value = true
-            apiAdminDetail({
-                id: id.value
-            })
-                .then((res: any) => {
-                    formData.value = res
-                })
-                .finally(() => {
-                    loading.value = false
-                })
-        }
 
-        const onSubmit = () => {
-            formRefs.value?.validate((valid: boolean) => {
-                if (!valid) {
-                    return
-                }
-                const promise = id.value
-                    ? apiAdminEdit({ ...formData.value, id: id.value })
-                    : apiAdminAdd(formData.value)
-                promise.then(() => {
-                    setTimeout(() => router.go(-1), 500)
-                    ElMessage({ type: 'success', message: '保存成功' })
-                })
-            })
-        }
+            // 因为组件绑定的pid是number，会匹配对应的联级数据
+            // 而选中后，pid是变为数组
+            // 所以pid是数组时（即新建部门或者编辑部门改变上级部门）
+            if (Array.isArray(formData.value.deptId)) {
+                formData.value.deptId = formData.value.deptId[formData.value.deptId.length - 1]
+            }
 
-        onMounted(() => {
-            getAdminDetail()
-            getRoleList()
+            const promise = id.value
+                ? apiAdminEdit({ ...formData.value, id: id.value })
+                : apiAdminAdd(formData.value)
+            promise.then(() => {
+                setTimeout(() => router.go(-1), 500)
+                ElMessage({ type: 'success', message: '保存成功' })
+            })
         })
-
-        return {
-            id,
-            formRefs,
-            loading,
-            formData,
-            rules,
-            roleList,
-            onSubmit
-        }
     }
-})
+
+    onMounted(() => {
+        getAdminDetail()
+        getRoleList()
+        getDeptList()
+        getPostList()
+    })
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/admin/src/views/permission/admin/index.vue b/admin/src/views/permission/admin/index.vue
index 4a4377c8..8d72396f 100644
--- a/admin/src/views/permission/admin/index.vue
+++ b/admin/src/views/permission/admin/index.vue
@@ -28,9 +28,7 @@
         </el-card>
         <el-card v-loading="pager.loading" class="m-t-15" shadow="never">
             <router-link to="/permission/admin/edit">
-                <el-button v-perm="['system:admin:add']" type="primary" size="small">
-                    新增管理员
-                </el-button>
+                <el-button v-perm="['system:admin:add']" type="primary" size="small"> 新增管理员 </el-button>
             </router-link>
             <div class="m-t-15">
                 <el-table :data="pager.lists">
@@ -49,21 +47,14 @@
                     <el-table-column label="账号" prop="username" min-width="100"></el-table-column>
                     <el-table-column label="名称" prop="nickname" min-width="100"></el-table-column>
                     <el-table-column label="角色" prop="role" min-width="100"></el-table-column>
-                    <el-table-column
-                        label="创建时间"
-                        prop="createTime"
-                        min-width="150"
-                    ></el-table-column>
+                    <el-table-column label="部门" prop="dept" min-width="100"></el-table-column>
+                    <el-table-column label="创建时间" prop="createTime" min-width="150"></el-table-column>
                     <el-table-column
                         label="最近登录时间"
                         prop="lastLoginTime"
                         min-width="150"
                     ></el-table-column>
-                    <el-table-column
-                        label="最近登录IP"
-                        prop="lastLoginIp"
-                        min-width="100"
-                    ></el-table-column>
+                    <el-table-column label="最近登录IP" prop="lastLoginIp" min-width="100"></el-table-column>
                     <el-table-column label="状态" min-width="100">
                         <template #default="scope">
                             <el-switch
@@ -82,8 +73,8 @@
                                 :to="{
                                     path: '/permission/admin/edit',
                                     query: {
-                                        id: row.id
-                                    }
+                                        id: row.id,
+                                    },
                                 }"
                             >
                                 <el-button type="text">编辑</el-button>
@@ -105,102 +96,98 @@
                 </el-table>
             </div>
             <div class="flex row-right">
-                <pagination
-                    v-model="pager"
-                    layout="total, prev, pager, next, jumper"
-                    @change="requestApi"
-                />
+                <pagination v-model="pager" layout="total, prev, pager, next, jumper" @change="requestApi" />
             </div>
         </el-card>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, reactive, Ref, ref } from 'vue'
-import Pagination from '@/components/pagination/index.vue'
-import Popup from '@/components/popup/index.vue'
-import { apiAdminEdit, adminLists, apiAdminDelete, apiRoleLists, apiAdminStatus } from '@/api/auth'
-import { usePages } from '@/core/hooks/pages'
-import { ElMessage } from 'element-plus'
+    import { defineComponent, onMounted, reactive, Ref, ref } from 'vue'
+    import Pagination from '@/components/pagination/index.vue'
+    import Popup from '@/components/popup/index.vue'
+    import { apiAdminEdit, adminLists, apiAdminDelete, apiRoleLists, apiAdminStatus } from '@/api/auth'
+    import { usePages } from '@/core/hooks/pages'
+    import { ElMessage } from 'element-plus'
 
-export default defineComponent({
-    components: {
-        Pagination,
-        Popup
-    },
-    setup() {
-        // 表单数据
-        const formData = reactive({
-            username: '',
-            nickname: '',
-            role: ''
-        })
-        const roleList: Ref<any[]> = ref([])
-        const { pager, requestApi, resetParams, resetPage } = usePages({
-            callback: adminLists,
-            params: formData
-        })
-        const changeStatus = (data: any) => {
-            apiAdminEdit({
-                id: data.id,
-                username: data.username,
-                nickname: data.nickname,
-                role: data.role,
-                isDisable: data.isDisable,
-                multipoint_login: data.multipoint_login
-            }).finally(() => {
+    export default defineComponent({
+        components: {
+            Pagination,
+            Popup,
+        },
+        setup() {
+            // 表单数据
+            const formData = reactive({
+                username: '',
+                nickname: '',
+                role: '',
+            })
+            const roleList: Ref<any[]> = ref([])
+            const { pager, requestApi, resetParams, resetPage } = usePages({
+                callback: adminLists,
+                params: formData,
+            })
+            const changeStatus = (data: any) => {
+                apiAdminEdit({
+                    id: data.id,
+                    username: data.username,
+                    nickname: data.nickname,
+                    role: data.role,
+                    isDisable: data.isDisable,
+                    multipoint_login: data.multipoint_login,
+                }).finally(() => {
+                    requestApi()
+                })
+            }
+
+            const handleStatusChange = async (event: Event, id: number) => {
+                await apiAdminStatus({ isDisable: event, id })
                 requestApi()
-            })
-        }
+                ElMessage({ type: 'success', message: '操作成功' })
+            }
 
-        const handleStatusChange = async (event: Event, id: number) => {
-            await apiAdminStatus({ isDisable: event, id })
-            requestApi()
-            ElMessage({ type: 'success', message: '操作成功' })
-        }
+            const handleDelete = (id: number) => {
+                apiAdminDelete({ id }).then(() => {
+                    requestApi()
+                    ElMessage({ type: 'success', message: '删除成功' })
+                })
+            }
 
-        const handleDelete = (id: number) => {
-            apiAdminDelete({ id }).then(() => {
+            const getRoleList = () => {
+                apiRoleLists({
+                    page_type: 1,
+                }).then((res: any) => {
+                    roleList.value = res.lists
+                })
+            }
+            onMounted(() => {
                 requestApi()
-                ElMessage({ type: 'success', message: '删除成功' })
+                getRoleList()
             })
-        }
-
-        const getRoleList = () => {
-            apiRoleLists({
-                page_type: 1
-            }).then((res: any) => {
-                roleList.value = res.lists
-            })
-        }
-        onMounted(() => {
-            requestApi()
-            getRoleList()
-        })
-        return {
-            formData,
-            roleList,
-            pager,
-            requestApi,
-            resetParams,
-            resetPage,
-            adminLists,
-            changeStatus,
-            handleDelete,
-            handleStatusChange
-        }
-    }
-})
+            return {
+                formData,
+                roleList,
+                pager,
+                requestApi,
+                resetParams,
+                resetPage,
+                adminLists,
+                changeStatus,
+                handleDelete,
+                handleStatusChange,
+            }
+        },
+    })
 </script>
 
 <style lang="scss" scoped>
-.ls-form {
-    margin-bottom: -16px;
-}
+    .ls-form {
+        margin-bottom: -16px;
+    }
 
-.default-avatar {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-}
+    .default-avatar {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+    }
 </style>
diff --git a/admin/src/views/setting/storage/edit.vue b/admin/src/views/setting/storage/edit.vue
new file mode 100644
index 00000000..e6cac61e
--- /dev/null
+++ b/admin/src/views/setting/storage/edit.vue
@@ -0,0 +1,7 @@
+<template>
+    <div>存储edit</div>
+</template>
+
+<script></script>
+
+<style></style>
diff --git a/admin/src/views/setting/storage/index.vue b/admin/src/views/setting/storage/index.vue
new file mode 100644
index 00000000..8730faf3
--- /dev/null
+++ b/admin/src/views/setting/storage/index.vue
@@ -0,0 +1,18 @@
+<template>
+    <div class="storage">
+        <el-card shadow="never">
+            <el-alert
+                class="xxl"
+                title="温馨提示：1.切换存储方式后，需要将资源文件传输至新的存储端；2.请勿随意切换存储方式，可能导致图片无法查看"
+                type="primary"
+                :closable="false"
+                show-icon
+            >
+            </el-alert>
+        </el-card>
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped></style>