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.

743 lines
24 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
<el-form-item label="任务编号" prop="checkNo">
<el-input
v-model="queryParams.checkNo"
placeholder="请输入检验任务编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="物料名称" prop="materialName">
<el-input
v-model="queryParams.materialName"
placeholder="请输入物料名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="检验结果" prop="checkResult">
<el-select
v-model="queryParams.checkResult"
placeholder="检验结果"
clearable
>
<el-option
v-for="dict in dict.type.check_result"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="检测地点" prop="checkLoc">
<el-input
v-model="queryParams.checkLoc"
placeholder="请输入检测地点"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="检验时间" prop="checkTimeArray">
<el-date-picker
v-model="queryParams.checkTimeArray"
format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</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="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['quality:inventoryReport:add']"
>新增</el-button>
</el-col> -->
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['quality:inventoryReport:export']"
>导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-printer"
size="mini"
@click="showPrintX"
v-hasPermi="['quality:inventoryReport: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 type="selection" width="55" align="center" />
<el-table-column label="recordId" align="center" prop="recordId" v-if="false"/>
<el-table-column label="检验任务编号" align="center" prop="checkNo" width="120"/>
<el-table-column label="订单号" align="center" prop="orderNo" width="150"/>
<el-table-column label="物料名称" align="center" prop="materialName" width="150"/>
<el-table-column label="收货数量" align="center" prop="quality" />
<el-table-column label="单位" align="center" prop="unit" />
<el-table-column label="供应商名称" align="center" prop="supplierName" width="240"/>
<el-table-column label="检测地点" align="center" prop="checkLoc"/>
<el-table-column label="检验时间" align="center" prop="checkTime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.checkTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="检验结果" align="center" prop="checkResult">
<template slot-scope="scope">
<dict-tag :options="dict.type.check_result" :value="scope.row.checkResult"/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleLook(scope.row)"
>查看</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 打印库存检验对话框 -->
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
<el-row>
<el-col :span="20">
<el-button
class="print-btn"
size="mini"
type="primary"
icon="el-icon-edit"
@click="handlePrint(form)"
>打印</el-button>
</el-col>
</el-row>
<!-- 打印整个printFrom区域 -->
<div id="printFrom">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="7">
<img src="@/assets/logo/lanjv.png" class="report-logo"/>
</el-col>
<el-col :span="10" class="center-text">
<h1>中山榄菊日化实业有限公司</h1>
</el-col>
</el-row>
<el-row>
<el-col :offset="8" :span="8" class="center-text">
<h2>库存检验报告</h2>
</el-col>
<el-col :offset="1" :span="5" class="center-text">
<span style="font-size: 14px;padding: 6px;line-height: 50px;">编码:{{form.fileNo}}</span>
</el-col>
</el-row>
<el-descriptions title="" border :column="3" :contentStyle="content_style" :label-style="label_style">
<el-descriptions-item label="库存工厂" class="my-description-item1">{{form.factoryCode}}</el-descriptions-item>
<el-descriptions-item label="生产批号" class="my-description-item2">{{form.incomeBatchNo}}</el-descriptions-item>
<el-descriptions-item label="报告编号" class="my-description-item3">{{form.checkNo}}</el-descriptions-item>
<el-descriptions-item label="物料名称" class="my-description-item1">{{form.materialName}}</el-descriptions-item>
<el-descriptions-item label="物料编码" class="my-description-item2">{{form.materialCode}}</el-descriptions-item>
<el-descriptions-item label="供应单位" class="my-description-item3">{{form.supplierName}}</el-descriptions-item>
<el-descriptions-item label="供应编码" class="my-description-item1">{{form.supplierCode}}</el-descriptions-item>
<el-descriptions-item label="库存数量" class="my-description-item2">{{form.quality}}</el-descriptions-item>
<el-descriptions-item label="单位" class="my-description-item3">{{form.unit}}</el-descriptions-item>
<el-descriptions-item label="检验依据" class="my-description-item1">{{form.standardNo}}</el-descriptions-item>
<el-descriptions-item label="报检日期" class="my-description-item2">{{ parseTime(form.createTime, '{y}-{m}-{d}') }}</el-descriptions-item>
<el-descriptions-item label="检验日期" class="my-description-item3">{{ parseTime(form.checkTime, '{y}-{m}-{d}') }}</el-descriptions-item>
</el-descriptions>
<el-row>
<el-col :span="24">
<!-- 检验项目明细 -->
<el-table v-loading="loading" :data="checkProjectList" border :span-method="objectSpanMethod">
<el-table-column label="序号" align="center" type="index" width="50"/>
<el-table-column label="检验项目" align="center" prop="ruleName" />
<el-table-column label="标准要求" align="center" prop="checkStandard" width="350"/>
<!--<el-table-column label="抽检数" align="center" prop="sampleNum" width="60"/>
<el-table-column label="单位" align="center" prop="unitCode" width="50"/>-->
<el-table-column label="实测结果" align="center" prop="actualValue" width="120"/>
<el-table-column label="判定" align="center" prop="status" width="70">
<template slot-scope="scope">
<dict-tag :options="dict.type.check_result" :value="scope.row.status"/>
</template>
</el-table-column>
<!--
<el-table-column label="不良类型" align="center" prop="defectCode" width="80">
<template slot-scope="scope">
<span v-if="scope.row.defectCode">{{ getCodeValue(scope.row.defectCode) }}</span>
</template>
</el-table-column>
<el-table-column label="不良数量" align="center" prop="defectQuality" width="80"/>-->
<el-table-column label="附件" align="center" prop="files" width="120">
<template slot-scope="scope">
<el-image v-for="(item,index) in scope.row.files" :key="index"
:src="item.fileAddress"
style="width: 100px; height: 100px"
:fit="fit" />
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="综合检验结论" label-width="100px">
<el-col :span="6">
<span v-if="this.checkResult=='Y'">√合格</span>
<span label="N" v-else>×不合格</span>
</el-col>
<el-col :span="8">
备注:判定合格打“√”,不合格打“×”
</el-col>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="品管经理/主任:" label-width="120px">
<el-input disabled/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="品质主管:" label-width="100px">
<el-input disabled/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="品管员:" prop="checkManName">
<el-input v-model="form.checkManName" disabled/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="cancel">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 打印预览弹出层 -->
<el-dialog
title="仓库质量巡查记录"
:visible.sync="printDialogVisible"
width="871px"
>
<div id="printFrom" class="my-print-box">
<el-form :model="form">
<!-- 主数据 -->
<div v-for="(item,index) in printData.workTable" :key="index">
<el-row>
<el-col :span="7">
<img src="@/assets/logo/lanjv.png" class="report-logo"/>
</el-col>
<el-col :span="10" class="center-text">
<h1>中山榄菊日化实业有限公司</h1>
</el-col>
</el-row>
<!-- 表头- -->
<el-row>
<el-col :offset="8" :span="8" class="center-text">
<h2>仓库质量巡查记录</h2>
</el-col>
</el-row>
<!-- 导航栏 -->
<el-row class="my-print-nav">
<el-col :span="6">巡检日期:{{printData.incomeTime}}</el-col>
<el-col :span="6">条数:{{printData.pageNo}}</el-col>
<el-col :span="6">编码:{{printData.fileNo}}</el-col>
</el-row>
<el-table v-if="refreshNewWorkerTable" v-loading="newWorkerLoading" class="my-print-table"
:data="item" border style="width: 100%;padding-bottom: 1px;">
<el-table-column label="序号" prop="xh" width="55"></el-table-column>
<el-table-column prop="materialName" label="产品/物料名称" width="120"></el-table-column>
<el-table-column prop="modelType" width="80" label="型号规格"></el-table-column>
<!--<el-table-column prop="workorderCode" width="105" label="生产订单" :formatter="orderCodeFormate"></el-table-column>-->
<el-table-column prop="incomeBatchNo" width="225" label="生产批号(日期)"></el-table-column>
<el-table-column prop="checkResult" label="质量状况(包括堆放是否合理)" width="190"></el-table-column>
<el-table-column prop="routeCode" width="140" label="处理方式"></el-table-column>
</el-table>
<!-- 底部 -->
<el-row class="my-print-foot">
<el-col :offset="1" :span="6">审核:</el-col>
<el-col :offset="1" :span="6">:{{printData.checkManName}}</el-col>
</el-row>
<div class="fy" v-if="index!=printData.workTable.length-1"></div>
</div>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handlePrint(printData)"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { listInventory, getInventory, delInventory, addInventory, updateInventory,getCkeckProjectList,printXJRecordList} from "@/api/quality/inventoryReport";
import { getCheckTypes } from "@/api/quality/qcProduce";
import { getDefectTypeListByDefectType } from "@/api/quality/defectType.js";
import moment from 'moment';
export default {
name: "InventoryReport",
dicts: ["unit","check_status","check_result"],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
//打印
formRef: 'form',
validateRules: [],
printData: {
printable: 'printFrom',
ignore: ['no-print'],
workCenter: "暂无数据",
SAPNo: null,
manufacture: null,
auditor: null,
printDate: null,
factory: null,
productDate: null,
workTable: [],
},
printDialogVisible: false,
// 库存检验表格数据
incomeList: [],
// 检验项目列表
checkProjectList: [],
defectList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
checkTimeArray: [],
pageNum: 1,
pageSize: 10,
checkNo: null,
incomeBatchNo: null,
orderNo: null,
materialCode: null,
materialName: null,
quality: null,
unit: null,
supplierCode: null,
supplierName: null,
incomeTime: null,
checkLoc: null,
checkStatus: null,
checkManCode: null,
checkManName: null,
checkTime: null,
checkResult: null,
status: null,
attr1: null,
attr2: null,
attr3: null,
attr4: null,
factoryCode: null,
},
// 表单参数
form: {},
checkTypes:[],
content_style: {
'text-align': 'center',
'min-width': '200px',
'word-break': 'break-all'
},
label_style: {
'color': '#000',
'text-align': 'center',
'font-weight': '600',
'height': '40px',
'background-color': '#d6dbe1',
'min-width': '100px',
'word-break': 'keep-all'
},
spanArr: [],
position: 0,
// 表单校验
rules: {
/* incomeBatchNo: [
{ required: true, message: "库存批次号不能为空", trigger: "blur" }
], */
},
fenyeNumber:5,
fenyeNumberTwo:5,
shengchan:true,
newWorkerLoading: false,
refreshNewWorkerTable:true
};
},
created() {
this.getDate();
this.getList();
this.getCheckTypes();
this.getDefectType();
},
methods: {
/****/
getCheckTypes() {
getCheckTypes('inventory').then(response => {
this.checkTypes = response;
});
},
/**获取默认查询时间段**/
getDate() {
let start = this.Fungetdate (0)
let end = this.Fungetdate (1)
//this.queryParams.incomeTimeArray.push(start,end)
this.queryParams.checkTimeArray.push(start,end)
},
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 + "-" + d+" 00:00:00";
},
/** 查询库存检验列表 */
getList() {
this.loading = true;
if(this.queryParams.checkTimeArray.length>0){
this.queryParams.checkTimeStart = moment(this.queryParams.checkTimeArray[0]).format('YYYY-MM-DD HH:mm:ss');
this.queryParams.checkTimeEnd = moment(this.queryParams.checkTimeArray[1]).format('YYYY-MM-DD HH:mm:ss');
}
listInventory(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,
checkNo: null,
incomeBatchNo: null,
orderNo: null,
materialCode: null,
materialName: null,
quality: null,
unit: null,
supplierCode: null,
supplierName: null,
incomeTime: null,
checkLoc: null,
checkStatus: null,
checkManCode: null,
checkManName: null,
checkTime: null,
checkResult: null,
status: null,
attr1: null,
attr2: null,
attr3: null,
attr4: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
factoryCode: null,
delFlag: null,
};
this.spanArr = [];
this.position = 0;
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 = "添加库存检验";
},
/** 查看按钮操作 */
handleLook(row) {
this.reset();
const recordId = row.recordId || this.ids
this.queryParams.recordId = recordId;
getInventory(recordId).then(response => {
this.form = response.data;
this.form.printable = 'printFrom'; //打印时需要
this.form.ignore = ['no-print'];//打印时需要
this.open = true;
this.title = "查看库存报告";
});
this.getCheckedProjectList();
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.recordId != null) {
updateInventory(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addInventory(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const recordIds = row.recordId || this.ids;
this.$modal.confirm('是否确认删除库存检验编号为"' + recordIds + '"的数据项?').then(function() {
return delInventory(recordIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download('quality/qcInventoryReport/export', {
...this.queryParams
}, `inventoryReport_${new Date().getTime()}.xlsx`)
},
/**获取检验项目列表 */
getCheckedProjectList(){
this.loading = true;
getCkeckProjectList(this.queryParams).then((response) => {
this.checkProjectList = response.rows;
this.total = response.total;
this.loading = false;
this.rowspan()
});
},
// 打印预览-浏览器打印
handlePrint(params) {
printJS({
printable: params.printable, // 'printFrom', // 标签元素id
type: params.type || 'html',
maxWidth: 1600, // 最大宽度
font_size: "",// 设置字体大小
//header: "库存检验结果报告",//params.header, // '表单',
targetStyles: ['*'],
style: '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾
ignoreElements: params.ignore || [], // ['no-print']
properties: params.properties || null
})
},
getDefectType() {
const defectType = "inventory";
getDefectTypeListByDefectType(defectType).then(response => {
this.defectList = response.rows;
});
},
getCodeValue(defectCode) {
const foundDefect = this.defectList.find(defect => defect.defectCode === defectCode);
return foundDefect.defectSubclass;
},
// 打印巡检记录
showPrintX() {
var startQuery = moment(this.queryParams.checkTimeArray[0]).format('YYYY-MM-DD');
var endQuery = moment(this.queryParams.checkTimeArray[1]).format('YYYY-MM-DD');
if(this.queryParams.checkTimeArray.length<0){
this.$modal.msgError("")
return
}
if(startQuery != endQuery){
this.$modal.msgError("")
return
}
this.printData.workCenter = "";
this.printData.printDate = null;
this.printData.workTable = [];
this.printData.factory = null;
this.printData.productDate = null;
this.printData.pageNo =0 ;
//
this.printDialogVisible = true;
this.newWorkerLoading = true // true
this.refreshNewWorkerTable = false // refreshProTablefalse
printXJRecordList(this.queryParams).then(response => {
this.showWorkorderCode = false;
this.printData.incomeTime = startQuery;
this.printData.fileNo = response[0].fileNo;
this.printData.checkManName = response[0].checkManName;
//this.printData.printDate = moment(new Date()).format('YYYY-MM-DD')
this.printData.workTable = response
this.printData.pageNo = response.length;
let chunkedArray = [];
// 遍历this.printData.workTable
for (let i = 0; i < this.printData.workTable.length; i += (i==0?this.fenyeNumber:this.fenyeNumberTwo)) {
// 使用slice方法从当前索引i开始切割切割长度为10如果剩余元素少于10则切割剩余所有元素
let chunk = this.printData.workTable.slice(i, i + (i==0?this.fenyeNumber:this.fenyeNumberTwo));
// 将切割后的数组添加到chunkedArray中
chunkedArray.push(chunk);
}
this.printData.workTable = chunkedArray;
this.refreshNewWorkerTable = true // 立即将refreshProTable设置为true显示表格
this.newWorkerLoading = false // 设置加载状态为false表示加载完成
})
},
/**
* 1. 若是objectSpanMethod不返回任何东西表格不会变化
* 2. 最外层的判断一般是,先从第几列开始合并
* 3. 这次从第0行合并2个下次就要从第3行开始合并0行加俩就到3行了
* 4. 这种方式是有多少条数据合并多少条数据比如本案例中有7条数据从第0条合并到第7条
* 5. return { rowspan: 0, colspan: 0 } // 表示不合并
* */
rowspan() {
this.checkProjectList.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1);
this.position = 0;
} else {
if (
this.checkProjectList[index].projectRuleName ===
this.checkProjectList[index - 1].projectRuleName
) {
this.spanArr[this.position] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.position = index;
}
}
});
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
/**
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
**/
if (columnIndex === 1) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
}
},
};
</script>
<style scoped>
.print-btn{
margin-bottom: 15px;
margin-left: 10px;
}
.center-text {
text-align: center;
}
.report-logo {
margin-top: 15px;
margin-left: 15px;
height: 38px;
}
.my-description-item1 {
width: 280px; /* 或者你想要的任何宽度 */
}
.my-description-item2 {
width: 120px; /* 或者你想要的任何宽度 */
}
.my-description-item3 {
width: 80px; /* 或者你想要的任何宽度 */
}
.border-row {
border: 1px solid #d3dce6; /* 边框颜色可以根据需要自定义 */
text-align:center;
}
.my-print-head {
margin-top: 5px;
font-weight: bold;
text-align: center;
}
</style>