界面调整

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

@@ -1,50 +1,14 @@
 <template>
 <div style="padding-left:20px;">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">
         <el-form-item label="授权码" prop="authorizeCode">
-        <el-input
+            <el-input v-model="queryParams.authorizeCode" placeholder="请输入授权码" clearable size="small" @keyup.enter.native="handleQuery" />
-          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
+            <el-input v-model="queryParams.serialNumber" placeholder="请输入设备编号" clearable size="small" @keyup.enter.native="handleQuery" />
-          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
+            <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable size="small" @keyup.enter.native="handleQuery" />
-          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>
@@ -54,46 +18,17 @@
 
     <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
-            <el-input-number 
+            <el-input-number v-model="createNum" controls-position="" size="mini" :min="1" :max="100" label="新增个数">
-                v-model="createNum" 
-                controls-position="" 
-                size="mini"
-                :min="1" 
-                :max="100"
-                label="新增个数">
             </el-input-number>
         </el-col>
         <el-col :span="1.5">
-            <el-button
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['iot:authorize:add']">新增</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
+            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['iot:authorize:edit']">修改</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
+            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['iot:authorize:remove']">删除</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>
@@ -102,7 +37,7 @@
     </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 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" />
@@ -117,32 +52,13 @@
         <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
+                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['iot:authorize:edit']">修改</el-button>
-                size="mini"
+                <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>
-                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
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-    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>
@@ -154,7 +70,7 @@
                 <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-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="请输入用户名称" />
@@ -178,8 +94,16 @@
 </style>
 
 <script>
-import { listAuthorize, getAuthorize, delAuthorize, addProductAuthorizeByNum, updateAuthorize } from "@/api/iot/authorize";
+import {
-import { isNumberStr } from '@/utils/index'
+    listAuthorize,
+    getAuthorize,
+    delAuthorize,
+    addProductAuthorizeByNum,
+    updateAuthorize
+} from "@/api/iot/authorize";
+import {
+    isNumberStr
+} from '@/utils/index'
 export default {
     name: "product-authorize",
     props: {
@@ -289,15 +213,15 @@ export default {
         // 多选框选中数据
         handleSelectionChange(selection) {
             this.ids = selection.map(item => item.authorizeId)
-      this.single = selection.lengdelAuthorizeth!==1
+            this.single = selection.lengdelAuthorizeth !== 1
             this.multiple = !selection.length
         },
         /** 批量新增按钮操作 */
         handleAdd() {
             if (this.queryParams.productId != null) {
                 let _addData = {
-            productId : this.queryParams.productId,
+                    productId: this.queryParams.productId,
-            createNum : this.createNum
+                    createNum: this.createNum
                 }
                 addProductAuthorizeByNum(_addData).then(response => {
                     this.$modal.msgSuccess("新增成功");
@@ -313,7 +237,7 @@ export default {
             getAuthorize(authorizeId).then(response => {
                 this.form = response.data;
                 this.open = true;
-        this.title = "修改产品授权码信息";
+                this.title = "编辑授权码";
             });
         },
         /** 提交按钮 */
@@ -333,7 +257,7 @@ export default {
         /** 删除按钮操作 */
         handleDelete(row) {
             const authorizeIds = row.authorizeId || this.ids;
-      this.$modal.confirm('是否确认删除产品授权码编号为"' + authorizeIds + '"的数据项？').then(function() {
+            this.$modal.confirm('是否确认删除产品授权码编号为"' + authorizeIds + '"的数据项？').then(function () {
                 return delAuthorize(authorizeIds);
             }).then(() => {
                 this.getList();
@@ -346,29 +270,41 @@ export default {
                 ...this.queryParams
             }, `authorize_${new Date().getTime()}.xlsx`)
         },
-    handleChange(e){
+        handleChange(e) {
             console.log(currentValue)
             if (!isNumberStr(currentValue)) {
                 this.$modal.msgSuccess("只能输入数字");
             }
         },
         //禁用有绑定设备的复选框
-    selectable(row){
+        selectable(row) {
             return row.deviceId != null ? false : true;
         },
         //表格增加复制功能
-    celldblclick (row, column, cell, event) {
+        celldblclick(row, column, cell, event) {
-      this.$copyText(row[column.property]).then(e=> {
+            this.$copyText(row[column.property]).then(e => {
                 this.onCopy()
             }, function (e) {
                 this.onError()
             })
         },
         onCopy() {
-      this.$notify({title: '成功', message: '复制成功！', type: 'success', offset: 50, duration: 2000})
+            this.$notify({
+                title: '成功',
+                message: '复制成功！',
+                type: 'success',
+                offset: 50,
+                duration: 2000
+            })
         },
         onError() {
-      this.$notify({title: '失败', message: '复制失败！', type: 'error', offset: 50, duration: 2000})
+            this.$notify({
+                title: '失败',
+                message: '复制失败！',
+                type: 'error',
+                offset: 50,
+                duration: 2000
+            })
         },
     }
 };

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

@@ -72,10 +72,15 @@
         </el-tab-pane>
 
         <el-tab-pane label="" name="things" :disabled="form.productId==0">
-            <span slot="label">* 定义物模型</span>
+            <span slot="label">* 物模型</span>
             <product-things-model ref="productThingsModel" :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="" name="alert" disabled>
             <span slot="label"> 告警配置</span>
             <product-alert ref="productAlert" :product="form"></product-alert>
@@ -86,11 +91,6 @@
             <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" />
@@ -243,11 +243,11 @@ export default {
         },
         /** 更新产品状态 */
         changeProductStatus(status) {
-            let message="发生错误了";
+            let message = "发生错误了";
-            if(status==2){
+            if (status == 2) {
-                message="产品发布后不能再更改产品内容和对应物模型 ！";
+                message = "产品发布后不能再更改产品内容和对应物模型 ！";
-            }else if(status==1){
+            } else if (status == 1) {
-                message="产品下不能有已经创建的设备，才能取消发布哦 ！"
+                message = "产品下不能有已经创建的设备，才能取消发布哦 ！"
             }
             this.$confirm(message, '提示', {
                 confirmButtonText: '确定',
@@ -260,10 +260,10 @@ export default {
                 changeProductStatus(data).then(response => {
                     this.$modal.alertSuccess(response.msg);
                     this.goBack();
-                }).catch(()=>{
+                }).catch(() => {
-                    if(status==2){
+                    if (status == 2) {
                         this.activeName = "things";
-                    }else{
+                    } else {
                         this.goBack();
                     }
                 });
@@ -298,7 +298,7 @@ export default {
         changeIsAuthorize() {
             let text = this.form.isAuthorize === "1" ? "启用" : "停用";
             let _this = this;
-            this.$modal.confirm('确认要[' + text + ']' + this.form.productName + '授权码吗？').then(function() {
+            this.$modal.confirm('确认要[' + text + ']' + this.form.productName + '授权码吗？').then(function () {
                 _this.submitForm();
             }).catch(() => {
                 this.form.isAuthorize = 0;