界面调整

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

@@ -1,99 +1,34 @@
 <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 :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">
+        <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="设备编号" prop="serialNumber">
+            <el-input v-model="queryParams.serialNumber" placeholder="请输入设备编号" 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 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-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-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-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,8 +37,8 @@
     </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 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" />
@@ -111,56 +46,37 @@
         <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>
+                <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>
+                <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"
-    />
+    <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-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-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="请输入用户名称" />
+                <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-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
             </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -178,198 +94,218 @@
 </style>
 
 <script>
-import { listAuthorize, getAuthorize, delAuthorize, addProductAuthorizeByNum, updateAuthorize } from "@/api/iot/authorize";
-import { isNumberStr } from '@/utils/index'
+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;
-        });
+    name: "product-authorize",
+    props: {
+        product: {
+            type: Object,
+            default: null
         }
     },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const authorizeId = row.authorizeId || this.ids
-      getAuthorize(authorizeId).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改产品授权码信息";
-      });
+    watch: {
+        // 获取到父组件传递的productId后，刷新列表
+        product: function (newVal, oldVal) {
+            this.productInfo = newVal;
+            if (this.productInfo && this.productInfo.productId != 0) {
+                this.queryParams.productId = this.productInfo.productId;
+                this.getList();
+            }
+        }
     },
-    /** 提交按钮 */
-    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();
+    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;
             });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    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})
-    },
-  }
+        },
+        // 取消按钮
+        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

@@ -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="发生错误了";
-            if(status==2){
-                message="产品发布后不能再更改产品内容和对应物模型 ！";
-            }else if(status==1){
-                message="产品下不能有已经创建的设备，才能取消发布哦 ！"
+            let message = "发生错误了";
+            if (status == 2) {
+                message = "产品发布后不能再更改产品内容和对应物模型 ！";
+            } else if (status == 1) {
+                message = "产品下不能有已经创建的设备，才能取消发布哦 ！"
             }
             this.$confirm(message, '提示', {
                 confirmButtonText: '确定',
@@ -260,10 +260,10 @@ export default {
                 changeProductStatus(data).then(response => {
                     this.$modal.alertSuccess(response.msg);
                     this.goBack();
-                }).catch(()=>{
-                    if(status==2){
-                    this.activeName = "things";
-                    }else{
+                }).catch(() => {
+                    if (status == 2) {
+                        this.activeName = "things";
+                    } 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;