You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
144 lines
4.1 KiB
144 lines
4.1 KiB
<template>
|
|
<div>
|
|
<div class="head-container">
|
|
<div>
|
|
<el-select
|
|
v-model="room"
|
|
class="filter-item"
|
|
style="width:245px"
|
|
>
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
<div>
|
|
<el-button type="primary" class="el-icon-more" size="mini" @click="handleBindParam">绑定参数</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="app-container container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<!--表格渲染-->
|
|
<el-table
|
|
ref="table"
|
|
:data="tableData"
|
|
style="width: 100%;"
|
|
height="calc(100vh - 245px)"
|
|
:cell-class-name="cell"
|
|
@selection-change="selectionChangeHandler"
|
|
@row-click="clickRowHandler"
|
|
>
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
<el-table-column type="index" label="序号" width="55" align="center" />
|
|
<el-table-column prop="showPosition" label="显示位置" align="center" />
|
|
<el-table-column prop="devName" label="设备名称" align="center" />
|
|
<el-table-column prop="paramName" label="参数名称" align="center" />
|
|
<el-table-column prop="bindState" label="绑定状态" align="center">
|
|
<template slot-scope="scope">
|
|
<span class="clear" style="width:76px">{{ scope.row.bindState }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="isShow" label="是否显示" align="center">
|
|
<template slot-scope="scope">
|
|
<span class="clear" style="width:76px">{{ scope.row.isShow }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<!-- 绑定参数对话框 -->
|
|
<el-dialog
|
|
title="绑定参数"
|
|
:visible.sync="dialogVisible"
|
|
>
|
|
<span class="dialog-right-top" />
|
|
<span class="dialog-left-bottom" />
|
|
<div class="setting-dialog">
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import data from './data.json'
|
|
export default {
|
|
data() {
|
|
return {
|
|
room: '选项1',
|
|
options: [
|
|
{ value: '选项1', label: '档案库' },
|
|
{ value: '选项2', label: '阅览室' },
|
|
{ value: '选项3', label: '整理室' },
|
|
{ value: '选项4', label: '走廊' }
|
|
],
|
|
tableData: [],
|
|
selections: [],
|
|
dialogVisible: false
|
|
}
|
|
},
|
|
created() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
getData() {
|
|
this.tableData = data.rows
|
|
},
|
|
selectionChangeHandler(val) {
|
|
this.selections = val
|
|
},
|
|
// 单元格样式
|
|
cell({ row, columnIndex }) {
|
|
if ((row.bindState === '已绑定' && columnIndex === 5) || (row.isShow === '显示' && columnIndex === 6)) {
|
|
return 'have-clear'
|
|
} else if ((row.bindState === '未绑定' && columnIndex === 5) || (row.isShow === '隐藏' && columnIndex === 6)) {
|
|
return 'fail-clear'
|
|
}
|
|
},
|
|
handleBindParam() {
|
|
if (this.selections.length === 1) {
|
|
this.dialogVisible = true
|
|
} else {
|
|
this.$message({
|
|
message: '只可以同时修改一个设备的参数',
|
|
type: 'warning'
|
|
})
|
|
}
|
|
},
|
|
clickRowHandler(row) {
|
|
this.$refs.table.clearSelection()
|
|
this.$refs.table.toggleRowSelection(row) // 单选选中
|
|
},
|
|
handleConfirm() {
|
|
this.dialogVisible = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '~@/assets/styles/lend-manage.scss';
|
|
|
|
.head-container{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.el-button{
|
|
width: 106px;
|
|
height: 32px;
|
|
background-color: #1AAE93;
|
|
border: none;
|
|
}
|
|
}
|
|
::v-deep .el-icon-more:before{
|
|
margin-right: 8px;
|
|
}
|
|
.app-container{
|
|
margin-top: 0;
|
|
min-height: calc(100vh - 242px);
|
|
}
|
|
</style>
|