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

<template>
  <el-dialog title="提示" :visible.sync="dialogVisible" width="60%" @close="handleClose" id="applyRules">
    <span>对应规则有冲突，请处理</span>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="人工填写过表号功能号" name="first"></el-tab-pane>
      <!-- <el-tab-pane label="多个标识对应同一个信息点" name="second"></el-tab-pane> -->
    </el-tabs>
    <el-table :data="tableData" style="width: 100%;max-height:400px;min-height:200px;" height="calc(100% - 160px)" @expand-change="expandRow"
      ref="expandTable">
      <el-table-column type="expand" class-name="bgf5">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="12">
              <p>{{scope.row.BuildLocalName}}-{{scope.row.FloorLocalName}}</p>
              <p>{{scope.row.RoomLocalName}}</p>
              <p>{{scope.row.SubTypeName}}</p>
            </el-col>
            <el-col :span="6">
              <p>{{scope.row.OldMsg.Description}}</p>
              <p>
                {{scope.row.OldMsg.EquipmentMark}}
                {{scope.row.OldMsg.KeyEquipmentType}}
                {{scope.row.OldMsg.KeyEquipmentParameter}}
              </p>
              <p>{{scope.row.OldMsg.LocationFlag&&scope.row.OldMsg.LocationFlag.toString()}}</p>
            </el-col>
            <el-col :span="6">
              <p>{{scope.row.NewMsg.Description}}</p>
              <p>
                {{scope.row.NewMsg.EquipmentMark}}
                {{scope.row.NewMsg.KeyEquipmentType}}
                {{scope.row.NewMsg.KeyEquipmentParameter}}
              </p>
              <p>{{scope.row.NewMsg.LocationFlag&&scope.row.NewMsg.LocationFlag.toString()}}</p>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="设备实例本地名（本地编码）" class-name="bgf5" align="center">
        <template slot-scope="scope">
          {{scope.row.ObjectLocalName}}({{scope.row.ObjectLocalCode}})
        </template>
      </el-table-column>
      <el-table-column label="信息点" prop="InfomationPoint" align="center"></el-table-column>
      <el-table-column label="原值" prop="Old" align="center">
        <template slot-scope="scope">
          <el-radio v-model="scope.row.checked" label="Old">{{scope.row.Old}}</el-radio>
        </template>
      </el-table-column>
      <el-table-column label="新值" prop="New" align="center">
        <template slot-scope="scope">
          <el-radio v-model="scope.row.checked" label="New">{{scope.row.New}}</el-radio>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <span style="font-size:12px;color:red;" v-show="finished">请处理所有冲突</span>
      <el-button size="small" @click="handleClose">取消</el-button>
      <el-button size="small" type="primary" @click="userSelected">使用选择的表号功能号</el-button>
    </span>
  </el-dialog>
</template>
<script>

import {
  dynamicPromptobjs, //提示冲突
  dynamicClashConfirm, //冲突选择确认
  dynamicQueryPoint, //查点位
  dynamicExecute, //执行规则
} from "@/api/scan/request";
import Vue from 'vue'
export default {
  data() {
    return {
      dialogVisible: false, //弹窗显示与隐藏
      tableData: [],
      activeName: "first", //当前所在tab页
      finished: false, //未处理所有冲突提示文字
      force: false, //请求冲突-默认false
    };
  },
  methods: {
    showDialog(force) {
      this.force = force
      if (this.tableData.length) {
        this.dialogVisible = true;
      } else {
        this.rulesConfirm()
      }
    },
    handleClick() { },
    handleClose() {
      this.dialogVisible = false;
      this.$emit('cancel')
    },
    //检查是否处理完所有冲突
    userSelected() {
      let flag = true;
      this.tableData.map(t => {
        if (!t.checked) {
          flag = false;
        }
      })
      this.finished = !flag;
      flag && this.confirmClash()
    },
    //查询是否有冲突
    getPromptobjs() {
      let param = {
        Force: this.force
      }
      dynamicPromptobjs(param, res => {
        this.tableData = res.Content.map((item) => {
          item.OldMsg = {}
          item.NewMsg = {}
          return item
        });
      })
    },
    //展开行
    expandRow(row) {
      let index = this.tableData.indexOf(row);
      if (row.OldMsg.TypeCode || row.NewMsg.TypeCode) return;
      let param1 = {
        Filters: `MeterFuncid='${row.Old}'`,
        PageNumber: 1,
        PageSize: 50
      }
      let param2 = {
        Filters: `MeterFuncid='${row.New}'`,
        PageNumber: 1,
        PageSize: 50
      }
      dynamicQueryPoint(param1, res => {
        row.OldMsg = res.Content[0]
        this.tableData[index] = row
      })
      dynamicQueryPoint(param2, res => {
        row.NewMsg = res.Content[0]
        this.tableData[index] = row
      })
    },
    //确认冲突
    confirmClash() {
      // let selectedRows = this.tableData.filter(item => {
      //   return item.checked == 'Old'
      // })
      let selectedRows = this.tableData;
      let param = [];
      selectedRows.map(t => {
        let tempObj = {
          Objs: [t],
          Points: [t]
        }
        param.push(tempObj)
      })
      dynamicClashConfirm(param, res => {
        this.rulesConfirm();
      })
    },
    //执行规则
    rulesConfirm() {
      let param = {
        Force: this.force
      }
      dynamicExecute(param, res => {
        this.$message.success('执行成功');
        this.dialogVisible = false;
        this.tableData = []
        let missionID = res.Content[0].Id
        this.$emit('refresh', missionID)
      })
    }
  },
  mounted() { },
  created() {
    this.getPromptobjs()
  }
};
</script>
<style lang="scss" scoped>
#applyRules {
  /deep/ td.bgf5 {
    background-color: #f5f7fa;
  }
  td p {
    text-align: center;
  }
}
</style>