treee, 修复tab切换时树的选中状态.添加区域

zhangzengfei

2021-02-04 0175cda6150656bc74b34c6f6c71edd1e1fc653c

 src/pages/areaManage/index/App.vue

@@ -1,12 +1,12 @@
<template>
  <div>
  <div class="areas">
    <div class="top-operation">
      <el-button type="primary" size="small" @click="createArea">新增区域</el-button>
    </div>
    <el-table :data="groups" border>
    <el-table :data="groups" border height="calc(100% - 100px)">
      <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
      <el-table-column prop="name" label="区域名称" align="center"></el-table-column>
      <el-table-column prop="id" label="区域ID" align="center"></el-table-column>
      <el-table-column prop="name" label="区域名称" align="center" sortable></el-table-column>
      <el-table-column prop="id" label="区域ID" align="center" sortable></el-table-column>
      <el-table-column prop="desc" label="描述" align="center"></el-table-column>
      <el-table-column width="100" label="操作" align="center">
        <template slot-scope="scope">
@@ -33,7 +33,7 @@
          </el-form-item>
        </div>
        <div class="checklist">
          <el-form-item>
          <el-form-item style="margin-right:0">
            <!-- <el-transfer v-model="checkedData" :props="{key:'model',label:'label'}" :titles="['全部区域', '选中区域']" :button-texts="['左移','右移']" filterable @change="handleChange" :data="areaData"></el-transfer> -->
            <el-transfer
              v-model="checkedData"
@@ -58,7 +58,7 @@
import { guid } from '@/scripts/util.js'
import { findAllPolygons, getAllAreas, saveAreaInfo, delArea } from '@/api/camera'
export default {
  data () {
  data() {
    return {
      isEdit: false,
      groups: [],
@@ -98,20 +98,19 @@
      checkedData: []
    }
  },
  mounted () {
  mounted() {
    this.renderTable();
    this.getAllPolygons();
  },
  methods: {
    renderTable () {
    renderTable() {
      getAllAreas().then(res => {
        if (res.code == 200) {
          debugger
          this.groups = res.data
        }
      })
    },
    getAllPolygons () {
    getAllPolygons() {
      findAllPolygons().then(res => {
        if (res.code == 200) {
          this.areaData = res.data.map(item => {
@@ -128,16 +127,15 @@
        }
      });
    },
    edit (row) {
    edit(row) {
      this.isEdit = true;
      this.dialogFormVisible = true;
      this.areaForm = row;
      debugger
      //回显穿梭框
      let _this = this;
      _this.checkedData = [];
      row.camPolygons.forEach(camPolygon => {
        camPolygon.pgns.forEach(polygon => {
          debugger
          let symbol = camPolygon.cameraId + '&' + polygon.polygonId
          // let checkedItem = {};
          // checkedItem.cameraId = camPolygon.cameraId;
@@ -149,16 +147,17 @@
      });
      console.log(this.checkedData)
    },
    createArea () {
    createArea() {
      this.isEdit = false;
      this.dialogFormVisible = true;
      this.areaForm = JSON.parse(JSON.stringify(this.areaForm));
      this.areaForm.name = '';
      this.areaForm.id = '';
      this.areaForm.desc = '';
      this.areaForm.camPolygons = [];
      this.checkedData = [];
    },
    removeItem (id) {
    removeItem(id) {
      this.$confirm('确定删除该项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
@@ -177,38 +176,33 @@

      });
    },
    getIdCode () {
    getIdCode() {
      this.areaForm.id = guid();
    },
    handleChange (value, direction, movedKeys) {
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);

    },
    save () {
      // this.checkedData.forEach(item=>{
      //   let node = JSON.parse(item);
      //   this.camPolygon.cameraId = node.cameraId;
      //   this.camPolygon.cameraName = node.cameraName;
      //   this.pgn.polygonId = node.polygonId;
      //   this.pgn.polygonName = node.polygonName;
      //   this.camPolygon.pgns.push(this.pgn);
      //   this.areaForm.camPolygons.push(this.camPolygon);
      //   let _this = this;
      //   saveAreaInfo(this.areaForm).then(res=>{
      //     if(res.code==200){
      //       _this.$notify({
      //         type:'success',
      //         message:'保存成功!'
      //       });
      //       _this.dialogFormVisible = false;
      //       _this.getAllAreas();
      //     }
      //   })
      // });
    save() {
      if (this.areaForm.id === "") {
        this.$notify({
          type: 'error',
          message: '区域ID不能为空'
        });

        return;
      }
      let sameOne = this.groups.findIndex(item => item.id == this.areaForm.id);
      if(sameOne>=0){
        this.$notify({
          type: 'error',
          message: '区域ID不能重复'
        });
        return;
      }
      let tempArr = [];
      let tempIdArr = [];
      this.areaForm.camPolygons = [];
      debugger
      this.checkedData.forEach(item => {
        let tempCameraItem = { pgns: [] };
        let cameraId = item.split('&')[0];
@@ -239,7 +233,6 @@
      })
      let _this = this;
      console.log(this.areaForm);
      debugger
      saveAreaInfo(this.areaForm).then(res => {
        if (res.code == 200) {
          _this.$notify({
@@ -262,6 +255,10 @@
}
.red {
  color: rgb(255, 94, 0);
}
.areas{
  width: 100%;
  height: calc(100% - 60px);
}
.top-operation {
  padding: 30px 30px 20px;
@@ -289,7 +286,6 @@
}
.el-form-item {
  display: flex;
  margin-right: 40px;
}
.el-form-item label {
  font-weight: bold;
@@ -324,10 +320,10 @@
  border-color: #9eb4f0 !important;
}
/deep/.el-dialog {
  min-width: 764px;
  min-width: 940px;
}
/deep/.el-textarea__inner {
  width: 566px;
  width: 763px;
  height: 60px;
}
/deep/.el-transfer-panel__item.el-checkbox .el-checkbox__label {
@@ -336,7 +332,7 @@
/deep/.el-transfer-panel__item.el-checkbox .el-checkbox__label {
  overflow: visible;
}
/deep/.el-transfer-panel__item.el-checkbox .el-checkbox__label span{
/deep/.el-transfer-panel__item.el-checkbox .el-checkbox__label span {
  font-size: 12px !important;
  padding-right: 20px;
}
@@ -346,4 +342,7 @@
  .el-checkbox__label {
  font-size: 14px !important;
}
/deep/.el-transfer-panel {
  width: 300px;
}
</style>