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)
} }
// 配置 // 配置

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

@ -49,37 +49,37 @@ export default defineComponent({
// 上传文件类型 // 上传文件类型
type: { type: {
type: String, type: String,
default: 'image' default: 'image',
}, },
// 是否支持多选 // 是否支持多选
multiple: { multiple: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
// 多选时最多选择几条 // 多选时最多选择几条
limit: { limit: {
type: Number, type: Number,
default: 10 default: 10,
}, },
// 上传时的额外参数 // 上传时的额外参数
data: { data: {
type: Object, type: Object,
default: () => ({}) default: () => ({}),
}, },
// 是否显示上传进度 // 是否显示上传进度
showProgress: { showProgress: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
emits: ['change', 'error'], emits: ['change', 'error'],
setup(props, { emit }) { setup(props, { emit }) {
const store = useStore() const store = useStore()
const uploadRefs: Ref<typeof ElUpload | null> = ref(null) const uploadRefs: Ref<typeof ElUpload | null> = ref(null)
const action = ref(`${import.meta.env.VITE_APP_BASE_URL}/api/upload/${props.type}`) const action = ref(`${import.meta.env.VITE_APP_BASE_URL}/api/common/upload/${props.type}`)
const headers = computed(() => ({ const headers = computed(() => ({
token: store.getters.token, token: store.getters.token,
version: version version: version,
})) }))
const visible = ref(false) const visible = ref(false)
const fileList: Ref<any[]> = ref([]) const fileList: Ref<any[]> = ref([])
@ -90,7 +90,7 @@ export default defineComponent({
} }
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 visible.value = false
@ -122,9 +122,9 @@ export default defineComponent({
handleSuccess, handleSuccess,
handleError, handleError,
handleExceed, handleExceed,
handleClose handleClose,
}
} }
},
}) })
</script> </script>

179
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,26 +132,25 @@
</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 { apiDeptLists, apiPostLists } from '@/api/organize'
import { ElForm } from 'element-plus' import { ElForm } from 'element-plus'
import { useAdmin } from '@/core/hooks/app' import { useAdmin } from '@/core/hooks/app'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
export default defineComponent({
components: {
MaterialSelect,
FooterBtns
},
setup() {
const formRefs: Ref<typeof ElForm | null> = ref(null) const formRefs: Ref<typeof ElForm | null> = ref(null)
const { router, route } = useAdmin() const { router, route } = useAdmin()
const id = computed(() => route.query?.id) const id = computed(() => route.query?.id)
const loading = ref(false) const loading = ref(false)
// 表单数据 // 表单数据
const roleList: Ref<any[]> = ref([]) const roleList: Ref<any[]> = ref([]) // 角色
const deptList: Ref<any[]> = ref([]) // 部门
const postList: Ref<any[]> = ref([]) // 岗位
const { formData, rules } = toRefs( const { formData, rules } = toRefs(
reactive({ reactive({
formData: { formData: {
@ -114,50 +161,52 @@ export default defineComponent({
password: '', password: '',
password_confirm: '', password_confirm: '',
isDisable: 0, isDisable: 0,
isMultipoint: 0 isMultipoint: 0,
deptId: '',
postId: '',
}, },
rules: { rules: {
username: [ username: [
{ {
required: true, required: true,
message: '请输入账号', message: '请输入账号',
trigger: ['blur'] trigger: ['blur'],
} },
], ],
nickname: [ nickname: [
{ {
required: true, required: true,
message: '请输入名称', message: '请输入名称',
trigger: ['blur'] trigger: ['blur'],
} },
], ],
role: [ role: [
{ {
required: true, required: true,
message: '请选择角色', message: '请选择角色',
trigger: ['blur'] trigger: ['blur'],
} },
], ],
password: [ password: [
{ {
required: true, required: true,
message: '请输入密码', message: '请输入密码',
trigger: 'blur', trigger: 'blur',
pattern: /(^[^\s]*$)/ // 不能输入空格 pattern: /(^[^\s]*$)/, // 不能输入空格
}, },
{ {
validator: (rule: object, value: string, callback: any) => { validator: (rule: object, value: string, callback: any) => {
!value ? callback(new Error('请输入密码')) : callback() !value ? callback(new Error('请输入密码')) : callback()
}, },
trigger: 'blur' trigger: 'blur',
} },
] as any[], ] as any[],
password_confirm: [ password_confirm: [
{ {
required: true, required: true,
message: '请再次输入密码', message: '请再次输入密码',
trigger: 'blur', trigger: 'blur',
pattern: /(^[^\s]*$)/ // 不能输入空格 pattern: /(^[^\s]*$)/, // 不能输入空格
}, },
{ {
validator: (rule: object, value: string, callback: any) => { validator: (rule: object, value: string, callback: any) => {
@ -168,30 +217,68 @@ export default defineComponent({
} }
callback() callback()
}, },
trigger: 'blur' trigger: 'blur',
} },
] as any[] ] 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({
// id: 0,
// name: '超级管理员',
// })
// }
if (id.value && formData.value.root == 1) {
roleList.value.push({ roleList.value.push({
id: 0, id: 0,
name: '超级管理员' name: '系统管理员',
})
}
}) })
console.log(formData.value.id, 'formData.value.id')
} }
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 = () => { const getAdminDetail = () => {
if (!id.value) { if (!id.value) {
rules.value.password rules.value.password
@ -200,7 +287,7 @@ export default defineComponent({
} }
loading.value = true loading.value = true
apiAdminDetail({ apiAdminDetail({
id: id.value id: id.value,
}) })
.then((res: any) => { .then((res: any) => {
formData.value = res formData.value = res
@ -215,6 +302,14 @@ export default defineComponent({
if (!valid) { if (!valid) {
return return
} }
// 因为组件绑定的pid是number，会匹配对应的联级数据
// 而选中后，pid是变为数组
// 所以pid是数组时（即新建部门或者编辑部门改变上级部门）
if (Array.isArray(formData.value.deptId)) {
formData.value.deptId = formData.value.deptId[formData.value.deptId.length - 1]
}
const promise = id.value const promise = id.value
? apiAdminEdit({ ...formData.value, id: id.value }) ? apiAdminEdit({ ...formData.value, id: id.value })
: apiAdminAdd(formData.value) : apiAdminAdd(formData.value)
@ -228,18 +323,8 @@ export default defineComponent({
onMounted(() => { onMounted(() => {
getAdminDetail() getAdminDetail()
getRoleList() getRoleList()
}) getDeptList()
getPostList()
return {
id,
formRefs,
loading,
formData,
rules,
roleList,
onSubmit
}
}
}) })
</script> </script>

41
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,11 +96,7 @@
</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>
@ -126,19 +113,19 @@ 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({
@ -147,7 +134,7 @@ export default defineComponent({
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() requestApi()
}) })
@ -168,7 +155,7 @@ export default defineComponent({
const getRoleList = () => { const getRoleList = () => {
apiRoleLists({ apiRoleLists({
page_type: 1 page_type: 1,
}).then((res: any) => { }).then((res: any) => {
roleList.value = res.lists roleList.value = res.lists
}) })
@ -187,9 +174,9 @@ export default defineComponent({
adminLists, adminLists,
changeStatus, changeStatus,
handleDelete, handleDelete,
handleStatusChange handleStatusChange,
}
} }
},
}) })
</script> </script>

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>