ibms/src/components/point/dynamicdata/historyDialog.vue

<template>
  <el-dialog title="本次对应记录" :visible.sync="dialogVisible" width="70%" @close="handleClose" id="historyAction" custom-class="act-history">
    <span>提示：可使用Contorl+F 搜索关键字</span>
    <div>
      <el-table :data="tableData" style="width: 100%;" :show-header="showheader" height="400px" :cell-style="cellStyle">
        <el-table-column>
          <el-table-column v-for="item in showLeftHeader" :label="item.label" align="right" :key="item.prop">
            <template slot-scope="scope">
              <div v-for="t in scope.row.leftList" :key="t.id">
                <el-tooltip :content="t[item.prop]&&t[item.prop].length?t[item.prop].toString():''" placement="top" :disabled="!(t[item.prop]&&t[item.prop].length)">
                  <div>{{t[item.prop]&&t[item.prop].length?t[item.prop].toString():'--'}}</div>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column>
          <el-table-column v-for="item in showRightHeader" :label="item.label" :key="item.prop">
            <template slot-scope="scope">
              <div v-for="t in scope.row.rightList" :key="t.id">
                <div v-if="item.prop=='BuildLocalName'">
                  <el-tooltip
                    :content="t.BuildLocalName&&t.BuildLocalName!='null'?t.FloorLocalName&&t.FloorLocalName!='null'?t.BuildLocalName+'-'+t.FloorLocalName:t.BuildLocalName:''"
                    placement="top" :disabled="!(t.BuildLocalName&&t.BuildLocalName!='null'?t.FloorLocalName&&t.FloorLocalName!='null'?t.BuildLocalName+'-'+t.FloorLocalName:t.BuildLocalName:'')">
                    <div>
                      {{t.BuildLocalName&&t.BuildLocalName!='null'?t.FloorLocalName&&t.FloorLocalName!='null'?t.BuildLocalName+'-'+t.FloorLocalName:t.BuildLocalName:'--'}}
                    </div>
                  </el-tooltip>
                </div>
                <div v-else-if="item.prop=='RoomLocalName'">
                  <el-tooltip :content="t.RoomLocalName&&t.RoomLocalName!='null'?t.RoomLocalName:''" placement="top"
                    :disabled="!(t.RoomLocalName&&t.RoomLocalName!='null')">
                    <div>{{t.RoomLocalName&&t.RoomLocalName!='null'?t.RoomLocalName:'--'}}</div>
                  </el-tooltip>
                </div>
                <div v-else>
                  <el-tooltip :content="t[item.prop]?t[item.prop].toString():''" placement="top" :disabled="!t[item.prop]">
                    <div>{{t[item.prop]?t[item.prop].toString():'--'}}</div>
                  </el-tooltip>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger" plain>清除对应</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>
<script>
import { dynamicDeleteRelation } from "@/api/scan/request";
export default {
  data() {
    return {
      dialogVisible: false, //弹窗显示与隐藏
      showheader: false,
      tableData: [], //数据list
      showLeftHeader: [
        { label: '数据源', prop: 'Datasource' },
        { label: '位置标签', prop: 'LocationFlag' },
        { label: '设备标识', prop: 'EquipmentMark' }
      ],
      tableHeader: {
        equip: [
          { label: '对象实例名称', prop: 'ObjectLocalName' },
          { label: '对象本地编码', prop: 'ObjectLocalCode' },
          { label: '所在建筑楼层', prop: 'BuildLocalName' },
          { label: '所在业务空间', prop: 'RoomLocalName' },
        ],
        parts: [
          { label: '对象实例名称', prop: 'ObjectLocalName' },
          { label: '对象本地编码', prop: 'ObjectLocalCode' },
          { label: '对象所属设备', prop: 'CascadeEquipLocalName' },
          { label: '所在建筑楼层', prop: 'BuildLocalName' },
          { label: '所在业务空间', prop: 'RoomLocalName' },
        ],
        system: [
          { label: '对象实例名称', prop: 'ObjectLocalName' },
          { label: '对象本地编码', prop: 'ObjectLocalCode' }
        ],
        space:[
          { label: '对象实例名称', prop: "ObjectLocalName" },
          { label: '对象本地编码', prop: "ObjectLocalCode" },
          { label: '所在建筑楼层', prop: "BuildLocalName" },
        ]
      }, //所有类型列表头部
      showRightHeader: [], //实际显示的列表头部
    };
  },
  props: {
    typeName: {
      default: 'equip'
    }
  },
  methods: {
    showDialog(data) {
      this.showRightHeader = this.tableHeader[this.typeName]
      this.tableData = data;
      this.dialogVisible = true;
    },
    handleClose(done) { },
    //清除关系
    handleDelete(i, t) {
      let param = [];
      let object = {
        Objs: t.rightList,
        Points: t.leftList
      };
      param.push(object);
      dynamicDeleteRelation(param, res => {
        if (res.Result == "success") {
          this.$message.success("清除关联成功");
          this.tableData.splice(i, 1);
          this.$emit("delSuc");
        }
      });
    },
    //渲染中间两列颜色
    cellStyle(data) {
      if (data.columnIndex == 2) {
        return 'background-color:#f5f7fa'
      } else if (data.columnIndex == 3) {
        return 'background-color:#f5f7fa;border-left:2px solid #ccc;'
      }
    }
  },
  mounted() { },
  created() { }
};
</script>
<style lang="scss" scoped>
#historyAction {
  /deep/ .act-history.el-dialog {
    max-height: 60%;
    overflow-y: auto;
    overflow-x: hidden;
    td.bgf5 {
      background-color: #f5f7fa;
    }
    td {
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
      div {
        line-height: 34px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .border-l {
      border-left: 2px solid #ccc;
    }
  }
}
</style>