665 lines
16 KiB
Vue
665 lines
16 KiB
Vue
<template>
|
|
<div class="tunnel-bgc">
|
|
<div class="box-top">
|
|
<div class="back-tunnel" @click="router.push('/')">
|
|
<div class="back-icon"></div>
|
|
<span>返回</span>
|
|
</div>
|
|
<div class="tunnel-title"></div>
|
|
<div class="all-del-btn">
|
|
<!-- <div class="all-btn" @click="handleAll">-->
|
|
<!-- 全选-->
|
|
<!-- </div>-->
|
|
<!-- <div class="all-btn del-btn" @click="handleDelete">-->
|
|
<!-- 删除-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</div>
|
|
<div class="user-content">
|
|
<div class="user-box">
|
|
<div class="user-top">
|
|
<div class="search-box">
|
|
<div>
|
|
<el-input
|
|
v-model="username"
|
|
clearable
|
|
placeholder="输入搜索内容"
|
|
@clear="getInfo"
|
|
/>
|
|
</div>
|
|
<el-button type="primary" :icon="Search" style="margin-left: 20px" @click="getInfo">搜索</el-button>
|
|
</div>
|
|
<div>用户管理</div>
|
|
<div class="all-del-btn">
|
|
<div class="add-btn" @click="handleAddUser">添加用户</div>
|
|
<div class="all-btn del-btn" @click="handleDelete">
|
|
删除
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="device-table">
|
|
<el-table stripe ref="multipleTable" @select="handleSelect"
|
|
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;margin-top: 80px;"
|
|
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
|
|
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="userData">
|
|
<el-table-column type="selection" width="80"/>
|
|
<el-table-column prop="userName" label="账户" align="center"/>
|
|
<el-table-column prop="nickName" label="昵称" align="center"/>
|
|
<el-table-column prop="roleName" label="身份" align="center"/>
|
|
<el-table-column prop="phoneNumber" label="电话号码" align="center"/>
|
|
<el-table-column label="操作" align="center">
|
|
<template #default="scope">
|
|
<el-button link type="primary" size="large" style="font-size: 40px;color: #17E1E2;"
|
|
@click="handleEditUser(scope.row)">
|
|
修改
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-dialog :close-on-click-modal="false" v-model="isVisited" width="1658px">
|
|
<div class="user-title">
|
|
<span>{{ title }}</span>
|
|
</div>
|
|
<el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="240px">
|
|
<el-form-item label="当前站点">
|
|
<div class="current-site">{{ currentSite }}<span>如果需要切换站点,请返回首屏切换</span></div>
|
|
</el-form-item>
|
|
<el-form-item label="输入账户">
|
|
<el-input v-model="form.userName" placeholder="请输入账户"/>
|
|
</el-form-item>
|
|
<el-form-item label="输入密码" v-if="title==='添加用户'">
|
|
<el-input type="password" show-password v-model="form.password" placeholder="请输入密码"/>
|
|
</el-form-item>
|
|
<el-form-item label="输入昵称">
|
|
<el-input v-model="form.nickName" placeholder="请输入昵称"/>
|
|
</el-form-item>
|
|
<el-form-item label="输入电话号码">
|
|
<el-input v-model="form.phoneNumber" placeholder="输入电话号码"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="选择身份">
|
|
<el-radio-group v-model="form.roleId" @change="(val) => {
|
|
console.log('vaaa',val)
|
|
if (val >3){
|
|
getTunnel()
|
|
}}">
|
|
<el-radio v-for="item in radioList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="选择隧道" v-if="checkList.length!==0&&form.roleId>3">
|
|
<el-select
|
|
v-model="tunnelIndex"
|
|
multiple
|
|
filterable
|
|
clearable
|
|
placeholder="请选择隧道"
|
|
:fit-input-width="true"
|
|
>
|
|
<el-option
|
|
v-for="item in checkList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="btns">
|
|
<div class="cancel-btn" @click="isVisited=false">
|
|
取消
|
|
</div>
|
|
<div class="sure-btn" @click="handleSubmit(formInstance)">
|
|
确定
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
<div class="pagination">
|
|
<span @click="firstPage" v-if="showFirst">首页</span>
|
|
<el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
|
|
:total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
|
|
@current-change="handleCurrentChange" :hide-on-single-page="true"/>
|
|
<span @click="lastPage" v-if="showFirst">尾页</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {Search} from '@element-plus/icons-vue'
|
|
import {addUser, editUser, getUser, getRoleOption} from "@/api/user";
|
|
import {ElMessage, ElMessageBox} from "element-plus";
|
|
import {getTunnelOption} from "@/api/tunnel";
|
|
import {deleteUser, getUserDetail} from "../../api/user";
|
|
import {getSiteDetail} from "@/api/site";
|
|
|
|
const router = useRouter()
|
|
const title = ref('添加用户')
|
|
const siteId = reactive(router.currentRoute.value.params.siteId)
|
|
const tunnelIndex = ref()
|
|
const username = ref()
|
|
const userIds = ref()
|
|
const showFirst = ref(true)
|
|
const currentSite = ref('')
|
|
const formInstance = ref()
|
|
const userData = ref([])
|
|
const pageInfo = reactive({
|
|
pageNum: 1,
|
|
pageSize: 10
|
|
});
|
|
const total = ref(10);
|
|
const isVisited = ref(false);
|
|
const form = ref({
|
|
password: '',
|
|
userName: '',
|
|
nickName: '',
|
|
phoneNumber: '',
|
|
roleId: [],
|
|
tunnelIds: []
|
|
});
|
|
const formRules = ref({
|
|
userName: [{required: true, message: '请输入用户名称', trigger: 'blur'}],
|
|
password: [{required: true, message: '请输入密码', trigger: 'blur'}]
|
|
})
|
|
const radioList = ref([])
|
|
const checkList = ref([])
|
|
const multipleTable = ref()
|
|
const getTunnel = () => {
|
|
getTunnelOption(siteId).then(res => {
|
|
if (res.code === 1000) {
|
|
checkList.value = res.data
|
|
}
|
|
})
|
|
}
|
|
|
|
const handleAddUser = () => {
|
|
reset()
|
|
title.value = '添加用户'
|
|
isVisited.value = true
|
|
getSiteDetail(siteId).then((res) => {
|
|
currentSite.value = res.data.siteName
|
|
});
|
|
}
|
|
const handleEditUser = (row) => {
|
|
reset()
|
|
getUserDetail(row.userId).then(res => {
|
|
if (res.code === 1000) {
|
|
form.value = res.data.user
|
|
form.value.roleId = res.data.roleIds[0]
|
|
}
|
|
})
|
|
title.value = '修改用户'
|
|
isVisited.value = true
|
|
}
|
|
const handleAll = () => {
|
|
multipleTable.value.toggleAllSelection()
|
|
}
|
|
const handleDelete = () => {
|
|
console.log('userIds.value',userIds.value)
|
|
if (userIds.value ===undefined) {
|
|
ElMessage.warning('请先选择用户进行删除')
|
|
} else {
|
|
ElMessageBox.confirm(`是否确认删除该用户吗?`, '系统提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
deleteUser(userIds.value).then(res => {
|
|
if (res.code === 1000) {
|
|
ElMessage.success(res.msg)
|
|
getInfo()
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
const reset = () => {
|
|
form.value = {
|
|
password: '',
|
|
userName: '',
|
|
nickName: '',
|
|
phoneNumber: '',
|
|
roleId: [],
|
|
tunnelIds: []
|
|
}
|
|
}
|
|
const getRoleOptionInfo = () => {
|
|
getRoleOption().then(res => {
|
|
if (res.code === 1000) {
|
|
radioList.value = res.data
|
|
}
|
|
})
|
|
}
|
|
getRoleOptionInfo()
|
|
const getInfo = () => {
|
|
getUser({
|
|
siteId: siteId,
|
|
userName: username.value,
|
|
...pageInfo
|
|
}).then(res => {
|
|
if (res.code === 1000) {
|
|
userData.value = res.data.rows
|
|
total.value = res.data.total
|
|
showFirst.value = total.value / pageInfo.pageSize >= 1;
|
|
}
|
|
})
|
|
}
|
|
getInfo()
|
|
const firstPage = () => {
|
|
pageInfo.pageNum = 1
|
|
getInfo()
|
|
}
|
|
const lastPage = () => {
|
|
pageInfo.pageNum = total.value / pageInfo.pageSize
|
|
getInfo()
|
|
}
|
|
//点击页码进行分页功能
|
|
const handleCurrentChange = (val) => {
|
|
pageInfo.pageNum = val
|
|
getInfo()
|
|
}
|
|
const handleSubmit = async (formInstance) => {
|
|
if (!formInstance) return;
|
|
formInstance.validate(async (valid) => {
|
|
if (!valid) return;
|
|
const data = {
|
|
siteId: siteId,
|
|
roleIds: [form.value.roleId],
|
|
...form.value
|
|
}
|
|
if (title.value === '添加用户') {
|
|
await addUser(data).then(res => {
|
|
if (res.code === 1000) {
|
|
getInfo()
|
|
isVisited.value = false
|
|
ElMessage.success(res.msg)
|
|
} else {
|
|
ElMessage.warning(res.msg)
|
|
}
|
|
})
|
|
} else {
|
|
await editUser(data).then(res => {
|
|
if (res.code === 1000) {
|
|
getInfo()
|
|
isVisited.value = false
|
|
ElMessage.success(res.msg)
|
|
} else {
|
|
ElMessage.warning(res.msg)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
const handleSelect = async (selection, row) => {
|
|
if (selection.length !== 0) {
|
|
// disabled.value = false
|
|
userIds.value = row.userId
|
|
if (selection.length > 1) {
|
|
const del_row = selection.shift();
|
|
multipleTable.value.toggleRowSelection(del_row, false);
|
|
}
|
|
} else {
|
|
// disabled.value = true
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.el-input .el-input__password) {
|
|
font-size: 60px;
|
|
}
|
|
|
|
:deep(.el-input__clear) {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.current-site {
|
|
font-size: 41px;
|
|
color: #FFFFFF;
|
|
margin-top: 12px;
|
|
|
|
> span {
|
|
font-size: 38px !important;
|
|
color: darkgray !important;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
|
|
:deep(.el-table__header-wrapper .el-checkbox) {
|
|
display: none
|
|
}
|
|
|
|
:deep(.el-select-dropdown__item:hover) {
|
|
background-color: #064B66 !important;
|
|
width: 137px !important;
|
|
}
|
|
|
|
:deep(.el-radio-group) {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
:deep(.el-radio__label) {
|
|
color: #FFFFFF;
|
|
font-size: 38px;
|
|
}
|
|
|
|
:deep(.el-radio__inner) {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 25px;
|
|
border: 4px solid #05FEFF;
|
|
background-color: transparent;
|
|
}
|
|
|
|
:deep(.el-radio__input.is-checked+.el-radio__label) {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
:deep(.el-radio__input.is-checked .el-radio__inner ) {
|
|
background: #064B66;
|
|
border-color: #05FEFF !important;
|
|
}
|
|
|
|
:deep(.el-radio__inner::after) {
|
|
width: 18px;
|
|
height: 18px;
|
|
background: #05FEFF;
|
|
}
|
|
|
|
.user-title {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0 0 60px 0;
|
|
font-size: 50px;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
:deep(.el-table__empty-block) {
|
|
background: #064B66;
|
|
font-size: 30px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.tunnel-bgc {
|
|
padding: 85px 0 0 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('@/assets/images/tunnel/sd_bj.png');
|
|
|
|
.box-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.back-tunnel {
|
|
cursor: pointer;
|
|
margin: 0 0 0 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 178px;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
border-radius: 11px;
|
|
border: 2px solid #08B7B8;
|
|
font-size: 38px;
|
|
color: #FFFFFF;
|
|
|
|
.back-icon {
|
|
margin-right: 20px;
|
|
margin-left: 23px;
|
|
width: 33px;
|
|
height: 33px;
|
|
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.all-del-btn {
|
|
display: flex;
|
|
|
|
.del-btn {
|
|
width: 168px;
|
|
height: 60px;
|
|
background: #08B7B8;
|
|
border-radius: 11px;
|
|
}
|
|
|
|
.all-btn {
|
|
cursor: pointer;
|
|
padding-left: 53px;
|
|
width: 178px;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
border-radius: 11px;
|
|
border: 2px solid #08B7B8;
|
|
color: #FFFFFF;
|
|
font-size: 38px;
|
|
|
|
&:last-child {
|
|
margin-left: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-content {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 247px;
|
|
|
|
.user-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 2194px;
|
|
height: 1480px;
|
|
background: #064B66;
|
|
border-radius: 20px;
|
|
border: 2px solid #05FEFF;
|
|
box-sizing: border-box;
|
|
padding: 73px 58px;
|
|
|
|
.user-top {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
> div:nth-child(2) {
|
|
margin-left: -250px;
|
|
height: 61px;
|
|
font-size: 46px;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
line-height: 61px;
|
|
}
|
|
|
|
.add-btn {
|
|
cursor: pointer;
|
|
width: 180px;
|
|
height: 70px;
|
|
line-height: 70px;
|
|
background: #08B7B8;
|
|
border-radius: 6px;
|
|
color: #FFFFFF;
|
|
font-size: 38px;
|
|
padding-left: 19px;
|
|
//margin-left: 20px;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
|
|
:deep(.el-button) {
|
|
width: 140px;
|
|
height: 70px;
|
|
background: #08B7B8;
|
|
border-radius: 6px;
|
|
border: none;
|
|
font-size: 38px;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
:deep(.el-input__wrapper) {
|
|
width: 300px;
|
|
height: 70px;
|
|
border-radius: 6px;
|
|
border: 1px solid #05FEFF;
|
|
background-color: transparent;
|
|
font-size: 38px;
|
|
|
|
.el-input__inner {
|
|
height: 70px;
|
|
line-height: 70px;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-table--fit) {
|
|
width: 2110px !important;
|
|
}
|
|
|
|
:deep(.cell) {
|
|
height: 80px;
|
|
line-height: 80px;
|
|
color: #fff;
|
|
font-size: 38px;
|
|
}
|
|
|
|
:deep(.el-table tr) {
|
|
background-color: #1C5971;
|
|
}
|
|
|
|
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
|
|
background-color: #1C5971;
|
|
}
|
|
|
|
:deep(.el-table__row--striped) {
|
|
background-color: #13849C !important;
|
|
}
|
|
|
|
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
|
|
background-color: #13849C !important;
|
|
}
|
|
|
|
:deep(.el-table__inner-wrapper::before) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-dialog) {
|
|
border: 2px solid #05FEFF;
|
|
background: #0D6578;
|
|
border-radius: 20px;
|
|
padding: 30px 40px;
|
|
box-sizing: border-box;
|
|
margin: 458px auto 0 auto;
|
|
|
|
.el-dialog__header {
|
|
padding: 0;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
:deep(.el-form-item) {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
:deep(.el-form-item__label) {
|
|
font-size: 38px;
|
|
font-family: MicrosoftYaHei;
|
|
color: #FFFFFF;
|
|
margin-right: 12px;
|
|
line-height: 50px;
|
|
}
|
|
|
|
:deep(.el-input) {
|
|
height: 75px;
|
|
|
|
.el-input__wrapper {
|
|
background-color: transparent;
|
|
border: 1px solid #08B7B8;
|
|
|
|
.el-input__inner {
|
|
height: auto;
|
|
color: #fff;
|
|
font-size: 38px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.pagination {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
bottom: 90px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #60DDDE;
|
|
font-size: 38px;
|
|
font-weight: bold;
|
|
|
|
> span:first-child {
|
|
cursor: pointer;
|
|
margin-right: 60px;
|
|
}
|
|
|
|
> span:last-child {
|
|
cursor: pointer;
|
|
margin-left: 71px;
|
|
}
|
|
|
|
:deep(.btn-prev) {
|
|
background-color: transparent;
|
|
font-size: 38px;
|
|
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
|
font-weight: bold;
|
|
color: #60DDDE;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
:deep(.btn-next) {
|
|
background-color: transparent;
|
|
font-size: 38px;
|
|
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
|
font-weight: bold;
|
|
color: #60DDDE;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
:deep(.el-pager li.is-active ) {
|
|
width: 70px;
|
|
height: 70px;
|
|
background: #60DDDE;
|
|
border-radius: 50%;
|
|
color: #071F40;
|
|
font-size: 38px;
|
|
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
|
font-weight: bold;
|
|
}
|
|
|
|
:deep(.el-pager li) {
|
|
margin-left: 40px;
|
|
}
|
|
|
|
:deep(.el-pager li:not(.is-active) ) {
|
|
width: 70px;
|
|
height: 70px;
|
|
border: 1px solid #60DDDE;
|
|
border-radius: 50%;
|
|
background-color: transparent;
|
|
font-size: 38px;
|
|
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
|
font-weight: bold;
|
|
color: #60DDDE;
|
|
}
|
|
}
|
|
}
|
|
</style>
|