<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="请输入员工姓名"></u--input>
|
</u-form-item>
|
<u-form-item label="部门" labelWidth="120" prop="name" borderBottom @click="show = true" required>
|
<u--input v-model="model.name" 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="name" borderBottom @click="show1 = true" required>
|
<u--input v-model="model.name" 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="name" borderBottom @click="show1 = true" required>
|
<u--input v-model="model.name" 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="name" borderBottom required>
|
<view style="display: flex; flex-direction: column; width: 100%;">
|
<view
|
style="margin-bottom: 20rpx; display: flex; align-items: center; justify-content: space-between;" @click="show3 = true">
|
<u--input v-model="model.name" 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;">
|
<u--input v-model="model.name" border="none" placeholder="请选择" disabledColor="#ffffff"
|
disabled></u--input>
|
<u-icon name="arrow-right"></u-icon>
|
</view>
|
</view>
|
</u-form-item>
|
<u-form-item label="发生地点" labelWidth="120" prop="name" borderBottom @click="show2 = true" required>
|
<u--input v-model="model.name" 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="name" borderBottom>
|
<u--input v-model="model.name" border="none" placeholder="如选择其它区域请务必填写具体位置"></u--input>
|
</u-form-item>
|
<u-form-item label="是否外部就医" labelWidth="120" prop="value" borderBottom required>
|
<u-radio-group v-model="model.value" 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="name" borderBottom required>
|
<u-radio-group v-model="model.value" 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="name" borderBottom required>
|
<u-radio-group v-model="model.value" 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="name" borderBottom required>
|
<u--input v-model="model.name" 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="name" borderBottom required>
|
<u-radio-group v-model="model.value" 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="name" labelPosition="top" borderBottom required>
|
<u--textarea v-model="model.name" placeholder="请输入事件说明" style="margin-top: 15rpx;" maxlength="200" count></u--textarea>
|
</u-form-item>
|
<u-form-item label="上传图片" labelWidth="120" prop="fileList" labelPosition="top" borderBottom>
|
<u-upload :fileList="model.fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
:maxCount="10" 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-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"
|
@change="changeHandler"></u-picker>
|
<!-- 日期 -->
|
<u-datetime-picker :show="show1" v-model="time" mode="datetime" @cancel="show1 = false"
|
@confirm="selectTime"></u-datetime-picker>
|
<!-- 发生地点 -->
|
<u-picker :show="show2" :columns="address" @cancel="show2 = false" @confirm="selectAddr"></u-picker>
|
<!-- 涉及人员 -->
|
<u-picker :show="show3" :columns="userList" @cancel="show3 = false" @confirm="selectUser"></u-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>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
model: {
|
name: '',
|
value: 0,
|
fileList: []
|
},
|
rules: {
|
name: [{
|
type: 'string',
|
required: true,
|
message: '请填写员工姓名',
|
trigger: ['blur', 'change']
|
}]
|
},
|
show: false,
|
show1: false,
|
show2: false,
|
show3: false,
|
show4: true,
|
columns: [
|
['中国', '美国'],
|
['深圳', '厦门', '上海', '拉萨']
|
],
|
columnData: [
|
['深圳', '厦门', '上海', '拉萨'],
|
['得州', '华盛顿', '纽约', '阿拉斯加']
|
],
|
address: [
|
['中国', '美国', '日本']
|
],
|
userList: [
|
['供应商', '同事', '本人']
|
],
|
time: ''
|
};
|
},
|
methods: {
|
next() {
|
this.show4 = false
|
},
|
toDesc() {
|
uni.navigateTo({
|
url: '/pages/details_she/details_she'
|
})
|
this.show4 = false
|
},
|
// 删除图片
|
deletePic(event) {
|
this[`fileList${event.name}`].splice(event.index, 1);
|
},
|
// 新增图片
|
async afterRead(event) {
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
let lists = [].concat(event.file);
|
let fileListLen = this[`fileList${event.name}`].length;
|
lists.map((item) => {
|
this[`fileList${event.name}`].push({
|
...item,
|
status: "uploading",
|
message: "上传中",
|
});
|
});
|
for (let i = 0; i < lists.length; i++) {
|
const result = await this.uploadFilePromise(lists[i].url);
|
let item = this[`fileList${event.name}`][fileListLen];
|
this[`fileList${event.name}`].splice(
|
fileListLen,
|
1,
|
Object.assign(item, {
|
status: "success",
|
message: "",
|
url: result,
|
})
|
);
|
fileListLen++;
|
}
|
},
|
uploadFilePromise(url) {
|
return new Promise((resolve, reject) => {
|
let a = uni.uploadFile({
|
url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
|
filePath: url,
|
name: "file",
|
formData: {
|
user: "test",
|
},
|
success: (res) => {
|
setTimeout(() => {
|
resolve(res.data.data);
|
}, 1000);
|
},
|
});
|
});
|
},
|
submit() {
|
this.$refs.uForm.validate().then(res => {
|
uni.$u.toast('校验通过')
|
}).catch(errors => {
|
uni.$u.toast('校验失败')
|
})
|
},
|
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) {
|
console.log('confirm', e)
|
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>
|
