设备绑定场景
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user