极客观点
项目管理
HarmonyOS
<template>
<div class="page-field">
<CaqmHeader title='附件确认'/>
<div class="main_content">
<div class="page-part">
<mt-field label="附件编号" placeholder="请输入附件编号" v-model="accessoryCode">
<img height="25px" width="25px" src="../assets/search.png" @click="lookup">
</mt-field>
</div>
<div class="page-part">
<mt-field label="结构工艺" v-bind:readonly="true"
type="text" v-model="structureAndProcess">
</mt-field>
<mt-field label="安装形式" v-bind:readonly="true"
type="text" v-model="installationForm">
</mt-field>
<mt-field label="规格" v-bind:readonly="true"
type="text" v-model="specification">
</mt-field>
<mt-field label="系统标称电压" v-bind:readonly="true"
type="text" v-model="systemVoltage">
</mt-field>
<mt-field label="附件类型" v-bind:readonly="true"
type="text" v-model="deviceClassType">
</mt-field>
</div>
<div class="page-part">
<mt-field label="局部放电(PC)" type="text" placeholder="请输入局部放电(PC)"
v-model="partialDischarge" >
</mt-field>
</div>
<div class="page-part">
<mt-field label="是否合格" @click.native="isQualifiedClick"
type="text" placeholder="请选择是否合格" v-model="isQualified"
v-bind:value="isQualifiedOptions.label">
</mt-field>
<mt-popup v-model="isQualifiedPopup" position="bottom" class="mint-popup-4">
<mt-radio title="是否合格" align="right" v-model="isQualifiedValue"
:options="isQualifiedOptions" @change="isQualifiedChange">
</mt-radio>
</mt-popup>
</div>
<div class="page-part">
<mt-field label="评价" @click.native="reserversionClick"
type="text" placeholder="请选择评价" v-model="reserversion"
v-bind:value="reserversionOptions.label">
</mt-field>
<mt-popup v-model="reserversionPopup" position="bottom" class="mint-popup-4">
<mt-radio title="评价" align="right" v-model="reserversionValue"
:options="reserversionOptions" @change="reservationChange">
</mt-radio>
</mt-popup>
</div>
</div>
<div class="page-button-group confirm_btn">
<mt-button size="large" type="primary" @click="confirm">确认完工</mt-button>
</div>
</div>
</template>
<script>
import CaqmHeader from '../components/common/CaqmHeader'import {Toast,MessageBox} from 'mint-ui'
export default {
name: 'confirm',
//初始化数据
data () {
return {
isQualifiedPopup :false,
reserversionPopup : false,
accessoryCode : "",
deviceClassType : "",
structureAndProcess : "",
installationForm : "",
specification : "",
systemVoltage : "",
isQualifiedValue : "",
reserversionValue : "",
partialDischarge : "",
isQualified : "",
reserversion : "",
deviceClassTypeOptions :[{ label : '中间头',
value :'14056' ,
},
{
label : '终端头',
value : '14055',
}],
structureOptions:[{label:'热缩式',
value:'1'},
{label:'预制式',
value:'2'
},
{label:'充油式',
value:'3'
},
{label:'冷缩式',
value:'4'
}],
installationOptions:[{label:'户内',
value:'1'},
{label:'户外',
value:'2'
}],
specificationOptions:[{label:'单芯',
value:'1'},
{label:'三芯',
value:'2'
}],
systemVoltageOptions:[{label:'10KV',
value:'10'},
{label:'20KV',
value:'20'
},
{label:'35KV',
value:'35'
}],
isQualifiedOptions:[{label : '合格',
value : '1'
},
{label : '不合格',
value : '2'
}],
reserversionOptions:[{label : '不合格',
value : '0'
},
{label : '一般',
value : '1'
},
{label : '良好',
value : '2'
},
{label : '优秀',
value : '3'
}]
}
},
components: {
CaqmHeader
},
methods:{
//是否合格单选事件
isQualifiedChange: function(){
console.log(this.isQualifiedValue);
let isQualifiedArray = this.isQualifiedOptions;
for(let i=0; i<isQualifiedArray.length; i++) {
if(isQualifiedArray[i].value == this.isQualifiedValue) {
this.isQualified = isQualifiedArray[i].label;
break;
}
}
this.isQualifiedPopup = false
},
//评价单选事件
reservationChange: function(){
console.log(this.reserversionValue);
let reserversionArray = this.reserversionOptions;
for(let i=0; i<reserversionArray.length; i++) {
if(reserversionArray[i].value == this.reserversionValue) {
this.reserversion = reserversionArray[i].label;
break;
}
}
this.reserversionPopup = false
},
// 是否合格点击事件（单选框）
isQualifiedClick(){
document.activeElement.blur();
this.isQualifiedPopup = true
},
// 评价等级点击事件（单选框）
reserversionClick(){
document.activeElement.blur();
this.reserversionPopup = true
},
// 根据附件编号获取附件信息（http get请求）
lookup(){
console.log(this.accessoryCode);
if (this.accessoryCode && this.accessoryCode !="" && this.accessoryCode !=null) {
this.$http.get('/api/cable/getAccessory/'+this.accessoryCode).then(function (response){
let body = JSON.parse(response.body);
if (body.resultStatus === 'SUCCESS') {
let data = body.data;
var structureAndProcessValue = "";
var installationFormValue = "";
var specificationValue = "";
var systemVoltageValue = "";
var deviceClassTypeValue = "";
let structureAndProcessArray = this.structureOptions;
let installationArray = this.installationOptions;
let specificationArray = this.specificationOptions;
let systemVoltageArray = this.systemVoltageOptions;
let deviceClassTypeArray = this.deviceClassTypeOptions;
this.accessoryCode = data.accessoryCode;
structureAndProcessValue = data.structureAndProcess;
installationFormValue = data.installationForm;
specificationValue = data.specification;
systemVoltageValue = data.systemVoltage;
deviceClassTypeValue = data.deviceClassType;
for (var i = 0; i < structureAndProcessArray.length; i++) {
if (structureAndProcessArray[i].value == structureAndProcessValue){
this.structureAndProcess = structureAndProcessArray[i].label;
break;
}
}
for (var i = 0; i < installationArray.length; i++) {
if(installationArray[i].value == installationFormValue){
this.installationForm = installationArray[i].label;
break
}
}
for (var i = 0; i < specificationArray.length; i++) {
if(specificationArray[i].value == specificationValue){
this.specification = specificationArray[i].label;
break
}
}
for (var i = 0; i < systemVoltageArray.length; i++) {
if(systemVoltageArray[i].value == systemVoltageValue){
this.systemVoltage = systemVoltageArray[i].label;
break
}
}
for (var i = 0; i < deviceClassTypeArray.length; i++) {
if(deviceClassTypeArray[i].value == deviceClassTypeValue){
this.deviceClassType = deviceClassTypeArray[i].label;
break
}
}
}
},(error)=>{
console.log(error);
}
);
}else{
Toast({
message: "请输入附件编号",
position: 'bottom'
});
return;
}
},
// 确认事件
confirm(){
var inValidStr = "";
if(this.accessoryCode.trim() == '') {
inValidStr += "请输入制作编号\t\n";
}
if(this.partialDischarge.trim() == '') {
inValidStr += "请输入局部放电（PC）\t\n";
}
if(this.isQualified.trim() == '') {
inValidStr += "请输入是否合格\t\n";
}
if(this.reserversion.trim() == '') {
inValidStr += "请输入评价等级\t\n";
}
if(inValidStr != "") {
Toast({
message: inValidStr,
position: 'bottom'
});
return;
}
var attachment ={};
let structureAndProcessArray = this.structureOptions;
let installationArray = this.installationOptions;
let specificationArray = this.specificationOptions;
let systemVoltageArray = this.systemVoltageOptions;
let deviceClassTypeArray = this.deviceClassTypeOptions;
let isQualifiedArray = this.isQualifiedOptions;
let reserversionArray = this.reserversionOptions;
for (var i = 0; i < structureAndProcessArray.length; i++) {
if (structureAndProcessArray[i].label == this.structureAndProcess){
attachment.structureAndProcess = structureAndProcessArray[i].value;
break;
}
}
for (var i = 0; i < installationArray.length; i++) {
if(installationArray[i].label == this.installationForm){
attachment.installationForm = installationArray[i].value;
break
}
}
for (var i = 0; i < specificationArray.length; i++) {
if(specificationArray[i].label == this.specification){
attachment.specification = specificationArray[i].value;
break
}
}
for (var i = 0; i < systemVoltageArray.length; i++) {
if(systemVoltageArray[i].label == this.systemVoltage){
attachment.systemVoltage = systemVoltageArray[i].value;
break
}
}
for (var i = 0; i < deviceClassTypeArray.length; i++) {
if(deviceClassTypeArray[i].label == this.deviceClassType){
attachment.deviceClassType = deviceClassTypeArray[i].value;
break
}
}
for (var i = 0; i < isQualifiedArray.length; i++) {
if(isQualifiedArray[i].label == this.isQualified){
attachment.isQualified = isQualifiedArray[i].value;
break
}
}
for (var i = 0; i < reserversionArray.length; i++) {
if(reserversionArray[i].label == this.reserversion){
attachment.reserversion = reserversionArray[i].value;
break
}
}
attachment.accessoryCode = this.accessoryCode;
attachment.partialDischarge = this.partialDischarge;
// Put请求
this.$http.put("http://10.10.60.109:8080/web/app/cable/updateAccessory",attachment,{emulateJSON: true}).then((response)=>{
// 请求成功回调
let body = JSON.parse(response.body);
if (body.resultStatus === 'SUCCESS') {
MessageBox.alert('操作成功');
this.$router.go(-1);
}
},(error)=>{
console.log(error);
MessageBox.alert('操作成功');
this.$router.go(-1);
}
);
}
}
}
</script>
<style>
.page_size{
position: absolute;
width: auto;
height: auto;
overflow: hidden;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 85%;
height: 48px;
/ line-height: 50px; /
}
.right{
position: absolute;
top: 0;
right: 0;
width: 15%;
height: 48px;
}
.img_search{
width: 25px;
height: 25px;
}
.main_content{
overflow: scroll;
width: 100%;
bottom: 56px;
}
.mint-popup-4{
width: 100%;}
.confirm_btn {
position: absolute;
bottom: 0;
width: 100%;
}
</style>
移动端好像有个click延迟的。
使用fastClick插件试试?