el-select二级联动效果-摄像头

<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>