fix: 🐛 部门状态筛选长度优化
This commit is contained in:
郝先瑞
@@ -1,3 +1,155 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div class="search-container">
|
||||||
|
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||||
|
<el-form-item label="关键字" prop="keywords">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.keywords"
|
||||||
|
placeholder="部门名称"
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="部门状态" prop="status">
|
||||||
|
<el-select
|
||||||
|
v-model="queryParams.status"
|
||||||
|
placeholder="全部"
|
||||||
|
clearable
|
||||||
|
class="!w-[100px]"
|
||||||
|
>
|
||||||
|
<el-option :value="1" label="正常" />
|
||||||
|
<el-option :value="0" label="禁用" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button class="filter-item" type="primary" @click="handleQuery">
|
||||||
|
<i-ep-search />
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="resetQuery"> <i-ep-refresh />重置 </el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-card shadow="never" class="table-container">
|
||||||
|
<template #header>
|
||||||
|
<el-button
|
||||||
|
v-hasPerm="['sys:dept:add']"
|
||||||
|
type="success"
|
||||||
|
@click="openDialog(0, undefined)"
|
||||||
|
><i-ep-plus />新增</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
v-hasPerm="['sys:dept:delete']"
|
||||||
|
type="danger"
|
||||||
|
:disabled="ids.length === 0"
|
||||||
|
@click="handleDelete()"
|
||||||
|
><i-ep-delete />删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
v-loading="loading"
|
||||||
|
:data="deptList"
|
||||||
|
row-key="id"
|
||||||
|
default-expand-all
|
||||||
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
|
<el-table-column prop="name" label="部门名称" min-width="200" />
|
||||||
|
<el-table-column prop="status" label="状态" width="100">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
|
||||||
|
<el-tag v-else type="info">禁用</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column prop="sort" label="排序" width="100" />
|
||||||
|
|
||||||
|
<el-table-column label="操作" fixed="right" align="left" width="200">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button
|
||||||
|
v-hasPerm="['sys:dept:add']"
|
||||||
|
type="primary"
|
||||||
|
link
|
||||||
|
size="small"
|
||||||
|
@click.stop="openDialog(scope.row.id, undefined)"
|
||||||
|
><i-ep-plus />新增
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-hasPerm="['sys:dept:edit']"
|
||||||
|
type="primary"
|
||||||
|
link
|
||||||
|
size="small"
|
||||||
|
@click.stop="openDialog(scope.row.parentId, scope.row.id)"
|
||||||
|
><i-ep-edit />编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
v-hasPerm="['sys:dept:delete']"
|
||||||
|
type="primary"
|
||||||
|
link
|
||||||
|
size="small"
|
||||||
|
@click.stop="handleDelete(scope.row.id)"
|
||||||
|
>
|
||||||
|
<i-ep-delete />删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
v-model="dialog.visible"
|
||||||
|
:title="dialog.title"
|
||||||
|
width="600px"
|
||||||
|
@closed="closeDialog"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
ref="deptFormRef"
|
||||||
|
:model="formData"
|
||||||
|
:rules="rules"
|
||||||
|
label-width="80px"
|
||||||
|
>
|
||||||
|
<el-form-item label="上级部门" prop="parentId">
|
||||||
|
<el-tree-select
|
||||||
|
v-model="formData.parentId"
|
||||||
|
placeholder="选择上级部门"
|
||||||
|
:data="deptOptions"
|
||||||
|
filterable
|
||||||
|
check-strictly
|
||||||
|
:render-after-expand="false"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="部门名称" prop="name">
|
||||||
|
<el-input v-model="formData.name" placeholder="请输入部门名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="显示排序" prop="sort">
|
||||||
|
<el-input-number
|
||||||
|
v-model="formData.sort"
|
||||||
|
controls-position="right"
|
||||||
|
style="width: 100px"
|
||||||
|
:min="0"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="部门状态">
|
||||||
|
<el-radio-group v-model="formData.status">
|
||||||
|
<el-radio :label="1">正常</el-radio>
|
||||||
|
<el-radio :label="0">禁用</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="handleSubmit"> 确 定 </el-button>
|
||||||
|
<el-button @click="closeDialog"> 取 消 </el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {
|
import {
|
||||||
getDeptForm,
|
getDeptForm,
|
||||||
@@ -164,153 +316,3 @@ onMounted(() => {
|
|||||||
handleQuery();
|
handleQuery();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
<div class="search-container">
|
|
||||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
|
||||||
<el-form-item label="关键字" prop="keywords">
|
|
||||||
<el-input
|
|
||||||
v-model="queryParams.keywords"
|
|
||||||
placeholder="部门名称"
|
|
||||||
@keyup.enter="handleQuery"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="部门状态" prop="status">
|
|
||||||
<el-select
|
|
||||||
v-model="queryParams.status"
|
|
||||||
placeholder="部门状态"
|
|
||||||
clearable
|
|
||||||
>
|
|
||||||
<el-option :value="1" label="正常" />
|
|
||||||
<el-option :value="0" label="禁用" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button class="filter-item" type="primary" @click="handleQuery">
|
|
||||||
<i-ep-search />
|
|
||||||
搜索
|
|
||||||
</el-button>
|
|
||||||
<el-button @click="resetQuery"> <i-ep-refresh />重置 </el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-card shadow="never" class="table-container">
|
|
||||||
<template #header>
|
|
||||||
<el-button
|
|
||||||
v-hasPerm="['sys:dept:add']"
|
|
||||||
type="success"
|
|
||||||
@click="openDialog(0, undefined)"
|
|
||||||
><i-ep-plus />新增</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
v-hasPerm="['sys:dept:delete']"
|
|
||||||
type="danger"
|
|
||||||
:disabled="ids.length === 0"
|
|
||||||
@click="handleDelete()"
|
|
||||||
><i-ep-delete />删除
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<el-table
|
|
||||||
v-loading="loading"
|
|
||||||
:data="deptList"
|
|
||||||
row-key="id"
|
|
||||||
default-expand-all
|
|
||||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
||||||
@selection-change="handleSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
|
||||||
<el-table-column prop="name" label="部门名称" min-width="200" />
|
|
||||||
<el-table-column prop="status" label="状态" width="100">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
|
|
||||||
<el-tag v-else type="info">禁用</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
|
|
||||||
<el-table-column prop="sort" label="排序" width="100" />
|
|
||||||
|
|
||||||
<el-table-column label="操作" fixed="right" align="left" width="200">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button
|
|
||||||
v-hasPerm="['sys:dept:add']"
|
|
||||||
type="primary"
|
|
||||||
link
|
|
||||||
size="small"
|
|
||||||
@click.stop="openDialog(scope.row.id, undefined)"
|
|
||||||
><i-ep-plus />新增
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
v-hasPerm="['sys:dept:edit']"
|
|
||||||
type="primary"
|
|
||||||
link
|
|
||||||
size="small"
|
|
||||||
@click.stop="openDialog(scope.row.parentId, scope.row.id)"
|
|
||||||
><i-ep-edit />编辑
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
v-hasPerm="['sys:dept:delete']"
|
|
||||||
type="primary"
|
|
||||||
link
|
|
||||||
size="small"
|
|
||||||
@click.stop="handleDelete(scope.row.id)"
|
|
||||||
>
|
|
||||||
<i-ep-delete />删除
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-dialog
|
|
||||||
v-model="dialog.visible"
|
|
||||||
:title="dialog.title"
|
|
||||||
width="600px"
|
|
||||||
@closed="closeDialog"
|
|
||||||
>
|
|
||||||
<el-form
|
|
||||||
ref="deptFormRef"
|
|
||||||
:model="formData"
|
|
||||||
:rules="rules"
|
|
||||||
label-width="80px"
|
|
||||||
>
|
|
||||||
<el-form-item label="上级部门" prop="parentId">
|
|
||||||
<el-tree-select
|
|
||||||
v-model="formData.parentId"
|
|
||||||
placeholder="选择上级部门"
|
|
||||||
:data="deptOptions"
|
|
||||||
filterable
|
|
||||||
check-strictly
|
|
||||||
:render-after-expand="false"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="部门名称" prop="name">
|
|
||||||
<el-input v-model="formData.name" placeholder="请输入部门名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="显示排序" prop="sort">
|
|
||||||
<el-input-number
|
|
||||||
v-model="formData.sort"
|
|
||||||
controls-position="right"
|
|
||||||
style="width: 100px"
|
|
||||||
:min="0"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="部门状态">
|
|
||||||
<el-radio-group v-model="formData.status">
|
|
||||||
<el-radio :label="1">正常</el-radio>
|
|
||||||
<el-radio :label="0">禁用</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<template #footer>
|
|
||||||
<div class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="handleSubmit"> 确 定 </el-button>
|
|
||||||
<el-button @click="closeDialog"> 取 消 </el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user