zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:添加material中的cate选项

This commit is contained in:
shijing 2024-04-11 14:48:38 +08:00
parent 43ecf55818
commit bbff16431d
1 changed files with 376 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

624
src/views/mtm/materials_form.vue
View File

@ -1,256 +1,384 @@
<template>
<el-dialog :title="titleMap[mode]" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
<el-container v-loading="loading">
<el-main style="padding: 0 20px 20px 20px">
<el-form ref="dialogForm" :model="form" :rules="rules" label-width="120px">
<el-row>
<el-col :md="12" :sm="24">
<el-form-item label="物料类别" prop="type">
<el-select v-model="form.type" placeholder="物料类别" clearable style="width:100%" @change="typeChange">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="物料编号" prop="number">
<el-input v-model="form.number" placeholder="物料编号" />
</el-form-item>
</el-col>
<el-col :md="12" :sm="24" prop="name">
<el-form-item label="物料名称">
<el-input v-model="form.name" placeholder="物料名称" />
</el-form-item>
</el-col>
<el-col :md="12" :sm="24" prop="cate">
<el-form-item label="物料系列">
<el-input v-model="form.cate" placeholder="物料系列" />
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="规格">
<el-input v-model="form.specification" placeholder="规格" />
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="型号">
<el-input v-model="form.model" placeholder="型号" />
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="关联物料">
<el-select v-model="brothers" placeholder="关联物料" clearable multiple style="width:100%">
<el-option v-for="item in materialOptions" :key="item.id" :label="item.label" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="已到工序" prop="process">
<el-select v-model="form.process" placeholder="已到工序" clearable style="width:100%">
<el-option v-for="item in processOptions" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="工艺路线" prop="need_route">
<el-switch v-model="form.need_route" />
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="是否隐藏" prop="is_hidden">
<el-switch v-model="form.is_hidden" />
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="安全库存" prop="count_safe">
<el-input-number v-model="form.count_safe" :min="0" />
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="组合件" prop="is_assemb">
<el-switch v-model="form.is_assemb" />
<el-button v-if="form.is_assemb" type="primary" icon="el-icon-plus" style="margin-left: 20px;"
@click="addComponent"></el-button>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="form.is_assemb">
<template v-for="(item, $index) in componentList" :key="item.id">
<el-col :md="11" :sm="24">
<el-form-item label="物料名称">
<el-select v-model="item.id" placeholder="物料名称" clearable style="width:100%">
<el-option v-for="item in materialOptions" :key="item.id" :label="item.full_name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :md="11" :sm="24">
<el-form-item label="数量">
<el-input-number v-model="item.count" controls-position="right" placeholder="数量" clearable
style="width:100%"></el-input-number>
</el-form-item>
</el-col>
<el-col :md="2">
<div style="text-align: center;">
<el-icon class="deleteIcons" @click="delComponent($index)">
<CircleCloseFilled />
</el-icon>
</div>
</el-col>
</template>
</el-row>
</el-form>
</el-main>
<el-footer>
<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
<el-button @click="visible = false">取消</el-button>
</el-footer>
</el-container>
</el-dialog>
<el-dialog
:title="titleMap[mode]"
v-model="visible"
:size="1000"
destroy-on-close
@closed="$emit('closed')"
>
<el-container v-loading="loading">
<el-main style="padding: 0 20px 20px 20px">
<el-form
ref="dialogForm"
:model="form"
:rules="rules"
label-width="120px"
>
<el-row>
<el-col :md="12" :sm="24">
<el-form-item label="物料类别" prop="type">
<el-select
v-model="form.type"
placeholder="物料类别"
clearable
style="width: 100%"
@change="typeChange"
>
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="物料编号" prop="number">
<el-input
v-model="form.number"
placeholder="物料编号"
/>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24" prop="name">
<el-form-item label="物料名称">
<el-input
v-model="form.name"
placeholder="物料名称"
/>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24" prop="cate">
<el-form-item label="物料系列">
<el-select
v-model="form.cate"
placeholder="物料系列"
clearable
style="width: 100%"
>
<el-option
v-for="item in cateOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="规格">
<el-input
v-model="form.specification"
placeholder="规格"
/>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="型号">
<el-input
v-model="form.model"
placeholder="型号"
/>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="关联物料">
<el-select
v-model="brothers"
placeholder="关联物料"
clearable
multiple
style="width: 100%"
>
<el-option
v-for="item in materialOptions"
:key="item.id"
:label="item.label"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="已到工序" prop="process">
<el-select
v-model="form.process"
placeholder="已到工序"
clearable
style="width: 100%"
>
<el-option
v-for="item in processOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="工艺路线" prop="need_route">
<el-switch v-model="form.need_route" />
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="是否隐藏" prop="is_hidden">
<el-switch v-model="form.is_hidden" />
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="安全库存" prop="count_safe">
<el-input-number
v-model="form.count_safe"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="组合件" prop="is_assemb">
<el-switch v-model="form.is_assemb" />
<el-button
v-if="form.is_assemb"
type="primary"
icon="el-icon-plus"
style="margin-left: 20px"
@click="addComponent"
></el-button>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="form.is_assemb">
<template
v-for="(item, $index) in componentList"
:key="item.id"
>
<el-col :md="11" :sm="24">
<el-form-item label="物料名称">
<el-select
v-model="item.id"
placeholder="物料名称"
clearable
style="width: 100%"
>
<el-option
v-for="item in materialOptions"
:key="item.id"
:label="item.full_name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :md="11" :sm="24">
<el-form-item label="数量">
<el-input-number
v-model="item.count"
controls-position="right"
placeholder="数量"
clearable
style="width: 100%"
></el-input-number>
</el-form-item>
</el-col>
<el-col :md="2">
<div style="text-align: center">
<el-icon
class="deleteIcons"
@click="delComponent($index)"
>
<CircleCloseFilled />
</el-icon>
</div>
</el-col>
</template>
</el-row>
</el-form>
</el-main>
<el-footer>
<el-button type="primary" :loading="isSaveing" @click="submit"
>保存</el-button
>
<el-button @click="visible = false">取消</el-button>
</el-footer>
</el-container>
</el-dialog>
</template>
<script>
export default {
emits: ["success", "closed"],
data() {
return {
loading: false,
mode: "add",
titleMap: {
add: "新增物料",
edit: "编辑物料",
show: "查看物料",
},
brothers: [],
form: {},
rules: {
name: [{ required: true, message: "请输入物料名称", trigger: "blur" }],
type: [{ required: true, message: "请选择物料类别", trigger: "blur" }],
number: [{ required: true, message: "请输入物料编号", trigger: "blur" }],
},
visible: false,
isSaveing: false,
options: [
{ id: 0, name: '电/水/气' },
{ id: 10, name: '成品' },
{ id: 20, name: '半成品' },
{ id: 30, name: '主要原料' },
{ id: 40, name: '辅助材料' },
{ id: 50, name: '加工工具' },
{ id: 60, name: '辅助工装' },
{ id: 70, name: '办公用品' },
],
handle_user: [],
selectionFilters: [],
materialOptions: [],
setFiltersVisible: false,
processOptions: [],
componentList: [
{ id: '', count: 1 }
],
};
},
mounted() {
this.getProcessOptions()
},
methods: {
getProcessOptions() {
this.$API.mtm.process.list.req({ page: 0 }).then(res => {
this.processOptions = res
})
},
//显示
open(mode = "add", type) {
this.mode = mode;
this.visible = true;
return this;
},
getMaterial(val) {
let that = this;
let query = {};
query.type = val;
query.page = 0;
query.is_hidden = false;
this.$API.mtm.material.list.req(query).then(res => {
that.materialOptions = [];
res.forEach(item => {
item.label = item.name + '—' + item.specification + '/' + item.model;
})
that.materialOptions = res;
})
},
typeChange(val) {
this.getMaterial(val);
},
//提交
submit() {
this.$refs.dialogForm.validate(async (valid) => {
if (valid) {
this.isSaveing = true;
this.form.brothers = this.brothers;
if (this.form.is_assemb) {
let obj = {};
this.componentList.forEach(item => {
obj[item.id] = item.count;
})
this.form.components = obj;
}
if (this.mode == "add") {
this.$API.mtm.material.create.req(this.form).then(res => {
this.isSaveing = false;
this.$emit("success", this.form, this.mode);
this.visible = false;
this.$message.success("操作成功");
}).catch(() => {
this.isSaveing = false;
this.visible = false;
})
} else if (this.mode == "edit") {
this.$API.mtm.material.update.req(this.form.id, this.form).then(res => {
this.isSaveing = false;
this.$emit("success", this.form, this.mode);
this.visible = false;
this.$message.success("操作成功");
}).catch(() => {
this.isSaveing = false;
})
}
}
});
},
//表单注入数据
setData(data) {
Object.assign(this.form, data);
this.brothers = data.brothers;
let arr = [];
for (let key in data.components) {
let obj = {};
obj.id = key;
obj.count = data.components[key]
arr.push(obj)
}
this.componentList = arr;
this.getMaterial(data.type)
},
addComponent() {
let obj = {};
obj.id = '';
obj.count = 1;
this.componentList.push(obj)
},
delComponent(index) {
this.componentList.splice(index, 1);
console.log('this.componentList:', this.componentList);
},
//设置过滤项
setFilters(filters) {
this.selectionFilters = filters;
this.setFiltersVisible = true;
},
},
emits: ["success", "closed"],
data() {
return {
loading: false,
mode: "add",
titleMap: {
add: "新增物料",
edit: "编辑物料",
show: "查看物料",
},
brothers: [],
form: {},
rules: {
name: [
{
required: true,
message: "请输入物料名称",
trigger: "blur",
},
],
type: [
{
required: true,
message: "请选择物料类别",
trigger: "blur",
},
],
number: [
{
required: true,
message: "请输入物料编号",
trigger: "blur",
},
],
},
visible: false,
isSaveing: false,
cateOptions: [
{ id: "bang", name: "棒" },
{ id: "guan", name: "管" },
{ id: "bangguan", name: "棒管" },
{ id: "huiliao", name: "混料" },
],
options: [
{ id: 0, name: "电/水/气" },
{ id: 10, name: "成品" },
{ id: 20, name: "半成品" },
{ id: 30, name: "主要原料" },
{ id: 40, name: "辅助材料" },
{ id: 50, name: "加工工具" },
{ id: 60, name: "辅助工装" },
{ id: 70, name: "办公用品" },
],
handle_user: [],
selectionFilters: [],
materialOptions: [],
setFiltersVisible: false,
processOptions: [],
componentList: [{ id: "", count: 1 }],
};
},
mounted() {
this.getProcessOptions();
},
methods: {
getProcessOptions() {
this.$API.mtm.process.list.req({ page: 0 }).then((res) => {
this.processOptions = res;
});
},
//显示
open(mode = "add", type) {
this.mode = mode;
this.visible = true;
return this;
},
getMaterial(val) {
let that = this;
let query = {};
query.type = val;
query.page = 0;
query.is_hidden = false;
this.$API.mtm.material.list.req(query).then((res) => {
that.materialOptions = [];
res.forEach((item) => {
item.label =
item.name + "—" + item.specification + "/" + item.model;
});
that.materialOptions = res;
});
},
typeChange(val) {
this.getMaterial(val);
},
//提交
submit() {
this.$refs.dialogForm.validate(async (valid) => {
if (valid) {
this.isSaveing = true;
this.form.brothers = this.brothers;
if (this.form.is_assemb) {
let obj = {};
this.componentList.forEach((item) => {
obj[item.id] = item.count;
});
this.form.components = obj;
}
if (this.mode == "add") {
this.$API.mtm.material.create
.req(this.form)
.then((res) => {
this.isSaveing = false;
this.$emit("success", this.form, this.mode);
this.visible = false;
this.$message.success("操作成功");
})
.catch(() => {
this.isSaveing = false;
this.visible = false;
});
} else if (this.mode == "edit") {
this.$API.mtm.material.update
.req(this.form.id, this.form)
.then((res) => {
this.isSaveing = false;
this.$emit("success", this.form, this.mode);
this.visible = false;
this.$message.success("操作成功");
})
.catch(() => {
this.isSaveing = false;
});
}
}
});
},
//表单注入数据
setData(data) {
Object.assign(this.form, data);
this.brothers = data.brothers;
let arr = [];
for (let key in data.components) {
let obj = {};
obj.id = key;
obj.count = data.components[key];
arr.push(obj);
}
this.componentList = arr;
this.getMaterial(data.type);
},
addComponent() {
let obj = {};
obj.id = "";
obj.count = 1;
this.componentList.push(obj);
},
delComponent(index) {
this.componentList.splice(index, 1);
console.log("this.componentList:", this.componentList);
},
//设置过滤项
setFilters(filters) {
this.selectionFilters = filters;
this.setFiltersVisible = true;
},
},
};
</script>
<style>
.deleteIcons {
color: #f56c6c;
font-size: 25px;
line-height: 34px;
height: 34px;
}</style>
color: #f56c6c;
font-size: 25px;
line-height: 34px;
height: 34px;
}
</style>