设备绑定场景

This commit is contained in:
zhonghua.li
2026-04-05 10:14:25 +08:00
parent a0f2a3284e
commit f1ec855526

View File

@@ -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-select v-model="deviceForm.scene" placeholder="请选择场景" style="width: 100%">
<el-option label="软件销售场景" value="soft_sales" />
<el-option label="零售销售场景" value="retail_sales" />
<el-form-item label="场景" prop="scenario">
<el-select v-model="deviceForm.scenario" placeholder="请选择场景" style="width: 100%" clearable>
<el-option label="会议总结SUMMARY" value="SUMMARY" />
<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"
:key="item.value"
v-for="item in bindUserSelectOptions"
: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: [
{
validator: (rule, value, callback) => {
if (!this.isEdit && (!value || String(value).trim() === '')) {
callback(new Error('请选择场景'))
} else {
callback()
}
},
trigger: 'change'
}
scenario: [
{ required: true, message: '请选择场景', 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>