|
|
@@ -1,14 +1,15 @@
|
|
|
<template>
|
|
|
<div class="p-2">
|
|
|
- <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
|
|
+ <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
|
|
|
+ :leave-active-class="proxy?.animate.searchAnimate.leave">
|
|
|
<div class="search" v-show="showSearch">
|
|
|
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
|
|
|
- <el-form-item label="部门名称" prop="menuName">
|
|
|
- <el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable @keyup.enter="handleQuery" />
|
|
|
+ <el-form-item label="机构名称" prop="menuName">
|
|
|
+ <el-input v-model="queryParams.deptName" placeholder="请输入机构名称" clearable @keyup.enter="handleQuery"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="状态" prop="status">
|
|
|
- <el-select v-model="queryParams.status" placeholder="部门状态" clearable>
|
|
|
- <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
+ <el-select v-model="queryParams.status" placeholder="机构状态" clearable>
|
|
|
+ <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value"/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
@@ -22,16 +23,18 @@
|
|
|
<el-card shadow="never">
|
|
|
<template #header>
|
|
|
<el-row :gutter="10">
|
|
|
-<!-- <el-col :span="1.5">-->
|
|
|
-<!-- <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['system:dept:add']">新增 </el-button>-->
|
|
|
-<!-- </el-col>-->
|
|
|
+ <!-- <el-col :span="1.5">-->
|
|
|
+ <!-- <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['system:dept:add']">新增 </el-button>-->
|
|
|
+ <!-- </el-col>-->
|
|
|
<el-col :span="1.5">
|
|
|
- <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-show = "hasPermission('system:dept:add')">新增 </el-button>
|
|
|
+ <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-show="hasPermission('system:dept:add')">
|
|
|
+ 新增
|
|
|
+ </el-button>
|
|
|
</el-col>
|
|
|
<el-col :span="1.5">
|
|
|
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
|
|
|
</el-col>
|
|
|
- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
|
|
|
+ <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"/>
|
|
|
</el-row>
|
|
|
</template>
|
|
|
|
|
|
@@ -43,11 +46,11 @@
|
|
|
ref="deptTableRef"
|
|
|
:default-expand-all="isExpandAll"
|
|
|
>
|
|
|
- <el-table-column prop="deptName" label="部门名称" width="260" />
|
|
|
- <el-table-column prop="orderNum" align="center" label="排序" width="200" />
|
|
|
+ <el-table-column prop="deptName" label="机构名称" width="260"/>
|
|
|
+ <el-table-column prop="orderNum" align="center" label="排序" width="200"/>
|
|
|
<el-table-column prop="status" align="center" label="状态" width="100">
|
|
|
<template #default="scope">
|
|
|
- <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
|
|
|
+ <dict-tag :options="sys_normal_disable" :value="scope.row.status"/>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="创建时间" align="center" prop="createTime" width="200">
|
|
|
@@ -58,13 +61,16 @@
|
|
|
<el-table-column fixed="right" align="center" label="操作">
|
|
|
<template #default="scope">
|
|
|
<el-tooltip content="修改" placement="top">
|
|
|
- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']" />
|
|
|
+ <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
|
|
|
+ v-hasPermi="['system:dept:edit']"/>
|
|
|
</el-tooltip>
|
|
|
<el-tooltip content="新增" placement="top">
|
|
|
- <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']" />
|
|
|
+ <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)"
|
|
|
+ v-hasPermi="['system:dept:add']"/>
|
|
|
</el-tooltip>
|
|
|
<el-tooltip content="删除" placement="top">
|
|
|
- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']" />
|
|
|
+ <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
|
|
|
+ v-hasPermi="['system:dept:remove']"/>
|
|
|
</el-tooltip>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -83,50 +89,56 @@
|
|
|
<el-form v-if="dialog.visible" ref="deptFormRef" :model="form" :rules="rules" label-width="80px">
|
|
|
<el-row>
|
|
|
<el-col :span="24" v-if="form.parentId !== 0">
|
|
|
- <el-form-item label="上级部门" prop="parentId">
|
|
|
+ <el-form-item label="上级机构" prop="parentId">
|
|
|
<el-tree-select
|
|
|
v-model="form.parentId"
|
|
|
:data="deptOptions"
|
|
|
:props="{ value: 'id', label: 'deptName', children: 'children' }"
|
|
|
value-key="id"
|
|
|
- placeholder="选择上级部门"
|
|
|
+ placeholder="选择上级机构"
|
|
|
check-strictly
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="部门名称" prop="deptName">
|
|
|
- <el-input v-model="form.deptName" placeholder="请输入部门名称" />
|
|
|
+ <el-form-item label="机构名称" prop="deptName">
|
|
|
+ <el-input v-model="form.deptName" placeholder="请输入机构名称"/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="显示排序" prop="orderNum">
|
|
|
- <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
|
|
|
+ <el-input-number v-model="form.orderNum" controls-position="right" :min="0"/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="负责人" prop="leader">
|
|
|
- <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
|
|
|
+ <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20"/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="联系电话" prop="phone">
|
|
|
- <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
|
|
|
+ <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11"/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="邮箱" prop="email">
|
|
|
- <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
|
|
|
+ <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50"/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-form-item label="部门状态">
|
|
|
+ <el-form-item label="机构状态">
|
|
|
<el-radio-group v-model="form.status">
|
|
|
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label
|
|
|
- }}</el-radio>
|
|
|
+ }}
|
|
|
+ </el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="机构编码" prop="deptCode">
|
|
|
+ <el-input v-model="form.deptCode" placeholder="请输入机构编码"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
@@ -140,165 +152,166 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup name="Dept" lang="ts">
|
|
|
-import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from '@/api/system/dept'
|
|
|
-import { ComponentInternalInstance } from 'vue'
|
|
|
-import { DeptForm, DeptQuery, DeptVO } from '@/api/system/dept/types'
|
|
|
-import { FormInstance, TableInstance } from 'element-plus'
|
|
|
-import { hasPermission } from '@/utils/auth'
|
|
|
+ import {listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild} from '@/api/system/dept'
|
|
|
+ import {ComponentInternalInstance} from 'vue'
|
|
|
+ import {DeptForm, DeptQuery, DeptVO} from '@/api/system/dept/types'
|
|
|
+ import {FormInstance, TableInstance} from 'element-plus'
|
|
|
+ import {hasPermission} from '@/utils/auth'
|
|
|
|
|
|
-interface DeptOptionsType {
|
|
|
- id: number | string
|
|
|
- deptName: string
|
|
|
- children: DeptOptionsType[]
|
|
|
-}
|
|
|
+ interface DeptOptionsType {
|
|
|
+ id: number | string
|
|
|
+ deptName: string
|
|
|
+ children: DeptOptionsType[]
|
|
|
+ }
|
|
|
|
|
|
-const { proxy } = getCurrentInstance() as ComponentInternalInstance
|
|
|
-const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'))
|
|
|
+ const {proxy} = getCurrentInstance() as ComponentInternalInstance
|
|
|
+ const {sys_normal_disable} = toRefs<any>(proxy?.useDict('sys_normal_disable'))
|
|
|
|
|
|
-const deptList = ref<DeptVO[]>([])
|
|
|
-const loading = ref(true)
|
|
|
-const showSearch = ref(true)
|
|
|
-const deptOptions = ref<DeptOptionsType[]>([])
|
|
|
-const isExpandAll = ref(true)
|
|
|
+ const deptList = ref<DeptVO[]>([])
|
|
|
+ const loading = ref(true)
|
|
|
+ const showSearch = ref(true)
|
|
|
+ const deptOptions = ref<DeptOptionsType[]>([])
|
|
|
+ const isExpandAll = ref(true)
|
|
|
|
|
|
-const dialog = reactive<DialogOption>({
|
|
|
- visible: false,
|
|
|
- title: '',
|
|
|
-})
|
|
|
+ const dialog = reactive<DialogOption>({
|
|
|
+ visible: false,
|
|
|
+ title: '',
|
|
|
+ })
|
|
|
|
|
|
-const deptTableRef = ref<TableInstance>()
|
|
|
-const queryFormRef = ref<FormInstance>()
|
|
|
-const deptFormRef = ref<FormInstance>()
|
|
|
+ const deptTableRef = ref<TableInstance>()
|
|
|
+ const queryFormRef = ref<FormInstance>()
|
|
|
+ const deptFormRef = ref<FormInstance>()
|
|
|
|
|
|
-const initFormData: DeptForm = {
|
|
|
- id: undefined,
|
|
|
- parentId: undefined,
|
|
|
- deptName: undefined,
|
|
|
- orderNum: 0,
|
|
|
- leader: undefined,
|
|
|
- phone: undefined,
|
|
|
- email: undefined,
|
|
|
- status: '0',
|
|
|
-}
|
|
|
-const data = reactive<PageData<DeptForm, DeptQuery>>({
|
|
|
- form: { ...initFormData },
|
|
|
- queryParams: {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10,
|
|
|
+ const initFormData: DeptForm = {
|
|
|
+ id: undefined,
|
|
|
+ parentId: undefined,
|
|
|
deptName: undefined,
|
|
|
- status: undefined,
|
|
|
- },
|
|
|
- rules: {
|
|
|
- parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
|
|
|
- deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
|
|
|
- orderNum: [{ 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' }],
|
|
|
- },
|
|
|
-})
|
|
|
-
|
|
|
-const { queryParams, form, rules } = toRefs<PageData<DeptForm, DeptQuery>>(data)
|
|
|
-
|
|
|
-/** 查询菜单列表 */
|
|
|
-const getList = async () => {
|
|
|
- // console.log("#######################"+ checkPermi['system:dept:add'])
|
|
|
- loading.value = true
|
|
|
- const res = await listDept(queryParams.value)
|
|
|
- const data = proxy?.handleTree<DeptVO>(res.data, 'id')
|
|
|
- if (data) {
|
|
|
- deptList.value = data
|
|
|
+ orderNum: 0,
|
|
|
+ leader: undefined,
|
|
|
+ phone: undefined,
|
|
|
+ email: undefined,
|
|
|
+ status: '0',
|
|
|
+ deptCode: undefined
|
|
|
}
|
|
|
- loading.value = false
|
|
|
-}
|
|
|
-/** 取消按钮 */
|
|
|
-const cancel = () => {
|
|
|
- reset()
|
|
|
- dialog.visible = false
|
|
|
-}
|
|
|
-/** 表单重置 */
|
|
|
-const reset = () => {
|
|
|
- form.value = { ...initFormData }
|
|
|
- deptFormRef.value?.resetFields()
|
|
|
-}
|
|
|
+ const data = reactive<PageData<DeptForm, DeptQuery>>({
|
|
|
+ form: {...initFormData},
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ deptName: undefined,
|
|
|
+ status: undefined,
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ parentId: [{required: true, message: '上级机构不能为空', trigger: 'blur'}],
|
|
|
+ deptName: [{required: true, message: '机构名称不能为空', trigger: 'blur'}],
|
|
|
+ orderNum: [{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'}],
|
|
|
+ },
|
|
|
+ })
|
|
|
+
|
|
|
+ const {queryParams, form, rules} = toRefs<PageData<DeptForm, DeptQuery>>(data)
|
|
|
|
|
|
-/** 搜索按钮操作 */
|
|
|
-const handleQuery = () => {
|
|
|
- getList()
|
|
|
-}
|
|
|
-/** 重置按钮操作 */
|
|
|
-const resetQuery = () => {
|
|
|
- queryFormRef.value?.resetFields()
|
|
|
- handleQuery()
|
|
|
-}
|
|
|
-/** 新增按钮操作 */
|
|
|
-const handleAdd = (row?: DeptVO) => {
|
|
|
- listDept().then((res) => {
|
|
|
- const data = proxy?.handleTree<DeptOptionsType>(res.data, 'id')
|
|
|
+ /** 查询菜单列表 */
|
|
|
+ const getList = async () => {
|
|
|
+ // console.log("#######################"+ checkPermi['system:dept:add'])
|
|
|
+ loading.value = true
|
|
|
+ const res = await listDept(queryParams.value)
|
|
|
+ const data = proxy?.handleTree<DeptVO>(res.data, 'id')
|
|
|
if (data) {
|
|
|
- deptOptions.value = data
|
|
|
- dialog.visible = true
|
|
|
- dialog.title = '添加部门'
|
|
|
- nextTick(() => {
|
|
|
- reset()
|
|
|
- if (row && row.id) {
|
|
|
- form.value.parentId = row?.id
|
|
|
- }
|
|
|
- })
|
|
|
+ deptList.value = data
|
|
|
}
|
|
|
- })
|
|
|
-}
|
|
|
-/** 展开/折叠操作 */
|
|
|
-const handleToggleExpandAll = () => {
|
|
|
- isExpandAll.value = !isExpandAll.value
|
|
|
- toggleExpandAll(deptList.value, isExpandAll.value)
|
|
|
-}
|
|
|
-/** 展开/折叠所有 */
|
|
|
-const toggleExpandAll = (data: DeptVO[], status: boolean) => {
|
|
|
- data.forEach((item) => {
|
|
|
- deptTableRef.value?.toggleRowExpansion(item, status)
|
|
|
- if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-/** 修改按钮操作 */
|
|
|
-const handleUpdate = async (row: DeptVO) => {
|
|
|
- const res = await getDept(row.id)
|
|
|
- dialog.visible = true
|
|
|
- dialog.title = '修改部门'
|
|
|
- nextTick(async () => {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+ /** 取消按钮 */
|
|
|
+ const cancel = () => {
|
|
|
reset()
|
|
|
- form.value = res.data
|
|
|
- const response = await listDeptExcludeChild(row.id)
|
|
|
- const data = proxy?.handleTree<DeptOptionsType>(response.data, 'id')
|
|
|
- if (data) {
|
|
|
- deptOptions.value = data
|
|
|
- if (data.length === 0) {
|
|
|
- const noResultsOptions: DeptOptionsType = { id: res.data.parentId, deptName: res.data.parentName, children: [] }
|
|
|
- deptOptions.value.push(noResultsOptions)
|
|
|
+ dialog.visible = false
|
|
|
+ }
|
|
|
+ /** 表单重置 */
|
|
|
+ const reset = () => {
|
|
|
+ form.value = {...initFormData}
|
|
|
+ deptFormRef.value?.resetFields()
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ const handleQuery = () => {
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ const resetQuery = () => {
|
|
|
+ queryFormRef.value?.resetFields()
|
|
|
+ handleQuery()
|
|
|
+ }
|
|
|
+ /** 新增按钮操作 */
|
|
|
+ const handleAdd = (row?: DeptVO) => {
|
|
|
+ listDept().then((res) => {
|
|
|
+ const data = proxy?.handleTree<DeptOptionsType>(res.data, 'id')
|
|
|
+ if (data) {
|
|
|
+ deptOptions.value = data
|
|
|
+ dialog.visible = true
|
|
|
+ dialog.title = '添加机构'
|
|
|
+ nextTick(() => {
|
|
|
+ reset()
|
|
|
+ if (row && row.id) {
|
|
|
+ form.value.parentId = row?.id
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-/** 提交按钮 */
|
|
|
-const submitForm = () => {
|
|
|
- deptFormRef.value?.validate(async (valid: boolean) => {
|
|
|
- if (valid) {
|
|
|
- form.value.id ? await updateDept(form.value) : await addDept(form.value)
|
|
|
- proxy?.$modal.msgSuccess('操作成功')
|
|
|
- dialog.visible = false
|
|
|
- getList()
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-/** 删除按钮操作 */
|
|
|
-const handleDelete = async (row: DeptVO) => {
|
|
|
- await proxy?.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?')
|
|
|
- await delDept(row.id)
|
|
|
- getList()
|
|
|
- proxy?.$modal.msgSuccess('删除成功')
|
|
|
-}
|
|
|
+ })
|
|
|
+ }
|
|
|
+ /** 展开/折叠操作 */
|
|
|
+ const handleToggleExpandAll = () => {
|
|
|
+ isExpandAll.value = !isExpandAll.value
|
|
|
+ toggleExpandAll(deptList.value, isExpandAll.value)
|
|
|
+ }
|
|
|
+ /** 展开/折叠所有 */
|
|
|
+ const toggleExpandAll = (data: DeptVO[], status: boolean) => {
|
|
|
+ data.forEach((item) => {
|
|
|
+ deptTableRef.value?.toggleRowExpansion(item, status)
|
|
|
+ if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- getList()
|
|
|
-})
|
|
|
+ /** 修改按钮操作 */
|
|
|
+ const handleUpdate = async (row: DeptVO) => {
|
|
|
+ const res = await getDept(row.id)
|
|
|
+ dialog.visible = true
|
|
|
+ dialog.title = '修改机构'
|
|
|
+ nextTick(async () => {
|
|
|
+ reset()
|
|
|
+ form.value = res.data
|
|
|
+ const response = await listDeptExcludeChild(row.id)
|
|
|
+ const data = proxy?.handleTree<DeptOptionsType>(response.data, 'id')
|
|
|
+ if (data) {
|
|
|
+ deptOptions.value = data
|
|
|
+ if (data.length === 0) {
|
|
|
+ const noResultsOptions: DeptOptionsType = {id: res.data.parentId, deptName: res.data.parentName, children: []}
|
|
|
+ deptOptions.value.push(noResultsOptions)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ /** 提交按钮 */
|
|
|
+ const submitForm = () => {
|
|
|
+ deptFormRef.value?.validate(async (valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+ form.value.id ? await updateDept(form.value) : await addDept(form.value)
|
|
|
+ proxy?.$modal.msgSuccess('操作成功')
|
|
|
+ dialog.visible = false
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ /** 删除按钮操作 */
|
|
|
+ const handleDelete = async (row: DeptVO) => {
|
|
|
+ await proxy?.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?')
|
|
|
+ await delDept(row.id)
|
|
|
+ getList()
|
|
|
+ proxy?.$modal.msgSuccess('删除成功')
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ getList()
|
|
|
+ })
|
|
|
</script>
|