<!-- 联动闭锁表单组件 -->
|
<template>
|
<view class="m-form">
|
<view class="m-form-head"><u-icon name="close-circle" color="#fff" size="40" @click="cancel"></u-icon></view>
|
<!-- 修改 -->
|
<view class="m-form-label" v-if="voiceType == 'update'">
|
<u--form labelPosition="left" labelAlign="right" :model="model" :rules="rules" ref="form" labelWidth="100" :labelStyle="{ color: 'rgb(129, 129, 129)' }">
|
<u-form-item label="报警类型" prop="baojtype" borderBottom ref="item">
|
<uni-data-select v-model="model.baojtype" :localdata="rangeLevel" @change="changeRangeLevel"></uni-data-select>
|
</u-form-item>
|
<u-form-item label="语音文字" prop="voicewenzi" borderBottom ref="item">
|
<u--input
|
:customStyle="{
|
'background-color': 'rgb(233, 233, 233)',
|
'box-shadow': 'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'
|
}"
|
|
placeholderStyle="color:#000"
|
color="#000"
|
v-model="model.voicewenzi"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="延迟时间" prop="ycTime" borderBottom ref="item">
|
<u--input
|
:customStyle="{
|
'background-color': 'rgb(233, 233, 233)',
|
'box-shadow': 'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'
|
}"
|
placeholderStyle="color:#000"
|
color="#000"
|
v-model="model.ycTime"
|
border="none"
|
></u--input>
|
</u-form-item>
|
</u--form>
|
</view>
|
<!-- 添加 -->
|
<view class="m-form-label" v-if="voiceType == 'add'">
|
<u--form labelPosition="left" labelAlign="right" :model="model" :rules="rules" ref="form" labelWidth="100" :labelStyle="{ color: 'rgb(129, 129, 129)' }">
|
<u-form-item label="报警类型" prop="baojtype" borderBottom ref="item">
|
<uni-data-select v-model="model.baojtype" :localdata="rangeLevel" @change="changeRangeLevel"></uni-data-select>
|
</u-form-item>
|
<u-form-item label="语音文字" prop="voicewenzi" borderBottom ref="item">
|
<u--input
|
:customStyle="{
|
'background-color': 'rgb(233, 233, 233)',
|
'box-shadow': 'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'
|
}"
|
placeholderStyle="color:#000"
|
color="#000"
|
v-model="model.voicewenzi"
|
border="none"
|
></u--input>
|
</u-form-item>
|
<u-form-item label="延迟时间" prop="ycTime" borderBottom ref="item">
|
<u--input
|
:customStyle="{
|
'background-color': 'rgb(233, 233, 233)',
|
'box-shadow': 'inset 2px 1.464px 5px 0px #ccccc4, 1.464px 1.464px 5px 0px rgba(255, 255, 255, 0.75)'
|
}"
|
placeholderStyle="color:#000"
|
color="#000"
|
v-model="model.ycTime"
|
border="none"
|
></u--input>
|
</u-form-item>
|
</u--form>
|
</view>
|
<view class="m-form-button-list"><u-button type="primary" text="确定" @click="save"></u-button></view>
|
</view>
|
</template>
|
|
<script>
|
import {connChart} from '../../../common/utils.js'
|
import {formatDate} from '../../../common/tools.js'
|
export default {
|
props: {
|
voiceType: String,
|
voiceFormData: Object
|
},
|
data() {
|
return {
|
model: {
|
voicewenzi: '',
|
ycTime:'',
|
baojtype: '',
|
},
|
addModel: {
|
ycTime:'',
|
voicewenzi: '',
|
baojtype: '',
|
},
|
rules: {
|
// voicewenzi: {
|
// validator: (rule, value, callback) => {
|
// // 返回true表示校验通过，返回false表示不通过
|
// var pattern = /^((?![0-9]+$)(?![a-zA-Z]+$)|[0-9A-Za-z]{1,1000})$/;
|
// console.log(pattern.test(value));
|
// return pattern.test(value);
|
// },
|
// required: true,
|
// message: '请输入字母或数字',
|
// trigger: ['blur', 'change']
|
// }
|
},
|
rangeLevel : [{
|
value: '超高报警',
|
text: '超高报警'
|
}, {
|
value: '出作业区',
|
text: '出作业区'
|
}, {
|
value: '非高精度',
|
text: '非高精度'
|
}, {
|
value: '基站离线',
|
text: '基站离线'
|
}],
|
labelModel: null,
|
};
|
},
|
methods: {
|
//保存
|
save() {
|
this.labelModel = connChart('voice')
|
if (this.model.baojtype=='') {
|
uni.$u.toast('报警类型不能为空')
|
return false;
|
}
|
if (this.model.voicewenzi=='') {
|
uni.$u.toast('语音文字不能为空')
|
return false;
|
}
|
if (this.voiceType == 'add') {
|
//查重
|
this.labelModel.find(`baojtype='${this.model.baojtype}'`,(e,r)=>{
|
if(r.length>0){
|
uni.$u.toast('报警类型重复')
|
}else{
|
// var ipa = name+"," +bumen+"," +
|
// this.$emit('submitDrawForm', {
|
// ipa: ipa
|
// });
|
//添加
|
this.labelModel.insert({
|
addTime:formatDate(new Date(),'yyyy-MM-dd hh:mm:ss'),
|
voicewenzi: this.model.voicewenzi,
|
baojtype: this.model.baojtype,
|
ycTime: this.model.ycTime,
|
}, (err, results) => {
|
|
// this.$emit('');
|
});
|
var ipa = this.model.baojtype+"," +this.model.voicewenzi+"," +this.model.ycTime+","
|
console.log(111111111111111111);
|
console.log(ipa);
|
this.$emit('submitvoiceForm', {
|
// type:'',
|
add: ipa
|
});
|
}
|
})
|
} else if (this.voiceType == 'update') {
|
//修改
|
this.labelModel.update(`id='${this.model.id}'`,{
|
|
baojtype: this.model.baojtype,
|
voicewenzi: this.model.voicewenzi,
|
ycTime: this.model.ycTime,
|
},(err,results)=>{
|
var ipa = this.model.baojtype+"," +this.model.voicewenzi+"," +this.model.ycTime+","
|
console.log(ipa);
|
this.$emit('submitvoiceForm', {
|
// type:'',
|
update: ipa
|
});
|
// this.$emit('submitvoiceForm');
|
});
|
}
|
},
|
changeRangeLevel(e) {
|
this.baojtype = e;
|
this.model.baojtype = e;
|
},
|
//取消
|
cancel() {
|
this.$emit('cancelvoiceForm');
|
},
|
connDB() {
|
this.labelModel = connChart('voice')
|
}
|
},
|
mounted() {
|
if (this.voiceType == 'add') {
|
// this.model = this.addModel;
|
} else if (this.voiceType == 'update') {
|
this.model = this.voiceFormData;
|
}
|
this.connDB();
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.m-form {
|
position: fixed;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: rgba(233, 233, 233, 0.95);
|
width: 60%;
|
display: flex;
|
flex-direction: column;
|
z-index: 99999;
|
}
|
.m-form-head {
|
width: 100%;
|
border-bottom: 1px solid #fff;
|
}
|
.m-form-head .u-icon {
|
float: right;
|
}
|
/deep/ .u-form-item__body__left__content__label {
|
color: #fff;
|
}
|
.m-form-label {
|
width: 80%;
|
margin: 0 auto;
|
margin-bottom: 0.5em;
|
}
|
input {
|
width: 50px;
|
}
|
.m-form-button-list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 1em;
|
}
|
.m-form-button-list .u-button {
|
width: 5em;
|
}
|
.m-form-button-list .u-button:nth-child(2),
|
.m-form-button-list .u-button:nth-child(3),
|
.m-form-button-list .u-button:nth-child(4) {
|
margin-top: 2em;
|
}
|
</style>
|
