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.

685 lines
25 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="68px">
<el-form-item label="物料编码" prop="materialCode">
<el-input
v-model="queryParams.materialCode"
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="materialSpec">
<el-input
v-model="queryParams.materialSpec"
placeholder="请输入物料规格"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="顶级标识" prop="topFlag">
<el-select v-model="queryParams.topFlag" placeholder="请选择顶级标识" clearable>
<el-option
v-for="dict in dict.type.active_flag"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="校验类型" prop="checkType">-->
<!-- <el-select v-model="queryParams.checkType" placeholder="请选择校验类型" clearable>-->
<!-- <el-option-->
<!-- v-for="dict in dict.type.check_type"-->
<!-- :key="dict.value"-->
<!-- :label="dict.label"-->
<!-- :value="dict.value"-->
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="激活标识" prop="activeFlag">-->
<!-- <el-select v-model="queryParams.activeFlag" placeholder="请选择激活标识" clearable>-->
<!-- <el-option-->
<!-- v-for="dict in dict.type.active_flag"-->
<!-- :key="dict.value"-->
<!-- :label="dict.label"-->
<!-- :value="dict.value"-->
<!-- />-->
<!-- </el-select>-->
<!-- </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="['mes:materialBom:add']"
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-sort"
size="mini"
@click="toggleExpandAll"
>展开/折叠
</el-button>
</el-col>
<!--right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar-->
</el-row>
<el-table
v-if="refreshTable"
v-loading="loading"
:data="materialBomList"
row-key="materialBomId"
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column label="父级标识" prop="parentId" v-if="columns[1].visible"/>
<el-table-column label="祖级列表" align="center" prop="ancestors" v-if="columns[2].visible"/>
<el-table-column label="物料ID" align="center" prop="materialId" v-if="columns[3].visible"/>
<el-table-column label="物料编码" align="left" prop="materialCode" />
<el-table-column label="物料名称" align="left" prop="materialName" v-if="columns[4].visible"/>
<el-table-column label="物料规格" align="center" prop="materialSpec"/>
<el-table-column label="BOM说明" align="center" prop="materialBomDesc" v-if="columns[15].visible"/>
<el-table-column label="标准数量" align="center" prop="standardAmount" v-if="columns[5].visible"/>
<!-- <el-table-column label="安装时长" align="center" prop="assembleTime" v-if="columns[16].visible">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ formatDayHourMinutes(scope.row.assembleTime) }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="顶级标识" align="center" prop="topFlag" v-if="columns[6].visible">
<template slot-scope="scope">
<dict-tag :options="dict.type.active_flag" :value="scope.row.topFlag"/>
</template>
</el-table-column>
<!-- <el-table-column label="校验类型" align="center" prop="checkType" v-if="columns[7].visible">-->
<!-- <template slot-scope="scope">-->
<!-- <dict-tag :options="dict.type.check_type" :value="scope.row.checkType"/>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="项目ID" align="center" prop="projectId" v-if="columns[8].visible"/>
<el-table-column label="激活标识" align="center" prop="activeFlag" v-if="columns[9].visible">
<template slot-scope="scope">
<dict-tag :options="dict.type.active_flag" :value="scope.row.activeFlag"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" v-if="columns[10].visible"/>
<el-table-column label="状态" align="center" width="100">
<template slot-scope="scope">
<el-switch
v-model="scope.row.activeFlag"
active-value="1"
inactive-value="0"
@change="handleStatusChange(scope.row)"
v-if="scope.row.topFlag===1"
></el-switch>
</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="handleUpdate(scope.row)"-->
<!-- v-hasPermi="['mes:materialBom:edit']"-->
<!-- >修改-->
<!-- </el-button>-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-plus"-->
<!-- @click="handleAdd(scope.row)"-->
<!-- v-hasPermi="['mes:materialBom:add']"-->
<!-- >新增子BOM-->
<!-- </el-button>-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-delete"-->
<!-- @click="handleDelete(scope.row)"-->
<!-- v-hasPermi="['mes:materialBom:remove']"-->
<!-- >删除-->
<!-- </el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
<!-- 添加或修改物料BOM信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="父级BOM" prop="parentId" v-if="topBomVisible">
<treeselect v-model="form.parentId" :options="materialBomOptions" :normalizer="normalizer"
v-if="topBomVisible" disabled/>
</el-form-item>
<!-- <el-form-item label="物料ID" prop="materialId">-->
<!-- <el-input v-model="form.materialId" placeholder="请输入物料ID" />-->
<!-- </el-form-item>-->
<el-form-item :label="childBomName" prop="materialName">
<el-input v-model="form.materialName" placeholder="请点击右侧检索子BOM" readonly>
<el-button slot="append" icon="el-icon-search" @click="handleMaterialAdd"></el-button>
</el-input>
</el-form-item>
<el-form-item label="BOM说明" prop="materialBomDesc">
<el-input v-model="form.materialBomDesc" placeholder="请输入BOM说明(BOM版本)"/>
</el-form-item>
<el-form-item label="安装时长" prop="assembleTime" v-if="assembleTimeVisible">
<el-input-number v-model="form.productionTimeDays" placeholder="请输入天数" :min="0" :max="10000"
:controls="false" :style="{ width: '50px' }"/>
<el-input-number v-model="form.productionTimeHours" placeholder="请输入小时" :min="0" :max="23"
:controls="false" :style="{ width: '50px' }"/>
小时
<el-input-number v-model="form.productionTimeMinutes" placeholder="请输入分钟" :min="0" :max="59"
:controls="false" :style="{ width: '50px' }"/>
分钟
</el-form-item>
<el-form-item label="标准数量" prop="standardAmount">
<el-input-number v-model="form.standardAmount" :min="1" placeholder="请输入标准数量"
:disabled="amountDisabled"/>
</el-form-item>
<!-- <el-form-item label="顶级标识" prop="topFlag">-->
<!-- <el-radio-group v-model="form.topFlag">-->
<!-- <el-radio-->
<!-- v-for="dict in dict.type.active_flag"-->
<!-- :key="dict.value"-->
<!-- :label="parseInt(dict.value)"-->
<!-- >{{dict.label}}</el-radio>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<el-form-item label="校验类型" prop="checkType" v-if="form.topFlag !== TOP_FLAG.YES">
<el-radio-group v-model="form.checkType">
<el-radio
v-for="dict in dict.type.check_type"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="激活标识" prop="activeFlag">
<el-radio-group v-model="form.activeFlag">
<el-radio
v-for="dict in dict.type.active_flag"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 添加物料信息对话框 -->
<el-dialog title="选择物料信息" :visible.sync="materialOpen" append-to-body>
<select-material @selection="handleSelection" ref="materialRef" v-if="materialOpen"></select-material>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitMaterialForm">确 定</el-button>
<el-button @click="materialOpen = false">取 消</el-button>
</div>
</el-dialog>
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<!-- <div class="el-upload__tip" slot="tip">-->
<!-- <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据-->
<!-- </div>-->
<span>仅允许导入xls、xlsx格式文件。</span>
<!-- <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>-->
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listMaterialBom,
getMaterialBom,
delMaterialBom,
addMaterialBom,
updateMaterialBom,
changeBomStatus
} from "@/api/mes/materialBom";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import selectMaterial from '@//views/mes/materialinfo/selectMaterial.vue';
import {verifyBOMIsProduction} from "@//api/mes/productOrder";
import {getToken} from "@/utils/auth";
export default {
name: "MaterialBom",
dicts: ['active_flag', 'check_type'],
components: {
Treeselect,
'select-material': selectMaterial
},
data() {
return {
// 遮罩层
loading: true,
// 显示搜索条件
showSearch: true,
// 物料BOM信息表格数据
materialBomList: [],
// 物料BOM信息树选项
materialBomOptions: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 安装时长 顶级BOM不显示
assembleTimeVisible: true,
// 添加时顶级BOM不显示
topBomVisible: true,
// 顶级BOM数量不可输入
amountDisabled: false,
// 子级BOM名称变化
childBomName: "子级BOM",
// 是否显示物料弹出层
materialOpen: false,
// 是否展开,默认全部展开
isExpandAll: true,
// 重新渲染表格状态
refreshTable: true,
// 查询参数
queryParams: {
parentId: null,
ancestors: null,
materialId: null,
materialName: null,
standardAmount: null,
materialBomDesc: null,
topFlag: null,
checkType: null,
projectId: null,
activeFlag: null,
},
// 表单参数
form: {},
// 表单校验
rules: {
materialId: [
{required: true, message: "物料ID不能为空", trigger: "blur"}
],
materialName: [
{required: true, message: "请选择BOM信息", trigger: "blur"}
],
materialBomDesc: [
{required: true, message: "BOM说明不能为空", trigger: "blur"}
],
standardAmount: [
{required: true, message: "标准数量不能为空", trigger: "blur"}
],
activeFlag: [
{required: true, message: "激活标识不能为空", trigger: "change"}
],
},
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: {Authorization: "Bearer " + getToken()},
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/mes/import/BOMImportData"
},
columns: [
{key: 0, label: `主键标识`, visible: false},
{key: 1, label: `父级标识`, visible: false},
{key: 2, label: `祖级列表`, visible: false},
{key: 3, label: `物料ID`, visible: false},
{key: 4, label: `物料名称`, visible: true},
{key: 5, label: `标准数量`, visible: true},
{key: 6, label: `顶级标识`, visible: true},
{key: 7, label: `校验类型`, visible: true},
{key: 8, label: `项目ID`, visible: false},
{key: 9, label: `激活标识`, visible: false},
{key: 10, label: `备注`, visible: false},
{key: 11, label: `创建人`, visible: true},
{key: 12, label: `创建时间`, visible: true},
{key: 13, label: `更新人`, visible: true},
{key: 14, label: `更新时间`, visible: true},
{key: 15, label: `BOM说明`, visible: true},
{key: 16, label: `安装时长`, visible: true},
],
//顶级标识
TOP_FLAG: {
YES: 1,
NO: 0
}
};
},
watch: {
'form.parentId': function (newValue, oldValue) {
if (newValue === 0) {
this.topBomVisible = false;
this.amountDisabled = true;
this.childBomName = "成品BOM";
} else {
this.topBomVisible = true;
this.amountDisabled = false;
this.childBomName = "子级BOM";
}
},
},
created() {
this.getList();
},
methods: {
/** 查询物料BOM信息列表 */
getList() {
this.loading = true;
listMaterialBom(this.queryParams).then(response => {
this.materialBomList = this.handleTree(response.data, "materialBomId", "parentId");
this.loading = false;
});
},
/** 转换物料BOM信息数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.materialBomId,
label: node.materialName,
children: node.children
};
},
/** 查询物料BOM信息下拉树结构 */
getTreeselect() {
listMaterialBom().then(response => {
this.materialBomOptions = [];
const data = {materialBomId: 0, materialName: '顶级节点', children: []};
data.children = this.handleTree(response.data, "materialBomId", "parentId");
this.materialBomOptions.push(data);
});
},
/** 查询物料BOM信息下拉树结构 */
getBomTreeselect(selectData) {
let dataBom = [];
dataBom.push(selectData)
this.materialBomOptions = [];
const data = {materialBomId: 0, materialName: '顶级节点', children: []};
data.children = this.handleTree(dataBom, "materialBomId", "parentId");
this.materialBomOptions.push(data);
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
materialBomId: null,
parentId: null,
ancestors: null,
materialId: null,
materialName: null,
standardAmount: null,
materialBomDesc: null,
productionTimeDays: 0,
productionTimeHours: 0,
productionTimeMinutes: 0,
topFlag: 1,
checkType: '0',
projectId: null,
activeFlag: '1',
remark: null,
assembleTime: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.assembleTimeVisible = true;
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd(row) {
this.reset();
// this.getTreeselect();
if (row != null && row.materialBomId) {
this.form.topFlag = this.TOP_FLAG.NO;
this.form.parentId = row.materialBomId;
verifyBOMIsProduction(row.materialBomId).then(res => {
if (res.data) {
throw Error()
}
getMaterialBom(row.materialBomId).then(e => {
//BOM说明顶级不能为空在选择bom时可以用此字段区分
this.rules.materialBomDesc[0].required = this.form.parentId === 0;
this.assembleTimeVisible = true;
this.form.checkType = e.data.checkType;
this.getBomTreeselect(e.data);
this.open = true;
this.title = "添加物料BOM信息";
})
}).catch((e) => {
this.$modal.msgError("该物料BOM已被生产工单选择无法新增");
});
} else {
this.form.parentId = 0;
this.form.topFlag = this.TOP_FLAG.YES;
this.assembleTimeVisible = false;
this.open = true;
this.title = "添加物料BOM信息";
}
},
/** 新增按钮操作 */
handleMaterialAdd() {
this.materialOpen = true;
},
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.getTreeselect();
if (row != null) {
this.form.parentId = row.materialBomId;
verifyBOMIsProduction(row.materialBomId).then(res => {
if (res.data) {
this.$modal.msgError("该物料BOM已被生产工单选择无法修改");
} else {
getMaterialBom(row.materialBomId).then(response => {
this.form = response.data;
this.convertToTime();
if (this.form.parentId === 0) {
this.assembleTimeVisible = false;
}
//BOM说明顶级不能为空在选择bom时可以用此字段区分
this.rules.materialBomDesc[0].required = this.form.parentId === 0;
this.open = true;
this.title = "修改物料BOM信息";
});
}
})
}
},
/** 天小时分钟转换为秒 */
convertToSeconds() {
const daysInSeconds = this.form.productionTimeDays * 24 * 60 * 60;
const hoursInSeconds = this.form.productionTimeHours * 60 * 60;
const minutesInSeconds = this.form.productionTimeMinutes * 60;
this.form.assembleTime = daysInSeconds + hoursInSeconds + minutesInSeconds;
},
/** 秒转换为天小时分钟 */
convertToTime() {
const totalSeconds = this.form.assembleTime;
const days = Math.floor(totalSeconds / (24 * 60 * 60));
const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
// 更新到表单中
this.form.productionTimeDays = days;
this.form.productionTimeHours = hours;
this.form.productionTimeMinutes = minutes;
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (!/^[0-9]\d*$/.test(this.form.productionTimeDays)
|| !/^[0-9]\d*$/.test(this.form.productionTimeHours)
|| !/^[0-9]\d*$/.test(this.form.productionTimeMinutes)) {
this.$modal.msgError("安装时长天、小时、分钟需为大于等于0的正整数");
return;
}
this.convertToSeconds();
if (this.form.materialBomId != null) {
updateMaterialBom(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addMaterialBom(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
handleSelection(selection) {
this.ids = selection.map(item => item.materialBomId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 提交物料信息按钮 */
submitMaterialForm() {
let selectedRow = this.$refs.materialRef.selectedRow;
this.$set(this.form, "materialId", selectedRow.materialId);
this.$set(this.form, "materialName", selectedRow.materialName);
this.$set(this.form, "erpMaterialId", selectedRow.erpId);
this.materialOpen = false;
},
/** 导入按钮操作 */
handleImport() {
this.upload.title = "BOM导入";
this.upload.open = true;
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
this.getList();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
/** 删除按钮操作 */
handleDelete(row) {
verifyBOMIsProduction(row.materialBomId).then(res => {
if (res.data) {
throw Error()
}
this.$modal.confirm('是否确认删除物料名称为"' + row.materialName + '"的数据项?').then(function () {
return delMaterialBom(row.materialBomId);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
});
}).catch((e) => {
this.$modal.msgError("该物料BOM已被生产工单选择无法删除");
return;
});
},
// 状态修改
handleStatusChange(row) {
let text = row.activeFlag === "1" ? "启用" : "停用";
this.$modal.confirm('确认要"' + text + '""' + row.materialName + '"bom吗').then(function() {
return changeBomStatus(row.materialBomId, row.activeFlag);
}).then(() => {
this.$modal.msgSuccess(text + "成功");
}).catch(function() {
row.activeFlag = row.activeFlag === "0" ? "1" : "0";
});
},
}
};
</script>