一个箱子里多个品名，比如手机里有衣服，要按照配套品名收费，是否要增加箱明细。入仓记录增加商品明细、已装单显示明细 / 后

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

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

@@ -4,7 +4,7 @@
     <el-dialog
       :title="title + ' - ' + warehousing.orderNo"
       :visible.sync="visible"
-      width="1280px"
+      width="100%"
     >
       <el-tabs v-model="activeName" type="card">
         <el-tab-pane :label="edit ? $t('货物修改') : $t('货物入仓')" name="first">
@@ -185,8 +185,16 @@
                       :is-editing="edit"></warehouse-area-select>
                   </template>
                 </el-table-column>
+                <el-table-column :label="$t('备注')">
+                  <template v-slot="{r,c,$index}">
+                    <el-form-item>
+                      <el-input v-model="form.table[$index].remark" type="textarea" show-word-limit maxlength="100" placeholder=""></el-input>
+                    </el-form-item>
+                  </template>
+                </el-table-column>
                 <el-table-column :label="$t('操作')">
                   <template v-slot="{ row, column, $index}">
+                    <WarehouseRecordDetail v-model="form.table[$index].orderWarehouseInDetailsVOList" />
                     <el-popconfirm
                         v-if="$index >= protectRowCount"
                         title="确定要删除该行入仓记录吗？"
@@ -505,11 +513,13 @@ import {getProductAttrList} from "@/api/ecw/productAttr"
 import {getProductTypeList} from "@/api/ecw/productType"
 import {addProduct} from "@/api/ecw/product"
 import ImageAndVideoUpload from "@/components/ImageAndVideoUpload/index.vue"
+import WarehouseRecordDetail from "@/views/ecw/order/warehousing/components/WarehouseRecordDetail.vue"
 
 export default {
   name: "Warehouse",
 
   components: {
+    WarehouseRecordDetail,
     ImageAndVideoUpload,
     ProductSelector,
     WarehouseAreaSelect,

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

+<template>
+  <div style="display: inline-block">
+    <el-button size="mini" type="primary" style="margin-right: 10px" @click="handleOpen">{{ title }}</el-button>
+    <el-dialog
+      append-to-body
+      :title="title"
+      :visible.sync="dialogVisible"
+      width="1024px"
+      :before-close="handleClose">
+
+      <el-form>
+        <WarehouseRecordDetailItem v-for="(item, index) in dataList" :key="index" v-model="dataList[index]" :index="index" :attr-list="attrList" />
+      </el-form>
+
+      <el-button type="primary" size="mini" @click="handleAddItem">添加一条明细</el-button>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleSave">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import ProductSelector from "@/components/ProductSelector/index.vue";
+import WarehouseRecordDetailItem from "@/views/ecw/order/warehousing/components/WarehouseRecordDetailItem.vue";
+import {getProductAttrList} from "@/api/ecw/productAttr";
+
+/**
+ * 入仓明细弹窗
+ */
+export default {
+  name: 'WarehouseRecordDetail',
+  components: {WarehouseRecordDetailItem, ProductSelector},
+
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      dialogVisible: false,
+      dataList: [],
+      // 特性列表
+      attrList: []
+    };
+  },
+
+  mounted() {
+    this.getAttrList()
+  },
+
+  methods: {
+    init() {
+      if (!this.value || this.value.length === 0) {
+        this.dataList = [{
+          "boxGauge": "",
+          "boxGauge1": "",
+          "boxGauge2": "",
+          "boxGauge3": "",
+          "brand": undefined,
+          "cartonsNum": undefined,
+          "createTime": "",
+          "expressNo": "",
+          "prodAttrIds": [],
+          "prodId": undefined,
+          "quantityAll": undefined,
+          "specificationType": undefined,
+          "unit": "",
+          "usageIds": "",
+          "volume": undefined,
+          "weight": undefined
+        }]
+      } else {
+        this.dataList = JSON.parse(JSON.stringify(this.value))
+      }
+    },
+    /** 获取产品属性列表 */
+    getAttrList() {
+      getProductAttrList().then(response => {
+        this.attrList = response.data;
+      })
+    },
+    handleAddItem() {
+      this.dataList.push({
+        "boxGauge": "",
+        "boxGauge1": "",
+        "boxGauge2": "",
+        "boxGauge3": "",
+        "brand": undefined,
+        "cartonsNum": undefined,
+        "createTime": "",
+        "expressNo": "",
+        "prodAttrIds": [],
+        "prodId": undefined,
+        "quantityAll": undefined,
+        "specificationType": undefined,
+        "unit": "",
+        "usageIds": "",
+        "volume": undefined,
+        "weight": undefined
+      })
+    },
+    handleOpen() {
+      this.init()
+      this.dialogVisible = true
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+    handleSave() {
+      this.$emit('input', this.dataList)
+    }
+  },
+
+  computed: {
+    title() {
+      return !this.value || this.value.length === 0 ? '添加箱明细' : '编辑箱明细'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

+<template>
+  <el-card style="margin-bottom: 10px">
+    <div slot="header">
+      <span>序号{{ index + 1 }}</span>
+    </div>
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-form-item :label="$t('中文品名')">
+          <product-selector v-if="!readOnly" v-model="value.prodId" determined protect-once/>
+          <span v-else>{{ value.prodTitleZh }}</span>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item :label="$t('品牌')">
+          <el-select
+            v-model="value.brand"
+            :placeholder="$t('可修改')"
+            filterable
+            remote
+            @change="handleBrandChange"
+            :remote-method="getProductBrandPage"
+            clearable>
+            <el-option
+              v-for="item in brandList"
+              :key="item.id"
+              :label="item.titleZh"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-form-item :label="$t('商品特性')">
+          <el-checkbox-group v-model="value.prodAttrIds">
+            <el-checkbox v-for="item in attrList" :key="item.id" :label="item.id">{{ item.attrName }}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item :label="$t('用途')">
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="10">
+      <el-col :span="4">
+        <el-form-item :label="$t('长')">
+          <el-input v-model="value.boxGauge1" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="4">
+        <el-form-item :label="$t('宽')">
+          <el-input v-model="value.boxGauge2" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="4">
+        <el-form-item :label="$t('高')">
+          <el-input v-model="value.boxGauge3" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="4">
+        <el-form-item :label="$t('重量')">
+          <el-input v-model="value.weight" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="4">
+        <el-form-item :label="$t('体积')">
+          <el-input v-model="value.volume" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+import ProductSelector from "@/components/ProductSelector/index.vue";
+import {getProductBrankPage} from "@/api/ecw/productBrank";
+import {getProductAttrList} from "@/api/ecw/productAttr";
+// import {getFeeTypeByOrderProduct} from "@/api/ecw/productBrank";
+
+export default {
+  name: "WarehouseRecordDetailItem",
+  components: {ProductSelector},
+  props: {
+    value: {
+      type: Object,
+      default: () => {}
+    },
+    index: {
+      type: Number,
+      default: 0
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    // 特性列表
+    attrList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      brandList: [],
+    }
+  },
+  methods: {
+    /** 获取产品属性列表 */
+    getAttrList() {
+      getProductAttrList().then(response => {
+        this.attrList = response.data;
+      })
+    },
+    handleBrandChange(v){
+    //   getFeeTypeByOrderProduct({
+    //     brandId: parseInt(v),
+    //     productId: this.warehousing.prodId,
+    //     orderId: this.orderId
+    //   }).then(r => {
+    //     if(r.code === 0){
+    //       (this.activeName === "first" ? this.form : this.form1).feeType = parseInt(r.data.feeType);
+    //       (this.activeName === "first" ? this.form : this.form1).recordMode = parseInt(r.data.recordMode)
+    //     }
+    //   })
+    },
+    getProductBrandPage(titleZh = undefined) {
+      getProductBrankPage({pageSize: 20, titleZh}).then(r => {
+        this.brandList = r.data.list
+      })
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>