<template> <view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}"> <cus-header title='角色' :showback="false" bgColor='transparent'></cus-header> <div class="query adfacjb"> <div class="ql adfac"> <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/05/29/2f26eb7e-0b3d-428f-9d1a-4e86ccd416fb.png"></image> <input type="text" v-model="keyword" placeholder="搜索" placeholder-class="ph" @confirm="queryRole"> </div> <div class="qr" @tap="addRole"> + 新增角色</div> </div> <template v-if="list.length"> <div class="list" :style="{'height':'calc(100vh - '+(mt+156)+'px)'}"> <u-swipe-action> <u-swipe-action-item v-for="(item, index) in list" :key="index" :options="options" @click="e=>deleteRole(item,e)" :ref="'swipeAction' + index" :threshold="5" > <view class="swipe-action u-border-top u-border-bottom"> <view class="swipe-action__content"> <div class="l_item adfacjb"> <div class="li_l adfac"> <image :src="item.img"></image> <div class="lil_info"> <p>{{item.agentName}}</p> <div class="tip"> <u--text :lines="2" :text="item.systemPrompt" size="24rpx" color="#A6A6A6" :bold="true" lineHeight="40rpx"></u--text> </div> </div> </div> <div class="li_r" @tap="toBindDevice(item)">配置到设备</div> </div> </view> </view> </u-swipe-action-item> </u-swipe-action> </div> </template> <template v-else> <div class="empty adffcacjc" :style="{'height':'calc(100vh - '+(mt+156)+'px)'}"> <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/05/29/d3ebb319-374c-43db-bd49-64e31c83f12e.png"></image> <p>暂未创建角色</p> </div> </template> <cus-tabbar :tabbarIndex="1"></cus-tabbar> <bind-device ref="bdRef"></bind-device> <u-picker :itemHeight="88" title="设备" :show="show" :columns="deviceList" keyName="board" @cancel="show=false" @confirm="confirm" :immediateChange="true" style="height: 500rpx;"> </u-picker> </view> </template> <script> import cusTabbar from '@/components/CusTabbar/index.vue' import bindDevice from '@/components/bindDevice/index.vue' export default { components:{ cusTabbar, bindDevice }, data(){ return { list:[], originList:[], deviceList:[], show:false, options: [ { text: '编辑', icon: 'edit-pen', iconSize:'32rpx', style: { backgroundColor: '#252525' } }, { text: '删除', icon: 'trash', iconSize:'32rpx', style: { backgroundColor: '#f56c6c' } }, ], keyword:'', agentId: '', deviceId: '', roleAvatars:[ 'https://transcend.ringzle.com/xiaozhi-app/profile/2025/05/29/18082f18-2b67-4c43-9403-b421644d047a.png', 'https://transcend.ringzle.com/xiaozhi-app/profile/2025/05/29/f896a46a-78ce-46ae-bf0b-6bb61e6503ab.png', 'https://transcend.ringzle.com/xiaozhi-app/profile/2025/05/29/de98766e-49fd-419b-90b2-366108c8f56e.png' ] } }, onShow() { this.getAgentList(); this.getDeviceList(); }, methods:{ queryRole(){ this.list = this.originList.filter(l=>l.agentName.indexOf(this.keyword)>-1); }, getAgentList(){ this.$api.get('/agent/list').then(res=>{ if(res.data.code!==0) return this.$showToast(res.data.msg) this.list = res.data.data; this.list.forEach((l,i)=>{ l.img = this.roleAvatars[i%3]; }) this.originList = JSON.parse(JSON.stringify(this.list)); }) }, getDeviceList(){ this.$api.get(`/device/bindOther/null`).then(res=>{ if(res.data.code!==0) return this.$showToast(res.data.msg) this.deviceList = [res.data.data]; }) }, addDevice(){ this.$refs.bdRef.show = true; }, addRole(){ uni.navigateTo({ url:'/pagesRole/addRole?type=2' }) }, deleteRole(item,e){ if(e.index===0){ this.list.forEach((d, i) => { this.$refs['swipeAction' + i][0].closeHandler(); }) uni.navigateTo({ url:`/pagesRole/addRole?agentId=${item.id}` }) }else if(e.index===1){ let that = this; uni.showModal({ content:'删除角色设备将自动解绑需重新添加,您确定删除吗?', success: (res) => { if(res.confirm){ that.$api.del('/agent/'+item.id).then(res=>{ if(res.data.code!==0) return that.$showToast(res.data.msg) that.list.forEach((d, i) => { that.$refs['swipeAction' + i][0].closeHandler(); }) that.getAgentList(); }) } } }) } }, toBindDevice(item){ this.agentId = item.id; this.show = true; // if(item.deviceCount>0){ // uni.showModal({ // title:'温馨提示', // content:'当前角色已绑定设备,是否继续配置设备?', // success: (res) => { // if(res.confirm){ // this.show = true; // } // } // }) // }else this.show = true }, confirm(e){ this.show = false; this.deviceId = e.value[0].id; this.$api.post('/agent/agentSetDevice',{agentId:this.agentId,deviceId:this.deviceId}).then(res=>{ if(res.data.code!==0) return this.$showToast(res.data.msg) this.$showToast('配置成功') setTimeout(()=>{ this.getAgentList(); },1000) }) }, } } </script> <style> .u-swipe-action-item__right__button__wrapper { font-size: 28rpx; font-weight: 400; color: #FFFFFF; letter-spacing: 2rpx; padding: 0 26rpx; } .swipe-action { width: 100%; } .u-swipe-action { z-index: 100 !important; } </style> <style scoped lang="less"> ::v-deep .list .u-swipe-action-item{ margin-top: 60rpx; } ::v-deep .list .swipe-action{ border: none !important; } .tabPage{ background: #FFFFFF; padding-bottom: 192rpx; box-sizing: border-box; .query{ margin-top: 20rpx; width: 100%; padding-left: 30rpx; box-sizing: border-box; .ql{ width: calc(100% - 230rpx); height: 80rpx; background: #F6F6F8; border-radius: 40rpx; padding: 26rpx 36rpx; box-sizing: border-box; image{ width: 28rpx; height: 28rpx; } input{ font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; color: #222222; line-height: 40rpx; padding-left: 20rpx; } } .qr{ width: 204rpx; height: 80rpx; background: #D9F159; border-radius: 45rpx 0rpx 0rpx 45rpx; font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 28rpx; color: #111111; line-height: 80rpx; text-align: center; } } .list{ padding: 0 30rpx; overflow-y: auto; .l_item{ width: 100%; .li_l{ width: calc(100% - 200rpx); image{ width: 116rpx; height: 116rpx; } .lil_info{ width: calc(100% - 116rpx); padding-left: 23rpx; p{ font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 32rpx; color: #111111; line-height: 32rpx; margin-bottom: 16rpx; } } } .li_r{ width: 160rpx; height: 64rpx; background: #D9F159; border-radius: 16rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #111111; line-height: 64rpx; text-align: center; letter-spacing: 2rpx; } } } .empty{ image{ width: 64rpx; height: 66rpx; } p{ font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 30rpx; color: #A6A6A6; line-height: 42rpx; text-align: center; margin-top: 30rpx; } .zt_btn{ width: calc(100% - 140rpx); margin: 230rpx 70rpx 0; } } .ph{ color: #A6A6A6; } } </style>