效果图
需求：改变货架编号，显示出对应的监控层数。 并且初次渲染的时候，也要展示货架编号的对应监控层列表。
源代码
代码语言：javascript复制<template>
<Dialog
:title="$t('lang.camera')"
width="800px"
:visible="visible"
:btnName="$t('lang.close')"
@handleOk="handleOk"
@handleClose="handleClose"
>
<div
class="title"
v-if="cameraDetailInfo.imgDeviceName && cameraDetailInfo.imgDeviceSn"
>
{{
cameraDetailInfo.imgDeviceName
"("
cameraDetailInfo.imgDeviceSn
")"
}}
</div>
<div class="dialog-content">
<el-table :data="deviceCameras || []">
<el-table-column prop="cameraSn" :label="$t('lang.no')" :min-width="30">
<template slot-scope="scope">
<span>{{ scope.row.cameraSn }}</span>
</template>
</el-table-column>
<el-table-column
prop="shelvesSn"
:label="$t('lang.monitorShielfNo')"
:min-width="110"
>
<template slot-scope="scope">
<el-select
v-model="deviceCameras[scope.$index].shelvesSn"
@change="val => changeShelvesSn(val, scope.$index)"
size="small"
>
<el-option
:placeholder="$t('lang.pleaseSelect')"
v-for="item in shelvesList"
:key="item.shelvesSn"
:label="item.shelvesSn"
:value="item.shelvesSn"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
prop="cameraLevel"
:label="$t('lang.monitorShielfLevel')"
:min-width="110"
>
<template slot-scope="scope">
<el-select
v-model="deviceCameras[scope.$index].cameraLevel"
size="small"
>
<el-option
:placeholder="$t('lang.pleaseSelect')"
v-for="item in deviceCameras[scope.$index].levelList"
:key="item"
:label="item"
:value="item"
></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
prop="status"
:label="$t('lang.connectionStatus')"
:min-width="50"
>
<template slot-scope="scope">
<span>{{
scope.row.status === 1 ? $t("lang.onLine") : $t("lang.offLine")
}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('lang.operation')" :min-width="50">
<template slot-scope="scope">
<div class="icon-box">
<el-popconfirm
hide-icon
placement="left"
:title="$t('lang.confirmRefreshShelf')"
:ref="`popover-${scope.$index}`"
popper-class="my-popper"
class="popper-style"
@confirm="
refreshCamera(
scope.row.cameraSn,
cameraDetailInfo.imgDeviceSn,
scope.row.cameraLevel,
scope.row.shelvesSn
)
"
>
<div class="delete-icon" slot="reference">
<Icon
link="icon-gengxin2"
:allowProp="
(deviceCameras[scope.$index].shelvesSn !==
cameraDetailInfo.deviceCameras[scope.$index]
.shelvesSn ||
deviceCameras[scope.$index].cameraLevel !==
cameraDetailInfo.deviceCameras[scope.$index].cameraLevel
? true
: false)
"
></Icon>
</div>
</el-popconfirm>
</div>
<div class="icon-box" v-show="scope.row.status === 0">
<el-popconfirm
hide-icon
:title="$t('lang.confirmDelete')"
:ref="`popover-${scope.$index}`"
popper-class="delete-popper"
class="popper-style"
@confirm="
deleteCamera(scope.row.cameraSn, cameraDetailInfo.imgDeviceSn,scope.$index)
"
>
<div class="delete-icon" slot="reference">
<Icon link="icon-shanchu-copy" :allowProp="true"></Icon>
</div>
</el-popconfirm>
</div>
</template>
</el-table-column>
</el-table>
</div>
</Dialog>
</template>script>
import { get } from "http";
import { runInThisContext } from "vm";
import Vue from "vue";
export default {
props: {
visible: Boolean,
warehouseSn: String,
cameraDetailInfo:{
type: Object,
default:{}
}
},
data() {
return {
shelvesList: [], //货架编号
levelList: [],
deviceCameras: []
};
},
watch: {
cameraDetailInfo: {
handler(newVal, oldVal) {
if (newVal !== null && oldVal !== null) {
this.deviceCameras = JSON.parse(
JSON.stringify(this.cameraDetailInfo.deviceCameras)
)
this.deviceCameras.map(item =>{
item.levelList=[]
this.shelvesList.map(shelve=>{
if(shelve.shelvesSn === item.shelvesSn){
item.levelList = shelve.levels
}
})
})
}
}
}
},
computed: {
// deviceCameras() {
// return this.cameraDetailInfo === null
// ? []
// : this.cameraDetailInfo.deviceCameras;
// },
'deviceCameras[scope.$index].shelvesSn'(){
return this.allowProp = true
}
},
created() {
this.getSelectShelfList();
},
methods: {
//获取下拉列表
getSelectShelfList() {
this.$api.shelf
.shelvesSelectList({ houseSn: this.warehouseSn })
.then(({ code, data }) => {
if (code === 0) {
this.shelvesList = data;
this.shelvesList.unshift({
shelvesSn: "",
levels: ""
});
}
});
},
changeShelvesSn(val, index) {
if (val === "") {
this.deviceCameras[index].cameraLevel = "";
// this.levelList[index] = "";
return;
}
//shelvesList 它是里面包含了shelvesSn 和 levels的数组
//selectedShelf：选中货架编号
let selectedShelf = this.shelvesList.filter(
item => item.shelvesSn === val
);
if (selectedShelf && selectedShelf.length > 0) {
//货架层数组
// this.levelList[index] =
// (selectedShelf.length > 0 && selectedShelf[0].levels) || [];
//默认层
this.deviceCameras[index].levelList = selectedShelf[0].levels
this.deviceCameras[index].cameraLevel = this.levelList[0] > 0 ? 1 : "";
}
},
refreshCamera(cameraSn, imgDeviceSn, cameraLevel, shelvesSn) {
this.$api.device
.bindCamera({
cameraSn: cameraSn,
imgDeviceSn: imgDeviceSn,
level: cameraLevel,
shelvesSn: shelvesSn
})
.then(({ code, msg }) => {
if (code === 0) {
this.$message({
message: this.$t("lang.updateSuccess"),
type: "success"
});
} else {
return false;
}
});
},
deleteCamera(cameraSn, imgDeviceSn,index) {
//cameraSn 摄像头编号
//imageSn 图像采集设备编号
this.$api.device
.deleteCameraDetail({ cameraSn: cameraSn, imageSn: imgDeviceSn })
.then(({ code, msg }) => {
if (code === 0) {
this.$message({
message: msg,
type: "success"
});
this.deviceCameras.splice(index,1)//删除单行，这是最简单的方法，
// 而不是调用父组件的刷新方法，直接用index的方式就好了
}
});
},
//关闭
handleClose() {
this.$parent.handleCloseCameraDialog();
},
//关闭按钮
handleOk() {
this.$parent.handleCloseCameraDialog();
}
}
};
</script>我的难点在于
不知道将对应的层数怎样将它展示出来 这个后端给的结构是这样的 思路：定义一个选中的变量，然后里面从this.shelvesList.filter过滤掉，里面的shelvesSn 就是change里面的val,然后让 v-for里面的this.deviceCameras[index].levelList = selectedShelf[0].levels 意思就是绑定的=选中的层数
