155 lines
4.4 KiB
Vue
155 lines
4.4 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||
<u--form labelPosition="left" :model="model1" ref="uForm" >
|
||
<u-form-item label="管护类型" prop="maintainType" borderBottom ref="item1"
|
||
required
|
||
labelPosition='top'
|
||
labelWidth="100px">
|
||
<u--input v-model="model1.maintainName" disabled disabledColor="#ffffff" placeholder="请选择管护类型"
|
||
border="none" ></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="内容说明" prop="maintainContent" borderBottom labelPosition='top' required labelWidth="100px">
|
||
<u--textarea v-model="model1.maintainContent" placeholder="请输入内容" disabled></u--textarea>
|
||
</u-form-item>
|
||
<u-form-item label="现场图片" prop="fileListpics" borderBottom labelPosition='top' labelWidth="100px">
|
||
<u-upload :fileList="fileListpics" @afterRead="afterRead" @delete="deletePic" name="pics" multiple disabled
|
||
multiple accept='image' :maxCount="10"></u-upload>
|
||
|
||
</u-form-item>
|
||
<u-form-item label="现场视频" prop="fileListvideos" borderBottom labelPosition='top' labelWidth="100px">
|
||
<u-upload :fileList="fileListvideos" @afterRead="afterRead" @delete="deletePic" name="videos" multiple disabled
|
||
multiple accept='video' :maxCount="10"></u-upload>
|
||
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props:{
|
||
formData:Object
|
||
},
|
||
data() {
|
||
return {
|
||
showSex: false,
|
||
fileListpics: [],
|
||
fileListvideos: [],
|
||
model1: {
|
||
maintainContent: "",
|
||
maintainType: '',
|
||
pics: [],
|
||
videos: []
|
||
},
|
||
actions: [{
|
||
value: 1,
|
||
name: "溢洪道清障"
|
||
},
|
||
{
|
||
value: 2,
|
||
name: "除草除杂"
|
||
},
|
||
{
|
||
value: 3,
|
||
name: "设备养护"
|
||
},
|
||
{
|
||
value: 4,
|
||
name: "环境清洁"
|
||
},
|
||
{
|
||
value: 5,
|
||
name: "危险提示"
|
||
},
|
||
{
|
||
value: 6,
|
||
name: "其他"
|
||
},
|
||
],
|
||
radio: '',
|
||
switchVal: false
|
||
};
|
||
},
|
||
mounted() {
|
||
this.model1 = this.formData
|
||
this.model1.maintainName = this.actions.find(item=>item.value == this.formData.maintainType).name
|
||
this.model1.fileListpics = this.formData.pic
|
||
this.model1.fileListvideos = this.formData.videos
|
||
},
|
||
methods: {
|
||
sexSelect(e) {
|
||
this.model1.maintainType = e.name
|
||
this.$refs.uForm.validateField('maintainType')
|
||
},
|
||
submit() {
|
||
this.$refs.uForm.validate().then(res => {
|
||
|
||
let params = {
|
||
...this.model1,
|
||
maintainType: this.actions.find(item => item.name == this.model1.maintainType).value,
|
||
}
|
||
|
||
this.$emit('submitForm', params)
|
||
}).catch(errors => {
|
||
uni.$u.toast('校验失败')
|
||
})
|
||
},
|
||
// 删除图片
|
||
deletePic(event) {
|
||
this[`fileList${event.name}`].splice(event.index, 1)
|
||
},
|
||
// 新增图片
|
||
async afterRead(event) {
|
||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||
let lists = [].concat(event.file)
|
||
console.log(`fileList${event.name}`,event);
|
||
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,event.name)
|
||
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,name) {
|
||
return new Promise((resolve, reject) => {
|
||
let a = uni.uploadFile({
|
||
url: 'http://local.gunshiiot.com:18083/gunshiApp/xyt/maintain/service/file/upload/singleSimple', // 仅为示例，非真实的接口地址
|
||
filePath: url,
|
||
name: 'file',
|
||
formData: {
|
||
user: 'test'
|
||
},
|
||
success: (res) => {
|
||
setTimeout(() => {
|
||
// const obj = this.model1[name].find(item=>item.fileId==res.data.data.fileId)
|
||
// if(obj){
|
||
|
||
// }
|
||
console.log(JSON.parse(res.data),this.model1,name);
|
||
this.model1[name].push({fileId:JSON.parse(res.data).data.fileId})
|
||
resolve(res.data.data)
|
||
}, 1000)
|
||
}
|
||
});
|
||
})
|
||
},
|
||
},
|
||
onReady() {
|
||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
||
this.$refs.uForm.setRules(this.rules)
|
||
},
|
||
};
|
||
</script> |