unRelateBSP.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template>
  2. <el-dialog :title="title" :visible.sync="dialogVisible" width="900px" id="lookUnrelatBSpace">
  3. <el-input :placeholder="`请输入业务空间名称`" v-model="queryString" @keyup.enter.native="queryTableData">
  4. <i slot="suffix" class="el-input__icon el-icon-search" @click="queryTableData"></i>
  5. </el-input>
  6. <div style="margin-top:10px;height:300px;">
  7. <el-table :data="data" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="headerStyle">
  8. <el-table-column prop="RoomLocalName" label="业务空间名称" show-overflow-tooltip min-width="200"></el-table-column>
  9. <el-table-column prop="BuildingName" label="所属建筑" show-overflow-tooltip min-width="100"></el-table-column>
  10. <el-table-column prop="FloorName" label="所属楼层" show-overflow-tooltip min-width="100"></el-table-column>
  11. <el-table-column prop="action" label="操作" min-width="100" v-if="isAction">
  12. <template slot-scope="scope">
  13. <el-button @click="createRelation(scope.row)">关联平面图</el-button>
  14. </template>
  15. </el-table-column>
  16. </el-table>
  17. </div>
  18. </el-dialog>
  19. </template>
  20. <script>
  21. export default {
  22. name: "unRelateBSP",
  23. data() {
  24. return {
  25. title: '未关联平面图的业务空间',
  26. dialogVisible: false,
  27. loading: false,
  28. headerStyle: {
  29. backgroundColor: '#e1e4e5',
  30. color: '#2b2b2b',
  31. lineHeight: '30px'
  32. },
  33. queryString: '',
  34. data: []
  35. };
  36. },
  37. props: {
  38. tableData: {
  39. default: []
  40. }, //列表数据
  41. isAction: false, //是否显示操作按钮
  42. },
  43. methods: {
  44. // 显示弹窗
  45. showDialog() {
  46. this.data = this.tableData;
  47. this.dialogVisible = true;
  48. },
  49. // 搜索
  50. queryTableData() {
  51. var restaurants = this.tableData;
  52. this.data = this.queryString ?
  53. restaurants.filter(this.createFilter(this.queryString)) :
  54. restaurants;
  55. },
  56. createFilter(queryString) {
  57. return restaurant => {
  58. return restaurant.RoomLocalName.indexOf(queryString) > -1;
  59. };
  60. },
  61. // 关联平面图
  62. createRelation(row) {
  63. this.$emit('createFromUnrelated', row);
  64. this.dialogVisible = false;
  65. }
  66. },
  67. };
  68. </script>