baoman / Ezquiz_Platform

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>异常设备信息</span>
      </template>
    </back-box>
    <div class="page-content">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="sn"
          label="设备编码"
          align="center"
          width="160"
        ></el-table-column>
        <el-table-column prop="deviceType" label="设备类型" align="center">
          <template slot-scope="scoped">
            {{
              scoped.row.deviceType == 1
                ? "基站"
                : scoped.row.deviceType == 2
                ? "键盘"
                : "PC"
            }}
          </template>
        </el-table-column>
        <el-table-column label="异常类型" align="center">
          <template slot-scope="scoped">
            {{
              scoped.row.status == 0
                ? "正常"
                : scoped.row.status == 1
                ? "低电量异常"
                : scoped.row.status == 2
                ? "配对码异常"
                : "关联班级异常"
            }}
          </template></el-table-column
        >
        <template v-if="type == 1">
          <el-table-column
            prop="pairingCode"
            label="配对码"
            align="center"
          ></el-table-column>
          <el-table-column label="关联班级" align="center">
            <template slot-scope="scoped">
              <p v-for="(item, index) in scoped.row.classList" :key="index">
                {{ item.className }}
              </p>
            </template>
          </el-table-column>
        </template>
        <el-table-column
          prop="modifiedTime"
          label="最早发现时间"
          align="center"
          width="200"
        ></el-table-column>
        <el-table-column
          v-if="type == 2"
          prop="answerTimes"
          label="答题次数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="abnormalRemark"
          label="状态"
          align="center"
        ></el-table-column>
        <el-table-column prop="abnormalSource" label="信息来源" align="center">
          <template slot-scope="scoped">
            {{
              scoped.row.abnormalSource == 0
                ? "无"
                : scoped.row.abnormalSource == 1
                ? "云平台"
                : scoped.row.abnormalSource == 2
                ? "授课端"
                : scoped.row.abnormalSource == 3
                ? "出厂工具"
                : "发卡工具"
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100"
          ><template slot-scope="scoped">
            <el-link
              :disabled="!!scoped.row.abnormalRemark"
              @click="openDia(scoped.row)"
              >处理</el-link
            ></template
          ></el-table-column
        >
      </el-table>
      <div class="pagination-box">
        <el-pagination
          small=""
          layout="total,prev, pager, next"
          :hide-on-single-page="true"
          :total="total"
          @current-change="changePage"
          :current-page="page"
          :page-size="size"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="备注"
      :visible.sync="diaNotes"
      width="400"
    >
      <el-form ref="formClass" label-width="100px">
        <el-form-item label="处理备注：" prop="studentName">
          <el-col :span="12">
            <el-input
              type="textarea"
              :rows="3"
              maxlength="200"
              v-model="ntoes"
            />
          </el-col>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="_SaveNotes" type="primary">确 定</el-button>
        <el-button @click="diaNotes = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      role: "",
      loading: false,
      diaNotes: false,
      ntoes: "",
      deviceId: "",
      type: 1,
      tableData: [],
      total: 0,
      page: 1,
      size: 20,
    };
  },
  created() {
    this.type = this.$route.query.type;
    this.role =
      this.$store.getters.info.showRole ||
      this.$store.getters.info.permissions[0].role;
    this._QueryData();
  },
  methods: {
    changePage(page) {
      this.page = page;
      this._QueryData();
    },
    openDia(obj) {
      this.diaNotes = true;
      this.deviceId = obj.id;
      this.ntoes = "";
    },
    async _SaveNotes() {
      if (!this.ntoes.trim()) {
        this.$message.warning("请填写备注内容！");
        return;
      }
      const { status, info } = await this.$request.abnormalRemark({
        deviceId: this.deviceId,
        abnormalRemark: this.ntoes,
      });
      if (status === 0) {
        this.ntoes = "";
        this.diaNotes = false;
        this._QueryData();
      } else {
        this.$message.error(info);
      }
    },
    async _QueryData() {
      this.loading = true;
      const deviceList =
        this.role != "ROLE_JITUAN"
          ? this.$request.deviceList
          : this.$request.tenantDeviceList;
      this.tableData = [];
      const { data, status, info } = await deviceList({
        status: 1,
        deviceType: this.type,
        page: this.page,
        size: this.size,
      });
      this.loading = false;
      if (status === 0) {
        this.tableData = (data?.list && [...data?.list]) || [];
        this.total = data.count;
      } else {
        this.$message.error(info);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  padding: 20px;
}
</style>