设备详情

src/views/system/device/device_detail.vue

@@ -91,7 +91,8 @@
           <div slot="header" class="card-header">
             <span>归属信息</span>
             <div class="header-buttons">
-              <el-button type="success" icon="el-icon-connection" plain size="small" @click="openBindUserDialog">绑定商户</el-button>
+              <el-button type="success" icon="el-icon-connection" plain size="small"
+                @click="openBindUserDialog">绑定商户</el-button>
               <el-button type="success" icon="el-icon-connection" plain size="small"
                 @click="openBindFacilityDialog">绑定设施</el-button>
             </div>
@@ -271,33 +272,7 @@
     <el-tabs v-model="activeTab" class="detail-tabs">
       <el-tab-pane label="套餐列表" name="packages">
         <!-- 套餐列表搜索表单 -->
-        <el-form :inline="true" :model="searchForm" class="search-form">
+        <Role :userId="deviceData.userId"></Role>
-          <el-form-item label="用户名称">
-            <el-input v-model="searchForm.userName" placeholder="请输入用户名称"></el-input>
-          </el-form-item>
-          <el-form-item label="用户手机">
-            <el-input v-model="searchForm.userPhone" placeholder="请输入用户手机号"></el-input>
-          </el-form-item>
-          <el-form-item label="套餐名称">
-            <el-input v-model="searchForm.packageName" placeholder="请输入套餐名称"></el-input>
-          </el-form-item>
-          <el-form-item label="收费模式">
-            <el-select v-model="searchForm.chargeMode" placeholder="请选择收费模式">
-              <el-option label="模式1" value="1"></el-option>
-              <el-option label="模式2" value="2"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="收费类型">
-            <el-select v-model="searchForm.chargeType" placeholder="请选择收费类型">
-              <el-option label="类型1" value="1"></el-option>
-              <el-option label="类型2" value="2"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search">搜索</el-button>
-            <el-button type="info" icon="el-icon-refresh">重置</el-button>
-          </el-form-item>
-        </el-form>
       </el-tab-pane>
       <el-tab-pane label="订单列表" name="orders">订单列表内容</el-tab-pane>
       <el-tab-pane label="命令日志" name="logs">命令日志内容</el-tab-pane>
@@ -340,6 +315,26 @@
     </el-dialog>
     <!-- 绑定商户对话框 -->
     <el-dialog title="绑定商户" :visible.sync="bindUserDialogVisible" width="900px" append-to-body>
+      <el-form :model="userQueryParams" ref="queryForm" :inline="true" class="search-form">
+        <el-form-item label="用户名称" prop="userName">
+          <el-input v-model="userQueryParams.userName" placeholder="请输入用户名称" clearable size="small"
+            @keyup.enter.native="handleUserQuery" />
+        </el-form-item>
+        <el-form-item label="手机号码" prop="phonenumber">
+          <el-input v-model="userQueryParams.phonenumber" placeholder="请输入手机号码" clearable size="small"
+            @keyup.enter.native="handleUserQuery" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="userQueryParams.status" placeholder="用户状态" clearable size="small">
+            <el-option label="正常" value="0" />
+            <el-option label="停用" value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleUserQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetUserQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
       <el-table v-loading="userTableLoading" :data="userList" style="width: 100%" height="500">
         <el-table-column label="用户编号" prop="userId" align="center" />
         <el-table-column label="用户名称" prop="userName" align="center" />
@@ -385,11 +380,13 @@ import { listData } from '@/api/system/dict/data'
 import { listEquipment } from "@/api/system/equipment"
 import QrCode from '@/components/QrCode/index.vue'
 import QRCode from 'qrcode'
+import Role from '@/views/system/rule/index.vue'
 
 export default {
   name: "DeviceDetail",
   components: {
-    QrCode
+    QrCode,
+    Role
   },
   dicts: ['ss_equipment_type', 'ss_equipment_status', 'ss_user_type'],
   data() {
@@ -400,7 +397,7 @@ export default {
       },
       loading: false,
       isEditing: false,
-      
+
       // 编辑表单数据
       editForm: {
         deviceId: undefined,
@@ -460,11 +457,12 @@ export default {
       return this.deviceData.sn || ''
     },
     modelTags() {
-      // 确保返回数组类型
+      return this.deviceData.modelTags ? this.deviceData.modelTags.map(tag => {
-      if (!this.deviceData.modelTags) return []
+        const modelTag = this.modelTagOptions.find(option => option.dictValue === tag);
-      return Array.isArray(this.deviceData.modelTags) 
+
-        ? this.deviceData.modelTags 
+
-        : this.deviceData.modelTags.split(',').filter(Boolean)
+        return modelTag ? modelTag.dictLabel : tag;
+      }) : [];
     },
     facilityTag() {
       return this.deviceData.facilityName || '--'
@@ -472,13 +470,19 @@ export default {
   },
   created() {
     const deviceId = this.$route.params.deviceId
+
+    this.fetchFacilityOptions()
+    this.fetchModelTagOptions()
     if (deviceId) {
       this.fetchDeviceData(deviceId)
     }
-    this.fetchFacilityOptions()
-    this.fetchModelTagOptions()
   },
   methods: {
+    toUserDetail(){
+      if (this.deviceData.userId) {
+        this.$router.push(`/user/detail/${this.deviceData.userId}`);
+      }
+    },
     fetchDeviceData(deviceId) {
       this.loading = true
       getDevice(deviceId).then(response => {
@@ -486,8 +490,8 @@ export default {
           // 确保modelTags是数组
           this.deviceData = {
             ...response.data,
-            modelTags: Array.isArray(response.data.modelTags) 
+            modelTags: Array.isArray(response.data.modelTags)
-              ? response.data.modelTags 
+              ? response.data.modelTags
               : (response.data.modelTags ? response.data.modelTags.split(',') : [])
           }
         }
@@ -512,37 +516,38 @@ export default {
     },
 
     fetchModelTagOptions() {
-      listData({ dictType: 'ss_model_tags' }).then(response => {
+      listData({ dictType: 'sm_model_tag' }).then(response => {
         this.modelTagOptions = response.rows || []
+        console.log(this.modelTagOptions, 'this.modelTagOptions');
       }).catch(() => {
         this.$message.error("获取型号功能数据失败")
       })
     },
     getFacilityList() {
-  this.facilityTableLoading = true;
+      this.facilityTableLoading = true;
-  // 修改查询参数
+      // 修改查询参数
-  const queryParams = {
+      const queryParams = {
-    pageNum: this.facilityQueryParams.pageNum,
+        pageNum: this.facilityQueryParams.pageNum,
-    pageSize: this.facilityQueryParams.pageSize,
+        pageSize: this.facilityQueryParams.pageSize,
-    name: undefined,
+        name: undefined,
-    type: undefined,
+        type: undefined,
-    status: undefined
+        status: undefined
-  };
+      };
-  
+
-  listEquipment(queryParams).then(response => {
+      listEquipment(queryParams).then(response => {
-    this.facilityList = response.rows;
+        this.facilityList = response.rows;
-    this.facilityTotal = response.total;
+        this.facilityTotal = response.total;
-    this.facilityTableLoading = false;
+        this.facilityTableLoading = false;
-  }).catch(() => {
+      }).catch(() => {
-    this.$message.error("获取设施列表失败");
+        this.$message.error("获取设施列表失败");
-    this.facilityTableLoading = false;
+        this.facilityTableLoading = false;
-  });
+      });
-},
+    },
     toggleEdit() {
       this.isEditing = true
-      this.editForm = { 
+      this.editForm = {
         ...this.deviceData,
-        modelTags: Array.isArray(this.deviceData.modelTags) 
+        modelTags: Array.isArray(this.deviceData.modelTags)
           ? [...this.deviceData.modelTags]
           : []
       }
@@ -611,14 +616,14 @@ export default {
       }).then(() => {
         this.$message.success("设备已删除")
         this.$router.push('/system/device')
-      }).catch(() => {})
+      }).catch(() => { })
     },
 
     openBindFacilityDialog() {
       this.bindFacilityDialogVisible = true
       this.getFacilityList()
     },
-    
+
     getFacilityList() {
       this.facilityTableLoading = true
       listEquipment(this.facilityQueryParams).then(response => {
@@ -627,24 +632,24 @@ export default {
         this.facilityTableLoading = false
       })
     },
-    
+
     handleBindFacility(row) {
       this.$modal.confirm('确认要将该设备绑定到设施"' + row.name + '"吗？').then(() => {
-        return bindDeviceFacility({ 
+        return bindDeviceFacility({
-          deviceId: this.deviceData.deviceId, 
+          deviceId: this.deviceData.deviceId,
-          equipmentId: row.equipmentId 
+          equipmentId: row.equipmentId
         })
       }).then(() => {
         this.$modal.msgSuccess("绑定成功")
         this.bindFacilityDialogVisible = false
         this.fetchDeviceData(this.deviceData.deviceId)
-      }).catch(() => {})
+      }).catch(() => { })
     },
 
     handleOnline(row) {
       const status = row.status === '8' ? '0' : '8'
       const statusText = status === '8' ? '禁用' : '启用'
-      
+
       this.$modal.confirm('确认要' + statusText + '该设备吗？').then(() => {
         return updateDevice({
           deviceId: row.deviceId,
@@ -653,7 +658,7 @@ export default {
       }).then(() => {
         this.$modal.msgSuccess(statusText + "成功")
         this.fetchDeviceData(row.deviceId)
-      }).catch(() => {})
+      }).catch(() => { })
     },
 
     openBindUserDialog() {
@@ -669,7 +674,25 @@ export default {
         this.userTableLoading = false
       })
     },
+    // 搜索按钮操作
+  handleUserQuery() {
+    this.userQueryParams.pageNum = 1;
+    this.getUserList();
+  },
 
+  // 重置按钮操作
+  resetUserQuery() {
+    this.$refs["queryForm"].resetFields();
+    this.userQueryParams = {
+      pageNum: 1,
+      pageSize: 10,
+      userName: undefined,
+      phonenumber: undefined,
+      status: undefined,
+      userType: '01'
+    };
+      this.handleUserQuery();
+    },
     handleBindUser(row) {
       this.$modal.confirm('确认要将该设备绑定到商户"' + row.userName + '"吗？').then(() => {
         return bindDeviceUser({
@@ -680,7 +703,7 @@ export default {
         this.$modal.msgSuccess("绑定成功")
         this.bindUserDialogVisible = false
         this.fetchDeviceData(this.deviceData.deviceId)
-      }).catch(() => {})
+      }).catch(() => { })
     }
   }
 }

src/views/system/rule/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="商户" prop="merchantId">
+      <el-form-item label="商户" prop="merchantId" v-if="!userId">
-        <el-select v-model="queryParams.merchantId" placeholder="请选择商户" clearable @change="handleQuery">
+        <el-select v-model="queryParams.merchantId" placeholder="请选择商户" clearable @change="handleMerchantChange">
           <el-option
             v-for="item in merchantOptions"
             :key="item.userId"
@@ -142,7 +142,7 @@
     <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="商户" prop="merchantId">
-          <el-select v-model="form.merchantId" placeholder="请选择商户" clearable @change="handleQuery">
+          <el-select v-model="form.merchantId" placeholder="请选择商户" clearable @change="handleMerchantChangeInForm">
             <el-option
               v-for="item in merchantOptions"
               :key="item.userId"
@@ -152,7 +152,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="房间" prop="roomId">
-          <el-select v-model="form.roomId" placeholder="请选择房间" clearable @change="handleQuery">
+          <el-select v-model="form.roomId" placeholder="请选择房间" clearable>
             <el-option
               v-for="item in roomOptions"
               :key="item.roomId"
@@ -205,6 +205,7 @@ export default {
   name: "Rule",
   mixins: [$showColumns],
   dicts: ['ss_fee_rule_mode'],
+  props: ['userId'],
   data() {
     return {
       // 字段列表
@@ -258,24 +259,72 @@ export default {
       form: {},
       // 表单校验
       rules: {
+        merchantId: [
+          { required: true, message: "商户不能为空", trigger: "change" }
+        ],
+        roomId: [
+          { required: true, message: "房间不能为空", trigger: "change" }
+        ],
+        mode: [
+          { required: true, message: "收费模式不能为空", trigger: "change" }
+        ],
+        price: [
+          { required: true, message: "售价不能为空", trigger: "blur" }
+        ]
       }
     };
   },
   created() {
-    this.getList();
+  
-    this.getRoomList();
     this.getMerchantList();
   },
   methods: {
     getMerchantList() {
-      listUser({pageNum:1,pageSize:999 ,userType: '01'}).then(response => {
+      let params = {
-        this.merchantOptions = response.rows;
+    pageNum: 1,
+    pageSize: 999,
+    userType: '01'
+  }
+  if(this.userId) {
+    params.userId = this.userId
+  }
+  listUser(params).then(response => {
+    this.merchantOptions = response.rows;
+    if(this.userId) {
+      // 在merchantOptions中查找匹配userId的商户
+      const merchant = this.merchantOptions.find(item => item.userId === this.userId);
+      if(merchant) {
+        this.queryParams.merchantId = merchant.userId;
+        // 获取该商户的房间列表
+        this.getList();
+        this.getRoomList(merchant.userId);
+      }
+    }
+  });
+    },
+    getRoomList(merchantId) {
+      const params = {
+        pageNum: 1,
+        pageSize: 999
+      };
+      if (merchantId) {
+        params.merchantId = merchantId;
+      }
+      listRoom(params).then(response => {
+        this.roomOptions = response.rows;
+        
       });
     },
-    getRoomList() {
+    // 商户选择改变时触发(搜索表单)
-      listRoom({pageNum:1,pageSize:999  }).then(response => {
+    handleMerchantChange(merchantId) {
-        this.roomOptions = response.rows;
+      this.queryParams.roomId = null; // 清空房间选择
-      });
+      this.getRoomList(merchantId);
+      this.handleQuery();
+    },
+    // 商户选择改变时触发(编辑表单)
+    handleMerchantChangeInForm(merchantId) {
+      this.form.roomId = null; // 清空房间选择
+      this.getRoomList(merchantId);
     },
     /** 当排序按钮被点击时触发 **/
     onSortChange(column) {
@@ -326,6 +375,7 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
+      this.roomOptions = []; // 清空房间选项
       this.handleQuery();
     },
     // 多选框选中数据
@@ -346,6 +396,8 @@ export default {
       const ruleId = row.ruleId || this.ids
       getRule(ruleId).then(response => {
         this.form = response.data;
+        // 获取对应商户的房间列表
+        this.getRoomList(this.form.merchantId);
         this.open = true;
         this.title = "修改收费模板";
       });
@@ -388,4 +440,4 @@ export default {
     }
   }
 };
-</script>
+</script>