wszhyWx/src/views/manage/mobileControl.vue

<template>
  <div class="videoManage manage-page  deviceSet">

    <div class="flex-view flex-title">
      <div class="table-title">
        <img src="../../assets/manageImg/deviceInfoManage.png" alt="">手机控制模块信息
      </div>
      <!-- <div class="table-title-btn blue" @click="openModel({}, 0)">
        <img src="../../assets/manageImg/add-btn.png" alt="">添加
      </div> -->
    </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="620" style="width: 100%">
        <!-- <el-table-column  label="序号">
          <template slot-scope="scope">
              <div>{{scope.$index+1 }}
              </div>
            </template>
</el-table-column> -->
        <el-table-column prop="id" label="id">
        </el-table-column>
        <el-table-column prop="name" label="规划名称">
        </el-table-column>
        <el-table-column prop="nickName" 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, 1)">
                <img src="../../assets/manageImg/table-edit.png" alt="">编辑
              </div>
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="提示" top="10vh" :visible.sync="addModel" width="564px" class="vrcode-model manage-model"
      :append-to-body="true">
      <div class="vrcode-model-title">
      编辑
      </div>
      <div class="vrcode-content">
        <div class="manage-left">
          <!-- <div class="manage-input">
            <div class="input-title">规划名称</div>
            <input type="text" v-model="nowData.name" :disabled="modelName == '编辑' ? true : false" placeholder="规划名称">
          </div> -->
          <div class="manage-input">
            <div class="input-title">手机控制名称</div>
            <input type="text" v-model="nowData.nickName" placeholder="请输入手机控制名称">
          </div>
        </div>
        <div class="manage-right">
         
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="vrcode-btn blue-btn w-100" @click="confirmBtn">确定</div>
        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">取消</div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      tableData: [],
      topList: [],
      addModel: false,
      nowData: {
        name:"",
        nickName:"",
      },
      deviceId:'',
    }
  },
  watch: {
    active(newVal, oldVal) {
      this.getData(this.topList[newVal])
    },
  },
  mounted() { this.dataInit() },
  methods: {
    topChange(item,index){
      this.active = index
    
    },
    openModel(item, type) {
     
        this.nowData = JSON.parse(JSON.stringify(item))
        this.addModel = true
    },
    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.wxgetpermission(data).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data
          this.deviceId=item.deviceId
        }
      })
    },
    confirmBtn() {
      this.loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      var data = {...this.nowData,deviceId:this.deviceId}
              this.api.updatewxgetpermission(data).then(res => {
          this.loading.close()
          if (res.data.code == 200) {
            this.dataInit()
            this.$message.success(res.data.msg);
            this.addModel = false
          } else {
            this.$message.error(res.data.msg);
            this.addModel = false
          }
        })
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row';
      } else if (rowIndex % 2 == 0) {
        return 'success-row';
      }
      return '';
    }
  },

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