<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: 1em;">
|
<el-card shadow="hover" style="height: 6em; display: flex;align-items: center;">
|
<div class="choose">
|
<span>产品名称：</span>
|
<el-input size="small" v-model="search.productName" style="width: 13vw;margin-right: 5px;" placeholder="请输入" clearable></el-input>
|
<span>规格型号：</span>
|
<el-input size="small" v-model="search.specificationModel" style="width: 13vw;margin-right: 5px;" placeholder="请输入" clearable></el-input>
|
<span>产品大类：</span>
|
<el-select v-model="search.productCategories" size="small" placeholder="请选择" style="width: 13vw;margin-right: 5px;">
|
<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: 13vw;margin-right: 5px;">
|
<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">
|
<el-table :data="unqualifiedTable" border tooltip-effect="dark" height="calc(100vh - 340px)" style="width: 100%" :header-cell-style="{height: '50px'}">
|
<el-table-column type="index" label="序号" width="60">
|
<template slot-scope="scope">
|
{{ (search.pageSize - 1) * search.countSize + scope.$index + 1 }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="dateArrival" label="产品大类" min-width="100">
|
<template slot-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="100" show-overflow-tooltip>
|
</el-table-column>
|
<el-table-column prop="specifications" label="规格型号" min-width="100">
|
</el-table-column>
|
<el-table-column prop="number" label="不合格品数量" min-width="150">
|
</el-table-column>
|
<el-table-column label="现像描述" min-width="150">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.description" @blur="outOfFocusDescription(scope)"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="处置意见" min-width="100">
|
1232
|
</el-table-column>
|
<el-table-column prop="user_name" label="申请人" min-width="80"> </el-table-column>
|
<el-table-column prop="date" label="日期" min-width="150"> </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="操作" min-width="130" fixed="right">
|
<template slot-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="120px">
|
<div>
|
<el-form-item label="最终处置意见：">
|
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="clickEditOpinion.opinion_tell" />
|
</el-form-item>
|
<el-form-item label="处置方式：">
|
<el-radio-group v-model="clickEditOpinion.way">
|
<el-radio :label="3">接收</el-radio>
|
<el-radio v-if="clickEditOpinion.type == 0" :label="2">让步接收</el-radio>
|
<el-radio v-if="clickEditOpinion.type !== 0" :label="4">降级使用</el-radio>
|
<el-radio v-if="clickEditOpinion.type == 0" :label="7">换货</el-radio>
|
<el-radio v-if="clickEditOpinion.type == 0" :label="6">退货</el-radio>
|
<el-radio :label="1">返工返修</el-radio>
|
<el-radio v-if="clickEditOpinion.type !== 0" :label="5">报废</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</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, // 显示弹出框
|
clickEditOpinion: "", // 点击编辑意见临时存储该行数据
|
};
|
},
|
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();
|
},
|
// 点击编辑意见
|
clickEditorialOpinion(scope) {
|
this.dialogVisible = true;
|
this.clickEditOpinion = scope.row;
|
},
|
// 失去现像描述焦点触发
|
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() {
|
console.log(`output->this.clickEditOpinion`, this.clickEditOpinion);
|
this.axios
|
.post(this.$api.url.editDisposalOpinion, {
|
opinionTell: this.clickEditOpinion.opinion_tell,
|
rawUnacceptedId: this.clickEditOpinion.id,
|
way: this.clickEditOpinion.way,
|
type: this.clickEditOpinion.type,
|
})
|
.then((res) => {
|
this.dialogVisible = false;
|
this.$message({
|
message: res.message,
|
type: "success",
|
});
|
});
|
},
|
},
|
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;
|
}
|
|
.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 {
|
display: flex;
|
align-items: center;
|
background-color: #fff;
|
/* border-bottom: 3px solid rgb(245, 247, 251); */
|
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;
|
}
|
.choose span {
|
/* span内容强制不换行 */
|
white-space: nowrap;
|
}
|
|
.tableno {
|
margin-top: 10px;
|
}
|
</style>
|
