<template>
|
<view class="she">
|
<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm">
|
<u-form-item label="员工姓名" labelWidth="120" prop="name" borderBottom required>
|
<u--input v-model="model.name" border="none" placeholder="请输入员工姓名" disabledColor="#ffffff" disabled></u--input>
|
</u-form-item>
|
<u-form-item label="部门" labelWidth="120" prop="companyName" borderBottom required>
|
<u--input v-model="model.companyName" border="none" placeholder="请选择部门" disabledColor="#ffffff"
|
disabled></u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="上报时间" labelWidth="120" prop="submitDate" borderBottom required>
|
<u--input v-model="model.submitDate" border="none" placeholder="请选择上报时间" disabledColor="#ffffff"
|
disabled></u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="发现时间" labelWidth="120" prop="happenTime" borderBottom @click="openF" required>
|
<u--input v-model="model.happenTime" border="none" placeholder="请选择发现时间" disabledColor="#ffffff"
|
disabled></u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="风险类型" labelWidth="120" prop="typeName" borderBottom @click="$refs.pengTree1._show()" required>
|
<u--input v-model="model.typeName" border="none" placeholder="请选择风险类型" disabledColor="#ffffff"
|
disabled></u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="发生地点" labelWidth="120" prop="localtionName" borderBottom @click="$refs.pengTree._show()" required>
|
<u--input v-model="model.localtionName" border="none" placeholder="请选择发生地点" disabledColor="#ffffff"
|
disabled></u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item label="风险描述" labelWidth="120" prop="riskInfo" labelPosition="top" borderBottom required>
|
<u--textarea v-model="model.riskInfo" placeholder="请输入风险描述" style="margin-top: 15rpx;" maxlength="200" count></u--textarea>
|
</u-form-item>
|
<u-form-item label="上传图片" labelWidth="120" prop="multifileList" labelPosition="top" borderBottom>
|
<UploadImage
|
:fileList="model.multifileList"
|
folder="WORKORDER_FILE_PATH"
|
@dele="deletePic"
|
@getFileList="afterRead"
|
style="margin-top: 15rpx;"
|
/>
|
</u-form-item>
|
<u-form-item label="通知人" labelWidth="120" prop="notifier" borderBottom required>
|
<u--textarea v-model="model.notifier" border="none" placeholder="请输入通知人" disabledColor="#ffffff"
|
disabled></u--textarea>
|
</u-form-item>
|
</u--form>
|
<u-button type="primary" text="提交" @click="submit" style="margin-top: 60rpx;"></u-button>
|
<!-- 日期 -->
|
<u-datetime-picker :show="show1" v-model="time" mode="datetime" @cancel="closeF"
|
@confirm="selectTime"></u-datetime-picker>
|
<!-- 提交成功 -->
|
<u-modal :show="show4" showCancelButton confirmText="查看详情" cancelText="继续上报" @cancel="next" @confirm="toDesc">
|
<view class="slot-content">
|
<u-icon name="checkmark-circle-fill" color="#3875C5" size="70"></u-icon>
|
<text>提交成功</text>
|
<text>感谢您的反馈</text>
|
</view>
|
</u-modal>
|
<!-- 发生地点 -->
|
<peng-tree
|
ref="pengTree"
|
:range="address"
|
idKey="id"
|
:selectParent="false"
|
nameKey="name"
|
:multiple="false"
|
title="选择地点"
|
@confirm="selectAddress"
|
@cancel="$refs.pengTree._hide()">
|
</peng-tree>
|
<!-- 风险类型 -->
|
<peng-tree
|
ref="pengTree1"
|
:range="typeList"
|
idKey="id"
|
:selectParent="false"
|
nameKey="name"
|
:multiple="false"
|
title="选择伤害类型"
|
@confirm="selectType"
|
@cancel="$refs.pengTree1._hide()">
|
</peng-tree>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
import UploadImage from '@/components/uploadImage/uploadImage.vue'
|
import pengTree from '@/uni_modules/peng-tree/peng-tree/peng-tree.vue'
|
export default {
|
components: { pengTree, UploadImage },
|
computed: {
|
...mapState(['userInfo'])
|
},
|
data() {
|
return {
|
id: null,
|
model: {
|
name: '',
|
submitDate: uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss'),
|
companyName: '',
|
happenTime: '',
|
localtionId: '',
|
localtionName: '',
|
typeId: '',
|
typeName: '',
|
riskInfo: '',
|
notifier: '',
|
multifileList: [],
|
type: 3
|
},
|
rules: {
|
name: [{
|
type: 'string',
|
required: true,
|
message: '员工姓名不能为空',
|
trigger: ['blur', 'change']
|
}],
|
happenTime: [{
|
type: 'string',
|
required: true,
|
message: '发现时间不能为空',
|
trigger: ['blur', 'change']
|
}],
|
typeName: [{
|
type: 'string',
|
required: true,
|
message: '风险类型不能为空',
|
trigger: ['blur', 'change']
|
}],
|
localtionName: [{
|
type: 'string',
|
required: true,
|
message: '发生地点不能为空',
|
trigger: ['blur', 'change']
|
}],
|
riskInfo: [{
|
type: 'string',
|
required: true,
|
message: '风险描述不能为空',
|
trigger: ['blur', 'change']
|
}],
|
notifier: [{
|
type: 'string',
|
required: true,
|
message: '通知人不能为空',
|
trigger: ['blur', 'change']
|
}],
|
},
|
show: false,
|
show1: false,
|
show2: false,
|
show3: false,
|
show4: false,
|
time: new Date().getTime(),
|
typeList: [],
|
address: []
|
};
|
},
|
onLoad() {
|
this.model.companyName = this.userInfo.companyName
|
this.model.name = this.userInfo.name
|
this.getLocation()
|
this.getType()
|
this.getNotifier()
|
},
|
methods: {
|
openF() {
|
this.stopScroll()
|
this.show1 = true
|
},
|
closeF() {
|
this.canScroll()
|
this.show1 = false
|
},
|
// 获取通知人
|
async getNotifier() {
|
let res = await this.$u.api.managersList({ type: 0 })
|
if (res.code === 200) {
|
this.model.notifier = res.data.map(item => item.memberName).join(',')
|
}
|
},
|
// 选择伤害类型
|
selectType(e) {
|
this.model.typeId = e[0].id
|
this.model.typeName = e[0].name
|
this.$refs.pengTree._hide()
|
},
|
// 选择地点
|
selectAddress(e) {
|
this.model.localtionId = e[0].id
|
this.model.localtionName = e[0].name
|
this.$refs.pengTree._hide()
|
},
|
// 跌绊滑伤害类型
|
async getType() {
|
let res = await this.$u.api.categoryTree({ categoryType: 1 })
|
if (res.code === 200) {
|
this.typeList = res.data
|
}
|
},
|
// 跌绊滑发生地点
|
async getLocation() {
|
let res = await this.$u.api.categoryTree({ categoryType: 2 })
|
if (res.code === 200) {
|
this.address = res.data
|
}
|
},
|
next() {
|
this.canScroll()
|
this.show4 = false
|
},
|
next1() {
|
this.model.submitDate = uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss')
|
this.model.happenTime = ''
|
this.model.localtionId = ''
|
this.model.localtionName = ''
|
this.model.typeId = ''
|
this.model.typeName = ''
|
this.model.riskInfo = ''
|
this.model.multifileList = []
|
this.model.type = 3
|
},
|
toDesc() {
|
uni.navigateTo({
|
url: `/pages/riskDetails/riskDetails?id=${this.id}`
|
})
|
this.canScroll()
|
this.show4 = false
|
},
|
// 删除图片
|
deletePic(index) {
|
this.model.multifileList.splice(index, 1)
|
},
|
// 新增图片
|
async afterRead(arr) {
|
this.model.multifileList = [...this.model.multifileList, ...arr]
|
},
|
// 提交
|
submit() {
|
var that = this
|
that.$refs.uForm.validate().then(async () => {
|
let res = await that.$u.api.workOrderCreate(that.model)
|
if (res.code === 200) {
|
that.next1()
|
that.id = res.data
|
that.stopScroll()
|
that.show4 = true
|
}
|
}).catch(errors => {
|
|
})
|
},
|
changeHandler(e) {
|
const {
|
columnIndex,
|
value,
|
values, // values为当前变化列的数组内容
|
index,
|
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
picker = this.$refs.uPicker
|
} = e
|
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
if (columnIndex === 0) {
|
// picker为选择器this实例，变化第二列对应的选项
|
picker.setColumnValues(1, this.columnData[index])
|
}
|
},
|
// 回调参数为包含columnIndex、value、values
|
confirm(e) {
|
console.log('confirm', e)
|
this.show = false
|
},
|
selectTime(e) {
|
this.model.happenTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
|
this.canScroll()
|
this.show1 = false
|
},
|
selectAddr(e) {
|
console.log('confirm', e)
|
this.show2 = false
|
},
|
selectUser(e) {
|
console.log('confirm', e)
|
this.show3 = false
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.she {
|
width: 100%;
|
padding: 0 30rpx 30rpx 30rpx;
|
box-sizing: border-box;
|
.slot-content {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
text {
|
&:nth-child(2) {
|
color: rgba(16,16,16,1);
|
font-size: 32rpx;
|
margin-top: 24rpx;
|
}
|
&:nth-child(3) {
|
color: rgba(190,190,190,1);
|
font-size: 26rpx;
|
margin-top: 15rpx;
|
}
|
}
|
}
|
}
|
</style>
|
