erp-el-element/Dialog/break.vue

756 lines
18 KiB
Vue

<template>
<div :v-if="breakshow">
<el-dialog :visible.sync="itemshow" width="56%" top='30vh' append-to-body :close-on-click-modal = "false" :before-close="handleClose">
<div class="scan_box2">
<el-input value="" clearable v-model="text" placeholder="请输入需要评估的机器条码" @input="getnum" />
<i class="iconfont iconsousuo1" style="font-size:28px;" @click="getbreak"></i>
</div>
</el-dialog>
<el-dialog :visible.sync="itemshow2" width="56%" top='5vh' append-to-body :close-on-click-modal = "false" :before-close="handleClose">
<div class="content">
<div style="padding: 15px 15px 0 15px;">当前选择机型:{{phone}}</div>
<div style="margin: 15px;">
<div class="line">
<div class="line_item" :style="width"></div>
</div>
</div>
<div class="list_box">
<div class="list">
<div class="list_item" v-for="(item,index) in list1" :key="index" v-if="item.chooseid<num" :style="index==list1.length-1?'border:none':''" >
<div class="item_title">
<div>({{index+1}}){{item.property_name}}</div>
<div style="display: flex;">
<div class="t1">{{item.text}}</div>
<i class="iconfont iconceshishenqing" style="font-size:20px;font-weight:400;" @click="changelist" :data-index='index'>
<span style='font-size: 14px;'>改</span>
</i>
</div>
</div>
<div class="item_nav" v-if="item.newCreated">
<div class="item" v-for="(item2,index2) in item.children" :key="index2" :class="item2.isChoose==false?'item':'item1'" @click="getGrade(item2,index)" :data-id='item2.id' :data-index='index'>
<div style="word-wrap: normal;">{{item2.property_name}}</div>
</div>
</div>
</div>
</div>
<div style="height: 75px;" v-if="num>list1.length"></div>
<div class="btn_box" v-if="num>list1.length">
<div class="btn" @click="next">下一步</div>
</div>
</div>
</div>
</el-dialog>
<el-dialog :visible.sync="itemshow3" width="56%" top='5vh' append-to-body :close-on-click-modal = "false" :before-close="handleClose">
<div class="content2">
<div style="padding: 15px 15px 0 15px;">当前选择机型:{{phone}}</div>
<div class="list_box">
<div class="list">
<div class="list_text">是否存在以下功能问题</div>
<div class="list_item" v-for="(item,index) in list2" :key='index'>
<div class="item_title">
<div>({{index+1}}){{item.property_name}}(单选)</div>
</div>
<div class="item_nav">
<div class="item" v-for="(item2,index2) in item.children" :key='index2' :class="item2.isChoose==false?'item':'item1'" @click="getGrade2(item2,index)" :data-id='item2.id' :data-index='index'>
<div style="word-wrap: normal;">{{item2.property_name}}</div>
</div>
</div>
</div>
<div class="list_item">
<div class="item_title">
<div>其他功能问题(多选或不选)</div>
</div>
<!-- <checkbox-group name=""> -->
<div class="item_nav">
<div v-for="(item,index) in list3" :key='index' :class="item.isChoose==false?'item':'item1'" @click="getGrade3(item,index)">
<div v-for="(item2,index2) in item.children" :key='index2' v-if="item2.is_preferred==0" :data-id='item.id' :data-index='index' style="display: flex;align-items: center;">
<div style="word-wrap: normal;">{{item2.property_name}}</div>
</div>
</div>
</div>
<!-- </checkbox-group> -->
</div>
</div>
<div style="height: 75px;"></div>
<div class="btn_box">
<div class="btn" @click="next2">确认</div>
</div>
</div>
<!-- 弹窗 -->
<div class="show_box" v-if="show">
<div class="show_bg">
<div class="show_item1">
{{level_name}}
</div>
<div class="show_item2">当前评级为{{level_name}}</div>
<div class="show_item3">
<div class="showbtn1" @click="agree" style="height: 30px;">确定</div>
<!-- <div class="showbtn2" style="height: 30px;" @click="photo">拍摄详情</div> -->
</div>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
var that;
import { pjt_model_fault,recycle_img_save,pjt_fault_level } from "@/api/machineList"; //获取接口
import { MessageBox, Message } from 'element-ui'
export default {
name: "break",
data() {
return {
text:'',
scan_num:'',
// itemshow:false,
itemshow2:false,
itemshow3:false,
show:false,
phone:'',
list1:[],
list2:[],
list3:[],
width:'width:0%',
num:1,
chooselist:[],
level_name:'',
};
},
created() {
that = this
// that.getbreak()
},
computed:{
date() {
var date = new Date();
return date.toLocaleDateString();
},
},
props: {
breakshow: {
type: Boolean,
default: () => {
return false;
},
},
itemshow: {
type: Boolean,
default: () => {
return false;
},
}
},
methods: {
agree(){
that.$emit("showbox", 'false');
that.itemshow2 = false
that.itemshow3 = false
that.text = ''
that.scan_num = ''
that.phone= ''
that.list1= []
that.list2= []
that.list3= []
that.width= 'width:0%'
that.num= 1
that.chooselist= []
that.level_name= ''
that.show = false
},
getnum(e){
that.scan_num = e
},
handleClose(){
that.text = ''
that.scan_num = ''
that.phone= ''
that.list1= []
that.list2= []
that.list3= []
that.width= 'width:0%'
that.num= 1
that.chooselist= []
that.level_name= ''
console.log(that.text)
that.itemshow2 = false
that.itemshow3 = false
that.$emit("showbox", 'false');
// that.$emit("breakshow", 'false');
},
getbreak(){
// that.itemshow = false
if (!!that.scan_num) {
pjt_model_fault({serial_number:that.scan_num}).then((res) => {
console.log('获取故障',res)
var list = res.datas.p_property_list
that.phone = res.datas.model_info
that.model_id = res.datas.model_id
if(list.length!=0){
console.log(1)
that.itemshow2 = true
var arr = []
var arr2 = []
var arr3 = []
list.forEach(function(item,index){
if(item.group_type==1){
arr.push(item)
}
if(item.group_type==2){
arr2.push(item)
}
if(item.group_type==3){
arr3.push(item)
}
})
arr.forEach(function(item,index){
item.newCreated = true
item.chooseid = index
item.children.forEach(function(item2,index2){
item2.isChoose=false
})
})
console.log(12)
arr2.forEach(function(item,index){
item.newCreated = true
item.children.forEach(function(item2,index2){
if(index2==0){
item2.isChoose=true
}else{
item2.isChoose=false
}
})
})
that.list1 = arr
arr3.forEach(function(item,index){
item.isChoose=false
})
that.list3 = arr3
that.list2 = arr2
}else{
Message({
duration:4000,
message: '该机型暂无评估数据',
type: 'warning',
showClose:true,
})
}
});
}else{
this.$message({type:'warning',message:"请输入需要评估的机器条码"})
}
},
getGrade(e,i){//选择故障
// console.log(e.target.parentElement.dataset.index,'index')
var indexid = i
var id = e.id
if(that.num==1){
that.width = 'width:'+100/that.list1.length+'%'
console.log(123)
}
var widthnum = 100/that.list1.length.toFixed(2)
console.log(indexid*1+1, that.num)
if((indexid*1+1)==that.num){
that.num++
that.width = 'width:'+widthnum*(indexid*1+1)+'%'
console.log('n', that.num)
}
that.list1.forEach(function(item,index){
if(indexid == index){
item.newCreated = false
item.children.forEach(function(item2,index2){
// console.log(indexid,index,id)
item2.isChoose=false
if(id == item2.id){
item2.isChoose = true
item.text=item2.property_name
}
})
}
})
console.log(that.list1)
},
changelist(e){
var id = e.target.parentElement.dataset.index
var list = that.list1
that.list1.forEach(function(item,index){
if(id == index){
console.log(id,index)
item.newCreated = !item.newCreated
}
})
},
next(){
var chooselist = []
that.text = ''
that.list1.forEach(function(item,index){
item.children.forEach(function(item2,index2){
if(item2.isChoose == true){
chooselist.push(item2.id)
}
})
})
that.chooselist = chooselist
that.itemshow2 = false
that.itemshow3 = true
},
// 第二版面
backhome(){
uni.switchTab({
url:'../index/index'
})
},
photo(){
uni.reLaunch({
url:'../break_detail/break_detail?level_name='+that.level_name+'&scan_num='+that.scan_num+'&phone='+that.phone
})
},
getGrade2(e,i){//选择故障
console.log(e)
var indexid = i
var id = e.id
that.list2.forEach(function(item,index){
if(indexid == index){
item.newCreated = false
item.children.forEach(function(item2,index2){
console.log(indexid,index,id)
item2.isChoose=false
if(id == item2.id){
item2.isChoose = true
item.text=item2.property_name
}
})
}
})
console.log(that.list2)
},
getGrade3(e,i){//选择其他故障
console.log(e)
var indexid = i
var id = e.id
console.log('tag', indexid)
that.list3.forEach(function(item,index){
if(indexid == index){
item.isChoose=!item.isChoose
}
})
console.log(that.list3)
},
// changelist2(e){
// var id = e.target.parentElement.dataset.index
// var list = that.list2
// that.list2.forEach(function(item,index){
// if(id == index){
// console.log(id,index)
// item.newCreated = !item.newCreated
// }
// })
// console.log(that.list2)
// },
next2(){
// uni.showLoading({
// title:'评估中...'
// })
// Message({
// duration:4000,
// message: '评估中...',
// type: 'success',
// showClose:true,
// })
const loading = this.$loading({
lock: true,
text: '评估中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.5)'
});
// setTimeout(() => {
// loading.close();
// }, 2000);
var chooselist = that.chooselist
that.list2.forEach(function(item,index){
item.children.forEach(function(item2,index2){
if(item2.isChoose == true){
chooselist.push(item2.id)
}
})
})
that.list3.forEach(function(item,index){
if(item.isChoose == true){
item.children.forEach(function(item2,index2){
if(item2.is_preferred == 0){
chooselist.push(item2.id)
}
})
}else{
item.children.forEach(function(item2,index2){
if(item2.is_preferred == 1){
chooselist.push(item2.id)
}
})
}
})
console.log(chooselist,'参数')
pjt_fault_level({property:chooselist,model_id:that.model_id,serial_number:that.scan_num}).then((res) => {
console.log('提交故障',res)
loading.close();
// Message({
// duration:4000,
// message: '评估成功',
// type: 'success',
// showClose:true,
// })
that.level_name = res.datas.level_name
that.show = true
console.log(123)
that.postlevel()
// setTimeout(function() {
// that.$emit("showbox", 'false');
// that.itemshow2 = false
// that.itemshow3 = false
// that.text = ''
// that.scan_num = ''
// that.phone= ''
// that.list1= []
// that.list2= []
// that.list3= []
// that.width= 'width:0%'
// that.num= 1
// that.chooselist= []
// that.level_name= ''
// }, 5000)
});
// post_request('/api/recycle/pjt_fault_level',{property:chooselist,model_id:that.model_id,serial_number:that.scan_num}, (res) =>{
// console.log('提交故障',res)
// uni.hideLoading()
// that.level_name = res.data.datas.level_name
// that.postlevel()
// that.show = true
// })
},
postlevel(){
recycle_img_save({serial_number:21112132480,level_name:that.level_name}).then((res) => {
console.log('保存等级',res)
});
}
},
};
</script>
<style lang="less" scoped>
.scan_box2{
background-color: white;
border-radius: 5px;
box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.14);
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 500px;
margin: 0 auto;
}
input{
width: 80%;
height: 50px;
border-radius: 30px;
border: none;
font-size: 18px;
}
page{
background-color: #FFFFFF;
}
.icon-img{
font-size: 20px;
color: rgba(187, 187, 187, 1);
font-weight: 400;
}
.list_box{
padding: 0 15px;
margin: 15px;
background-color: #FFFFFF;
border-radius: 5px;
font-size: 13px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
}
.list_title{
color: #101010;
font-size: 16px;
font-weight: 600;
height: 50px;
line-height: 50px;
}
.list_item{
border-bottom: 1px solid #ececec;
}
.item_title{
color: #5b5b5b;
font-weight: 600;
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 15px;
}
.item_nav{
flex-wrap: nowrap;
font-size: 13px;
}
.item{
margin-bottom: 10px;
padding: 13px;
text-align: left;
font-size: 13px;
background-color: rgba(187, 187, 187, 0.2);
color: rgba(88, 88, 88, 1.0);
border:1px solid rgba(187, 187, 187, 0.2);
border-radius: 5px;
}
.item1{
margin-bottom: 10px;
padding: 10px;
text-align: left;
font-size: 13px;
background-color: rgba(255,87,48,0.1);
border:1px solid rgba(255,87,48,0.5);
color: #FF5730;
border-radius: 5px;
}
.t1{
width: 175px;
text-align: right;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-right: 5px;
font-size: 13px;
color: #8c8c8c;
}
/* 进度条 */
.line{
height: 10px;
width: 100%;
background-color: #E5E5E5;
border-radius:5px ;
}
.line_item{
height: 10px;
background-color: #FF5730;
border-radius:5px ;
}
/* 按钮 */
.btn_box{
height: 75px;
background-color: #FFFFFF;
width: 100%;
margin: 0 auto;
// box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
}
.btn{
background-color: #FF5730;
color: #FFFFFF;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
width: 80%;
padding: 10px 0;
margin: 10px auto 0;
}
.content2 page{
background-color: #FFFFFF;
}
.content2 .icon-img{
font-size: 20px;
color: rgba(187, 187, 187, 1);
font-weight: 400;
}
.content2 .list_box{
padding: 0 15px;
margin: 15px;
background-color: #FFFFFF;
border-radius: 5px;
font-size: 13px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
}
.content2 .list_title{
color: #101010;
font-size: 16px;
font-weight: 600;
height:50px;
line-height: 50px;
}
.content2 .list_text{
padding: 10px 0;
border-bottom: 1px solid #E5E5E5;
}
.content2 .list_item{
border-bottom: 1px solid #ececec;
}
.content2 .item_title{
color: #5b5b5b;
font-weight: 600;
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 15px;
}
.content2 .item_nav{
font-size: 13px;
display: flex;
align-items: inherit;
justify-content: space-between;
flex-wrap: wrap;
}
.content2 .item{
margin-bottom: 10px;
padding: 10px;
text-align: left;
font-size: 13px;
background-color: rgba(187, 187, 187, 0.2);
color: rgba(88, 88, 88, 1.0);
border:1px solid rgba(187, 187, 187, 0.2);
border-radius: 5px;
width: 48%;
display: flex;
align-items: center;
}
.content2 .item1{
width: 48%;
margin-bottom: 10px;
padding: 10px;
text-align: left;
font-size: 13px;
background-color: rgba(255,87,48,0.1);
border:1px solid rgba(255,87,48,0.5);
color: #FF5730;
border-radius: 5px;
display: flex;
align-items: center;
}
.content2 .t1{
width: 125px;
text-align: right;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-right: 5px;
font-size: 13px;
color: #8c8c8c;
}
/* 按钮 */
.content2 .btn_box{
height: 75px;
background-color: #FFFFFF;
width: 100%;
margin: 0 auto;
}
.content2 .btn{
background-color: #FF5730;
color: #FFFFFF;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
width: 80%;
padding: 10px 0;
margin: 10px auto 0;
}
/* 多选框 */
.content2 checkbox .wx-checkbox-input {
border-radius: 50% !important;
width: 15px;
height: 15px;
}
.content2 checkbox .wx-checkbox-input.wx-checkbox-input-checked {
border-radius: 50% !important;
width: 15px;
height: 15px;
line-height: 15px;
text-align: center;
color: #fff;
background: #FF5730;
border: 1px solid #FF5730;
}
/* 弹窗 */
.content2 .show_box{
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.2);
position: fixed;
top: 0;
left: 0;
overflow: hidden;
z-index: 999;
}
.content2 .show_box image{
width: 110px;
}
.content2 .show_bg{
width: 275px;
background-color: white;
margin: 160px auto 0;
border-radius: 15px;
padding: 20px 15px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.content2 .show_item1{
color: #409eff;
font-size: 40px;
font-weight: 600;
}
.content2 .show_item2{
font-size: 14px;
color: #101010;
margin: 10px;
}
.content2 .show_item3{
display: flex;
align-items: center;
justify-content: center;
margin: 10px 0;
}
.content2 .showbtn2{
padding: 0 18px;
background-color: #409EFF;
border: 1px solid #409EFF;
color: #FFFFFF;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
margin: 0 15px;
}
.content2 .showbtn1{
padding: 0px 18px;
background-color: #FFFFFF;
border: 1px solid #409EFF;
color: #409EFF;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
margin: 0 15px;
}
</style>