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