设备详情

2025-01-07 14:18:42 +08:00 · 2025-01-07 14:18:42 +08:00 · 7a757572a6
commit 7a757572a6
parent 17256e8807
2 changed files with 159 additions and 84 deletions
--- a/src/views/system/device/device_detail.vue
+++ b/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">
-          <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>
+        <Role :userId="deviceData.userId"></Role>
      </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() {
-      // 确保返回数组类型
-      if (!this.deviceData.modelTags) return []
-      return Array.isArray(this.deviceData.modelTags) 
-        ? this.deviceData.modelTags 
-        : this.deviceData.modelTags.split(',').filter(Boolean)
+      return this.deviceData.modelTags ? this.deviceData.modelTags.map(tag => {
+        const modelTag = this.modelTagOptions.find(option => option.dictValue === tag);
+
+
+        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) 
-              ? response.data.modelTags 
+            modelTags: Array.isArray(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;
-  // 修改查询参数
-  const queryParams = {
-    pageNum: this.facilityQueryParams.pageNum,
-    pageSize: this.facilityQueryParams.pageSize,
-    name: undefined,
-    type: undefined,
-    status: undefined
-  };
-  
-  listEquipment(queryParams).then(response => {
-    this.facilityList = response.rows;
-    this.facilityTotal = response.total;
-    this.facilityTableLoading = false;
-  }).catch(() => {
-    this.$message.error("获取设施列表失败");
-    this.facilityTableLoading = false;
-  });
-},
+      this.facilityTableLoading = true;
+      // 修改查询参数
+      const queryParams = {
+        pageNum: this.facilityQueryParams.pageNum,
+        pageSize: this.facilityQueryParams.pageSize,
+        name: undefined,
+        type: undefined,
+        status: undefined
+      };
+
+      listEquipment(queryParams).then(response => {
+        this.facilityList = response.rows;
+        this.facilityTotal = response.total;
+        this.facilityTableLoading = false;
+      }).catch(() => {
+        this.$message.error("获取设施列表失败");
+        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({ 
-          deviceId: this.deviceData.deviceId, 
-          equipmentId: row.equipmentId 
+        return bindDeviceFacility({
+          deviceId: this.deviceData.deviceId,
+          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(() => { })
    }
  }
 }
--- a/src/views/system/rule/index.vue
+++ b/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-select v-model="queryParams.merchantId" placeholder="请选择商户" clearable @change="handleQuery">
+      <el-form-item label="商户" prop="merchantId" v-if="!userId">
+        <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 => {
-        this.merchantOptions = response.rows;
+      let params = {
+    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 => {
-        this.roomOptions = response.rows;
-      });
+    // 商户选择改变时触发(搜索表单)
+    handleMerchantChange(merchantId) {
+      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>