FMA
{% extends base %}
{% load static %}
{% block content %}
<link rel="stylesheet" type="text/css" href="{% static '/css/runmes.css' %}">
<style type="text/css">
#fma_main{
float: left;
width: 25%;
height: 40%;
}
<!-- #app {-->
<!-- float: left;-->
<!-- width: 75%;-->
<!-- height: 40%;-->
<!-- margin: 0 auto;-->
<!-- }-->
#tab-tilte{
width: 100%;
}
#tab-tilte div{
float: left;
width: 45%;
margin: 0 0 5px 0;
text-align: center;
}
/* 点击对应的标题添加对应的背景颜色 */
#tab-tilte .active{
<!-- background-color: #09f;-->
<!-- color: #fff;-->
background-color: white;
color: #fff;
}
.fma_reply{
overflow: auto;
width: 100%;
<!-- height: 280px;-->
border: 1px solid #ccc;
}
.control{
float:left;
}
#app{
width: 100%;
height: 40%;
<!-- border: 1px solid #ccc;-->
}
</style>
<div id="judge_fma">
<div id="fma_main">
<h3>{{ load_title }}</h3>
<br><br>
<form v-on:submit.prevent='submitPost'>
{{form.as_p}}
<template>
<p v-show="select_show"><label for="id_type">Type:</label> <select name="type" v-model="reasoncode_type" id="id_type">
<option value="M">Materials damage</option>
<option value="P">Process damage</option>
</select></p>
<p v-show="select_show"><label for="id_reasoncode">ReasonCode:</label>
<select name="reasoncode" v-model="reasoncode" required id="id_reasoncode" >
<option v-for="(item,i) in reason_code" :value=((item.superreasoncode))>
((item.reasoncode))
</option>
</select></p>
<p v-show="select_show"><label for="id_remark">Remark:</label> <input type="text" name="remark" v-model="remark" maxlength="30" id="id_remark"></p>
</template>
<div class="control">
<input type='submit' value='{{ button_name }}'>
<input type='button' value='Add' v-on:click="addFMA" formnovalidate="formnovalidate">
</div>
</form>
<br><br><br>
</div>
<div class="col-xs-8">
<div id="app" v-show="isShow">
<div id="tab-tilte" class="h4 col-xs-8 alert alert-danger">
<div v-show="table1.text_show" @click="cur=0" :class="{active:cur==0}">Defect List</div>
<div v-show="table2.text_show" @click="cur=2" :class="{active:cur==2}">FMA Reasult list</div>
</div>
<div class="tab-content">
<div v-show="cur==0">
<div id="fma_defect_list" class="fma_reply" v-show="table1.list_show">
<table class="table table-hover table-striped table-bordered compact">
<thead>
<tr>
<th scope="col">Majordefect</th>
<th scope="col">Lotid</th>
<th scope="col">Defectcode</th>
<th scope="col">Flag</th>
<th scope="col">Grade</th>
</tr>
</thead>
<tbody>
<tr v-for="(i,key) in table1.items">
<td>((i.majordefect))</td>
<td>((i.lotid))</td>
<td>((i.defectcode))</td>
<td>((i.flag))</td>
<td>((i.grade))</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- <div v-show="cur==1">内容二</div>-->
<div v-show="cur==2">
<div id="fma_FMA_Reasult_list" class="fma_reply" v-show="table2.list_show">
<table class="table table-hover table-striped table-bordered compact">
<thead>
<tr>
<th scope="col">Major</th>
<th scope="col">LotId</th>
<th scope="col">TimeKey</th>
<th scope="col">DefectCode</th>
<th scope="col">ReasonCode</th>
<th scope="col">Judge</th>
<th scope="col">Remark</th>
<th scope="col">Delect</th>
</tr>
</thead>
<tbody>
<tr v-for="(i,index) in table2.items">
<td><input type="radio" v-model="major" :value="index" v-on:click="onMajor(index)" :disabled="isMajor"></td>
<td>((i.lotid))</td>
<td>((i.timekey))</td>
<td>((i.defectcode))</td>
<td>((i.reasoncode))</td>
<td>((i.dutycode))</td>
<td>((i.remark))</td>
<td>
<button v-on:click="deleteLot(i)" class="delete"></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div id='reply' v-show="return_msg"></div>
</div>
<script type="text/javascript">
const item1 = {{ data_list|safe }};
const rea_list = {{ reason_list|safe }};
const reasoncode_list = {{ reasoncode_list|safe}};
var app = new Vue({
el: "#judge_fma",
data: {
op:'{{op}}',
cur:0 ,//默认选中第一个tab
judge: 'PASS',
eq: '',
lot: '',
remark: '',
reasoncode: 'M',
reasoncode_type: 'M',
return_msg: false,
isMajor: false,
major: "0",
form: new Form({}),
select_show: false,
isShow: false,
table1: {
list_show: false,
text_show: false,
items: [],
},
table2: {
list_show: false,
text_show: false,
items: [],
},
},
methods:{
addFMA:function(){
var value = this.lot;
if (!value) {
console.log('value is null')
alert('Value is NULL');
return
}
var defect_status = this.judge;
if (this.judge == "PASS"){
alert('Please Choice SCRAP');
return
}
var value = this.table1.items.length;
if(value == 0){
alert('Defect List IS NULL');
return
}
this.cur = 2;
var value = this.table1.items.length;
for(let i = 0; i < value; i++){
if(this.table1.items[i].majordefect==true){
tmpObj = {
lotid: this.table1.items[i].lotid,
timekey: this.table1.items[i].timekey,
defectcode: this.table1.items[i].defectcode,
reasoncode: this.reasoncode_type,
dutycode: this.judge,
remark: this.remark,
}
this.table2.text_show = true;
this.table2.list_show = true;
this.cur = 2;
this.table2.items.push(tmpObj);
this.$set(this.table2.items[0], 'major', true);
}
else{
alert("Not Major Defectcode!");
}
}
},
<!-- 删除 -->
deleteLot: function (i) {
j = this.table2.items.indexOf(i);
<!-- 只有选择的时候才可以删除 -->
<!-- if (!this.table2.items[j].major){-->
<!-- for (let k = 0; k < this.table.items.length; k++){-->
<!-- this.table2.items[k].major = false;-->
<!-- }-->
<!-- }-->
this.table2.items.splice(this.table2.items.indexOf(i), 1);
this.isMajor = false;
this.major = [];
},
<!-- 选择 -->
onMajor: function (index) {
this.$set(this.table2.items[index], 'major', true);
},
<!-- 提交整个表单 -->
submitPost: function() {
if(this.judge=='PASS'){
var value = this.lot;
if (!value) {
console.log('value is null')
alert('Lot is NULL');
return
}
var value = this.table1.items.length;
if (value == 0){
alert('Lot not in Station');
return
}
this.$set(this.form,'eq',this.eq);
this.$set(this.form,'lot',this.lot);
this.$set(this.form,'judge',this.judge);
this.$set(this.form,'op',this.op);
var url = window.location;
this.form.submit("POST", url);
this.return_msg = true;
this.lot = '';
this.isShow = false;
this.table1.items = [];
this.table2.items = [];
}
else{
var value = this.table2.items.length;
if (value==0) {
alert("Please FMA Reasult List Add major reasoncode ");
return
}
for (let i = 0; i < value; i++){
if(this.table2.items[i].major==true){
this.$set(this.form,'eq',this.eq);
this.$set(this.form,'lot',this.lot);
this.$set(this.form,'judge',this.judge);
this.$set(this.form,'reasoncode',this.reasoncode);
this.$set(this.form,'type',this.reasoncode_type);
this.$set(this.form,'op',this.op);
this.$set(this.form,'defectcode',this.table2.items[i].defectcode);
this.$set(this.form,'timekey',this.table2.items[i].timekey);
var url = window.location;
this.form.submit("POST", url);
this.return_msg = true;
this.lot = '';
this.reasoncode_type = '';
this.reasoncode = '';
this.remark = '';
this.isShow = false;
this.table1.items = [];
this.table2.items = [];
return
}
}
alert("please add major");
return
}
},
},
watch:{
<!-- 如果 lot 存在列表中， 将lot 这个列表添加到item中 -->
lot(val, oldval){
this.table1.items = [];
this.table2.items = [];
this.cur = 0;
for (let i = 0; i < item1.length; i++){
if(val == item1[i].lotid){
this.table1.items.push(item1[i]);
}
}
if(this.table1.items.length != 0){
this.return_msg = false;
this.isShow = true;
this.table1.list_show = true;
this.table1.text_show = true;
this.table2.text_show = true;
}
},
judge(val, oldval){
if(val == "SCRAP"){
this.select_show = true;
this.reasoncode = "";
this.reasoncode_type = "";
this.remark = "";
}
else{
this.select_show = false;
this.remark = "null";
}
},
reasoncode_type(val, oldval){
for (let i = 0; i < rea_list.length; i++){
if(val == rea_list[i].superreasoncode){
this.reasoncode = rea_list[i].superreasoncode ;
}
}
},
reasoncode(val, oldval){
for (let i = 0; i < rea_list.length; i++){
if(val == rea_list[i].superreasoncode){
this.reasoncode_type = rea_list[i].superreasoncode;
}
}
},
},
computed: {
reason_code(){
return reasoncode_list;
},
},
delimiters: ['((','))']
});
</script>
{% verbatim %}
{% endverbatim %}
{% endblock %}
