暂存

src/HDrpManagement/predictionRule/modules/edit.vue

@@ -46,20 +46,37 @@
               <el-form-item label="预测人员:" prop="enterprisename">
               </el-form-item>
             </el-col>
+
+              <el-col :span="21" :offset="3">
+                <label style="font-size: 14px;margin-left: -12px">部门：</label>
+              </el-col>
+              <el-col :span="21" :offset="3">
+                <el-tag closable v-for="item in depData" :key="item.index" style="margin-right: 10px" @close="handleClose(item)">{{item.label}}</el-tag>
+                <el-popover
+                    placement="bottom"
+                    trigger="manual"
+                    v-model="depShow">
+                  <el-cascader-panel  ref="selectdep"  :options="deplist" :props="{checkStrictly:false,multiple:true,expandTrigger:'hover',label:'label',value:'departmentid',children:'children'}" clearable></el-cascader-panel>
+                  <el-button size="small" type="primary" style="margin-top: 10px;float: right" @click="selectDep">确定</el-button>
+                  <el-button size="small"  style="margin-top: 10px;margin-right:10px;float: right" @click="depShow = false">取消</el-button>
+                  <el-button slot="reference" size="small" style="margin: 10px 0px 10px 0px" @click="depShow = !depShow">添加</el-button>
+                </el-popover>
+              </el-col>
+              <el-col :span="21" :offset="3">
+                <label style="font-size: 14px;margin-left: -12px">组织内指定人员：</label>
+              </el-col>
+              <el-col :span="21" :offset="3">
+                <el-button size="small" style="margin: 10px 0px 10px 0px">添加</el-button>
+              </el-col>
+              <el-col :span="21" :offset="3">
+                <label style="font-size: 14px;margin-left: -12px">角色：</label>
+              </el-col>
+              <el-col :span="21" :offset="3">
+                <el-button size="small" style="margin: 10px 0px 10px 0px">添加</el-button>
+              </el-col>
+
             <el-col :span="24">
-              <el-form-item label="部门:" prop="enterprisename">
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="组织内指定人员:" prop="enterprisename">
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="角色:" prop="enterprisename">
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="状态:" prop="enterprisename">
+              <el-form-item label="状态:" prop="enterprisename" style="margin: 10px 0px 0px 0px">
                 <el-radio v-model="form.status" label="开启">开启</el-radio>
                 <el-radio v-model="form.status" label="关闭">关闭</el-radio>
               </el-form-item>
@@ -77,6 +94,10 @@ export default {
   data() {
     return {
       dialogVisible:false,
+      departmentids:['102','106'],
+      deplist:[],
+      depData:[],
+      depShow:false,
       start:'',
       end:'',
       form:{
@@ -147,7 +168,31 @@ export default {
           }
         }
       })
-      console.log(res.data,'部门')
+      this.depData = []
+      this.depData = res.data.map(item=>{
+        return {
+          label:item.depname,
+          value:item.departmentid,
+        }
+      })
+      console.log(this.depData,'部门信息')
+      console.log(this.$refs.selectdep.getFlattedNodes(),'部门所有可选数据')
+      this.departmentids = this.depData.map(item=>{
+        return {
+          value:item.departmentid,
+        }
+      })
+      for (var i=0;i<this.$refs.selectdep.getFlattedNodes().length;i++){
+        for (var k=0;k<this.departmentids.length;k++){
+          if (this.$refs.selectdep.getFlattedNodes()[i].value === this.departmentids[k].value){
+            this.$refs.selectdep.getFlattedNodes()[i].checked = true
+          }
+        }
+      }
+      /*this.departmentids = this.$refs.selectdep.getFlattedNodes()
+
+      this.departmentids[0].checked = true*/
+      console.log(this.departmentids,'departmentids')
     },
     /*获取已选组织内人员*/
     async queryPerson(){
@@ -185,6 +230,60 @@ export default {
       })
       console.log(res.data,'所有部门')
       this.personList(res.data[0].departmentid)
+      this.deplist = this.createMenu(res.data)
+    },
+    createMenu (array) {
+      var that = this
+      let arr = []
+      function convertToElementTree(node) {
+        // 新节点
+        if (node.subdep.length === 0){
+          var elNode = {
+            label: node["depname"],
+            parentid:node['parentid'],
+            parentname:node['parentname'],
+            departmentid:node["departmentid"],
+            value:node["departmentid"],
+            remarks:node["remarks"],
+            isused:node["isused"],
+            changedate:node['changedate'],
+            changeby:node['changeby'],
+            createdate:node['createdate'],
+            createby:node['createby'],
+            depno:node['depno'],
+            disabled:that.pageOnlyRead,
+          }
+        }else {
+          var elNode = {
+            label: node["depname"],
+            parentid:node['parentid'],
+            parentname:node['parentname'],
+            departmentid:node["departmentid"],
+            value:node["departmentid"],
+            remarks:node["remarks"],
+            isused:node["isused"],
+            changedate:node['changedate'],
+            changeby:node['changeby'],
+            createdate:node['createdate'],
+            createby:node['createby'],
+            depno:node['depno'],
+            disabled:that.pageOnlyRead,
+            children: []
+          }
+        }
+        if (node.subdep && node.subdep.length > 0) {
+          // 如果存在子节点
+          for (var index = 0; index < node.subdep.length; index++) {
+            // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
+            elNode.children.push(convertToElementTree(node.subdep[index]));
+          }
+        }
+        return elNode;
+      }
+      array.forEach((element) => {
+        arr.push(convertToElementTree(element))
+      });
+      return arr
     },
     /*获取所有人员*/
     async personList(id){
@@ -215,13 +314,50 @@ export default {
       })
       console.log(res.data,'角色')
     },
+    /*选择部门*/
+    selectDep(){
+      this.depData = []
+      console.log(this.$refs.selectdep.getCheckedNodes())
+      console.log(this.$refs.selectdep.getNodeByValue())
+      console.log(this.$refs.selectdep.getFlattedNodes())
+      this.depData = this.$refs.selectdep.getCheckedNodes().map(item=>{
+        return {
+          label:item.label,
+          value:item.value,
+          parent:item.parent?item.parent.value:''
+        }
+      })
+      this.depData.forEach(item=>{
+        if (item.parent){
+          for (var i = 0;i<this.depData.length;i++){
+            if (item.value === this.depData[i].parent){
+              this.depData.splice(i,1)
+            }
+          }
+        }else {
+          this.depData = []
+          this.depData[0] = item
+        }
+      })
+      this.depShow = false
+    },
+    handleClose(val){
+      console.log(val,'要移除的标签')
+      for (var i = 0;i<this.depData.length;i++){
+        if (this.depData[i].value === val.value){
+          console.log('1111')
+          this.depData.splice(i,1)
+        }
+      }
+      console.log(this.depData)
+    },
     onEdit(){
       this.dialogVisible = true
       this.departmentList()
       this.roleList()
-    /*  this.queryDepartment()
+      this.queryDepartment()
       this.queryPerson()
-      this.queryRole()*/
+      this.queryRole()
     }
   },
   mounted() {