wszhyWx/src/views/manage/deviceSet.vue

<template>
  <div class="deviceStatusSet manage-page">
    <div class="table-title">
      <img src="../../assets/manageImg/deviceSet.png" alt="">设备状态设备
    </div>
    <div class="flex-view scroll">
      <div class="manage-btn" v-for="item, index in topList" :key="index" @click="topChange(item, index)"
        :class="active == index ? 'active' : ''">

        {{ item.deviceTypeName }}
      </div>
    </div>
    <div class="table-view">
      <el-table :data="tableData" :row-class-name="tableRowClassName" height="580" style="width: 100%"
        :tree-props="{ children: 'child' }">
        <el-table-column label="序号" width="120px">
          <template slot-scope="scope">
            <div>{{ scope.$index + 1 }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="设备名称">
        </el-table-column>
        <el-table-column prop="nickName" label="设备别名">
        </el-table-column>
        <el-table-column prop="sort" width="120px" label="排序">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="table-flex">
              <div class="table-operate blue" @click="openModel(scope.row, scope.$index)">
                <img src="../../assets/manageImg/table-edit.png" alt="">编辑
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="提示" top="15vh" :visible.sync="addModel" width="564px" class="vrcode-model manage-model"
      :append-to-body="true">
      <div class="vrcode-model-title">
        编辑
      </div>
      <div class="vrcode-content" v-if="changeData">
        <div class="">
          <div class="manage-input">
            <div class="input-title">设备别名</div>
            <input type="text" v-model="changeData.nickName" placeholder="请输入设备别名">
          </div>
        </div>
        <div class="">
          <div class="manage-input">
            <div class="input-title">排序</div>
            <input type="number" v-model="changeData.sort" placeholder="请输入新排序">
          </div>
        </div>
        <template v-for="item,index in changeData.child" >
          <div class="" >
          <div class="manage-input">
            <div class="input-title">{{ index==0?'子设备名称':`&nbsp;` }}</div>
            <input type="text" v-model="item.nickName" placeholder="请输入设备别名">
          </div>
        </div>
        </template>
       
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="vrcode-btn blue-btn w-100" @click="confirmModel">确定</div>
        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">取消</div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      topList: [],
      active: 0,
      addModel: false,
      changeData: null,
      modelIndex: 0,
    }
  },
  watch: {
    active(newVal, oldVal) {
      this.getData(this.topList[newVal])
    },
  },
  mounted() { this.dataInit() },
  methods: {
    confirmModel() {
      this.loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.api.putControlpermission(this.changeData).then(res => {
        this.loading.close()
        if (res.data.code == 200) {
          this.getData(this.topList[this.active])
          this.$message.success(res.data.msg);
          this.addModel = false
        } else {
          this.$message.error(res.data.msg);
          this.addModel = false
        }
      })
    },
    openModel(item, index) {
      this.changeData = JSON.parse(JSON.stringify(item))
      this.addModel = true
      this.modelIndex = index
    },
    dataInit() {
      var user = JSON.parse(localStorage.getItem('userInfo'))
      this.api.selUserbyid(user.userid).then(res => {
        this.topList = []
        if (res.data.code == 200) {
          res.data.data.devices.forEach((el, index) => {
            if (el.deviceName == 10) {
              this.topList.push(el)
            }
          })
          setTimeout(() => {
            this.getData(this.topList[0])
          }, 0);
        }
      })
    },
    getData(item) {
      // var data={deviceId:item.deviceId}
      this.api.getcontrol_cpermission(item.deviceId).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data
        }
      })
    },
    topChange(item, index) {
      this.active = index

    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row';
      } else if (rowIndex % 2 == 0) {
        return 'success-row';
      }
      return '';
    }
  },

}
</script>
<style lang="scss"></style>