ZZJ
2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3
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">
@@ -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,19 +98,19 @@
      checkedData: []
    }
  },
  mounted () {
  mounted() {
    this.renderTable();
    this.getAllPolygons();
  },
  methods: {
    renderTable () {
    renderTable() {
      getAllAreas().then(res => {
        if (res.code == 200) {
          this.groups = res.data
        }
      })
    },
    getAllPolygons () {
    getAllPolygons() {
      findAllPolygons().then(res => {
        if (res.code == 200) {
          this.areaData = res.data.map(item => {
@@ -127,11 +127,10 @@
        }
      });
    },
    edit (row) {
    edit(row) {
      this.isEdit = true;
      this.dialogFormVisible = true;
      this.areaForm = row;
      debugger
      //回显穿梭框
      let _this = this;
      _this.checkedData = [];
@@ -148,7 +147,7 @@
      });
      console.log(this.checkedData)
    },
    createArea () {
    createArea() {
      this.isEdit = false;
      this.dialogFormVisible = true;
      this.areaForm = JSON.parse(JSON.stringify(this.areaForm));
@@ -158,7 +157,7 @@
      this.areaForm.camPolygons = [];
      this.checkedData = [];
    },
    removeItem (id) {
    removeItem(id) {
      this.$confirm('确定删除该项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
@@ -177,34 +176,30 @@
      });
    },
    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 = [];
@@ -238,7 +233,6 @@
      })
      let _this = this;
      console.log(this.areaForm);
      debugger
      saveAreaInfo(this.areaForm).then(res => {
        if (res.code == 200) {
          _this.$notify({
@@ -261,6 +255,10 @@
}
.red {
  color: rgb(255, 94, 0);
}
.areas{
  width: 100%;
  height: calc(100% - 60px);
}
.top-operation {
  padding: 30px 30px 20px;
@@ -334,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;
}
@@ -344,7 +342,7 @@
  .el-checkbox__label {
  font-size: 14px !important;
}
/deep/.el-transfer-panel{
  width:300px;
/deep/.el-transfer-panel {
  width: 300px;
}
</style>