任务

components/page/projectTaskTree.vue

 <template>
-<div class="flex fd tree-menu">
+  <div class="flex fd tree-menu">
+    <!-- 任务结构 -->
+    <div class="p-list">
       <h3>
-        任务结构
-        <div class="fr mr10 mt10">
+        <Dropdown @on-click="clickItem">
+          <a href="javascript:void(0)">
+            {{ downName }}
+            <Icon type="ios-arrow-down"></Icon>
+          </a>
+          <DropdownMenu slot="list">
+            <DropdownItem
+              v-for="item in projectList"
+              :key="item.id"
+              :name="item.id"
+              >{{ item.title }}</DropdownItem
+            >
+          </DropdownMenu>
+        </Dropdown>
+      </h3>
+      <div class="mr10 mt10 icon-d">
         <ButtonGroup class="fr" size="small">
-                <Button :icon="expand ? 'md-arrow-dropright' : 'md-arrow-dropdown'" @click="toggle" title="展开/合并"></Button>
+          <Button
+            :icon="expand ? 'md-arrow-dropright' : 'md-arrow-dropdown'"
+            @click="toggle"
+            title="展开/合并"
+          ></Button>
           <Button icon="md-refresh" title="刷新" @click="loadTree"></Button>
           <Button icon="md-rewind" title="收起" @click="hide"></Button>
         </ButtonGroup>
       </div>
-    </h3>
+    </div>
     <div class="search">
       <Input search placeholder="请输入关键字" v-model="keys" clearable />
     </div>
     <div class="fg">
       <div class="tree">
-            <Tree :data="data" :render="renderContent" ref="tree" @on-select-change="change"></Tree>
+        <Tree
+          :data="data"
+          :render="renderContent"
+          ref="tree"
+          @on-select-change="change"
+        ></Tree>
+      </div>
     </div>
   </div>
-</div>
 </template>
 
 <script>
@@ -28,32 +53,62 @@ export default {
     return {
       keys: "",
       expand: true,
-            list: []
+      list: [],
+      downName: "",
+      projectList: [],
     };
   },
   props: {
     curId: {
       type: String,
-            default: '',
+      default: "",
     },
   },
   created() {
-        this.loadTree();
+    this.listSlecet();
+    // this.loadTree();
   },
   methods: {
-        loadTree() {
+    clickItem(val) {
+      console.log(val);
+
+      this.projectList.forEach((e) => {
+        if (val == e.id) {
+          this.downName = e.title;
+        }
+      });
+      this.loadTree(val);
+    },
+    listSlecet() {
+      let data = {
+        conditions: [],
+        sortBy: "id",
+        isDesc: false,
+      };
+      this.$api.post(`${material}/projectmain/list`, data).then((r) => {
+        if (r.result) {
+          this.projectList = r.result;
+          this.downName = this.projectList[0].title;
+          //   this.curId = this.projectList[0].id;
+          this.loadTree(this.projectList[0].id);
+        }
+      });
+    },
+    loadTree(v) {
       let params = {
-                conditions: [{
+        conditions: [
+          {
             fieldName: "projectId",
-                    fieldValue: this.curId,
-                    conditionalType: "Equal"
-                }]
-            }
-            this.$api.post(`${material}/projectplan/list`, params).then(r => {
+            fieldValue: v,
+            conditionalType: "Equal",
+          },
+        ],
+      };
+      this.$api.post(`${material}/projectplan/list`, params).then((r) => {
         var data = this.$u.toTree(
           r.result,
           null,
-                    u => {
+          (u) => {
             u.value = u.id;
             u.expand = true;
             u.selected = false;
@@ -67,37 +122,29 @@ export default {
     toggle() {
       this.expand = !this.expand;
     },
-        renderContent(h, {
-            root,
-            node,
-            data
-        }) {
-            // let type = "md-folder";
-            // if (data.isProduct != 0) {
-            //     type = "ios-image";
-            // }
+    renderContent(h, { root, node, data }) {
+      var items = this.$store.getters.dictionaryByKey(
+        "mes.project_plan.Status"
+      );
+      var item = items.filter((u) => {
+        return u.code == data.status;
+      })[0];
+      console.warn("jjjjjj", items, item);
+      var color = item.color || "black";
       return h("div", [
         h("state", {
           props: {
             code: "mes.project_plan.Type",
             type: "icon",
-                        value: data.type + ""
-                    }
-                }),
-                h(
-                    "span", {
-                        style: {
-                            // color: data.isProduct == 0 ? "#000" : "rgba(38, 128, 235, 1)"
-                        }
+            value: data.type + "",
+            size: 16,
           },
-                    data.title
-                ),
-                h("state", {
+        }),
+        h("Badge", {
           props: {
-                        code: "mes.project_plan.Status",
-                        type: "tag",
-                        value: data.status
-                    }
+            color: color,
+            text: data.title,
+          },
         }),
       ]);
     },
@@ -108,14 +155,14 @@ export default {
       // if (b.bomId !== 0) {
       //     ids.push(b.bomId);
       // }
-            var curentId = ''
-            curentId = b.id
+      var curentId = "";
+      curentId = b.id;
       productIds.push(b.value);
       if (b.children) {
         addId(b.children);
 
         function addId(data) {
-                    data.map(u => {
+          data.map((u) => {
             // if (u.bomId !== 0) {
             //     ids.push(u.bomId);
             // }
@@ -130,7 +177,7 @@ export default {
     },
     hide() {
       this.$emit("on-hide");
-        }
+    },
   },
   computed: {
     data() {
@@ -140,7 +187,7 @@ export default {
       search(this.keys, items);
 
       function search(keys, data) {
-                data.map(u => {
+        data.map((u) => {
           if (keys.length < 2) {
             u.expand = expand;
             result.push(u);
@@ -155,12 +202,12 @@ export default {
         });
       }
       return result;
-        }
+    },
   },
   watch: {
     curId(v) {
       if (v) {
-                this.loadTree();
+        this.loadTree(v);
       }
     },
   },
@@ -168,36 +215,43 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../assets/css/custom.less";
-
-.tree-menu {
-    h3 {
-        height: 50px;
-        font-size: 14px;
-        font-family: Microsoft YaHei;
-        font-weight: bold;
-        line-height: 50px;
-        color: @left-tree-header-color;
-        background: @left-tree-header-bg-color;
-        opacity: 1;
-        padding-left: 10px;
-    }
+// @import "../../assets/css/custom.less";
 
-    .search {
-        height: 50px;
-        padding: 5px 10px;
-    }
+// .tree-menu {
+//   h3 {
+//     height: 50px;
+//     font-size: 14px;
+//     font-family: Microsoft YaHei;
+//     font-weight: bold;
+//     line-height: 50px;
+//     color: @left-tree-header-color;
+//     background: @left-tree-header-bg-color;
+//     opacity: 1;
+//     padding-left: 10px;
+//   }
+.p-list {
+  position: relative;
+}
+.icon-d {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+//   .search {
+//     height: 50px;
+//     padding: 5px 10px;
+//   }
 
-    .fg {
-        flex: none;
-        // height:0;
-        overflow: auto;
-        padding-left: 10px;
-    }
+//   .fg {
+//     flex: none;
+//     // height:0;
+//     overflow: auto;
+//     padding-left: 10px;
+//   }
 
-    .tree {
-        height: calc(100vh - 215px);
-        overflow: auto;
-    }
-}
+//   .tree {
+//     height: calc(100vh - 215px);
+//     overflow: auto;
+//   }
+// }
 </style>

components/page/state.vue

 <template>
   <div class="ib" @click="showLife">
     <div class="ib" v-if="!isMore">
-      <span v-if="type=='text'" :style="style">{{name}}</span>
-      <Tag v-if="type=='tag'" :color="tagcolor">{{name}}</Tag>
-      <Badge v-if="type=='dot'" :color="tagcolor" :text="name" />
-      <Icon v-if="type=='icon'" :type="item.icon" :color="tagcolor" :title="name" size="24" />
+      <span v-if="type == 'text'" :style="style">{{ name }}</span>
+      <Tag v-if="type == 'tag'" :color="tagcolor">{{ name }}</Tag>
+      <Badge v-if="type == 'dot'" :color="tagcolor" :text="name" />
+      <Icon
+        v-if="type == 'icon'"
+        :type="item.icon"
+        :color="tagcolor"
+        :title="name"
+        :size="size"
+      />
     </div>
-    <div class="ib" v-else v-for="(li,i) in items" :key="i">
-      <span v-if="type=='text'" :style="li.style">{{li.name}}</span>
-      <Tag v-if="type=='tag'" :color="li.tagcolor">{{li.name}}</Tag>
-      <Badge v-if="type=='dot'" :color="li.tagcolor" :text="li.name" />&nbsp;
+    <div class="ib" v-else v-for="(li, i) in items" :key="i">
+      <span v-if="type == 'text'" :style="li.style">{{ li.name }}</span>
+      <Tag v-if="type == 'tag'" :color="li.tagcolor">{{ li.name }}</Tag>
+      <Badge v-if="type == 'dot'" :color="li.tagcolor" :text="li.name" />&nbsp;
     </div>
-    <Modal v-model="modal" title="生命周期" width="800" footer-hide :mask-closable="false">
+    <Modal
+      v-model="modal"
+      title="生命周期"
+      width="800"
+      footer-hide
+      :mask-closable="false"
+    >
       <component :is="detail" :code="code" :value="value" :mode="mode" />
     </Modal>
   </div>
@@ -21,48 +33,52 @@ export default {
   name: "state",
   data() {
     return {
-      mode:'0',
+      mode: "0",
       name: "",
       isMore: false,
-      modal:false,
+      modal: false,
       item: {},
       items: [],
       data: [],
-      detail:null,
+      detail: null,
     };
   },
   props: {
     default: {
       type: String,
-      default: ""
+      default: "",
     },
     type: {
       type: String,
       default: "text",
-      validator: function(value) {
+      validator: function (value) {
         return ["text", "tag", "dot", "icon"].indexOf(value) != -1;
-      }
+      },
     },
     code: {
       type: String,
-      required: true
+      required: true,
     },
     value: {
       type: [String, Number],
-      required: false
+      required: false,
     },
     color: {
       type: Boolean,
-      default: true
+      default: true,
+    },
+    size: {
+      type: Number,
+      default: 24,
     },
     icon: {
       type: Boolean,
-      default: false
+      default: false,
     },
     img: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   created() {
     this.data = this.$store.getters.dictionaryByKey(this.code) || [];
@@ -71,7 +87,7 @@ export default {
     setName(v) {
       if ((v + "").indexOf(",") == -1) {
         var item;
-        this.data.map(u => {
+        this.data.map((u) => {
           if (u.code == v) {
             item = u;
           }
@@ -81,7 +97,7 @@ export default {
           this.item = item;
         } else {
           if (this.value == "undefined") {
-            this.name = ' '
+            this.name = " ";
           } else {
             this.name = this.value;
           }
@@ -90,7 +106,7 @@ export default {
         this.isMore = true;
         var items = [];
         var ul = (v + "").split(",");
-        this.data.map(u => {
+        this.data.map((u) => {
           if (ul.indexOf(u.code) > -1) {
             u.tagcolor = u.color | "default";
             u.style = { color: u.color | "inherit" };
@@ -99,11 +115,11 @@ export default {
         });
         this.items = items;
       }
-    }
-    ,showLife(){
-      this.modal= true ;
-      this.detail=()=>import("./life");
-    }
+    },
+    showLife() {
+      this.modal = true;
+      this.detail = () => import("./life");
+    },
   },
   computed: {
     tagcolor() {
@@ -125,9 +141,9 @@ export default {
         color:
           this.item && this.item.color != "" && this.item.color != null
             ? this.item.color
-            : "inherit"
+            : "inherit",
       };
-    }
+    },
   },
   watch: {
     value(v) {
@@ -139,7 +155,7 @@ export default {
         this.setName(this.value);
         this.$forceUpdate();
       }
-    }
-  }
+    },
+  },
 };
 </script>
\ No newline at end of file