You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

357 lines
9.3 KiB
Vue

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" style="margin-bottom: -34px;">
<el-form-item label="来料月份" prop="incomeTimeYM">
<el-date-picker
v-model="queryParams.incomeTimeYM"
type="month"
placeholder="选择月">
</el-date-picker>
</el-form-item>
<el-form-item label="供应商" prop="supplierCodeArray">
<div class="tagbox">
<div class="tag" style="" placeholder="请选择供应商">
<el-tag
:key="index"
class="tagitem"
v-for="(tag, index) in selectMaterielListtag"
closable
:disable-transitions="false"
@close="handleClose(tag)"
>
{{ tag.supplierName }}
</el-tag>
</div>
<el-button
slot="append"
class="button1"
@click="handleSelectSupplier"
icon="el-icon-search"
></el-button>
<el-row style="display: none;">
<el-input type="input" clearable v-model="queryParams.supplierCode" placeholder="点击选择物料"/>
<el-input type="input"clearable v-model="queryParams.supplierName" placeholder="点击选择物料"/>
</el-row>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['mes:rfidProcess:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="incomeList" @selection-change="handleSelectionChange">
<el-table-column label="供应商编号" align="center" prop="supplierCode" width="120" fixed/>
<el-table-column label="供应商名称" align="left" prop="supplierName" width="390" fixed/>
<el-table-column label="总批数" align="center" prop="batchs" width="90"/>
<el-table-column label="合格批次" align="center" prop="okBatchs" width="100"/>
<el-table-column label="不合格批次" align="center" prop="noOkBatchs" width="100"/>
<el-table-column label="批次不良率" align="center" prop="noOkBatchRate" width="100"/>
<el-table-column label="总数量" align="center" prop="nums" width="90"/>
<el-table-column label="合格数量" align="center" prop="okNums" width="100"/>
<el-table-column label="不合格数量" align="center" prop="noOkNums" width="100"/>
<el-table-column label="数量不良率" align="center" prop="noOkNumRate" width="100"/>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!--供应商选择弹窗-->
<ItemSelectSupplier
ref="itemSelectSupplier"
@onSelected="onSelectSupplier"
></ItemSelectSupplier>
</div>
</template>
<script>
import { getIncomeTableList} from "@/api/quality/qcTable";
import ItemSelectSupplier from "./selectSupplier.vue";
export default {
name: "RfidProcess",
components: {ItemSelectSupplier},
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 生产rfid流程表格数据
incomeList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 新增-物料选中listtag
selectMaterielListtag:[],
// 查询参数
queryParams: {
incomeTimeYM:null,
incomeTimeArray: [],
checkTimeArray: [],
pageNum: 1,
pageSize: 10,
workorderId: null,
rfid: null,
factoryCode: null,
machineCode: null,
nowProcessId: null,
nextProcessId: null,
orderNum: null,
inTime: null,
outTime: null,
status: null,
shiftId: null,
productCode: null,
supplierName: '',
supplierCode: ''
},
// 表单参数
form: {},
// 表单校验
rules: {
workorderId: [
{ required: true, message: "工单ID不能为空", trigger: "blur" }
],
rfid: [
{ required: true, message: "rfid号不能为空", trigger: "blur" }
],
}
};
},
created() {
this.getDate();
this.getList();
},
methods: {
/**获取默认查询时间段**/
getDate() {
let start = this.Fungetdate (0)
this.queryParams.incomeTimeYM=start
},
Fungetdate (num) {
var dd = new Date();
dd.setDate(dd.getDate() + num);
var y = dd.getFullYear();
var m = dd.getMonth() + 1;//获取当前月份的日期
var d = dd.getDate();
return y + "-" + m;
},
/** 查询列表 */
getList() {
this.loading = true;
getIncomeTableList(this.queryParams).then(response => {
this.incomeList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
recordId: null,
workorderId: null,
rfid: null,
factoryCode: null,
machineCode: null,
nowProcessId: null,
nextProcessId: null,
orderNum: null,
inTime: null,
outTime: null,
status: null,
remark: null,
attr1: null,
attr2: null,
attr3: null,
attr4: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
shiftId: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.recordId)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加生产rfid流程";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const recordId = row.recordId || this.ids
getRfidProcess(recordId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改生产rfid流程";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.recordId != null) {
updateRfidProcess(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addRfidProcess(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const recordIds = row.recordId || this.ids;
this.$modal.confirm('是否确认删除生产rfid流程编号为"' + recordIds + '"的数据项?').then(function() {
return delRfidProcess(recordIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('mes/rfidProcess/export', {
...this.queryParams
}, `rfidProcess_${new Date().getTime()}.xlsx`)
},
/**供应商选择弹出框**/
handleSelectSupplier() {
this.$refs.itemSelectSupplier.showFlag = true;
},
//供应商选择确认
onSelectSupplier(objs) {
var code = '';
var desc = '';
for (let i = 0; i < objs.length; i++) {
if(this.queryParams.supplierCode.indexOf(objs[i].supplierCode)<0){
code = code + objs[i].supplierCode + ',';
this.selectMaterielListtag.push(objs[i])
}else{
this.$message({
message: objs[i].supplierName+'已经选择',
type: 'warning'
})
}
if(this.queryParams.supplierName.indexOf(objs[i].supplierName)<0){
desc = desc + objs[i].supplierName + ',';
}
}
this.queryParams.supplierCode += code;
this.queryParams.supplierName += desc;
},
// 新增—删除标签
handleClose(tag) {
this.selectMaterielListtag.splice(this.selectMaterielListtag.indexOf(tag.supplierName), 1);
this.form.supplierCode =''
this.form.supplierName =''
var code = "";
var desc = "";
for (let i = 0; i < this.selectMaterielListtag.length; i++) {
code = code + this.selectMaterielListtag[i].supplierCode + ",";
desc = desc + this.selectMaterielListtag[i].supplierName + ",";
}
this.form.supplierCode += code;
this.form.supplierName += desc;
}
}
};
</script>
<style lang="scss" scoped>
.tagbox {
display: flex;
/* overflow: scroll; */
position: relative;
width: 80%;
padding-left: 26px;
margin-bottom: 15px;
.tagboxlabel{
width: 100px;
text-align: right;
vertical-align: middle;
font-size: 14px;
color: black;
line-height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-right: 12px;
}
.tag {
width: 720px;
border: 1px #DCDFE6 solid;
height: 60px;
padding: 5px 15px;
overflow-y: scroll;
.tagitem{
margin-left: 5px;
}
}
.button1{
width: 37px;
height: 37px;
position: absolute;
right: -39px;
top: 2px;
}
}
</style>