379 lines
14 KiB
Vue
379 lines
14 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 顶部静态布局：标题栏 -->
|
||
<div class="page-topbar">
|
||
<div class="topbar-left">
|
||
<h2 class="topbar-title">报到一体机管理</h2>
|
||
<span class="topbar-sub">在册 {{ total }} 台</span>
|
||
</div>
|
||
<div class="topbar-actions">
|
||
<el-button icon="el-icon-download" size="small" @click="handleExport">导出台账</el-button>
|
||
<el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增一体机</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 顶部静态布局：筛选卡片 -->
|
||
<div class="topbar-filter">
|
||
<el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="82px">
|
||
<el-form-item label="设备名称" prop="terminalName">
|
||
<el-input
|
||
v-model="queryParams.terminalName"
|
||
placeholder="请输入设备名称"
|
||
clearable
|
||
style="width: 160px"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="硬件序列号" prop="terminalSn">
|
||
<el-input
|
||
v-model="queryParams.terminalSn"
|
||
placeholder="请输入序列号"
|
||
clearable
|
||
style="width: 160px"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="设备状态" prop="terminalStatus">
|
||
<el-select v-model="queryParams.terminalStatus" placeholder="设备状态" clearable style="width: 130px">
|
||
<el-option label="离线" :value="0" />
|
||
<el-option label="在线" :value="1" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="绑定机构" prop="bindDeptId">
|
||
<el-input
|
||
v-model="queryParams.bindDeptId"
|
||
placeholder="请输入绑定机构"
|
||
clearable
|
||
style="width: 160px"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>-->
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<el-table v-loading="loading" :data="terminalList">
|
||
<el-table-column label="ID" align="center" prop="id" width="80" />
|
||
<el-table-column label="业务ID" align="center" prop="terminalId" min-width="140" show-overflow-tooltip />
|
||
<el-table-column label="设备名称" align="center" prop="terminalName" min-width="140" show-overflow-tooltip />
|
||
<!-- <el-table-column label="绑定机构" align="center" prop="bindDeptId" min-width="120" show-overflow-tooltip />-->
|
||
<el-table-column label="设备状态" align="center" prop="terminalStatus" width="100">
|
||
<template slot-scope="scope">
|
||
<el-tag :type="scope.row.terminalStatus === 1 ? 'success' : 'danger'">
|
||
{{ scope.row.terminalStatus === 1 ? '在线' : '离线' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="报到方式" align="center" prop="supportCheckinType" min-width="150" show-overflow-tooltip />
|
||
<el-table-column label="启用模块" align="center" prop="supportModules" min-width="160" show-overflow-tooltip />
|
||
<el-table-column label="IP地址" align="center" prop="terminalIp" min-width="130" show-overflow-tooltip />
|
||
<el-table-column label="最近心跳" align="center" prop="lastHeartbeat" min-width="150" />
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
v-hasPermi="['device:checkinterminal:edit']"
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-edit"
|
||
@click="handleUpdate(scope.row)"
|
||
>修改</el-button>
|
||
<el-button
|
||
v-hasPermi="['device:checkinterminal:remove']"
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-delete"
|
||
@click="handleDelete(scope.row)"
|
||
>删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="total > 0"
|
||
:total="total"
|
||
:page.sync="queryParams.pageNum"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
|
||
<!-- 添加或修改报到一体机对话框 -->
|
||
<el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="业务ID" prop="terminalId">
|
||
<el-input v-model="form.terminalId" placeholder="终端业务ID" maxlength="64" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="硬件序列号" prop="terminalSn">
|
||
<el-input v-model="form.terminalSn" placeholder="12位字母数字" maxlength="64" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="设备名称" prop="terminalName">
|
||
<el-input v-model="form.terminalName" placeholder="如 基地大厅1号报到机" maxlength="100" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- <el-col :span="12">
|
||
<el-form-item label="绑定机构" prop="bindDeptId">
|
||
<el-input v-model="form.bindDeptId" placeholder="机构/基地ID" maxlength="64" />
|
||
</el-form-item>
|
||
</el-col>-->
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="安装位置" prop="installLocation">
|
||
<el-input v-model="form.installLocation" placeholder="如 1号楼大厅" maxlength="200" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="设备状态" prop="terminalStatus">
|
||
<el-radio-group v-model="form.terminalStatus">
|
||
<el-radio :label="0">离线</el-radio>
|
||
<el-radio :label="1">在线</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="报到方式" prop="supportCheckinType">
|
||
<el-select v-model="form.supportCheckinType" multiple placeholder="可多选" style="width: 100%">
|
||
<el-option v-for="item in checkinTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="启用模块" prop="supportModules">
|
||
<el-select v-model="form.supportModules" multiple placeholder="可多选" style="width: 100%">
|
||
<el-option v-for="item in moduleOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="打印支持" prop="supportPrint">
|
||
<el-switch v-model="form.supportPrint" active-value="Y" inactive-value="N" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="语音播报" prop="supportBroadcast">
|
||
<el-switch v-model="form.supportBroadcast" active-value="Y" inactive-value="N" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="屏幕方向" prop="screenOrientation">
|
||
<el-select v-model="form.screenOrientation" placeholder="屏幕方向" style="width: 100%">
|
||
<el-option label="竖屏" value="PORTRAIT" />
|
||
<el-option label="横屏" value="LANDSCAPE" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="返回首页(秒)" prop="idleReturnSeconds">
|
||
<el-input-number v-model="form.idleReturnSeconds" :min="5" :max="3600" style="width: 100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="联系电话" prop="contactPhone">
|
||
<el-input v-model="form.contactPhone" placeholder="联系电话" maxlength="30" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="设备IP" prop="terminalIp">
|
||
<el-input v-model="form.terminalIp" placeholder="设备IP地址" maxlength="50" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item label="服务端点" prop="apiEndpoint">
|
||
<el-input v-model="form.apiEndpoint" placeholder="人脸/读卡服务端点" maxlength="255" />
|
||
</el-form-item>
|
||
<el-form-item label="机构名称" prop="orgName">
|
||
<el-input v-model="form.orgName" placeholder="顶部机构名称，不填取绑定机构" maxlength="100" />
|
||
</el-form-item>
|
||
<el-form-item label="欢迎语" prop="welcomeTitle">
|
||
<el-input v-model="form.welcomeTitle" placeholder="欢迎语" maxlength="200" />
|
||
</el-form-item>
|
||
<el-form-item label="帮助文案" prop="helpText">
|
||
<el-input v-model="form.helpText" type="textarea" :rows="2" placeholder="使用帮助文案" maxlength="500" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { listCheckinTerminal, getCheckinTerminal, addCheckinTerminal, updateCheckinTerminal, delCheckinTerminal } from '@/api/device/checkinTerminal'
|
||
|
||
export default {
|
||
name: 'CheckinTerminal',
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
showSearch: true,
|
||
total: 0,
|
||
terminalList: [],
|
||
title: '',
|
||
open: false,
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
terminalName: null,
|
||
terminalSn: null,
|
||
terminalStatus: null,
|
||
bindDeptId: null
|
||
},
|
||
form: {},
|
||
checkinTypeOptions: [
|
||
{ label: '身份证刷卡', value: 'ID_CARD' },
|
||
{ label: '人脸识别', value: 'FACE' },
|
||
{ label: '学号输入', value: 'STUDENT_NO' }
|
||
],
|
||
moduleOptions: [
|
||
{ label: '开班报到', value: 'CHECKIN' },
|
||
{ label: '信息查询', value: 'INQUIRY' },
|
||
{ label: '报到数据', value: 'STATS' },
|
||
{ label: '系统设置', value: 'SETTINGS' }
|
||
],
|
||
rules: {
|
||
terminalId: [
|
||
{ required: true, message: '业务ID不能为空', trigger: 'blur' }
|
||
],
|
||
terminalSn: [
|
||
{ required: true, message: '硬件序列号不能为空', trigger: 'blur' }
|
||
],
|
||
terminalName: [
|
||
{ required: true, message: '设备名称不能为空', trigger: 'blur' }
|
||
],
|
||
terminalStatus: [
|
||
{ required: true, message: '设备状态不能为空', trigger: 'change' }
|
||
]
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
getList() {
|
||
this.loading = true
|
||
listCheckinTerminal(this.queryParams).then(response => {
|
||
this.terminalList = response.rows
|
||
this.total = response.total
|
||
this.loading = false
|
||
})
|
||
},
|
||
cancel() {
|
||
this.open = false
|
||
this.reset()
|
||
},
|
||
reset() {
|
||
this.form = {
|
||
id: null,
|
||
terminalId: null,
|
||
terminalSn: null,
|
||
terminalName: null,
|
||
bindDeptId: null,
|
||
installLocation: null,
|
||
terminalStatus: 0,
|
||
supportCheckinType: [],
|
||
supportModules: [],
|
||
supportPrint: 'N',
|
||
supportBroadcast: 'N',
|
||
contactPhone: null,
|
||
welcomeTitle: null,
|
||
orgName: null,
|
||
screenOrientation: 'PORTRAIT',
|
||
idleReturnSeconds: 30,
|
||
helpText: null,
|
||
terminalIp: null,
|
||
apiEndpoint: null
|
||
}
|
||
this.resetForm('form')
|
||
},
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1
|
||
this.getList()
|
||
},
|
||
resetQuery() {
|
||
this.resetForm('queryForm')
|
||
this.handleQuery()
|
||
},
|
||
toArray(val) {
|
||
return val ? String(val).split(',').filter(Boolean) : []
|
||
},
|
||
handleDelete(row) {
|
||
const id = row.id
|
||
this.$modal.confirm('是否确认删除设备名称为"' + row.terminalName + '"的数据项？').then(function() {
|
||
return delCheckinTerminal(id)
|
||
}).then(() => {
|
||
this.getList()
|
||
this.$modal.msgSuccess('删除成功')
|
||
}).catch(() => {})
|
||
},
|
||
handleAdd() {
|
||
this.reset()
|
||
this.open = true
|
||
this.title = '添加报到一体机'
|
||
},
|
||
handleUpdate(row) {
|
||
this.reset()
|
||
getCheckinTerminal(row.id).then(response => {
|
||
const data = response.data
|
||
data.supportCheckinType = this.toArray(data.supportCheckinType)
|
||
data.supportModules = this.toArray(data.supportModules)
|
||
data.terminalStatus = data.terminalStatus === null ? 0 : Number(data.terminalStatus)
|
||
data.idleReturnSeconds = data.idleReturnSeconds === null ? 30 : Number(data.idleReturnSeconds)
|
||
this.form = data
|
||
this.open = true
|
||
this.title = '修改报到一体机'
|
||
})
|
||
},
|
||
submitForm() {
|
||
this.$refs['form'].validate(valid => {
|
||
if (valid) {
|
||
const payload = {
|
||
...this.form,
|
||
supportCheckinType: (this.form.supportCheckinType || []).join(','),
|
||
supportModules: (this.form.supportModules || []).join(',')
|
||
}
|
||
if (this.form.id != null) {
|
||
updateCheckinTerminal(payload).then(() => {
|
||
this.$modal.msgSuccess('修改成功')
|
||
this.open = false
|
||
this.getList()
|
||
})
|
||
} else {
|
||
addCheckinTerminal(payload).then(() => {
|
||
this.$modal.msgSuccess('新增成功')
|
||
this.open = false
|
||
this.getList()
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
handleExport() {
|
||
this.download('device/checkinterminal/export', {
|
||
...this.queryParams
|
||
}, `checkin_terminal_${new Date().getTime()}.xlsx`)
|
||
}
|
||
}
|
||
}
|
||
</script>
|