420 lines
9.0 KiB
Vue

<template>
<view class="fullHeight">
<headers :showBack="true">
<view class="headerName">
班前喊话
</view>
</headers>
<view class="listBox">
<!-- @click="searchPerson(item.id)" -->
<view v-for="item in list" :key="item.id">
<uni-card>
<view class="personItem">
<view class="leftImg">
<image :src="url_config+'image/'+item.shoutImage" style="width: 180rpx;height: 150rpx;"
@click="lookImg(url_config+'image/'+item.shoutImage)"></image>
</view>
<view class="rightMessage">
<view>企业:{{item.enterpriseName}}</view>
<view>班组:{{item.teamName}}</view>
<view>负责人:{{item.dutyUserName}}</view>
<view>时间:{{item.updateTime}}</view>
</view>
</view>
</uni-card>
</view>
<view class="placeholderBox" v-show="list.length==0">
<image src="/static/noData.png" class="noDataImg"></image>
<view class="text">
暂无数据
</view>
</view>
</view>
<view class="addBtn">
<image src="../../static/addImg.png" mode="" style="width: 180rpx;height: 180rpx;"
@click="openAdd('center')"></image>
</view>
<uni-popup ref="popup" background-color="#fff" @change="change">
<view class="dialogStyle" v-if="ishow">
<view class="leftTitle">
<view>新增班前喊话</view>
</view>
<view>
<view class="flex">
<view class="title">企&nbsp;&nbsp;&nbsp;业:</view>
<view class="uni-list">
<picker @change="companyChange" :value="companyindex" mode="selector" :range="companyList"
range-key="enterpriseName">
<view class="titleSelect">
{{companyList[0].enterpriseName}}
</view>
</picker>
</view>
</view>
<view class="flex">
<view class="title">班&nbsp;&nbsp;&nbsp;组:</view>
<view class="uni-list">
<picker @change="teamChange" :value="teamindex" :range="teamList" range-key="teamName">
<view class="titleSelect">{{teamList[teamindex].teamName}}</view>
</picker>
</view>
</view>
<view :range="name" class="flex">
<view class="title">&nbsp;负责人:</view>
<view class="titleSelect">{{name}}</view>
</view>
<view class="flexPhone">
<view class="title">拍&nbsp;&nbsp;&nbsp;摄: </view>
</view>
<view class="example-body">
<uni-file-picker v-model="imageValue" limit="1" @select="canversList"></uni-file-picker>
</view>
<view>
<button type="primary" class="btnStyle" @click="submit">确认</button>
</view>
<view>
<button class="btnStyle" @click="close">取消</button>
</view>
</view>
</view>
</uni-popup>
<canversCom v-if="openImg" @imgUrl="imgUrl" :imgList="imgList"></canversCom>
</view>
</template>
<script>
import {
pathToBase64,
base64ToPath
} from '@/utils/imgPachToBase64/index.js'
import headers from '../../components/headers/headers.vue'
import canversCom from "@/pages/videoManage/component/canversCom.vue"
import {
GetDateStr
} from "@/static/js/util.js"
export default {
components: {
headers,
canversCom
},
data() {
return {
ishow: false,
imageValue: [],
type: 'center',
array: ['中国', '美国', '巴西', '日本'],
companyindex: 0, //企业
teamindex: 0, //班组
value: 'xxx',
list: [],
sn: '',
companyList: [],
teamList: [],
teamId: '',
name: '', //负责人
openImg: false,
imgList: {},
addTeamId: '',
isLoadMore: false,
pageNo: 1
};
},
mounted() {
this.getList()
},
onLoad(sn) {
this.sn = sn.sn
this.getCompany()
this.getTeam()
},
onReachBottom() {
if (!this.isLoadMore) { //此处判断,上锁,防止重复请求
this.isLoadMore = true;
uni.showLoading({
title: '加载中'
})
this.pageNo += 1;
this.getList();
}
},
methods: {
lookImg(a) {
console.log('11111111111111111', a)
let data = []
data.push(a)
uni.previewImage({
urls: data,
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(suc) {
console.log('选中了第' + suc);
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
},
getCompany() {
console.log('===================')
var that = this
this.sendRequest({
url: 'xmgl/enterpriseInfo/selectHierarchyEnterpriseList',
data: {
projectSn: this.sn
},
method: "POST",
success(res) {
console.log(res, 'that.companyListthat.companyListthat.companyList')
that.companyList = res.result;
that.teamId = that.companyList[1].enterpriseId
}
})
},
getTeam() {
var that = this
this.sendRequest({
url: 'xmgl/teamInfo/getTeamInfoList',
data: {
enterpriseId: this.teamId,
projectSn: this.sn
},
method: "POST",
success(res) {
that.teamList = res.result.list
}
})
},
openAdd(type) {
this.ishow = true
this.type = type
this.$refs.popup.open(type)
},
submit() {
let that = this
console.log('1111111', that.imageValue)
//#ifdef APP-VUE
pathToBase64(that.imageValue[0].url).then(base64 => {
console.log(base64)
that.sendRequest({
url: 'xmgl/shoutInfo/addShoutInfo',
data: {
teamId: that.addTeamId,
projectSn: that.sn,
shoutImage: base64
},
method: "POST",
success(res) {
// that.teamList = res.result.list
console.log('ok', res)
that.$refs.popup.close()
that.getList()
}
})
})
//#endif
//#ifdef H5
that.sendRequest({
url: 'xmgl/shoutInfo/addShoutInfo',
data: {
teamId: that.addTeamId,
projectSn: that.sn,
shoutImage: that.imageValue[0].url
},
method: "POST",
success(res) {
// that.teamList = res.result.list
console.log('ok', res)
that.$refs.popup.close()
}
})
//#endif
},
getList() {
var that = this
this.sendRequest({
url: 'xmgl/shoutInfo/selectPage',
data: {
projectSn: this.sn,
pageNo: this.pageNo
},
method: "GET",
success(res) {
// that.list = res.result.records;
that.list = [...that.list, ...res.result.records]
console.log('66', that.list)
}
})
},
change(e) {
console.log('当前模式:' + e.type + ',状态:' + e.show);
},
companyChange: function(e) {
this.companyindex = e.detail.value
this.teamId = this.companyList[e.detail.value].enterpriseId
},
teamChange: function(e) {
console.log(e)
this.teamindex = e.detail.value
this.name = this.teamList[e.detail.value].leaderName
this.addTeamId = this.teamList[e.detail.value].id
},
close() {
this.$refs.popup.close()
},
canversList(e) {
this.imgList = {
imgUrl: e.tempFiles[0].image.location,
imgWidth: e.tempFiles[0].image.width,
imgHeight: e.tempFiles[0].image.height,
team: this.teamList[this.teamindex].teamName,
name: this.teamList[this.teamindex].leaderName
}
this.openImg = true
console.log('传过去啦', this.imgList)
},
imgUrl(val) {
this.imageValue = [{
url: val
}]
this.openImg = false
}
}
}
</script>
<style lang="scss" scoped>
.fixedHeaderBox {
// position: relative;
}
.searchBox {
// background-color: #2b8df3;
padding: 0 15rpx 5rpx;
position: fixed;
left: 0;
width: calc(100% - 30rpx);
top: 0;
z-index: 1;
}
.selectContent {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
.selectItem {
flex: 1;
}
}
.listBox {
margin-top: 30rpx;
}
.personItem {
display: flex;
justify-content: space-between;
.leftImg {
flex: 3;
}
.rightMessage {
flex: 6;
font-size: 26rpx;
}
// align-items: center;
// box-shadow: 0px 4px 26rpx 0px rgba(212, 220, 236, 0.53);
// position: relative;
// margin-bottom: 10rpx;
// padding: 30rpx;
// border-radius: 16rpx;
// // padding: 0 30rpx;
// font-size: 30rpx;
// .teamName{
// font-size: 26rpx;
// }
// .small{
// font-size: 24rpx;
// opacity: 0.8;
// }
}
.addBtn {
position: absolute;
top: 80%;
left: 38%;
position: fixed;
}
.dialogStyle {
width: 600rpx;
height: 750rpx;
background-color: white;
border: 2rpx solid white;
border-radius: 5rpx;
}
.leftTitle {
font-size: 28rpx;
font-weight: 700;
display: flex;
justify-content: center;
margin: 30rpx 0 40rpx 0;
}
.title {
font-size: 26rpx;
font-weight: 700;
margin-top: 8rpx;
}
.titleSelect {
font-size: 26rpx;
width: 400rpx;
height: 50rpx;
border: 1px solid rgb(241, 241, 241);
border-radius: 10rpx;
line-height: 50rpx;
padding-left: 20rpx;
overflow: hidden;
text-overflow: ellipsis;
}
.flexItem {
display: flex;
}
.flex {
display: flex;
justify-content: center;
margin-bottom: 20rpx;
}
.flexPhone {
margin-left: 38rpx;
}
.example-body {
padding: 0 0 20rpx 140rpx;
}
.btnStyle {
font-size: 28rpx;
border-radius: 10rpx;
width: 500rpx;
margin-bottom: 20rpx;
}
</style>