<template>
|
<a-modal
|
class="modelSize1"
|
title="配置传感器"
|
destoryOnClose
|
:visible="visible"
|
@cancel="handleCancel"
|
@ok="handleOk"
|
>
|
<template slot="footer">
|
<div style="float: left;margin-left: 16px"> 已选 <span style="color: red">{{ selectedRowKeys.length }}</span> 个因子</div>
|
<a-button key="cancel" @click="handleCancel">
|
取消
|
</a-button>
|
<a-button key="submit" type="primary" :loading="loading" @click="handleOk">
|
保存
|
</a-button>
|
</template>
|
<div class="standardTable">
|
<a-table :columns="columns"
|
:data-source="dataSource"
|
bordered
|
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: handleRowSelectChange }"
|
@change="handleTableChange"
|
:pagination="pagination">
|
<template
|
v-for="col in [ 'lower', 'upper']"
|
:slot="col"
|
slot-scope="text, record, index"
|
>
|
<div :key="col">
|
<a-input
|
v-if="record.editable"
|
style="margin: -5px 0"
|
:value="text"
|
@change="e => handleChange(e.target.value, record.key, col)"
|
/>
|
<template v-else>
|
{{ text }}
|
</template>
|
</div>
|
</template>
|
<template slot="unitData" slot-scope="text, record, index">
|
<a-select v-if="record.editable" style="width: 100px" v-model="unitId" @change="e=>handleChangeUnit(e,record.key)">
|
<a-select-option :value="key" v-for="(item,key,index) in unitData":key="index">
|
{{item}}
|
</a-select-option>
|
</a-select>
|
<template v-else>
|
{{text}}
|
</template>
|
</template>
|
<template slot="operation" slot-scope="text, record, index">
|
<div class="editable-row-operations">
|
<span v-if="record.editable">
|
<a @click="() => save(record.key)">保存</a>
|
<a-divider type="vertical" />
|
<a-popconfirm title="确认取消?" @confirm="() => cancel(record.key)">
|
<a>取消</a>
|
</a-popconfirm>
|
</span>
|
<span v-else>
|
<a @click="() => edit(record.key)">编辑</a>
|
</span>
|
</div>
|
</template>
|
</a-table>
|
</div>
|
</a-modal>
|
</template>
|
|
<script lang="ts">
|
import { get, post } from "@/util/request";
|
import {
|
Vue,
|
Prop,
|
Component,
|
Emit,
|
Model,
|
Watch
|
} from "vue-property-decorator";
|
|
|
|
|
|
@Component({
|
components: {}
|
})
|
|
export default class DistribRole extends Vue {
|
|
private unitId: any = '1'
|
|
private data:any
|
// private columns:any
|
private editingKey:any
|
private cacheData:any
|
// 设备型号名称
|
private deviceVersionName:any
|
|
// private selectTemp:any[]
|
|
private columns:any[] = [
|
{
|
title: '名称',
|
dataIndex: 'name',
|
width: '16%',
|
scopedSlots: { customRender: 'name' },
|
},
|
{
|
title: '编码',
|
dataIndex: 'code',
|
scopedSlots: { customRender: 'code' },
|
},
|
{
|
title: '下限值',
|
dataIndex: 'lower',
|
scopedSlots: { customRender: 'lower' },
|
},
|
{
|
title: '上限值',
|
dataIndex: 'upper',
|
scopedSlots: { customRender: 'upper',width: '150px' },
|
},
|
{
|
title: '单位',
|
dataIndex: 'default_unit_key',
|
scopedSlots: { customRender: 'unitData' },
|
},
|
{
|
title: '描述',
|
dataIndex: 'desc',
|
width: '12%',
|
scopedSlots: { customRender: 'desc' },
|
},
|
{
|
title: '操作',
|
dataIndex: 'operation',
|
width: '12%',
|
scopedSlots: { customRender: 'operation' },
|
},
|
];
|
|
@Prop({
|
type: Boolean,
|
default: false
|
})
|
private visible!: boolean;
|
|
@Prop({
|
type: Object,
|
default() {
|
return {};
|
}
|
})
|
private record!: any;
|
@Prop({
|
type: Boolean,
|
default: false
|
})
|
private loading!: boolean;
|
|
@Emit('ok')
|
private onOk() {
|
|
}
|
|
private unitData:number[]=[]
|
|
private temp:number[]=[]
|
|
private dataSource: any[] = [];
|
|
private dataSourceTemp: any[] = [];
|
|
private recordTemp:any[] = []
|
|
private handleChangeUnit(e:any,key:any){
|
const newData = [...this.dataSource];
|
const target = newData.filter(item => key === item.key)[0];
|
// target.default_unit_key = e
|
target.defaultUnitKey = e
|
this.dataSource = newData;
|
}
|
|
private handleChange(value:any, key:any, column:any) {
|
const newData = [...this.dataSource];
|
const target = newData.filter(item => key === item.key)[0];
|
if (target) {
|
target[column] = value;
|
this.dataSource = newData;
|
}
|
}
|
|
private edit(key:any) {
|
const newData = [...this.dataSource];
|
const target = newData.filter(item => key === item.key)[0];
|
this.editingKey = key;
|
if (target) {
|
this.unitId = target.defaultUnitKey
|
target.editable = true;
|
this.dataSource = newData;
|
}
|
}
|
private value: any = ''
|
private save(key:any) {
|
const newData = [...this.dataSource];
|
const newCacheData = [...this.cacheData];
|
const target = newData.filter(item => key === item.key)[0];
|
const targetCache = newCacheData.filter(item => key === item.key)[0];
|
this.value = this.unitData[this.unitId]
|
target.default_unit_key = this.value
|
if (target || targetCache) {
|
delete target.editable;
|
this.dataSource = newData;
|
Object.assign(targetCache, target);
|
this.cacheData = newCacheData;
|
}
|
this.editingKey = '';
|
}
|
private cancel(key:any) {
|
const newData = [...this.dataSource];
|
const target = newData.filter(item => key === item.key)[0];
|
|
this.editingKey = '';
|
if (target) {
|
for (let i = 0; i < this.cacheData.length; i++) {
|
if (key === this.cacheData[i].key) {
|
newData[i] = this.cacheData[i]
|
}
|
}
|
delete target.editable;
|
this.dataSource = newData;
|
this.cacheData = this.dataSource.map(item => ({ ...item }));
|
}
|
// this.snesorData()
|
// this.dataSource = this.dataSourceTemp
|
// this.recordChange(this.recordTemp,null)
|
// this.dataSource = this.recordTemp
|
}
|
|
// @Prop({
|
// type: Array,
|
// default: () => []
|
// })
|
private selectedRows!: any[];
|
private selectedRowKeys: any[] = [];
|
private selectedRowKeysMiddle:any[]=[];//用于取消按钮，比对
|
private total: any = null;
|
private roleNames: any[] = [];
|
// private needTotalList: any[] = [];
|
|
private defaultSheet:number=0
|
|
|
get pagination(): any {
|
return {
|
showSizeChanger: false,
|
showQuickJumper: false,
|
// pageSizeOptions:null,//制定每页选择多少条
|
total: this.total ? this.total : 0, //获取总数必须这样写，不然获取pagination会出错
|
pageSize: 6
|
};
|
}
|
|
private created() {
|
// for (let i = 0; i < 100; i++) {
|
// this.data.push({
|
// key: i.toString(),
|
// name: `Edrward ${i}`,
|
// age: 32,
|
// address: `London Park no. ${i}`,
|
// });
|
// }
|
}
|
@Watch('visible')
|
private visibleChange(newValue: any, oldValue: any) {
|
if (newValue) {
|
this.snesorData()
|
this.getUnitData()
|
setTimeout(() => {
|
this.cacheData = this.dataSource.map(item => ({ ...item }));
|
// this.deviceVersionName = newValue.name
|
this.selectedRowKeys=[];
|
// 将父组件拿到的单位数据遍历放入新变量
|
if(this.record.sensors){
|
for (let i = 0; i < this.record.sensors.length; i++) {
|
this.selectedRowKeys.push(this.record.sensors[i].id)
|
for (let j = 0; j < this.dataSource.length; j++) {
|
if(this.record.sensors[i].id === this.dataSource[j].id){
|
this.dataSource[j].upper = (this.record.sensors[i].upper === null? '' : this.record.sensors[i].upper) +''
|
this.dataSource[j].lower = (this.record.sensors[i].lower === null? '' : this.record.sensors[i].lower)+''
|
this.dataSource[j].defaultUnitKey = this.record.sensors[i].unitKey
|
this.dataSource[j].default_unit_key = this.record.sensors[i].unit
|
}
|
}
|
}
|
this.recordTemp = this.dataSource
|
this.cacheData = this.dataSource.map(item => ({ ...item }));
|
}
|
|
this.selectedRowKeysMiddle=this.selectedRowKeys;
|
},500)
|
// this.recordTemp = newValue
|
// 把从父组件拿到的/version/query接口数据存到变量
|
|
|
|
}
|
}
|
|
get recordData() {
|
return this.record
|
}
|
@Watch("record", {
|
immediate: true,
|
deep: true
|
}) //回调，拿到数据赋值
|
private recordChange(newValue: any, oldValue: any): void {
|
|
}
|
|
// 请求传感器数据
|
private snesorData(){
|
get("sensor/getAllSensor", {
|
current:1,
|
size:100,
|
orderType:1
|
})
|
.then(res => {
|
this.dataSource = res.data.data.sensors;
|
this.dataSourceTemp = res.data.data.sensors
|
this.total = res.data.data.totalNumber;
|
});
|
}
|
// 请求字典单位数据
|
private getUnitData(){
|
get("dict/data/query",{
|
type: 'unit'
|
}).then(res=>{
|
this.unitData = res.data.data
|
})
|
}
|
|
//取消，删除按钮
|
private handleCancel() {
|
//取消，选中的角色，要进行清除，还原
|
this.selectedRowKeys=this.selectedRowKeysMiddle
|
this.DistribRoleVisible(false);
|
}
|
DistribRoleVisible(visible: boolean): void {
|
this.$emit("update:visible", visible);
|
}
|
//提交功能
|
private handleOk() {
|
//插入更新数据库
|
if(this.selectedRowKeys.length != 0){
|
//遍历表格数据修改字段
|
// for (let i = 0; i < this.selectedRows.length; i++) {
|
// this.selectedRows[i]
|
// }
|
this.selectedRows = [...this.dataSource]
|
let selectedRowsTemp = []
|
for (let i = 0; i < this.selectedRows.length; i++) {
|
for (let j = 0; j < this.selectedRowKeys.length; j++) {
|
// if(this.selectedRows[i].id !== this.selectedRowKeys[j] && !this.selectedRows[i].defaultUnitKey){
|
// this.selectedRows.splice(this.selectedRows[i],1)
|
// }
|
if(this.selectedRows[i].id == this.selectedRowKeys[j]){
|
selectedRowsTemp.push(this.selectedRows[i])
|
}
|
}
|
// if( !this.selectedRows[i].defaultUnitKey){
|
// this.selectedRows.splice(this.selectedRows[i],1)
|
// }
|
}
|
this.selectedRows = selectedRowsTemp
|
var newSelectedRows = this.selectedRows.map(item=>({
|
sensorId : item.id,
|
upper:item.upper === undefined ? '' : item.upper,
|
lower:item.lower === undefined ? '' : item.lower,
|
unitKey:item.defaultUnitKey,
|
}))
|
console.log(newSelectedRows);
|
//修改数据库
|
post("version/updateSensorUnit",{
|
versionId:this.record.id,
|
sensorUnits:newSelectedRows
|
}).then(res=>{
|
console.log(res);
|
if (res.data.code !== 0) {
|
this.$message.error('请选择单位',2);
|
}else{
|
this.$message.success('保存成功',2)
|
}
|
//保存成功，组件刷新数据
|
this.onOk();
|
this.$emit('updateData')
|
this.DistribRoleVisible(false);
|
}).catch(err=>{
|
console.log(err)
|
})
|
}else{
|
this.$message.warning('请配置传感器')
|
}
|
}
|
|
private cleanSelectedKeys(): void {
|
this.handleRowSelectChange([], []);
|
}
|
|
//切换页码，网络请求
|
private handleTableChange(pagination: any, filters: any, sorter: any): void {
|
}
|
|
private handleRowSelectChange(selectedRowKeys: any, selectedRows: any): void {
|
this.selectedRowKeys = selectedRowKeys;
|
this.selectedRows = selectedRows;
|
}
|
|
private initTotalList(columns: any[]) {
|
const totalList: any[] = [];
|
columns.forEach((column: any) => {
|
if (column.needTotal) {
|
totalList.push({ ...column, total: 0 });
|
}
|
});
|
return totalList;
|
}
|
}
|
</script>
|
|
|
<style lang="less">
|
.standardTable {
|
:global {
|
.ant-table-pagination {
|
margin-top: 24px;
|
}
|
}
|
.tableAlert {
|
margin-bottom: 16px;
|
}
|
}
|
|
.modelSize1{
|
|
.ant-modal{
|
margin-left: 25%;
|
}
|
.ant-modal-content{
|
width: 1100px;
|
}
|
}
|
</style>
|
