362 lines
11 KiB
Vue
362 lines
11 KiB
Vue
<template>
|
|
<div class="fullHeight">
|
|
<div class="searchBox whiteBlock">
|
|
<el-form :inline="true" size="medium" :model="searchForm" ref="searchForm">
|
|
<el-form-item label="桥梁名称">
|
|
<el-input placeholder="请输入" v-model="searchForm.bridgeName"></el-input>
|
|
</el-form-item>
|
|
<el-button type="primary" size="medium" plain @click="getPointList">查询</el-button>
|
|
<el-button type="warning" size="medium" plain @click="refresh">刷新</el-button>
|
|
<el-button type="primary" size="medium" @click="toAdd">新增</el-button>
|
|
</el-form>
|
|
</div>
|
|
<div class="table_wrap whiteBlock">
|
|
<el-table class="tables" :data="tableData">
|
|
<el-table-column prop="bridgeName" label="桥梁名称" align="center"></el-table-column>
|
|
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
|
<el-table-column prop="qrCode" label="二维码" align="center">
|
|
<template slot-scope="{ row }">
|
|
<!-- {{$store.state.FILEURL + row.qrCode}} -->
|
|
<el-image
|
|
style="
|
|
margin-right: 8px;
|
|
width: 80px;
|
|
height: 80px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
"
|
|
fit="cover"
|
|
:src="$store.state.FILEURL + row.qrCode"
|
|
:preview-src-list="[$store.state.FILEURL + row.qrCode]"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column :label="$t('message.personnelPosition.beaconManage.table.operation')" align="center" width="400">
|
|
<template slot-scope="scope">
|
|
<div style="display: flex; justify-content: center">
|
|
<div class="operationText" style="margin-right: 50px">
|
|
<i
|
|
class="el-icon-download"
|
|
style="
|
|
width: 30px;
|
|
height: 30px;
|
|
color: #1684fc;
|
|
margin-top: 15px;
|
|
"
|
|
></i>
|
|
<a class="download" target="_blank" @click="downloadFn(scope.row)">下载二维码</a>
|
|
</div>
|
|
|
|
<!-- <div class="operationText" @click="deilBtn(scope.row)">
|
|
<i
|
|
class="el-icon-tickets"
|
|
style="color: #8dacfa; font-size: 16px; margin-right: 2px"
|
|
></i>
|
|
<span>详情</span>
|
|
</div>
|
|
<div class="operationText" @click="editBtn(scope.row)">
|
|
<img
|
|
src="@/assets/images/icon-edit.png"
|
|
width="15px"
|
|
height="15px"
|
|
/>
|
|
<span>编辑</span>
|
|
</div> -->
|
|
<div @click="toDelete(scope.row)" class="operationText">
|
|
<img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
|
|
<span>删除</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
class="pagerBox"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="pageNo"
|
|
:page-sizes="$store.state.PAGESIZRS"
|
|
:page-size="pageSize"
|
|
layout="total, sizes, prev, pager, next"
|
|
:total="Number(total)"
|
|
background
|
|
></el-pagination>
|
|
</div>
|
|
<!-- 新增桥梁 -->
|
|
<el-dialog :modal-append-to-body="false" :title="cardDialogTitle" :visible.sync="cardDialog" width="667px" @close="close">
|
|
<div class="dialog_content">
|
|
<el-form size="medium" :model="cardForm" ref="cardForm" :rules="cardFormRules" label-width="150px" class="dialogFormBox">
|
|
<el-form-item label="桥梁名称：" prop="bridgeName">
|
|
<el-input
|
|
:disabled="cardDialogTitle == '详情'"
|
|
v-model="cardForm.bridgeName"
|
|
:placeholder="isAdding ? '请输入' : ''"
|
|
></el-input>
|
|
</el-form-item>
|
|
<div class="dialog-footer">
|
|
<el-button class="cancleBtn" @click="closeEvent" icon="el-icon-circle-close" size="medium">取消</el-button>
|
|
<el-button v-if="isAdding != false" type="primary" icon="el-icon-circle-check" @click="addCardFn" size="medium">确认</el-button>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getBridgeListApi, addBridgeProduceApi, deleteBridgeProduceApi, editBridgeProduceApi } from '@/assets/js/api/bridgeManage.js'
|
|
// import QRCode from "qrcodejs2";
|
|
export default {
|
|
data() {
|
|
return {
|
|
searchForm: {
|
|
bridgeName: ''
|
|
},
|
|
cardDialogTitle: '',
|
|
tableData: [],
|
|
total: 0,
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
cardForm: {
|
|
bridgeName: ''
|
|
},
|
|
qrCode: '',
|
|
cardDialog: false,
|
|
projectSn: '',
|
|
cardFormRules: {
|
|
bridgeName: [{ required: true, message: '请输入桥梁名称', trigger: 'blur' }]
|
|
// addr: [
|
|
// { required: true, message: "请选择区域", trigger: "blur" },
|
|
// ],
|
|
},
|
|
frequencyType: ['次', '次/日', '次/周', '次/月', '次/年'],
|
|
mapOperateType: 1,
|
|
accountList: [], //检查人员列表
|
|
options: [30, 50, 100, 200, 300],
|
|
map: null,
|
|
locationList: [],
|
|
formData: [], // 存储动态表单数据
|
|
isAdding: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.projectSn = this.$store.state.projectSn
|
|
this.getPointList()
|
|
},
|
|
methods: {
|
|
// 下载二维码
|
|
downloadFn(item) {
|
|
console.log(item)
|
|
let x = new XMLHttpRequest()
|
|
console.log(this.$store.state.FILEURL + item.qrCode)
|
|
x.open('GET', this.$store.state.FILEURL + item.qrCode, true)
|
|
x.responseType = 'blob'
|
|
x.onload = function(e) {
|
|
let url = window.URL.createObjectURL(x.response)
|
|
let a = document.createElement('a')
|
|
console.log(url)
|
|
a.href = url
|
|
a.download = item.bridgeName
|
|
a.click()
|
|
document.removeChild(a)
|
|
}
|
|
x.send()
|
|
},
|
|
|
|
//查看详情
|
|
deilBtn(obj) {
|
|
this.isAdding = false
|
|
this.cardDialogTitle = '详情'
|
|
this.cardDialog = true
|
|
this.cardForm = JSON.parse(JSON.stringify(obj))
|
|
this.formData.splice(0) // 清空数组
|
|
JSON.parse(obj.template).forEach(item => {
|
|
this.formData.push(item) // 添加新的数据到数组中
|
|
})
|
|
if (this.cardForm.inspectUserIds) {
|
|
this.cardForm.inspectUserIds = this.cardForm.inspectUserIds.split(',')
|
|
}
|
|
if (this.cardForm.noticeUserIds) {
|
|
this.cardForm.noticeUserIds = this.cardForm.noticeUserIds.split(',')
|
|
}
|
|
},
|
|
//关键字查询查询
|
|
select(e) {
|
|
console.log('select', e)
|
|
this.placeSearch.setCity(e.poi.adcode)
|
|
this.placeSearch.search(e.poi.name)
|
|
},
|
|
//查看条数
|
|
handleSizeChange(val) {
|
|
this.pageSize = val
|
|
this.getPointList()
|
|
},
|
|
//查看页
|
|
handleCurrentChange(val) {
|
|
this.pageNo = val
|
|
this.getPointList()
|
|
},
|
|
// 查询
|
|
getPointList() {
|
|
let data = {
|
|
pageNo: this.pageNo,
|
|
pageSize: this.pageSize,
|
|
projectSn: this.projectSn,
|
|
bridgeName: this.searchForm.bridgeName
|
|
}
|
|
getBridgeListApi(data).then(res => {
|
|
console.log('----桥梁列表', res)
|
|
this.tableData = res.result.records
|
|
this.total = res.result.total
|
|
})
|
|
},
|
|
// 刷新
|
|
toRefresh() {
|
|
this.getPointList()
|
|
},
|
|
editBtn(obj) {
|
|
console.log('编辑的信息', obj)
|
|
this.cardDialog = true
|
|
this.isAdding = true
|
|
this.cardForm = JSON.parse(JSON.stringify(obj))
|
|
this.cardDialogTitle = '编辑巡检点'
|
|
this.formData.splice(0) // 清空数组
|
|
JSON.parse(obj.template).forEach(item => {
|
|
this.formData.push(item) // 添加新的数据到数组中
|
|
})
|
|
if (this.cardForm.inspectUserIds) {
|
|
this.cardForm.inspectUserIds = this.cardForm.inspectUserIds.split(',')
|
|
}
|
|
if (this.cardForm.noticeUserIds) {
|
|
this.cardForm.noticeUserIds = this.cardForm.noticeUserIds.split(',')
|
|
}
|
|
},
|
|
// 新增
|
|
toAdd() {
|
|
this.cardDialog = true
|
|
this.isAdding = true
|
|
this.cardDialogTitle = '新建桥梁'
|
|
},
|
|
// 删除
|
|
toDelete(val) {
|
|
console.log('删除', val)
|
|
this.$confirm('此操作将永久删除该巡检点, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
let data = {
|
|
id: val.id
|
|
}
|
|
deleteBridgeProduceApi(data).then(res => {
|
|
if (res.success) {
|
|
this.getPointList()
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
})
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: res.message
|
|
})
|
|
}
|
|
})
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
})
|
|
})
|
|
},
|
|
// 生成二维码
|
|
addCardFn() {
|
|
this.$refs.cardForm.validate(valid => {
|
|
if (valid) {
|
|
// 新增
|
|
let data = {
|
|
projectSn: this.$store.state.projectSn,
|
|
bridgeName: this.cardForm.bridgeName
|
|
}
|
|
if (this.cardDialogTitle == '新建桥梁') {
|
|
addBridgeProduceApi(data).then(res => {
|
|
console.log('新增', res)
|
|
if (res.code == 200) {
|
|
this.$message.success('添加成功！')
|
|
|
|
this.getPointList()
|
|
}
|
|
})
|
|
} else if (this.cardDialogTitle == '编辑巡检点') {
|
|
editBridgeProduceApi(data).then(res => {
|
|
if (res.success) {
|
|
this.$message.success(res.message)
|
|
this.getPointList()
|
|
}
|
|
})
|
|
}
|
|
this.cardDialog = false
|
|
}
|
|
})
|
|
},
|
|
|
|
close() {
|
|
this.cardForm = {}
|
|
this.$nextTick(() => {
|
|
this.$refs.cardForm.clearValidate()
|
|
})
|
|
},
|
|
//新增弹框取消
|
|
closeEvent() {
|
|
this.cardDialog = false
|
|
this.$refs.cardForm.resetFields()
|
|
this.cardForm.startTime = ''
|
|
this.cardForm.endTime = ''
|
|
},
|
|
refresh() {
|
|
this.searchForm = {}
|
|
this.getPointList()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.download {
|
|
text-decoration: none;
|
|
color: blue;
|
|
}
|
|
.smallInput {
|
|
display: inline-block;
|
|
width: 148px !important;
|
|
/deep/.el-input__inner {
|
|
width: 148px;
|
|
}
|
|
/deep/.el-input {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
::v-deep .el-input__inner {
|
|
height: 30px !important;
|
|
}
|
|
|
|
::v-deep .el-range-editor--medium .el-range__icon,
|
|
.el-range-editor--medium .el-range__close-icon {
|
|
line-height: 10px;
|
|
}
|
|
::v-deep .el-select__caret {
|
|
line-height: 36px;
|
|
}
|
|
|
|
.dialogFormBox {
|
|
width: 580px;
|
|
}
|
|
.addrTitle {
|
|
font-size: 16px;
|
|
line-height: 56px;
|
|
}
|
|
</style>
|