<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="openTime" 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="memberTypeName" borderBottom required>
|
<view style="display: flex; flex-direction: column; width: 100%;">
|
<view
|
style="display: flex; align-items: center; justify-content: space-between;" @click="openSJ">
|
<u--input v-model="model.memberTypeName" border="none" placeholder="请选择人员类型" disabledColor="#ffffff"
|
disabled></u--input>
|
<u-icon name="arrow-right"></u-icon>
|
</view>
|
<template v-if="model.memberTypeName">
|
<view style="display: flex; align-items: center; justify-content: space-between; margin-top: 30rpx;" @click="seleUser" v-if="model.memberType === 1">
|
<u--input v-model="model.memberNames" border="none" placeholder="请选择" disabledColor="#ffffff"
|
disabled></u--input>
|
<u-icon name="arrow-right"></u-icon>
|
</view>
|
<view style="display: flex; align-items: center; justify-content: space-between; margin-top: 30rpx;" v-if="model.memberType === 2">
|
<u--input v-model="model.memberNames" border="none" placeholder="请输入供应商名称"></u--input>
|
</view>
|
</template>
|
</view>
|
</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="remark" borderBottom>
|
<u--input v-model="model.remark" border="none" placeholder="如选择其它区域请务必填写具体位置"></u--input>
|
</u-form-item>
|
<u-form-item label="是否外部就医" labelWidth="120" prop="outJiuyi" borderBottom required>
|
<u-radio-group v-model="model.outJiuyi" placement="row" @change="model.isYiwushi = ''; model.isHurted = ''">
|
<u-radio label="否" name="0"></u-radio>
|
<u-radio label="是" name="1"></u-radio>
|
</u-radio-group>
|
</u-form-item>
|
<u-form-item label="是否医务室" labelWidth="120" prop="isYiwushi" borderBottom required v-if="model.outJiuyi === '0'">
|
<u-radio-group v-model="model.isYiwushi" placement="row" @change="model.isHurted = ''">
|
<u-radio label="否" name="0"></u-radio>
|
<u-radio label="是" name="1"></u-radio>
|
</u-radio-group>
|
</u-form-item>
|
<u-form-item label="是否受伤" labelWidth="120" prop="isHurted" borderBottom required v-if="model.isYiwushi === '0'">
|
<u-radio-group v-model="model.isHurted" placement="row">
|
<u-radio label="否" name="0"></u-radio>
|
<u-radio label="是" name="1"></u-radio>
|
</u-radio-group>
|
</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="workRelated" borderBottom required>
|
<u-radio-group v-model="model.workRelated" placement="row">
|
<u-radio label="否" name="0"></u-radio>
|
<u-radio label="是" name="1"></u-radio>
|
</u-radio-group>
|
</u-form-item>
|
<u-form-item label="事件说明" labelWidth="120" prop="eventInfo" labelPosition="top" borderBottom required>
|
<u--textarea v-model="model.eventInfo" placeholder="请输入事件说明" style="margin-top: 15rpx;" maxlength="200" count></u--textarea>
|
</u-form-item>
|
<u-form-item label="上传图片" labelWidth="120" prop="multifileList" labelPosition="top" borderBottom>
|
<u-upload
|
:fileList="model.multifileList"
|
@afterRead="afterRead"
|
@delete="deletePic"
|
accept="image"
|
multiple
|
name="1"
|
style="margin-top: 15rpx;"></u-upload>
|
</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="closeTime"
|
@confirm="selectTime"></u-datetime-picker>
|
<!-- 人员类型 -->
|
<u-picker
|
:show="show3"
|
:columns="userList"
|
@cancel="closeRY"
|
@confirm="selectUser"
|
@change="changeUser" />
|
<!-- 提交成功 -->
|
<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 pengTree from '@/uni_modules/peng-tree/peng-tree/peng-tree.vue'
|
export default {
|
components: { pengTree },
|
computed: {
|
...mapState(['userInfo'])
|
},
|
data() {
|
return {
|
model: {
|
name: '',
|
submitDate: uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM'),
|
companyName: '',
|
happenTime: '',
|
memberType: '',
|
memberTypeName: '',
|
memberNames: '',
|
memberQwids: '',
|
localtionId: '',
|
localtionName: '',
|
remark: '',
|
outJiuyi: '',
|
isYiwushi: '',
|
isHurted: '',
|
typeId: '',
|
typeName: '',
|
workRelated: '',
|
eventInfo: '',
|
multifileList: [],
|
fileList: [],
|
type: 0
|
},
|
rules: {
|
happenTime: [{
|
type: 'string',
|
required: true,
|
message: '发生时间不能为空',
|
trigger: ['blur', 'change']
|
}],
|
memberTypeNam: [{
|
type: 'string',
|
required: true,
|
message: '涉及人员不能为空',
|
trigger: ['blur', 'change']
|
}],
|
memberTypeName: [
|
{
|
validator: (rule, value, callback) => {
|
if (value === '本人') {
|
callback()
|
} else if ((value && value !== '本人') && this.model.memberNames) {
|
callback()
|
} else {
|
callback(new Error('不能为空'))
|
}
|
},
|
trigger: ['change','blur'],
|
}
|
],
|
localtionName: [{
|
type: 'string',
|
required: true,
|
message: '发生地点不能为空',
|
trigger: ['blur', 'change']
|
}],
|
outJiuyi: [{
|
type: 'string',
|
required: true,
|
message: '是否外部就医不能为空',
|
trigger: ['blur', 'change']
|
}],
|
isYiwushi: [{
|
type: 'string',
|
required: true,
|
message: '是否医务室不能为空',
|
trigger: ['blur', 'change']
|
}],
|
isHurted: [{
|
type: 'string',
|
required: true,
|
message: '是否受伤不能为空',
|
trigger: ['blur', 'change']
|
}],
|
typeName: [{
|
type: 'string',
|
required: true,
|
message: '伤害类型不能为空',
|
trigger: ['blur', 'change']
|
}],
|
workRelated: [{
|
type: 'string',
|
required: true,
|
message: '是否和工作相关不能为空',
|
trigger: ['blur', 'change']
|
}],
|
eventInfo: [{
|
type: 'string',
|
required: true,
|
message: '事件说明不能为空',
|
trigger: ['blur', 'change']
|
}],
|
},
|
show1: false,
|
show3: false,
|
show4: false,
|
address: [],
|
typeList: [],
|
userList: [
|
['本人', '同事', '供应商']
|
],
|
time: new Date().getTime(),
|
id: null
|
};
|
},
|
onLoad() {
|
this.model.companyName = this.userInfo.companyName
|
this.model.name = this.userInfo.name
|
this.getLocation()
|
this.getType()
|
},
|
methods: {
|
closeTime() {
|
this.show1 = false
|
this.canScroll()
|
},
|
openTime() {
|
this.show1 = true
|
this.stopScroll()
|
},
|
closeRY() {
|
this.show3 = false
|
this.canScroll()
|
},
|
openSJ() {
|
this.show3 = true
|
this.stopScroll()
|
},
|
seleUser() {
|
var that = this
|
that.$ww.selectEnterpriseContact({
|
fromDepartmentId: -1,
|
mode: 'multi',
|
type: ['user'],
|
}).then(res =>{
|
console.log(res)
|
if (res.errCode === 0) {
|
this.model.memberNames = res.result.userList.map(item => item.name).join(',')
|
this.model.memberQwids = res.result.userList.map(item => item.id).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()
|
},
|
changeUser(e) {
|
console.log(e)
|
},
|
// 获取发生地点树
|
async getLocation() {
|
let res = await this.$u.api.categoryTree({ categoryType: 5 })
|
if (res.code === 200) {
|
this.address = res.data
|
}
|
},
|
// 获取伤害类型
|
async getType() {
|
let res = await this.$u.api.categoryTree({ categoryType: 0 })
|
if (res.code === 200) {
|
this.typeList = res.data
|
}
|
},
|
next() {
|
this.model.name = ''
|
this.model.submitDate = uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM')
|
this.model.companyName = ''
|
this.model.happenTime = ''
|
this.model.memberType = ''
|
this.model.memberTypeName = ''
|
this.model.memberNames = ''
|
this.model.memberQwids = ''
|
this.model.localtionId = ''
|
this.model.localtionName = ''
|
this.model.remark = ''
|
this.model.outJiuyi = ''
|
this.model.isYiwushi = ''
|
this.model.isHurted = ''
|
this.model.typeId = ''
|
this.model.typeName = ''
|
this.model.workRelated = ''
|
this.model.eventInfo = ''
|
this.model.multifileList = []
|
this.model.fileList = []
|
this.model.type = 0
|
this.canScroll()
|
this.show4 = false
|
},
|
toDesc() {
|
uni.navigateTo({
|
url: `/pages/details_she/details_she?id=${this.id}`
|
})
|
this.canScroll()
|
this.show4 = false
|
},
|
// 删除图片
|
deletePic(event) {
|
this.model.multifileList.forEach((item, index) => {
|
if (item.imgaddr === event.file.imgaddr) {
|
this.model.multifileList.splice(index, 1)
|
}
|
})
|
},
|
// 新增图片
|
async afterRead(event) {
|
var that = this
|
uni.showLoading({ title: '上传中...', mask: true })
|
uni.uploadFile({
|
url: this.$baseUrl + '/web/public/uploadBatch',
|
files: event.file.map(e => {
|
return { name: 'files', uri: e.url }
|
}),
|
formData: {
|
folder: "WORKORDER_FILE_PATH",
|
},
|
success(res) {
|
uni.hideLoading();
|
let obj = JSON.parse(res.data)
|
if (obj.code === 200) {
|
console.log(obj.data)
|
obj.data.forEach(item => {
|
item.fileurl = item.imgaddr
|
})
|
that.model.multifileList = [...that.model.multifileList, ...obj.data]
|
}
|
}
|
})
|
},
|
// 提交
|
submit() {
|
var that = this
|
that.$refs.uForm.validate().then(async () => {
|
let form = JSON.parse(JSON.stringify(that.model))
|
form.submitDate = form.submitDate + ':00'
|
form.happenTime = form.happenTime + ':00'
|
let res = await that.$u.api.workOrderCreate(form)
|
if (res.code === 200) {
|
that.id = res.data
|
this.stopScroll()
|
that.show4 = true
|
}
|
}).catch(errors => {
|
|
})
|
},
|
selectTime(e) {
|
this.model.happenTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM'),
|
this.canScroll()
|
this.show1 = false
|
},
|
selectUser(e) {
|
this.model.memberType = e.indexs[0]
|
this.model.memberTypeName = e.value[0]
|
this.model.memberNames = ''
|
this.model.memberQwids = ''
|
this.show3 = false
|
this.canScroll()
|
}
|
}
|
}
|
</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>
|
