udiwms-vue-frame/src/views/system/device/phoneRegisterManage.vue

<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
        <el-row>
          <el-form-item class="query-form-item" label="审核状态:">
            <el-select v-model="filterQuery.isCheck" placeholder="审核状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="未审核" value="0"></el-option>
              <el-option label="已审核" value="1"></el-option>
              <el-option label="未通过" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-refresh"
                @click="onReset"
              >重置
              </el-button>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit"
              >查询
              </el-button
              >
              <el-button type="primary" icon="el-icon-setting" @click="qrCodeGeneration"
              >手持终端地址配置
              </el-button
              >
            </el-button-group>
          </el-form-item>
        </el-row>
      </el-form>
      <el-dialog title="设备管理-手持终端服务地址设置" :visible.sync="qrCodeVisible" width="45%">
        <div
          style="display:flex;justify-content: center; align-items:center; width: 100%;height: 300px;border: 1px solid green;text-align:center;line-height:100px ">
          <div id="qrCodeUrl">
          </div>

        </div>
        <el-row :gutter="20" class="el-row" type="flex" style="margin-top: 20px">
          <el-col :span="24" class="el-col">
            <el-form>
              <el-form-item label="当前系统：">
                <el-input
                  style="width: 60%"
                  size="small"
                  placeholder="请输入内容"
                  clearable
                  v-model="companyInfo.name"
                ></el-input>
              </el-form-item>
            </el-form>

          </el-col>

        </el-row>
        <el-row>
          <el-col>
            <div style="margin-top: 8px ;  color: #F71616;">
              <span>提示：请在手持终端->设置->运行模式->服务地址扫码配置</span>
            </div>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
                   <el-button type="primary" icon="search" @click="saveNameClick"
                   >保存
                        </el-button
                        >
                <el-button @click="qrCodeVisible = false">取消</el-button>
            </span>
      </el-dialog>
      <el-table v-loading="loading" :data="list" style="width: 100%" border>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="IMEI唯一识别码" prop="imei" width="230"></el-table-column>
        <el-table-column
          label="登记说明"
          prop="remark"
        ></el-table-column>

        <el-table-column
          label="申请人"
          prop="companyName"
        ></el-table-column>

        <el-table-column label="审核状态" prop="isCheck" width="120">
          <template slot-scope="scope">
            <span>{{ checkFlag[scope.row.isCheck] }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.isCheck !== 1"
              @click.native.stop="checkDialog(scope.row)"
            >审核
            </el-button
            >

            <el-button
              type="text"
              @click.native.stop="editDialog(scope.row)"
            >编辑
            </el-button
            >
            <el-button
              type="text"
              @click.native.stop="deleteDialog(scope.row)"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="审核"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="6">
            <div class="ao-text">
              <span>IMEI：</span>
            </div>
          </el-col>
          <el-col :span="12">
            <el-input
              size="small"
              placeholder=""
              v-model="checkQuery.imei"
              disabled
            ></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex" style="margin-top: 10px">
          <el-col :span="6">
            <div class="ao-text">
              <span>登记说明：</span>
            </div>
          </el-col>
          <el-col :span="12">
            <el-input
              size="small"
              placeholder=""
              v-model="checkQuery.remark"
            ></el-input>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer" style="margin-top: 40px">
                <el-button @click="closeDialogVisible">取消</el-button>
                <el-button type="primary" @click="passRegister">通过</el-button>
                <el-button type="primary" @click="noPassRegister">不通过</el-button>
            </span>
      </el-dialog>
      <el-dialog
        title="设备管理-编辑"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="editDialogVisible"
        width="45%"
      >
        <el-form>
          <el-row>
            <el-form-item label="IMEI唯一识别码:" label-width="120px">
              <el-input
                size="small"
                placeholder=""
                style="width: 100%"
                v-model="checkQuery.imei"
                disabled
              ></el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="登记说明:" label-width="120px">
              <el-input
                size="small"
                style="width: 100%"
                placeholder=""
                type="textarea"
                v-model="checkQuery.remark"
              ></el-input>
            </el-form-item>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer" style="margin-top: 40px">
                <el-button @click="cancelDialog">取消</el-button>
                <el-button type="primary" @click="confirmEdit">确定</el-button>
            </span>
      </el-dialog>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="filterQuery.page"
        :limit.sync="filterQuery.limit"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import {registerList, check, deleterKey} from "@/api/system/param/deviceCheck";
import QRCode from 'qrcodejs2'
import axios from "axios";
import {getCompany, modifyCompany} from "@/api/system/company";
import {delMenu} from "@/api/system/menu";
import {authAdminDelete} from "@/api/auth/authAdmin";

export default {
  data() {
    return {
      filterQuery: {
        isCheck: "",
        page: 1,
        limit: 20,
      },
      value: "",
      total: 0,
      checkFlag: {
        0: "未审核",
        1: "已通过",
        2: "已拒绝",
      },
      loading: false,
      list: [],

      addDialogVisible: false,
      centerDialogVisible: false,
      check: "",
      checkQuery: {
        imei: null,
        remark: null,
      },
      editDialogVisible: false,
      qrCodeVisible: false,
      serverUrl: false,
      companyInfo: {},
    };
  },

  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        isCheck: "",
        page: 1,
        limit: 20,
      };
      this.getList();
    },

    onSubmit() {
      this.filterQuery.page=1;
      this.getList();
    },
    closeDialogVisible(){
      this.centerDialogVisible=false;
      this.getList();
    },
    getList() {
      this.loading = true;
      registerList(this.filterQuery)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },
    editDialog(row) {

      this.checkQuery = JSON.parse(JSON.stringify(row));

      // this.checkQuery = row;
      this.editDialogVisible = true;
    },
    cancelDialog() {
      this.editDialogVisible = false;
      this.getList();
    },
    handleSizeChange(val) {
      this.filterQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val;
      this.getList();
    },

    checkRegister() {
      this.loading = true;
      check(this.checkQuery)
        .then((response) => {
          if (response.code === 20000) {
            this.editDialogVisible = false;
            this.getList();
            this.$message({
              type: "success",
              message: "更新成功！",
            });

          } else {
            this.$message.warning("更新失败");
            this.loading = false;
          }
        })
        .catch(() => {
        });
    },
    checkDialog(row) {
      this.checkQuery = row;
      this.centerDialogVisible = true;
    },
    confirmEdit() {
      this.checkRegister();
    },

    deleteDialog(row) {

      this.$confirm("是否确认删除该设备?", "提示", {
        type: "warning"
      })
        .then(() => {
          let query = {
            id: row.id,
          }
          deleterKey(query)
            .then((response) => {
              if (response.code === 20000) {
                this.getList();
                this.$message({
                  type: "success",
                  message: "删除成功！",
                });
              } else {
                this.$message.warning("删除失败");
                this.loading = false;
              }
            })
            .catch(() => {
            });
        })
        .catch(() => {
          this.$message.info("取消删除");
        });


    },


    passRegister() {
      this.checkQuery.isCheck = 1;
      this.checkRegister();
      this.centerDialogVisible = false;
    },
    noPassRegister() {
      this.checkQuery.isCheck = 2;
      this.checkRegister();
      this.centerDialogVisible = false;
    },
    qrCodeGeneration() {
      let tquery = {
        customerId: 110,
      };
      getCompany(tquery).then((response) => {
        this.loading = false;
        this.companyInfo = response.data;
      });
      this.qrCodeVisible = true;
      this.$nextTick(function () {
        document.getElementById("qrCodeUrl").innerHTML = "";
        let qrCodeUrl = new QRCode("qrCodeUrl", {
          width: 200,
          height: 200,
          text: this.serverUrl,
          colorDark: "#409EFF",
          colorLight: "#fff"
        });
      });
    },
    saveNameClick() {
      modifyCompany(this.companyInfo).then((response) => {
        if (response.code == 20000) {
          this.$message.success("保存成功！");
          this.qrCodeVisible = false;
        }
      });
    }

  },

  mounted() {
  },
  created() {
    this.getList();
    // axios.get("./config.json").then(res => {
    // 基础地址
    this.serverUrl = process.env.VUE_APP_BASE_API;
    // });
  },

};
</script>