<template>
|
<div class="unqualifiedBox">
|
<el-row>
|
<el-col :span="12" style="line-height: 32px;">不合格品处置</el-col>
|
<el-col :span="12" style="text-align: right;">
|
<el-button icon="el-icon-download" size="mini" @click="() => {}"
|
>导出</el-button
|
>
|
</el-col>
|
</el-row>
|
<div style="margin-top: 10px;">
|
<el-card shadow="hover" class="margin-30" style="height: 80px;">
|
<div class="choose">
|
<span>产品名称：</span>
|
<el-input
|
size="small"
|
v-model="search.productName"
|
style="width: 224px;margin-right: 30px;"
|
placeholder="请输入"
|
clearable
|
></el-input>
|
<span>规格型号：</span>
|
<el-input
|
size="small"
|
v-model="search.specificationModel"
|
style="width: 224px;margin-right: 30px;"
|
placeholder="请输入"
|
clearable
|
></el-input>
|
<span>产品大类：</span>
|
<el-select
|
v-model="search.productCategories"
|
size="small"
|
placeholder="请选择"
|
style="width: 224px;margin-right: 30px;"
|
>
|
<el-option label="原材料" :value="0"></el-option>
|
<el-option label="成品" :value="1"></el-option>
|
<el-option label="半成品" :value="2"></el-option>
|
</el-select>
|
<span>状态：</span>
|
<el-select
|
v-model="search.state"
|
size="small"
|
placeholder="请选择"
|
style="width: 224px;margin-right: 30px;"
|
>
|
<el-option label="返修中" :value="1"></el-option>
|
<el-option label="待处理" :value="0"></el-option>
|
</el-select>
|
<el-button size="mini" @click="clean()"><span>重 置</span></el-button>
|
<el-button
|
size="mini"
|
type="primary"
|
style="background: #004EA2;"
|
@click="
|
unqualifiedTable = [];
|
getDetailInfo();
|
"
|
><span>查 询</span></el-button
|
>
|
</div>
|
</el-card>
|
</div>
|
<div class="tableno" style="height:300px">
|
<el-card shadow="hover" class="margin-30">
|
<el-table
|
:data="unqualifiedTable"
|
border
|
ref="multipleTable"
|
tooltip-effect="dark"
|
height="calc(100vh - 340px)"
|
style="width: 100%"
|
>
|
<el-table-column type="selection" min-width="50"> </el-table-column>
|
<el-table-column type="index" label="序号" width="60">
|
<template scope="scope">
|
{{ (search.pageSize - 1) * search.countSize + scope.$index + 1 }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="dateArrival" label="产品大类">
|
<template scope="scope">
|
<span v-if="scope.row.type == 0">原材料</span>
|
<span v-if="scope.row.type == 1">成品</span>
|
<span v-if="scope.row.type == 2">半成品</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="productName"
|
label="产品名称"
|
min-width="90"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column prop="specifications" label="规格型号">
|
</el-table-column>
|
<el-table-column prop="number" label="不合格品数量">
|
</el-table-column>
|
<el-table-column label="现像描述" min-width="150">
|
<template scope="scope">
|
<el-input
|
size="small"
|
v-model="scope.row.description"
|
@blur="outOfFocusDescription(scope)"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="处置意见">
|
<template scope="scope">
|
<el-button type="text" @click="showDisposalOpinions(scope)"
|
>查看处置意见</el-button
|
>
|
</template>
|
</el-table-column>
|
<el-table-column prop="user_name" label="申请人"> </el-table-column>
|
<el-table-column prop="date" label="日期"> </el-table-column>
|
<el-table-column prop="deal_state" label="状态">
|
<template slot-scope="scope">
|
<span style="color:#34BD66;" v-if="scope.row.deal_state == 1"
|
>已处理</span
|
>
|
<span style="color:#E84738;" v-else-if="scope.row.deal_state == 0"
|
>待处理</span
|
>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="130">
|
<template scope="scope">
|
<div style="display: flex;">
|
<el-button type="text" siae="small" size="mini">附件</el-button>
|
<el-button
|
type="text"
|
siae="small"
|
size="mini"
|
style=" color:87, 138, 193 ;"
|
@click="clickEditorialOpinion(scope)"
|
>编辑意见</el-button
|
>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-col
|
style="height: 50px;display: flex;align-items: center;justify-content: right;"
|
>
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="search.pageSize"
|
:page-sizes="[10, 15, 20, 30, 50]"
|
:page-size="search.countSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
>
|
</el-pagination>
|
</el-col>
|
</el-card>
|
</div>
|
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
|
<el-form label-width="130px">
|
<div v-for="item in updateEditList" :key="item.$index">
|
<el-form-item
|
:label="
|
item.type == 0
|
? '技术部处置意见：'
|
: item.type == 1
|
? '生产部处置意见：'
|
: item.type == 2
|
? '质量部处置意见：'
|
: '总经办处置意见：'
|
"
|
>
|
<el-input
|
type="textarea"
|
:rows="2"
|
placeholder="请输入内容"
|
v-model="item.tell"
|
>
|
</el-input>
|
</el-form-item>
|
<el-row v-if="isShow == true">
|
<el-col :span="12">
|
<el-form-item label="填写人：" v-if="isShow == true">
|
{{ item.name }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="填写日期：" v-if="isShow == true">
|
{{ item.fillDate }}
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="处置方式：">
|
<el-radio-group v-model="item.way">
|
<el-radio :label="0">返工</el-radio>
|
<el-radio :label="1">返修</el-radio>
|
<el-radio :label="2">让步接收</el-radio>
|
<el-radio :label="3">拒收</el-radio>
|
<el-radio :label="4">降级使用</el-radio>
|
<el-radio :label="5">报废</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-divider v-if="item.type != 3"></el-divider>
|
</div>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="updateEditDevided()">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { watch } from "vue";
|
export default {
|
data() {
|
return {
|
isShow: false,
|
search: {
|
countSize: 10, // 条数/页
|
pageSize: 1, // 起始页
|
productCategories: "", // 产品大类
|
productName: "", // 产品名称
|
specificationModel: "", // 规格型号
|
state: "" // 状态
|
},
|
unqualifiedTable: [], // 页面表格数据
|
total: 0, // 总条数
|
dialogVisible: false, // 显示弹出框
|
updateEditList: []
|
};
|
},
|
mounted() {
|
this.getDetailInfo();
|
},
|
methods: {
|
// 分页
|
handleSizeChange(val) {
|
this.search.countSize = val;
|
this.getDetailInfo();
|
},
|
// 分页
|
handleCurrentChange(val) {
|
this.search.pageSize = val;
|
this.getDetailInfo();
|
},
|
// 分页表格数据
|
getDetailInfo() {
|
this.axios
|
.get(this.$api.url.getTable, {
|
params: this.search
|
})
|
.then(res => {
|
this.unqualifiedTable = res.data.row;
|
this.total = res.data.total;
|
});
|
},
|
// 重置按钮
|
clean() {
|
this.search = {
|
countSize: 10, // 条数/页
|
pageSize: 1, // 起始页
|
productCategories: "", // 产品大类
|
productName: "", // 产品名称
|
specificationModel: "", // 规格型号
|
state: "" // 状态
|
};
|
this.getDetailInfo();
|
},
|
// 点击查看处置意见
|
showDisposalOpinions(scope) {
|
this.isShow = true;
|
this.dialogVisible = true;
|
this.$axios
|
.get(this.$api.url.viewEditorial, {
|
params: {
|
rawUnacceptedId: scope.row.id
|
}
|
})
|
.then(res => {
|
this.updateEditList = res.data;
|
});
|
},
|
// 点击编辑意见
|
clickEditorialOpinion(scope) {
|
this.dialogVisible = true;
|
this.axios
|
.get(this.$api.url.clickEditing, {
|
params: { rawUnacceptedId: scope.row.id }
|
})
|
.then(res => {
|
this.updateEditList = res.data;
|
});
|
},
|
// 失去现像描述焦点触发
|
outOfFocusDescription(scope) {
|
this.axios
|
.get(this.$api.url.descriptionUpdate, {
|
params: {
|
rawUnacceptedId: scope.row.id,
|
tell: scope.row.description
|
}
|
})
|
.then(res => {
|
this.$message({
|
message: res.message,
|
type: "success"
|
});
|
});
|
},
|
// 点击确定按钮
|
updateEditDevided() {
|
this.$axios
|
.post(this.$api.url.addOpinion, this.updateEditList, {
|
headers: { "Content-Type": "application/json" }
|
})
|
.then(res => {
|
console.log(`output->res`, res);
|
this.dialogVisible = false;
|
});
|
}
|
},
|
watch: {
|
dialogVisible: {
|
handler(newVal, oldVal) {
|
if (newVal == false) {
|
this.isShow = false;
|
}
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.main_div {
|
padding-top: 15px;
|
}
|
.el-radio__label {
|
font-size: 16px;
|
}
|
.el-radio {
|
margin-right: 60px;
|
margin-top: 10px;
|
}
|
.el-form-item {
|
margin-bottom: 6px;
|
font-size: 16px;
|
}
|
.unqualifiedBox {
|
width: 100%;
|
max-height: 100%;
|
display: flex;
|
flex-direction: column;
|
/* overflow-y: scroll; */
|
}
|
.unqualifiedBox .title .el-button {
|
height: 32px;
|
border: 1px solid rgba(190, 190, 190, 0.44);
|
box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
|
padding: 0 12px;
|
}
|
/deep/ .el-table__cell {
|
padding: 5px 0;
|
}
|
.unqualifiedBox .title {
|
margin-bottom: 10px;
|
padding: 0 20px;
|
}
|
<!-- /* 条件查询头部样式 */ -->
|
.choose {
|
padding: 21px 24px;
|
display: flex;
|
align-items: center;
|
background-color: #fff;
|
border-bottom: 3px solid rgb(245, 247, 251);
|
}
|
|
.choose {
|
font-size: 14px;
|
}
|
|
.choose .el-button {
|
height: 32px;
|
border: 1px solid rgba(190, 190, 190, 0.44);
|
box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
|
padding: 0 12px;
|
}
|
<!-- /* 不合格表格样式 */
|
.unqualifiedTable {
|
flex: 1;
|
background: #fff;
|
margin-top: 11px;
|
padding: 23px 21px;
|
}
|
.tableno {
|
margin-top: 10px;
|
}
|
</style>
|
