<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="http://106.54.209.120:8188/static/query_mini.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="http://106.54.209.120:8188/static/empty_device.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: '删除',
style: {
backgroundColor: '#f56c6c'
}
}],
keyword:'',
agentId: '',
deviceId: ''
}
},
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 = `http://106.54.209.120:8188/static/role_avatar${i%3}.png`;
})
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'
})
},
deleteRole(item,e){
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;
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 {
background: #F55454 !important;
font-size: 28rpx;
font-weight: 400;
color: #FFFFFF;
letter-spacing: 2rpx;
}
.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>