更新
This commit is contained in:
139
src/api/auth.js
139
src/api/auth.js
@@ -22,6 +22,117 @@ export default {
|
||||
return await request.get(this.url)
|
||||
},
|
||||
},
|
||||
users: {
|
||||
list: {
|
||||
url: `auth/users/index`,
|
||||
name: "获得用户列表",
|
||||
get: async function (params) {
|
||||
return await request.get(this.url, { params });
|
||||
},
|
||||
},
|
||||
add: {
|
||||
url: `auth/users/add`,
|
||||
name: "添加用户",
|
||||
post: async function (params) {
|
||||
return await request.post(this.url, params);
|
||||
},
|
||||
},
|
||||
edit: {
|
||||
url: `auth/users/edit`,
|
||||
name: "编辑用户",
|
||||
post: async function (params) {
|
||||
return await request.put(this.url, params);
|
||||
},
|
||||
},
|
||||
uppasswd: {
|
||||
url: `auth/users/passwd`,
|
||||
name: "修改密码",
|
||||
post: async function (params) {
|
||||
return await request.put(this.url, params);
|
||||
},
|
||||
},
|
||||
uprole: {
|
||||
url: `auth/users/uprole`,
|
||||
name: "设置角色",
|
||||
post: async function (params) {
|
||||
return await request.put(this.url, params);
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
url: `auth/users/delete`,
|
||||
name: "删除用户",
|
||||
post: async function (params) {
|
||||
return await request.delete(this.url, params);
|
||||
},
|
||||
},
|
||||
},
|
||||
role: {
|
||||
list: {
|
||||
url: `auth/role/index`,
|
||||
name: "获得角色列表",
|
||||
get: async function (params) {
|
||||
return await request.get(this.url, { params });
|
||||
},
|
||||
},
|
||||
add: {
|
||||
url: `auth/role/add`,
|
||||
name: "添加角色",
|
||||
post: async function (params) {
|
||||
return await request.post(this.url, params);
|
||||
},
|
||||
},
|
||||
edit: {
|
||||
url: `auth/role/edit`,
|
||||
name: "编辑角色",
|
||||
post: async function (params) {
|
||||
return await request.put(this.url, params);
|
||||
},
|
||||
},
|
||||
auth: {
|
||||
url: `auth/role/auth`,
|
||||
name: "角色授权",
|
||||
post: async function (params) {
|
||||
return await request.put(this.url, params);
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
url: `auth/role/delete`,
|
||||
name: "删除角色",
|
||||
post: async function (params) {
|
||||
return await request.delete(this.url, params);
|
||||
},
|
||||
},
|
||||
},
|
||||
department: {
|
||||
list: {
|
||||
url: `auth/department/index`,
|
||||
name: "获得部门列表",
|
||||
get: async function (params) {
|
||||
return await request.get(this.url, { params });
|
||||
},
|
||||
},
|
||||
add: {
|
||||
url: `auth/department/add`,
|
||||
name: "添加部门",
|
||||
post: async function (params) {
|
||||
return await request.post(this.url, params);
|
||||
},
|
||||
},
|
||||
edit: {
|
||||
url: `auth/department/edit`,
|
||||
name: "编辑部门",
|
||||
post: async function (params) {
|
||||
return await request.put(this.url, params);
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
url: `auth/department/delete`,
|
||||
name: "删除部门",
|
||||
post: async function (params) {
|
||||
return await request.delete(this.url, params);
|
||||
},
|
||||
},
|
||||
},
|
||||
menu: {
|
||||
my: {
|
||||
url: `auth/menu/my`,
|
||||
@@ -30,5 +141,33 @@ export default {
|
||||
return await request.get(this.url)
|
||||
},
|
||||
},
|
||||
list: {
|
||||
url: `auth/menu/index`,
|
||||
name: "获取菜单",
|
||||
get: async function (params) {
|
||||
return await request.get(this.url, { params });
|
||||
},
|
||||
},
|
||||
add: {
|
||||
url: `auth/menu/add`,
|
||||
name: "添加菜单",
|
||||
post: async function (params) {
|
||||
return await request.post(this.url, params);
|
||||
},
|
||||
},
|
||||
edit: {
|
||||
url: `auth/menu/edit`,
|
||||
name: "编辑菜单",
|
||||
post: async function (params) {
|
||||
return await request.put(this.url, params);
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
url: `auth/menu/delete`,
|
||||
name: "删除菜单",
|
||||
post: async function (params) {
|
||||
return await request.delete(this.url, params);
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -9,19 +9,72 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
// ==================== 全局滚动条样式优化 ====================
|
||||
// Webkit 滚动条基础样式
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
// 滚动条轨道
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 8px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
// 滚动条滑块 - 渐变色设计
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, #d9d9d9 0%, #bfbfbf 100%);
|
||||
border-radius: 8px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: content-box;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(180deg, #c0c0c0 0%, #a6a6a6 100%);
|
||||
border-radius: 8px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: content-box;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: linear-gradient(180deg, #a6a6a6 0%, #8c8c8c 100%);
|
||||
border-radius: 8px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动条两端按钮
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 滚动条角落
|
||||
::-webkit-scrollbar-corner {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
// Firefox 滚动条样式
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #d4d4d4 rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.pages{
|
||||
.pages {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
.search-box{
|
||||
.search-box {
|
||||
padding: 10px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 10px;
|
||||
|
||||
@@ -1,10 +1,45 @@
|
||||
<template>
|
||||
<div class="sc-table">
|
||||
<!-- 表格内容 -->
|
||||
<div class="sc-table-content" ref="tableContent">
|
||||
<a-table :columns="tableColumns" :data-source="dataSource" :loading="loading" :pagination="false"
|
||||
:row-key="rowKey" :row-selection="rowSelection" :scroll="scroll" :bordered="tableSettings.bordered"
|
||||
:size="tableSettings.size" :show-header="showHeader" :locale="locale" @change="handleTableChange"
|
||||
@resizeColumn="handleResizeColumn">
|
||||
<!-- 自定义单元格内容 -->
|
||||
<template #bodyCell="{ text, record, index, column }">
|
||||
<!-- 序号列 -->
|
||||
<template v-if="column.dataIndex === '_index'">
|
||||
{{ getTableIndex(index) }}
|
||||
</template>
|
||||
<!-- 自定义插槽 -->
|
||||
<template v-else-if="column.slot">
|
||||
<slot :name="column.slot || column.dataIndex" :text="text" :record="record" :index="index"
|
||||
:column="column"></slot>
|
||||
</template>
|
||||
<!-- 操作列 -->
|
||||
<template v-else-if="column.dataIndex === '_action'">
|
||||
<a-space>
|
||||
<a-button v-for="(action, idx) in actions" :key="idx" type="link" size="small"
|
||||
:disabled="action.disabled" @click="handleAction(action, record, index)">
|
||||
{{ action.label }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<template #emptyText>
|
||||
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="emptyText" />
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 工具栏 -->
|
||||
<div v-if="showToolbar" class="sc-table-tool">
|
||||
<div class="tool-left">
|
||||
<!-- 左侧工具栏插槽 -->
|
||||
<slot name="toolLeft"></slot>
|
||||
<a-pagination v-bind="pagination">
|
||||
</a-pagination>
|
||||
</div>
|
||||
<div class="tool-right">
|
||||
<!-- 右侧工具栏插槽 -->
|
||||
@@ -20,7 +55,7 @@
|
||||
|
||||
<!-- 表格设置按钮 -->
|
||||
<a-tooltip v-if="showColumnSetting" title="表格设置">
|
||||
<a-popover v-model:open="tableSettingVisible" placement="bottomRight" trigger="click" :width="240">
|
||||
<a-popover v-model:open="tableSettingVisible" placement="topRight" trigger="click" :width="240">
|
||||
<template #content>
|
||||
<div class="table-setting">
|
||||
<div class="table-setting-header">
|
||||
@@ -55,7 +90,7 @@
|
||||
|
||||
<!-- 列设置按钮 -->
|
||||
<a-tooltip v-if="showColumnSetting" title="列设置">
|
||||
<a-popover v-model:open="columnSettingVisible" placement="bottomRight" trigger="click">
|
||||
<a-popover v-model:open="columnSettingVisible" placement="topRight" trigger="click">
|
||||
<template #content>
|
||||
<div class="column-setting">
|
||||
<div class="column-setting-header">
|
||||
@@ -85,52 +120,12 @@
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格内容 -->
|
||||
<div class="sc-table-content" ref="tableContent">
|
||||
<a-table :columns="tableColumns" :data-source="dataSource" :loading="loading" :pagination="pagination"
|
||||
:row-key="rowKey" :row-selection="rowSelection" :scroll="scroll" :bordered="tableSettings.bordered"
|
||||
:size="tableSettings.size" :show-header="showHeader" :locale="locale" @change="handleTableChange"
|
||||
@resizeColumn="handleResizeColumn">
|
||||
<!-- 自定义单元格内容 -->
|
||||
<template #bodyCell="{ text, record, index, column }">
|
||||
<!-- 序号列 -->
|
||||
<template v-if="column.dataIndex === '_index'">
|
||||
{{ getTableIndex(index) }}
|
||||
</template>
|
||||
<!-- 自定义插槽 -->
|
||||
<template v-else-if="column.slot">
|
||||
<slot :name="column.slot || column.dataIndex" :text="text" :record="record" :index="index"
|
||||
:column="column"></slot>
|
||||
</template>
|
||||
<!-- 操作列 -->
|
||||
<template v-else-if="column.dataIndex === '_action'">
|
||||
<a-space>
|
||||
<a-button v-for="(action, idx) in actions" :key="idx" type="link" size="small"
|
||||
:disabled="action.disabled" @click="handleAction(action, record, index)">
|
||||
{{ action.label }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<template #emptyText>
|
||||
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="emptyText">
|
||||
<slot name="empty">
|
||||
<span>{{ emptyText }}</span>
|
||||
</slot>
|
||||
</a-empty>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, reactive, useTemplateRef, onMounted } from 'vue'
|
||||
import { Empty } from 'ant-design-vue'
|
||||
import { SyncOutlined, HolderOutlined, TableOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'scTable',
|
||||
@@ -265,11 +260,7 @@ onMounted(() => {
|
||||
|
||||
const updateTableHeight = () => {
|
||||
let tableHeight = 0
|
||||
if (props.pagination !== false) {
|
||||
tableHeight = tableContent.value.clientHeight - 105
|
||||
} else {
|
||||
tableHeight = tableContent.value.clientHeight - 65
|
||||
}
|
||||
tableHeight = tableContent.value.clientHeight - 56
|
||||
scroll.value.y = tableHeight
|
||||
}
|
||||
|
||||
@@ -494,7 +485,7 @@ defineExpose({
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 0 10px;
|
||||
|
||||
.tool-left,
|
||||
.tool-right {
|
||||
|
||||
@@ -339,7 +339,6 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.app-main {
|
||||
padding: 16px;
|
||||
background-color: #f0f2f5;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
|
||||
@@ -1,218 +1,406 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-aside width="200px" v-loading="showGrouploading">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-tree ref="group" class="menu" node-key="id" :data="group" :props="{label: 'title'}" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
|
||||
<el-button type="primary" plain :disabled="selection.length!=1" @click="roleSet">分配角色</el-button>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="right-panel-search">
|
||||
<el-input v-model="search.name" placeholder="登录账号 / 姓名" clearable></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" :column="list.column" @selection-change="selectionChange" stripe remoteSort remoteFilter>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<template #username="scope">
|
||||
<div style="display: flex; flex-direction: row; align-items: center; gap: 8px;">
|
||||
<el-avatar :src="scope.row.avatar" shape="square" :size="50"></el-avatar>
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ scope.row.username }}</span>
|
||||
<span>{{ scope.row.nickname }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pages user-page">
|
||||
<div class="left-box">
|
||||
<div class="header">
|
||||
部门分类
|
||||
</div>
|
||||
<div class="body">
|
||||
<a-tree v-model:selectedKeys="selectedDeptKeys" :tree-data="departmentTree"
|
||||
:field-names="{ title: 'title', key: 'id', children: 'children' }" show-icon @select="onDeptSelect">
|
||||
<template #icon="{ dataRef }">
|
||||
<folder-outlined v-if="dataRef.children" />
|
||||
<file-outlined v-else />
|
||||
</template>
|
||||
<template #roleName="scope">
|
||||
<el-tag v-for="item in scope.row?.roles" :key="item.id">{{item.title}}</el-tag>
|
||||
</a-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="search-bar">
|
||||
<a-form layout="inline" :model="searchForm">
|
||||
<a-form-item label="用户名">
|
||||
<a-input v-model:value="searchForm.username" placeholder="请输入用户名" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item label="姓名">
|
||||
<a-input v-model:value="searchForm.nickname" placeholder="请输入姓名" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><search-outlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><redo-outlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<scTable ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading"
|
||||
:pagination="pagination" :row-key="rowKey" @change="handleTableChange" @refresh="loadData">
|
||||
<template #toolLeft>
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><plus-outlined /></template>
|
||||
新增用户
|
||||
</a-button>
|
||||
</template>
|
||||
<template #department_name="scope">
|
||||
{{scope.row.department?.title}}
|
||||
<template #avatar="{ record }">
|
||||
<a-avatar :src="record.avatar" :size="32">
|
||||
<template #icon><user-outlined /></template>
|
||||
</a-avatar>
|
||||
</template>
|
||||
<template #operation="scope">
|
||||
<el-button-group>
|
||||
<el-button type="success" @click="table_show(scope.row, scope.$index)">查看</el-button>
|
||||
<el-button type="primary" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
|
||||
<template #reference>
|
||||
<el-button type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</el-button-group>
|
||||
<template #status="{ record }">
|
||||
<a-tag :color="record.status === 1 ? 'success' : 'error'">
|
||||
{{ record.status === 1 ? '正常' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #roles="{ record }">
|
||||
<a-tag v-for="role in record.roles" :key="role.id" color="blue">
|
||||
{{ role.title }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template #_action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleView(record)">查看</a-button>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-button type="link" size="small" @click="handleRole(record)">角色</a-button>
|
||||
<a-popconfirm title="确定删除该用户吗？" @confirm="handleDelete(record)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
|
||||
<role-dialog v-if="dialog.role" ref="roleDialog" @success="handleSuccess" @closed="dialog.role=false"></role-dialog>
|
||||
<!-- 新增/编辑用户弹窗 -->
|
||||
<save-dialog v-if="dialog.save" ref="saveDialogRef" @success="handleSaveSuccess" @closed="dialog.save = false" />
|
||||
|
||||
<!-- 角色设置弹窗 -->
|
||||
<role-dialog v-if="dialog.role" ref="roleDialogRef" @success="handleRoleSuccess" @closed="dialog.role = false" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import saveDialog from './save'
|
||||
import roleDialog from './role'
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
FolderOutlined,
|
||||
FileOutlined,
|
||||
SearchOutlined,
|
||||
RedoOutlined,
|
||||
PlusOutlined,
|
||||
UserOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import saveDialog from './save.vue'
|
||||
import roleDialog from './role.vue'
|
||||
import authApi from '@/api/auth'
|
||||
|
||||
export default {
|
||||
name: 'auth.user',
|
||||
components: {
|
||||
saveDialog,
|
||||
roleDialog
|
||||
defineOptions({
|
||||
name: 'authUser'
|
||||
})
|
||||
|
||||
// 表格引用
|
||||
const tableRef = ref(null)
|
||||
|
||||
// 对话框状态
|
||||
const dialog = reactive({
|
||||
save: false,
|
||||
role: false
|
||||
})
|
||||
|
||||
// 弹窗引用
|
||||
const saveDialogRef = ref(null)
|
||||
const roleDialogRef = ref(null)
|
||||
|
||||
// 部门树数据
|
||||
const departmentTree = ref([])
|
||||
const selectedDeptKeys = ref([])
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
username: '',
|
||||
nickname: '',
|
||||
department_id: null
|
||||
})
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
// 分页配置
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
pageSizeOptions: ['20', '50', '100', '200']
|
||||
})
|
||||
|
||||
// 行key
|
||||
const rowKey = 'id'
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: '头像',
|
||||
dataIndex: 'avatar',
|
||||
key: 'avatar',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
slot: 'avatar'
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: {
|
||||
save: false
|
||||
},
|
||||
showGrouploading: false,
|
||||
groupFilterText: '',
|
||||
group: [],
|
||||
list: {
|
||||
apiObj: this.$API.auth.users.list,
|
||||
column: [
|
||||
{prop: 'uid', label: 'UID', width: '80'},
|
||||
{prop: 'username', label: '登录账号', width: '220'},
|
||||
{prop: 'mobile', label: '手机号码', width: '120'},
|
||||
{prop: 'email', label: '邮箱', width: '160'},
|
||||
{prop: 'department_name', label: '所属部门', width: '120'},
|
||||
{prop: 'roleName', label: '所属角色', width:'120'},
|
||||
{prop: 'created_at', label: '加入时间', width:'180'},
|
||||
{prop: 'last_login_at', label: '上次登录时间', width:'180'},
|
||||
{prop: 'operation', label: '操作', width:'160', fixed: 'right'}
|
||||
]
|
||||
},
|
||||
selection: [],
|
||||
search: {
|
||||
name: null
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'nickname',
|
||||
key: 'nickname',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '部门',
|
||||
dataIndex: 'department_title',
|
||||
key: 'department_title',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '角色',
|
||||
dataIndex: 'roles',
|
||||
key: 'roles',
|
||||
width: 200,
|
||||
slot: 'roles'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
slot: 'status'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'created_at',
|
||||
key: 'created_at',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: '_action',
|
||||
key: '_action',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
slot: '_action',
|
||||
fixed: 'right'
|
||||
}
|
||||
]
|
||||
|
||||
// 加载部门树
|
||||
const loadDepartmentTree = async () => {
|
||||
try {
|
||||
const res = await authApi.department.list.get({ is_tree: 1 })
|
||||
if (res.code === 1) {
|
||||
departmentTree.value = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载部门树失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载用户列表数据
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
page: pagination.current,
|
||||
limit: pagination.pageSize,
|
||||
...searchForm
|
||||
}
|
||||
const res = await authApi.users.list.get(params)
|
||||
if (res.code === 1) {
|
||||
tableData.value = res.data?.data || []
|
||||
pagination.total = res.data?.total || 0
|
||||
} else {
|
||||
message.error(res.message || '加载数据失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载用户列表失败:', error)
|
||||
message.error('加载数据失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 部门选择事件
|
||||
const onDeptSelect = (selectedKeys) => {
|
||||
if (selectedKeys.length > 0) {
|
||||
searchForm.department_id = selectedKeys[0]
|
||||
} else {
|
||||
searchForm.department_id = null
|
||||
}
|
||||
pagination.current = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
pagination.current = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
searchForm.username = ''
|
||||
searchForm.nickname = ''
|
||||
searchForm.department_id = null
|
||||
selectedDeptKeys.value = []
|
||||
pagination.current = 1
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 表格变化事件
|
||||
const handleTableChange = (pag) => {
|
||||
pagination.current = pag.current
|
||||
pagination.pageSize = pag.pageSize
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 新增用户
|
||||
const handleAdd = () => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('add')
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 查看用户
|
||||
const handleView = (record) => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('show').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 编辑用户
|
||||
const handleEdit = (record) => {
|
||||
dialog.save = true
|
||||
setTimeout(() => {
|
||||
saveDialogRef.value?.open('edit').setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 设置角色
|
||||
const handleRole = (record) => {
|
||||
dialog.role = true
|
||||
setTimeout(() => {
|
||||
roleDialogRef.value?.open().setData(record)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 删除用户
|
||||
const handleDelete = async (record) => {
|
||||
try {
|
||||
const res = await window.$API.auth.users.delete.post({ id: record.id })
|
||||
if (res.code === 1) {
|
||||
message.success('删除成功')
|
||||
loadData()
|
||||
} else {
|
||||
message.error(res.message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除用户失败:', error)
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 保存成功回调
|
||||
const handleSaveSuccess = (data, mode) => {
|
||||
if (mode === 'add') {
|
||||
loadData()
|
||||
} else if (mode === 'edit') {
|
||||
loadData()
|
||||
}
|
||||
}
|
||||
|
||||
// 角色设置成功回调
|
||||
const handleRoleSuccess = () => {
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadDepartmentTree()
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user-page {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
.left-box {
|
||||
width: 260px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
.header {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0 16px;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.search-bar {
|
||||
height: 50px;
|
||||
padding: 12px 16px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-form) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
groupFilterText(val) {
|
||||
this.$refs.group.filter(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getGroup()
|
||||
},
|
||||
methods: {
|
||||
//添加
|
||||
add(){
|
||||
this.dialog.save = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveDialog.open()
|
||||
})
|
||||
},
|
||||
//编辑
|
||||
table_edit(row){
|
||||
this.dialog.save = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveDialog.open('edit').setData(row)
|
||||
})
|
||||
},
|
||||
//查看
|
||||
table_show(row){
|
||||
this.dialog.save = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveDialog.open('show').setData(row)
|
||||
})
|
||||
},
|
||||
//删除
|
||||
async table_del(row, index){
|
||||
var reqData = {id: row.uid}
|
||||
var res = await this.$API.auth.users.delete.post(reqData);
|
||||
if(res.code == 1){
|
||||
this.$refs.table.refresh()
|
||||
this.$message.success("删除成功")
|
||||
}else{
|
||||
this.$message.error(res.message)
|
||||
}
|
||||
},
|
||||
//批量删除
|
||||
async batch_del(){
|
||||
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
var ids = this.selection.map(item => item.uid)
|
||||
var reqData = {ids: ids}
|
||||
var res = await this.$API.auth.users.delete.post(reqData);
|
||||
if(res.code == 1){
|
||||
this.$refs.table.refresh()
|
||||
this.$message.success("删除成功")
|
||||
}else{
|
||||
this.$message.error(res.message)
|
||||
}
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
},
|
||||
//权限设置
|
||||
roleSet(){
|
||||
if(this.selection.length != 1){
|
||||
this.$message.error("请选择一条数据")
|
||||
return false;
|
||||
}
|
||||
this.dialog.role = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.roleDialog.open().setData(this.selection[0])
|
||||
})
|
||||
},
|
||||
insertData(){
|
||||
this.dialog.insert = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.insertDialog.open()
|
||||
})
|
||||
},
|
||||
//表格选择后回调事件
|
||||
selectionChange(selection){
|
||||
this.selection = selection;
|
||||
},
|
||||
//加载树数据
|
||||
async getGroup(){
|
||||
this.showGrouploading = true;
|
||||
var res = await this.$API.auth.department.list.get({is_tree: 1});
|
||||
this.showGrouploading = false;
|
||||
var allNode ={id: '', title: '所有'}
|
||||
res.data.unshift(allNode);
|
||||
this.group = res.data;
|
||||
},
|
||||
//树过滤
|
||||
groupFilterNode(value, data){
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
//树点击事件
|
||||
groupClick(data){
|
||||
var params = {
|
||||
department_id: data.id
|
||||
}
|
||||
this.$refs.table.reload(params)
|
||||
},
|
||||
//搜索
|
||||
upsearch(){
|
||||
this.$refs.table.upData(this.search)
|
||||
},
|
||||
//本地更新数据
|
||||
handleSuccess(){
|
||||
this.$refs.table.refresh()
|
||||
.table-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
@@ -1,128 +1,9 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="right-panel-search">
|
||||
<el-input v-model="search.title" placeholder="名称" clearable></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" :column="list.column" row-key="id" @selection-change="selectionChange" :params="search">
|
||||
<el-table-column type="selection" />
|
||||
<template #operation="scope">
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="edit(scope.row, scope.$index)">编辑</el-button>
|
||||
<el-button type="primary" @click="table_show(scope.row, scope.$index)">查看</el-button>
|
||||
<el-button type="primary" @click="client_menu(scope.row, scope.$index)">菜单</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="table_delete(scope.row, scope.$index)">
|
||||
<template #reference>
|
||||
<el-button type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<save ref="saveBox" v-if="dialog.save" @success="upsearch" @closed="dialog.save=false" />
|
||||
<menus ref="menuBox" v-if="dialog.menu" @closed="dialog.menu=false" />
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import save from './save.vue'
|
||||
import menus from './menu.vue'
|
||||
|
||||
export default {
|
||||
name: 'system.client',
|
||||
components: { save, menus },
|
||||
data(){
|
||||
return {
|
||||
dialog: {search: false, menu: false, save: false},
|
||||
list: {
|
||||
apiObj: this.$API.system.client.list,
|
||||
column: [
|
||||
{prop: 'id', label: 'ID', width: 80},
|
||||
{prop: 'title', label: '名称'},
|
||||
{prop: 'app_id', label: '客户端ID', width: 180},
|
||||
{prop: 'secret', label: '客户端secret', width: 260},
|
||||
{prop: 'created_at', label: '添加时间', width: 160},
|
||||
{prop: 'updated_at', label: '更新时间', width: 160},
|
||||
{prop: 'operation', label: '操作', width: 220, fixed: 'right'}
|
||||
],
|
||||
},
|
||||
searchFields: [
|
||||
{title: '标题', key: 'title', type: 'string'},
|
||||
],
|
||||
actions: {
|
||||
add: {title: '', icon: 'a-icon-plus-outlined', type: 'primary'},
|
||||
},
|
||||
selection: [],
|
||||
search: {},
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
},
|
||||
methods:{
|
||||
upsearch(){
|
||||
this.$refs.table.reload(this.search);
|
||||
},
|
||||
moreUpsearch(search){
|
||||
this.search = search;
|
||||
this.upsearch();
|
||||
},
|
||||
moreSearch(){
|
||||
this.dialog.search = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.searchBox.open().setData(this.search)
|
||||
})
|
||||
},
|
||||
//表格选择后回调事件
|
||||
selectionChange(selection){
|
||||
this.selection = selection;
|
||||
console.log(selection)
|
||||
},
|
||||
add(){
|
||||
this.dialog.save = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveBox.open('add').setData({})
|
||||
})
|
||||
},
|
||||
edit(item){
|
||||
this.dialog.save = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveBox.open('edit').setData(item)
|
||||
})
|
||||
},
|
||||
table_show(item){
|
||||
this.dialog.save = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveBox.open('show').setData(item)
|
||||
})
|
||||
},
|
||||
client_menu(item){
|
||||
this.dialog.menu = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.menuBox.open().setData(item)
|
||||
})
|
||||
},
|
||||
async table_delete(item){
|
||||
let res = await this.$API.system.client.delete.post({id: item.id});
|
||||
if(res.code == 1){
|
||||
//这里选择刷新整个表格 OR 插入/编辑现有表格数据
|
||||
this.upsearch()
|
||||
this.$message.success("删除成功")
|
||||
}else{
|
||||
this.$message.error(res.message)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: "systemClient"
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
@@ -1,154 +1,9 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<el-row :gutter="15">
|
||||
<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in list" :key="item.id">
|
||||
<el-card class="task task-item" shadow="hover">
|
||||
<h2>{{item.title}}</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<h4>任务类型</h4>
|
||||
<p>{{crontabType[item.type]}}</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4>执行类</h4>
|
||||
<p>{{item.command}}</p>
|
||||
</li>
|
||||
<li>
|
||||
<h4>定时规则</h4>
|
||||
<p>{{item.expression}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="bottom">
|
||||
<div class="state">
|
||||
<el-tag v-if="item.status==1">运行中</el-tag>
|
||||
<el-tag v-if="item.status==0" type="info">停用</el-tag>
|
||||
</div>
|
||||
<div class="handler">
|
||||
<el-popconfirm :title="item.status==1 ? '确定立即关闭吗？' : '确定立即执行吗？'" @confirm="run(item)">
|
||||
<template #reference>
|
||||
<el-button type="primary" :icon="item.status==1 ? 'el-icon-switch-button' : 'el-icon-caret-right'" circle></el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-dropdown trigger="click">
|
||||
<el-button type="primary" icon="el-icon-more" circle plain></el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="edit(item)">编辑</el-dropdown-item>
|
||||
<el-dropdown-item @click="logs(item)">日志</el-dropdown-item>
|
||||
<el-dropdown-item @click="del(item)" divided>删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24">
|
||||
<el-card class="task task-add" shadow="none" @click="add">
|
||||
<el-icon><el-icon-plus /></el-icon>
|
||||
<p>添加计划任务</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
|
||||
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
|
||||
<logs v-if="dialog.logs" ref="logsDialog" @closed="dialog.logs=false"></logs>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import saveDialog from './save'
|
||||
import logs from './logs'
|
||||
|
||||
export default {
|
||||
name: 'system.crontab',
|
||||
components: {
|
||||
saveDialog,
|
||||
logs
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
list: this.list
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: {
|
||||
save: false,
|
||||
logs: false
|
||||
},
|
||||
crontabType: {1: '执行命令', 2: '执行类class', 3: '执行地址', 4: '执行shell'},
|
||||
list: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getCrontabList()
|
||||
},
|
||||
methods: {
|
||||
async getCrontabList(){
|
||||
let res = await this.$API.system.crontab.list.get()
|
||||
if(res.code===1){
|
||||
this.list = res.data
|
||||
}
|
||||
},
|
||||
add(){
|
||||
this.dialog.save = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveDialog.open()
|
||||
})
|
||||
},
|
||||
edit(task){
|
||||
this.dialog.save = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveDialog.open('edit').setData(task)
|
||||
})
|
||||
},
|
||||
del(task){
|
||||
this.$confirm(`确认删除 ${task.title} 计划任务吗？`,'提示', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '删除',
|
||||
confirmButtonClass: 'el-button--danger'
|
||||
}).then(async () => {
|
||||
let res = await this.$API.system.crontab.delete.post({id: task.id})
|
||||
if(res.code===1){
|
||||
this.$message.success('操作成功')
|
||||
this.getCrontabList()
|
||||
}
|
||||
}).catch(() => {
|
||||
//取消
|
||||
})
|
||||
},
|
||||
logs(row){
|
||||
this.dialog.logs = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.logsDialog.open().setData(row)
|
||||
})
|
||||
},
|
||||
async run(task){
|
||||
let res = await this.$API.system.crontab.reload.post({id: task.id, status: task.status == 1 ? 0 : 1})
|
||||
if(res.code===1){
|
||||
this.$message.success('已成功执行计划任务')
|
||||
this.getCrontabList()
|
||||
}
|
||||
},
|
||||
//本地更新数据
|
||||
handleSuccess(){
|
||||
this.getCrontabList()
|
||||
}
|
||||
}
|
||||
}
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: "systemCrontab"
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.task {height: 240px;}
|
||||
.task-item h2 {font-size: 15px;color: #3c4a54;padding-bottom:15px;}
|
||||
.task-item li {list-style-type:none;margin-bottom: 10px;}
|
||||
.task-item li h4 {font-size: 12px;font-weight: normal;color: #999;}
|
||||
.task-item li p {margin-top: 5px;}
|
||||
.task-item .bottom {border-top: 1px solid #EBEEF5;text-align: right;padding-top:10px;display: flex;justify-content: space-between;align-items: center;}
|
||||
|
||||
.task-add {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;cursor: pointer;color: #999;}
|
||||
.task-add:hover {color: #409EFF;}
|
||||
.task-add i {font-size: 30px;}
|
||||
.task-add p {font-size: 12px;margin-top: 20px;}
|
||||
</style>
|
||||
|
||||
@@ -1,107 +1,9 @@
|
||||
<template>
|
||||
<el-dialog :title="titleMap[mode]" v-model="visible" :width="330" destroy-on-close @closed="$emit('closed')">
|
||||
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
|
||||
<el-form-item label="编码" prop="name">
|
||||
<el-input v-model="form.name" clearable placeholder="字典编码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典名称" prop="title">
|
||||
<el-input v-model="form.title" clearable placeholder="字典显示名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="父路径" prop="parent_id">
|
||||
<el-cascader v-model="form.parent_id" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible=false" >取 消</el-button>
|
||||
<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
emits: ['success', 'closed'],
|
||||
data() {
|
||||
return {
|
||||
mode: "add",
|
||||
titleMap: {
|
||||
add: '新增字典分类',
|
||||
edit: '编辑字典分类'
|
||||
},
|
||||
visible: false,
|
||||
isSaveing: false,
|
||||
form: {
|
||||
id:"",
|
||||
title: "",
|
||||
name: "",
|
||||
parent_id: ""
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入编码'}
|
||||
],
|
||||
title: [
|
||||
{required: true, message: '请输入字典名称'}
|
||||
]
|
||||
},
|
||||
dic: [],
|
||||
dicProps: {
|
||||
value: "id",
|
||||
label: "name",
|
||||
emitPath: false,
|
||||
checkStrictly: true
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDic()
|
||||
},
|
||||
methods: {
|
||||
//显示
|
||||
open(mode='add'){
|
||||
this.mode = mode;
|
||||
this.visible = true;
|
||||
return this;
|
||||
},
|
||||
//获取字典列表
|
||||
async getDic(){
|
||||
var res = await this.$API.system.dictionary.category.get({is_tree: 1});
|
||||
this.dic = res.data;
|
||||
},
|
||||
//表单提交方法
|
||||
submit(){
|
||||
this.$refs.dialogForm.validate(async (valid) => {
|
||||
if (valid) {
|
||||
this.isSaveing = true;
|
||||
var res = {};
|
||||
this.form.parent_id = this.form.parent_id ? this.form.parent_id : 0;
|
||||
if(this.mode == 'add'){
|
||||
res = await this.$API.system.dictionary.addcate.post(this.form);
|
||||
}else{
|
||||
res = await this.$API.system.dictionary.editcate.post(this.form);
|
||||
}
|
||||
|
||||
this.isSaveing = false;
|
||||
if(res.code == 1){
|
||||
this.$emit('success', this.form, this.mode)
|
||||
this.visible = false;
|
||||
this.$message.success("操作成功")
|
||||
}else{
|
||||
this.$alert(res.message, "提示", {type: 'error'})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
//表单注入数据
|
||||
setData(data){
|
||||
this.form.id = data.id
|
||||
this.form.title = data.title
|
||||
this.form.name = data.name
|
||||
this.form.parent_id = data.parent_id
|
||||
}
|
||||
}
|
||||
}
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: "systemDic"
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
@@ -1,321 +1,9 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-aside width="300px" v-loading="showDicloading">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-input placeholder="输入关键字进行过滤" v-model="dicFilterText" clearable></el-input>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-tree ref="dic" class="menu" node-key="id" :data="dicList" :props="dicProps" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="dicFilterNode" @node-click="dicClick">
|
||||
<template #default="{node, data}">
|
||||
<span class="custom-tree-node">
|
||||
<span class="label">{{ node.label }}</span>
|
||||
<span class="code">{{ data.name }}</span>
|
||||
<span class="do">
|
||||
<el-icon :size="26" @click.stop="dicEdit(data)"><el-icon-edit /></el-icon>
|
||||
<el-icon :size="26" @click.stop="dicDel(node, data)"><el-icon-delete /></el-icon>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-main>
|
||||
<el-footer style="height:51px;">
|
||||
<el-button type="primary" icon="el-icon-plus" style="width: 100%;" @click="addDic">字典分类</el-button>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<el-container class="is-vertical">
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="addInfo"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="listApi" row-key="id" :params="listApiParams" @selection-change="selectionChange" stripe :paginationLayout="'prev, pager, next'">
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="" width="60">
|
||||
<template #default>
|
||||
<el-tag class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="名称" prop="title"></el-table-column>
|
||||
<el-table-column label="键值" prop="values" width="150"></el-table-column>
|
||||
<el-table-column label="是否有效" prop="status" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status==1">是</el-tag>
|
||||
<el-tag type="info" v-if="scope.row.status==0">否</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" prop="sort" width="150"></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" align="right" width="140">
|
||||
<template #default="scope">
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
|
||||
<template #reference>
|
||||
<el-button type="danger">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<dic-dialog v-if="dialog.dic" ref="dicDialog" @success="handleDicSuccess" @closed="dialog.dic=false"></dic-dialog>
|
||||
|
||||
<list-dialog v-if="dialog.list" ref="listDialog" @success="handleListSuccess" @closed="dialog.list=false"></list-dialog>
|
||||
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dicDialog from './dic'
|
||||
import listDialog from './list'
|
||||
import Sortable from 'sortablejs'
|
||||
|
||||
export default {
|
||||
name: 'system.dic',
|
||||
components: {
|
||||
dicDialog,
|
||||
listDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: {
|
||||
dic: false,
|
||||
info: false
|
||||
},
|
||||
showDicloading: true,
|
||||
dicList: [],
|
||||
dicFilterText: '',
|
||||
dicProps: {
|
||||
label: 'title'
|
||||
},
|
||||
listApi: this.$API.system.dictionary.list,
|
||||
listApiParams: {},
|
||||
selection: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dicFilterText(val) {
|
||||
this.$refs.dic.filter(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getDic()
|
||||
// this.rowDrop()
|
||||
},
|
||||
methods: {
|
||||
//加载树数据
|
||||
async getDic(){
|
||||
var res = await this.$API.system.dictionary.category.get({is_tree: 1});
|
||||
this.showDicloading = false;
|
||||
this.dicList = res.data;
|
||||
//获取第一个节点,设置选中 & 加载明细列表
|
||||
var firstNode = this.dicList[0];
|
||||
if(firstNode){
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dic.setCurrentKey(firstNode.id)
|
||||
})
|
||||
this.listApiParams = {
|
||||
group_id: firstNode.id
|
||||
}
|
||||
this.$refs.table.reload(this.listApiParams);
|
||||
}
|
||||
},
|
||||
//树过滤
|
||||
dicFilterNode(value, data){
|
||||
if (!value) return true;
|
||||
var targetText = data.title + data.name;
|
||||
return targetText.indexOf(value) !== -1;
|
||||
},
|
||||
//树增加
|
||||
addDic(){
|
||||
this.dialog.dic = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dicDialog.open()
|
||||
})
|
||||
},
|
||||
//编辑树
|
||||
dicEdit(data){
|
||||
this.dialog.dic = true
|
||||
this.$nextTick(() => {
|
||||
var editNode = this.$refs.dic.getNode(data.id);
|
||||
var editNodeParentId = editNode.level==1?undefined:editNode.parent.data.id
|
||||
data.parent_id = editNodeParentId
|
||||
this.$refs.dicDialog.open('edit').setData(data)
|
||||
})
|
||||
},
|
||||
//树点击事件
|
||||
dicClick(data){
|
||||
this.$refs.table.reload({
|
||||
group_id: data.id
|
||||
})
|
||||
},
|
||||
//删除树
|
||||
dicDel(node, data){
|
||||
this.$confirm(`确定删除 ${data.name} 项吗？`, '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.showDicloading = true;
|
||||
|
||||
this.$API.system.dictionary.delCate.post({id: data.id});
|
||||
//删除节点是否为高亮当前 是的话 设置第一个节点高亮
|
||||
var dicCurrentKey = this.$refs.dic.getCurrentKey();
|
||||
this.$refs.dic.remove(data.id)
|
||||
if(dicCurrentKey == data.id){
|
||||
var firstNode = this.dicList[0];
|
||||
if(firstNode){
|
||||
this.$refs.dic.setCurrentKey(firstNode.id);
|
||||
this.$refs.table.upData({
|
||||
code: firstNode.code
|
||||
})
|
||||
}else{
|
||||
this.listApi = null;
|
||||
this.$refs.table.tableData = []
|
||||
}
|
||||
}
|
||||
|
||||
this.showDicloading = false;
|
||||
this.$message.success("操作成功")
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
},
|
||||
//行拖拽
|
||||
rowDrop(){
|
||||
const _this = this
|
||||
const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
|
||||
Sortable.create(tbody, {
|
||||
handle: ".move",
|
||||
animation: 300,
|
||||
ghostClass: "ghost",
|
||||
onEnd({ newIndex, oldIndex }) {
|
||||
const tableData = _this.$refs.table.tableData
|
||||
const currRow = tableData.splice(oldIndex, 1)[0]
|
||||
tableData.splice(newIndex, 0, currRow)
|
||||
_this.$message.success("排序成功")
|
||||
}
|
||||
})
|
||||
},
|
||||
//添加明细
|
||||
addInfo(){
|
||||
this.dialog.list = true
|
||||
this.$nextTick(() => {
|
||||
var node = this.$refs.dic.getCurrentNode();
|
||||
const data = {
|
||||
dic_type: node.code
|
||||
}
|
||||
this.$refs.listDialog.open().setData(data)
|
||||
})
|
||||
},
|
||||
//编辑明细
|
||||
table_edit(row){
|
||||
this.dialog.list = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.listDialog.open('edit').setData(row)
|
||||
})
|
||||
},
|
||||
//删除明细
|
||||
async table_del(row, index){
|
||||
var reqData = {id: row.id}
|
||||
var res = await this.$API.system.dictionary.delete.post(reqData);
|
||||
if(res.code == 1){
|
||||
this.$refs.table.tableData.splice(index, 1);
|
||||
this.$message.success("删除成功")
|
||||
}else{
|
||||
this.$alert(res.message, "提示", {type: 'error'})
|
||||
}
|
||||
},
|
||||
//批量删除
|
||||
async batch_del(){
|
||||
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const loading = this.$loading();
|
||||
this.selection.forEach(item => {
|
||||
this.$refs.table.tableData.forEach((itemI, indexI) => {
|
||||
if (item.id === itemI.id) {
|
||||
this.$refs.table.tableData.splice(indexI, 1)
|
||||
}
|
||||
})
|
||||
})
|
||||
loading.close();
|
||||
this.$message.success("操作成功")
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
},
|
||||
//提交明细
|
||||
saveList(){
|
||||
this.$refs.listDialog.submit(async (formData) => {
|
||||
this.isListSaveing = true;
|
||||
var res = await this.$API.system.dictionary.post.post(formData);
|
||||
this.isListSaveing = false;
|
||||
if(res.code == 1){
|
||||
//这里选择刷新整个表格 OR 插入/编辑现有表格数据
|
||||
this.listDialogVisible = false;
|
||||
this.$message.success("操作成功")
|
||||
}else{
|
||||
this.$alert(res.message, "提示", {type: 'error'})
|
||||
}
|
||||
})
|
||||
},
|
||||
//表格选择后回调事件
|
||||
selectionChange(selection){
|
||||
this.selection = selection;
|
||||
},
|
||||
//表格内开关事件
|
||||
changeSwitch(val, row){
|
||||
this.$API.system.dictionary.edit.post({id: row.id, status: val});
|
||||
},
|
||||
//本地更新数据
|
||||
handleDicSuccess(data, mode){
|
||||
if(mode=='add'){
|
||||
if(this.dicList.length > 0){
|
||||
this.$refs.table.upData({
|
||||
code: data.code
|
||||
})
|
||||
}else{
|
||||
this.listApiParams = {
|
||||
code: data.code
|
||||
}
|
||||
this.listApi = this.$API.system.dictionary.list;
|
||||
}
|
||||
this.$refs.dic.append(data, data.parent_id)
|
||||
this.$refs.dic.setCurrentKey(data.id)
|
||||
}else if(mode=='edit'){
|
||||
var editNode = this.$refs.dic.getNode(data.id);
|
||||
|
||||
//判断是否移动？
|
||||
var editNodeParentId = editNode.level==1 ? undefined : editNode.parent.data.id
|
||||
console.log(editNodeParentId)
|
||||
if(editNodeParentId != data.parent_id){
|
||||
var obj = editNode.data;
|
||||
this.$refs.dic.remove(data.id)
|
||||
this.$refs.dic.append(obj, data.parent_id)
|
||||
}
|
||||
Object.assign(editNode.data, data)
|
||||
this.$refs.table.refresh()
|
||||
}
|
||||
},
|
||||
//本地更新数据
|
||||
handleListSuccess(){
|
||||
this.$refs.table.refresh()
|
||||
}
|
||||
}
|
||||
}
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: "systemDic"
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-tree-node {display: flex;flex: 1;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 24px;height:100%;}
|
||||
.custom-tree-node .code {font-size: 12px;color: #999;}
|
||||
.custom-tree-node .do {display: none;}
|
||||
.custom-tree-node .do i {margin-left:5px;color: #999;padding:5px;}
|
||||
.custom-tree-node .do i:hover {color: #333;}
|
||||
.custom-tree-node:hover .code {display: none;}
|
||||
.custom-tree-node:hover .do {display: inline-block;}
|
||||
</style>
|
||||
|
||||
@@ -1,116 +1,9 @@
|
||||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="right-panel-search">
|
||||
<el-input v-model="search.title" placeholder="名称" clearable></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" :column="list.column" row-key="id" @selection-change="selectionChange" :params="search">
|
||||
<el-table-column type="selection" />
|
||||
<template #status="scope">
|
||||
<el-tag :type="scope.row.status == 1 ? 'success' : 'error'">{{ scope.row.status == 1 ? '启用' : '禁用' }}</el-tag>
|
||||
</template>
|
||||
<template #operation="scope">
|
||||
<el-button type="primary" @click="update(scope.row, scope.$index)">更新</el-button>
|
||||
</template>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'system.client',
|
||||
data(){
|
||||
return {
|
||||
dialog: {search: false, menu: false, save: false},
|
||||
list: {
|
||||
apiObj: this.$API.system.modules.list,
|
||||
column: [
|
||||
{prop: 'id', label: 'ID', width: 80},
|
||||
{prop: 'title', label: '模块名称'},
|
||||
{prop: 'name', label: '模块标识', width: 180},
|
||||
{prop: 'status', label: '状态', width: 260},
|
||||
{prop: 'created_at', label: '添加时间', width: 160},
|
||||
{prop: 'updated_at', label: '更新时间', width: 160},
|
||||
{prop: 'operation', label: '操作', width: 80, fixed: 'right'}
|
||||
],
|
||||
},
|
||||
searchFields: [
|
||||
{title: '标题', key: 'title', type: 'string'},
|
||||
],
|
||||
actions: {
|
||||
add: {title: '', icon: 'a-icon-plus-outlined', type: 'primary'},
|
||||
},
|
||||
selection: [],
|
||||
search: {},
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
},
|
||||
methods:{
|
||||
upsearch(){
|
||||
this.$refs.table.reload(this.search);
|
||||
},
|
||||
moreUpsearch(search){
|
||||
this.search = search;
|
||||
this.upsearch();
|
||||
},
|
||||
moreSearch(){
|
||||
this.dialog.search = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.searchBox.open().setData(this.search)
|
||||
})
|
||||
},
|
||||
//表格选择后回调事件
|
||||
selectionChange(selection){
|
||||
this.selection = selection;
|
||||
console.log(selection)
|
||||
},
|
||||
add(){
|
||||
this.dialog.save = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveBox.open('add').setData({})
|
||||
})
|
||||
},
|
||||
edit(item){
|
||||
this.dialog.save = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveBox.open('edit').setData(item)
|
||||
})
|
||||
},
|
||||
table_show(item){
|
||||
this.dialog.save = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.saveBox.open('show').setData(item)
|
||||
})
|
||||
},
|
||||
client_menu(item){
|
||||
this.dialog.menu = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.menuBox.open().setData(item)
|
||||
})
|
||||
},
|
||||
async update(item){
|
||||
let res = await this.$API.system.modules.update.post({name: item.name});
|
||||
if(res.code == 1){
|
||||
//这里选择刷新整个表格 OR 插入/编辑现有表格数据
|
||||
this.upsearch()
|
||||
this.$message.success("更新成功")
|
||||
}else{
|
||||
this.$message.error(res.message)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: "systemModules"
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user