优化响应指令管理作用域选择交互,支持群/用户下拉搜索

变更项:

- 查询区作用域ID改为下拉选择:群聊与私聊均支持按名称搜索

- 新增私聊联系人数据加载逻辑,接入 /contacts/api/personal

- 新增作用域切换自动清空ID逻辑,避免群ID/用户ID串用

- 新增加载失败兜底提示,并统一展示 名称(wxid) 便于识别
This commit is contained in:
liuwei
2026-04-23 14:26:46 +08:00
parent aa56a7ca02
commit c22b4cf055

View File

@@ -32,7 +32,43 @@
</el-select>
</el-form-item>
<el-form-item label="作用域ID">
<el-input v-model="filters.scope_id" placeholder="群ID/用户ID" style="width:260px" @keyup.enter.native="loadRows"></el-input>
<el-select
v-if="filters.scope_type === 'group'"
v-model="filters.scope_id"
filterable
clearable
placeholder="请选择群(支持名称搜索)"
style="width:320px"
@change="loadRows">
<el-option
v-for="item in groupOptions"
:key="item.wxid"
:label="item.name + ' (' + item.wxid + ')'"
:value="item.wxid">
</el-option>
</el-select>
<el-select
v-else-if="filters.scope_type === 'private'"
v-model="filters.scope_id"
filterable
clearable
placeholder="请选择用户(支持名称搜索)"
style="width:320px"
@change="loadRows">
<el-option
v-for="item in userOptions"
:key="item.wxid"
:label="item.name + ' (' + item.wxid + ')'"
:value="item.wxid">
</el-option>
</el-select>
<el-input
v-else
value=""
disabled
placeholder="全局作用域无需选择ID"
style="width:320px">
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="loadRows">查询</el-button>
@@ -93,10 +129,24 @@
</el-select>
</el-form-item>
<el-form-item label="作用域ID" v-if="form.scope_type !== 'global'">
<!-- 群聊作用域通过可搜索下拉选择群避免手填ID带来的维护成本。 -->
<el-select v-if="form.scope_type === 'group'" v-model="form.scope_id" filterable placeholder="请选择群" style="width:100%">
<el-option v-for="item in groupOptions" :key="item.wxid" :label="item.name" :value="item.wxid"></el-option>
<el-option v-for="item in groupOptions" :key="item.wxid" :label="item.name + ' (' + item.wxid + ')'" :value="item.wxid"></el-option>
</el-select>
<!-- 私聊作用域:支持按备注/昵称检索,降低大规模规则库维护难度。 -->
<el-select
v-else
v-model="form.scope_id"
filterable
placeholder="请选择私聊用户(支持名称搜索)"
style="width:100%">
<el-option
v-for="item in userOptions"
:key="item.wxid"
:label="item.name + ' (' + item.wxid + ')'"
:value="item.wxid">
</el-option>
</el-select>
<el-input v-else v-model="form.scope_id" placeholder="私聊用户 wxid"></el-input>
</el-form-item>
<el-form-item label="触发类型">
<el-select v-model="form.trigger_type" style="width:220px">
@@ -251,6 +301,7 @@ new Vue({
loading: false,
rows: [],
groupOptions: [],
userOptions: [],
filters: { scope_type: '', scope_id: '', enabled: '' },
dialogVisible: false,
editing: false,
@@ -271,8 +322,19 @@ new Vue({
},
mounted() {
this.loadGroups()
this.loadUsers()
this.loadRows()
},
watch: {
'filters.scope_type'() {
// 切换筛选作用域后清空旧ID避免群ID/用户ID串用导致查询结果异常。
this.filters.scope_id = ''
},
'form.scope_type'() {
// 编辑表单中切换作用域类型时同步清空scope_id强制重新选择目标对象。
this.form.scope_id = ''
}
},
methods: {
scopeLabel(scopeType) {
const map = { global: '全局', group: '群聊', private: '私聊' }
@@ -446,9 +508,26 @@ new Vue({
}
},
async loadGroups() {
const resp = await axios.get('/contacts/api/groups')
const groups = (resp.data && resp.data.data && resp.data.data.groups) || {}
this.groupOptions = Object.entries(groups).map(([wxid, name]) => ({ wxid, name: String(name || wxid) }))
// 群聊数据用于“作用域”下拉选择,统一做名称兜底,确保没有昵称时仍可选。
try {
const resp = await axios.get('/contacts/api/groups')
const groups = (resp.data && resp.data.data && resp.data.data.groups) || {}
this.groupOptions = Object.entries(groups).map(([wxid, name]) => ({ wxid, name: String(name || wxid) }))
} catch (error) {
this.groupOptions = []
this.$message.error('加载群列表失败,请稍后重试')
}
},
async loadUsers() {
// 私聊联系人数据用于“作用域”下拉选择,支持按名称搜索定位目标用户。
try {
const resp = await axios.get('/contacts/api/personal')
const users = (resp.data && resp.data.data && resp.data.data.personal) || {}
this.userOptions = Object.entries(users).map(([wxid, name]) => ({ wxid, name: String(name || wxid) }))
} catch (error) {
this.userOptions = []
this.$message.error('加载私聊联系人失败,请稍后重试')
}
},
async loadRows() {
this.loading = true