574 lines
15 KiB
Vue
574 lines
15 KiB
Vue
<template>
|
||
<view class="u-page">
|
||
<u-navbar
|
||
title="表单"
|
||
@leftClick="navigateBack"
|
||
safeAreaInsetTop
|
||
fixed
|
||
placeholder
|
||
></u-navbar>
|
||
<view class="info">
|
||
<view class="u-demo-block__content">
|
||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||
<u--form
|
||
labelPosition="left"
|
||
:model="model1"
|
||
ref="form1"
|
||
labelWidth="100"
|
||
>
|
||
<u-form-item
|
||
label="工程名称"
|
||
prop="userInfo.name"
|
||
@click="
|
||
isName = true
|
||
hideKeyboard()
|
||
"
|
||
:borderBottom="false"
|
||
ref="item1"
|
||
>
|
||
<u--input
|
||
placeholder="请选择"
|
||
v-model="model1.userInfo.name"
|
||
suffixIcon="arrow-right"
|
||
suffixIconStyle="color: #909399"
|
||
></u--input>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="是否发电"
|
||
prop="userInfo.sex"
|
||
:borderBottom="false"
|
||
@click="
|
||
showSex = true
|
||
hideKeyboard()
|
||
"
|
||
ref="item1"
|
||
>
|
||
<u--input
|
||
placeholder="请选择"
|
||
v-model="model1.userInfo.sex"
|
||
suffixIcon="arrow-right"
|
||
suffixIconStyle="color: #909399"
|
||
></u--input>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="是否泄洪"
|
||
prop="isFloodRelease"
|
||
:borderBottom="false"
|
||
@click="
|
||
isRelease = true
|
||
hideKeyboard()
|
||
"
|
||
ref="item1"
|
||
>
|
||
<u--input
|
||
placeholder="请选择"
|
||
v-model="model1.isFloodRelease"
|
||
suffixIcon="arrow-right"
|
||
suffixIconStyle="color: #909399"
|
||
></u--input>
|
||
</u-form-item>
|
||
<!-- 水位(m) -->
|
||
<u-form-item
|
||
label="水位(m)"
|
||
prop="waterLevel"
|
||
:borderBottom="false"
|
||
ref="item3"
|
||
>
|
||
<u--input
|
||
v-model="model1.waterLevel"
|
||
placeholder="请输入"
|
||
border="surround"
|
||
type="number"
|
||
clearable
|
||
></u--input>
|
||
</u-form-item>
|
||
<!-- 入库流量(m³/s)： -->
|
||
<u-form-item label="入库流量(m³/s)" prop="inflowVolume" ref="item3">
|
||
<u--input
|
||
v-model="model1.inflowVolume"
|
||
placeholder="请输入"
|
||
border="surround"
|
||
type="number"
|
||
clearable
|
||
></u--input>
|
||
</u-form-item>
|
||
<!-- 出库流量 (m³/s)： -->
|
||
<u-form-item
|
||
label="出库流量(m³/s)"
|
||
prop="outflowVolume"
|
||
:borderBottom="false"
|
||
ref="item3"
|
||
>
|
||
<u--input
|
||
v-model="model1.outflowVolume"
|
||
placeholder="请输入"
|
||
type="number"
|
||
clearable
|
||
border="surround"
|
||
@blur="BlurText($event)"
|
||
></u--input>
|
||
</u-form-item>
|
||
<!-- 其他运行情况 -->
|
||
<u-form-item
|
||
label="其他运行情况"
|
||
prop="remark"
|
||
:borderBottom="false"
|
||
ref="item3"
|
||
>
|
||
<u--textarea
|
||
placeholder="请输入"
|
||
v-model="model1.remark"
|
||
count
|
||
></u--textarea>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="附件"
|
||
prop="fileList"
|
||
:borderBottom="false"
|
||
ref="item3"
|
||
>
|
||
<u-upload
|
||
:fileList="fileList1"
|
||
@afterRead="afterRead"
|
||
@delete="deletePic"
|
||
name="1"
|
||
multiple
|
||
:maxCount="10"
|
||
></u-upload>
|
||
</u-form-item>
|
||
</u--form>
|
||
<u-button
|
||
type="primary"
|
||
text="提交"
|
||
customStyle="margin-top: 50px"
|
||
@click="submit"
|
||
></u-button>
|
||
<!-- isRelease -->
|
||
<u-action-sheet
|
||
:show="isRelease"
|
||
:actions="actions"
|
||
title="请选择"
|
||
@close="isRelease = false"
|
||
@select="releaseSelect"
|
||
>
|
||
</u-action-sheet>
|
||
<!-- showSex -->
|
||
<u-action-sheet
|
||
:show="showSex"
|
||
:actions="actions"
|
||
title="请选择"
|
||
@close="showSex = false"
|
||
@select="sexSelect"
|
||
>
|
||
</u-action-sheet>
|
||
<!-- -->
|
||
<view v-if="isName">
|
||
<u-popup :show="isName" @close="isName = false" @open="open">
|
||
<view style="padding: 30px 20px">
|
||
<view class="tabs_h">
|
||
<div
|
||
class="leftTab"
|
||
:class="{ activetextTypeTab: showTextTypeTab == 1 }"
|
||
@click="tabChange(1)"
|
||
>
|
||
{{ namelabel }}
|
||
</div>
|
||
<div
|
||
class="rightTab"
|
||
:class="{ activetextTypeTab: showTextTypeTab == 2 }"
|
||
@click="tabChange(2)"
|
||
>
|
||
{{ gclabel }}
|
||
</div>
|
||
</view>
|
||
<!-- 水电站和水库 -->
|
||
<view class="" v-if="isSk">
|
||
<div
|
||
class="ul_list"
|
||
:class="{ activeTypeClass: activeType == 1 }"
|
||
@click="todetail(1, '水库')"
|
||
>
|
||
<div class="left">水库</div>
|
||
<u-icon
|
||
v-if="activeType == 1"
|
||
name="checkmark"
|
||
color="#2286f6"
|
||
size="20"
|
||
></u-icon>
|
||
</div>
|
||
|
||
<div
|
||
class="ul_list"
|
||
:class="{ activeTypeClass: activeType == 2 }"
|
||
@click="todetail(2, '水电站')"
|
||
>
|
||
<div class="left">水电站</div>
|
||
<u-icon
|
||
v-if="activeType == 2"
|
||
name="checkmark"
|
||
color="#2286f6"
|
||
size="20"
|
||
></u-icon>
|
||
</div>
|
||
</view>
|
||
<!-- 具体水库或者水电站 -->
|
||
<view v-else style="height: 300px; overflow-y: auto">
|
||
<div v-for="(item, index) in resList" :key="index">
|
||
<div
|
||
class="ul_list"
|
||
:class="{ activeTypeClass: item.isShow }"
|
||
@click="infoClick(item)"
|
||
>
|
||
<div class="left">{{ item.resName }}</div>
|
||
<u-icon
|
||
v-if="item.isShow"
|
||
name="checkmark"
|
||
color="#2286f6"
|
||
size="20"
|
||
></u-icon>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
showTextTypeTab: 1,
|
||
activeType: '',
|
||
isSk: true,
|
||
resList: [],
|
||
key: '',
|
||
title: {
|
||
1: '运行情况上报',
|
||
2: '工程险情上报',
|
||
3: '实时灾情上报'
|
||
},
|
||
namelabel: '请选择',
|
||
gclabel: '工程',
|
||
fileList1: [],
|
||
disabled1: false,
|
||
tips: '',
|
||
value: '',
|
||
showCalendar: false,
|
||
showBirthday: false,
|
||
model1: {
|
||
userInfo: {
|
||
name: '',
|
||
sex: ''
|
||
},
|
||
isFloodRelease: '',
|
||
waterLevel: '',
|
||
inflowVolume: '',
|
||
outflowVolume: '',
|
||
remark: ''
|
||
},
|
||
showSex: false,
|
||
isRelease: false,
|
||
isName: false,
|
||
|
||
actions: [
|
||
{
|
||
name: '是'
|
||
},
|
||
{
|
||
name: '否'
|
||
}
|
||
],
|
||
rules: {
|
||
'userInfo.name': [
|
||
{
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择工程名称',
|
||
trigger: ['blur', 'change']
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
onLoad (options) {
|
||
this.key = options.key
|
||
console.log('搜索框', options.key)
|
||
this.getresList()
|
||
},
|
||
onReady () {
|
||
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
|
||
this.$refs.form1.setRules(this.rules)
|
||
},
|
||
methods: {
|
||
async getresList () {
|
||
let res = null
|
||
this.resList = []
|
||
res = await uni.$http.get('/gunshiApp/xfflood/webi/resList')
|
||
this.resList = res.data.data.map(item => {
|
||
item.isShow = false
|
||
|
||
return item
|
||
})
|
||
},
|
||
|
||
async gethystList () {
|
||
this.resList = []
|
||
let res = await uni.$http.get('/gunshiApp/xfflood/webi/hystList')
|
||
console.log('res', res.data.data)
|
||
this.resList = res.data.data.map(item => {
|
||
item.isShow = false
|
||
item.resName = item.hystName
|
||
|
||
return item
|
||
})
|
||
},
|
||
|
||
tabChange (val) {
|
||
this.showTextTypeTab = val
|
||
if (val == 1) {
|
||
this.isSk = true
|
||
} else {
|
||
this.isSk = false
|
||
}
|
||
},
|
||
todetail (val, title) {
|
||
this.activeType = val
|
||
this.showTextTypeTab = 2
|
||
this.isSk = false
|
||
this.namelabel = title
|
||
if (val == 1) {
|
||
this.getresList()
|
||
} else {
|
||
this.gethystList()
|
||
}
|
||
},
|
||
infoClick (obj) {
|
||
if (this.activeType == 1) {
|
||
this.resList = this.resList.map(item => {
|
||
if (item.resCode == obj.resCode) {
|
||
item.isShow = true
|
||
this.gclabel = item.resName
|
||
this.model1.userInfo.name = item.resName
|
||
this.$refs.form1.validateField('userInfo.sex')
|
||
} else {
|
||
item.isShow = false
|
||
}
|
||
return item
|
||
})
|
||
} else {
|
||
this.resList = this.resList.map(item => {
|
||
if (item.hystCode == obj.hystCode) {
|
||
item.isShow = true
|
||
this.gclabel = item.resName
|
||
this.model1.userInfo.name = item.resName
|
||
} else {
|
||
item.isShow = false
|
||
}
|
||
return item
|
||
})
|
||
}
|
||
},
|
||
// 删除图片
|
||
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)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
afterRead (event) {
|
||
this.fileList1.push({
|
||
url: event.file,
|
||
status: 'uploading',
|
||
message: '上传中'
|
||
})
|
||
},
|
||
|
||
open () {},
|
||
groupChange (n) {
|
||
// console.log('groupChange', n);
|
||
},
|
||
radioChange (n) {
|
||
// console.log('radioChange', n);
|
||
},
|
||
navigateBack () {
|
||
uni.navigateBack()
|
||
},
|
||
// 是否发电
|
||
sexSelect (e) {
|
||
this.model1.userInfo.sex = e.name
|
||
this.$refs.form1.validateField('userInfo.sex')
|
||
},
|
||
// 是否泄洪
|
||
releaseSelect (e) {
|
||
this.model1.isFloodRelease = e.name
|
||
this.$refs.form1.validateField('isFloodRelease')
|
||
},
|
||
change (e) {
|
||
console.log(e)
|
||
},
|
||
|
||
submit () {
|
||
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
||
this.$refs.form1
|
||
.validate()
|
||
.then(res => {
|
||
uni.$u.toast('校验通过')
|
||
console.log('this.model1', this.model1)
|
||
})
|
||
.catch(errors => {
|
||
uni.$u.toast('校验失败')
|
||
})
|
||
},
|
||
reset () {
|
||
const validateList = ['userInfo.name', 'userInfo.sex', 'radiovalue1']
|
||
this.$refs.form1.resetFields()
|
||
this.$refs.form1.clearValidate()
|
||
setTimeout(() => {
|
||
this.$refs.form1.clearValidate(validateList)
|
||
// 或者使用 this.$refs.form1.clearValidate()
|
||
}, 10)
|
||
},
|
||
hideKeyboard () {
|
||
uni.hideKeyboard()
|
||
},
|
||
// 过滤字符串
|
||
BlurText (e) {
|
||
console.log('e', e)
|
||
let reg = /^\d+$/.test(e)
|
||
if (!reg) {
|
||
// this.
|
||
console.log('22e', e)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
font-size: 14px;
|
||
background-color: #f3f5f8;
|
||
}
|
||
.tabs_h {
|
||
display: flex;
|
||
// justify-content: center;
|
||
align-items: center;
|
||
height: 56rpx;
|
||
line-height: 88rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 12rpx;
|
||
text-align: center;
|
||
}
|
||
.leftTab {
|
||
// width: 80px;
|
||
margin-right: 20px;
|
||
}
|
||
.rightTab {
|
||
// width: 80px;
|
||
}
|
||
.activetextTypeTab,
|
||
.activetextTypeTab:hover {
|
||
border-bottom: 3rpx solid #2286f6;
|
||
color: #026be0;
|
||
}
|
||
.activeTypeClass,
|
||
.activeTypeClass:hover {
|
||
color: #026be0;
|
||
}
|
||
|
||
.nav_bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
margin-top: 30px;
|
||
padding-top: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||
background-color: #fff;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
.nav_bar_tit {
|
||
text-align: center;
|
||
}
|
||
.info {
|
||
background-color: #fff;
|
||
margin-bottom: 12rpx;
|
||
padding: 20px;
|
||
}
|
||
|
||
.fl {
|
||
display: flex;
|
||
justify-content: start;
|
||
align-items: left;
|
||
}
|
||
.flsb {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.u-image {
|
||
width: 100%; /* 或者其他尺寸 */
|
||
transition: transform 0.3s; /* 平滑的放大效果 */
|
||
}
|
||
.ul_list {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 48px;
|
||
// border-bottom: 1px solid #dfdfdf;
|
||
}
|
||
</style>
|