bom详情

pages/technology/productMix/product/bom.vue

 <template>
   <div class="bom">
-    <div class="new-detail">
-      <Row>
-        <Filed :span="8" :name="l('levelId')+'：'">{{entity.levelTitle}}</Filed>
-        <Filed :span="8" :name="l('mmcode')+'：'">{{entity.mmcode}}</Filed>
-        <Filed :span="8" :name="l('drawingNo')+'：'">{{entity.drawingNo}}</Filed>
-        <Filed :span="8" :name="l('name')+'：'">{{entity.name}}</Filed>
-        <Filed :span="8" :name="l('version')+'：'">
+    <Row class="row-filed">
+      <Filed :span="4" :name="l('levelId')+'：'">{{entity.levelTitle}}</Filed>
+      <Filed :span="4" :name="l('mmcode')+'：'">{{entity.mmcode}}</Filed>
+      <Filed :span="4" :name="l('drawingNo')+'：'">{{entity.drawingNo}}</Filed>
+      <Filed :span="4" :name="l('name')+'：'">{{entity.name}}</Filed>
+      <Filed :span="4" :name="l('version')+'：'">
         <State code="material.main.version" :value="parseInt(entity.version)" />
       </Filed>
-        <!-- <Filed :span="8" :name="l('madeCompany')+'：'">{{entity.madeCompanyTitle}}</Filed> -->
-        <Filed :span="8" :name="l('productUrl')+'：'">
+      <Filed :span="4" :name="l('madeCompany')+'：'">{{entity.madeCompanyTitle}}</Filed>
+      <!-- <Filed :span="8" :name="l('productUrl')+'：'">
           <a href="#" @click="seeImg(entity.productUrl)">查看图片</a>
-        </Filed>
-        <Filed :span="22" :name="l('productUrlList')+'：'">
+      </Filed>-->
+      <Divider>产品图片列表</Divider>
       <files
         ref="refFile"
         :parms="parms"
@@ -22,13 +21,13 @@
         :showList="false"
         @clickItem="clickData"
       />
-        </Filed>
-        <Filed :span="2">
-          <Button type="primary" @click="addBom" class="mb10">新增Bom</Button>
-        </Filed>
     </Row>
-    </div>
+
+    <div class="table-r">
+      <Button type="primary" @click="addBom" class="mb10">新增Bom</Button>
       <TreeGrid :columns="columns" :items="treeData"></TreeGrid>
+    </div>
+
     <Modal
       v-model="modal"
       :title="title"
@@ -145,7 +144,7 @@ export default {
                   attrs: { oprate: "add" },
                   on: { click: () => this.add(params.row) }
                 },
-                "新增"
+                params.row.type == 1 ? "" : "新增"
               ),
               h(
                 "op",
@@ -227,6 +226,7 @@ export default {
       this.modal = true;
     },
     edit(row) {
+      console.log(row);
       this.curId = row.bomId;
       this.parents.id = row.levelId;
       this.parents.parentName = row.levelTitle;
@@ -237,13 +237,13 @@ export default {
     },
     bom(row) {
       console.log(row);
-      this.curId = row.bomId;
-      this.eid = row.id;
+      this.curId = row.id;
       this.parents.bomId = row.bomId;
       this.parents.id = row.levelId;
       this.parents.rootProductId = row.rootProductId;
+      this.parents.upId = row.parent.upId;
       this.title = "bom";
-      this.detail = () => import("./bom");
+      this.detail = () => import("./bomDetail");
       this.modal = true;
     },
     remove(row) {
@@ -300,11 +300,38 @@ export default {
 </script>
 <style lang="less">
 .bom {
-  .btn {
-    text-align: right;
+  .row-filed {
+    box-shadow: 0 0 6px 2px #ccc;
+    padding: 15px;
+    .label {
+      font-weight: bold;
+      height: 30px;
     }
-  .new-detail {
+    .value {
       margin-bottom: 10px;
     }
+    .upload-body {
+      border: none;
+      height: 66px;
+      overflow: auto;
+      .demo-upload-list {
+        margin-top: 0;
+      }
+    }
+    .ivu-divider-inner-text {
+      font-weight: bold;
+      font-size: 14px;
+    }
+  }
+  .table-r {
+    margin-top: 20px;
+    box-shadow: 0 0 6px 2px #ccc;
+    padding: 15px;
+    height: 68vh;
+    .mb10 {
+      float: right;
+      margin-bottom: 10px;
+    }
+  }
 }
 </style>

pages/technology/productMix/product/bomDetail.vue

+<template>
+  <div class="bom">
+    <Row class="row-filed">
+      <Filed :span="4" :name="l('levelId')+'：'">{{entity.levelTitle}}</Filed>
+      <Filed :span="4" :name="l('mmcode')+'：'">{{entity.mmcode}}</Filed>
+      <Filed :span="4" :name="l('drawingNo')+'：'">{{entity.drawingNo}}</Filed>
+      <Filed :span="4" :name="l('name')+'：'">{{entity.name}}</Filed>
+      <Filed :span="4" :name="l('version')+'：'">
+        <State code="material.main.version" :value="parseInt(entity.version)" />
+      </Filed>
+      <Filed :span="4" :name="l('madeCompany')+'：'">{{entity.madeCompanyTitle}}</Filed>
+      <!-- <Filed :span="8" :name="l('productUrl')+'：'">
+          <a href="#" @click="seeImg(entity.productUrl)">查看图片</a>
+      </Filed>-->
+      <Divider>产品图片列表</Divider>
+      <files
+        ref="refFile"
+        :parms="parms"
+        fileFormat
+        :Photos="true"
+        :showList="false"
+        @clickItem="clickData"
+      />
+    </Row>
+
+    <div class="table-r">
+      <Button type="primary" @click="addBom" class="mb10">新增Bom</Button>
+      <TreeGrid :columns="columns" :items="treeData"></TreeGrid>
+    </div>
+
+    <Modal
+      v-model="modal"
+      :title="title"
+      width="1200"
+      footer-hide
+      :mask-closable="false"
+      :fullscreen="fullscreen"
+    >
+      <!-- <component :is="detail" :eid="curId" @on-close="cancel" @on-ok="ok" :parents="parents" /> -->
+    </Modal>
+  </div>
+</template>
+<script>
+import Api from "./api";
+// import service from "@/plugins/request";
+export default {
+  data() {
+    return {
+      downUrl: fileUrlDown,
+      modal: false,
+      title: "新增",
+      detail: null,
+      curId: 0,
+      fullscreen: false,
+      entity: {
+        id: "",
+        levelId: 0,
+        levelTitle: "",
+        bomId: 0,
+        version: ""
+      },
+      parms: {
+        app: "technology",
+        eid: "",
+        name: "",
+        field: ""
+      },
+      treeData: [],
+      columns: [
+        {
+          key: "name",
+          align: "left",
+          high: true
+        },
+        {
+          key: "type",
+          title: this.l("type"),
+          align: "left",
+          high: true,
+          align: "center",
+          width: 60
+        },
+        {
+          key: "mmcode",
+          title: this.l("mmcode"),
+          high: true
+        },
+        {
+          key: "drawingNo",
+          title: this.l("drawingNo"),
+          high: true
+        },
+        {
+          key: "count",
+          title: this.l("count"),
+          high: true
+        },
+        {
+          key: "postion",
+          title: this.l("postion"),
+          high: true
+        },
+        {
+          key: "creationTime",
+          title: this.l("creationTime"),
+          align: "left",
+          easy: true,
+          high: true
+        }
+      ]
+    };
+  },
+  async fetch({ store, params }) {
+    await store.dispatch("loadDictionary"); // 加载数据字典
+  },
+  props: {
+    eid: Number,
+    parents: {
+      id: Number,
+      parentName: String,
+      ids: String,
+      bomId: Number
+    }
+  },
+  mounted() {
+    if (this.eid > 0) {
+      this.load(this.eid);
+    }
+    this.init();
+  },
+  methods: {
+    init() {
+      Api.alltree({ id: this.parents.bomId, levelId: this.parents.id }).then(
+        r => {
+          this.treeData = r.result;
+        }
+      );
+    },
+
+    load(v) {
+      Api.getbom({ id: this.parents.bomId }).then(r => {
+        this.entity = r.result;
+        this.entity.version = parseInt(r.result.version);
+        this.parms.eid = r.result.productUrlList;
+        this.$emit("on-load");
+      });
+    },
+    seeImg(url) {
+      let url1 = this.downUrl + url;
+      if (url) {
+        window.open(url1, "_blank");
+      } else {
+        this.$Message.error("暂无图片");
+      }
+    },
+    clickData(data) {
+      window.open(data, "_blank");
+    },
+    ok() {
+      this.init();
+      // this.load(this.eid);
+      this.modal = false;
+      this.curId = 0;
+    },
+    cancel() {
+      this.curId = 0;
+      this.modal = false;
+    },
+    l(key) {
+      key = "product_info" + "." + key;
+      return this.$t(key);
+    }
+  },
+  watch: {
+    // eid(v) {
+    //   if (v != 0) {
+    //     this.load(v);
+    //     this.init();
+    //   }
+    // }
+  }
+};
+</script>
+<style lang="less">
+.bom {
+  .row-filed {
+    box-shadow: 0 0 6px 2px #ccc;
+    padding: 15px;
+    .label {
+      font-weight: bold;
+      height: 30px;
+    }
+    .value {
+      margin-bottom: 10px;
+    }
+    .upload-body {
+      border: none;
+      height: 66px;
+      overflow: auto;
+      .demo-upload-list {
+        margin-top: 0;
+      }
+    }
+    .ivu-divider-inner-text {
+      font-weight: bold;
+      font-size: 14px;
+    }
+  }
+  .table-r {
+    margin-top: 20px;
+    box-shadow: 0 0 6px 2px #ccc;
+    padding: 15px;
+    height: 55vh;
+    .mb10 {
+      float: right;
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>