mirage
/
edu
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增编辑管理部门、岗位选择

This commit is contained in:
Mrtangl 2022-06-22 17:57:02 +08:00
parent cb5fae0849
commit f36911f3c8
6 changed files with 434 additions and 337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
admin/src/api/app.ts
View File

@ -1,41 +1,41 @@
import request from '@/utils/request' import request from '@/utils/request'
export function apiFileCateAdd(params: any) { 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 }) { 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 }) { export function apiFileCateDelete(params: { id: number }) {
return request.post('/album/cateDel', params) return request.post('/common/album/cateDel', params)
} }
// 文件分类列表 // 文件分类列表
export function apiFileCateLists(params: any) { export function apiFileCateLists(params: any) {
return request.get('/album/cateList', { params }) return request.get('/common/album/cateList', { params })
} }
// 文件列表 // 文件列表
export function apiFileList(params: any) { export function apiFileList(params: any) {
return request.get('/album/albumList', { params }) return request.get('/common/album/albumList', { params })
} }
// 文件删除 // 文件删除
export function apiFileDelete(params: { ids: any[] }) { 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 }) { 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 }) { export function apiFileRename(params: { id: number; name: string }) {
return request.post('/album/albumRename', params) return request.post('/common/album/albumRename', params)
} }
// 配置 // 配置

162
admin/src/components/upload/index.vue
View File

@ -39,93 +39,93 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, Ref, ref } from 'vue' import { computed, defineComponent, Ref, ref } from 'vue'
import { ElMessage, ElUpload } from 'element-plus' import { ElMessage, ElUpload } from 'element-plus'
import { useStore } from '@/store' import { useStore } from '@/store'
import { version } from '@/config/app' import { version } from '@/config/app'
export default defineComponent({ export default defineComponent({
components: {}, components: {},
props: { props: {
// 上传文件类型 // 上传文件类型
type: { type: {
type: String, type: String,
default: 'image' default: 'image',
},
// 是否支持多选
multiple: {
type: Boolean,
default: true,
},
// 多选时最多选择几条
limit: {
type: Number,
default: 10,
},
// 上传时的额外参数
data: {
type: Object,
default: () => ({}),
},
// 是否显示上传进度
showProgress: {
type: Boolean,
default: false,
},
}, },
// 是否支持多选 emits: ['change', 'error'],
multiple: { setup(props, { emit }) {
type: Boolean, const store = useStore()
default: true 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(() => ({
limit: { token: store.getters.token,
type: Number, version: version,
default: 10 }))
}, const visible = ref(false)
// 上传时的额外参数 const fileList: Ref<any[]> = ref([])
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([])
const handleProgress = (event: any, file: any, fileLists: any[]) => { const handleProgress = (event: any, file: any, fileLists: any[]) => {
visible.value = true visible.value = true
fileList.value = fileLists fileList.value = fileLists
} }
const handleSuccess = (event: any, file: any, fileLists: any[]) => { const handleSuccess = (event: any, file: any, fileLists: any[]) => {
const allSuccess = fileLists.every(item => item.status == 'success') const allSuccess = fileLists.every((item) => item.status == 'success')
if (allSuccess) { if (allSuccess) {
uploadRefs.value?.clearFiles() 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 visible.value = false
emit('change') emit('change')
emit('error')
} }
} const handleExceed = () => {
const handleError = (event: any, file: any, fileLists: any[]) => { ElMessage.error('超出上传上限，请重新上传')
ElMessage.error(`${file.name}文件上传失败`) }
uploadRefs.value?.abort() const handleClose = () => {
visible.value = false uploadRefs.value?.abort()
emit('change') uploadRefs.value?.clearFiles()
emit('error') visible.value = false
} }
const handleExceed = () => { return {
ElMessage.error('超出上传上限，请重新上传') uploadRefs,
} action,
const handleClose = () => { headers,
uploadRefs.value?.abort() visible,
uploadRefs.value?.clearFiles() fileList,
visible.value = false handleProgress,
} handleSuccess,
return { handleError,
uploadRefs, handleExceed,
action, handleClose,
headers, }
visible, },
fileList, })
handleProgress,
handleSuccess,
handleError,
handleExceed,
handleClose
}
}
})
</script> </script>
<style lang="scss"></style> <style lang="scss"></style>

387
admin/src/views/permission/admin/edit.vue
View File

@ -27,12 +27,57 @@
<el-input v-model="formData.nickname" placeholder="请输入名称"></el-input> <el-input v-model="formData.nickname" placeholder="请输入名称"></el-input>
</el-form-item> </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-form-item label="角色：" prop="role">
<el-select <el-select
v-model="formData.role" v-model="formData.role"
placeholder="请选择角色" placeholder="请选择角色"
:disabled="formData.id == 1" :disabled="id && formData.root"
> >
<el-option <el-option
v-for="(item, index) in roleList" v-for="(item, index) in roleList"
@ -41,6 +86,13 @@
:value="item.id + ''" :value="item.id + ''"
></el-option> ></el-option>
</el-select> </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> </el-form-item>
<!-- 密码输入框 --> <!-- 密码输入框 -->
@ -70,11 +122,7 @@
<!-- 多处登录 --> <!-- 多处登录 -->
<el-form-item label="支持多处登录"> <el-form-item label="支持多处登录">
<el-switch <el-switch v-model="formData.isMultipoint" :active-value="1" :inactive-value="0" />
v-model="formData.isMultipoint"
:active-value="1"
:inactive-value="0"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-card> </el-card>
@ -84,163 +132,200 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { computed, defineComponent, onMounted, reactive, Ref, ref, toRefs } from 'vue' import { computed, defineComponent, onMounted, reactive, Ref, ref, toRefs } from 'vue'
import MaterialSelect from '@/components/material-select/index.vue' import MaterialSelect from '@/components/material-select/index.vue'
import FooterBtns from '@/components/footer-btns/index.vue' import FooterBtns from '@/components/footer-btns/index.vue'
import { apiRoleLists, apiAdminDetail, apiAdminAdd, apiAdminEdit } from '@/api/auth' import { apiRoleLists, apiAdminDetail, apiAdminAdd, apiAdminEdit } from '@/api/auth'
import { ElForm } from 'element-plus' import { apiDeptLists, apiPostLists } from '@/api/organize'
import { useAdmin } from '@/core/hooks/app' import { ElForm } from 'element-plus'
import { ElMessage } from 'element-plus' import { useAdmin } from '@/core/hooks/app'
export default defineComponent({ import { ElMessage } from 'element-plus'
components: {
MaterialSelect, const formRefs: Ref<typeof ElForm | null> = ref(null)
FooterBtns const { router, route } = useAdmin()
}, const id = computed(() => route.query?.id)
setup() { const loading = ref(false)
const formRefs: Ref<typeof ElForm | null> = ref(null) // 表单数据
const { router, route } = useAdmin() const roleList: Ref<any[]> = ref([]) // 角色
const id = computed(() => route.query?.id) const deptList: Ref<any[]> = ref([]) // 部门
const loading = ref(false) const postList: Ref<any[]> = ref([]) // 岗位
// 表单数据
const roleList: Ref<any[]> = ref([]) const { formData, rules } = toRefs(
const { formData, rules } = toRefs( reactive({
reactive({ formData: {
formData: { username: '',
username: '', nickname: '',
nickname: '', role: '',
role: '', avatar: '',
avatar: '', password: '',
password: '', password_confirm: '',
password_confirm: '', isDisable: 0,
isDisable: 0, isMultipoint: 0,
isMultipoint: 0 deptId: '',
}, postId: '',
rules: { },
username: [ rules: {
{ username: [
required: true, {
message: '请输入账号', required: true,
trigger: ['blur'] message: '请输入账号',
} trigger: ['blur'],
], },
nickname: [ ],
{ nickname: [
required: true, {
message: '请输入名称', required: true,
trigger: ['blur'] message: '请输入名称',
} trigger: ['blur'],
], },
role: [ ],
{ role: [
required: true, {
message: '请选择角色', required: true,
trigger: ['blur'] message: '请选择角色',
} trigger: ['blur'],
], },
password: [ ],
{ password: [
required: true, {
message: '请输入密码', required: true,
trigger: 'blur', message: '请输入密码',
pattern: /(^[^\s]*$)/ // 不能输入空格 trigger: 'blur',
pattern: /(^[^\s]*$)/, // 不能输入空格
},
{
validator: (rule: object, value: string, callback: any) => {
!value ? callback(new Error('请输入密码')) : callback()
}, },
{ trigger: 'blur',
validator: (rule: object, value: string, callback: any) => { },
!value ? callback(new Error('请输入密码')) : callback() ] as any[],
}, password_confirm: [
trigger: 'blur' {
} required: true,
] as any[], message: '请再次输入密码',
password_confirm: [ trigger: 'blur',
{ pattern: /(^[^\s]*$)/, // 不能输入空格
required: true, },
message: '请再次输入密码', {
trigger: 'blur', validator: (rule: object, value: string, callback: any) => {
pattern: /(^[^\s]*$)/ // 不能输入空格 if (formData.value.password) {
if (!value) callback(new Error('请再次输入密码'))
if (value !== formData.value.password)
callback(new Error('两次输入密码不一致!'))
}
callback()
}, },
{ trigger: 'blur',
validator: (rule: object, value: string, callback: any) => { },
if (formData.value.password) { ] as any[],
if (!value) callback(new Error('请再次输入密码')) },
if (value !== formData.value.password) })
callback(new Error('两次输入密码不一致!')) )
}
callback()
},
trigger: 'blur'
}
] as any[]
}
})
)
const getRoleList = () => { const getRoleList = () => {
apiRoleLists({ apiRoleLists({
page_type: 1 page_type: 0,
}).then((res: any) => { }).then((res: any) => {
roleList.value = res.lists roleList.value = res.lists
if (formData.value.id == 1) { // if (formData.value.id == 1) {
roleList.value.push({ // roleList.value.push({
id: 0, // id: 0,
name: '超级管理员' // name: '超级管理员',
}) // })
console.log(formData.value.id, 'formData.value.id') // }
} 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 = () => { loading.value = true
if (!id.value) { apiAdminDetail({
rules.value.password id: id.value,
rules.value.password_confirm })
.then((res: any) => {
formData.value = res
})
.finally(() => {
loading.value = false
})
}
const onSubmit = () => {
formRefs.value?.validate((valid: boolean) => {
if (!valid) {
return return
} }
loading.value = true
apiAdminDetail({
id: id.value
})
.then((res: any) => {
formData.value = res
})
.finally(() => {
loading.value = false
})
}
const onSubmit = () => { // 因为组件绑定的pid是number，会匹配对应的联级数据
formRefs.value?.validate((valid: boolean) => { // 而选中后，pid是变为数组
if (!valid) { // 所以pid是数组时（即新建部门或者编辑部门改变上级部门）
return if (Array.isArray(formData.value.deptId)) {
} formData.value.deptId = formData.value.deptId[formData.value.deptId.length - 1]
const promise = id.value }
? apiAdminEdit({ ...formData.value, id: id.value })
: apiAdminAdd(formData.value)
promise.then(() => {
setTimeout(() => router.go(-1), 500)
ElMessage({ type: 'success', message: '保存成功' })
})
})
}
onMounted(() => { const promise = id.value
getAdminDetail() ? apiAdminEdit({ ...formData.value, id: id.value })
getRoleList() : 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> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

181
admin/src/views/permission/admin/index.vue
View File

@ -28,9 +28,7 @@
</el-card> </el-card>
<el-card v-loading="pager.loading" class="m-t-15" shadow="never"> <el-card v-loading="pager.loading" class="m-t-15" shadow="never">
<router-link to="/permission/admin/edit"> <router-link to="/permission/admin/edit">
<el-button v-perm="['system:admin:add']" type="primary" size="small"> <el-button v-perm="['system:admin:add']" type="primary" size="small"> 新增管理员 </el-button>
新增管理员
</el-button>
</router-link> </router-link>
<div class="m-t-15"> <div class="m-t-15">
<el-table :data="pager.lists"> <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="username" min-width="100"></el-table-column>
<el-table-column label="名称" prop="nickname" 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="role" min-width="100"></el-table-column>
<el-table-column <el-table-column label="部门" prop="dept" min-width="100"></el-table-column>
label="创建时间" <el-table-column label="创建时间" prop="createTime" min-width="150"></el-table-column>
prop="createTime"
min-width="150"
></el-table-column>
<el-table-column <el-table-column
label="最近登录时间" label="最近登录时间"
prop="lastLoginTime" prop="lastLoginTime"
min-width="150" min-width="150"
></el-table-column> ></el-table-column>
<el-table-column <el-table-column label="最近登录IP" prop="lastLoginIp" min-width="100"></el-table-column>
label="最近登录IP"
prop="lastLoginIp"
min-width="100"
></el-table-column>
<el-table-column label="状态" min-width="100"> <el-table-column label="状态" min-width="100">
<template #default="scope"> <template #default="scope">
<el-switch <el-switch
@ -82,8 +73,8 @@
:to="{ :to="{
path: '/permission/admin/edit', path: '/permission/admin/edit',
query: { query: {
id: row.id id: row.id,
} },
}" }"
> >
<el-button type="text">编辑</el-button> <el-button type="text">编辑</el-button>
@ -105,102 +96,98 @@
</el-table> </el-table>
</div> </div>
<div class="flex row-right"> <div class="flex row-right">
<pagination <pagination v-model="pager" layout="total, prev, pager, next, jumper" @change="requestApi" />
v-model="pager"
layout="total, prev, pager, next, jumper"
@change="requestApi"
/>
</div> </div>
</el-card> </el-card>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, onMounted, reactive, Ref, ref } from 'vue' import { defineComponent, onMounted, reactive, Ref, ref } from 'vue'
import Pagination from '@/components/pagination/index.vue' import Pagination from '@/components/pagination/index.vue'
import Popup from '@/components/popup/index.vue' import Popup from '@/components/popup/index.vue'
import { apiAdminEdit, adminLists, apiAdminDelete, apiRoleLists, apiAdminStatus } from '@/api/auth' import { apiAdminEdit, adminLists, apiAdminDelete, apiRoleLists, apiAdminStatus } from '@/api/auth'
import { usePages } from '@/core/hooks/pages' import { usePages } from '@/core/hooks/pages'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
export default defineComponent({ export default defineComponent({
components: { components: {
Pagination, Pagination,
Popup Popup,
}, },
setup() { setup() {
// 表单数据 // 表单数据
const formData = reactive({ const formData = reactive({
username: '', username: '',
nickname: '', nickname: '',
role: '' role: '',
}) })
const roleList: Ref<any[]> = ref([]) const roleList: Ref<any[]> = ref([])
const { pager, requestApi, resetParams, resetPage } = usePages({ const { pager, requestApi, resetParams, resetPage } = usePages({
callback: adminLists, callback: adminLists,
params: formData params: formData,
}) })
const changeStatus = (data: any) => { const changeStatus = (data: any) => {
apiAdminEdit({ apiAdminEdit({
id: data.id, id: data.id,
username: data.username, username: data.username,
nickname: data.nickname, nickname: data.nickname,
role: data.role, role: data.role,
isDisable: data.isDisable, isDisable: data.isDisable,
multipoint_login: data.multipoint_login multipoint_login: data.multipoint_login,
}).finally(() => { }).finally(() => {
requestApi()
})
}
const handleStatusChange = async (event: Event, id: number) => {
await apiAdminStatus({ isDisable: event, id })
requestApi() requestApi()
}) ElMessage({ type: 'success', message: '操作成功' })
} }
const handleStatusChange = async (event: Event, id: number) => { const handleDelete = (id: number) => {
await apiAdminStatus({ isDisable: event, id }) apiAdminDelete({ id }).then(() => {
requestApi() requestApi()
ElMessage({ type: 'success', message: '操作成功' }) ElMessage({ type: 'success', message: '删除成功' })
} })
}
const handleDelete = (id: number) => { const getRoleList = () => {
apiAdminDelete({ id }).then(() => { apiRoleLists({
page_type: 1,
}).then((res: any) => {
roleList.value = res.lists
})
}
onMounted(() => {
requestApi() requestApi()
ElMessage({ type: 'success', message: '删除成功' }) getRoleList()
}) })
} return {
formData,
const getRoleList = () => { roleList,
apiRoleLists({ pager,
page_type: 1 requestApi,
}).then((res: any) => { resetParams,
roleList.value = res.lists resetPage,
}) adminLists,
} changeStatus,
onMounted(() => { handleDelete,
requestApi() handleStatusChange,
getRoleList() }
}) },
return { })
formData,
roleList,
pager,
requestApi,
resetParams,
resetPage,
adminLists,
changeStatus,
handleDelete,
handleStatusChange
}
}
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ls-form { .ls-form {
margin-bottom: -16px; margin-bottom: -16px;
} }
.default-avatar { .default-avatar {
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 50%; border-radius: 50%;
} }
</style> </style>

7
admin/src/views/setting/storage/edit.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<div>存储edit</div>
</template>
<script></script>
<style></style>

18
admin/src/views/setting/storage/index.vue Normal file
View File

@ -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>