后台入仓时添加商品 / 后台入仓时添加商品-前端

https://zentao.test.jdshangmen.com/task-view-1921.html

src/views/ecw/order/warehousing/components/Warehouse.vue

@@ -12,13 +12,16 @@
             <el-descriptions border :column="2">
               <el-descriptions-item>
                 <template slot="label"><span style="color: red">*</span>{{ $t('中文品名') }}</template>
-                <product-selector v-if="!order.parentOrderId && !isAdd" v-model="form.prodId" @change="onProductChange"/>
-                <span v-else>{{ warehousing.prodTitleZh }}</span>
+                <span style="min-width: 200px;margin-right: 15px;display: inline-block">
+                  <product-selector v-if="!order.parentOrderId && !isAdd" v-model="form.prodId" @change="onProductChange"/>
+                  <span v-else>{{ prodTitleZh || warehousing.prodTitleZh }}</span>
+                </span>
+                <el-button type="text" @click="isShowProduct = true">添加新商品</el-button>
               </el-descriptions-item>
               <el-descriptions-item>
                 <template slot="label"><span style="color: red">*</span>{{ $t('英文品名') }}</template>
                 <product-selector v-if="!order.parentOrderId && !isAdd" lang="En" v-model="form.prodId" @change="onProductChange"/>
-                <span v-else>{{ warehousing.prodTitleEn }}</span>
+                <span v-else>{{ prodTitleEn || warehousing.prodTitleEn }}</span>
               </el-descriptions-item>
               <el-descriptions-item :label="$t('品牌')">
                 <template slot="label"><span style="color: red">*</span>{{ $t('品牌') }}</template>
@@ -380,6 +383,35 @@
         </template>
       </span>
     </el-dialog>
+
+    <!-- 对话框(添加 / 修改) -->
+    <el-dialog title="添加商品" :visible.sync="isShowProduct" width="550px" append-to-body>
+      <el-form ref="productForm" :model="productForm" :rules="productRules" label-width="110px">
+        <el-form-item :label="$t('商品类型')" prop="typeId">
+          <el-select v-model="productForm.typeId" :placeholder="$t('选择商品类型')" clearable>
+            <el-option v-for="types in typeList" :key="types.id" :label="types.titleZh" :value="types.id" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item :label="$t('中文标题')" prop="titleZh">
+          <el-input v-model="productForm.titleZh" :placeholder="$t('请输入中文标题')" />
+        </el-form-item>
+
+        <el-form-item :label="$t('英文标题')" prop="titleEn">
+          <el-input v-model="productForm.titleEn" :placeholder="$t('请输入英文标题')" />
+        </el-form-item>
+
+        <el-form-item :label="$t('商品特性')" prop="attrArray">
+          <el-select v-model="productForm.attrArray" :placeholder="$t('选择商品特性')" clearable multiple>
+            <el-option v-for="attr in attrList" :key="attr.id" :label="attr.attrName" :value="attr.id" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="productSubmit">{{$t('确定')}}</el-button>
+        <el-button @click="productCancel">{{$t('取消')}}</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -391,6 +423,9 @@ import {cancelProcessInstance} from "@/api/bpm/processInstance"
 import WorkFlow from "@/components/WorkFlow"
 import {DICT_TYPE, getDictDataLabel, getDictDatas} from "@/utils/dict"
 import {orderWarehouseIn, orderWarehouseInUpdateApply} from "@/api/ecw/order"
+import {getProductAttrList} from "@/api/ecw/productAttr"
+import {getProductTypeList} from "@/api/ecw/productType"
+import {createProduct} from "@/api/ecw/product"
 
 export default {
   name: "Warehouse",
@@ -441,6 +476,11 @@ export default {
     }
   },
 
+  mounted() {
+    this.getAttrList()
+    this.getTypeList()
+  },
+
   computed: {
     isAdd() {
       return this.$route.path === "/order/warehousing-add"
@@ -581,7 +621,29 @@ export default {
       formId: '',
 
       // 追加时被保护的行数
-      protectRowCount: -1
+      protectRowCount: -1,
+
+      // 添加商品弹窗
+      isShowProduct: false,
+      productForm: {
+        typeId: undefined,
+        attrArray: [],
+        titleZh: undefined,
+        titleEn: undefined
+      },
+      productRules: {
+        typeId: [{ required: true, message: this.$t("商品类型不能为空"), trigger: "change" }],
+        // attrArray: [{ required: true, message: this.$t("商品特性不能为空"), trigger: "change" }],
+        titleZh: [{ required: true, message: this.$t("中文标题不能为空"), trigger: "blur" }],
+        titleEn: [{ required: true, message: this.$t("英文标题不能为空"), trigger: "blur" }],
+      },
+      //类型列表
+      typeList: [],
+      // 特性列表
+      attrList: [],
+      // 添加商品时的临时名字
+      prodTitleZh: '',
+      prodTitleEn: ''
     }
   },
 
@@ -821,6 +883,48 @@ export default {
         specificationType: '1',
         table: []
       })
+    },
+    /** 获取产品属性列表 */
+    getAttrList() {
+      getProductAttrList().then(response => {
+        this.attrList = response.data;
+      })
+    },
+    /** 获取产品类型列表 */
+    getTypeList() {
+      getProductTypeList().then(response => {
+        this.typeList = response.data;
+      })
+    },
+    productSubmit(){
+      this.$refs["productForm"].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        //商品特性转字符串
+        this.productForm.attrId = this.productForm.attrArray.join(',')
+        // 添加的提交
+        createProduct(this.productForm).then(response => {
+          this.$modal.msgSuccess(this.$t("新增成功"))
+          if (this.activeName === 'first') {
+            this.form.prodId = response.data
+            this.prodTitleZh = this.productForm.titleZh
+            this.prodTitleEn = this.productForm.titleEn
+          } else {
+            this.form1.prodId = response.data
+          }
+          this.productCancel()
+        })
+      })
+    },
+    productCancel(){
+      this.isShowProduct = false
+      this.productForm = {
+        typeId: undefined,
+        attrArray: [],
+        titleZh: undefined,
+        titleEn: undefined
+      }
     }
   }
 }