mirror of
https://gitee.com/XiaoLFeng/JSL_OrganizeInternalOA_Web.git
synced 2025-06-08 11:43:04 +08:00
357 lines
9.3 KiB
Vue
357 lines
9.3 KiB
Vue
<style scoped>
|
||
.addinput{
|
||
//display: flex;
|
||
//flex-direction: column;
|
||
//justify-content: center;
|
||
//align-content: center;
|
||
}
|
||
|
||
.addinput>div>input{
|
||
/*width:300px ;*/
|
||
/*height: 30px;*/
|
||
/*border-radius: 5px;*/
|
||
//margin: 0 auto;
|
||
//outline-color: #94beae;
|
||
|
||
}
|
||
</style>
|
||
<template>
|
||
<div style="width: 87vw;height:90vh;position: relative;margin: 0;padding: 0">
|
||
<div style="padding:20px 10px;">
|
||
<Space>
|
||
<span>角色id：</span>
|
||
<Input v-model="searchData.username" placeholder="roleid" clearable style="width: 200px" />
|
||
<!-- <span>电话号：</span>-->
|
||
<!-- <Input v-model="searchData.phone" placeholder="Enter phone" style="width: auto" />-->
|
||
<Button @click="searchUser" type="primary" shape="circle" icon="ios-search">查询</Button>
|
||
<Button type="primary" ghost @click="showAddDialog">新增</Button>
|
||
|
||
</Space>
|
||
</div>
|
||
<!-- 表格内容-->
|
||
<div style="width: 87vw; height: 78vh; margin: 0; padding: 0">
|
||
<Table border :loading="loadingTable" ref="selection" :columns="columns" :data="states.data" style="height: 72vh ;text-align: center;" :row-class-name="setRowClassName" >
|
||
|
||
|
||
<template #status="{ row, index }">
|
||
<Switch size="large" v-model="states.data[index].accountNoLocked" :before-change="handleBeforeSwitchChange">
|
||
<template #open>
|
||
<span>开启</span>
|
||
</template>
|
||
<template #close>
|
||
<span>关闭</span>
|
||
</template>
|
||
</Switch>
|
||
</template>
|
||
|
||
<template #action="{ row, index }">
|
||
<Button type="primary" size="small" style="margin-right: 5px" @click="showEditDialog(index, row)">详情</Button>
|
||
<Button type="error" size="small" @click="showDeleteDialog(index, row)">删除</Button>
|
||
</template>
|
||
|
||
|
||
</Table>
|
||
<div style="height: 6vh ;text-align: left;padding-top: 20px">
|
||
<Page :total="states.data.length" size="small" show-elevator show-sizer />
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<!-- 对话框-->
|
||
<div>
|
||
<Modal
|
||
v-model="editDialog"
|
||
title="编辑"
|
||
@on-ok="editOk"
|
||
@on-cancel="editCancel">
|
||
<div style="">
|
||
<div style="margin-bottom: 10px;">
|
||
<span>
|
||
角色名称：<Input v-model="updateData.name" placeholder="Enter something..." style="width: 250px;padding: 10px" />
|
||
</span>
|
||
<br>
|
||
<span style="margin-left: 20px">
|
||
<label>解释：</label><Input v-model="updateData.displayName" placeholder="Enter something..." style="width: 250px;margin-left: 8px;padding: 10px" />
|
||
</span>
|
||
<br>
|
||
</div>
|
||
<div style="margin-bottom: 10px">
|
||
<span style="margin-left: 18px">
|
||
状态：
|
||
<RadioGroup v-model="lock">
|
||
<Radio label="正常"></Radio>
|
||
<Radio label="停用"></Radio>
|
||
</RadioGroup>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
|
||
|
||
<Modal
|
||
v-model="deleteDialog"
|
||
title="删除"
|
||
@on-ok="deleteOk"
|
||
@on-cancel="deleteCancel">
|
||
<p>请问是否要删除数据</p>
|
||
</Modal>
|
||
|
||
<Modal v-model="addDialog" title="新增角色信息" @on-ok="addOk" @on-cancel="addCancel" >
|
||
<div>
|
||
<div>角色名称：<Input v-model="addData.name" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px" /></div>
|
||
<div style="margin-left: 27px">解释：<Input v-model="addData.displayName" placeholder="Enter something..." style="width: 250px; margin-bottom: 10px;margin-left: 3px" /></div>
|
||
|
||
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {Page, Radio, RadioGroup, Space, Switch} from "view-ui-plus";
|
||
import requests from "../../public/request.js"
|
||
import {reactive, ref} from "vue";
|
||
import message from "view-ui-plus/src/components/message/index.js";
|
||
import {onMounted, onBeforeUpdate} from "vue";
|
||
import modal from "view-ui-plus/src/components/modal/index.js";
|
||
|
||
const currentPage = ref(1) // 当前页码
|
||
const pageSize = ref(10) // 每页显示的数据条数
|
||
const addDialog = ref(false)
|
||
const deleteDialog = ref(false)
|
||
const editDialog = ref(false)
|
||
const token = window.localStorage.getItem('token')
|
||
|
||
const columns = reactive( [
|
||
{
|
||
type: "selection",
|
||
width: 60,
|
||
align: "center"
|
||
},
|
||
{
|
||
title: "ID",
|
||
key: "id",
|
||
width: 80,
|
||
align: "center"
|
||
},
|
||
{
|
||
title: "角色",
|
||
key: "roleName",
|
||
width: 150,
|
||
align: "center"
|
||
},
|
||
{
|
||
title: "解释",
|
||
key: "displayName",
|
||
width: 125,
|
||
align: "center"
|
||
},
|
||
{
|
||
title: "创建日期",
|
||
key: "createdAt",
|
||
|
||
align: "center"
|
||
},
|
||
{
|
||
title: "更新日期",
|
||
key: "updatedAt",
|
||
align: "center"
|
||
},
|
||
{
|
||
title: "状态",
|
||
slot: "status",
|
||
width: 100,
|
||
align: "center",
|
||
},
|
||
{
|
||
title: "操作",
|
||
slot: "action",
|
||
width: 150,
|
||
align: "center"
|
||
}
|
||
])
|
||
const states = reactive({
|
||
data:[]
|
||
})
|
||
const loadingTable = ref(true)
|
||
const lock = ref('正常')
|
||
const roleSingle = ref(1)
|
||
const updateData = reactive({
|
||
id: 0,
|
||
name: '',
|
||
displayName: '',
|
||
|
||
})
|
||
|
||
const userLock = reactive({
|
||
id: -1,
|
||
isLock: 1
|
||
})
|
||
|
||
/**
|
||
* 配置代码
|
||
*/
|
||
message.config({
|
||
background: true
|
||
})
|
||
function setRowClassName(row, index) {
|
||
return 'custom-row';
|
||
}
|
||
|
||
onMounted(() => {
|
||
getAll()
|
||
})
|
||
|
||
/**
|
||
* 方法函数
|
||
*/
|
||
|
||
function getAll() {
|
||
|
||
requests.roleGet(null,token).then((res)=>{
|
||
console.log(res.data.data)
|
||
states.data = res.data.data
|
||
// states.data = res.data.data
|
||
// console.log(res.data.data)
|
||
loadingTable.value = false
|
||
// for (let i = 0; i < res.data.data.length; i++) {
|
||
// states.data[i] = res.data.data[i].user
|
||
// }
|
||
// console.log("getAll:",states.data)
|
||
})
|
||
}
|
||
|
||
function handleBeforeSwitchChange(index, row) {
|
||
return new Promise((resolve) => {
|
||
this.$Modal.confirm({
|
||
title: '切换确认',
|
||
content: '您确认要切换开关状态吗？',
|
||
onOk: () => {
|
||
resolve();
|
||
message.success('切换成功')
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
function handlePageChange(newPage) {
|
||
this.currentPage = newPage; // 更新当前页码
|
||
}
|
||
|
||
const addData = reactive({
|
||
// id:'',
|
||
// roleName:'',
|
||
name:'',
|
||
displayName:'',
|
||
// createdAt:'',
|
||
// updatedAt:'',
|
||
|
||
})
|
||
function showAddDialog(){
|
||
addDialog.value = true
|
||
|
||
}
|
||
function addOk () {
|
||
|
||
requests.roleAdd(addData, token).then((res)=>{
|
||
console.log(res.data)
|
||
if (res.data.code===200) {
|
||
message.success('新增成功')
|
||
getAll()
|
||
}
|
||
else {
|
||
message.error('新增失败')
|
||
}
|
||
})
|
||
}
|
||
function addCancel () {
|
||
message.info('取消新增')
|
||
}
|
||
|
||
|
||
|
||
const deleteId = ref(0)
|
||
function showDeleteDialog(index, row){
|
||
deleteDialog.value = true
|
||
deleteId.value = row.id
|
||
}
|
||
function deleteOk(){
|
||
deleteDialog.value = false;
|
||
console.log(deleteId.value)
|
||
requests.userDelete(deleteId.value, token).then((res)=>{
|
||
console.log("deleteResult:",res)
|
||
if (res.data.code === 200) {
|
||
message.success('删除成功')
|
||
}else {
|
||
message.error('删除失败')
|
||
}
|
||
})
|
||
|
||
}
|
||
function deleteCancel(){
|
||
deleteDialog.value = false;
|
||
message.info('取消删除')
|
||
}
|
||
|
||
function showEditDialog(index, row){
|
||
editDialog.value = true
|
||
updateData.id = row.id
|
||
updateData.name = row.roleName
|
||
updateData.displayName = row.displayName
|
||
|
||
}
|
||
function editOk(){
|
||
loadingTable.value = true
|
||
editDialog.value = false;
|
||
requests.roleEdit(updateData,token).then((res)=>{
|
||
console.log("editResult:",res)
|
||
console.log("updateData:",updateData)
|
||
if (res.data.code === 200) {
|
||
getAll()
|
||
message.success('修改成功')
|
||
}
|
||
else {
|
||
loadingTable.value = false
|
||
message.error('修改失败')
|
||
|
||
}
|
||
})
|
||
|
||
}
|
||
function editCancel(){
|
||
editDialog.value = false;
|
||
}
|
||
|
||
|
||
|
||
const searchData = reactive({
|
||
username: '',
|
||
phone: ''
|
||
})
|
||
function searchUser(){
|
||
loadingTable.value = true
|
||
if (searchData.username === '' && searchData.phone === '') {
|
||
getAll()
|
||
}
|
||
else {
|
||
requests.userCurrent(searchData,token).then((res)=>{
|
||
loadingTable.value = false
|
||
console.log("searchResult:",res)
|
||
if (res.data.code === 200) {
|
||
states.data = []
|
||
states.data[0] = res.data.data.user
|
||
message.success('查询成功')
|
||
console.log(loadingTable.value)
|
||
}
|
||
else {
|
||
message.error(res.data.message)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
|
||
</script> |