253 lines
7.5 KiB
Vue
253 lines
7.5 KiB
Vue
<template>
|
||
<span>
|
||
<el-select v-model="selected" :placeholder="placeholder" filterable clearable :loading="loading" size="mini"
|
||
style="width: 100%" :value-key="'rawMaterialId'" :multiple="multiple" collapse-tags>
|
||
<template #empty>
|
||
<el-button v-if="canAdd" @click="add" icon="el-icon-plus">未搜索到原材料，点击添加</el-button>
|
||
<div v-else style="padding: 10px;">未搜索到原材料</div>
|
||
</template>
|
||
<el-option v-for="item in rawMaterialList" :key="item.rawMaterialId"
|
||
:label="getLabel(item)" :value="item.rawMaterialId">
|
||
<div>
|
||
<div class="option-label">
|
||
{{ getLabel(item) }}
|
||
<!-- <span class="material-name">{{ item.rawMaterialName }}[{{ item.specification }}]</span>
|
||
<span class="material-code">（{{ getSku(item) }}）</span> -->
|
||
</div>
|
||
</div>
|
||
</el-option>
|
||
</el-select>
|
||
<el-dialog v-if="canAdd" :visible.sync="addDialogVisible" title="添加原材料" width="700px" append-to-body>
|
||
<el-steps align-center :active="activeStep" finish-status="success">
|
||
<!-- 新增原材料的步骤 -->
|
||
<el-step title="创建原材料"></el-step>
|
||
<!-- 创建参数的步骤 -->
|
||
<el-step title="填写参数信息"></el-step>
|
||
</el-steps>
|
||
|
||
<el-form ref="form" v-if="activeStep === 0" :model="addForm" :rules="rules" label-width="120px">
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="原材料编号" prop="rawMaterialCode">
|
||
<el-input v-model="addForm.rawMaterialCode" placeholder="请输入原材料编号" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="原材料名称" prop="rawMaterialName">
|
||
<el-input v-model="addForm.rawMaterialName" placeholder="请输入原材料名称" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="负责人" prop="owner">
|
||
<el-input v-model="addForm.owner" :multiple="false" placeholder="请填写负责人" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="计量单位" prop="unit">
|
||
<el-input v-model="addForm.unit" placeholder="请输入计量单位" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<div v-if="activeStep === 0" slot="footer" class="dialog-footer">
|
||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">创建原材料</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
|
||
<BomPanel v-if="activeStep === 1" :id="bomId" :itemId="itemId" :type="addForm.type" @addBom="handleBom" />
|
||
</el-dialog>
|
||
</span>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
import { addRawMaterial } from '@/api/wms/rawMaterial';
|
||
import BomPanel from '../BomPanel/index.vue';
|
||
|
||
export default {
|
||
name: "RawMaterialSelect",
|
||
props: {
|
||
value: [String, null, Array],
|
||
placeholder: {
|
||
type: String,
|
||
default: "请选择原材料"
|
||
},
|
||
canAdd: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
multiple: {
|
||
default: false,
|
||
type: Boolean
|
||
},
|
||
},
|
||
components: {
|
||
BomPanel
|
||
},
|
||
data() {
|
||
return {
|
||
options: [],
|
||
selected: this.value,
|
||
loading: false,
|
||
addForm: {
|
||
rawMaterialCode: undefined,
|
||
rawMaterialName: undefined,
|
||
owner: undefined,
|
||
unit: undefined,
|
||
type: 'raw_material'
|
||
},
|
||
addDialogVisible: false,
|
||
rules: {
|
||
rawMaterialCode: [
|
||
{ required: true, message: "原材料编号不能为空", trigger: "blur" }
|
||
],
|
||
rawMaterialName: [
|
||
{ required: true, message: "原材料名称不能为空", trigger: "blur" }
|
||
],
|
||
owner: [
|
||
{ required: true, message: "负责人不能为空", trigger: "blur" }
|
||
],
|
||
},
|
||
buttonLoading: false,
|
||
itemId: undefined,
|
||
activeStep: 0,
|
||
bomId: undefined,
|
||
};
|
||
},
|
||
watch: {
|
||
value(val) {
|
||
if (!val) {
|
||
this.selected = '';
|
||
return;
|
||
}
|
||
if (this.multiple) {
|
||
this.selected = val.split(',') || undefined;
|
||
} else {
|
||
this.selected = val || undefined;
|
||
}
|
||
},
|
||
selected(val) {
|
||
if (this.multiple) {
|
||
this.$emit("input", val.join(','));
|
||
} else {
|
||
this.$emit("input", val);
|
||
}
|
||
this.$emit('change', this.rawMaterialList.find(p => p.rawMaterialId === val));
|
||
}
|
||
},
|
||
mounted() {
|
||
if (this.rawMaterialList.length < 0) {
|
||
this.$store.dispatch('category/getRawMaterialMap')
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['rawMaterialList'])
|
||
},
|
||
methods: {
|
||
async onChange(val) {
|
||
const rawMaterial = this.options.find(p => p.rawMaterialId === val);
|
||
this.$emit('change', rawMaterial);
|
||
},
|
||
getLabel(item) {
|
||
// 原材料名称[规格](参数)，如果有则写，没有则省略
|
||
if (!item.specification) {
|
||
return `${item.rawMaterialName}(${this.getSku(item)})`
|
||
}
|
||
return `${item.rawMaterialName}[${item.specification}](${this.getSku(item)})`
|
||
},
|
||
getSku(item) {
|
||
const boms = item.bomItems;
|
||
if (!boms || boms.length === 0) {
|
||
return '暂无参数信息';
|
||
}
|
||
// 查找attrKey为'规格'的attrvalue
|
||
const specification = boms.find(p => p.attrKey === '规格');
|
||
|
||
// 查找attrKey为'厂家'的attrvalue
|
||
const factory = boms.find(p => p.attrKey === '厂家');
|
||
|
||
// 查找attrKey为'材质'的attrvalue
|
||
const material = boms.find(p => p.attrKey === '材质');
|
||
|
||
console.log(boms, item, '查找bomItems');
|
||
// 组合sku:
|
||
let sku = '';
|
||
if (specification) {
|
||
sku += '规格：' + specification.attrValue + '；';
|
||
}
|
||
if (factory) {
|
||
sku += '厂家：' + factory.attrValue + '；';
|
||
}
|
||
if (material) {
|
||
sku += '材质：' + material.attrValue;
|
||
}
|
||
console.log(sku, '组合sku');
|
||
return sku;
|
||
},
|
||
add() {
|
||
this.addDialogVisible = true;
|
||
this.addForm = {
|
||
rawMaterialCode: undefined,
|
||
rawMaterialName: undefined,
|
||
owner: undefined,
|
||
unit: undefined,
|
||
type: 'raw_material'
|
||
};
|
||
this.bomId = undefined;
|
||
this.itemId = undefined;
|
||
},
|
||
handleBom(bom) {
|
||
this.bomId = bom.bomId;
|
||
},
|
||
submitForm() {
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
this.buttonLoading = true;
|
||
// console.log(this.addForm);
|
||
addRawMaterial(this.addForm).then(res => {
|
||
this.$modal && this.$modal.msgSuccess("创建原材料成功");
|
||
this.$store.dispatch('category/getRawMaterialMap');
|
||
console.log(res);
|
||
this.itemId = res.rawMaterialId;
|
||
this.$emit('input', res.rawMaterialId);
|
||
this.activeStep = 1;
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
cancel() {
|
||
this.addDialogVisible = false;
|
||
this.addForm = {
|
||
rawMaterialCode: undefined,
|
||
rawMaterialName: undefined,
|
||
owner: undefined,
|
||
unit: undefined,
|
||
type: 'raw_material'
|
||
};
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.option-label {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.material-name {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.material-code {
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-left: 10px;
|
||
}
|
||
</style>
|