Skip to content

Q
qsh-wc
Commit fbedc037 authored by mahui's avatar mahui
Browse files
Options

init

parent 474f17e8
Hide whitespace changes
Inline Side-by-side
Showing with 252 additions and 245 deletions
web/src/view/qshMonitorData/qshMonitorData.vue
View file @ fbedc037
<template>
<div>
<div class="gva-search-box">
<el-form :inline="true" :model="searchInfo" class="demo-form-inline">
<el-form-item label="原始设备id">
<el-input v-model="searchInfo.rawDeviceId" placeholder="搜索条件" />
</el-form-item>
<el-form-item label="数据类型">
<el-input v-model="searchInfo.typeName" placeholder="搜索条件" />
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
<el-button size="small" icon="refresh" @click="onReset">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button size="small" type="primary" icon="plus" @click="openDialog">新增</el-button>
<el-popover v-model:visible="deleteVisible" placement="top" width="160">
<p>确定要删除吗？</p>
<div style="text-align: right; margin-top: 8px;">
<el-button size="small" type="primary" link @click="deleteVisible = false">取消</el-button>
<el-button size="small" type="primary" @click="onDelete">确定</el-button>
<div>
<div class="gva-search-box">
<el-form :inline="true" :model="searchInfo" class="demo-form-inline">
<el-form-item label="原始设备ID">
<el-input v-model="searchInfo.rawDeviceId" placeholder="搜索条件"/>
</el-form-item>
<el-form-item label="数据类型">
<el-input v-model="searchInfo.typeName" placeholder="搜索条件"/>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
<el-button size="small" icon="refresh" @click="onReset">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="gva-table-box">
<div class="gva-btn-list">
<!--<el-button size="small" type="primary" icon="plus" @click="openDialog">新增</el-button>-->
<el-popover v-model:visible="deleteVisible" placement="top" width="160">
<p>确定要删除吗？</p>
<div style="text-align: right; margin-top: 8px;">
<el-button size="small" type="primary" link @click="deleteVisible = false">取消</el-button>
<el-button size="small" type="primary" @click="onDelete">确定</el-button>
</div>
<template #reference>
<el-button icon="delete" size="small" style="margin-left: 10px;"
:disabled="!multipleSelection.length" @click="deleteVisible = true">删除
</el-button>
</template>
</el-popover>
</div>
<el-table
ref="multipleTable"
style="flex: 1;"
height="100%"
tooltip-effect="dark"
:data="tableData"
row-key="ID"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"/>
<el-table-column align="left" label="原始设备ID" prop="rawDeviceId" min-width="120"/>
<el-table-column align="left" label="公厕ID" prop="toiletId" min-width="120"/>
<el-table-column align="left" label="数据类型" prop="typeName" min-width="120"/>
<el-table-column align="left" label="数据值单位" prop="unit" min-width="120"/>
<el-table-column align="left" label="数据值" prop="value" min-width="120"/>
<el-table-column align="left" label="创建时间" min-width="180">
<template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
</el-table-column>
<el-table-column align="left" label="操作" min-width="120" fixed="right">
<template #default="scope">
<el-button type="primary" link icon="edit" size="small" class="table-button"
@click="updateQshMonitorDataFunc(scope.row)">变更
</el-button>
<el-button type="primary" link icon="delete" size="small" @click="deleteRow(scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="gva-pagination">
<el-pagination
layout="total, sizes, prev, pager, next, jumper"
:current-page="page"
:page-size="pageSize"
:page-sizes="[10, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
<template #reference>
<el-button icon="delete" size="small" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="deleteVisible = true">删除</el-button>
</template>
</el-popover>
</div>
<el-table
ref="multipleTable"
style="width: 100%"
tooltip-effect="dark"
:data="tableData"
row-key="ID"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column align="left" label="日期" width="180">
<template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
</el-table-column>
<el-table-column align="left" label="原始设备id" prop="rawDeviceId" width="120" />
<el-table-column align="left" label="公厕id" prop="toiletId" width="120" />
<el-table-column align="left" label="数据类型" prop="typeName" width="120" />
<el-table-column align="left" label="数据值单位" prop="unit" width="120" />
<el-table-column align="left" label="数据值" prop="value" width="120" />
<el-table-column align="left" label="按钮组">
<template #default="scope">
<el-button type="primary" link icon="edit" size="small" class="table-button" @click="updateQshMonitorDataFunc(scope.row)">变更</el-button>
<el-button type="primary" link icon="delete" size="small" @click="deleteRow(scope.row)">删除</el-button>
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="历史数据">
<el-form :model="formData" label-position="right" label-width="120px">
<el-form-item label="原始设备ID:">
<el-input v-model="formData.rawDeviceId" clearable placeholder="请输入"/>
</el-form-item>
<el-form-item label="公厕ID:">
<el-input v-model="formData.toiletId" clearable placeholder="请输入"/>
</el-form-item>
<el-form-item label="数据类型:">
<el-input v-model="formData.typeName" clearable placeholder="请输入"/>
</el-form-item>
<el-form-item label="数据值单位:">
<el-input v-model="formData.unit" clearable placeholder="请输入"/>
</el-form-item>
<el-form-item label="数据值:">
<el-input v-model="formData.value" clearable placeholder="请输入"/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button size="small" @click="closeDialog">取 消</el-button>
<!--<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>-->
</div>
</template>
</el-table-column>
</el-table>
<div class="gva-pagination">
<el-pagination
layout="total, sizes, prev, pager, next, jumper"
:current-page="page"
:page-size="pageSize"
:page-sizes="[10, 30, 50, 100]"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</el-dialog>
</div>
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
<el-form :model="formData" label-position="right" label-width="80px">
<el-form-item label="原始设备id:">
<el-input v-model="formData.rawDeviceId" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="公厕id:">
<el-input v-model.number="formData.toiletId" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="数据类型:">
<el-input v-model="formData.typeName" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="数据值单位:">
<el-input v-model="formData.unit" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="数据值:">
<el-input v-model="formData.value" clearable placeholder="请输入" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button size="small" @click="closeDialog">取 消</el-button>
<el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'QshMonitorData'
}
export default {
name: 'QshMonitorData'
}
</script>
<script setup>
import {
createQshMonitorData,
deleteQshMonitorData,
deleteQshMonitorDataByIds,
updateQshMonitorData,
findQshMonitorData,
getQshMonitorDataList
} from '@/api/qshMonitorData'
import {
createQshMonitorData,
deleteQshMonitorData,
deleteQshMonitorDataByIds,
updateQshMonitorData,
findQshMonitorData,
getQshMonitorDataList
} from '@/api/qshMonitorData'
// 全量引入格式化工具 请按需保留
import { getDictFunc, formatDate, formatBoolean, filterDict } from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
// 全量引入格式化工具 请按需保留
import {getDictFunc, formatDate, formatBoolean, filterDict} from '@/utils/format'
import {ElMessage, ElMessageBox} from 'element-plus'
import {ref} from 'vue'
// 自动化生成的字典（可能为空）以及字段
const formData = ref({
// 自动化生成的字典（可能为空）以及字段
const formData = ref({
rawDeviceId: '',
toiletId: 0,
toiletId: '',
typeName: '',
unit: '',
value: '',
})
})
// =========== 表格控制部分 ===========
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})
// =========== 表格控制部分 ===========
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})
// 重置
const onReset = () => {
searchInfo.value = {}
}
// 重置
const onReset = () => {
searchInfo.value = {}
}
// 搜索
const onSubmit = () => {
page.value = 1
pageSize.value = 10
getTableData()
}
// 搜索
const onSubmit = () => {
page.value = 1
pageSize.value = 10
getTableData()
}
// 分页
const handleSizeChange = (val) => {
pageSize.value = val
getTableData()
}
// 分页
const handleSizeChange = (val) => {
pageSize.value = val
getTableData()
}
// 修改页面容量
const handleCurrentChange = (val) => {
page.value = val
getTableData()
}
// 修改页面容量
const handleCurrentChange = (val) => {
page.value = val
getTableData()
}
// 查询
const getTableData = async() => {
const table = await getQshMonitorDataList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
if (table.code === 0) {
tableData.value = table.data.list
total.value = table.data.total
page.value = table.data.page
pageSize.value = table.data.pageSize
}
}
// 查询
const getTableData = async () => {
const table = await getQshMonitorDataList({page: page.value, pageSize: pageSize.value, ...searchInfo.value})
if (table.code === 0) {
tableData.value = table.data.list
total.value = table.data.total
page.value = table.data.page
pageSize.value = table.data.pageSize
}
}
getTableData()
getTableData()
// ============== 表格控制部分结束 ===============
// ============== 表格控制部分结束 ===============
// 获取需要的字典 可能为空 按需保留
const setOptions = async () =>{
}
// 获取需要的字典 可能为空 按需保留
const setOptions = async () => {
}
// 获取需要的字典 可能为空 按需保留
setOptions()
// 获取需要的字典 可能为空 按需保留
setOptions()
// 多选数据
const multipleSelection = ref([])
// 多选
const handleSelectionChange = (val) => {
multipleSelection.value = val
}
// 多选数据
const multipleSelection = ref([])
// 多选
const handleSelectionChange = (val) => {
multipleSelection.value = val
}
// 删除行
const deleteRow = (row) => {
ElMessageBox.confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 删除行
const deleteRow = (row) => {
ElMessageBox.confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteQshMonitorDataFunc(row)
})
}
// 批量删除控制标记
const deleteVisible = ref(false)
// 批量删除控制标记
const deleteVisible = ref(false)
// 多选删除
const onDelete = async() => {
const ids = []
if (multipleSelection.value.length === 0) {
ElMessage({
type: 'warning',
message: '请选择要删除的数据'
})
return
}
multipleSelection.value &&
// 多选删除
const onDelete = async () => {
const ids = []
if (multipleSelection.value.length === 0) {
ElMessage({
type: 'warning',
message: '请选择要删除的数据'
})
return
}
multipleSelection.value &&
multipleSelection.value.map(item => {
ids.push(item.ID)
ids.push(item.ID)
})
const res = await deleteQshMonitorDataByIds({ ids })
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功'
})
if (tableData.value.length === ids.length && page.value > 1) {
page.value--
const res = await deleteQshMonitorDataByIds({ids})
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功'
})
if (tableData.value.length === ids.length && page.value > 1) {
page.value--
}
deleteVisible.value = false
getTableData()
}
deleteVisible.value = false
getTableData()
}
}
// 行为控制标记（弹窗内部需要增还是改）
const type = ref('')
// 行为控制标记（弹窗内部需要增还是改）
const type = ref('')
// 更新行
const updateQshMonitorDataFunc = async(row) => {
const res = await findQshMonitorData({ ID: row.ID })
type.value = 'update'
if (res.code === 0) {
formData.value = res.data.reqshMonitorData
dialogFormVisible.value = true
// 更新行
const updateQshMonitorDataFunc = async (row) => {
const res = await findQshMonitorData({ID: row.ID})
type.value = 'update'
if (res.code === 0) {
formData.value = res.data.reqshMonitorData
dialogFormVisible.value = true
}
}
}
// 删除行
const deleteQshMonitorDataFunc = async (row) => {
const res = await deleteQshMonitorData({ ID: row.ID })
if (res.code === 0) {
ElMessage({
// 删除行
const deleteQshMonitorDataFunc = async (row) => {
const res = await deleteQshMonitorData({ID: row.ID})
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功'
})
if (tableData.value.length === 1 && page.value > 1) {
page.value--
page.value--
}
getTableData()
}
getTableData()
}
}
// 弹窗控制标记
const dialogFormVisible = ref(false)
// 弹窗控制标记
const dialogFormVisible = ref(false)
// 打开弹窗
const openDialog = () => {
type.value = 'create'
dialogFormVisible.value = true
}
// 打开弹窗
const openDialog = () => {
type.value = 'create'
dialogFormVisible.value = true
}
// 关闭弹窗
const closeDialog = () => {
dialogFormVisible.value = false
formData.value = {
rawDeviceId: '',
toiletId: 0,
typeName: '',
unit: '',
value: '',
// 关闭弹窗
const closeDialog = () => {
dialogFormVisible.value = false
formData.value = {
rawDeviceId: '',
toiletId: '',
typeName: '',
unit: '',
value: '',
}
}
// 弹窗确定
const enterDialog = async () => {
let res
switch (type.value) {
case 'create':
res = await createQshMonitorData(formData.value)
break
case 'update':
res = await updateQshMonitorData(formData.value)
break
default:
res = await createQshMonitorData(formData.value)
break
}
if (res.code === 0) {
ElMessage({
type: 'success',
message: '创建/更改成功'
})
closeDialog()
getTableData()
}
}
}
// 弹窗确定
const enterDialog = async () => {
let res
switch (type.value) {
case 'create':
res = await createQshMonitorData(formData.value)
break
case 'update':
res = await updateQshMonitorData(formData.value)
break
default:
res = await createQshMonitorData(formData.value)
break
}
if (res.code === 0) {
ElMessage({
type: 'success',
message: '创建/更改成功'
})
closeDialog()
getTableData()
}
}
</script>
<style>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment