white-board-manage/src/views/admin/device/index.vue

<template>
  <div class="dashboard-container">
    <div class="demo-input-size">
      <el-input
        v-model="deviceCode"
        size="mini"
        placeholder="请输入设备编号"
      />
      <el-input
        v-model="deviceType"
        size="mini"
        placeholder="请输入设备型号"
      />
      <el-input
        v-model="region"
        size="mini"
        placeholder="请输入设备地区"
      />
      <el-input
        v-model="address"
        size="mini"
        placeholder="请输入设备地址"
      />
      <el-date-picker
        v-model="gmtCreated"
        size="mini"
        type="date"
        placeholder="选择设备安装日期"
        format="yyyy 年 MM 月 dd 日"
        value-format="timestamp"
      />
      <el-button type="primary" size="mini" style="float: right;" @click="search">查询</el-button>
    </div>
    <el-table
      :data="deviceData"
      style="width: 100%"
    >
      <el-table-column
        label="设备安装时间"
        prop="gmtCreated"
      />    
      <el-table-column
        label="设备编号"
        prop="deviceCode"
      />
      <el-table-column
        label="设备尺寸"
        prop="deviceSize"
      />
      <el-table-column
        label="设备型号"
        prop="deviceType"
      />
      <el-table-column
        label="设备地区"
        prop="region"
      />
      <el-table-column
        label="设备地址"
        prop="address"
      />      
      <el-table-column
        align="right"
      >
        <template slot-scope="scope">
          <el-button
            v-show="type === '0'"
            size="mini"
            style="float: left; margin: 0 10px 0 0;"
            @click="handleInstall(scope.$index, scope.row)"
          >
            安装信息
          </el-button>
          <el-button
            size="mini"
            style="float: left; margin: 0 10px 0 0;"
            @click="handleMaintainMessage(scope.$index, scope.row)"
          >
            维护信息
          </el-button>
          <el-button
            v-show="type === '2'"
            size="mini"
            style="float: left; margin: 0 10px 0 0;"
            @click="handleMaintain(scope.$index, scope.row)"
          >
            立即维护
          </el-button>
          <el-button
            v-show="type === '0'"
            size="mini"
            style="float: left; margin: 0 10px 0 0;"
            @click="handleUse(scope.$index, scope.row)"
          >
            使用日志
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="gridTile" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          v-for="item in information"
          :key="item.label"
          :label="item.label"
          :prop="item.type"
        />
      </el-table>
    </el-dialog>
    <el-dialog
      title="安装信息"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <div class="install">
        安装日期: {{ gridData.length > 0 ? gridData[0].deviceLog.gmtCreated : '' }}
      </div>
      <div class="install">
        安装人员: {{ gridData.length > 0 ? gridData[0].deviceModifier.name : '' }}
      </div>
      <div class="install">
        安装地区: {{ gridData.length > 0 ? gridData[0].deviceLog.region : '' }}
      </div>
      <div class="install">
        安装地址: {{ gridData.length > 0 ? gridData[0].deviceLog.address : '' }}
      </div>
      <div class="install">
        备注信息: {{ gridData.length > 0 ? gridData[0].deviceLog.description : '' }}
      </div>
    </el-dialog>
    <el-dialog title="立即维护" :visible.sync="dialogFormVisible">
      <el-form :model="solveForm" label-width="80px">
        <el-form-item label="解决方案">
          <el-input v-model="solveForm.description" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handSolve">确 定</el-button>
      </div>
    </el-dialog>    
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getToken, getType } from '@/utils/auth'

export default {
  name: 'Device',
  data() {
    return {
      dialogTableVisible: false,
      dialogVisible: false,
      gridData: [],
      gridTile: '',
      type: getType(),
      uid: getToken(),
      information: [],
      deviceCode: '',
      deviceType: '',
      region: '',
      address: '',
      gmtCreated: '',
      dialogFormVisible: false,
      solveForm: {
        deviceCode: '',
        deviceId: '',
        opType: 'MODIFIED',
        description: ''
      }
    }
  },
  computed: {
    ...mapGetters(['deviceData'])
  },
  created() {
    console.log(111, this.type)
    if (this.type === '2') {
      this.$store.dispatch('admin/getDeviceData', {
        modifier: this.uid
      })
    } else {
      this.$store.dispatch('admin/getDeviceData')
    }
  },
  methods: {
    search() {
      if (this.type === '2') {
        this.$store.dispatch('admin/getDeviceData', {
          deviceCode: this.deviceCode,
          deviceType: this.deviceType,
          region: this.region,
          address: this.address,
          gmtCreated: this.gmtCreated,
          modifier: this.uid
        })
      } else {
        this.$store.dispatch('admin/getDeviceData', {
          deviceCode: this.deviceCode,
          deviceType: this.deviceType,
          region: this.region,
          address: this.address,
          gmtCreated: this.gmtCreated
        })
      }
    },
    handleInstall(index, row) {
      this.$store.dispatch('admin/queryLogData', {
        deviceId: row.id,
        deviceCode: row.deviceCode,
        opType: 'INSTALL'
      }).then(() => {
        this.gridData = this.$store.getters.logData
        // this.gridData.push(row)
        this.dialogVisible = true
      })
    },
    handleMaintainMessage(index, row) {
      this.$store.dispatch('admin/queryLogData', {
        deviceId: row.id,
        deviceCode: row.deviceCode,
        opType: 'MODIFIED'
      }).then(() => {
        this.gridData = this.$store.getters.logData
        this.gridTile = '维护信息'
        this.information = [{
          label: '报修日期',
          type: 'deviceLog[gmtCreated]'
        }, {
          label: '维护人员',
          type: 'deviceModifier[name]'
        }, {
          label: '申请人员',
          type: 'deviceLog[gmtCreated]'
        }, {
          label: '解决日期',
          type: 'deviceLog[gmtCreated]'
        }, {
          label: '解决方案',
          type: 'deviceLog[description]'
        }]
        this.dialogTableVisible = true
      })      
    },
    handleMaintain(index, row) {
      this.solveForm.deviceCode = row.deviceCode
      this.solveForm.deviceId = row.id
      this.dialogFormVisible = true
    },
    handleUse(index, row) {
      console.log(index, row)
      this.$store.dispatch('admin/queryLogData', {
        deviceId: row.id,
        deviceCode: row.deviceCode,
        opType: 'USE'
      }).then(() => {
        this.gridData = this.$store.getters.logData
        // this.gridData.push(row)
        this.gridTile = '使用日志'
        this.information = [{
          label: '设备连接时间',
          type: 'deviceLog[gmtCreated]'
        }, {
          label: '设备连接日期',
          type: 'deviceModifier[name]'
        }]
        this.dialogTableVisible = true
      })
      // this.gridData = []
      // this.gridData.push(row)
      // this.gridTile = '使用日志'
      // this.dialogTableVisible = true
    },
    handSolve() {
      this.$store.dispatch('install/addDeviceLog', this.solveForm)
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-input {
  width: auto;
}
.install {
  margin-bottom: 10px;
}
</style>