新增物料详情弹出页面

src/components/DialogMaterialDetail.vue

@@ -0,0 +1,135 @@
+<template>
+    <el-dialog
+      :visible.sync="visible"
+      :title="`${operatorType.name}物料详情`"
+      append-to-body
+      width="750px"
+    >
+      <el-form
+        v-if="data"
+        ref="form"
+        :model="data"
+        label-width="105px"
+      >
+        <el-collapse v-model="activeCollapseName" class="form-collapse">
+          <el-collapse-item title="物料详情" name="1" class="form-collapse-item">
+            <div class="overflow-auto" style="padding:0 10px;">
+                <el-row
+                  :gutter="$$Constant.LAYOUT_GAP"
+                >
+                  <el-col :span="12">
+                    <el-form-item label="物料商品编码">
+                      <el-input v-model="data.goodsCode" readonly/>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="物料名称">
+                      <el-input v-model="data.name" readonly />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row
+                  :gutter="$$Constant.LAYOUT_GAP"
+                >
+                  <el-col :span="12">
+                    <el-form-item label="物料编码">
+                      <el-input v-model="data.materielCode" readonly />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="大类">
+                      <el-input v-model="data.bigCategoryName" readonly />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+
+                <el-row
+                  :gutter="$$Constant.LAYOUT_GAP"
+                >
+                  <el-col :span="12">
+                    <el-form-item label="中类">
+                      <el-input v-model="data.middleCategoryName" readonly />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="小类">
+                      <el-input v-model="data.smallCategoryName" readonly />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row
+                  :gutter="$$Constant.LAYOUT_GAP"
+                >
+                  <el-col :span="12">
+                    <el-form-item label="物料描述">
+                      <el-input v-model="data.materielDescribe" readonly />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="品牌">
+                      <el-input v-model="data.brand" readonly />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row
+                  :gutter="$$Constant.LAYOUT_GAP"
+                >
+                  <el-col :span="12">
+                    <el-form-item label="生产商名称">
+                      <el-input v-model="data.manufacturer" readonly />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="规格">
+                      <el-input v-model="data.specifications" readonly />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row
+                  :gutter="$$Constant.LAYOUT_GAP"
+                >
+                  <el-col :span="12">
+                    <el-form-item label="最小包装单元">
+                      <el-input v-model="data.minimumPackingUnit" readonly />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="最小包装数量">
+                      <el-input v-model="data.minimumPackingNumber" readonly />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row
+                  :gutter="$$Constant.LAYOUT_GAP"
+                >
+                  <el-col :span="12">
+                    <el-form-item label="标签类型">
+                      <el-input v-model="data.tagTypeName" readonly />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-form>
+
+    </el-dialog>
+  </template>
+
+<script>
+import BaseCurdEditor from '@@/utils/BaseCurdEditor'
+import MaterialDetail from '@@/entries/MaterialDetail'
+
+export default {
+  name: 'DialogMaterialDetail',
+  extends: BaseCurdEditor(MaterialDetail),
+  props: {
+    // optionGroup: {
+    //   required: true,
+    //   type: Object
+    // }
+  }
+}
+</script>
+
+<style lang="scss"></style>

src/views/MaterialDetail.vue

@@ -166,7 +166,7 @@
               >
                 <template v-slot="{ row }">
                   <div class="flex center layout-gap">
-                    <edit-button :data="row" :on-click="onOpenEditorBtnClick" icon="el-icon-edit">详情</edit-button>
+                    <edit-button :data="row" :on-click="onOpenDetailEditorBtnClick" icon="el-icon-tickets">详情</edit-button>
                   </div>
                 </template>
               </el-table-column>
@@ -180,7 +180,10 @@
           />
         </div>
       </el-card>
-
+      <dialog-material-detail
+        ref="editor"
+         @saved="loadList"
+    ></dialog-material-detail>
     </div>
   </template>
 
@@ -207,6 +210,9 @@ export default {
       this.$$request(materialCategoryApi.getList, {parentId: id}).then(dataList => {
         this.middleCategories = Object.freeze(dataList)
       }).catch(console.error)
+    },
+    onOpenDetailEditorBtnClick (data) {
+      this.onOpenEditorBtnClick(data, true)
     }
   }
 }