锁屏管理系统前端代码功能修改

master
gsy 10 months ago
parent a7aba9ceff
commit 9b6a39827b

@ -8,7 +8,7 @@
<title></title> <title></title>
<script type="module" crossorigin src="./assets/index.1693c987.js"></script> <script type="module" crossorigin src="./assets/index.1e86c638.js"></script>
<link rel="stylesheet" href="./assets/index.32d30889.css"> <link rel="stylesheet" href="./assets/index.32d30889.css">
</head> </head>
<body> <body>

@ -42,12 +42,20 @@ export const deleteLockScreenDynamic = data => post("LockScreenManager/LockScree
//获取配置规则下拉 //获取配置规则下拉
export const getLockScreenDynamicConfigList = data => post("LockScreenManager/LockScreenDynamic/getLockScreenDynamicConfigList",data) export const getLockScreenDynamicConfigList = data => post("LockScreenManager/LockScreenDynamic/getLockScreenDynamicConfigList",data)
//获取配置规则下拉 //获取动态密码
export const generateDynamicPassword = data => post("LockScreenManager/LockScreenDynamic/generateDynamicPassword",data) export const generateDynamicPassword = data => post("LockScreenManager/LockScreenDynamic/generateDynamicPassword",data)
//获取客户端信息
export const getLockScreenClientList = data => post("LockScreenManager/LockScreenClient/getLockScreenClientList",data)
//后台管理人员登录 //后台管理人员登录
export const userLogin = data => post("LockScreenManager/LockSreenGtUser/login",data) export const userLogin = data => post("LockScreenManager/LockSreenGtUser/login",data)

@ -5,8 +5,8 @@ import {ElMessage} from "element-plus";
// axios.defaults.staticBaseURL = '../' // axios.defaults.staticBaseURL = '../'
axios.defaults.baseURL = 'http://' + window.location.host //正式 //axios.defaults.baseURL = 'http://' + window.location.host //正式
//axios.defaults.baseURL = 'http://' + window.location.hostname + ':9440' //测试 axios.defaults.baseURL = 'http://' + window.location.hostname + ':9440' //测试
//post请求头 //post请求头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8"; axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";

@ -15,6 +15,8 @@ import lockScreenDynamicManage from '../..//views/LockScreenManager/lockScreenDy
import dynamicPassword from '../..//views/LockScreenManager/dynamicPassword.vue'; import dynamicPassword from '../..//views/LockScreenManager/dynamicPassword.vue';
import clientManage from '../..//views/LockScreenManager/clientManage/clientManage.vue';
import menu from '../../views/menu/menu.vue'; import menu from '../../views/menu/menu.vue';
@ -35,6 +37,9 @@ const routes = [
},{ },{
path: 'lockScreenDynamicManage',//cafterqueryPage path: 'lockScreenDynamicManage',//cafterqueryPage
component: lockScreenDynamicManage, component: lockScreenDynamicManage,
},{
path: 'clientManage',//cafterqueryPage
component: clientManage,
}, },
{ {
path: 'index',//index path: 'index',//index

@ -0,0 +1,128 @@
<template>
<el-form ref="formDom" :rules="addFormRules" :model="formData" size="medium" v-loading="loading">
<el-row>
<el-col :span="19" :offset="1">
<el-form-item label="用户名" :label-width="formLabelWidth" prop="loginName" clearable>
<el-input v-model="formData.loginName" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="19" :offset="1">
<el-form-item label="口令" :label-width="formLabelWidth" prop="loginPwd" clearable>
<el-input type="password" v-model="formData.loginPwd" autocomplete="off" maxlength="12"></el-input>
</el-form-item>
</el-col>
<el-col :span="19" :offset="1">
<el-form-item label="人员名称" :label-width="formLabelWidth" prop="userName" clearable>
<el-input v-model="formData.userName" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script setup>
import pro from '../../../util/tool.js';
import { onMounted, reactive, ref, toRefs, warn } from 'vue';
import { addLockScreenGtUser, updateLockScreenGtUser } from '@/util/api/api.js';
import { ElMessage, ElMessageBox } from "element-plus";
//
const props = defineProps(['rowData']);
//
const emit = defineEmits(['addReload']);
// label
const formLabelWidth = ref('130px');
//
const formData = ref({});
//
const addServiceAreaList = ref([]);
//
const addRoleList = ref([]);
//
const loading = ref(false);
const formDom = ref(null);
//
const addFormRules = ref({
loginName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
userName: [{ required: true, message: '请输入人员名称', trigger: 'blur' }],
// jobNumber: [{ required: true, message: '', trigger: 'blur' }],
loginPwd: [{ required: true, message: '请输入口令', trigger: 'blur' }],
})
onMounted(() => {
formData.value = props.rowData;
});
//
function saveData() {
formData.value.isAntiFee = 0;
addLockScreenGtUser(formData.value).then(res => {
if (res.result == 1) {
ElMessage.success("保存成功");
//
emit("addReload");
}else if(res.result == -2){
ElMessage.error(res.msg);
} else {
ElMessage.error("保存失败");
}
})
}
//
function updateData() {
formData.value.isAntiFee = 0;
updateLockScreenGtUser(formData.value).then(res => {
if (res.result == 1) {
ElMessage.success("修改成功");
//
emit("addReload");
}else if(res.result == -2){
ElMessage.error(res.msg);
} else {
ElMessage.error("修改失败");
}
})
}
//使
defineExpose({
formDom,
saveData,
updateData
});
</script>
<style scoped></style>

@ -0,0 +1,463 @@
<template>
<el-row>
<el-col :span="24">
<div style="padding: 10px 0;display: flex">
<!-- <el-button type="primary" style="margin-left: 0.5%;margin-top: 0px;" @click="addOperators">
<el-icon>
<plus />
</el-icon>
<span style="vertical-align: middle;"> 新增 </span>
</el-button> -->
<el-button type="warning" style="margin-left: 0.5%;margin-top: 0px;" @click="updateOperators">
<el-icon>
<Edit />
</el-icon>
<span style="vertical-align: middle;"> 修改配置信息 </span>
</el-button>
<!-- <el-button type="danger" style="margin-top: 0px;" @click="del">
<el-icon>
<delete />
</el-icon>
<span style="vertical-align: middle;"> 解锁屏幕 </span>
</el-button> -->
<el-button type="primary" style="margin-left: 0.5%;margin-top: 0px;" @click="searchShow = true">
<el-icon style="vertical-align: middle;">
<search />
</el-icon>
<span style="vertical-align: middle;"> 查找 </span>
</el-button>
</div>
<el-table :height=myHeight highlight-current-row="true" v-loading.fullscreen.lock="tableLoading" :data="tableData" border
style="width: 100%;" @current-change="tableHandleCurrentChange"
@selection-change="handleSelectionChange">
<el-table-column :resizable="false" fixed align="center" type="index" width="80" label="序号" />
<el-table-column :resizable="false" align="center" prop="clientName" label="客户端别名" />
<el-table-column :resizable="false" align="center" width="150" prop="clientId" label="客户端MAC地址" />
<el-table-column :resizable="false" align="center" width="180" prop="connectStartTime" label="客户端创建连接时间" />
<el-table-column :resizable="false" align="center" prop="passwordKey" label="客户端动态口令私钥" />
<el-table-column :resizable="false" align="center" width="130" prop="groupName" label="客户端所属群组" />
<el-table-column :resizable="false" prop="right" label="操作" width="200" align="center">
<template v-slot="scope">
<el-button style="width: 48%;margin-left: 1%;margin-top: 2%"
@click="details(scope.row, scope.$index)" type="danger" size="default" :icon="View">
<span style="vertical-align: middle;"> 解锁屏幕 </span>
</el-button >
</template>
</el-table-column>
</el-table>
<el-config-provider :locale="locale">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="searchForm.pageNum" :page-sizes="[20, 30, 50]" :page-size="searchForm.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="searchForm.total">
</el-pagination>
</el-config-provider>
</el-col>
<el-dialog title="人员信息查找" v-model="searchShow" width="35%" top="0.5%" draggable :modal="false">
<el-form :model="searchForm" size="medium" ref="searchFormElement">
<el-row>
<el-col :span="19" :offset="1">
<el-form-item label="用户名" :label-width="formLabelWidth" clearable>
<el-input placeholder="请输入" v-model="searchForm.loginNameQuery" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="19" :offset="1">
<el-form-item label="人员名称" :label-width="formLabelWidth" clearable>
<el-input placeholder="请输入" v-model="searchForm.userNameQuery" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="searchShow = false"> 取消</el-button>
<el-button type="primary" @click="resetSearchData">
<el-icon>
<Refresh />
</el-icon>
<span style="vertical-align: middle;"> 重置 </span>
</el-button>
<el-button type="primary" @click="searchData">
<el-icon style="vertical-align: middle;">
<search />
</el-icon>
<span style="vertical-align: middle;"> 搜索 </span>
</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="addOperatorsShow" width="40%" top="0.5%" :destroy-on-close="true"
:close-on-click-modal="false">
<!-- :before-close="addOperatorsShow = false" -->
<template #header="{ titleAdd, titleClass, titleUpdate }">
<div class="my-header">
<span v-if="addTitle" :id="titleAdd" :class="titleClass"></span>
<span v-if="updateTitle" :id="titleUpdate" :class="titleClass"></span>
</div>
</template>
<clientAddUpdate ref="clientAddUpdateDom" :rowData="addUpdateForm" @addReload="addReload">
</clientAddUpdate>
<template #footer>
<span class="dialog-footer">
<el-button @click="addOperatorsShow = false"> 取消</el-button>
<el-button type="primary" @click="saveData()"> </el-button>
</span>
</template>
</el-dialog>
</el-row>
</template>
<script lang="ts" setup>
import { Download, View } from '@element-plus/icons-vue';
import pro from '../../../util/tool.js';
import { onMounted, reactive, ref, toRefs, warn } from 'vue';
import { getLockScreenClientList, addLockScreenGtUser,deleteLockScreenGtUser } from '@/util/api/api.js';
import { ElMessage, ElMessageBox } from "element-plus";
import clientAddUpdate from './clientAddUpdate.vue'
//dom
const clientAddUpdateDom = ref(null);
//
const props = defineProps(['checkForm', 'images']);
//
const tableLoading = ref(false);
// label
const formLabelWidth = ref('130px');
//
const myHeight = ref(500);
//
const searchForm = reactive({
total: 0,
pageNum: 1,
pageSize: 20,
userNameQuery: "", //
loginNameQuery:"",
isAntifee:0,
});
//
const addUpdateForm = ref({});
//
const tableData = ref([]);
//
const searchServiceAreaList = ref([]);
//
const searchRoleList = ref([]);
// false true
const addOperatorsShow = ref(false);
// false true
const searchShow = ref(false);
//
const addTitle = ref(false);
//
const updateTitle = ref(false);
//
const currentRow = ref(null);
//
const multipleSelection = ref(null);
//
const checkList = ref([]);
//
const collectionShow = ref(false);
onMounted(() => {
tableLoading.value = true;
//
getTableData();
//
//getOtherData();
});
function getTableData() {
getLockScreenClientList(searchForm).then(res => {
if (res.records != null) {
tableData.value = res.records;
searchForm.total = res.total;
searchForm.pageNum = res.current;
searchForm.pageSize = res.size;
} else {
ElMessage.error('查询失败!')
}
tableLoading.value = false;
//
myHeight.value = (document.documentElement.clientHeight) * 0.77;
})
}
function reloadTableData(){
tableLoading.value = true;
getLockScreenClientList(searchForm).then(res => {
if (res.records != null) {
tableData.value = res.records;
searchForm.total = res.total;
searchForm.pageNum = res.current;
searchForm.pageSize = res.size;
} else {
ElMessage.error('查询失败!')
}
tableLoading.value = false;
})
}
function getOtherData() {
getOperationsFiterData({ subComNo: null,isChange:"N" }).then(res => {
if (res.roleList != null) {
searchRoleList.value = res.roleList;
}
if (res.serviceAreaList != null) {
searchServiceAreaList.value = res.serviceAreaList;
}
});
}
//
function addOperators() {
addOperatorsShow.value = true;
//
addTitle.value = true;
//
updateTitle.value = false;
//addUpdateForm
addUpdateForm.value = {};
}
//
function saveData() {
clientAddUpdateDom.value.formDom.validate((valid) => {
if (valid) { // valid true;
//
if (addTitle.value) {
//
clientAddUpdateDom.value.saveData();
}
//
if (updateTitle.value) {
//
clientAddUpdateDom.value.updateData();
}
} else {
return false
}
});
}
//
function addReload() {
//
addOperatorsShow.value = false;
//
reloadTableData();
}
//
function updateOperators() {
//
if (currentRow.value == null) {
ElMessage({
showClose: true,
message: '请选择要修改的数据!',
type: 'warning',
})
return;
}
//退
addUpdateForm.value = {...currentRow.value};
addOperatorsShow.value = true;
//
addTitle.value = false;
//
updateTitle.value = true;
}
//
function searchData() {
searchForm.pageSize = 20;
searchForm.pageNum = 1;
searchForm.total = 0;
//
reloadTableData();
}
//
function resetSearchData() {
//
searchForm.userNameQuery = "";
searchForm.loginNameQuery = "";
searchForm.pageSize = 20;
searchForm.pageNum = 1;
searchForm.total = 0;
//
reloadTableData();
}
function del() {
if (null == currentRow.value && null == multipleSelection.value) {
ElMessage({
showClose: true,
message: '请选择要删除的数据!',
type: 'warning',
})
return;
}
let operatorList = [];
//
if (null != multipleSelection.value && multipleSelection.value.length > 0) {
operatorList = [...multipleSelection.value ] ;
if (null != currentRow.value) {
let isCanAdd = true;
for (let item of operatorList) {
if (item.id == currentRow.value.id) {
isCanAdd = false;
break;
}
}
if (isCanAdd) {
operatorList.push({...currentRow.value});
}
}
} else {
operatorList.push({...currentRow.value});
}
let msg = "";
if (operatorList.length == 1) {
msg = '是否确定删除该数据?';
} else {
msg = '是否批量删除' + operatorList.length + '条数据?';
}
ElMessageBox.confirm(
msg,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
deleteLockScreenGtUser(operatorList).then((res) => {
if (res.result == 1) {
ElMessage.success(res.msg);
currentRow.value = null;
multipleSelection.value = null;
//
reloadTableData();
} else {
ElMessage.error(res.msg);
}
})
}).catch(() => {
})
}
function tableFormat(row, column) {
// DT YYYY-mm-dd HH:mm:ss
if (column.property == "loginPwd") {
return "**********";
}
}
//
function handleSizeChange(pageSize) {
searchForm.pageSize = pageSize;
reloadTableData();
}
//
function handleCurrentChange(pageNum) {
searchForm.pageNum = pageNum;
reloadTableData()
}
//
function tableHandleCurrentChange(row) {
currentRow.value = row;
}
//
function handleSelectionChange(row) {
multipleSelection.value = row
}
</script>
<style scoped></style>

@ -46,8 +46,11 @@ const colors = [
{ color: '#67C23A', percentage: 100 }, { color: '#67C23A', percentage: 100 },
] ]
onMounted(() => { onMounted(() => {
const token = localStorage.getItem('token');
if (token == null || token == "") {
localStorage.setItem('token', "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJNYW5ubyI6ImFkbWluIiwidXNlclVuaXRDbGFzcyI6IjAiLCJ1c2VyU3ViQ29tTm8iOiIwIiwidXNlclN0YW5vIjoiMCIsIm1hbm5vIjoiYWRtaW4iLCJtYW4iOiLnrqHnkIblkZgiLCJNYW4iOiLnrqHnkIblkZgiLCJleHAiOjE3MjQwMzkyNzksIk1hbmlkIjoiYWRtaW4ifQ.dA9h_rfGnKKsAXi1-4Qg8H950yBjt3XBRxAVYdI2Ct8");
}
// //
getTableData(); getTableData();
}); });
@ -88,7 +91,7 @@ function getTableData() {
} else { } else {
content.value = jisuan + "分钟后动态口令失效"; content.value = jisuan + "分钟后动态口令失效";
let percent = 5; let percent = 5;
percentage.value = Math.floor(100 - (10 * 60 - second) * (100 / (10 * 60))); percentage.value = Math.floor(100 - (60 * 60 - second) * (100 / (60 * 60)));
} }
console.log("倒计时=" + percentage.value); console.log("倒计时=" + percentage.value);
}, 5 * 1000); }, 5 * 1000);
@ -97,7 +100,7 @@ function getTableData() {
} else { } else {
content.value = jisuan + "分钟后动态口令失效"; content.value = jisuan + "分钟后动态口令失效";
let percent = 5; let percent = 5;
percentage.value = Math.floor(100 - (10 * 60 - second) * (100 / (10 * 60))); percentage.value = Math.floor(100 - (60 * 60 - second) * (100 / (60 * 60)));
//1 //1
timer.value = setInterval(function () { timer.value = setInterval(function () {
// //
@ -113,7 +116,7 @@ function getTableData() {
} else { } else {
content.value = jisuan + "分钟后动态口令失效"; content.value = jisuan + "分钟后动态口令失效";
let percent = 5; let percent = 5;
percentage.value = Math.floor(100 - (10 * 60 - second) * (100 / (10 * 60))); percentage.value = Math.floor(100 - (60 * 60 - second) * (100 / (60 * 60)));
} }
console.log("倒计时=" + percentage.value); console.log("倒计时=" + percentage.value);
}, 5 * 1000); }, 5 * 1000);
@ -155,7 +158,7 @@ function reload() {
} else { } else {
content.value = jisuan + "分钟后动态口令失效"; content.value = jisuan + "分钟后动态口令失效";
let percent = 5; let percent = 5;
percentage.value = Math.floor(100 - (10 * 60 - second) * (100 / (10 * 60))); percentage.value = Math.floor(100 - (60 * 60 - second) * (100 / (60 * 60)));
} }
console.log("倒计时=" + percentage.value); console.log("倒计时=" + percentage.value);
}, 5 * 1000); }, 5 * 1000);
@ -164,7 +167,7 @@ function reload() {
} else { } else {
content.value = jisuan + "分钟后动态口令失效"; content.value = jisuan + "分钟后动态口令失效";
let percent = 5; let percent = 5;
percentage.value = Math.floor(100 - (10 * 60 - second) * (100 / (10 * 60))); percentage.value = Math.floor(100 - (60 * 60 - second) * (100 / (60 * 60)));
//1 //1
timer.value = setInterval(function () { timer.value = setInterval(function () {
// //
@ -180,7 +183,7 @@ function reload() {
} else { } else {
content.value = jisuan + "分钟后动态口令失效"; content.value = jisuan + "分钟后动态口令失效";
let percent = 5; let percent = 5;
percentage.value = Math.floor(100 - (10 * 60 - second) * (100 / (10 * 60))); percentage.value = Math.floor(100 - (60 * 60 - second) * (100 / (60 * 60)));
} }
console.log("倒计时=" + percentage.value); console.log("倒计时=" + percentage.value);
}, 5 * 1000); }, 5 * 1000);

@ -9,7 +9,7 @@
<el-col :span="19" :offset="1"> <el-col :span="19" :offset="1">
<el-form-item label="口令" :label-width="formLabelWidth" prop="loginPwd" clearable> <el-form-item label="口令" :label-width="formLabelWidth" prop="loginPwd" clearable>
<el-input type="password" v-model="formData.loginPwd" autocomplete="off" show-password maxlength="12"></el-input> <el-input type="password" v-model="formData.loginPwd" autocomplete="off" maxlength="12"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>

@ -40,7 +40,7 @@
<el-table-column :resizable="false" fixed type="selection" width="50" align="center"></el-table-column> <el-table-column :resizable="false" fixed type="selection" width="50" align="center"></el-table-column>
<el-table-column :resizable="false" fixed align="center" type="index" width="80" label="序号" /> <el-table-column :resizable="false" fixed align="center" type="index" width="80" label="序号" />
<el-table-column :resizable="false" align="center" prop="loginName" label="用户名" /> <el-table-column :resizable="false" align="center" prop="loginName" label="用户名" />
<el-table-column :resizable="false" align="center" prop="loginPwd" label="口令" /> <el-table-column :formatter="tableFormat" :resizable="false" align="center" prop="loginPwd" label="口令" />
<el-table-column :resizable="false" align="center" prop="userName" label="人员名称" /> <el-table-column :resizable="false" align="center" prop="userName" label="人员名称" />
</el-table> </el-table>
@ -416,6 +416,15 @@ function del() {
} }
function tableFormat(row, column) {
// DT YYYY-mm-dd HH:mm:ss
if (column.property == "loginPwd") {
return "**********";
}
}
// //
function handleSizeChange(pageSize) { function handleSizeChange(pageSize) {

Loading…
Cancel
Save