wszhyWx/src/views/manage/deviceSet.vue

<template>
  <div class="deviceStatusSet manage-page">
    <div class="flex-view flex-title">
       <div class="table-title">
      <img src="../../assets/manageImg/deviceSet.png" alt="" />设备状态设备
    </div>
        <el-tooltip  placement="bottom-end">
           <div slot="content">控制器设备设备值设置：<br>
            此处编辑别名和排序对应得是当前页面下《设定值参数》界面
           </div>
     <div class="table-title-btn blue">
       提示
      </div>
    </el-tooltip>
    </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="$t('text.serialNumber')" width="120px">
          <template slot-scope="scope">
            <div>{{ scope.$index + 1 }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="name" :label="$t('text.deviceName')">
        </el-table-column>
        <el-table-column prop="nickName" :label="$t('text.deviceAlias')">
        </el-table-column>
        <el-table-column prop="sort" width="120px" :label="$t('text.sortOrder')">
        </el-table-column>
        <el-table-column :label="$t('text.operations')">
          <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="">{{$t('text.edit')}}
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog  :close-on-click-modal="false" title="提示" top="15vh" :visible.sync="addModel" width="564px" class="vrcode-model manage-model"
      :append-to-body="true">
      <div class="vrcode-model-title">
        {{$t('text.edit')}}
      </div>
      <div class="vrcode-content" v-if="changeData">
        <div class="">
          <div class="manage-input">
            <div class="input-title">{{$t('text.deviceAlias')}}</div>
            <input type="text" v-model="changeData.nickName" :placeholder="$t('placeholder.deviceAlias')">
          </div>
        </div>
        <div class="">
          <div class="manage-input">
            <div class="input-title">{{$t('text.sortOrder')}}</div>
            <input type="number" v-model="changeData.sort" :placeholder="$t('placeholder.newSortOrder')">
          </div>
        </div>
        <template v-for="item,index in changeData.child" >
          <div  :key="index">
          <div class="manage-input">
            <div class="input-title">{{ index==0? $t('text.subDeviceName'):`&nbsp;` }}</div>
            <input type="text" v-model="item.nickName" :placeholder="$t('placeholder.deviceAlias')">
          </div>
        </div>
        </template>
       
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="vrcode-btn blue-btn w-100" @click="confirmModel">{{$t('index.confirm')}}</div>
        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">{{$t('index.cancel')}}</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: this.$t('message.loading'),
        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(() => {
            if(this.topList.length)
            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>