Skip to content

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

init

parent fbe383a6
Hide whitespace changes
Inline Side-by-side
Showing with 565 additions and 553 deletions
web/src/view/qshPartol/qshPartol.vue
View file @ 41ad42a9
<template> <template>
<div> <div>
<div class="gva-search-box"> <div class="gva-search-box">
<el-form :inline="true" :model="searchInfo" class="demo-form-inline"> <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
<el-form-item label="工单标题"> <el-form-item label="工单标题">
<el-input v-model="searchInfo.title" placeholder="搜索条件" /> <el-input v-model="searchInfo.title" placeholder="搜索条件"/>
</el-form-item> </el-form-item>
<el-form-item label="巡检类型" prop="type"> <el-form-item label="巡检类型" prop="type">
<el-select v-model="searchInfo.type" clearable placeholder="请选择" @clear="()=>{searchInfo.type=undefined}"> <el-select v-model="searchInfo.type" clearable placeholder="请选择"
<el-option v-for="(item,key) in partol_typeOptions" :key="key" :label="item.label" :value="item.value" /> @clear="()=>{searchInfo.type=undefined}">
</el-select> <el-option v-for="(item,key) in partol_typeOptions" :key="key" :label="item.label"
</el-form-item> :value="item.value"/>
<el-form-item> </el-select>
<el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button> </el-form-item>
<el-button size="small" icon="refresh" @click="onReset">重置</el-button> <el-form-item>
</el-form-item> <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
</el-form> <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
</div> </el-form-item>
<div class="gva-table-box"> </el-form>
<div class="gva-btn-list"> </div>
<el-button size="small" type="primary" icon="plus" @click="openDialog">新增</el-button> <div class="gva-table-box">
<el-popover v-model:visible="deleteVisible" placement="top" width="160"> <div class="gva-btn-list">
<p>确定要删除吗？</p> <el-button size="small" type="primary" icon="plus" @click="openDialog">新增</el-button>
<div style="text-align: right; margin-top: 8px;"> <el-popover v-model:visible="deleteVisible" placement="top" width="160">
<el-button size="small" type="primary" link @click="deleteVisible = false">取消</el-button> <p>确定要删除吗？</p>
<el-button size="small" type="primary" @click="onDelete">确定</el-button> <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="工单标题" prop="title" min-width="180"/>
<el-table-column align="left" label="巡检类型" prop="type" min-width="120">
<template #default="scope">
{{ filterDict(scope.row.type,partol_typeOptions) }}
</template>
</el-table-column>
<el-table-column align="left" label="异常描述" prop="description" min-width="180"/>
<el-table-column align="left" label="巡视人" prop="partolName" min-width="120"/>
<el-table-column align="left" label="巡检公厕" prop="toiletId" 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" fixed="right" label="操作" min-width="120">
<template #default="scope">
<el-button type="primary" link icon="edit" size="small" class="table-button"
@click="updateQshPartolFunc(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> </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> </div>
<el-table <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
ref="multipleTable" <el-form :model="formData" label-position="right" label-width="80px">
style="flex:1" <el-form-item label="巡检内容:">
height="100%" <el-input v-model="formData.content" clearable placeholder="请输入"/>
tooltip-effect="dark" </el-form-item>
:data="tableData" <el-form-item label="异常描述:">
row-key="ID" <el-input v-model="formData.description" clearable placeholder="请输入"/>
@selection-change="handleSelectionChange" </el-form-item>
> <el-form-item label="巡检图片多个逗号分隔:">
<el-table-column type="selection" width="55" /> <el-input v-model="formData.image" clearable placeholder="请输入"/>
<el-table-column align="left" label="日期" width="180"> </el-form-item>
<template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template> <el-form-item label="巡视人:">
</el-table-column> <el-input v-model="formData.partolName" clearable placeholder="请输入"/>
<el-table-column align="left" label="巡检内容" prop="content" width="120" /> </el-form-item>
<el-table-column align="left" label="异常描述" prop="description" width="120" /> <el-form-item label="工单标题:">
<el-table-column align="left" label="巡检图片多个逗号分隔" prop="image" width="120" /> <el-input v-model="formData.title" clearable placeholder="请输入"/>
<el-table-column align="left" label="巡视人" prop="partolName" width="120" /> </el-form-item>
<el-table-column align="left" label="工单标题" prop="title" width="120" /> <el-form-item label="巡检公厕:">
<el-table-column align="left" label="巡检公厕" prop="toiletId" width="120" /> <el-input v-model.number="formData.toiletId" clearable placeholder="请输入"/>
<el-table-column align="left" label="巡检类型" prop="type" width="120"> </el-form-item>
<template #default="scope"> <el-form-item label="巡检类型:">
{{ filterDict(scope.row.type,partol_typeOptions) }} <el-select v-model="formData.type" placeholder="请选择" style="width:100%" clearable>
</template> <el-option v-for="(item,key) in partol_typeOptions" :key="key" :label="item.label"
</el-table-column> :value="item.value"/>
<el-table-column align="left" label="按钮组"> </el-select>
<template #default="scope"> </el-form-item>
<el-button type="primary" link icon="edit" size="small" class="table-button" @click="updateQshPartolFunc(scope.row)">变更</el-button> </el-form>
<el-button type="primary" link icon="delete" size="small" @click="deleteRow(scope.row)">删除</el-button> <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> </template>
</el-table-column> </el-dialog>
</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>
</div> </div>
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
<el-form :model="formData" label-position="right" label-width="80px">
<el-form-item label="巡检内容:">
<el-input v-model="formData.content" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="异常描述:">
<el-input v-model="formData.description" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="巡检图片多个逗号分隔:">
<el-input v-model="formData.image" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="巡视人:">
<el-input v-model="formData.partolName" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="工单标题:">
<el-input v-model="formData.title" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="巡检公厕:">
<el-input v-model.number="formData.toiletId" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="巡检类型:">
<el-select v-model="formData.type" placeholder="请选择" style="width:100%" clearable>
<el-option v-for="(item,key) in partol_typeOptions" :key="key" :label="item.label" :value="item.value" />
</el-select>
</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> </template>
<script> <script>
export default { export default {
name: 'QshPartol' name: 'QshPartol'
} }
</script> </script>
<script setup> <script setup>
import { import {
createQshPartol, createQshPartol,
deleteQshPartol, deleteQshPartol,
deleteQshPartolByIds, deleteQshPartolByIds,
updateQshPartol, updateQshPartol,
findQshPartol, findQshPartol,
getQshPartolList getQshPartolList
} from '@/api/qshPartol' } from '@/api/qshPartol'
// 全量引入格式化工具 请按需保留 // 全量引入格式化工具 请按需保留
import { getDictFunc, formatDate, formatBoolean, filterDict } from '@/utils/format' import {getDictFunc, formatDate, formatBoolean, filterDict} from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
import { ref } from 'vue' import {ref} from 'vue'
// 自动化生成的字典（可能为空）以及字段 // 自动化生成的字典（可能为空）以及字段
const partol_typeOptions = ref([]) const partol_typeOptions = ref([])
const formData = ref({ const formData = ref({
content: '', content: '',
description: '', description: '',
image: '', image: '',
...@@ -140,187 +146,187 @@ const formData = ref({ ...@@ -140,187 +146,187 @@ const formData = ref({
title: '', title: '',
toiletId: 0, toiletId: 0,
type: undefined, type: undefined,
}) })
// =========== 表格控制部分 =========== // =========== 表格控制部分 ===========
const page = ref(1) const page = ref(1)
const total = ref(0) const total = ref(0)
const pageSize = ref(10) const pageSize = ref(10)
const tableData = ref([]) const tableData = ref([])
const searchInfo = ref({}) const searchInfo = ref({})
// 重置 // 重置
const onReset = () => { const onReset = () => {
searchInfo.value = {} searchInfo.value = {}
} }
// 搜索 // 搜索
const onSubmit = () => { const onSubmit = () => {
page.value = 1 page.value = 1
pageSize.value = 10 pageSize.value = 10
getTableData() getTableData()
} }
// 分页 // 分页
const handleSizeChange = (val) => { const handleSizeChange = (val) => {
pageSize.value = val pageSize.value = val
getTableData() getTableData()
} }
// 修改页面容量 // 修改页面容量
const handleCurrentChange = (val) => { const handleCurrentChange = (val) => {
page.value = val page.value = val
getTableData() getTableData()
} }
// 查询 // 查询
const getTableData = async() => { const getTableData = async () => {
const table = await getQshPartolList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value }) const table = await getQshPartolList({page: page.value, pageSize: pageSize.value, ...searchInfo.value})
if (table.code === 0) { if (table.code === 0) {
tableData.value = table.data.list tableData.value = table.data.list
total.value = table.data.total total.value = table.data.total
page.value = table.data.page page.value = table.data.page
pageSize.value = table.data.pageSize pageSize.value = table.data.pageSize
} }
} }
getTableData() getTableData()
// ============== 表格控制部分结束 =============== // ============== 表格控制部分结束 ===============
// 获取需要的字典 可能为空 按需保留 // 获取需要的字典 可能为空 按需保留
const setOptions = async () =>{ const setOptions = async () => {
partol_typeOptions.value = await getDictFunc('partol_type') partol_typeOptions.value = await getDictFunc('partol_type')
} }
// 获取需要的字典 可能为空 按需保留 // 获取需要的字典 可能为空 按需保留
setOptions() setOptions()
// 多选数据 // 多选数据
const multipleSelection = ref([]) const multipleSelection = ref([])
// 多选 // 多选
const handleSelectionChange = (val) => { const handleSelectionChange = (val) => {
multipleSelection.value = val multipleSelection.value = val
} }
// 删除行 // 删除行
const deleteRow = (row) => { const deleteRow = (row) => {
ElMessageBox.confirm('确定要删除吗?', '提示', { ElMessageBox.confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
deleteQshPartolFunc(row) deleteQshPartolFunc(row)
}) })
} }
// 批量删除控制标记 // 批量删除控制标记
const deleteVisible = ref(false) const deleteVisible = ref(false)
// 多选删除 // 多选删除
const onDelete = async() => { const onDelete = async () => {
const ids = [] const ids = []
if (multipleSelection.value.length === 0) { if (multipleSelection.value.length === 0) {
ElMessage({ ElMessage({
type: 'warning', type: 'warning',
message: '请选择要删除的数据' message: '请选择要删除的数据'
}) })
return return
} }
multipleSelection.value && multipleSelection.value &&
multipleSelection.value.map(item => { multipleSelection.value.map(item => {
ids.push(item.ID) ids.push(item.ID)
})
const res = await deleteQshPartolByIds({ ids })
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功'
}) })
if (tableData.value.length === ids.length && page.value > 1) { const res = await deleteQshPartolByIds({ids})
page.value-- 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 updateQshPartolFunc = async(row) => { const updateQshPartolFunc = async (row) => {
const res = await findQshPartol({ ID: row.ID }) const res = await findQshPartol({ID: row.ID})
type.value = 'update' type.value = 'update'
if (res.code === 0) { if (res.code === 0) {
formData.value = res.data.reqshPartol formData.value = res.data.reqshPartol
dialogFormVisible.value = true dialogFormVisible.value = true
}
} }
}
// 删除行 // 删除行
const deleteQshPartolFunc = async (row) => { const deleteQshPartolFunc = async (row) => {
const res = await deleteQshPartol({ ID: row.ID }) const res = await deleteQshPartol({ID: row.ID})
if (res.code === 0) { if (res.code === 0) {
ElMessage({ ElMessage({
type: 'success', type: 'success',
message: '删除成功' message: '删除成功'
}) })
if (tableData.value.length === 1 && page.value > 1) { if (tableData.value.length === 1 && page.value > 1) {
page.value-- page.value--
}
getTableData()
} }
getTableData()
} }
}
// 弹窗控制标记 // 弹窗控制标记
const dialogFormVisible = ref(false) const dialogFormVisible = ref(false)
// 打开弹窗 // 打开弹窗
const openDialog = () => { const openDialog = () => {
type.value = 'create' type.value = 'create'
dialogFormVisible.value = true dialogFormVisible.value = true
} }
// 关闭弹窗 // 关闭弹窗
const closeDialog = () => { const closeDialog = () => {
dialogFormVisible.value = false dialogFormVisible.value = false
formData.value = { formData.value = {
content: '', content: '',
description: '', description: '',
image: '', image: '',
partolName: '', partolName: '',
title: '', title: '',
toiletId: 0, toiletId: 0,
type: undefined, type: undefined,
} }
} }
// 弹窗确定 // 弹窗确定
const enterDialog = async () => { const enterDialog = async () => {
let res let res
switch (type.value) { switch (type.value) {
case 'create': case 'create':
res = await createQshPartol(formData.value) res = await createQshPartol(formData.value)
break break
case 'update': case 'update':
res = await updateQshPartol(formData.value) res = await updateQshPartol(formData.value)
break break
default: default:
res = await createQshPartol(formData.value) res = await createQshPartol(formData.value)
break break
} }
if (res.code === 0) { if (res.code === 0) {
ElMessage({ ElMessage({
type: 'success', type: 'success',
message: '创建/更改成功' message: '创建/更改成功'
}) })
closeDialog() closeDialog()
getTableData() getTableData()
} }
} }
</script> </script>
<style> <style>
......
web/src/view/qshToilet/qshToilet.vue
View file @ 41ad42a9
<template> <template>
<div> <div>
<div class="gva-search-box"> <div class="gva-search-box">
<el-form :inline="true" :model="searchInfo" class="demo-form-inline"> <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
<el-form-item label="点位名称"> <el-form-item label="点位名称">
<el-input v-model="searchInfo.name" placeholder="搜索条件" /> <el-input v-model="searchInfo.name" placeholder="搜索条件"/>
</el-form-item> </el-form-item>
<el-form-item label="公厕类型" prop="type"> <el-form-item label="公厕类型" prop="type">
<el-select v-model="searchInfo.type" clearable placeholder="请选择" @clear="()=>{searchInfo.type=undefined}"> <el-select v-model="searchInfo.type" clearable placeholder="请选择"
<el-option v-for="(item,key) in typeOptions" :key="key" :label="item.label" :value="item.value" /> @clear="()=>{searchInfo.type=undefined}">
</el-select> <el-option v-for="(item,key) in typeOptions" :key="key" :label="item.label"
</el-form-item> :value="item.value"/>
<el-form-item> </el-select>
<el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button> </el-form-item>
<el-button size="small" icon="refresh" @click="onReset">重置</el-button> <el-form-item>
</el-form-item> <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
</el-form> <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
</div> </el-form-item>
<div class="gva-table-box"> </el-form>
<div class="gva-btn-list"> </div>
<el-button size="small" type="primary" icon="plus" @click="openDialog">新增</el-button> <div class="gva-table-box">
<el-popover v-model:visible="deleteVisible" placement="top" width="160"> <div class="gva-btn-list">
<p>确定要删除吗？</p> <el-button size="small" type="primary" icon="plus" @click="openDialog">新增</el-button>
<div style="text-align: right; margin-top: 8px;"> <el-popover v-model:visible="deleteVisible" placement="top" width="160">
<el-button size="small" type="primary" link @click="deleteVisible = false">取消</el-button> <p>确定要删除吗？</p>
<el-button size="small" type="primary" @click="onDelete">确定</el-button> <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="点位名称" prop="name" min-width="180"/>
<el-table-column align="left" label="公厕地址" prop="address" min-width="180"/>
<el-table-column align="left" label="公厕类型" prop="type" min-width="120">
<template #default="scope">
{{ filterDict(scope.row.type,typeOptions) }}
</template>
</el-table-column>
<el-table-column align="left" label="纬度" prop="lat" min-width="120"/>
<el-table-column align="left" label="经度" prop="lng" min-width="120"/>
<el-table-column align="left" label="管理人员" prop="manager" min-width="120"/>
<el-table-column align="left" label="管理员联系电话" prop="managerPhone" min-width="140"/>
<el-table-column align="left" label="监控信息" prop="monitor" 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" fixed="right" label="操作" min-width="120">
<template #default="scope">
<el-button type="primary" link icon="edit" size="small" class="table-button"
@click="updateQshToiletFunc(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> </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> </div>
<el-table <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
ref="multipleTable" <el-form :model="formData" label-position="right" label-width="80px">
style="width: 100%" <el-form-item label="公厕地址:">
tooltip-effect="dark" <el-input v-model="formData.address" clearable placeholder="请输入"/>
:data="tableData" </el-form-item>
row-key="ID" <el-form-item label="点位图片:">
@selection-change="handleSelectionChange" <el-input v-model="formData.image" clearable placeholder="请输入"/>
> </el-form-item>
<el-table-column type="selection" width="55" /> <el-form-item label="纬度:">
<el-table-column align="left" label="日期" width="180"> <el-input v-model="formData.lat" clearable placeholder="请输入"/>
<template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template> </el-form-item>
</el-table-column> <el-form-item label="经度:">
<el-table-column align="left" label="公厕地址" prop="address" width="120" /> <el-input v-model="formData.lng" clearable placeholder="请输入"/>
<el-table-column align="left" label="点位图片" prop="image" width="120" /> </el-form-item>
<el-table-column align="left" label="纬度" prop="lat" width="120" /> <el-form-item label="管理人员:">
<el-table-column align="left" label="经度" prop="lng" width="120" /> <el-input v-model="formData.manager" clearable placeholder="请输入"/>
<el-table-column align="left" label="管理人员" prop="manager" width="120" /> </el-form-item>
<el-table-column align="left" label="管理员联系电话" prop="managerPhone" width="120" /> <el-form-item label="管理员联系电话:">
<el-table-column align="left" label="监控信息" prop="monitor" width="120" /> <el-input v-model="formData.managerPhone" clearable placeholder="请输入"/>
<el-table-column align="left" label="点位名称" prop="name" width="120" /> </el-form-item>
<el-table-column align="left" label="展示图片" prop="showImage" width="120" /> <el-form-item label="监控信息:">
<el-table-column align="left" label="公厕类型" prop="type" width="120"> <el-input v-model="formData.monitor" clearable placeholder="请输入"/>
<template #default="scope"> </el-form-item>
{{ filterDict(scope.row.type,typeOptions) }} <el-form-item label="点位名称:">
</template> <el-input v-model="formData.name" clearable placeholder="请输入"/>
</el-table-column> </el-form-item>
<el-table-column align="left" label="按钮组"> <el-form-item label="展示图片:">
<template #default="scope"> <el-input v-model="formData.showImage" clearable placeholder="请输入"/>
<el-button type="primary" link icon="edit" size="small" class="table-button" @click="updateQshToiletFunc(scope.row)">变更</el-button> </el-form-item>
<el-button type="primary" link icon="delete" size="small" @click="deleteRow(scope.row)">删除</el-button> <el-form-item label="公厕类型:">
<el-select v-model="formData.type" placeholder="请选择" style="width:100%" clearable>
<el-option v-for="(item,key) in typeOptions" :key="key" :label="item.label"
:value="item.value"/>
</el-select>
</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> </template>
</el-table-column> </el-dialog>
</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>
</div> </div>
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
<el-form :model="formData" label-position="right" label-width="80px">
<el-form-item label="公厕地址:">
<el-input v-model="formData.address" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="点位图片:">
<el-input v-model="formData.image" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="纬度:">
<el-input v-model="formData.lat" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="经度:">
<el-input v-model="formData.lng" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="管理人员:">
<el-input v-model="formData.manager" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="管理员联系电话:">
<el-input v-model="formData.managerPhone" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="监控信息:">
<el-input v-model="formData.monitor" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="点位名称:">
<el-input v-model="formData.name" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="展示图片:">
<el-input v-model="formData.showImage" clearable placeholder="请输入" />
</el-form-item>
<el-form-item label="公厕类型:">
<el-select v-model="formData.type" placeholder="请选择" style="width:100%" clearable>
<el-option v-for="(item,key) in typeOptions" :key="key" :label="item.label" :value="item.value" />
</el-select>
</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> </template>
<script> <script>
export default { export default {
name: 'QshToilet' name: 'QshToilet'
} }
</script> </script>
<script setup> <script setup>
import { import {
createQshToilet, createQshToilet,
deleteQshToilet, deleteQshToilet,
deleteQshToiletByIds, deleteQshToiletByIds,
updateQshToilet, updateQshToilet,
findQshToilet, findQshToilet,
getQshToiletList getQshToiletList
} from '@/api/qshToilet' } from '@/api/qshToilet'
// 全量引入格式化工具 请按需保留 // 全量引入格式化工具 请按需保留
import { getDictFunc, formatDate, formatBoolean, filterDict } from '@/utils/format' import {getDictFunc, formatDate, formatBoolean, filterDict} from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
import { ref } from 'vue' import {ref} from 'vue'
// 自动化生成的字典（可能为空）以及字段 // 自动化生成的字典（可能为空）以及字段
const typeOptions = ref([]) const typeOptions = ref([])
const formData = ref({ const formData = ref({
address: '', address: '',
image: '', image: '',
lat: '', lat: '',
...@@ -154,190 +162,190 @@ const formData = ref({ ...@@ -154,190 +162,190 @@ const formData = ref({
name: '', name: '',
showImage: '', showImage: '',
type: undefined, type: undefined,
}) })
// =========== 表格控制部分 =========== // =========== 表格控制部分 ===========
const page = ref(1) const page = ref(1)
const total = ref(0) const total = ref(0)
const pageSize = ref(10) const pageSize = ref(10)
const tableData = ref([]) const tableData = ref([])
const searchInfo = ref({}) const searchInfo = ref({})
// 重置 // 重置
const onReset = () => { const onReset = () => {
searchInfo.value = {} searchInfo.value = {}
} }
// 搜索 // 搜索
const onSubmit = () => { const onSubmit = () => {
page.value = 1 page.value = 1
pageSize.value = 10 pageSize.value = 10
getTableData() getTableData()
} }
// 分页 // 分页
const handleSizeChange = (val) => { const handleSizeChange = (val) => {
pageSize.value = val pageSize.value = val
getTableData() getTableData()
} }
// 修改页面容量 // 修改页面容量
const handleCurrentChange = (val) => { const handleCurrentChange = (val) => {
page.value = val page.value = val
getTableData() getTableData()
} }
// 查询 // 查询
const getTableData = async() => { const getTableData = async () => {
const table = await getQshToiletList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value }) const table = await getQshToiletList({page: page.value, pageSize: pageSize.value, ...searchInfo.value})
if (table.code === 0) { if (table.code === 0) {
tableData.value = table.data.list tableData.value = table.data.list
total.value = table.data.total total.value = table.data.total
page.value = table.data.page page.value = table.data.page
pageSize.value = table.data.pageSize pageSize.value = table.data.pageSize
} }
} }
getTableData() getTableData()
// ============== 表格控制部分结束 =============== // ============== 表格控制部分结束 ===============
// 获取需要的字典 可能为空 按需保留 // 获取需要的字典 可能为空 按需保留
const setOptions = async () =>{ const setOptions = async () => {
typeOptions.value = await getDictFunc('type') typeOptions.value = await getDictFunc('type')
} }
// 获取需要的字典 可能为空 按需保留 // 获取需要的字典 可能为空 按需保留
setOptions() setOptions()
// 多选数据 // 多选数据
const multipleSelection = ref([]) const multipleSelection = ref([])
// 多选 // 多选
const handleSelectionChange = (val) => { const handleSelectionChange = (val) => {
multipleSelection.value = val multipleSelection.value = val
} }
// 删除行 // 删除行
const deleteRow = (row) => { const deleteRow = (row) => {
ElMessageBox.confirm('确定要删除吗?', '提示', { ElMessageBox.confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
deleteQshToiletFunc(row) deleteQshToiletFunc(row)
}) })
} }
// 批量删除控制标记 // 批量删除控制标记
const deleteVisible = ref(false) const deleteVisible = ref(false)
// 多选删除 // 多选删除
const onDelete = async() => { const onDelete = async () => {
const ids = [] const ids = []
if (multipleSelection.value.length === 0) { if (multipleSelection.value.length === 0) {
ElMessage({ ElMessage({
type: 'warning', type: 'warning',
message: '请选择要删除的数据' message: '请选择要删除的数据'
}) })
return return
} }
multipleSelection.value && multipleSelection.value &&
multipleSelection.value.map(item => { multipleSelection.value.map(item => {
ids.push(item.ID) ids.push(item.ID)
})
const res = await deleteQshToiletByIds({ ids })
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功'
}) })
if (tableData.value.length === ids.length && page.value > 1) { const res = await deleteQshToiletByIds({ids})
page.value-- 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 updateQshToiletFunc = async(row) => { const updateQshToiletFunc = async (row) => {
const res = await findQshToilet({ ID: row.ID }) const res = await findQshToilet({ID: row.ID})
type.value = 'update' type.value = 'update'
if (res.code === 0) { if (res.code === 0) {
formData.value = res.data.reqshToilet formData.value = res.data.reqshToilet
dialogFormVisible.value = true dialogFormVisible.value = true
}
} }
}
// 删除行 // 删除行
const deleteQshToiletFunc = async (row) => { const deleteQshToiletFunc = async (row) => {
const res = await deleteQshToilet({ ID: row.ID }) const res = await deleteQshToilet({ID: row.ID})
if (res.code === 0) { if (res.code === 0) {
ElMessage({ ElMessage({
type: 'success', type: 'success',
message: '删除成功' message: '删除成功'
}) })
if (tableData.value.length === 1 && page.value > 1) { if (tableData.value.length === 1 && page.value > 1) {
page.value-- page.value--
}
getTableData()
} }
getTableData()
} }
}
// 弹窗控制标记 // 弹窗控制标记
const dialogFormVisible = ref(false) const dialogFormVisible = ref(false)
// 打开弹窗 // 打开弹窗
const openDialog = () => { const openDialog = () => {
type.value = 'create' type.value = 'create'
dialogFormVisible.value = true dialogFormVisible.value = true
} }
// 关闭弹窗 // 关闭弹窗
const closeDialog = () => { const closeDialog = () => {
dialogFormVisible.value = false dialogFormVisible.value = false
formData.value = { formData.value = {
address: '', address: '',
image: '', image: '',
lat: '', lat: '',
lng: '', lng: '',
manager: '', manager: '',
managerPhone: '', managerPhone: '',
monitor: '', monitor: '',
name: '', name: '',
showImage: '', showImage: '',
type: undefined, type: undefined,
} }
} }
// 弹窗确定 // 弹窗确定
const enterDialog = async () => { const enterDialog = async () => {
let res let res
switch (type.value) { switch (type.value) {
case 'create': case 'create':
res = await createQshToilet(formData.value) res = await createQshToilet(formData.value)
break break
case 'update': case 'update':
res = await updateQshToilet(formData.value) res = await updateQshToilet(formData.value)
break break
default: default:
res = await createQshToilet(formData.value) res = await createQshToilet(formData.value)
break break
} }
if (res.code === 0) { if (res.code === 0) {
ElMessage({ ElMessage({
type: 'success', type: 'success',
message: '创建/更改成功' message: '创建/更改成功'
}) })
closeDialog() closeDialog()
getTableData() getTableData()
} }
} }
</script> </script>
<style> <style>
......
web/src/view/routerHolder.vue
View file @ 41ad42a9
<!-- 此路由可作为父类路由通用路由页面使用 如需自定义父类路由页面 请参考 @/view/superAdmin/index.vue --> <!-- 此路由可作为父类路由通用路由页面使用 如需自定义父类路由页面 请参考 @/view/superAdmin/index.vue -->
<template> <template>
<div> <router-view v-slot="{ Component }">
<router-view v-slot="{ Component }"> <transition mode="out-in" name="el-fade-in-linear">
<transition mode="out-in" name="el-fade-in-linear"> <keep-alive :include="routerStore.keepAliveRouters">
<keep-alive :include="routerStore.keepAliveRouters"> <component :is="Component" />
<component :is="Component" /> </keep-alive>
</keep-alive> </transition>
</transition> </router-view>
</router-view>
</div>
</template> </template>
<script> <script>
......
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