|
@@ -0,0 +1,133 @@
|
|
|
+<template>
|
|
|
+ <div style="padding: 20px 2vw">
|
|
|
+ <el-form ref="ruleForm" :model="form" :rules="formRules" label-width="0">
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <a class="choose-product"></a>
|
|
|
+ <el-button type="text" style="color: #02a7f0; font-weight: 700" @click="selectBOM" v-db-click>选择BOM</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="form.allotDetailList"
|
|
|
+ :cell-style="{ padding: '0' }"
|
|
|
+ :row-style="{ height: '35px' }"
|
|
|
+ v-loading="loading"
|
|
|
+ header-row-class-name="tableHeader"
|
|
|
+ >
|
|
|
+ <el-table-column label="品号" prop="specCode" width="180" />
|
|
|
+ <el-table-column label="品名" prop="nameChinese" min-width="180" />
|
|
|
+ <el-table-column label="单品尺寸(L*W*H)" width="220">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ `${scope.row.productLong} * ${scope.row.productWide} * ${scope.row.productHigh}` }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="入库数量" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-form-item :prop="'allotDetailList.' + scope.$index + '.quantity'" :rules="formRules.quantity" :inline-message="true">
|
|
|
+ <el-input-number size="small" v-model="scope.row.quantity" :controls="false" :min="1" :max="999999999" :precision="0" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="80" fixed="right">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" @click="clickRemove(scope.$index)" v-db-click>删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-dialog title="选择BOM" v-if="openSelect" top="50px" :visible.sync="openSelect" width="90%" append-to-body center>
|
|
|
+ <SelectBOM :putInStorageStatus="true" @selectBOM="handleSelect"></SelectBOM>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import SelectBOM from '@/components/shengde/SelectBOM/index'
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ form: Object,
|
|
|
+ },
|
|
|
+ components: { SelectBOM },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ formRules: {
|
|
|
+ quantity: [{ required: true, message: '请输入入库数量', trigger: 'blur' }],
|
|
|
+ },
|
|
|
+ openSelect: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {},
|
|
|
+ computed: mapGetters(['dictData']),
|
|
|
+ methods: {
|
|
|
+ validateForm() {
|
|
|
+ let flag = null
|
|
|
+ this.$refs.ruleForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ flag = true
|
|
|
+ } else {
|
|
|
+ flag = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return flag
|
|
|
+ },
|
|
|
+ selectBOM() {
|
|
|
+ this.openSelect = true
|
|
|
+ },
|
|
|
+ handleSelect(data, index) {
|
|
|
+ if (data && data.bomColors && data.bomColors.length >= index) {
|
|
|
+ let row = data.bomColors[index]
|
|
|
+ if (row && row.id) {
|
|
|
+ let tableData = this.form.allotDetailList.filter((item) => item.businessId === row.id)
|
|
|
+ if (tableData && tableData.length > 0) {
|
|
|
+ this.msgInfo('该物料已添加')
|
|
|
+ } else {
|
|
|
+ this.form.allotDetailList.push({
|
|
|
+ businessId: row.id,
|
|
|
+ quantity: undefined,
|
|
|
+ genre: 2,
|
|
|
+ productLong: row.productLong,
|
|
|
+ productWide: row.productWide,
|
|
|
+ productHigh: row.productHigh,
|
|
|
+ nameChinese: row.nameChinese,
|
|
|
+ specCode: row.specCode,
|
|
|
+ })
|
|
|
+ this.msgSuccess('添加成功')
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.msgInfo('添加失败')
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.msgInfo('添加失败')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clickRemove(index) {
|
|
|
+ this.form.allotDetailList.splice(index, 1)
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.choose-product {
|
|
|
+ display: inline-block;
|
|
|
+ width: 25px;
|
|
|
+ height: 15px;
|
|
|
+ background-image: url('/ShengDeImg/selectProduct.png');
|
|
|
+ background-position: center center;
|
|
|
+ background-size: 25px 15px;
|
|
|
+}
|
|
|
+::v-deep {
|
|
|
+ .el-input-number {
|
|
|
+ .el-input__inner {
|
|
|
+ text-align: left !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog {
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 0 !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|