2022-06-08 15:48:09 +08:00

313 lines
7.9 KiB
Vue

<template>
<view class="fullHeight">
<headers :showBack="true">
<view class="headerName">
{{pageTitle}}
</view>
</headers>
<view class="formBox">
<form @submit="formSubmit">
<view class="uni-form-item">
<view class="uni-form-label">
<text class="star">*</text>安全培训类型
</view>
<view class="uni-form-input">
<picker @change="bindPickerChange" :value="selectIndex" :range="selectList" range-key="locationName">
<view class="uni-input uni-select cl" v-if="selectIndex==null">
请选择 <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
</view>
<view class="uni-input uni-select" v-else>{{selectList[selectIndex]}}
<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
</view>
</picker>
</view>
</view>
<view class="uni-form-item">
<view class="uni-form-label">
<text class="star">*</text>培训主题
</view>
<view class="uni-form-input">
<input class="uni-input" placeholder-class="cl" name="eduCourseName" :value="form.eduCourseName" placeholder="请输入" />
</view>
</view>
<view class="uni-form-item">
<view class="uni-form-label">
<text class="star">*</text>培训日期
</view>
<view class="uni-form-input">
<picker mode="date" :value="form.eduTime" @change="bindDateChange">
<view class="uni-input uni-select cl" v-if="form.eduTime==''">
请选择 <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
</view>
<view class="uni-input uni-select" v-else>{{form.eduTime}}
<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
</view>
</picker>
</view>
</view>
<view class="uni-form-item">
<view class="uni-form-label">
培训人
</view>
<view class="uni-form-input">
<input class="uni-input" placeholder-class="cl" name="eduTeacher" :value="form.eduTeacher" placeholder="请输入" />
</view>
</view>
<view class="uni-form-item">
<view class="uni-form-label">
培训课时
</view>
<view class="uni-form-input">
<input class="uni-input" placeholder-class="cl" name="eduClasshour" :value="form.eduClasshour" placeholder="请输入" />
</view>
</view>
<view class="uni-form-item">
<view class="uni-form-label">
<text class="star">*</text>培训的工人
</view>
<!-- <view class="uni-form-input" style="text-align: right;">
{{personList.length}}
</view> -->
</view>
<view class="personListBox" @click="goSelectPersonFn">
<view class="personLeft">
<view class="personItem" v-for="(item,index) in personList" :key="index" v-if="index<5">
<view class="name">
{{item.workerName}}
</view>
<view class="txt">
{{item.teamName}}
</view>
</view>
<view class="personItem total">
{{personList.length}}
</view>
</view>
<image src="/static/icon-right.png" class="icon-right"></image>
<!-- <view class="personItem" @click="goSelectPersonFn">
<image src="/static/icon-add.png" style="width: 19px;height: 20px;" class="name"></image>
<view class="txt">
手动添加
</view>
</view>
<view class="personItem">
<image src="/static/icon-add.png" style="width: 19px;height: 20px;" class="name"></image>
<view class="txt">
扫码添加
</view>
</view> -->
</view>
<button form-type="submit" type="primary" class="btn submitBtn big">保存</button>
</form>
</view>
</view>
</template>
<script>
export default {
data() {
return {
pageTitle: '新增安全教育',
selectIndex: null,
selectList: ['入场三级教育', '定期安全教育', '安全技术交底', 'VR安全教育'],
form: {
eduAddr: "",
eduClasshour: 0,
eduContent: "",
eduCourseName: "",
eduPhoto: "",
eduTeacher: "",
eduTime: "",
eduType: 1,
list: [],
workernum: 0,
projectSn: '',
},
personList: [],
projectDetail: {},
isAdd: true
}
},
mounted() {
// console.log(JSON.parse(uni.getStorageSync('projectDetail')))
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
},
onLoad(options) {
if (options.id) {
this.isAdd = false
this.pageTitle='编辑安全教育'
this.getDetails(options.id)
}
},
onShow() {
if (uni.getStorageSync('person')) {
this.personList = JSON.parse(uni.getStorageSync('person'))
}
},
methods: {
goSelectPersonFn() {
uni.navigateTo({
url: './personList'
// url:'../../selectPerson/selectPerson2'
})
},
getDetails(id) {
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
var that = this
this.sendRequest({
url: 'xmgl/workerSafeEducation/queryById',
data: {
id: id,
projectSn:this.projectDetail.projectSn
},
method: "POST",
success(res) {
that.form = res.result.workerSafeEducation
that.personList = res.result.list
that.selectIndex = that.form.eduType - 1
uni.setStorageSync('person', JSON.stringify(that.personList))
}
})
},
bindPickerChange: function(e) {
this.selectIndex = e.target.value
},
bindDateChange: function(e) {
this.form.eduTime = e.target.value
},
formSubmit(e) {
var that = this
console.log(e)
var params = e.detail.value
params.projectSn = this.projectDetail.projectSn
if (this.selectIndex == null) {
uni.showToast({
title: '请选择安全培训类型',
icon: 'none'
})
return false;
}
if (params.eduCourseName == '') {
uni.showToast({
title: '请输入培训主题',
icon: 'none'
})
return false;
}
if (!this.form.eduTime) {
uni.showToast({
title: '请选择培训日期',
icon: 'none'
})
return false;
}
if (!this.personList.length) {
uni.showToast({
title: '请选择参与培训的工人',
icon: 'none'
})
return false;
}
params.eduType = this.selectIndex + 1;
params.eduTime = this.form.eduTime
var arr = [];
this.personList.forEach((element) => {
var item = {
isQualified: element.isQualified,
score: element.score,
workerId: element.workerId,
projectSn:this.projectDetail.projectSn
};
if (!this.isAdd) {
item.eduId = this.form.id;
item.id = element.id;
}
arr.push(item);
});
params.list = arr;
var url = 'xmgl/workerSafeEducation/edit'
if (this.isAdd) {
url = 'xmgl/workerSafeEducation/add'
} else {
params.id = this.form.id
}
this.sendRequest({
url: url,
data: params,
method: "POST",
success(res) {
uni.showToast({
title: '保存成功!'
})
uni.navigateBack({
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
.personListBox {
// background-color: #f7f7f7;
border-radius: 4px;
overflow: hidden;
border-left: 1px dashed #e6e6e6;
position: relative;
.personLeft {
width: calc(100% - 10px);
}
.personItem {
float: left;
width: calc(33.33% - 21px);
height: 54px;
text-align: center;
font-size: 12px;
border-bottom: 1px dashed #e6e6e6;
padding: 0px 10px 0;
border-right: 1px dashed #e6e6e6;
border-top: 1px dashed #e6e6e6;
background-color: #f7f7f7;
.name {
font-size: 15px;
padding-top: 8px;
}
.txt {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&.total {
display: inline-flex;
align-items: center;
font-size: 15px;
justify-content: center;
}
// &:nth-child(3n){
// border-right: none;
// }
}
.icon-right {
position: absolute;
right: 0;
top: calc(50% - 7px);
width: 8px;
height: 14px;
}
}
</style>