产品结构管理

components/page/productSelect1.vue

+<template>
+  <Select v-model="dep" :placeholder="placeholdeinfo" clearable @on-clear="onClear">
+    <Option
+      v-for="(item,index) in list"
+      :key="index"
+      :value="item.value"
+      style="display:none"
+      :label="item.label"
+    ></Option>
+    <Tree key="mytree" :data="data1" ref="mytree" :render="renderContent"></Tree>
+  </Select>
+</template>
+   <script>
+import Api from "../../pages/technology/productMix/productTree/api";
+export default {
+  name: "Add",
+  model: {
+    prop: "value",
+    event: "on-change"
+  },
+  data() {
+    return {
+      dep: "",
+      list: [],
+      data1: [],
+      selectdata: [],
+      placeholdeinfo: "请选择",
+      orderSearchForm: {
+        productId: null, //层级id
+        productName: "" //层级名称
+      }
+    };
+  },
+  props: {
+    value: [String, Number, Array],
+    placeholder: {
+      type: String,
+      default: "请选择部门"
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted() {},
+  created() {
+    this.dep = this.value | "";
+    this.loadTree();
+  },
+  methods: {
+    renderContent(h, { root, node, data }) {
+      //渲染树的样式
+      return h(
+        "span",
+        {
+          //   style: {
+          //     color: data.isProduct != "1" ? "#249E91" : "#333", //根据选中状态设置样式
+          //     cursor: "pointer"
+          //   },
+          on: {
+            click: () => {
+              let arrTree = [];
+              arrTree.push(data);
+              this.handleSelect(arrTree); //手动选择树节点
+            }
+          }
+        },
+        data.name
+      );
+    },
+    handleSelect(data) {
+      console.log(data);
+      if (data.length > 0) {
+        this.list = [];
+        this.list.push({
+          label: data[0].name,
+          value: data[0].id
+        });
+        this.orderSearchForm.productName = data[0].name;
+        this.orderSearchForm.productId = data[0].id;
+        let listData = this.$u.clone(this.data1);
+        let result = [];
+        var nodeId = data.id;
+
+        // //传入参数：需要遍历的json，需要匹配的id
+        function findPnodeId(listData, nodeId) {
+          //设置结果
+
+          if (!listData) {
+            return; //如果data传空，直接返回
+          }
+          for (var i = 0; i < listData.children.length; i++) {
+            let item = listData.children[i];
+            if (item.id == nodeId) {
+              result.unshift(data.name);
+              //找到id相等的则返回父id
+              return result;
+            } else if (!!item.children) {
+              findPnodeId(item.children, nodeId);
+            }
+          }
+          //如果执行循环中都没有return，则在此return
+          return result;
+        }
+        console.log(result);
+
+        this.$emit("on-change", this.orderSearchForm);
+      }
+    },
+
+    loadTree() {
+      //打开新增订单窗口加载产品
+
+      var sumData = [];
+      Api.getleveltree().then(r => {
+        if (r.result) {
+          this.data1 = r.result;
+        } else {
+          this.$Message.error("加载产品树失败!");
+        }
+      });
+    },
+
+    onClear() {
+      this.list = [];
+      this.placeholdeinfo = "请选择";
+      this.$emit("on-change", this.orderSearchForm);
+    }
+  },
+  watch: {
+    value: {
+      handler(v, o) {
+        this.dep = v | "";
+        Api.getleveltree().then(res => {
+          if (res.result) {
+            let temData = this.$u.clone(this.data1);
+            this.list = [];
+            if (v != "" && v != null) {
+              let dataTemp = this.$u.treeToList(temData);
+              dataTemp.forEach(data => {
+                if (data.id == this.dep) {
+                  this.list.push({ label: data.name, value: data.id });
+                }
+              });
+            }
+          } else {
+            this.$Message.error("加载产品树失败!");
+          }
+        });
+      },
+      deep: true
+    }
+  }
+};
+</script>

pages/technology/productMix/index.vue

@@ -5,11 +5,11 @@
         <!-- <h4>产品列表</h4> -->
         <div class="p-list">
           <!-- <Input search enter-button placeholder="请输入产品名称" /> -->
-          <ProductTree @on-hide="onHide" @on-select="productSearch"/>
+          <ProductTree @on-hide="onHide" @on-select="productSearch" />
         </div>
       </Sider>
       <Content>
-        <Product :parent="parent"/>
+        <Product :parent="parent" />
       </Content>
     </Layout>
   </div>
@@ -26,15 +26,16 @@ export default {
     return {
       parent: {
         id: null,
-        parentName: ""
+        parentName: "",
+        ids: ""
       }
     };
   },
   methods: {
     productSearch(id, item, ids) {
-      
       this.parent.parentName = item.title;
       this.parent.id = id;
+      this.parent.ids = ids;
       // let where = { productId: { op: "In", value: ids } };
       // this.$refs.grid.reload(where);
     },

pages/technology/productMix/product/add.vue

@@ -10,7 +10,8 @@
         <Row>
           <Col :span="12">
             <FormItem label="上级所属" prop="parentName">
-              <Input v-model="entity.parentName" disabled></Input>
+              <!-- <Input v-model="entity.parentName" disabled></Input> -->
+              <productSelect1 v-model="entity.levelId" @on-change="proChange"/>
             </FormItem>
           </Col>
           <Col :span="12">
@@ -155,6 +156,10 @@ export default {
         this.entity = r.result;
         this.entity.id = 0;
       });
+    },
+     proChange(items) {
+      this.entity.levelId = items.productId;
+     
     },
     l(key) {
       key = "product_info" + "." + key;

pages/technology/productMix/product/index.vue

@@ -55,7 +55,6 @@
         </div>
       </template>
     </DataGrid>
-
     <Modal v-model="modal" :title="title" width="1200" footer-hide>
       <component :is="detail" :eid="curId" @on-close="cancel" @on-ok="ok" :parents="parents" />
     </Modal>
@@ -77,7 +76,8 @@ export default {
   props: {
     parent: {
       id: Number,
-      parentName: String
+      parentName: String,
+      ids: String
     }
   },
   data() {
@@ -106,6 +106,7 @@ export default {
     };
   },
   mounted() {
+    this.$refs.grid.reload();
     console.log(this);
   },
   async fetch({ store, params }) {
@@ -125,10 +126,8 @@ export default {
       this.title = "新增";
       this.detail = () => import("./add");
       this.modal = true;
-
       this.parents.parentId = this.parent.id;
       this.parents.parentName = this.parent.parentName;
-      alert(this.parents.parentId);
     },
     copy(id) {
       this.curId = id;
@@ -178,6 +177,14 @@ export default {
       let vkey = "product_info" + "." + key;
       return this.$t(vkey) || key;
     }
+  },
+  watch: {
+    "parent.id"(v) {
+      if (v) {
+        let data = { levelId: { op: "In", value: this.parent.ids } };
+        this.$refs.grid.reload(data);
+      }
+    }
   }
 };
 </script>

pages/technology/productMix/productTree/index.vue

@@ -61,6 +61,8 @@ export default {
       this.expand = !this.expand;
     },
     change(v, b) {
+      console.log(v)
+        console.log(b)
       let ids = [];
       ids.push(b.value);
       if (b.children) {

plugins/iview.js

@@ -43,6 +43,7 @@ import User from '@/components/page/user.vue'
 import op from '@/components/page/opration.vue'
 import ProductNumberSelect from '@/components/page/productNumberSelect.vue'
 import ProductSelect from '@/components/page/productSelect.vue'
+import ProductSelect1 from '@/components/page/productSelect1.vue'
 import DTSpan from '@/components/page/dtSpan.vue'
 import DTSearch from '@/components/page/dtSearch.vue'
 import InputTime from '@/components/page/inputTime.vue'
@@ -96,6 +97,7 @@ Vue.component("op", op) //DepartmentSelect
 Vue.component("DepartmentSelect", DepartmentSelect)
 Vue.component("ProductNumberSelect", ProductNumberSelect)
 Vue.component("ProductSelect", ProductSelect)
+Vue.component("ProductSelect1", ProductSelect1)
 Vue.component("DTSpan", DTSpan)
 Vue.component("DTSearch", DTSearch)
 Vue.component("InputTime", InputTime)