lisang
/
vue3-element-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加部门修改和部门搜索 

添加部门修改和部门搜索
This commit is contained in:
chuan 2021-12-07 17:09:16 +08:00
parent 2aee00631e
commit 2059d2e8af
3 changed files with 71 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/api/system/dept.ts
View File

@ -1,13 +1,5 @@
import request from '@/utils/request'
// export function list(queryParams:object) {
// return request({
// url: '/youlai-admin/api/v1/oauth-clients',
// method: 'get',
// params: queryParams
// })
// }
export const listDept = (queryParams?: object) => {
return request({
url: '/youlai-admin/api/v1/depts/table',
@ -18,15 +10,11 @@ export const listDept = (queryParams?: object) => {
export const getDept = (deptId: any) => {
return request({
url: '/youlai-admin/api/v1/depts/select',
url: '/youlai-admin/api/v1/depts/'+deptId,
method: 'get'
})
}
// export const listDeptExcludeChild = (deptId: any) => {
// return https().request<RootObject<any>>(`system/dept/list/exclude/${deptId}`, Method.GET, undefined, ContentType.form)
// }
export const delDept = (deptId: any) => {
return request({
url: '/youlai-admin/api/v1/depts/'+deptId,
@ -34,10 +22,7 @@ export const delDept = (deptId: any) => {
})
}
// 新增部门
export const addDept = (data: any) => {
return request({
url: '/youlai-admin/api/v1/depts',
@ -47,22 +32,18 @@ export const addDept = (data: any) => {
}
// 修改部门
export const updateDept = (data: any) => {
export const updateDept = (id:string,data: any) => {
return request({
url: '/youlai-admin/api/v1/depts/' + id,
url: '/youlai-admin/api/v1/depts/'+id,
method: 'put',
data: data
})
}
// // 根据角色ID查询部门树结构
// export const roleDeptTreeselect = (roleId: number | string) => {
// return https().request<any>(`system/dept/roleDeptTreeselect/${roleId}`, Method.GET, undefined, ContentType.form)
// }
//
// // 查询部门下拉树结构
//
// export const treeselect = () => {
// return https().request<RootObject<any>>('system/dept/treeselect', Method.GET, undefined, ContentType.form)
// }
export const getDeptSelectList = ()=> {
return request({
url: '/youlai-admin/api/v1/depts/select',
method: 'get'
})
}

11
src/components/TreeSelect/index.vue
View File

@ -50,7 +50,7 @@ export default defineComponent({
// 选项列表数据(树形结构的对象数组)
options: { type: Array, required: true },
// 初始值
defalut: { type: Number, default: null },
defalut: { type: String, default: null },
// 可清空选项
clearable: { type: Boolean, default: true },
// 自动收起
@ -71,9 +71,6 @@ export default defineComponent({
},
emits: ['callBack'],
setup(props, ctx) {
console.log(props.options)
console.log(props.treeProps)
const instance = getCurrentInstance() as any
const state = reactive({
valueId: 0,
@ -105,8 +102,6 @@ export default defineComponent({
// 处理默认值并显示
const defaultValue = () => {
console.log('xxxxxx')
if (props.defalut !== null) {
const deafaultModels = props.originOptions.filter((item: any) => {
return item[props.treeProps.value] === props.defalut
@ -168,9 +163,7 @@ export default defineComponent({
</script>
<style scoped>
.el-select.el-select--medium{
width: 100%;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
height: auto;

182
src/views/system/dept/index.vue
View File

@ -140,21 +140,17 @@
<el-form
ref="formDialog"
:model="formVal"
:rules="rules"
label-width="80px"
>
<el-row>
<el-col
:span="24"
v-if="parentId !== 0"
>
<el-form-item
label="上级部门"
prop="parentId"
>
<Treeselect
<TreeSelect
:treeProps="props"
:options="deptOptions"
placeholder="请选择归属部门"
placeholder="选择上级部门"
:originOptions="originOptions"
:defalut="formVal.parentId"
:user="true"
@ -162,80 +158,26 @@
:disabled="disabled"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="部门名称"
prop="deptName"
>
<el-input
v-model="formVal.deptName"
placeholder="请输入部门名称"
/>
<!-- <el-form-item label="上级部门" prop="parentId">-->
<!-- <tree-select-->
<!-- v-model="formVal.parentId"-->
<!-- :options="deptOptions"-->
<!-- placeholder="选择上级部门"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="部门名称" prop="name">
<el-input v-model="formVal.name" placeholder="请输入部门名称"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="显示排序"
prop="orderNum"
>
<el-input-number
:min="0"
v-model="formVal.orderNum"
controls-position="right"
/>
<el-form-item label="显示排序" prop="sort">
<el-input-number v-model="formVal.sort" controls-position="right" style="width: 100px" :min="0"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="负责人"
prop="leader"
>
<el-input
v-model="formVal.leader"
placeholder="请输入负责人"
maxlength="20"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="联系电话"
prop="phone"
>
<el-input
v-model="formVal.phone"
placeholder="请输入联系电话"
maxlength="11"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="邮箱"
prop="email"
>
<el-input
v-model="formVal.email"
placeholder="请输入邮箱"
maxlength="50"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="部门状态">
<el-radio-group v-model="formVal.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>
{{ dict.dictLabel }}
</el-radio>
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
@ -260,13 +202,13 @@
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, unref, ref } from 'vue'
import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons'
import { listDept, getDept, delDept, updateDept, addDept } from '@/api/system/dept'
import treeselect from '@/components/TreeSelect/Index.vue'
import { listDept, getDept, delDept, updateDept, addDept,getDeptSelectList } from '@/api/system/dept'
import TreeSelect from '@/components/TreeSelect/Index.vue'
import { ElForm, ElMessage } from 'element-plus'
export default defineComponent({
components: {
treeselect
TreeSelect
},
setup() {
const queryForm = ref(ElForm)
@ -294,7 +236,16 @@ export default defineComponent({
// 是否显示弹出层
open: false,
// 状态数据字典
statusOptions: [],
statusOptions: [
{
"dictValue":0,
"dictLabel":"禁用"
},
{
"dictValue":1,
"dictLabel":"正常"
}
],
// 查询参数
queryParams: {
name: undefined,
@ -303,11 +254,8 @@ export default defineComponent({
formVal: {
deptId: '',
parentId: '',
deptName: '',
orderNum: 0,
leader: '',
phone: '',
email: '',
name: '',
sort: 0,
status: ''
},
@ -318,25 +266,11 @@ export default defineComponent({
parentId: [
{ required: true, message: '上级部门不能为空', trigger: 'blur' }
],
deptName: [
name: [
{ required: true, message: '部门名称不能为空', trigger: 'blur' }
],
orderNum: [
sort: [
{ required: true, message: '显示排序不能为空', trigger: 'blur' }
],
email: [
{
type: 'email',
message: "'请输入正确的邮箱地址",
trigger: ['blur', 'change']
}
],
phone: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur'
}
]
},
test: '8347213498'
@ -346,8 +280,6 @@ export default defineComponent({
const getList = () => {
dataMap.loading = true
listDept(dataMap.queryParams).then((response: any) => {
console.log(response.data)
// dataMap.deptList = handleTree(response.data, 'deptId')
dataMap.deptList = response.data
dataMap.loading = false
})
@ -359,7 +291,7 @@ export default defineComponent({
}
return {
id: node.deptId,
label: node.deptName,
label: node.name,
children: node.children
}
}
@ -379,6 +311,7 @@ export default defineComponent({
form.resetFields()
handleQuery()
}
const flatten = (origin: any) => {
let result: any = []
for (let i = 0; i < origin.length; i++) {
@ -394,9 +327,10 @@ export default defineComponent({
}
/** 查询部门下拉树结构 */
const getTreeselect = () => {
treeselect().then(response=> {
dataMap.deptOptions = response?.data
getDeptSelectList().then(response => {
dataMap.deptOptions = response.data
dataMap.originOptions = flatten(response?.data) as any
})
}
const handleAdd = (row: any) => {
@ -413,18 +347,15 @@ export default defineComponent({
const handleUpdate = async(row: any) => {
dataMap.disabled = true
dataMap.isAdd = false
console.log(row.deptId)
dataMap.deptidfix = row.deptId
const result = await getDept(row.deptId) as any
if (result?.code === 200) {
dataMap.deptidfix = row.id
// 部门下拉数据
await getTreeselect()
const result = await getDept(row.id) as any
if (result?.code === "00000") {
dataMap.formUpdata = result.data
dataMap.formVal.deptName = result.data.deptName
dataMap.formVal.name = result.data.name
dataMap.formVal.parentId = result.data.parentId
dataMap.formVal.orderNum = result.data.orderNum
dataMap.formVal.leader = result.data.leader
dataMap.formVal.phone = result.data.phone
dataMap.formVal.email = result.data.email
dataMap.formVal.sort = result.data.sort
dataMap.formVal.status = result.data.status
dataMap.title = '修改部门'
dataMap.open = true
@ -434,19 +365,15 @@ export default defineComponent({
const submitForm = () => {
const formNode = unref(formDialog)
formNode.validate((valid: any) => {
console.log(valid)
if (valid) {
if (!dataMap.isAdd) {
dataMap.formUpdata.parentId = dataMap.formVal.deptId
dataMap.formUpdata.deptId = dataMap.deptidfix
dataMap.formUpdata.deptName = dataMap.formVal.deptName
dataMap.formUpdata.orderNum = dataMap.formVal.orderNum
dataMap.formUpdata.leader = dataMap.formVal.leader
dataMap.formUpdata.phone = dataMap.formVal.phone
dataMap.formUpdata.email = dataMap.formVal.email
dataMap.formUpdata.parentId = dataMap.formVal.parentId
dataMap.formUpdata.id = dataMap.deptidfix
dataMap.formUpdata.name = dataMap.formVal.name
dataMap.formUpdata.sort = dataMap.formVal.sort
dataMap.formUpdata.status = dataMap.formVal.status
updateDept(dataMap.formUpdata).then((res: any) => {
if (res?.code === 200) {
updateDept(dataMap.formUpdata.id,dataMap.formUpdata).then((res: any) => {
if (res?.code === "00000") {
ElMessage.success('修改成功')
dataMap.open = false
getList()
@ -492,10 +419,7 @@ export default defineComponent({
}
onMounted(() => {
getList()
// getTreeselect()
// getDicts('sys_normal_disable').then((response: any) => {
// dataMap.statusOptions = response.data
// })
getTreeselect()
})
return { ...toRefs(dataMap),Search,Plus,Edit,Delete,Refresh,dialogshow, getDeptId, flatten, getTreeselect, formDialog, statusFormat, queryForm, getList, normalizer, handleDelete, cancel, handleQuery, resetQuery, handleAdd, handleUpdate, submitForm }