batchapply.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. /**
  2. @author:fugy
  3. @date:2018.09.29
  4. @info:批量适用于
  5. */
  6. <template>
  7. <el-dialog
  8. title="批量适用于"
  9. :visible.sync="dialogVisible"
  10. width="40%"
  11. :close-on-click-modal="false"
  12. :show-close="false"
  13. center
  14. >
  15. <div class="batch-box">
  16. <div class="top">
  17. <p>您可以勾选适用此报警条目的其他实例,以适用此次编辑</p>
  18. </div>
  19. <div class="table-box">
  20. <el-table
  21. :data="tableData"
  22. tooltip-effect="dark"
  23. style="width: 100%"
  24. border
  25. @selection-change="handleSelectionChange">
  26. <el-table-column
  27. prop="instanceInfo"
  28. label="对象实例"
  29. header-align="center">
  30. </el-table-column>
  31. <el-table-column
  32. type="selection"
  33. width="55">
  34. </el-table-column>
  35. </el-table>
  36. </div>
  37. <div class="btn-box">
  38. <el-button type="primary" @click="save">确定</el-button>
  39. <el-button class="cancel" @click="cancel">取消</el-button>
  40. </div>
  41. </div>
  42. </el-dialog>
  43. </template>
  44. <script>
  45. import api from "./api"; //api;
  46. import utils from "./utils"; //api
  47. export default {
  48. name: "batch-apply",
  49. data() {
  50. return {
  51. dialogVisible: false,
  52. multipleSelection: [], //多选框
  53. tableData: [],
  54. entityDictObj:[], //对象实例的本地字典
  55. }
  56. },
  57. props:["batchApplyFlag", "batchApplyArr", "id", "projectId"],
  58. methods: {
  59. // checkbox选择事件
  60. handleSelectionChange(val) {
  61. this.multipleSelection = val;
  62. },
  63. // 批量数据处理
  64. btachListHandle() {
  65. let applyArr = [];
  66. this.batchApplyArr.forEach((item, index, arr) => {
  67. if(item.id == this.id) {
  68. arr.splice(index, 1);
  69. };
  70. });
  71. // 中转适用对象类实例
  72. this.batchApplyArr.forEach((item, index, arr) => {
  73. applyArr.push({id: item.instanceId})
  74. });
  75. let params = {criterias: applyArr, valid: null}
  76. api.getApplyObjInfo(this.projectId, params).then(resp => {
  77. if(resp.length) {
  78. this.entityDictObj = utils.entityDict(resp);
  79. this.batchApplyArr.forEach((ele, idx) => {
  80. let preName = utils.objPreName(ele.objType);
  81. let name = this.entityDictObj[ele.instanceId].infos[preName + "LocalName"] || this.entityDictObj[ele.instanceId].infos[preName + "Name"];
  82. let id = this.entityDictObj[ele.instanceId].infos[preName + "LocalID"] || this.entityDictObj[ele.instanceId].infos[preName + "ID"];
  83. if(preName == "facility") {
  84. ele.instanceInfo = name + " - " + id + (ele.instanceLocation ? " - "+ele.instanceLocation : "");
  85. } else {
  86. ele.instanceInfo = name + " - " + id;
  87. }
  88. })
  89. // 最后赋值
  90. this.tableData = this.batchApplyArr;
  91. }
  92. })
  93. },
  94. // 保存
  95. save() {
  96. let arr = this.multipleSelection.length ? this.multipleSelection: [];
  97. this.$emit("batch-apply-handle", arr);
  98. this.dialogVisible = false;
  99. },
  100. // 取消
  101. cancel() {
  102. let arr = []
  103. this.$emit("batch-apply-handle", arr);
  104. this.dialogVisible = false;
  105. }
  106. },
  107. watch: {
  108. batchApplyFlag() {
  109. this.dialogVisible = true;
  110. this.btachListHandle();
  111. }
  112. }
  113. }
  114. </script>
  115. <style lang="less" scoped>
  116. .batch-box {
  117. .top {
  118. text-align: center;
  119. }
  120. .table-box{
  121. height: 500px;
  122. overflow-y: auto;
  123. margin-top: 10px;
  124. }
  125. .btn-box {
  126. margin-top: 10px;
  127. text-align: center;
  128. .cancel {
  129. margin-left: 50px;
  130. }
  131. }
  132. }
  133. </style>