hberp/hb_client/src/views/mtm/materialDetail.vue

550 lines
18 KiB
Python

<template>
<div class="app-container">
<el-card>
<el-card>
<el-descriptions
title="物料基本信息"
direction="vertical"
:column="8"
border
>
<el-descriptions-item label="物料编号">
{{ materialdetail.number }}
</el-descriptions-item>
<el-descriptions-item label="物料名称">
{{ materialdetail.name }}
</el-descriptions-item>
<el-descriptions-item label="规格型号" :span="2">
{{ materialdetail.specification }}
</el-descriptions-item>
<el-descriptions-item label="计量单位">
{{ materialdetail.unit }}
</el-descriptions-item>
<el-descriptions-item label="数量">
{{ materialdetail.count }}
</el-descriptions-item>
<el-descriptions-item label="文件">
<el-link v-if="materialdetail.file_" :href="materialdetail.file_.path">{{materialdetail.file_.name}}
</el-link>
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-tabs v-model="activeName" type="card">
<el-tab-pane
v-if="this.type == 3 || this.type == 4"
label="供应商"
name="5"
>
</el-tab-pane>
<el-tab-pane label="批次" name="3">
<el-table
:data="InventoryList"
border
fit
stripe
height="460"
highlight-current-row
>
<el-table-column type="index" width="50"/>
<el-table-column label="物料批次">
<template slot-scope="scope">{{ scope.row.batch }}</template>
</el-table-column>
<el-table-column label="物料名称">
<template slot-scope="scope">{{scope.row.material_.name}}</template>
</el-table-column>
<el-table-column label="规格型号">
<template slot-scope="scope">{{scope.row.material_.specification}}</template>
</el-table-column>
<el-table-column label="物料编号">
<template slot-scope="scope">{{scope.row.material_.number}}</template>
</el-table-column>
<el-table-column label="仓库名称">
<template slot-scope="scope">{{scope.row.warehouse_.name}}</template>
</el-table-column>
<el-table-column label="仓库编号">
<template slot-scope="scope">{{scope.row.warehouse_.number}}</template>
</el-table-column>
<el-table-column label="物料总存量">
<template slot-scope="scope">{{ scope.row.count }}</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="关联的订单" name="1">
<el-table
:data="orderlist"
border
fit
stripe
highlight-current-row
height="460"
>
<el-table-column type="index" width="50"/>
<el-table-column label="订单编号" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.number }}</template>
</el-table-column>
<el-table-column label="客户" show-overflow-tooltip>
<template slot-scope="scope">{{
scope.row.customer_.name
}}
</template>
</el-table-column>
<el-table-column label="所属合同" show-overflow-tooltip>
<template slot-scope="scope">{{
scope.row.contract_.name
}}
</template>
</el-table-column>
<el-table-column label="产品名称" show-overflow-tooltip>
<template slot-scope="scope">{{
scope.row.product_.name
}}
</template>
</el-table-column>
<el-table-column label="产品型号" show-overflow-tooltip>
<template slot-scope="scope">{{
scope.row.product_.specification
}}
</template>
</el-table-column>
<el-table-column label="产品数量">
<template slot-scope="scope">{{ scope.row.count }}</template>
</el-table-column>
<el-table-column label="交货日期">
<template slot-scope="scope">{{
scope.row.delivery_date
}}
</template>
</el-table-column>
<el-table-column label="创建时间">
<template slot-scope="scope">{{
scope.row.create_time
}}
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="关联的计划" name="2">
<el-table
:data="productionplanList"
border
fit
stripe
style="width: 100%"
height="460"
>
<el-table-column type="index" width="50"/>
<el-table-column label="任务编号">
<template slot-scope="scope">{{ scope.row.number }}</template>
</el-table-column>
<el-table-column label="订单编号">
<template slot-scope="scope">{{
scope.row.order_.number
}}
</template>
</el-table-column>
<el-table-column label="合同编号">
<template slot-scope="scope">{{
scope.row.order_.contract_.number
}}
</template>
</el-table-column>
<el-table-column label="生产数量">
<template slot-scope="scope">{{ scope.row.count }}</template>
</el-table-column>
<el-table-column label="计划开工时间">
<template slot-scope="scope">{{ scope.row.start_date }}</template>
</el-table-column>
<el-table-column label="计划完工时间">
<template slot-scope="scope">{{ scope.row.end_date }}</template>
</el-table-column>
<el-table-column label="交付截止时间">
<template slot-scope="scope">{{
scope.row.order_.delivery_date
}}
</template>
</el-table-column>
<el-table-column label="是否生成子计划">
<template slot-scope="scope">
<el-tag v-if="scope.row.is_planed == false"></el-tag>
<el-tag v-if="scope.row.is_planed == true"></el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间">
<template slot-scope="scope">{{
scope.row.create_time
}}
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane
label="物料"
name="4"
v-if="this.type == 1 || this.type == 2"
>
<el-table
:data="wproductList"
border
fit
stripe
style="width: 100%"
height="460"
>
<el-table-column type="index" width="50"/>
<el-table-column label="玻璃编号">
<template slot-scope="scope">{{ scope.row.number }}</template>
</el-table-column>
<el-table-column label="所在子工序">
<template slot-scope="scope">{{ scope.row.step_.name }}</template>
</el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">{{
actstate_[scope.row.act_state]
}}
</template>
</el-table-column>
<el-table-column label="仓库">
<template slot-scope="scope" v-if="scope.row.warehouse_">{{
scope.row.warehouse_.name
}}
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="装箱单" name="5" v-if="this.type == 1">
<el-button
v-if="checkPermission(['packitem_create'])"
type="primary"
icon="el-icon-plus"
@click="handleCreate"
>
新增装箱单
</el-button>
<el-table
:data="pickList"
border
fit
stripe
style="width: 100%"
height="460"
>
<el-table-column type="index" width="50"/>
<el-table-column label="名称">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column label="单位">
<template slot-scope="scope">{{ scope.row.unit }}</template>
</el-table-column>
<el-table-column label="数量">
<template slot-scope="scope">{{scope.row.count}}</template>
</el-table-column>
<el-table-column
align="center"
label="操作"
width="220px"
>
<template slot-scope="scope">
<el-link
v-if="checkPermission(['packitem_update'])"
type="primary"
@click="handleEdit(scope)"
>
编辑
</el-link>
<el-link
v-if="checkPermission(['packitem_delete'])"
type="danger"
@click="handleDelete(scope)"
>
删除
</el-link>
</template>
</el-table-column>
</el-table>
<el-dialog
:visible.sync="dialogVisible"
:close-on-click-modal="false"
:title="dialogType === 'edit' ? '编辑装箱单' : '新增装箱单'"
>
<el-form
ref="Form"
:model="packitem"
label-width="100px"
label-position="right"
:rules="rule1"
>
<el-form-item label="物料"
prop="material"
>
<el-select v-model="packitem.material" @change="selectmaterial">
<el-option
v-for="item in materialoptions"
:key="item.id"
:label="item.name"
:value="item.id">
<span style="float: left">{{ item.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.specification }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="packitem.name" placeholder="名称"/>
</el-form-item>
<el-form-item label="单位" prop="unit">
<el-input v-model="packitem.unit" placeholder="单位"/>
</el-form-item>
<el-form-item label="型号" prop="specification">
<el-input v-model="packitem.specification" placeholder="型号"/>
</el-form-item>
<el-form-item label="数量" prop="count">
<el-input-number
style="width: 100%"
v-model="packitem.count"
:step="1"
:min="0"
step-strictly
placeholder="数量"
></el-input-number>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="packitem.sort"
:min="1"
placeholder="排序"
></el-input-number>
</el-form-item>
</el-form>
<div style="text-align: right">
<el-button
type="danger"
@click="dialogVisible = false"
>
取消
</el-button>
<el-button type="primary" @click="confirm('Form')">确认</el-button>
</div>
</el-dialog>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
<script>
import checkPermission from "@/utils/permission";
import vueJsonEditor from "vue-json-editor";
import {upUrl, upHeaders} from "@/api/file";
import {getProductionplanList} from "@/api/pm";
import {getmaterialbatchList} from "@/api/inm";
import {getOrderList} from "@/api/sam";
import {
getMaterial,
getpackitemList,
createpackitem,
updatepackitem,
deletepackitem,
getMaterialList
} from "@/api/mtm";
import {getwproductList} from "@/api/wpm";
import {upFile} from "@/api/file";
import {genTree} from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
const defaultpackitem = {
name: "",
unit: "",
specification: "",
};
export default {
components: {Pagination, vueJsonEditor, Treeselect},
data() {
return {
materialdetail: "",
orderlist: [],
wproductList: [],
productionplanList: [],
InventoryList: [],
activeName: "3",
packitem: defaultpackitem,
dialogVisible: false,
dialogType: "new",
pickList: [],
materialoptions: [],
actstate_: {
6: "待复检",
10: "操作进行中",
20: "待检验",
30: "已合格",
40: "库存中",
50: "不合格",
60: "待成品检验",
8: "操作准备中",
26: "待夹层检验",
70: "报废",
},
rule1: {
name: [{required: true, message: "请输入名称", trigger: "blur"}],
unit: [{required: true, message: "请输入单位", trigger: "blur"}],
},
};
},
computed: {},
watch: {},
created() {
this.material = this.$route.params.id;
this.type = this.$route.params.type;
this.getMaterialist();
this.getMaterial();
this.getpickList();
this.getOrderList();
this.getplanList();
this.getmaterialbatchList();
this.getwproductList();
},
methods: {
checkPermission,
//新增装箱单
getMaterialist() {
getMaterialList({pageoff: true, type: 3}).then((response) => {
if (response.data) {
this.materialoptions = response.data;
}
});
},
selectmaterial(selval) {
getMaterial(selval).then((response) => {
if (response.data) {
this.packitem.name = response.data.name;
this.packitem.unit = response.data.unit;
this.packitem.specification = response.data.specification;
}
});
},
handleCreate() {
this.packitem = Object.assign({}, defaultpackitem);
this.dialogType = "new";
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs["Form"].clearValidate();
});
},
handleEdit(scope) {
this.packitem = Object.assign({}, scope.row); // copy obj
this.dialogType = "edit";
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs["Form"].clearValidate();
});
},
handleDelete(scope) {
this.$confirm("确认删除?", "警告", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "error",
})
.then(async () => {
await deletepackitem(scope.row.id);
this.getpickList();
this.$message.success("成功");
})
.catch((err) => {
console.error(err);
});
},
async confirm(form) {
this.$refs[form].validate((valid) => {
if (valid) {
const isEdit = this.dialogType === "edit";
if (isEdit) {
updatepackitem(this.packitem.id, this.packitem).then((res) => {
if (res.code >= 200) {
this.getpickList();
this.dialogVisible = false;
this.$message.success("成功");
}
});
} else {
this.packitem.product = this.material;
createpackitem(this.packitem).then((res) => {
if (res.code >= 200) {
this.getpickList();
this.dialogVisible = false;
this.$message.success("成功");
}
});
}
} else {
return false;
}
});
},
getpickList() {
getpackitemList({product: this.material, page: 0}).then((response) => {
if (response.data) {
this.pickList = response.data; //zhuangxiang信息
}
});
},
getMaterial() {
getMaterial(this.material).then((response) => {
if (response.data) {
// debugger;
this.materialdetail = response.data; //物料基本信息
}
});
},
getOrderList() {
getOrderList({material: this.material, page: 0}).then((response) => {
if (response.data) {
this.orderlist = response.data; //物料关联的订单
}
});
},
getplanList() {
getProductionplanList({material: this.material, page: 0}).then(
(response) => {
if (response.data) {
this.productionplanList = response.data; //物料关联计划
}
}
);
},
getmaterialbatchList() {
getmaterialbatchList({material: this.material, page: 0}).then(
(response) => {
if (response.data) {
this.InventoryList = response.data;
}
}
);
},
getwproductList() {
getwproductList({material: this.material, page: 0}).then((response) => {
if (response.data) {
this.wproductList = response.data; //半成品
}
});
},
},
};
</script>