用户和菜单页面修改
This commit is contained in:
闵炳辉
parent
cf981522b3
commit
c3f5dd6f4f
@ -144,3 +144,13 @@ export function menuTree(params: object = {}) {
|
||||
data: params,
|
||||
})
|
||||
}
|
||||
|
||||
// 修改密码
|
||||
export function userChangePassword(params: object = {}) {
|
||||
return createAxios({
|
||||
url: 'api/auth/changePassword',
|
||||
method: 'POST',
|
||||
data: params,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -1,177 +1,166 @@
|
||||
<template>
|
||||
<div style="width: 98%; margin-left: 25px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" style="padding: 2.2% 1.4%; border-right: 1px solid #eaebed">
|
||||
<el-input v-model="input1" size="large" placeholder="搜索" :suffix-icon="Search" style="width: 100%" />
|
||||
<el-tree
|
||||
style="max-width: 600px; margin-top: 2.2%; font-size: 16px"
|
||||
:data="menuData"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
:load="loadNode"
|
||||
lazy
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="18" style="padding: 2.2% 1.4%">
|
||||
<el-container>
|
||||
<el-header style="display: flex; justify-content: space-between">
|
||||
<div>
|
||||
<el-input v-model="input2" size="large" placeholder="请输入菜单名称 " style="width: 220px; margin-right: 10px" />
|
||||
<el-button type="primary" size="large" :icon="Search" @click="clickQuery">查询</el-button>
|
||||
</div>
|
||||
<el-button type="primary" size="large" :icon="CirclePlusFilled" @click="fromAdd">新增</el-button>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-table :data="tableData" style="width: 100%" :header-cell-style="{ color: '#333333', background: '#EFF0F1' }">
|
||||
<el-table-column prop="menuName" label="菜单名称" width="180" />
|
||||
<el-table-column prop="funParam" label="菜单路径" width="180" />
|
||||
<el-table-column prop="menuOrder" label="菜单排序" width="180" />
|
||||
<el-table-column prop="menuIcon" label="图标" width="180" />
|
||||
<!-- <el-table-column prop="name" label="状态" width="180">
|
||||
<div class="ba-input-item-wrapper">
|
||||
<el-container class="defaultContainer">
|
||||
<el-aside class="defaultAside">
|
||||
<!-- <el-header class="treeHeader"> -->
|
||||
<!-- <el-input v-model="input1" size="large" placeholder="搜索" :suffix-icon="Search" style="width: 100%" /> -->
|
||||
<!-- </el-header> -->
|
||||
<el-main class="treeMain">
|
||||
<el-tree
|
||||
style="max-width: 600px; margin-top: 2.2%; font-size: 16px"
|
||||
:data="menuData"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
:load="loadNode"
|
||||
lazy
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</el-main>
|
||||
</el-aside>
|
||||
<el-container class="defaultMainContainer">
|
||||
<el-header class="defaultHeader">
|
||||
<div class="searchPart">
|
||||
<el-input v-model="input2" class="searchInput"></el-input>
|
||||
<el-button @click="clickQuery" type="primary" :icon="Search" class="defaultBtn">查询</el-button>
|
||||
</div>
|
||||
<el-button type="primary" :icon="Plus" class="defaultBtn" @click="fromAdd">新增</el-button>
|
||||
</el-header>
|
||||
<el-main class="defaultMain">
|
||||
<el-table :data="tableData" class="tablePart">
|
||||
<el-table-column prop="menuName" label="菜单名称" />
|
||||
<el-table-column prop="funParam" label="菜单路径" />
|
||||
<el-table-column prop="menuOrder" label="菜单排序" />
|
||||
<el-table-column prop="menuIcon" label="图标" />
|
||||
<!-- <el-table-column prop="name" label="状态" width="180">
|
||||
<el-switch v-model="switchValue" />
|
||||
</el-table-column> -->
|
||||
<el-table-column label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<span style="color: #0064aa; cursor: pointer" @click="menuEdit(scope)">编辑</span>
|
||||
|
|
||||
<span style="color: #0064aa; cursor: pointer" @click="fromDelete(scope)">删除</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-main>
|
||||
<!-- <el-footer>
|
||||
<div style="display: flex; justify-content: right">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage4"
|
||||
v-model:page-size="pageSize4"
|
||||
:page-sizes="[5, 10, 15, 400]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="400"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</el-footer> -->
|
||||
</el-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 编辑弹框 -->
|
||||
<el-dialog v-model="visible" title="编辑菜单" width="500" :before-close="handleClose">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="fromUpDate"
|
||||
:rules="rules"
|
||||
style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
|
||||
>
|
||||
<!-- <el-form-item label="菜单路径:" prop="funParam">
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<span style="color: #0064aa; cursor: pointer" @click="menuEdit(scope)">编辑</span>
|
||||
|
|
||||
<span style="color: #0064aa; cursor: pointer" @click="fromDelete(scope)">删除</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<!-- 编辑弹框 -->
|
||||
<el-dialog v-model="visible" title="编辑菜单" width="500" :before-close="handleClose">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="fromUpDate"
|
||||
:rules="rules"
|
||||
style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
|
||||
>
|
||||
<!-- <el-form-item label="菜单路径:" prop="funParam">
|
||||
<el-input v-model="fromUpDate.funParam" placeholder="" clearable />
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item label="菜单名称:" prop="menuName">
|
||||
<el-input v-model="fromUpDate.menuName" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称:" prop="menuName">
|
||||
<el-input v-model="fromUpDate.menuName" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label=" 菜单图标:">
|
||||
<BaInput type="icon" v-model="fromUpDate.menuIcon" />
|
||||
</el-form-item>
|
||||
<el-form-item label=" 菜单图标:">
|
||||
<BaInput type="icon" v-model="fromUpDate.menuIcon" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label=" 菜单顺序:">
|
||||
<el-input-number :min="0" v-model="fromUpDate.menuOrder" placeholder="" />
|
||||
</el-form-item>
|
||||
<el-form-item label=" 菜单顺序:">
|
||||
<el-input-number :min="0" v-model="fromUpDate.menuOrder" placeholder="" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label=" 菜单动作:">
|
||||
<el-radio-group v-model="fromUpDate.funType" size="large">
|
||||
<el-radio-button label="原页面" value="1" />
|
||||
<el-radio-button label="新窗口" value="2" />
|
||||
<el-radio-button label="编辑页面" value="3" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label=" 菜单动作:">
|
||||
<el-radio-group v-model="fromUpDate.funType" size="large">
|
||||
<el-radio-button label="原页面" value="1" />
|
||||
<el-radio-button label="新窗口" value="2" />
|
||||
<el-radio-button label="编辑页面" value="3" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label=" 动作参数:">
|
||||
<el-input v-model="fromUpDate.funParam"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label=" 动作参数:">
|
||||
<el-input v-model="fromUpDate.funParam"> </el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label=" 菜单权限:">
|
||||
<el-select v-model="fromUpDate.authorityId" placeholder="选择菜单权限" multiple style="width: 240px">
|
||||
<el-option v-for="item in allPermissionData" :key="item.id" :label="item.authorityName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible = false"> 取消 </el-button>
|
||||
<el-button type="primary" @click="onSubmit">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 新增弹框 -->
|
||||
<el-dialog v-model="visibleAdd" title="新增菜单" width="500" :before-close="handleCloseAdd">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="formInlineAdd"
|
||||
:rules="rules"
|
||||
style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
|
||||
>
|
||||
<!-- <el-form-item label="菜单路径:" prop="funParam">
|
||||
<el-form-item label=" 菜单权限:">
|
||||
<el-select v-model="fromUpDate.authorityId" placeholder="选择菜单权限" multiple style="width: 240px">
|
||||
<el-option v-for="item in allPermissionData" :key="item.id" :label="item.authorityName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible = false"> 取消 </el-button>
|
||||
<el-button type="primary" @click="onSubmit">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 新增弹框 -->
|
||||
<el-dialog v-model="visibleAdd" title="新增菜单" width="500" :before-close="handleCloseAdd">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="formInlineAdd"
|
||||
:rules="rules"
|
||||
style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
|
||||
>
|
||||
<!-- <el-form-item label="菜单路径:" prop="funParam">
|
||||
<el-input v-model="formInlineAdd.funParam" placeholder="" clearable />
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item label="菜单名称:" prop="menuName">
|
||||
<el-input v-model="formInlineAdd.menuName" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称:" prop="menuName">
|
||||
<el-input v-model="formInlineAdd.menuName" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label=" 菜单图标:">
|
||||
<BaInput type="icon" v-model="formInlineAdd.menuIcon" />
|
||||
</el-form-item>
|
||||
<el-form-item label=" 菜单图标:">
|
||||
<BaInput type="icon" v-model="formInlineAdd.menuIcon" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label=" 菜单顺序:">
|
||||
<el-input-number :min="0" v-model="formInlineAdd.menuOrder" placeholder="" />
|
||||
</el-form-item>
|
||||
<el-form-item label=" 菜单顺序:">
|
||||
<el-input-number :min="0" v-model="formInlineAdd.menuOrder" placeholder="" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label=" 菜单动作:">
|
||||
<el-radio-group v-model="formInlineAdd.funType" size="large">
|
||||
<el-radio-button label="原页面" value="1" />
|
||||
<el-radio-button label="新窗口" value="2" />
|
||||
<el-radio-button label="编辑页面" value="3" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label=" 菜单动作:">
|
||||
<el-radio-group v-model="formInlineAdd.funType" size="large">
|
||||
<el-radio-button label="原页面" value="1" />
|
||||
<el-radio-button label="新窗口" value="2" />
|
||||
<el-radio-button label="编辑页面" value="3" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label=" 动作参数:">
|
||||
<el-input v-model="formInlineAdd.funParam"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label=" 动作参数:">
|
||||
<el-input v-model="formInlineAdd.funParam"> </el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label=" 菜单权限:">
|
||||
<el-select v-model="formInlineAdd.authorityId" placeholder="选择菜单权限" multiple style="width: 240px">
|
||||
<el-option v-for="item in allPermissionData" :key="item.id" :label="item.authorityName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visibleAdd = false"> 取消 </el-button>
|
||||
<el-button type="primary" @click="addOnSubmit">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 删除确认弹框 -->
|
||||
<el-dialog v-model="dialogVisibleDelete" title="操作提示" width="500" :before-close="handleCloseDelete">
|
||||
<span>确定是否删除?</span>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisibleDelete = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogVisibleDelete1"> 确定 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-form-item label=" 菜单权限:">
|
||||
<el-select v-model="formInlineAdd.authorityId" placeholder="选择菜单权限" multiple style="width: 240px">
|
||||
<el-option v-for="item in allPermissionData" :key="item.id" :label="item.authorityName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visibleAdd = false"> 取消 </el-button>
|
||||
<el-button type="primary" @click="addOnSubmit">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 删除确认弹框 -->
|
||||
<el-dialog v-model="dialogVisibleDelete" title="操作提示" width="500" :before-close="handleCloseDelete">
|
||||
<span>确定是否删除?</span>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisibleDelete = false">取消</el-button>
|
||||
<el-button type="primary" @click="dialogVisibleDelete1"> 确定 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { Search, CirclePlusFilled, Setting } from '@element-plus/icons-vue'
|
||||
import { Search, CirclePlusFilled, Plus } from '@element-plus/icons-vue'
|
||||
import { useAdminInfo } from '/@/stores/adminInfo'
|
||||
import { menusQuery, menusUpdate, menuDelete, menuAdd, menusTree, allPermissionQuery } from '/@/api/backend'
|
||||
import { ElMessage, ElMessageBox, FormRules } from 'element-plus'
|
||||
@ -184,8 +173,7 @@ console.log(adminInfo, 'adminInfo')
|
||||
// 树查询
|
||||
const menuData = ref()
|
||||
const fromParameter = {
|
||||
parentMenuId: adminInfo.orgid,
|
||||
recursive: true,
|
||||
parentMenuId: '',
|
||||
}
|
||||
interface menusTree {
|
||||
rows?: any[]
|
||||
@ -224,7 +212,6 @@ const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
|
||||
}
|
||||
const fromParameter = {
|
||||
parentMenuId: node.data.id,
|
||||
recursive: false,
|
||||
}
|
||||
menusTree(fromParameter)
|
||||
.then((res: any) => {
|
||||
@ -235,10 +222,9 @@ const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
|
||||
})
|
||||
}
|
||||
// 菜单查询
|
||||
const input1 = ref('')
|
||||
const switchValue = ref(true)
|
||||
interface Tree {
|
||||
authorityId: number
|
||||
authorityId: string
|
||||
funParam: string
|
||||
funType: number
|
||||
id: number
|
||||
@ -255,7 +241,6 @@ const handleNodeClick = (data: Tree) => {
|
||||
fromDataId.value = data.id
|
||||
const queryData = {
|
||||
parentMenuId: data.id,
|
||||
recursive: false,
|
||||
}
|
||||
console.log(queryData, 'queryData')
|
||||
|
||||
@ -408,7 +393,6 @@ const onSubmit = () => {
|
||||
})
|
||||
const queryData2 = {
|
||||
parentMenuId: fromDataId.value,
|
||||
recursive: false,
|
||||
}
|
||||
queryMenuMethod(queryData2)
|
||||
RyMenusTreeQuery(fromParameter)
|
||||
@ -469,7 +453,6 @@ const dialogVisibleDelete1 = (done: () => void) => {
|
||||
}, 1000)
|
||||
const queryData2 = {
|
||||
parentMenuId: fromDataId.value,
|
||||
recursive: false,
|
||||
}
|
||||
queryMenuMethod(queryData2)
|
||||
RyMenusTreeQuery(fromParameter)
|
||||
@ -533,7 +516,6 @@ const addOnSubmit = () => {
|
||||
})
|
||||
const queryData = {
|
||||
parentMenuId: fromDataId.value,
|
||||
recursive: false,
|
||||
}
|
||||
console.log(queryData, 666)
|
||||
|
||||
@ -591,4 +573,80 @@ const handleCurrentChange = (val: number) => {
|
||||
.el-input-group__append {
|
||||
cursor: pointer;
|
||||
}
|
||||
@mixin searchInput($value) {
|
||||
margin-right: $value;
|
||||
width: 220px;
|
||||
height: 40px;
|
||||
}
|
||||
$defaultHeaderHeight: 60px;
|
||||
$defaultMainHeight: calc(100% - 60px);
|
||||
$paginationHeight: 32px;
|
||||
.ba-input-item-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: #fff;
|
||||
.defaultContainer {
|
||||
height: 100%;
|
||||
.defaultAside {
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
border-right: 1px solid #eaebed;
|
||||
.treeHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $defaultHeaderHeight;
|
||||
.searchInput {
|
||||
@include searchInput(0);
|
||||
}
|
||||
}
|
||||
.treeMain {
|
||||
height: $defaultMainHeight;
|
||||
.treePart {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.defaultMainContainer {
|
||||
height: 100%;
|
||||
.defaultHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: $defaultHeaderHeight;
|
||||
.searchPart {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.defaultBtn {
|
||||
width: 88px;
|
||||
height: 40px;
|
||||
}
|
||||
.searchInput {
|
||||
@include searchInput(10px);
|
||||
}
|
||||
}
|
||||
.defaultMain {
|
||||
height: $defaultMainHeight;
|
||||
.tablePart {
|
||||
height: calc(100% - $paginationHeight);
|
||||
}
|
||||
.tableOperate {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
a {
|
||||
margin: 5px;
|
||||
color: #0064aa;
|
||||
font-weight: 600;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,178 +1,218 @@
|
||||
<template>
|
||||
<!-- 用户 -->
|
||||
<div style="margin-left: 25px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6" style="padding: 2.2% 1.4%; border-right: 1px solid #eaebed">
|
||||
<el-input v-model="input1" size="large" placeholder="搜索" :suffix-icon="Search" style="width: 100%" />
|
||||
<el-tree
|
||||
style="max-width: 600px; margin-top: 2.2%"
|
||||
:data="userData"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
:load="loadNode"
|
||||
lazy
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="18" style="padding: 2.2% 1.4%">
|
||||
<el-container>
|
||||
<el-header style="display: flex; justify-content: space-between">
|
||||
<div>
|
||||
<el-input v-model="input2" size="large" placeholder="根据账户中文名查询" style="width: 220px; margin-right: 10px" />
|
||||
<el-button type="primary" size="large" :icon="Search" @click="userFromQuery">查询</el-button>
|
||||
</div>
|
||||
<el-button type="primary" size="large" :icon="CirclePlusFilled" @click="addUserFromData">新增</el-button>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-table
|
||||
ref="multipleTableRef"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{ color: '#333333', background: '#EFF0F1' }"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="180" />
|
||||
<el-table-column property="account" label="账户名称" width="200" />
|
||||
<div class="ba-user-container">
|
||||
<el-container class="defaultContainer">
|
||||
<el-aside class="defaultAside">
|
||||
<!-- <el-header class="treeHeader"> -->
|
||||
<!-- <el-input v-model="input1" size="large" placeholder="搜索" :suffix-icon="Search" style="width: 100%" /> -->
|
||||
<!-- </el-header> -->
|
||||
<el-main class="treeMain">
|
||||
<el-tree
|
||||
style="max-width: 600px; margin-top: 2.2%"
|
||||
:data="userData"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
:load="loadNode"
|
||||
lazy
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</el-main>
|
||||
</el-aside>
|
||||
<el-container class="defaultMainContainer">
|
||||
<el-header class="defaultHeader">
|
||||
<div class="searchPart">
|
||||
<el-input v-model="input2" class="searchInput" placeholder="根据账户中文名查询"></el-input>
|
||||
<el-button @click="userFromQuery" type="primary" :icon="Search" class="defaultBtn">查询</el-button>
|
||||
</div>
|
||||
<el-button size="large" type="primary" :icon="CirclePlusFilled" class="defaultBtn" @click="addUserFromData">新增</el-button>
|
||||
</el-header>
|
||||
<el-main class="defaultMain">
|
||||
<el-table ref="multipleTableRef" :data="tableData" class="tablePart">
|
||||
<el-table-column type="selection" />
|
||||
<el-table-column property="account" label="账户名称" />
|
||||
|
||||
<el-table-column property="userName" label="账户中文名" width="200" />
|
||||
<!-- <el-table-column property="address" label="是否禁用" /> -->
|
||||
<!-- <el-table-column property="updatedTime" label="令牌超时" /> -->
|
||||
<el-table-column property="address" label="操作">
|
||||
<template #default="scope">
|
||||
<span style="color: #0064aa; cursor: pointer" @click="viewUsers(scope)">查看 </span>
|
||||
<span style="color: #0064aa"> | </span>
|
||||
<span style="color: #0064aa; cursor: pointer" @click="userFromDelete(scope)"> 删除 </span>
|
||||
<!-- <span style="color: #0064aa"> | </span>
|
||||
<el-table-column property="userName" label="账户中文名" />
|
||||
<!-- <el-table-column property="address" label="是否禁用" /> -->
|
||||
<!-- <el-table-column property="updatedTime" label="令牌超时" /> -->
|
||||
<el-table-column property="address" label="操作">
|
||||
<template #default="scope">
|
||||
<span style="color: #0064aa; cursor: pointer" @click="viewUsers(scope)">查看 </span>
|
||||
<span style="color: #0064aa"> | </span>
|
||||
<span style="color: #0064aa; cursor: pointer" @click="userFromDelete(scope)"> 删除 </span>
|
||||
<!-- <span style="color: #0064aa"> | </span>
|
||||
<span style="color: #0064aa"> 门户 </span>
|
||||
<span style="color: #0064aa"> | </span>
|
||||
<span style="color: #0064aa"> 密码</span> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-main>
|
||||
<el-footer>
|
||||
<div style="display: flex; justify-content: right">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage4"
|
||||
v-model:page-size="pageSize4"
|
||||
:page-sizes="[10, 15]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="paginationTotal"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 用户新增页面 -->
|
||||
<el-dialog v-model="visibleParam" title="新增账户" width="500" :before-close="handleCloseParam">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
label-width="auto"
|
||||
:model="formUserAdd"
|
||||
:rules="rules"
|
||||
style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
|
||||
>
|
||||
<el-form-item label="账户名称:" prop="account">
|
||||
<el-input v-model="formUserAdd.account" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="display: flex; justify-content: right">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="currentPageSize"
|
||||
:total="pageTotal"
|
||||
:page-sizes="pagePagination"
|
||||
background
|
||||
:pager-count="7"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
layout="prev, pager, next, jumper,sizes,total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<!-- 用户新增页面 -->
|
||||
<el-dialog v-model="visibleParam" title="新增账户" width="500" :before-close="handleCloseParam">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
label-width="auto"
|
||||
:model="formUserAdd"
|
||||
:rules="rules"
|
||||
style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
|
||||
>
|
||||
<el-form-item label="账户名称:" prop="account">
|
||||
<el-input v-model="formUserAdd.account" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="账户密码:" prop="password">
|
||||
<el-input v-model="formUserAdd.password" placeholder="" type="password" show-password clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="职员名称:" prop="userName">
|
||||
<el-input v-model="formUserAdd.userName" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="职员邮箱:" prop="email">
|
||||
<el-input v-model="formUserAdd.email" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话:" prop="phone">
|
||||
<el-input v-model="formUserAdd.phone" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="所属机构ID:" prop="orgId">
|
||||
<el-form-item label="账户密码:" prop="password">
|
||||
<el-input v-model="formUserAdd.password" placeholder="" type="password" show-password clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="职员名称:" prop="userName">
|
||||
<el-input v-model="formUserAdd.userName" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="职员邮箱:" prop="email">
|
||||
<el-input v-model="formUserAdd.email" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话:" prop="phone">
|
||||
<el-input v-model="formUserAdd.phone" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="所属机构ID:" prop="orgId">
|
||||
<el-input v-model="formUserAdd.orgId" placeholder="" clearable />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="角色权限:" prop="roleList">
|
||||
<el-select v-model="formUserAdd.roleList" placeholder="选择菜单权限" multiple style="width: 240px">
|
||||
<el-option v-for="item in allPermissionData" :key="item.id" :label="item.roleName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visibleParam = false"> 取消 </el-button>
|
||||
<el-button type="primary" @click="addOnSubmit">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 用户修改页面 -->
|
||||
<el-dialog v-model="visibleParamUpData" title="查看账户" width="500" :before-close="handleCloseParamUp">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
label-width="auto"
|
||||
:model="formUserUpData"
|
||||
:rules="rules"
|
||||
style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
|
||||
>
|
||||
<el-form-item label="账户名称:" prop="account">
|
||||
<el-input v-model="formUserUpData.account" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色权限:" prop="roleList">
|
||||
<el-select v-model="formUserAdd.roleList" placeholder="选择菜单权限" multiple style="width: 240px">
|
||||
<el-option v-for="item in allPermissionData" :key="item.id" :label="item.roleName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="账户密码:" prop="password">
|
||||
<el-input v-model="formUserUpData.password" placeholder="" type="password" show-password clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="职员名称:" prop="userName">
|
||||
<el-input v-model="formUserUpData.userName" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="职员邮箱:" prop="email">
|
||||
<el-input v-model="formUserUpData.email" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话:" prop="phone">
|
||||
<el-input v-model="formUserUpData.phone" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="所属机构ID:" prop="orgId">
|
||||
<avatar @selectAvatar="selectAddName">
|
||||
<template #randerData>
|
||||
<el-form-item label="头像选择:" prop="profilePicture">
|
||||
<el-input v-model="formUserAdd.profilePicture" placeholder="" clearable></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</avatar>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visibleParam = false"> 取消 </el-button>
|
||||
<el-button type="primary" @click="addOnSubmit">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 用户修改页面 -->
|
||||
<el-dialog v-model="visibleParamUpData" title="查看账户" width="500" :before-close="handleCloseParamUp">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
label-width="auto"
|
||||
:model="formUserUpData"
|
||||
:rules="rules"
|
||||
style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
|
||||
>
|
||||
<el-form-item label="账户名称:" prop="account">
|
||||
<el-input v-model="formUserUpData.account" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="账户密码:">
|
||||
<el-space>
|
||||
<!-- <el-input v-model="formUserUpData.password" placeholder="" type="password" show-password clearable /> -->
|
||||
<el-button @click="showPwd">重置密码</el-button>
|
||||
</el-space>
|
||||
</el-form-item>
|
||||
<el-form-item label="职员名称:" prop="userName">
|
||||
<el-input v-model="formUserUpData.userName" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="职员邮箱:" prop="email">
|
||||
<el-input v-model="formUserUpData.email" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话:" prop="phone">
|
||||
<el-input v-model="formUserUpData.phone" placeholder="" clearable />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="所属机构ID:" prop="orgId">
|
||||
<el-input v-model="formUserUpData.orgId" placeholder="" clearable />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="角色权限:" prop="roleList">
|
||||
<el-select v-model="formUserUpData.roleList" placeholder="选择菜单权限" multiple style="width: 240px">
|
||||
<el-option v-for="item in allPermissionData" :key="item.id" :label="item.roleName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visibleParamUpData = false"> 取消 </el-button>
|
||||
<el-button type="primary" @click="upDataOnSubmit">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 删除确认弹框 -->
|
||||
<el-dialog v-model="userDeleteDialog" title="操作提示" width="500" :before-close="handleCloseDelete">
|
||||
<span>确定是否删除?</span>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="userDeleteDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="userDeleteDialog1"> 确定 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-form-item label="角色权限:" prop="roleList">
|
||||
<el-select v-model="formUserUpData.roleList" placeholder="选择菜单权限" multiple style="width: 240px">
|
||||
<el-option v-for="item in allPermissionData" :key="item.id" :label="item.roleName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<avatar @selectAvatar="selectUpdataName">
|
||||
<template #randerData>
|
||||
<el-form-item label="头像选择:" prop="profilePicture">
|
||||
<el-input v-model="formUserUpData.profilePicture" placeholder="" clearable></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</avatar>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visibleParamUpData = false"> 取消 </el-button>
|
||||
<el-button type="primary" @click="upDataOnSubmit">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 删除确认弹框 -->
|
||||
<el-dialog v-model="userDeleteDialog" title="操作提示" width="500" :before-close="handleCloseDelete">
|
||||
<span>确定是否删除?</span>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="userDeleteDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="userDeleteDialog1"> 确定 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 修改密码弹框 -->
|
||||
<el-dialog v-model="passWordDialog" title="修改密码" width="500" :before-close="handleClosePassWord">
|
||||
<el-form
|
||||
ref="ChangePasswordFrom"
|
||||
:inline="true"
|
||||
label-width="auto"
|
||||
:model="passWordProp"
|
||||
:rules="passWordRules"
|
||||
style="padding: 24px 40px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
|
||||
>
|
||||
<!-- <el-form-item label="旧密码:" prop="account">
|
||||
<el-input v-model="passWordProp.oldPassWord" placeholder="请输入旧密码" clearable />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="新密码:" prop="newPassword">
|
||||
<el-input v-model="passWordProp.newPassword" type="password" show-password placeholder="请输入新密码" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码确认:" prop="repeatPassword">
|
||||
<el-input v-model="passWordProp.repeatPassword" type="password" show-password placeholder="请再次输入新密码" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="passWordUpdata">保存修改</el-button>
|
||||
<el-button type="primary" @click="passWordDialog = false"> 取消 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import { Search, CirclePlusFilled } from '@element-plus/icons-vue'
|
||||
import { userQuery, userUpdate, userDelete, userAdd, userList, allRoleQuery } from '/@/api/backend'
|
||||
import { userQuery, userUpdate, userDelete, userAdd, userList, allRoleQuery, userChangePassword } from '/@/api/backend'
|
||||
import { ElTable, ElMessage, FormRules } from 'element-plus'
|
||||
import { useAdminInfo } from '/@/stores/adminInfo'
|
||||
import type Node from 'element-plus/es/components/tree/src/model/node'
|
||||
import Avatar from '/@/views/backend/userInfo/avatar.vue'
|
||||
|
||||
const adminInfo = useAdminInfo()
|
||||
const input1 = ref('')
|
||||
const input2 = ref('')
|
||||
interface Tree {
|
||||
label: string
|
||||
@ -182,8 +222,7 @@ interface Tree {
|
||||
|
||||
// 用户左边树
|
||||
const treeQuery = reactive({
|
||||
parentOrgId: adminInfo.orgid,
|
||||
recursive: true,
|
||||
parentOrgId: '',
|
||||
})
|
||||
|
||||
const userData = ref()
|
||||
@ -205,6 +244,8 @@ onMounted(() => {
|
||||
const formQuery = reactive({
|
||||
orgId: '',
|
||||
recursive: false,
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
})
|
||||
|
||||
const treeId = ref()
|
||||
@ -214,6 +255,7 @@ const handleNodeClick = (data: Tree) => {
|
||||
|
||||
treeId.value = data.id
|
||||
formQuery.orgId = data.id
|
||||
console.log(formQuery, 444444444)
|
||||
RyUserQuery(formQuery)
|
||||
}
|
||||
|
||||
@ -224,7 +266,6 @@ const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
|
||||
|
||||
const treeQuery = reactive({
|
||||
parentOrgId: node.data.id,
|
||||
recursive: false,
|
||||
})
|
||||
|
||||
userList(treeQuery)
|
||||
@ -253,7 +294,7 @@ const RyUserQuery = (data: any) => {
|
||||
if (res.code == 200) {
|
||||
console.log(res, 'res111')
|
||||
tableData.value = res.rows
|
||||
paginationTotal.value = res.total
|
||||
pageTotal.value = res.total
|
||||
} else {
|
||||
ElMessage.error({
|
||||
message: res.msg,
|
||||
@ -280,6 +321,8 @@ const handleSelectionChange = (val: User[]) => {
|
||||
const formQuery1 = reactive({
|
||||
userName: '',
|
||||
orgId: '',
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
})
|
||||
const userFromQuery = () => {
|
||||
formQuery1.userName = input2.value
|
||||
@ -298,7 +341,7 @@ interface RuleUser {
|
||||
email: string
|
||||
phone: string
|
||||
orgId: string
|
||||
roleList: number[]
|
||||
roleList: string[]
|
||||
}
|
||||
const formUserAdd = reactive({
|
||||
account: '',
|
||||
@ -308,6 +351,7 @@ const formUserAdd = reactive({
|
||||
phone: '',
|
||||
orgId: '',
|
||||
roleList: [],
|
||||
profilePicture: '',
|
||||
})
|
||||
const rules = reactive<FormRules<RuleUser>>({
|
||||
account: [
|
||||
@ -317,23 +361,16 @@ const rules = reactive<FormRules<RuleUser>>({
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '用户密码不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
})
|
||||
const addUserFromData = () => {
|
||||
visibleParam.value = true
|
||||
formUserAdd.account = ''
|
||||
formUserAdd.password = ''
|
||||
formUserAdd.userName = ''
|
||||
formUserAdd.email = ''
|
||||
formUserAdd.phone = ''
|
||||
formUserAdd.orgId = ''
|
||||
formUserAdd.roleList = []
|
||||
formUserAdd.profilePicture = ''
|
||||
}
|
||||
|
||||
const handleCloseParam = (data: any) => {
|
||||
@ -367,18 +404,31 @@ const addOnSubmit = () => {
|
||||
// 页面修改
|
||||
const visibleParamUpData = ref(false)
|
||||
|
||||
const formUserUpData = reactive({ id: '', account: '', password: '', userName: '', email: '', phone: '', orgId: '', roleList: [] })
|
||||
const formUserUpData = reactive({
|
||||
id: '',
|
||||
account: '',
|
||||
userName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
orgId: '',
|
||||
roleList: [],
|
||||
profilePicture: '',
|
||||
})
|
||||
const viewUsers = (data: any) => {
|
||||
console.log(data, '页面修改数据')
|
||||
console.log(data, '页面修改数据1')
|
||||
formRef.value?.resetFields()
|
||||
visibleParamUpData.value = true
|
||||
formUserUpData.id = data.row.id
|
||||
formUserUpData.account = data.row.account
|
||||
formUserUpData.password = data.row.password
|
||||
formUserUpData.userName = data.row.userName
|
||||
formUserUpData.email = data.row.email
|
||||
formUserUpData.phone = data.row.phone
|
||||
formUserUpData.orgId = data.row.orgId
|
||||
formUserUpData.roleList = data.row.roleList
|
||||
formUserUpData.roleList = data.row.roleList.map((item: any) => {
|
||||
return item.id
|
||||
})
|
||||
formUserUpData.profilePicture = data.row.profilePicture
|
||||
|
||||
}
|
||||
const upDataOnSubmit = () => {
|
||||
formRef.value.validate((valid: any) => {
|
||||
@ -388,7 +438,9 @@ const upDataOnSubmit = () => {
|
||||
userUpdate(formUserUpData).then((res) => {
|
||||
if (res.code == 200) {
|
||||
console.log(res, '修改成功')
|
||||
|
||||
// ElMessage({
|
||||
// message: res.msg,
|
||||
// })
|
||||
RyUserQuery(formQuery)
|
||||
} else {
|
||||
ElMessage.error({
|
||||
@ -457,16 +509,104 @@ const allPermission = () => {
|
||||
})
|
||||
}
|
||||
|
||||
//修改密码弹框
|
||||
const passWordDialog = ref(false)
|
||||
const passWordProp = reactive({
|
||||
newPassword: '',
|
||||
repeatPassword: '',
|
||||
})
|
||||
|
||||
const passWordRules = {
|
||||
newPassword: [
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('密码不能为空'))
|
||||
} else if (value && passWordProp.repeatPassword && value !== passWordProp.repeatPassword) {
|
||||
callback(new Error('两次输入的密码不匹配'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
repeatPassword: [
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('密码不能为空'))
|
||||
} else if (value && passWordProp.newPassword && value !== passWordProp.newPassword) {
|
||||
callback(new Error('两次输入的密码不匹配'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
}
|
||||
const handleClosePassWord = () => {
|
||||
passWordDialog.value = false
|
||||
}
|
||||
|
||||
const showPwd = () => {
|
||||
passWordDialog.value = true
|
||||
}
|
||||
const ChangePasswordFrom = ref()
|
||||
const changePassWordData = reactive({
|
||||
id: formUserUpData.id,
|
||||
oldPassword: passWordProp.newPassword,
|
||||
})
|
||||
const passWordUpdata = () => {
|
||||
ChangePasswordFrom.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
userChangePassword(changePassWordData)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
ElMessage.success('修改成功')
|
||||
passWordDialog.value = false
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.error('修改失败')
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 新增页面头像接受
|
||||
const selectAddName = (data: string) => {
|
||||
formUserAdd.profilePicture = data
|
||||
}
|
||||
|
||||
// 修改页面头像接受
|
||||
const selectUpdataName = (data: string) => {
|
||||
formUserUpData.profilePicture = data
|
||||
}
|
||||
// 分页
|
||||
const currentPage4 = ref(0)
|
||||
const pageSize4 = ref(10)
|
||||
const paginationTotal = ref(0)
|
||||
const pagePagination = [5, 10, 20, 30]
|
||||
const currentPage = ref(1)
|
||||
const currentPageSize = ref(pagePagination[0])
|
||||
const handleSizeChange = (val: number) => {
|
||||
console.log(`${val} items per page`)
|
||||
formQuery.pageSize = val
|
||||
RyUserQuery(formQuery)
|
||||
}
|
||||
const handleCurrentChange = (val: number) => {
|
||||
console.log(`current page: ${val}`)
|
||||
formQuery.pageNum = val
|
||||
RyUserQuery(formQuery)
|
||||
}
|
||||
const pageTotal = ref(0)
|
||||
const originData = ref()
|
||||
const tableData1 = computed(() => {
|
||||
const start = (currentPage.value - 1) * currentPageSize.value
|
||||
const end = start + currentPageSize.value
|
||||
return originData.value?.slice(start, end)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -482,4 +622,80 @@ const handleCurrentChange = (val: number) => {
|
||||
// border-radius: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
@mixin searchInput($value) {
|
||||
margin-right: $value;
|
||||
width: 220px;
|
||||
height: 40px;
|
||||
}
|
||||
$defaultHeaderHeight: 60px;
|
||||
$defaultMainHeight: calc(100% - 60px);
|
||||
$paginationHeight: 32px;
|
||||
.ba-user-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: #fff;
|
||||
.defaultContainer {
|
||||
height: 100%;
|
||||
.defaultAside {
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
border-right: 1px solid #eaebed;
|
||||
.treeHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $defaultHeaderHeight;
|
||||
.searchInput {
|
||||
@include searchInput(0);
|
||||
}
|
||||
}
|
||||
.treeMain {
|
||||
height: $defaultMainHeight;
|
||||
.treePart {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.defaultMainContainer {
|
||||
height: 100%;
|
||||
.defaultHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: $defaultHeaderHeight;
|
||||
.searchPart {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.defaultBtn {
|
||||
width: 88px;
|
||||
height: 40px;
|
||||
}
|
||||
.searchInput {
|
||||
@include searchInput(10px);
|
||||
}
|
||||
}
|
||||
.defaultMain {
|
||||
height: $defaultMainHeight;
|
||||
.tablePart {
|
||||
height: calc(100% - $paginationHeight);
|
||||
}
|
||||
.tableOperate {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
a {
|
||||
margin: 5px;
|
||||
color: #0064aa;
|
||||
font-weight: 600;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user