<template>
|
<TableLayout :permissions="['business:sites:query']">
|
<!-- 搜索表单 -->
|
<el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline>
|
<el-form-item label="车辆编号" prop="code">
|
<el-input v-model="searchForm.code" placeholder="请输入车辆编号" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="所在站点" prop="name">
|
<el-input v-model="searchForm.name" placeholder="请输入名称/编码" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="上架状态" prop="bikeStatuus">
|
<el-select v-model="searchForm.bikeStatuus" placeholder="上架状态" @change="search">
|
<el-option label="下架中" :value="0" />
|
<el-option label="上架中" :value="1" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="电量情况" prop="lowVoltage">
|
<el-select v-model="searchForm.lowVoltage" placeholder="电量情况" @change="search">
|
<el-option label="正常" :value="0" />
|
<el-option label="电量低" :value="1" />
|
</el-select>
|
</el-form-item>
|
<section>
|
<el-button type="primary" @click="search(1)">搜索</el-button>
|
<el-button @click="reset">重置</el-button>
|
</section>
|
</el-form>
|
<!-- 表格和分页 -->
|
<template v-slot:table-wrap>
|
<ul class="toolbar" v-permissions="['business:sites:create']">
|
<li><el-button type="primary" @click="$refs.TramEditRef.open('新增车辆')" icon="el-icon-plus"
|
v-permissions="['business:sites:create']">新建</el-button></li>
|
<li><el-button type="danger" @click="handleDelAll">批量删除</el-button></li>
|
<li v-permissions="['system:user:create']">
|
<ImportButton text="导入" template-name="电车模板.xlsx" template-path="/template/tram_import_tem.xlsx"
|
action="/business/bikes/importExcel" @success="search" />
|
</li>
|
<li><el-button type="primary" :loading="downLoading" @click="handleDownAll" >批量下载二维码</el-button></li>
|
<li><el-button type="primary" @click="handleStatusAll(1)">批量上架</el-button></li>
|
<li><el-button type="danger" @click="handleStatusAll(0)">批量下架</el-button></li>
|
</ul>
|
<el-table @selection-change="handleSelectionChange" v-loading="isWorking.search" :data="tableData.list" stripe
|
border>
|
<el-table-column type="selection" width="55" align="center"></el-table-column>
|
<el-table-column prop="code" label="车辆编码" min-width="100px" align="center"></el-table-column>
|
<el-table-column prop="paramName" label="车辆类型" min-width="100px" align="center"></el-table-column>
|
<el-table-column prop="deviceSn" label="控制器SN" min-width="100px" align="center"></el-table-column>
|
<el-table-column prop="voltage" label="当前电压值" sortable min-width="100px" align="center"></el-table-column>
|
<el-table-column label="电量情况" width="80px" align="center">
|
<template v-slot="{ row }">
|
<span :class="{ red: row.lowVoltage == 1 }">{{ row.lowVoltage == 0 ? '正常' : '低电量' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="上架状态" width="80px" align="center">
|
<template v-slot="{ row }">
|
<span :class="row.bikeStatus !== 1?'red':'green'">{{ row.bikeStatus !== 1 ? '已下架' : '已上架' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="siteId" label="站点编号" min-width="100px" align="center"></el-table-column>
|
<el-table-column prop="siteName" label="站点名称" min-width="100px" align="center"></el-table-column>
|
<el-table-column prop="heartDate" label="最后通讯时间" min-width="100px" align="center"></el-table-column>
|
<el-table-column label="是否在线" width="80px" align="center">
|
<template v-slot="{ row }">
|
<span :class="row.isOnline == 0?'red':'green'" >{{ row.isOnline == 0 ? '离线' : '在线' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column v-if="containPermissions(['business:sites:update', 'business:sites:delete'])" label="操作"
|
min-width="160" align="center" fixed="right">
|
<template slot-scope="{row}">
|
<el-button type="text" @click="handlePri(row)" icon="el-icon-picture-outline-round">查看二维码</el-button>
|
<el-button type="text" @click="$refs.TramEditRef.open('编辑车辆', row)" icon="el-icon-edit"
|
v-permissions="['business:sites:update']">编辑</el-button>
|
<el-button type="text" @click="deleteById(row)" icon="el-icon-delete"
|
v-permissions="['business:sites:delete']">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination">
|
</pagination>
|
</template>
|
<!-- 新建/修改 -->
|
<TramEdit ref="TramEditRef" @success="search" />
|
<el-dialog title="查看二维码" :visible.sync="isShowPri" width="600px">
|
<div style="display: flex;align-items: center;justify-content: center;">
|
<el-image style="width: 500px; height: 500px" :src="imgurl" :preview-src-list="[imgurl]"></el-image>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="isShowPri = false">取 消</el-button>
|
<el-button type="primary" @click="isShowPri = false">确 定</el-button>
|
</span>
|
</el-dialog>
|
<QRcode ref="QRcodeRef" />
|
<!-- <ImportWindow ref="ImportWindowRef" templateName="电车信息模板" /> -->
|
</TableLayout>
|
</template>
|
|
<script>
|
import BaseTable from '@/components/base/BaseTable'
|
import TableLayout from '@/layouts/TableLayout'
|
import Pagination from '@/components/common/Pagination'
|
import TramEdit from './components/TramEdit.vue'
|
import QRcode from './components/QRcode'
|
import ImportButton from '@/components/common/ImportButton'
|
import { tranListPost } from '@/api/business/bikes.js'
|
import { qrcodeBike, qrcodeBikeList, updateBikeStatusBatch,deleteBatchById } from '@/api/business/bikes.js'
|
import { Message } from 'element-ui'
|
export default {
|
name: 'bikes',
|
extends: BaseTable,
|
components: { TableLayout, Pagination, TramEdit, QRcode, ImportButton },
|
data() {
|
return {
|
// 搜索
|
searchForm: {
|
id: '',
|
createDate: '',
|
creator: '',
|
editDate: '',
|
editor: '',
|
isdeleted: '',
|
info: '',
|
name: '',
|
code: '',
|
status: '',
|
lockNum: '',
|
lowVoltage: '',
|
ip: '',
|
type: 1,
|
bikeStatuus: null,
|
clientVersion: ''
|
},
|
imgurl: '',
|
isShowPri: false,
|
downLoading: false,
|
|
selList: []
|
}
|
},
|
created() {
|
this.config({
|
module: '站点信息表',
|
api: '/business/bikes',
|
'field.id': 'id',
|
'field.main': 'id'
|
})
|
this.search()
|
},
|
methods: {
|
handleSelectionChange(val) {
|
this.selList = val
|
console.log(val)
|
|
},
|
handleDelAll() {
|
const { selList } = this
|
if (selList.length == 0) return Message.warning('请先选择要删除的车辆')
|
this.$confirm('您确认要删除选中的车辆吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(() => {
|
deleteBatchById({ ids: selList.map(i => i.id).join() }).then(res => {
|
if (res) {
|
this.search(1)
|
Message.success('删除成功')
|
}
|
})
|
})
|
},
|
handleStatusAll (status) {
|
const { selList } = this
|
if (selList.length == 0) return Message.warning('请先选择处理的车辆')
|
this.$confirm('您确认要处理选中的车辆吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(() => {
|
updateBikeStatusBatch({ bikeStatus: status, ids: selList.map(i => i.id).join() }).then(res => {
|
if (res) {
|
this.search(1)
|
Message.success('操作成功')
|
}
|
})
|
})
|
},
|
handlePri(row) {
|
this.imgurl = null
|
qrcodeBike({ fouce: 0, bikeId: row.id }).then(res => {
|
if (res && res.imgurl) {
|
this.imgurl = res.imgurl
|
this.isShowPri = true
|
}
|
})
|
},
|
handleDownAll() {
|
this.downLoading = true
|
qrcodeBikeList({ fouce: 0 }).then(res => {
|
this.downLoading = false
|
this.$refs.QRcodeRef.list = res
|
this.$refs.QRcodeRef.visible = true
|
}, () => {
|
this.downLoading = false
|
})
|
},
|
search(pageIndex) {
|
this.tableData.pagination.pageIndex = pageIndex || this.tableData.pagination.pageIndex
|
this.isWorking.search = true
|
tranListPost({
|
page: this.tableData.pagination.pageIndex,
|
capacity: this.tableData.pagination.pageSize,
|
model: this.searchForm,
|
sorts: this.tableData.sorts
|
})
|
.then(data => {
|
this.tableData.list = data.records
|
this.tableData.pagination.total = data.total
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking.search = false
|
})
|
},
|
handleSizeChange(pageSize) {
|
this.tableData.pagination.pageSize = pageSize
|
this.search()
|
},
|
// 排序
|
handleSortChange(sortData) {
|
this.tableData.sorts = []
|
if (sortData.order != null) {
|
this.tableData.sorts.push({
|
property: sortData.column.sortBy,
|
direction: sortData.order === 'descending' ? 'DESC' : 'ASC'
|
})
|
}
|
this.handlePageChange()
|
},
|
// 页码变更处理
|
handlePageChange(pageIndex) {
|
this.tableData.pagination.pageIndex = pageIndex || this.tableData.pagination.pageIndex
|
this.isWorking.search = true
|
tranListPost({
|
page: this.tableData.pagination.pageIndex,
|
capacity: this.tableData.pagination.pageSize,
|
model: this.searchForm,
|
sorts: this.tableData.sorts
|
})
|
.then(data => {
|
this.tableData.list = data.records
|
this.tableData.pagination.total = data.total
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking.search = false
|
})
|
},
|
}
|
}
|
</script>
|
