设备信息分组选择

src/views/system/device/index.vue

@@ -145,7 +145,7 @@
           <el-input v-model="form.devPsw" placeholder="请输入设备密码"/>
         </el-form-item>
         <el-form-item label="分组" prop="group">
-          <el-input v-model="form.group" placeholder="请输入分组"/>
+          <el-input @focus="openStore()" v-model="form.group" placeholder="请输入分组"/>
         </el-form-item>
         <el-form-item label="版本号" prop="devVer">
           <el-select v-model="form.devVer" placeholder="请选择版本号">
@@ -192,15 +192,19 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <selectStore ref="select"  @select="selectGroup"/>
   </div>
 </template>
 
 <script>
 import {listDevice, getDevice, delDevice, addDevice, updateDevice} from "@/api/system/device";
+import selectStore from "./selectStore";
+
 
 export default {
   name: "Device",
   dicts: ['device_ver_type', 'device_type','device_status'],
+  components: {selectStore},
   data() {
     return {
       // 遮罩层
@@ -244,14 +248,23 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        // devMac: [
-        //   {required: true, message: "设备MAC不能为空", trigger: "blur"}
-        // ],
+        devPsw: [
+          {required: true, message: "设备密码不能为空", trigger: "blur"}
+        ],
+        devVer: [
+          { required: true, message: "设备版本号不能为空", trigger: "blur" }
+        ],
+        devType: [
+          {required: true, message: "设备类型不能为空", trigger: "blur"}
+        ],
         devId: [
           { required: true, message: "设备ID不能为空", trigger: "blur" }
         ],
         devName: [
           {required: true, message: "设备名称不能为空", trigger: "blur"}
+        ],
+        group: [
+          {required: true, message: "分组不能为空", trigger: "blur"}
         ]
       }
     };
@@ -269,6 +282,10 @@ export default {
         this.loading = false;
       });
     },
+    /** 打开门店信息表 */
+    openStore() {
+      this.$refs.select.show();
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -305,6 +322,9 @@ export default {
       this.queryParams.pageNum = 1;
       this.getList();
     },
+    selectGroup(name){
+      this.form.group = name;
+    },
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");

src/views/system/device/selectStore.vue

+<template>
+  <!-- 授权用户 -->
+  <el-dialog title="选择门店" :visible.sync="visible" width="800px" top="5vh" append-to-body>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+      <el-form-item label="门店名称" prop="name">
+        <el-input
+          v-model="queryParams.nickName"
+          placeholder="请输入门店名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="联系人" prop="manager">
+        <el-input
+          v-model="queryParams.phone"
+          placeholder="请输入联系人"
+          clearable
+          @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>
+      <el-table @row-click="clickRow" ref="table" :data="consumerList" highlight-current-row @current-change="handleCurrentChange"
+                height="260px">
+<!--        <el-table-column type="selection" width="55" align="center"/>-->
+        <el-table-column label="门店名称" align="center" prop="name"/>
+        <el-table-column label="门店类型" align="center" prop="storeType">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.store_type" :value="scope.row.storeType"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="联系人" align="center" prop="manager"/>
+        <el-table-column label="联系人电话" align="center" prop="phone"/>
+        <el-table-column label="状态" align="center" prop="status">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.store_status" :value="scope.row.status"/>
+          </template>
+        </el-table-column>
+
+      </el-table>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-row>
+<!--    <div slot="footer" class="dialog-footer">-->
+<!--      <el-button type="primary" @click="handleSelectStore">确 定</el-button>-->
+<!--      <el-button @click="visible = false">取 消</el-button>-->
+<!--    </div>-->
+  </el-dialog>
+</template>
+
+<script>
+import {listStore} from "@/api/system/store";
+
+export default {
+  dicts: ['sys_user_sex', 'consumer_role_type','store_status','store_type'],
+  props: {
+    // // 角色编号
+    // storeId: {
+    //   type: [Number, String]
+    // }
+  },
+  data() {
+    return {
+      // 遮罩层
+      visible: false,
+      // 选中数组值
+      consumerIds: [],
+      // 总条数
+      total: 0,
+      consumerList:[],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        storeId: undefined,
+        nickName: undefined,
+        phone: undefined
+      }
+    };
+  },
+  methods: {
+    // 显示弹框
+    show() {
+      this.queryParams.storeId = this.storeId;
+      this.getList();
+      this.visible = true;
+    },
+    clickRow(row) {
+      this.$refs.table.toggleRowSelection(row);
+    },
+    // 查询表数据
+    getList() {
+      listStore(this.queryParams).then(res => {
+        this.consumerList = res.rows;
+        this.total = res.total;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    handleCurrentChange(val){
+      this.$emit('select',val.name);
+      this.visible = false;
+    },
+
+  }
+};
+</script>

src/views/system/gateway/index.vue

@@ -227,7 +227,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="网络分组" prop="group">
-          <el-input v-model="form.group" placeholder="请输入网络分组" />
+          <el-input @focus="openStore()" v-model="form.group" placeholder="请输入网络分组" />
         </el-form-item>
         <el-form-item label="mqtt服务器IP/域名" prop="mqttIp">
           <el-input v-model="form.mqttIp" placeholder="请输入mqtt服务器IP/域名" />
@@ -253,15 +253,18 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <selectStore ref="select"  @select="selectGroup"/>
   </div>
 </template>
 
 <script>
 import { listGateway, getGateway, delGateway, addGateway, updateGateway } from "@/api/system/gateway";
+import selectStore from "../device/selectStore.vue";
 
 export default {
   name: "Gateway",
   dicts: ['device_ver_type', 'device_type','device_status'],
+  components: {selectStore},
   data() {
     return {
       // 遮罩层
@@ -304,15 +307,24 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        devMac: [
-          { required: true, message: "设备MAC不能为空", trigger: "blur" }
+        devPsw: [
+          {required: true, message: "设备密码不能为空", trigger: "blur"}
+        ],
+        devVer: [
+          { required: true, message: "设备版本号不能为空", trigger: "blur" }
+        ],
+        devType: [
+          {required: true, message: "设备类型不能为空", trigger: "blur"}
         ],
         devId: [
           { required: true, message: "设备ID不能为空", trigger: "blur" }
         ],
         devName: [
-          { required: true, message: "设备名称不能为空", trigger: "blur" }
+          {required: true, message: "设备名称不能为空", trigger: "blur"}
         ],
+        group: [
+          {required: true, message: "分组不能为空", trigger: "blur"}
+        ]
       }
     };
   },
@@ -334,6 +346,10 @@ export default {
       this.open = false;
       this.reset();
     },
+    /** 打开门店信息表 */
+    openStore() {
+      this.$refs.select.show();
+    },
     // 表单重置
     reset() {
       this.form = {
@@ -375,6 +391,9 @@ export default {
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
+    selectGroup(name){
+      this.form.group = name;
+    },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();