tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of gitee.com:youlaitech/vue3-element-admin

Browse Source
This commit is contained in:
有来技术
2021-12-08 00:19:03 +08:00
parent 338f3c59ce b61619efb6
commit 48a3f86668
3 changed files with 78 additions and 199 deletions
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

@@ -38,7 +38,7 @@ export default defineComponent({
name: 'ElTreeSelect',
props: {
placeholder: {
type: String,
type: [String,Number],
default: ''
},
user: {
@@ -50,7 +50,7 @@ export default defineComponent({
// 选项列表数据(树形结构的对象数组)
options: { type: Array, required: true },
// 初始值
defalut: { type: Number, default: null },
defalut: { type: [String,Number], 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
@@ -169,7 +164,7 @@ export default defineComponent({
<style scoped>
.el-select.el-select--medium{
width: 100%;
width: 100%;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {

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

@@ -70,16 +70,12 @@
新增
</el-button>
</el-col>
<!-- <right-toolbar
v-model:showSearch="showSearch"
@queryTable="getList"
/> -->
</el-row>
<el-table
v-loading="loading"
:data="deptList"
row-key="deptId"
row-key="id"
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
@@ -135,26 +131,23 @@
:title="title"
v-model="open"
width="600px"
@opened="dialogshow"
@open="dialogshow"
@closed="cancel"
>
<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 +155,18 @@
: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="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>
</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-group>
</el-form-item>
</el-col>
</el-row>
<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-form-item label="部门状态">
<el-radio-group v-model="formVal.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
@@ -260,20 +191,19 @@
<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)
const formDialog = ref(ElForm)
const dataMap = reactive({
disabled: false,
formUpdata: {} as any,
isAdd: false,
originOptions: [],
props: { // 配置项（必选）
@@ -294,60 +224,48 @@ export default defineComponent({
// 是否显示弹出层
open: false,
// 状态数据字典
statusOptions: [],
statusOptions: [
{
"dictValue":0,
"dictLabel":"禁用"
},
{
"dictValue":1,
"dictLabel":"正常"
}
],
// 查询参数
queryParams: {
name: undefined,
status: undefined
},
formVal: {
deptId: '',
id: '',
parentId: '',
deptName: '',
orderNum: 0,
leader: '',
phone: '',
email: '',
name: '',
sort: 1,
status: ''
},
deptidfix: 0,
// 表单参数
// 表单校验
deptidfix: 1,
// 表单参数校验
rules: {
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'
}
})
/** 查询部门列表 */
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
})
@@ -358,8 +276,8 @@ export default defineComponent({
delete node.children
}
return {
id: node.deptId,
label: node.deptName,
id: node.id,
label: node.name,
children: node.children
}
}
@@ -367,6 +285,13 @@ export default defineComponent({
const cancel = () => {
dataMap.open = false
dataMap.isAdd = false
dataMap.formVal = {
id: '',
parentId: '',
name: '',
sort: 1,
status: ''
}
}
/** 搜索按钮操作 */
@@ -379,6 +304,7 @@ export default defineComponent({
form.resetFields()
handleQuery()
}
const flatten = (origin: any) => {
let result: any = []
for (let i = 0; i < origin.length; i++) {
@@ -394,17 +320,15 @@ export default defineComponent({
}
/** 查询部门下拉树结构 */
const getTreeselect = () => {
treeselect().then(response=> {
dataMap.deptOptions = response?.data
dataMap.originOptions = flatten(response?.data) as any
getDeptSelectList().then(response => {
dataMap.deptOptions = response.data
dataMap.originOptions = flatten(response?.data) as any
})
}
const handleAdd = (row: any) => {
dataMap.isAdd = true
dataMap.formVal.parentId = {} as any
if (row.deptId) {
dataMap.formVal = {} as any
dataMap.formVal.parentId = row.deptId
if (row.id) {
dataMap.formVal.parentId = row.id.toString()
}
dataMap.open = true
dataMap.title = '添加部门'
@@ -413,19 +337,10 @@ 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.formUpdata = result.data
dataMap.formVal.deptName = result.data.deptName
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.status = result.data.status
dataMap.deptidfix = row.id
const result = await getDept(row.id) as any
if (result?.code === "00000") {
dataMap.formVal = result.data
dataMap.title = '修改部门'
dataMap.open = true
}
@@ -434,19 +349,10 @@ 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.status = dataMap.formVal.status
updateDept(dataMap.formUpdata).then((res: any) => {
if (res?.code === 200) {
updateDept( dataMap.deptidfix,dataMap.formVal).then((res: any) => {
if (res?.code === "00000") {
ElMessage.success('修改成功')
dataMap.open = false
getList()
@@ -457,7 +363,7 @@ export default defineComponent({
})
} else {
addDept(dataMap.formVal).then((res: any) => {
if (res?.code === 200) {
if (res?.code === "00000") {
ElMessage.success('新增成功')
dataMap.open = false
getList()
@@ -472,8 +378,8 @@ export default defineComponent({
}
/** 删除按钮操作 */
const handleDelete = async(row: any) => {
const result = await delDept(row.deptId) as any
if (result?.code === 200) {
const result = await delDept(row.id) as any
if (result?.code === "00000") {
getList()
} else {
ElMessage.error(result?.msg)
@@ -485,20 +391,17 @@ export default defineComponent({
}
const getDeptId = (e: any) => {
dataMap.formVal.deptId = e
dataMap.formVal.parentId = e
}
const dialogshow = () => {
getTreeselect()
}
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 }
return { ...toRefs(dataMap),Search,Plus,Edit,Delete,Refresh,dialogshow, getDeptId, flatten, formDialog, statusFormat, queryForm, getList, normalizer, handleDelete, cancel, handleQuery, resetQuery, handleAdd, handleUpdate, submitForm }
}
})