1336 lines
40 KiB
Plaintext
1336 lines
40 KiB
Plaintext
<template>
|
||
<div class="app-container" id="app-container" v-loading="printLoading">
|
||
<div class="main">
|
||
<div ref="query">
|
||
<el-form
|
||
:model="queryParams"
|
||
ref="queryForm"
|
||
:inline="true"
|
||
label-width="100px"
|
||
>
|
||
<el-row>
|
||
<el-col :span="4">
|
||
<el-form-item prop="number">
|
||
<el-input
|
||
v-model="queryParams.number"
|
||
placeholder="流转卡编号"
|
||
size="small"
|
||
style="width: 185px"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item prop="number">
|
||
<el-input
|
||
v-model="queryParams.orderProdNumber"
|
||
placeholder="订单编号"
|
||
clearable
|
||
size="mini"
|
||
style="width: 185px"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item prop="number">
|
||
<el-input
|
||
v-model="queryParams.orderWorkNumber"
|
||
placeholder="工单编号"
|
||
clearable
|
||
size="mini"
|
||
style="width: 185px"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item prop="materialNumber">
|
||
<el-input
|
||
v-model="queryParams.materialNumber"
|
||
placeholder="物料编码"
|
||
size="mini"
|
||
style="width: 185px"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<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-button
|
||
type="primary"
|
||
:icon="
|
||
showMore == true ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
|
||
"
|
||
size="mini"
|
||
@click="showMoreChange"
|
||
></el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<div v-show="showMore">
|
||
<el-row>
|
||
<el-col :span="4">
|
||
<el-form-item prop="materialName">
|
||
<el-input
|
||
v-model="queryParams.materialName"
|
||
placeholder="产品名称"
|
||
size="mini"
|
||
style="width: 185px"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item prop="dictStatus">
|
||
<el-select
|
||
v-model="queryParams.dictStatus"
|
||
placeholder="流转卡状态"
|
||
size="mini"
|
||
style="width: 185px"
|
||
>
|
||
<el-option
|
||
v-for="dict in flowArray"
|
||
:key="dict.key"
|
||
:label="dict.text"
|
||
:value="dict.key"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item>
|
||
<TreeSelect
|
||
placeholder="工作中心"
|
||
v-model="queryParams.workCenterId"
|
||
:multiple="false"
|
||
:normalizer="normalizer"
|
||
:isDefaultExpanded="true"
|
||
noResultsText="没有搜索到数据"
|
||
:options="treeOptions"
|
||
style="width: 185px"
|
||
>
|
||
</TreeSelect>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-form>
|
||
<el-divider></el-divider>
|
||
<el-row :gutter="10" style="margin: 10px 0px" class="mb8">
|
||
<el-col :span="1.5" v-hasPermi="['order_flow_add']">
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-plus"
|
||
size="mini"
|
||
@click="handleAdd"
|
||
>新增
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5" v-hasPermi="['order_work_begin']">
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-scissors"
|
||
size="mini"
|
||
:disabled="multiple"
|
||
@click="splitFlow"
|
||
>开始
|
||
</el-button>
|
||
</el-col>
|
||
|
||
<el-col :span="1.5" v-hasPermi="['order_flow_info']">
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-document"
|
||
size="mini"
|
||
:disabled="single"
|
||
@click="serinumber"
|
||
>查看序列号
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5" v-hasPermi="['order_flow_print']">
|
||
<el-button
|
||
type="success"
|
||
size="mini"
|
||
icon="el-icon-printer"
|
||
:disabled="multiple"
|
||
@click="printer"
|
||
>打印流转卡
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5" v-hasPermi="['order_flow_printerFlow']">
|
||
<el-button
|
||
type="success"
|
||
size="mini"
|
||
icon="el-icon-printer"
|
||
:disabled="multiple"
|
||
@click="printerFlow"
|
||
>装箱条码打印
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5" v-hasPermi="['order_work_pause']">
|
||
<el-button
|
||
type="info"
|
||
size="mini"
|
||
@click="pause"
|
||
:disabled="multiple"
|
||
icon="el-icon-video-pause"
|
||
>暂停
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5" v-hasPermi="['order_flow_close']">
|
||
<el-button
|
||
type="danger"
|
||
size="mini"
|
||
icon="el-icon-close"
|
||
@click="close"
|
||
:disabled="single"
|
||
>关闭
|
||
</el-button>
|
||
</el-col>
|
||
<!-- <el-col :span="1.5" v-if="false" v-hasPermi="['order_flow_update']">
|
||
<el-button
|
||
type="success"
|
||
icon="el-icon-edit"
|
||
size="mini"
|
||
:disabled="single"
|
||
@click="handleUpdate"
|
||
>修改
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5" v-if="false" v-hasPermi="['order_flow_remove']">
|
||
<el-button
|
||
type="danger"
|
||
icon="el-icon-delete"
|
||
size="mini"
|
||
:disabled="multiple"
|
||
@click="handleDelete"
|
||
>删除
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5" v-if="false" v-hasPermi="['order_flow_import']">
|
||
<el-button
|
||
type="info"
|
||
icon="el-icon-upload2"
|
||
size="mini"
|
||
@click="handleImport"
|
||
>导入
|
||
</el-button>
|
||
</el-col>
|
||
<el-col v-hasPermi="['order_flow_confirmF']" :span="1.5">
|
||
<el-button
|
||
type="info"
|
||
icon="el-icon-upload2"
|
||
size="mini"
|
||
@click="confirmF"
|
||
>工装确认
|
||
</el-button>
|
||
</el-col>
|
||
<el-col v-hasPermi="['order_flow_confirmP']" :span="1.5">
|
||
<el-button
|
||
type="info"
|
||
icon="el-icon-upload2"
|
||
size="mini"
|
||
@click="confirmP"
|
||
>程序确认
|
||
</el-button>
|
||
</el-col>
|
||
<el-col v-hasPermi="['order_flow_confirmHis']" :span="1.5">
|
||
<el-button
|
||
type="info"
|
||
icon="el-icon-upload2"
|
||
size="mini"
|
||
@click="confirmHis"
|
||
>转产确认历史
|
||
</el-button>
|
||
</el-col>
|
||
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="info"
|
||
icon="el-icon-upload2"
|
||
size="mini"
|
||
@click="outop"
|
||
>下达至线边库
|
||
</el-button>
|
||
</el-col>
|
||
|
||
|
||
<el-col :span="1.5">
|
||
<el-button
|
||
type="success"
|
||
icon="el-icon-scissors"
|
||
size="mini"
|
||
:disabled="single"
|
||
@click="teamBind"
|
||
>分配班组
|
||
</el-button>
|
||
</el-col>
|
||
|
||
|
||
|
||
<el-col :span="1.5" v-hasPermi="['order_flow_printerFlow']">
|
||
<el-button
|
||
type="primary"
|
||
size="mini"
|
||
icon="el-icon-plus"
|
||
:disabled="multiple"
|
||
@click="openEdit(1)"
|
||
>工序下发
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5" v-hasPermi="['order_flow_printerFlow']">
|
||
<el-button
|
||
type="primary"
|
||
size="mini"
|
||
icon="el-icon-plus"
|
||
:disabled="multiple"
|
||
@click="openEdit(2)"
|
||
>元器件下发
|
||
</el-button>
|
||
</el-col>
|
||
<el-col :span="1.5" v-hasPermi="['order_flow_printerFlow']">
|
||
<el-button
|
||
type="primary"
|
||
size="mini"
|
||
icon="el-icon-plus"
|
||
:disabled="multiple"
|
||
@click="openEdit(3)"
|
||
>序列号下发
|
||
</el-button>
|
||
</el-col>
|
||
-->
|
||
<el-col :span="1.5">
|
||
<el-select
|
||
ref="select"
|
||
@click.native="notSelect"
|
||
style="width: 800px"
|
||
v-model="seqence"
|
||
:multiple="true"
|
||
placeholder=""
|
||
>
|
||
<el-option
|
||
v-for="item in seqenceOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-col>
|
||
<el-popover
|
||
style="float: right"
|
||
placement="bottom-end"
|
||
title="自定义显示列"
|
||
width="250"
|
||
@show="initPopover"
|
||
trigger="hover"
|
||
>
|
||
<headConfig
|
||
ref="test"
|
||
@fathers="fathers"
|
||
:propThis="propThis"
|
||
></headConfig>
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
class="el-icon-caret-bottom"
|
||
slot="reference"
|
||
>自定义列</el-button
|
||
>
|
||
</el-popover>
|
||
</el-row>
|
||
</div>
|
||
<div class="table-main">
|
||
<el-table
|
||
@sort-change="sortChange"
|
||
class="table"
|
||
@header-dragend="headerDragend"
|
||
v-loading="loading"
|
||
v-if="indexShow"
|
||
:data="orderList"
|
||
@selection-change="handleSelectionChange"
|
||
border
|
||
ref="list"
|
||
:height="tableHeight"
|
||
highlight-current-row
|
||
@current-change="currentChange"
|
||
>
|
||
<!-- <el-table-column type="selection" width="50" align="center"/>-->
|
||
<el-table-column
|
||
type="index"
|
||
width="50"
|
||
align="center"
|
||
label="序号"
|
||
/>
|
||
<el-table-column
|
||
type="selection"
|
||
width="50"
|
||
align="center"
|
||
label="序号"
|
||
/>
|
||
<el-table-column
|
||
v-for="(item, index) in realList"
|
||
:sortable="item.notSort == true ? false : `custom`"
|
||
:prop="item.tableProp"
|
||
:key="index"
|
||
:align="item.align"
|
||
header-align="center"
|
||
:min-width="item.width"
|
||
:label="item.tableTitle"
|
||
:show-overflow-tooltip="item.show_overflow_tooltip"
|
||
>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<el-pagination
|
||
style="margin-top: 10px"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="queryParams.pageNo"
|
||
:page-sizes="[10, 20, 50, 100, 200, 500, 1000]"
|
||
:page-size="queryParams.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
>
|
||
</el-pagination>
|
||
</div>
|
||
|
||
<div id="printFlow" v-if="printInfo"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import orderFlowForm from "./order-flow-form";
|
||
|
||
import TreeSelect from "@riophae/vue-treeselect"; //引用下拉树组件
|
||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||
|
||
import QRCode from "qrcodejs2";
|
||
import orderSerial from "./order-prod-serialNumber";
|
||
import printerFlow from "./printerFlow";
|
||
import confirmView from "./flowConfirm/confirmView";
|
||
import fixureConfirm from "./flowConfirm/fixureConfirm";
|
||
import processConfirm from "./flowConfirm/processConfirm";
|
||
import flowEdit from "./flowEdit/index";
|
||
import SnEdit from "./flowEdit/Snindex";
|
||
import MatEdit from "./flowEdit/MatEdit";
|
||
import teamBind from "./teamBind/index";
|
||
|
||
export default {
|
||
name: "OrderFlow",
|
||
components: {
|
||
TreeSelect,
|
||
},
|
||
data() {
|
||
return {
|
||
rowClickFlag: false, //当为false的时候表示没有选择复选框
|
||
List: [],
|
||
realList: [],
|
||
propThis: this,
|
||
normalizer(node) {
|
||
return {
|
||
id: node.value,
|
||
label: node.title,
|
||
children: node.children,
|
||
isDefaultExpanded: true,
|
||
};
|
||
},
|
||
printObj: {
|
||
id: "printTest",
|
||
extraCss: "https://www.google.com,https://www.google.com",
|
||
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
|
||
},
|
||
showRouter: [],
|
||
printLoading: false, //主页面加载动画
|
||
printInfo: false,
|
||
indexShow: false,
|
||
treeValue: [],
|
||
treeOptions: [], //下拉树数据
|
||
propsThis: this,
|
||
// 遮罩层
|
||
dateRange: [],
|
||
showMore: false,
|
||
loading: false,
|
||
orderStatus: [],
|
||
orderType: [],
|
||
flowArray: [],
|
||
// 选中数组
|
||
rows: [],
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 总条数
|
||
total: 0,
|
||
// 用户表格数据
|
||
orderList: null,
|
||
tableHeight: 0,
|
||
printData: [],
|
||
// 弹出层标题
|
||
// 表单参数
|
||
form: {
|
||
id: undefined,
|
||
number: "",
|
||
planQty: 0,
|
||
materialId: "",
|
||
bomId: "",
|
||
dictStatus: 1,
|
||
dictType: 1,
|
||
order: 99,
|
||
customerOrder: "",
|
||
customer: "",
|
||
autoOrderPicking: false,
|
||
autoOrderWork: false,
|
||
planStartDt: undefined,
|
||
planEndDt: undefined,
|
||
routeId: undefined,
|
||
workCenterId: undefined,
|
||
},
|
||
// 用户导入参数
|
||
upload: {
|
||
// 是否显示弹出层（用户导入）
|
||
open: false,
|
||
// 弹出层标题（用户导入）
|
||
title: "",
|
||
// 是否禁用上传
|
||
isUploading: false,
|
||
// 是否更新已经存在的用户数据
|
||
updateSupport: 0,
|
||
// 设置上传的请求头部
|
||
// 上传的地址
|
||
url: "/pcp/pp/order/prod/excel/import",
|
||
},
|
||
centerTree: [],
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNo: 1,
|
||
pageSize: 50,
|
||
number: undefined,
|
||
materialNumber: undefined,
|
||
materialName: undefined,
|
||
dictStatus: undefined,
|
||
dictType: undefined,
|
||
workCenterId: undefined,
|
||
orderProdNumber: undefined,
|
||
orderWorkNumber: undefined,
|
||
},
|
||
qrcode: undefined,
|
||
seqenceOptions: [],
|
||
seqence: [],
|
||
};
|
||
},
|
||
mounted() {
|
||
let tempList = this.$headerConfig.getList("flow");
|
||
|
||
tempList.forEach((data, index) => {
|
||
if (data.notSort) return;
|
||
let temp = {
|
||
value: null,
|
||
label: null,
|
||
};
|
||
|
||
temp.value = data.tableProp.replace("Show", "") + " ascending";
|
||
temp.label = data.tableTitle + " 升序";
|
||
|
||
this.seqenceOptions.push(temp);
|
||
|
||
let tempD = {
|
||
value: null,
|
||
label: null,
|
||
};
|
||
|
||
tempD.value = data.tableProp.replace("Show", "") + " descending";
|
||
tempD.label = data.tableTitle + " 降序";
|
||
|
||
this.seqenceOptions.push(tempD);
|
||
});
|
||
},
|
||
watch: {
|
||
seqence: function () {
|
||
this.getList();
|
||
},
|
||
},
|
||
created() {
|
||
this.flowArray.push({});
|
||
this.$dictType.getOrderFlowStatusArray().forEach((value) => {
|
||
this.flowArray.push(value);
|
||
});
|
||
this.initPage();
|
||
this.initData();
|
||
this.getWorkCenterTree();
|
||
},
|
||
methods: {
|
||
notSelect() {
|
||
this.$refs.select.blur();
|
||
},
|
||
|
||
sortChange({ column, prop, order }) {
|
||
console.log(prop);
|
||
let sTemp = {
|
||
value: null,
|
||
label: null,
|
||
};
|
||
let value = prop.replace("Show", "") + " " + order;
|
||
let judgeValue = value.split(" ");
|
||
// this.seqence.push(value)
|
||
if (this.seqence.length === 0) {
|
||
this.seqence.push(value);
|
||
console.log(this.seqence);
|
||
} else {
|
||
for (let i = 0; i < this.seqence.length; i++) {
|
||
let judgeSeqence = this.seqence[i].split(" ");
|
||
if (judgeValue[0] === judgeSeqence[0]) {
|
||
if (judgeValue[1] === "null") {
|
||
return;
|
||
}
|
||
this.seqence.splice(i, 1, value);
|
||
console.log(this.seqence);
|
||
return;
|
||
}
|
||
if (i + 1 === this.seqence.length) {
|
||
this.seqence.push(value);
|
||
console.log(this.seqence);
|
||
}
|
||
}
|
||
}
|
||
},
|
||
headerDragend(newWidth, oldWidth, column, event) {
|
||
// realList
|
||
this.realList.forEach((value) => {
|
||
if (column.property == value.tableProp) {
|
||
value.width = newWidth;
|
||
}
|
||
});
|
||
this.$refs.test.init();
|
||
setTimeout(() => {
|
||
this.$refs.test.show();
|
||
}, 1000);
|
||
},
|
||
outop() {
|
||
this.$fixure.createOutOp();
|
||
this.$message.success("任务已下达");
|
||
},
|
||
confirmF() {
|
||
this.$layer.iframe({
|
||
shadeClose: false,
|
||
content: {
|
||
content: fixureConfirm, //传递的组件对象
|
||
parent: this, //当前的vue对象
|
||
data: {
|
||
formType: 1,
|
||
row: this.rows[0],
|
||
},
|
||
},
|
||
title: "工装确认",
|
||
});
|
||
},
|
||
confirmP() {
|
||
this.$layer.iframe({
|
||
shadeClose: false,
|
||
content: {
|
||
content: processConfirm, //传递的组件对象
|
||
parent: this, //当前的vue对象
|
||
data: {
|
||
formType: 1,
|
||
row: this.rows[0],
|
||
},
|
||
},
|
||
title: "程序确认",
|
||
});
|
||
},
|
||
confirmHis() {
|
||
this.$layer.iframe({
|
||
shadeClose: false,
|
||
content: {
|
||
content: confirmView, //传递的组件对象
|
||
parent: this, //当前的vue对象
|
||
data: {
|
||
formType: 1,
|
||
row: this.rows[0],
|
||
},
|
||
},
|
||
title: "转产确认历史",
|
||
});
|
||
},
|
||
|
||
printFlow(respData) {
|
||
this.printData = [];
|
||
this.printInfo = true;
|
||
let router = "";
|
||
this.printData = respData;
|
||
this.$nextTick(() => {
|
||
this.printData.forEach((value, index) => {
|
||
router =
|
||
router +
|
||
'<div style="padding: 0;margin: 0px" class="a4" >' +
|
||
' <div style="width: 98%;text-align: center">' +
|
||
' <strong style="line-height: 80px;font-size: 2em">产品零（部）件工艺流程卡片</strong>' +
|
||
' <div id="qrcode' +
|
||
index +
|
||
'" style="float: right"></div>' +
|
||
" </div>" +
|
||
' <div style="width: 98%;margin-top: 5px">' +
|
||
' <table style="width: 100%;border: black 1px solid;word-wrap:break-word;word-break:break-all;">' +
|
||
' <tr style="border: solid 1px #a0c6e5;">' +
|
||
' <td width="100px">流转卡编号</td>\n' +
|
||
' <td style="border: solid 1px #a0c6e5;" width="280px">' +
|
||
value.orderFlow.number +
|
||
"</td>" +
|
||
' <td style="border: solid 1px #a0c6e5; height: 20px;" width=" 100px">订单编号</td>\n' +
|
||
' <td style="border: solid 1px #a0c6e5; height: 20px;" width="300px">' +
|
||
(value.orderFlow.orderProdNumber || "") +
|
||
"</td>\n" +
|
||
" </tr>" +
|
||
' <tr style="border: solid 1px #a0c6e5;">\n' +
|
||
' <td style="border: solid 1px #a0c6e5; height: 20px;" width="100px">工单编号</td>\n' +
|
||
' <td style="border: solid 1px #a0c6e5; height: 20px;" width="200px">' +
|
||
value.orderFlow.orderWorkNumber +
|
||
"</td>\n" +
|
||
' <td style="border: solid 1px #a0c6e5; height: 20px;">物料编码</td>\n' +
|
||
' <td style="border: solid 1px #a0c6e5; height: 20px;">' +
|
||
value.orderFlow.materialNumber +
|
||
"</td>\n" +
|
||
" </tr>" +
|
||
" <tr>" +
|
||
" <td>产品名称</td>" +
|
||
" <td>" +
|
||
(value.orderFlow.materialName || " ") +
|
||
"</td>" +
|
||
" <td>规格型号</td>\n" +
|
||
" <td>" +
|
||
(value.orderFlow.materialSpec || "") +
|
||
"</td>" +
|
||
" </tr>\n" +
|
||
' <tr style="border: black 1px solid">' +
|
||
" <td>数量</td>" +
|
||
" <td>" +
|
||
(value.orderFlow.planQty || "") +
|
||
"</td>" +
|
||
" <td>批次</td>\n" +
|
||
" <td>" +
|
||
(value.orderFlow.batchNumber || "") +
|
||
"</td>" +
|
||
" </tr>" +
|
||
' <tr style="border: black 1px solid">' +
|
||
" <td>日期</td>\n" +
|
||
" <td>" +
|
||
value.orderFlow.createdDt.split(" ")[0] +
|
||
"</td>" +
|
||
" <td>工作中心</td>" +
|
||
" <td>" +
|
||
(value.orderFlow.workCenterName || "") +
|
||
"</td>" +
|
||
" </tr>" +
|
||
' <tr style="border: black 1px solid">' +
|
||
" <td>工艺路线</td>" +
|
||
" <td>" +
|
||
(value.orderFlow.routeName || "") +
|
||
"</td>" +
|
||
" <td>BOM版本</td>" +
|
||
" <td>" +
|
||
(value.orderFlow.bomName || "") +
|
||
"</td>" +
|
||
" </tr>" +
|
||
' <tr style="border: black 1px solid">' +
|
||
' <td colspan="4">' +
|
||
' <table id="printerTable' +
|
||
index +
|
||
'"' +
|
||
' style="width: 100%;border: black 1px solid;word-wrap:break-word;word-break:break-all;">' +
|
||
"<tr>" +
|
||
' <th style="border: solid 1px #a0c6e5; height: 20px;">工种</th>' +
|
||
' <th style="border: solid 1px #a0c6e5; height: 20px;">工序号</th>' +
|
||
' <th style="border: solid 1px #a0c6e5; height: 20px;">交验数</th>' +
|
||
' <th style="border: solid 1px #a0c6e5; height: 20px;">合格数</th>' +
|
||
' <th style="border: solid 1px #a0c6e5; height: 20px;">返工数</th>' +
|
||
' <th style="border: solid 1px #a0c6e5; height: 20px;">自检者</th>' +
|
||
' <th style="border: solid 1px #a0c6e5; height: 20px;">生产者</th>' +
|
||
' <th style="border: solid 1px #a0c6e5; height: 20px;">检验者</th>' +
|
||
' <th style="border: solid 1px #a0c6e5; height: 20px;">加工时间</th>' +
|
||
" </tr>" +
|
||
" </table>" +
|
||
" </td>" +
|
||
" </tr>" +
|
||
" </table>" +
|
||
" </div>" +
|
||
" </div>";
|
||
});
|
||
let printerTable = document.getElementById("printFlow");
|
||
|
||
printerTable.innerHTML = router;
|
||
this.$nextTick(() => {
|
||
this.printData.forEach((value, idx) => {
|
||
let qrcode = new QRCode("qrcode" + idx, {
|
||
width: 80, //图像宽度
|
||
height: 80, //图像高度
|
||
colorDark: "#000000", //前景色
|
||
colorLight: "#ffffff", //背景色
|
||
typeNumber: 4,
|
||
correctLevel: QRCode.CorrectLevel.H, //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
|
||
});
|
||
qrcode.makeCode(value.orderFlow.number);
|
||
let subTable =
|
||
"<tr>" +
|
||
" <th style='border: solid 1px #a0c6e5; height: 20px;'>工种</th>" +
|
||
" <th style='border: solid 1px #a0c6e5; height: 20px;'>工序号</th>" +
|
||
" <th style='border: solid 1px #a0c6e5; height: 20px;'>交验数</th>" +
|
||
" <th style='border: solid 1px #a0c6e5; height: 20px;'>合格数</th>" +
|
||
" <th style='border: solid 1px #a0c6e5; height: 20px;'>返工数</th>" +
|
||
" <th style='border: solid 1px #a0c6e5; height: 20px;'>自检者</th>" +
|
||
" <th style='border: solid 1px #a0c6e5; height: 20px;'>生产者</th>" +
|
||
" <th style='border: solid 1px #a0c6e5; height: 20px;'>检验者</th>" +
|
||
" <th style='border: solid 1px #a0c6e5; height: 20px;'>加工时间</th>" +
|
||
" </tr>";
|
||
for (let i = 0; i < value.operations.length; i++) {
|
||
let createdDt;
|
||
if (value.operations[i].createdDt) {
|
||
createdDt = value.operations[i].createdDt.split(" ")[0];
|
||
} else {
|
||
createdDt = "";
|
||
}
|
||
subTable =
|
||
subTable +
|
||
"<tr><td >" +
|
||
(i + 1) +
|
||
"</td>" +
|
||
"<td style=''>" +
|
||
value.operations[i].operationName +
|
||
"</td>" +
|
||
"<td >" +
|
||
(value.operations[i].planQty || "") +
|
||
"</td>" +
|
||
"<td >" +
|
||
(value.operations[i].okQty || "") +
|
||
"</td>" +
|
||
"<td >" +
|
||
(value.operations[i].ngQty || "") +
|
||
"</td>" +
|
||
"<td >" +
|
||
(value.operations[i].createdBy || "") +
|
||
"</td>" +
|
||
"<td >" +
|
||
(value.operations[i].createdBy || "") +
|
||
"</td>" +
|
||
"<td >" +
|
||
(value.operations[i].updatedBy || "") +
|
||
"</td>" +
|
||
"<td >" +
|
||
createdDt +
|
||
"</td>" +
|
||
"</tr>";
|
||
}
|
||
let subPrinterTable = document.getElementById("printerTable" + idx);
|
||
subPrinterTable.innerHTML = subTable;
|
||
});
|
||
this.$nextTick(() => {
|
||
window.setTimeout(() => {
|
||
this.loading = false;
|
||
this.printInfo = false;
|
||
let tableToPrint = document.getElementById("printFlow"); //将要被打印的表格
|
||
let newWin = window.open(""); //新打开一个空窗口
|
||
newWin.document.write(
|
||
"<html><head><title>打印流转卡</title></head><style>@page{margin:10px} td{text-align: center; border: solid 1px #a0c6e5; height: 20px;}.a4{page-break-before: auto;" +
|
||
' page-break-after: always;}</style><body style="padding: 0px;margin: 0px">'
|
||
);
|
||
newWin.document.write(tableToPrint.outerHTML); //将表格添加进新的窗口
|
||
newWin.document.write("</body></html>");
|
||
newWin.focus(); //在IE浏览器中使用必须添加这一句
|
||
newWin.print(); //打印
|
||
newWin.close(); //关闭窗口
|
||
}, 1000);
|
||
});
|
||
});
|
||
});
|
||
},
|
||
initPopover() {
|
||
const params = {
|
||
tableName: "flow",
|
||
};
|
||
this.$headerConfig.getRealList(params).then((data) => {
|
||
console.log("开始输出真正表格");
|
||
let temp = JSON.parse(data.data.data);
|
||
console.log(temp);
|
||
this.realList = temp.headerList;
|
||
console.log(this.realList);
|
||
this.$refs.test.init();
|
||
});
|
||
},
|
||
fathers(data) {
|
||
this.List = data.configure.List;
|
||
data.configure.List.forEach((value) => {
|
||
this.realList.forEach((real) => {
|
||
if (value.tableProp == real.tableProp) {
|
||
value.width = real.width;
|
||
}
|
||
});
|
||
});
|
||
|
||
data.configure.headerList.forEach((value) => {
|
||
this.realList.forEach((real) => {
|
||
if (value.tableProp == real.tableProp) {
|
||
value.width = real.width;
|
||
}
|
||
});
|
||
});
|
||
if (data.configure.headerList.length <= 0) {
|
||
return;
|
||
}
|
||
const params = {
|
||
tableName: "flow",
|
||
configure: JSON.stringify(data.configure),
|
||
};
|
||
|
||
this.realList = data.configure.headerList;
|
||
|
||
this.$headerConfig.updateRealList(params).then((value) => {
|
||
console.log(value);
|
||
});
|
||
},
|
||
|
||
currentChange(selection, lastVal) {
|
||
console.log(selection);
|
||
this.rows = [];
|
||
this.rows.push(selection);
|
||
this.single = this.rows.length != 1;
|
||
this.multiple = this.rows.length > 1;
|
||
},
|
||
//展开更多
|
||
showMoreChange() {
|
||
if (!this.showMore) this.tableHeight = this.tableHeight - 50;
|
||
else {
|
||
this.tableHeight = this.tableHeight + 50;
|
||
}
|
||
this.$nextTick(() => {
|
||
this.showMore = !this.showMore;
|
||
});
|
||
},
|
||
serinumber() {
|
||
this.$layer.iframe({
|
||
shadeClose: false,
|
||
content: {
|
||
content: orderSerial, //传递的组件对象
|
||
parent: this, //当前的vue对象
|
||
shadeClose: false,
|
||
data: {
|
||
rows: this.rows,
|
||
},
|
||
},
|
||
title: "序列号",
|
||
});
|
||
},
|
||
handleSizeChange(val) {
|
||
this.queryParams.pageSize = val;
|
||
this.getList();
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.queryParams.pageNo = val;
|
||
this.getList();
|
||
},
|
||
initPage() {
|
||
if (localStorage.getItem("order_flow_index") == undefined) {
|
||
localStorage.setItem("order_flow_index", 50 + "");
|
||
}
|
||
this.queryParams.pageSize = parseInt(
|
||
localStorage.getItem("order_flow_index")
|
||
);
|
||
},
|
||
//初始化表格
|
||
initData() {
|
||
this.getList();
|
||
|
||
this.$nextTick(() => {
|
||
this.tableHeight =
|
||
window.innerHeight - this.$refs.query.offsetHeight - 180;
|
||
});
|
||
|
||
const params = {
|
||
tableName: "flow",
|
||
};
|
||
this.$headerConfig.getRealList(params).then((data) => {
|
||
console.log("开始输出真正表格");
|
||
if (data.data && data.data.data && data.data.data !== null) {
|
||
let temp = JSON.parse(data.data.data);
|
||
this.realList = temp.headerList;
|
||
this.List = temp.List;
|
||
} else {
|
||
this.List = this.$headerConfig.getList("flow");
|
||
this.realList = this.List;
|
||
let temp = {
|
||
headerList: this.realList,
|
||
List: this.List,
|
||
};
|
||
const params = {
|
||
tableName: "flow",
|
||
configure: JSON.stringify(temp),
|
||
};
|
||
this.$headerConfig.updateRealList(params).then((value) => {
|
||
console.log(value);
|
||
});
|
||
}
|
||
this.indexShow = true;
|
||
});
|
||
},
|
||
getWorkCenterTree() {
|
||
this.$plan.getWorkCenterTree().then((resp) => {
|
||
this.treeOptions = [];
|
||
this.treeOptions.push(resp.data.data);
|
||
this.removeBlackChildren(this.treeOptions);
|
||
});
|
||
},
|
||
removeBlackChildren(list) {
|
||
list.forEach((value) => {
|
||
if (value.children.length == 0) {
|
||
value.children = undefined;
|
||
} else {
|
||
this.removeBlackChildren(value.children);
|
||
}
|
||
});
|
||
},
|
||
/** 查询订单列表 */
|
||
getList() {
|
||
this.loading = true;
|
||
const orders = [];
|
||
this.seqence.map((val) => {
|
||
orders.push(
|
||
val.replace("ascending", "asc").replace("descending", "desc")
|
||
);
|
||
});
|
||
this.queryParams.orders = orders;
|
||
this.single = true;
|
||
localStorage.setItem("order_flow_index", this.queryParams.pageSize + "");
|
||
this.$plan.getProdFlowList(this.queryParams).then((resp) => {
|
||
this.loading = false;
|
||
this.total = resp.data.data.recordsTotal;
|
||
this.orderList = resp.data.data.data;
|
||
this.orderList.forEach((value) => {
|
||
value.dictStatusShow = this.$dictType.getOrderFlowStatus(
|
||
value.dictStatus
|
||
);
|
||
});
|
||
});
|
||
},
|
||
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNo = 1;
|
||
this.getList();
|
||
},
|
||
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.dateRange = [];
|
||
this.resetForm("queryForm");
|
||
this.handleQuery();
|
||
this.queryParams.workCenterId = undefined;
|
||
this.queryParams.orderProdNumber = undefined;
|
||
this.queryParams.orderWorkNumber = undefined;
|
||
this.single = true;
|
||
// 非多个禁用
|
||
this.multiple = true;
|
||
this.seqence = [];
|
||
},
|
||
// 多选框选中数据
|
||
handleSelectionChange(selection) {
|
||
console.log("拿到", selection);
|
||
this.rows = selection;
|
||
this.single = selection.length != 1;
|
||
this.multiple = !selection.length;
|
||
},
|
||
start() {
|
||
this.$confirm("是否开始流转卡", "操作提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "info",
|
||
}).then(() => {
|
||
let params = {
|
||
id: this.rows[0].id,
|
||
};
|
||
this.$plan.startFlow(params).then((resp) => {
|
||
if (resp.data.code == "200") {
|
||
this.$message.success("成功");
|
||
this.initData();
|
||
}
|
||
});
|
||
});
|
||
},
|
||
|
||
finish() {
|
||
this.$confirm("是否完成流转卡", "操作提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "info",
|
||
}).then(() => {
|
||
let params = {
|
||
id: this.rows[0].id,
|
||
};
|
||
this.$plan.finishFlow(params).then((resp) => {
|
||
if (resp.data.code == "200") {
|
||
this.$message.success("成功");
|
||
this.initData();
|
||
}
|
||
});
|
||
});
|
||
},
|
||
close() {
|
||
this.$confirm("是否关闭流转卡", "操作提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "info",
|
||
}).then(() => {
|
||
let params = {
|
||
id: this.rows[0].id,
|
||
};
|
||
this.$plan.closeFlow(params).then((resp) => {
|
||
if (resp.data.code == "200") {
|
||
this.$message.success("成功");
|
||
this.initData();
|
||
}
|
||
});
|
||
});
|
||
},
|
||
/** 新增按钮操作 */
|
||
handleAdd() {
|
||
this.$layer.iframe({
|
||
shadeClose: false,
|
||
content: {
|
||
content: orderFlowForm, //传递的组件对象
|
||
parent: this, //当前的vue对象
|
||
data: {},
|
||
},
|
||
// area: ['680px', '380px'],
|
||
title: "创建流转卡",
|
||
});
|
||
},
|
||
/** 修改按钮操作 */
|
||
handleUpdate(row) {
|
||
this.$layer.iframe({
|
||
shadeClose: false,
|
||
content: {
|
||
content: orderFlowForm, //传递的组件对象
|
||
parent: this, //当前的vue对象
|
||
data: {
|
||
formType: 1,
|
||
row: this.rows[0],
|
||
},
|
||
},
|
||
area: ["680px", "640px"],
|
||
title: "编辑订单信息",
|
||
});
|
||
},
|
||
|
||
//打印流转卡
|
||
printer() {
|
||
let ids = [];
|
||
this.rows.forEach((value) => {
|
||
ids.push(value.id);
|
||
});
|
||
this.$plan
|
||
.getFlowPrinterInfo({ id: this.rows[0].orderWorkId, ids: ids })
|
||
.then((resp) => {
|
||
if (resp.data.code == "200") {
|
||
console.log(resp.data.data);
|
||
this.printFlow(resp.data.data);
|
||
}
|
||
});
|
||
},
|
||
|
||
printerFlow() {
|
||
let flag = true;
|
||
this.rows.forEach((data) => {
|
||
if (data.dictStatus !== 3) {
|
||
if (flag) {
|
||
this.$message.error("请选择已完成流转卡");
|
||
}
|
||
flag = false;
|
||
}
|
||
});
|
||
|
||
if (flag) {
|
||
this.$layer.iframe({
|
||
shadeClose: false,
|
||
content: {
|
||
content: printerFlow, //传递的组件对象
|
||
parent: this, //当前的vue对象
|
||
data: {
|
||
formType: 1,
|
||
row: this.rows,
|
||
},
|
||
},
|
||
title: "打印流转卡条码",
|
||
});
|
||
}
|
||
},
|
||
openEdit(index) {
|
||
if (index == 1) {
|
||
//工序下发
|
||
this.$layer.iframe({
|
||
shadeClose: false,
|
||
content: {
|
||
content: flowEdit,
|
||
parent: this,
|
||
data: {
|
||
formType: 1,
|
||
row: this.rows,
|
||
},
|
||
},
|
||
title: "工序下发列表",
|
||
});
|
||
} else if (index == 2) {
|
||
this.$layer.iframe({
|
||
shadeClose: false,
|
||
content: {
|
||
content: MatEdit,
|
||
parent: this,
|
||
data: {
|
||
formType: 1,
|
||
row: this.rows,
|
||
},
|
||
},
|
||
title: "元器件下发列表",
|
||
});
|
||
} else if (index == 3) {
|
||
this.$layer.iframe({
|
||
shadeClose: false,
|
||
content: {
|
||
content: SnEdit,
|
||
parent: this,
|
||
data: {
|
||
formType: 1,
|
||
row: this.rows,
|
||
},
|
||
},
|
||
title: "序列号下发列表",
|
||
});
|
||
}
|
||
},
|
||
teamBind() {
|
||
//班组
|
||
this.$layer.iframe({
|
||
shadeClose: false,
|
||
content: {
|
||
content: teamBind, //传递的组件对象
|
||
parent: this, //当前的vue对象
|
||
data: {
|
||
row: this.rows[0],
|
||
},
|
||
},
|
||
title: "分配班组",
|
||
});
|
||
},
|
||
pause() {
|
||
this.$confirm("是否暂停流转卡？", "操作提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "info",
|
||
}).then(() => {
|
||
let params = {
|
||
id: this.rows[0].id,
|
||
};
|
||
this.$plan.pauseFlow(params).then((resp) => {
|
||
if (resp.data.code == "200") {
|
||
this.$message.success("工单暂停成功");
|
||
this.initData();
|
||
}
|
||
});
|
||
});
|
||
},
|
||
splitFlow() {
|
||
console.log(123);
|
||
this.$confirm("是否更新流转卡状态?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
}).then(() => {
|
||
let params = {
|
||
id: this.rows[0].id,
|
||
};
|
||
this.$plan.getStartF(params).then((resp) => {
|
||
if (resp.data.code == 200) {
|
||
this.$message({
|
||
type: "success",
|
||
message: "状态更改成功!",
|
||
});
|
||
this.initData();
|
||
}
|
||
});
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
@page {
|
||
size: auto; /* auto is the initial value */
|
||
margin: 3mm; /* this affects the margin in the printer settings */
|
||
}
|
||
|
||
html {
|
||
background-color: #ffffff;
|
||
margin: 0px; /* this affects the margin on the html before sending to printer */
|
||
}
|
||
|
||
body {
|
||
border: solid 1px blue;
|
||
margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
|
||
}
|
||
|
||
> .el-form-item {
|
||
padding: 0px;
|
||
margin: 0px;
|
||
}
|
||
|
||
> .vue-treeselect__control {
|
||
height: 20px;
|
||
line-height: 28px;
|
||
}
|
||
.el-divider {
|
||
margin: 1px;
|
||
}
|
||
>>> .el-table__body tr.current-row > td {
|
||
background-color: #8ac1ff !important;
|
||
cursor: pointer;
|
||
}
|
||
.el-table >>> tbody tr:hover > td {
|
||
background-color: #8ac1ff !important;
|
||
}
|
||
.mb8 >>> .el-select .el-input__inner {
|
||
border: 0px;
|
||
}
|
||
|
||
.mb8 >>> .el-select .el-input__inner {
|
||
border: 0px;
|
||
padding-right: 35px;
|
||
}
|
||
|
||
>>> .el-input__suffix-inner {
|
||
display: none;
|
||
}
|
||
>>> .el-form-item {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.el-divider {
|
||
margin-top: 0px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
>>> .el-table .el-table__header-wrapper th {
|
||
padding: 5px 0;
|
||
}
|
||
</style>
|