+f;新增授权码功能

1、产品表添加 is_authorize 是否启用授权码字段；
2、产品授权码功能：基础增删改查、批量生成授权码、绑定设备。

vue/package.json

@@ -54,6 +54,7 @@
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
+    "vue-clipboard2": "^0.3.3",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-json-viewer": "^2.2.21",

vue/src/api/iot/authorize.js

@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+// 查询产品授权码列表
+export function listAuthorize(query) {
+  return request({
+    url: '/iot/authorize/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询产品授权码详细
+export function getAuthorize(authorizeId) {
+  return request({
+    url: '/iot/authorize/' + authorizeId,
+    method: 'get'
+  })
+}
+
+// 新增产品授权码
+export function addAuthorize(data) {
+  return request({
+    url: '/iot/authorize',
+    method: 'post',
+    data: data
+  })
+}
+
+//根据数量批量新增产品授权码
+export function addProductAuthorizeByNum(data) {
+  return request({
+    url: '/iot/authorize/addProductAuthorizeByNum',
+    method: 'post',
+    data: data
+  })
+}
+// 修改产品授权码
+export function updateAuthorize(data) {
+  return request({
+    url: '/iot/authorize',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除产品授权码
+export function delAuthorize(authorizeId) {
+  return request({
+    url: '/iot/authorize/' + authorizeId,
+    method: 'delete'
+  })
+}

vue/src/main.js

@@ -39,6 +39,8 @@ import DictData from '@/components/DictData'
 import echarts from 'echarts'
 // mqtt组件
 import mqttClient from './views/iot/device/mqtt-client.vue'
+// 一键复制粘贴板组件
+import VueClipboard from 'vue-clipboard2'
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -60,7 +62,7 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('mqtt-client',mqttClient)
-
+Vue.use(VueClipboard)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)

vue/src/views/iot/product/product-authorize.vue

@@ -0,0 +1,375 @@
+<template>
+<div style="padding-left:20px;">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="授权码" prop="authorizeCode">
+        <el-input
+          v-model="queryParams.authorizeCode"
+          placeholder="请输入授权码"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="设备ID" prop="deviceId">
+        <el-input
+          v-model="queryParams.deviceId"
+          placeholder="请输入设备ID"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="设备编号" prop="serialNumber">
+        <el-input
+          v-model="queryParams.serialNumber"
+          placeholder="请输入设备编号"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户ID" prop="userId">
+        <el-input
+          v-model="queryParams.userId"
+          placeholder="请输入用户ID"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户名称" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入用户名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    
+    <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+            <el-input-number 
+                v-model="createNum" 
+                controls-position="" 
+                size="mini"
+                :min="1" 
+                :max="100"
+                label="新增个数">
+            </el-input-number>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+            v-hasPermi="['iot:authorize:add']"
+            >新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button
+            type="success"
+            plain
+            icon="el-icon-edit"
+            size="mini"
+            :disabled="single"
+            @click="handleUpdate"
+            v-hasPermi="['iot:authorize:edit']"
+            >修改</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button
+            type="danger"
+            plain
+            icon="el-icon-delete"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
+            v-hasPermi="['iot:authorize:remove']"
+            >删除</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-link type="danger" style="padding-top:5px" :underline="false">注意：绑定设备之后不可以删除。 Tips：双击可以复制授权码。</el-link>
+        </el-col>
+        <right-toolbar @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="authorizeList" @selection-change="handleSelectionChange" @cell-dblclick="celldblclick">
+        <el-table-column type="selection" :selectable="selectable" width="55" align="center"/>
+        <el-table-column label="ID"  width="55" align="center" prop="authorizeId" />
+        <el-table-column label="授权码" width="300" align="center" prop="authorizeCode" />
+        <el-table-column label="设备ID" width="75" align="center" prop="deviceId" />
+        <el-table-column label="设备编号" align="center" prop="serialNumber" />
+        <el-table-column label="用户ID" width="75" align="center" prop="userId" />
+        <el-table-column label="用户名称" align="center" prop="userName" />
+        <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
+            <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
+            </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center" prop="remark" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+            <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['iot:authorize:edit']"
+            >修改</el-button>
+            <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['iot:authorize:remove']"
+                v-if="!scope.row.deviceId"
+            >删除</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+        
+    <pagination
+    v-show="total>0"
+    :total="total"
+    :page.sync="queryParams.pageNum"
+    :limit.sync="queryParams.pageSize"
+    @pagination="getList"
+    />
+
+    <!-- 添加或修改产品授权码对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+            <el-form-item label="设备ID" prop="deviceId">
+            <el-input v-model="form.deviceId" placeholder="请输入设备ID" onkeyup="value=value.replace(/[^\d]/g,'')" />
+            </el-form-item>
+            <el-form-item label="设备编号" prop="serialNumber">
+            <el-input v-model="form.serialNumber" placeholder="请输入设备编号" />
+            </el-form-item>
+            <el-form-item label="用户ID" prop="userId">
+            <el-input v-model="form.userId" placeholder="请输入用户ID" onkeyup="value=value.replace(/[^\d]/g,'')" max=""/>
+            </el-form-item>
+            <el-form-item label="用户名称" prop="userName">
+            <el-input v-model="form.userName" placeholder="请输入用户名称" />
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+            </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="submitForm">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+        </div>
+    </el-dialog>
+</div>
+</template>
+
+<style>
+.specsColor {
+    background-color: #fcfcfc;
+}
+</style>
+
+<script>
+import { listAuthorize, getAuthorize, delAuthorize, addProductAuthorizeByNum, updateAuthorize } from "@/api/iot/authorize";
+import { isNumberStr } from '@/utils/index'
+export default {
+  name: "product-authorize",
+  props: {
+      product: {
+          type: Object,
+          default: null
+      }
+  },
+  watch: {
+      // 获取到父组件传递的productId后，刷新列表
+      product: function (newVal, oldVal) {
+          this.productInfo = newVal;
+          if (this.productInfo && this.productInfo.productId != 0) {
+              this.queryParams.productId = this.productInfo.productId;
+              this.getList();
+          }
+      }
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 产品授权码表格数据
+      authorizeList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 新增个数
+      createNum: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        authorizeCode: null,
+        productId: null,
+        deviceId: null,
+        serialNumber: null,
+        userId: null,
+        userName: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        
+      }
+    };
+  },
+  created() {
+    
+  },
+  methods: {
+    /** 查询产品授权码列表 */
+    getList() {
+      this.loading = true;
+      listAuthorize(this.queryParams).then(response => {
+        this.authorizeList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        authorizeId: null,
+        authorizeCode: null,
+        productId: "",
+        deviceId: null,
+        serialNumber: null,
+        userId: "",
+        userName: null,
+        delFlag: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.authorizeId)
+      this.single = selection.lengdelAuthorizeth!==1
+      this.multiple = !selection.length
+    },
+    /** 批量新增按钮操作 */
+    handleAdd() {
+      if (this.queryParams.productId != null) {
+        let _addData = {
+            productId : this.queryParams.productId,
+            createNum : this.createNum
+        }
+        addProductAuthorizeByNum(_addData).then(response => {
+            this.$modal.msgSuccess("新增成功");
+            this.getList();
+            this.createNum = 1;
+        });
+        }
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const authorizeId = row.authorizeId || this.ids
+      getAuthorize(authorizeId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改产品授权码信息";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.authorizeId != null) {
+            updateAuthorize(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const authorizeIds = row.authorizeId || this.ids;
+      this.$modal.confirm('是否确认删除产品授权码编号为"' + authorizeIds + '"的数据项？').then(function() {
+        return delAuthorize(authorizeIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('iot/authorize/export', {
+        ...this.queryParams
+      }, `authorize_${new Date().getTime()}.xlsx`)
+    },
+    handleChange(e){
+        console.log(currentValue)
+        if (!isNumberStr(currentValue)) {
+            this.$modal.msgSuccess("只能输入数字");
+        }
+    },
+    //禁用有绑定设备的复选框
+    selectable(row){
+       return row.deviceId != null ? false : true;
+    },
+    //表格增加复制功能
+    celldblclick (row, column, cell, event) {
+      this.$copyText(row[column.property]).then(e=> {
+        this.onCopy()
+      }, function (e) {
+        this.onError()
+      })
+    },
+    onCopy() {
+      this.$notify({title: '成功', message: '复制成功！', type: 'success', offset: 50, duration: 2000})
+    },
+    onError() {
+      this.$notify({title: '失败', message: '复制失败！', type: 'error', offset: 50, duration: 2000})
+    },
+  }
+};
+</script>

vue/src/views/iot/product/product-edit.vue

@@ -19,6 +19,9 @@
                                 <el-option v-for="dict in dict.type.iot_network_method" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
                             </el-select>
                         </el-form-item>
+                        <el-form-item label="授权码开关" prop="networkMethod">
+                            <el-switch v-model="form.isAuthorize" @change="changeIsAuthorize(form.isAuthorize)" :active-value="1" :inactive-value="0" />
+                        </el-form-item>
                         <el-form-item label="备注信息" prop="remark">
                             <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" rows="7" />
                         </el-form-item>
@@ -83,6 +86,11 @@
             <product-app ref="productApp" :product="form" />
         </el-tab-pane>
 
+        <el-tab-pane label="" name="productAuthorize" :disabled="form.isAuthorize==0">
+            <span slot="label">授权码</span>
+            <product-authorize ref="productAuthorize" :product="form" />
+        </el-tab-pane>
+
         <el-tab-pane label="" disabled name="product01" />
         <el-tab-pane label="" disabled name="product02" />
         <el-tab-pane label="" disabled name="product03" />
@@ -110,6 +118,7 @@
 import productThingsModel from "./product-things-model";
 import productApp from "./product-app"
 import productAlert from "./product-alert"
+import productAuthorize from "./product-authorize"
 import imageUpload from "../../../components/ImageUpload/index"
 import {
     listShortCategory
@@ -128,6 +137,7 @@ export default {
         productThingsModel,
         productApp,
         productAlert,
+        productAuthorize,
         imageUpload,
     },
     data() {
@@ -202,6 +212,7 @@ export default {
                 categoryName: null,
                 status: 0,
                 tslJson: null,
+                isAuthorize: 0,
                 deviceType: 1,
                 networkMethod: 1,
                 vertificateMethod: 3,
@@ -282,6 +293,16 @@ export default {
             } else if (name == "password") {
                 this.passwordInputType = this.passwordInputType == "password" ? "text" : "password";
             }
+        },
+        // 授权码状态修改
+        changeIsAuthorize() {
+            let text = this.form.isAuthorize === "1" ? "启用" : "停用";
+            let _this = this;
+            this.$modal.confirm('确认要[' + text + ']' + this.form.productName + '授权码吗？').then(function() {
+                _this.submitForm();
+            }).catch(() => {
+                this.form.isAuthorize = 0;
+            });
         }
     }
 };