设备绑定场景

src/views/device/index.vue

@@ -15,7 +15,7 @@
         </el-form-item>
 
         <el-form-item label="选择用户">
-          <el-select v-model="queryParams.userId" placeholder="请选择用户" clearable>
+          <el-select v-model="queryParams.userId" filterable placeholder="请选择用户，可搜索" clearable>
             <el-option
               v-for="item in userOptions"
               :key="item.value"
@@ -115,9 +115,12 @@
       :title="dialogTitle"
       :visible.sync="dialogVisible"
       width="600px"
+      append-to-body
+      custom-class="device-form-dialog"
+      top="8vh"
       @close="handleDialogClose"
     >
-      <el-form ref="deviceForm" :model="deviceForm" :rules="deviceRules" label-width="100px">
+      <el-form ref="deviceForm" :key="deviceDialogFormKey" :model="deviceForm" :rules="deviceRules" label-width="100px">
         <el-form-item label="设备编号" prop="deviceCode">
           <el-input v-model="deviceForm.deviceCode" placeholder="请输入设备编号" />
         </el-form-item>
@@ -131,10 +134,10 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item v-if="!isEdit" label="场景" prop="scene">
+        <el-form-item label="场景" prop="scenario">
-          <el-select v-model="deviceForm.scene" placeholder="请选择场景" style="width: 100%">
+          <el-select v-model="deviceForm.scenario" placeholder="请选择场景" style="width: 100%" clearable>
-            <el-option label="软件销售场景" value="soft_sales" />
+            <el-option label="会议总结（SUMMARY）" value="SUMMARY" />
-            <el-option label="零售销售场景" value="retail_sales" />
+            <el-option label="软件销售（SOFT_SALE）" value="SOFT_SALE" />
           </el-select>
         </el-form-item>
         <el-form-item label="所属机构" prop="dealershipId">
@@ -148,10 +151,21 @@
           </el-select>
         </el-form-item>
         <el-form-item label="绑定用户" prop="bindUserId">
-          <el-select v-model="deviceForm.bindUserId" placeholder="请选择绑定用户" style="width: 100%" @change="handleUserChange">
+          <el-select
+            v-model="deviceForm.bindUserId"
+            filterable
+            remote
+            reserve-keyword
+            clearable
+            placeholder="输入登录账号关键字搜索"
+            style="width: 100%"
+            :remote-method="remoteSearchBindUsers"
+            :loading="bindUserSearchLoading"
+            @change="handleUserChange"
+          >
             <el-option
-              v-for="item in userOptions"
+              v-for="item in bindUserSelectOptions"
-              :key="item.value"
+              :key="String(item.value)"
               :label="item.label"
               :value="item.value"
             />
@@ -226,7 +240,7 @@ import {
 } from '@/api/device'
 import { getDealershipList } from '@/api/dealership'
 import { getProjectList } from '@/api/project'
-import { getSalesList } from '@/api/sales'
+import { getSalesList, getSalesByAccount } from '@/api/sales'
 import { getAllTenantList } from '@/api/tenant'
 
 export default {
@@ -240,6 +254,7 @@ export default {
       dialogVisible: false,
       dialogTitle: '',
       isEdit: false,
+      deviceDialogFormKey: 0,
       batchAssignVisible: false,
       // 查询参数
       queryParams: {
@@ -262,7 +277,7 @@ export default {
         salesPhone: '',
         projectId: '',
         bindStatus: false,
-        scene: ''
+        scenario: ''
       },
       // 批量分配表单
       batchAssignForm: {
@@ -281,17 +296,8 @@ export default {
         bindStatus: [
           { required: true, message: '请选择绑定状态', trigger: 'change' }
         ],
-        scene: [
+        scenario: [
-          {
+          { required: true, message: '请选择场景', trigger: 'change' }
-            validator: (rule, value, callback) => {
-              if (!this.isEdit && (!value || String(value).trim() === '')) {
-                callback(new Error('请选择场景'))
-              } else {
-                callback()
-              }
-            },
-            trigger: 'change'
-          }
         ]
       },
       batchAssignRules: {
@@ -301,8 +307,12 @@ export default {
       },
       // 机构选项
       dealershipOptions: [],
-      // 用户选项
+      // 用户选项（查询条件等）
       userOptions: [],
+      // 设备弹窗内「绑定用户」远程搜索结果
+      bindUserSelectOptions: [],
+      bindUserSearchLoading: false,
+      bindUserSearchTimer: null,
       // 项目选项
       projectOptions: [],
       // 租户选项
@@ -316,7 +326,76 @@ export default {
     this.getProjectOptions()
     this.getTenantOptions()
   },
+  beforeDestroy() {
+    if (this.bindUserSearchTimer) {
+      clearTimeout(this.bindUserSearchTimer)
+    }
+  },
   methods: {
+    buildBindUserOptionFromSales(item) {
+      const id = item.id != null ? item.id : item.loginAccount
+      const account = item.loginAccount || ''
+      const name = item.salesName || ''
+      return {
+        value: id,
+        label: name ? `${name}（${account}）` : (account || String(id)),
+        salesName: name,
+        salesPhone: account || item.salesPhone || ''
+      }
+    },
+    pinnedBindUserOptionOnly() {
+      if (!this.deviceForm.bindUserId) return []
+      const cur = this.bindUserSelectOptions.find(
+        o => String(o.value) === String(this.deviceForm.bindUserId)
+      )
+      if (cur) return [cur]
+      const name = this.deviceForm.salesName || this.deviceForm.bindUserName || ''
+      const phone = this.deviceForm.salesPhone || ''
+      return [{
+        value: this.deviceForm.bindUserId,
+        label: name ? `${name}（${phone}）` : String(this.deviceForm.bindUserId),
+        salesName: name,
+        salesPhone: phone
+      }]
+    },
+    remoteSearchBindUsers(query) {
+      if (this.bindUserSearchTimer) {
+        clearTimeout(this.bindUserSearchTimer)
+      }
+      const q = typeof query === 'string' ? query.trim() : ''
+      this.bindUserSearchTimer = setTimeout(() => {
+        this.fetchBindUsersByAccount(q)
+      }, 300)
+    },
+    fetchBindUsersByAccount(q) {
+      if (!q) {
+        this.bindUserSelectOptions = this.pinnedBindUserOptionOnly()
+        this.bindUserSearchLoading = false
+        return
+      }
+      this.bindUserSearchLoading = true
+      getSalesByAccount(q).then(response => {
+        if (response && response.code === 20000) {
+          const list = Array.isArray(response.data) ? response.data : []
+          const mapped = list.map(item => this.buildBindUserOptionFromSales(item))
+          const pinned = this.pinnedBindUserOptionOnly()
+          const merged = [...pinned]
+          mapped.forEach(o => {
+            if (!merged.some(p => String(p.value) === String(o.value))) {
+              merged.push(o)
+            }
+          })
+          this.bindUserSelectOptions = merged
+        }
+      }).catch(() => {}).finally(() => {
+        this.bindUserSearchLoading = false
+      })
+    },
+    findBindUserOption(userId) {
+      if (!userId) return null
+      return this.bindUserSelectOptions.find(o => String(o.value) === String(userId))
+        || this.userOptions.find(o => String(o.value) === String(userId))
+    },
     // 获取机构选项
     getDealershipOptions() {
       getDealershipList({ size: 1000 }).then(response => {
@@ -554,8 +633,10 @@ export default {
         salesPhone: '',
         projectId: '',
         bindStatus: false,
-        scene: ''
+        scenario: ''
       }
+      this.bindUserSelectOptions = []
+      this.deviceDialogFormKey += 1
       this.dialogVisible = true
       // 确保表单引用已准备好并清除验证
       this.$nextTick(() => {
@@ -570,6 +651,8 @@ export default {
       this.dialogTitle = '编辑设备'
       this.isEdit = true
       this.deviceForm = { ...row }
+      this.$delete(this.deviceForm, 'scene')
+      this.deviceForm.scenario = row.scenario ?? row.scene ?? ''
       // 如果没有salesName和salesPhone，根据bindUserId从userOptions中查找
       if (this.deviceForm.bindUserId && (!this.deviceForm.salesName || !this.deviceForm.salesPhone)) {
         const selectedUser = this.userOptions.find(item => item.value === this.deviceForm.bindUserId)
@@ -585,6 +668,19 @@ export default {
           this.deviceForm.dealershipName = selectedDealership.dealershipName || ''
         }
       }
+      if (this.deviceForm.bindUserId) {
+        const name = this.deviceForm.bindUserName || this.deviceForm.salesName || ''
+        const acc = this.deviceForm.salesPhone || this.deviceForm.loginAccount || ''
+        this.bindUserSelectOptions = [{
+          value: this.deviceForm.bindUserId,
+          label: name ? `${name}（${acc}）` : String(this.deviceForm.bindUserId),
+          salesName: name,
+          salesPhone: acc
+        }]
+      } else {
+        this.bindUserSelectOptions = []
+      }
+      this.deviceDialogFormKey += 1
       this.dialogVisible = true
     },
 
@@ -615,7 +711,7 @@ export default {
         if (valid) {
           // 提交前再次确认 salesName 和 salesPhone 已设置
           if (this.deviceForm.bindUserId) {
-            const selectedUser = this.userOptions.find(item => item.value === this.deviceForm.bindUserId)
+            const selectedUser = this.findBindUserOption(this.deviceForm.bindUserId)
             if (selectedUser) {
               this.deviceForm.salesName = this.deviceForm.salesName || selectedUser.salesName || ''
               this.deviceForm.salesPhone = this.deviceForm.salesPhone || selectedUser.salesPhone || ''
@@ -632,9 +728,7 @@ export default {
           }
           const submitFunc = this.isEdit ? updateDevice : addDevice
           const payload = { ...this.deviceForm }
-          if (this.isEdit) {
+          delete payload.scene
-            delete payload.scene
-          }
           submitFunc(payload).then(response => {
             if (response.code === 20000) {
               this.$message.success(this.isEdit ? '更新成功' : '添加成功')
@@ -655,7 +749,7 @@ export default {
     // 用户选择变化
     handleUserChange(userId) {
       console.log('用户选择变化，userId:', userId)
-      const selectedUser = this.userOptions.find(item => item.value === userId)
+      const selectedUser = this.findBindUserOption(userId)
       console.log('选中的用户:', selectedUser)
       if (selectedUser) {
         this.deviceForm.salesName = selectedUser.salesName || ''
@@ -682,6 +776,11 @@ export default {
 
     // 对话框关闭
     handleDialogClose() {
+      this.bindUserSelectOptions = []
+      if (this.bindUserSearchTimer) {
+        clearTimeout(this.bindUserSearchTimer)
+        this.bindUserSearchTimer = null
+      }
       this.$refs.deviceForm.resetFields()
     }
   }
@@ -730,3 +829,11 @@ export default {
   background-color: #f56c6c;
 }
 </style>
+
+<style lang="scss">
+/* append-to-body 后不受 scoped 限制，避免主内容区 overflow 裁剪弹窗内表单 */
+.device-form-dialog .el-dialog__body {
+  max-height: calc(84vh - 140px);
+  overflow-y: auto;
+}
+</style>