AiToyCXWx/pages/role.vue

<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/06/03/cecb5744-d3be-4f61-a165-dc7458a83cff.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" @tap.stop="showDetail(item)">
									<div class="li_l adfac">
										<image :src="item.avatar||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.stop="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/06/03/6efdf230-f26b-4e2e-818c-d89e762030ec.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="id"
			@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/06/03/2d6893bf-04db-4f9e-8d1a-08ed920f452e.png',
					'https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/650d8bd8-674b-4149-b655-ed7e1957da2b.png',
					'https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/03/053ef795-a135-48bd-9417-994de3c51dcf.png'
				]
			}
		},
		onShow() {
			if(!uni.getStorageSync('token')) return
			this.getAgentList();
		},
		methods:{
			queryRole(){
				if(!this.isLogin()) return
				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.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/${this.agentId}`).then(res=>{
					if(res.data.code!==0) return
					this.deviceList = [res.data.data];
					if(res.data.data.length>0) this.show = true;
					else this.$showToast('暂无可绑定的设备')
				})
			},
			addDevice(){
				this.$refs.bdRef.show = true;
			},
			addRole(){
				if(!this.isLogin()) return
				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}&type=2`
					})
				}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();
								})
							}
						}
					})
				}
			},
			showDetail(item){
				uni.navigateTo({
					url:'/pagesRole/roleDetail?agentId='+item.id
				})
			},
			toBindDevice(item){
				this.agentId = item.id;
				this.getDeviceList();
				// 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;
						border-radius: 50%;
					}
					.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>