387 lines
8.7 KiB
Vue
387 lines
8.7 KiB
Vue
<template>
|
||
<view class="fullHeight addNoticePage">
|
||
<!-- <view class="add-header">
|
||
<view class="backBtn" @click="back">
|
||
<uni-icons2 type="back" color="#fff" size="26"/>
|
||
</view>
|
||
新建通知
|
||
</view> -->
|
||
<view class="fixedheader">
|
||
<headers :themeType="true" :showBack="true">
|
||
<view class="headerName">
|
||
新建通知
|
||
</view>
|
||
</headers>
|
||
</view>
|
||
<scroll-view class="smallHeight" :style="{ 'padding-top': statusBarHeight + 44 + 'px' }" scroll-y>
|
||
<view class="add-from">
|
||
<view class="add-item">
|
||
<view class="input-box">
|
||
<input type="text" placeholder="请输入标题" v-model="noticeTitle"/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content">
|
||
<span class="content-lable">内容</span>
|
||
<!-- <view class="textarea-box">
|
||
<textarea :value="noticeContent"/>
|
||
</view> -->
|
||
<view class="textarea-box">
|
||
<input type="text" placeholder="请输入内容" v-model="noticeContent"/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="add-item">
|
||
<view class="add-item">
|
||
<view class="project-select">
|
||
<view class="icon-image">
|
||
<image src="/static/workstation/icon_allot_bg.png"></image>
|
||
发送给
|
||
</view>
|
||
<view class="project-picker">
|
||
<view class="people-text">{{allotPeople}}</view>
|
||
<view class="uni-input" @click="toPeopleList">
|
||
<uni-icons2 type="arrowright" color="#6C7178" size="20"/>
|
||
</view>
|
||
<!-- {{sendPeople}} -->
|
||
<!-- <view class="uni-list-cell-db">
|
||
<picker :range="peopleList" range-key="name" :value="sendPeople" @change="bindPeopleChange">
|
||
<view class="uni-input">
|
||
<uni-icons2 type="arrowright" color="#6C7178" size="20"/>
|
||
</view>
|
||
</picker>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="add-item">
|
||
<view class="project-select" @click="selectFile">
|
||
<view class="icon-image">
|
||
<image src="/static/workstation/icon_file_address_bg.png"></image>
|
||
添加附件
|
||
</view>
|
||
<!-- <view class="input project-upload" @click="selectFile2(index)">
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="project-filelist" v-if="fileList.length > 0">
|
||
<ul>
|
||
<li v-for="(item,index) in fileList" :key="index">
|
||
{{item.name}}
|
||
<icon type="cancel" size="16" @click="removeFive(index)"/>
|
||
<!-- <image :src="item.url" @click="previewImage(item.url)"/></image> -->
|
||
<!-- <uni-icons2 class="icon-close" type="close" color="#6C7178" size="12"></uni-icons2> -->
|
||
</li>
|
||
</ul>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="submit-btn" @click="submitForm">提交通知</view>
|
||
</scroll-view>
|
||
<levitatedsphere :x="100" :y="80"></levitatedsphere>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
|
||
import headers from '../../../components/headers/headers.vue'
|
||
export default {
|
||
data(){
|
||
return{
|
||
noticeTitle: '',
|
||
noticeContent: '',
|
||
fileList: [],
|
||
allotPeople: "",
|
||
checkPeopleList: [],
|
||
noticePeopleId: [],
|
||
fileUrl: '',
|
||
statusBarHeight: 0
|
||
}
|
||
},
|
||
components:{
|
||
headers
|
||
},
|
||
onShow(){
|
||
this.projectSn = JSON.parse(uni.getStorageSync('userInfo')).sn;
|
||
this.statusBarHeight=uni.getStorageSync('systemInfo').statusBarHeight;
|
||
this.userId = JSON.parse(uni.getStorageSync('userInfo')).userId
|
||
if(uni.getStorageSync('attendee')){
|
||
this.checkPeopleList = JSON.parse(uni.getStorageSync('attendee'))
|
||
let arr = []
|
||
this.noticePeopleId = []
|
||
this.checkPeopleList.forEach(item=>{
|
||
arr.push(item.workerName)
|
||
this.noticePeopleId.push({
|
||
noticeUser: item.userId
|
||
})
|
||
})
|
||
this.allotPeople = arr.join('，')
|
||
}
|
||
},
|
||
methods:{
|
||
back(){
|
||
uni.navigateBack({
|
||
url: ''
|
||
})
|
||
},
|
||
selectFile(){
|
||
var that = this
|
||
uni.chooseImage({
|
||
count: 5 - that.fileList.length,
|
||
success(res) {
|
||
const tempFilePaths = res.tempFilePaths;
|
||
console.log(res)
|
||
let data = {
|
||
name: res.tempFiles[0].name,
|
||
url: tempFilePaths[0]
|
||
};
|
||
// that.fileList.push(data)
|
||
// console.log(that.fileList)
|
||
uni.uploadFile({
|
||
url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
|
||
filePath: tempFilePaths[0],
|
||
name: 'files',
|
||
success: (uploadFileRes) => {
|
||
console.log(uploadFileRes)
|
||
let data = {
|
||
name: JSON.parse(uploadFileRes.data).data[0].filename,
|
||
url: JSON.parse(uploadFileRes.data).data[0].imageUrl
|
||
};
|
||
that.fileList.push(data)
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
previewImage(url){
|
||
let imgArr = [];
|
||
imgArr.push(url);
|
||
//预览图片
|
||
uni.previewImage({
|
||
urls: imgArr,
|
||
current: imgArr[0]
|
||
});
|
||
},
|
||
removeFive(index){
|
||
this.fileList.splice(index, 1)
|
||
},
|
||
toPeopleList(){
|
||
uni.navigateTo({
|
||
url: '../workstationIndex/peopleList'
|
||
})
|
||
},
|
||
submitForm(){
|
||
// console.log(1)
|
||
let data = {}
|
||
if(!this.noticeTitle){
|
||
uni.showToast({
|
||
title: '标题名称不能为空！',
|
||
icon: "none",
|
||
duration: 2000
|
||
});
|
||
return;
|
||
} else {
|
||
data.noticeTitle = this.noticeTitle
|
||
}
|
||
if(!this.noticeContent){
|
||
uni.showToast({
|
||
title: '内容不能为空！',
|
||
icon: "none",
|
||
duration: 2000
|
||
});
|
||
return;
|
||
} else {
|
||
data.noticeContent = this.noticeContent
|
||
}
|
||
if(this.noticePeopleId.length > 0){
|
||
data.userList = this.noticePeopleId
|
||
} else {
|
||
uni.showToast({
|
||
title: '请选择通知人！',
|
||
icon: "none",
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
let fileArr = []
|
||
for(let i = 0; i<this.fileList.length; i++){
|
||
fileArr.push(this.fileList[i].url)
|
||
}
|
||
data.projectSn = this.projectSn
|
||
data.fileUrl = fileArr.length > 0 ? fileArr.join(',') : ''
|
||
data.createUser = this.userId
|
||
// console.log(data)
|
||
this.sendRequest({
|
||
url: "xmgl/workstationNotice/add",
|
||
data: data,
|
||
method: "POST",
|
||
success(res){
|
||
console.log(res)
|
||
if(res.code){
|
||
uni.navigateTo({
|
||
url: './worfStationNotice'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.fixedheader{
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 2;
|
||
}
|
||
.smallHeight{
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.addNoticePage{
|
||
position: relative;
|
||
background: #f6f6f6;
|
||
box-sizing: border-box;
|
||
.add-header{
|
||
height: 92rpx;
|
||
width: 100%;
|
||
background: #127FEC;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
.backBtn{
|
||
width: 60rpx;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
.add-item{
|
||
background-color: #fff;
|
||
border-bottom: 1px solid rgba(246, 246, 246, 1);
|
||
height: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
.input-box{
|
||
width: 100%;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.content{
|
||
background-color: #fff;
|
||
border-bottom: 1px solid rgba(246, 246, 246, 1);
|
||
align-items: center;
|
||
width: 100%;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.content-lable{
|
||
margin-bottom: 32rpx;
|
||
display: block;
|
||
}
|
||
.textarea-box{
|
||
border: 1px solid #E1E1E4;
|
||
width: 692rpx;
|
||
height: 100rpx;
|
||
border-radius: 16rpx;
|
||
// :deep( uni-textarea){
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// padding: 20rpx;
|
||
// box-sizing: border-box;
|
||
// }
|
||
:deep( uni-input){
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.project-select{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
.icon-image{
|
||
display: flex;
|
||
align-items: center;
|
||
color: #979797;
|
||
font-size: 28rpx;
|
||
white-space: nowrap;
|
||
image{
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
}
|
||
.project-picker{
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
.uni-list-cell-db{
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.project-filelist{
|
||
background-color: #fff;
|
||
border-bottom: 1px solid rgba(246, 246, 246, 1);
|
||
width: 100%;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
ul{
|
||
// display: flex;
|
||
// align-items: center;
|
||
list-style: none;
|
||
padding: 20rpx;
|
||
// flex-wrap: wrap;
|
||
li{
|
||
display: flex;
|
||
align-items: center;
|
||
height: 48rpx;
|
||
justify-content: space-between;
|
||
// position: relative;
|
||
// image{
|
||
// width: 100rpx;
|
||
// height: 100rpx;
|
||
// margin: 0 10rpx;
|
||
// }
|
||
// .icon-close{
|
||
// position: absolute;
|
||
// right: 8rpx;
|
||
// top: -8rpx;
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
.submit-btn{
|
||
width: 100%;
|
||
height: 94rpx;
|
||
background: #127FEC;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 94rpx;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
.people-text{
|
||
overflow: hidden;
|
||
text-overflow:ellipsis;
|
||
white-space: nowrap;
|
||
width: 400rpx;
|
||
text-align: right;
|
||
}
|
||
</style>
|