箱明细，长宽高用途属性，查看模式

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

@@ -8,13 +8,19 @@
       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 v-if="dialogVisible">
+        <WarehouseRecordDetailItem
+            v-for="(item, index) in dataList"
+            :key="index" v-model="dataList[index]"
+            :index="index" :attr-list="attrList"
+            @handle-delete="handleDelete(index)"
+            :read-only="readOnly"
+        />
       </el-form>
 
-      <el-button type="primary" size="mini" @click="handleAddItem">添加一条明细</el-button>
+      <el-button v-show="!readOnly" type="primary" size="mini" @click="handleAddItem">添加一条明细</el-button>
 
-      <span slot="footer" class="dialog-footer">
+      <span v-show="!readOnly" slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="handleSave">确 定</el-button>
       </span>
@@ -63,9 +69,6 @@ export default {
       if (!this.value || this.value.length === 0) {
         this.dataList = [{
           "boxGauge": "",
-          "boxGauge1": "",
-          "boxGauge2": "",
-          "boxGauge3": "",
           "brand": undefined,
           "cartonsNum": undefined,
           "createTime": "",
@@ -92,9 +95,6 @@ export default {
     handleAddItem() {
       this.dataList.push({
         "boxGauge": "",
-        "boxGauge1": "",
-        "boxGauge2": "",
-        "boxGauge3": "",
         "brand": undefined,
         "cartonsNum": undefined,
         "createTime": "",
@@ -109,11 +109,17 @@ export default {
         "weight": undefined
       })
     },
+    handleDelete(index) {
+      this.dataList.splice(index, 1)
+    },
     handleOpen() {
       this.init()
       this.dialogVisible = true
     },
     handleClose(done) {
+      if (this.readOnly) {
+        return done()
+      }
       this.$confirm('确认关闭？')
         .then(_ => {
           done();
@@ -128,6 +134,9 @@ export default {
 
   computed: {
     title() {
+      if (this.readOnly) {
+        return '查看箱明细'
+      }
       return !this.value || this.value.length === 0 ? '添加箱明细' : '编辑箱明细'
     }
   }

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

@@ -2,12 +2,12 @@
   <el-card style="margin-bottom: 10px">
     <div slot="header">
       <span>序号{{ index + 1 }}</span>
+      <el-link v-show="!readOnly" type="danger" @click="handleDelete" style="float: right">删除</el-link>
     </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>
+          <product-selector v-model="value.prodId" determined protect-once :disabled="readOnly" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
@@ -17,8 +17,8 @@
             :placeholder="$t('可修改')"
             filterable
             remote
-            @change="handleBrandChange"
             :remote-method="getProductBrandPage"
+            :disabled="readOnly"
             clearable>
             <el-option
               v-for="item in brandList"
@@ -33,63 +33,65 @@
     <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 v-model="prodAttrIds">
+            <el-checkbox v-for="item in attrList" :key="item.id" :label="item.id" :disabled="readOnly">{{ item.attrName }}</el-checkbox>
           </el-checkbox-group>
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item :label="$t('用途')">
           <dict-selector
-            v-model="value.usageIds"
+            v-model="usageIds"
             :type="DICT_TYPE.WAREHOUSING_RECORD_DETAIL_USAGE"
             multiple
             form-type="checkbox"
+            :disabled="readOnly"
           ></dict-selector>
+          {{ usageIds }}
         </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-input v-model="boxGauge1" :disabled="readOnly" />
         </el-form-item>
       </el-col>
       <el-col :span="4">
         <el-form-item :label="$t('宽')">
-          <el-input v-model="value.boxGauge2" />
+          <el-input v-model="boxGauge2" :disabled="readOnly" />
         </el-form-item>
       </el-col>
       <el-col :span="4">
         <el-form-item :label="$t('高')">
-          <el-input v-model="value.boxGauge3" />
+          <el-input v-model="boxGauge3" :disabled="readOnly" />
         </el-form-item>
       </el-col>
       <el-col :span="4">
         <el-form-item :label="$t('重量')">
-          <el-input v-model="value.weight" />
+          <el-input v-model="value.weight" :disabled="readOnly" />
         </el-form-item>
       </el-col>
       <el-col :span="4">
         <el-form-item :label="$t('体积')">
-          <el-input v-model="value.volume" />
+          <el-input v-model="value.volume" :disabled="readOnly" />
         </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.expressNo" />
+          <el-input v-model="value.expressNo" :disabled="readOnly" />
         </el-form-item>
       </el-col>
       <el-col :span="4">
         <el-form-item :label="$t('包装类型')">
-          <dict-selector :type="DICT_TYPE.ECW_PACKAGING_TYPE" v-model="value.unit"></dict-selector>
+          <dict-selector :type="DICT_TYPE.ECW_PACKAGING_TYPE" v-model="value.unit" :disabled="readOnly"></dict-selector>
         </el-form-item>
       </el-col>
       <el-col :span="4">
         <el-form-item :label="$t('数量')">
-          <el-input v-model="value.quantityAll" />
+          <el-input v-model="value.quantityAll" :disabled="readOnly" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -97,13 +99,18 @@
 </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";
+import ProductSelector from "@/components/ProductSelector/index.vue"
+import { getProductBrank, getProductBrankPage } from '@/api/ecw/productBrank'
+import {getProductAttrList} from "@/api/ecw/productAttr"
+import { DICT_TYPE } from '@/utils/dict'
 
 export default {
   name: "WarehouseRecordDetailItem",
+  computed: {
+    DICT_TYPE() {
+      return DICT_TYPE
+    }
+  },
   components: {ProductSelector},
   props: {
     value: {
@@ -127,6 +134,37 @@ export default {
   data() {
     return {
       brandList: [],
+      prodAttrIds: [],
+      usageIds: [],
+
+      boxGauge1: '',
+      boxGauge2: '',
+      boxGauge3: '',
+    }
+  },
+  mounted() {
+    // 品牌回显
+    if (this.value.brand) {
+      getProductBrank(this.value.brand).then(r => {
+        this.brandList = [r.data]
+      })
+    }
+
+    if (typeof this.value.prodAttrIds === 'string') {
+      this.prodAttrIds = this.value.prodAttrIds.split(',').map(e => +e) || []
+    }
+
+    if (this.value.usageIds) {
+      this.usageIds = this.value.usageIds.split(',') || []
+    }
+
+    if (this.value.boxGauge) {
+      const boxGauge = this.value.boxGauge.split('*')
+      if (boxGauge?.length === 3) {
+        this.boxGauge1 = boxGauge[0]
+        this.boxGauge2 = boxGauge[1]
+        this.boxGauge3 = boxGauge[2]
+      }
     }
   },
   methods: {
@@ -136,23 +174,33 @@ export default {
         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
       })
     },
+    handleDelete() {
+      this.$emit('handle-delete')
+    }
+  },
+  watch: {
+    prodAttrIds(val) {
+      this.value.prodAttrIds = val.join(',')
+    },
+    usageIds(val) {
+      this.$nextTick(() => {
+        this.value.usageIds = val.join(',')
+      })
+    },
+    boxGauge1() {
+      this.value.boxGauge = this.boxGauge1 + '*' + this.boxGauge2 + '*' + this.boxGauge3
+    },
+    boxGauge2() {
+      this.value.boxGauge = this.boxGauge1 + '*' + this.boxGauge2 + '*' + this.boxGauge3
+    },
+    boxGauge3() {
+      this.value.boxGauge = this.boxGauge1 + '*' + this.boxGauge2 + '*' + this.boxGauge3
+    }
   }
 }
 </script>