yxk-storeroom-system/src/views/storeManage/warehouse3DConfig/index.vue

<template>
  <div>
    <div class="head-container">
      <div>
        <el-select
          v-model="room"
          class="filter-item"
          style="width:245px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div>
        <el-button type="primary" class="el-icon-more" size="mini" @click="handleBindParam">绑定参数</el-button>
      </div>
    </div>
    <div class="app-container container-wrap">
      <span class="right-top-line" />
      <span class="left-bottom-line" />
      <!--表格渲染-->
      <el-table
        ref="table"
        :data="tableData"
        style="width: 100%;"
        height="calc(100vh - 245px)"
        :cell-class-name="cell"
        @selection-change="selectionChangeHandler"
        @row-click="clickRowHandler"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column prop="showPosition" label="显示位置" align="center" />
        <el-table-column prop="devName" label="设备名称" align="center" />
        <el-table-column prop="paramName" label="参数名称" align="center" />
        <el-table-column prop="bindState" label="绑定状态" align="center">
          <template slot-scope="scope">
            <span class="clear" style="width:76px">{{ scope.row.bindState }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isShow" label="是否显示" align="center">
          <template slot-scope="scope">
            <span class="clear" style="width:76px">{{ scope.row.isShow }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 绑定参数对话框 -->
    <el-dialog
      title="绑定参数"
      :visible.sync="dialogVisible"
    >
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import data from './data.json'
export default {
  data() {
    return {
      room: '选项1',
      options: [
        { value: '选项1', label: '档案库' },
        { value: '选项2', label: '阅览室' },
        { value: '选项3', label: '整理室' },
        { value: '选项4', label: '走廊' }
      ],
      tableData: [],
      selections: [],
      dialogVisible: false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.tableData = data.rows
    },
    selectionChangeHandler(val) {
      this.selections = val
    },
    // 单元格样式
    cell({ row, columnIndex }) {
      if ((row.bindState === '已绑定' && columnIndex === 5) || (row.isShow === '显示' && columnIndex === 6)) {
        return 'have-clear'
      } else if ((row.bindState === '未绑定' && columnIndex === 5) || (row.isShow === '隐藏' && columnIndex === 6)) {
        return 'fail-clear'
      }
    },
    handleBindParam() {
      if (this.selections.length === 1) {
        this.dialogVisible = true
      } else {
        this.$message({
          message: '只可以同时修改一个设备的参数',
          type: 'warning'
        })
      }
    },
    clickRowHandler(row) {
      this.$refs.table.clearSelection()
      this.$refs.table.toggleRowSelection(row) // 单选选中
    },
    handleConfirm() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';

.head-container{
  display: flex;
  justify-content: space-between;
  .el-button{
    width: 106px;
    height: 32px;
    background-color: #1AAE93;
    border: none;
  }
}
::v-deep .el-icon-more:before{
      margin-right: 8px;
    }
.app-container{
  margin-top: 0;
  min-height: calc(100vh - 242px);
}
</style>