ibms/src/components/business_space/newGraphy/unRelateBSP.vue

<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="600px" id="lookUnrelatBSpace">
    <el-input :placeholder="`请输入业务空间名称`" v-model="queryString" @keyup.enter.native="queryTableData">
      <i slot="suffix" class="el-input__icon el-icon-search" @click="queryTableData"></i>
    </el-input>
    <div style="margin-top:10px;height:300px;">
      <el-table :data="data" style="width: 100%" height="100%" v-loading="loading" :header-cell-style="headerStyle">
        <el-table-column prop="RoomLocalName" label="业务空间名称" show-overflow-tooltip min-width="200"></el-table-column>
        <el-table-column prop="action" label="操作" min-width="100" v-if="isAction">
          <template slot-scope="scope">
            <el-button @click="createRelation(scope.row)">关联平面图</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "unRelateBSP",
  data() {
    return {
      title: '未关联平面图的业务空间',
      dialogVisible: false,
      loading: false,
      headerStyle: {
        backgroundColor: '#e1e4e5',
        color: '#2b2b2b',
        lineHeight: '30px'
      },
      queryString: '',
      data: []
    };
  },
  props: {
    tableData: {
      default: []
    }, //列表数据
    isAction: false, //是否显示操作按钮
  },
  methods: {
    // 显示弹窗
    showDialog() {
      this.data = this.tableData;
      this.dialogVisible = true;
    },
    // 搜索
    queryTableData() {
      var restaurants = this.tableData;
      this.data = this.queryString ?
        restaurants.filter(this.createFilter(this.queryString)) :
        restaurants;
    },
    createFilter(queryString) {
      return restaurant => {
        return restaurant.RoomLocalName.indexOf(queryString) > -1;
      };
    },
    // 关联平面图
    createRelation(row) {
      this.$emit('createFromUnrelated', row);
      this.dialogVisible = false;
    }
  },
};
</script>