|
@@ -4,59 +4,106 @@
|
|
|
<uni-segmented-control :current="tabIdx" :values="tabs" style-type="text" active-color="#007aff" @clickItem="changeTab" />
|
|
|
</view>
|
|
|
<view class="pageMain">
|
|
|
- <view class="teamhead">
|
|
|
- <uni-data-select v-model="teamId" class="item-select" @change="changeTeamType":localdata="teamList" :clear="false"></uni-data-select>
|
|
|
- <view class="handle-bt" @click="editTeam">
|
|
|
- <text>编辑</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <uni-collapse value="0" ref="collapse" accordion>
|
|
|
- <uni-collapse-item :title="teamName">
|
|
|
- <view class="teamDuty">
|
|
|
- <text>{{teamDuty}}</text>
|
|
|
- </view>
|
|
|
- </uni-collapse-item>
|
|
|
- </uni-collapse>
|
|
|
- <view class="item-container">
|
|
|
- <view class="teamhead">
|
|
|
- <view class="item-select">
|
|
|
- <text>成员列表</text>
|
|
|
- </view>
|
|
|
- <view class="handle-bt" @click="addMember">
|
|
|
- <text>新增</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item" v-for="item in items" :key="item.memberId">
|
|
|
- <view class="avatar">
|
|
|
- <image :src="item.memberAvatar" v-if="item.memberAvatar"></image>
|
|
|
- <image class="icon" src="/static/images/avatar.png" v-else></image>
|
|
|
+ <uni-card v-for="(team,index) in teamItems" :key="team.teamId" margin="10px 0" padding="0">
|
|
|
+ <template v-slot:title>
|
|
|
+ <view class="teamhead">
|
|
|
+ <view class="teamName">
|
|
|
+ <text>{{team.teamName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="handle-bt" @click="handleTeam('edit',team)">
|
|
|
+ <text>编辑</text>
|
|
|
+ </view>
|
|
|
+ <view class="addbt" @click="handleTeam('add',team.teamType)">
|
|
|
+ <view class="word">添加队伍</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="info">
|
|
|
-
|
|
|
+ </template>
|
|
|
+ <uni-collapse value="0" :ref="`collapse-${index+1}`" accordion>
|
|
|
+ <uni-collapse-item :title="team.teamName">
|
|
|
+ <view class="teamDuty">
|
|
|
+ <text>{{team.teamDuty}}</text>
|
|
|
+ </view>
|
|
|
+ </uni-collapse-item>
|
|
|
+ </uni-collapse>
|
|
|
+ <view class="item-container">
|
|
|
+ <view class="teamhead">
|
|
|
+ <view class="item-select">
|
|
|
+ <text>成员列表</text>
|
|
|
+ </view>
|
|
|
+ <view class="handle-bt" @click="handleMember('add',team.teamId)">
|
|
|
+ <text>新增</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ <uni-swipe-action class="item-action-box">
|
|
|
+ <uni-card padding="10px 0" margin="5px 0" v-for="item in team.memberList" :key="item.memberId">
|
|
|
+ <uni-swipe-action-item class="item-action" :auto-close="true" >
|
|
|
+ <template v-slot:right>
|
|
|
+ <view class="slot-button">
|
|
|
+ <view class="bt edit" @click="handleMember('edit',item)"><text class="slot-button-text">编辑</text></view>
|
|
|
+ <view class="bt del" @click="handleMember('del',item)"><text class="slot-button-text">删除</text></view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view class="item">
|
|
|
+ <view class="avatar">
|
|
|
+ <image :src="item.memberAvatar" v-if="item.memberAvatar"></image>
|
|
|
+ <image class="icon" src="/static/images/avatar.png" v-else></image>
|
|
|
+ </view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="top">
|
|
|
+ <view class="posName">
|
|
|
+ <text>{{item.memberPosition}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="posbox">
|
|
|
+ <view class="tag">
|
|
|
+ <uni-tag :inverted="true" :text="item.ifCpc===1?'党员':'不是党员'"
|
|
|
+ :type="item.ifCpc===1?'primary':'success'"></uni-tag>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="user">
|
|
|
+ <div class="userinfo">
|
|
|
+ <uni-icons type="person-filled" size="24" :color="item.memberSex===1?'#666666':'#ffc0cb'"></uni-icons>
|
|
|
+ <view class="name">{{item.memberName}}</view>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ <view class="phone" @click="callPhone(item.memberPhone)">
|
|
|
+ <image class="icon" src="/static/images/phone.png"></image>
|
|
|
+ <view class="phoneNumber">{{item.memberPhone||'未填写'}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-swipe-action-item>
|
|
|
+ </uni-card>
|
|
|
+ </uni-swipe-action>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </uni-card>
|
|
|
</view>
|
|
|
+ <MemberForm ref="member" @success="getData"></MemberForm>
|
|
|
+ <TeamForm ref="team" @success="getData"></TeamForm>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import teamApi from '@/api/team.js'
|
|
|
+ import TeamForm from './components/TeamForm.vue'
|
|
|
+ import MemberForm from './components/MemberForm.vue'
|
|
|
export default {
|
|
|
+ components:{
|
|
|
+ TeamForm,
|
|
|
+ MemberForm
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
tabIdx:0,
|
|
|
tabs:['专业救援队伍','行业救援队伍','综合抢险队伍'],
|
|
|
- teamList:[],
|
|
|
- teamId:undefined,
|
|
|
- teamId:undefined,
|
|
|
- teamName:"",
|
|
|
- teamDuty:"",
|
|
|
- items:[]
|
|
|
+ teamItems:[]
|
|
|
}
|
|
|
},
|
|
|
onShow() {
|
|
|
this.getData()
|
|
|
+ this.init();
|
|
|
},
|
|
|
methods: {
|
|
|
changeTab({currentIndex}){
|
|
@@ -65,43 +112,56 @@
|
|
|
this.getData()
|
|
|
}
|
|
|
},
|
|
|
- changeTeamType(){
|
|
|
- this.getTeamInfo()
|
|
|
- },
|
|
|
getData(){
|
|
|
- teamApi.getByList({teamType:this.tabIdx+1}).then((res)=>{
|
|
|
- if(res.data.length>0){
|
|
|
- this.teamList=res.data.map(item=>{
|
|
|
- return{
|
|
|
- value:item.teamId,
|
|
|
- text:item.teamName
|
|
|
- }
|
|
|
- })
|
|
|
- this.teamId=res.data[0].teamId
|
|
|
- this.getTeamInfo()
|
|
|
+ teamApi.getByListInfo({teamType:this.tabIdx+1}).then((res)=>{
|
|
|
+ this.teamItems=res.data
|
|
|
+ for(let i=0;i<res.data.length;i++){
|
|
|
+ // #ifdef MP
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs[`collapse-${i+1}`][0]&&this.$refs[`collapse-${i+1}`][0].resize()
|
|
|
+ })
|
|
|
+ // #endif
|
|
|
}
|
|
|
- })
|
|
|
+ })
|
|
|
},
|
|
|
- getTeamInfo(){
|
|
|
- teamApi.getById(this.teamId).then((result)=>{
|
|
|
- this.teamName=result.data.teamName
|
|
|
- this.teamDuty=result.data.teamDuty
|
|
|
- // #ifdef MP
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.collapse.resize()
|
|
|
- })
|
|
|
- // #endif
|
|
|
- })
|
|
|
- teamApi.getMemberByList({teamId:this.teamId}).then((res)=>{
|
|
|
- this.items=res.data
|
|
|
- })
|
|
|
+ handleTeam(type,item){
|
|
|
+ this.$refs.team.show(type,item)
|
|
|
},
|
|
|
- editTeam(){
|
|
|
-
|
|
|
+ handleMember(type,item){
|
|
|
+ const self=this;
|
|
|
+ if(type==='del'){
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '是否确定删除',
|
|
|
+ success: function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ teamApi.deleteMemberById(item.teamId,item.memberId).then(()=>{
|
|
|
+ uni.showToast({
|
|
|
+ title:'删除成功!',
|
|
|
+ icon:'none'
|
|
|
+ })
|
|
|
+ self.getData()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ this.$refs.member.show(type,item)
|
|
|
+ }
|
|
|
},
|
|
|
- addMember(){
|
|
|
-
|
|
|
- }
|
|
|
+ callPhone(phoneNumber) {
|
|
|
+ if(!phoneNumber)return
|
|
|
+ wx.makePhoneCall({
|
|
|
+ phoneNumber
|
|
|
+ })
|
|
|
+ },
|
|
|
+ init(){
|
|
|
+ if(!uni.getStorageSync('teamCat')){
|
|
|
+ teamApi.getCatByList().then((res)=>{
|
|
|
+ uni.setStorageSync('teamCat',res.data)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -115,18 +175,20 @@
|
|
|
.pageMain{
|
|
|
margin-top: 20rpx;
|
|
|
background-color: #f5f5f5;
|
|
|
+ padding-bottom: 50rpx;
|
|
|
.teamhead{
|
|
|
- padding: 20rpx;
|
|
|
background-color: #fff;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- .item-select{
|
|
|
- width: 400rpx;
|
|
|
+ .teamName{
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
.handle-bt{
|
|
|
padding: 20rpx 30rpx;
|
|
|
- font-size: 24rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
color: #409eff;
|
|
|
line-height: 1;
|
|
|
flex-shrink: 0;
|
|
@@ -134,7 +196,32 @@
|
|
|
}
|
|
|
.teamDuty{
|
|
|
padding: 20rpx;
|
|
|
- line-height: 1.5;
|
|
|
+ line-height: 1.2;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+ .addbt{
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #fff;
|
|
|
+ background-color: rgba(64,158,255,0.7);
|
|
|
+ box-shadow:0 0 10rpx rgba(0,0,0,0.4);
|
|
|
+ position: fixed;
|
|
|
+ right: 10rpx;
|
|
|
+ bottom: 20%;
|
|
|
+ z-index: 99;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .word{
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 5rpx auto;
|
|
|
+ font-size: 28rpx;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ }
|
|
|
}
|
|
|
.item-container{
|
|
|
margin-top: 20rpx;
|
|
@@ -144,10 +231,6 @@
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- background-color: #fff;
|
|
|
- box-shadow:0 0 2px rgba(0,0,0,0.3) ;
|
|
|
- margin-top: 20rpx;
|
|
|
- padding: 20rpx;
|
|
|
}
|
|
|
.avatar {
|
|
|
flex-shrink: 0;
|
|
@@ -161,8 +244,69 @@
|
|
|
height: 60rpx;
|
|
|
}
|
|
|
}
|
|
|
+ .info{
|
|
|
+ flex: 1;
|
|
|
+ padding:0 14rpx;
|
|
|
+ .icon,.icon image{
|
|
|
+ display: block;
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user,.phone{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .name,.phoneNumber{
|
|
|
+ color: #999;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: normal;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .user{
|
|
|
+ padding: 10rpx 0;
|
|
|
+ .userinfo{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .posbox{
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .slot-button{
|
|
|
+ width: 260rpx;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ .bt{
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ &.edit{
|
|
|
+ background-color:#007aff;
|
|
|
+ }
|
|
|
+ &.del{
|
|
|
+ background-color:#F56C6C;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|