未符合项流程换为公共组件

src/pages/processCenter/pages/creatProcess/wfhxzg/step1.vue

@@ -192,32 +192,13 @@
       @submit="handleSubmit"
     >
     </ProcessFooter>
-    <el-drawer
-      :title="drawerTitle"
-      :visible.sync="modalshowflag"
-      :wrapperClosable="false"
-      size="800px">
-      <el-tree
-        v-if="modalshowflag"
-        style="height: 100%; overflow: auto;"
-        node-key="id"
-        class="filter-tree"
-        :data="treeData"
-        :props="defaultProps"
-        :default-checked-keys="nodeList"
-        highlight-current
-        check-strictly
-        @check="drawerCheck"
-        default-expand-all
-        :expand-on-click-node="false"
-        show-checkbox
-        ref="tree">
-      </el-tree>
-      <div id="roleFormButton" class="demo-drawer-footer">
-        <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveUserInfo">确定</el-button>
-        <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="cancleUserInfo">取消</el-button>
-      </div>
-    </el-drawer>
+    <Role-tree
+      check-box
+      :is-title="drawerTitle"
+      :is-visible.sync="modalshowflag"
+      :nodeList="nodeList"
+      @checkedRole="drawerCheck"
+    />
   </div>
 </template>
 
@@ -308,7 +289,6 @@ export default {
     ProcessTitle
   },
   mounted () {
-    this.getTree()
     this.getJsonData()
   },
   methods: {
@@ -418,13 +398,6 @@ export default {
         }
       }
     },
-    // 获取流程节点数据
-    getTree () {
-      this.$http.get('SarInstitution/institution/institutionAndUser', {}, {}, res=> {
-        this.treeData = res.data
-        console.log(res.data)
-      })
-    },
     // 流程阶段负责人选择
     choiceZRR (type, title, id) {
       this.nodeList = []
@@ -434,22 +407,8 @@ export default {
       this.modalshowflag = true
     },
     drawerCheck (data) {
-      let getlist = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());
-      if(getlist.length == 1) {
-        this.roleRow = getlist[0]
-      }else {
-        this.$refs.tree.setCheckedKeys([data.id]);
-        this.roleRow = this.$refs.tree.getCheckedNodes()[0]
-      }
-    },
-    // 流程节点负责人抽屉保存按钮
-    saveUserInfo () {
-      this.roleForm.dockUser = this.roleRow.id
-      this.roleForm.dockUserName = this.roleRow.name
-      this.modalshowflag = false
-    },
-    // 流程节点负责人抽屉取消按钮
-    cancleUserInfo () {
+      this.roleForm.dockUserName = data[0].id
+      this.roleForm.dockUserName = data[0].name
       this.modalshowflag = false
     },
     //未整改项抽屉中的查询按钮

src/pages/processCenter/pages/creatProcess/wfhxzg/step2.vue

@@ -142,32 +142,13 @@
       @submit="handleSubmit"
     >
     </ProcessFooter>
-    <el-drawer
-      :title="drawerTitle"
-      :visible.sync="modalshowflag"
-      :wrapperClosable="false"
-      size="800px">
-      <el-tree
-        v-if="modalshowflag"
-        style="height: 100%; overflow: auto;"
-        node-key="id"
-        class="filter-tree"
-        :data="treeData"
-        :props="defaultProps"
-        :default-checked-keys="nodeList"
-        highlight-current
-        check-strictly
-        @check="drawerCheck"
-        default-expand-all
-        :expand-on-click-node="false"
-        show-checkbox
-        ref="tree">
-      </el-tree>
-      <div id="roleFormButton" class="demo-drawer-footer">
-        <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveUserInfo">确定</el-button>
-        <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="cancleUserInfo">取消</el-button>
-      </div>
-    </el-drawer>
+    <Role-tree
+      check-box
+      :is-title="drawerTitle"
+      :is-visible.sync="modalshowflag"
+      :nodeList="nodeList"
+      @checkedRole="drawerCheck"
+    />
   </div>
 </template>
 
@@ -330,24 +311,8 @@ export default {
       this.drawerTitle = title
       this.modalshowflag = true
     },
-    // 获取流程节点数据
-    getTree () {
-      roleTreeData().then(res => {
-        this.treeData = res.data
-        this.dutyUserCaseData = res.data
-      })
-    },
     drawerCheck (data) {
-      var getlist = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());
-      if(getlist.length !== 0) {
-        this.roleRow = getlist
-      }else {
-        this.$refs.tree.setCheckedKeys([data.id]);
-        this.roleRow = this.$refs.tree.getCheckedNodes()
-      }
-    },
-    // 流程节点负责人抽屉保存按钮
-    saveUserInfo () {
+      this.roleRow = data
       // 选取负责人时的操作
       this.multipleSelection.forEach(item => {
         item.dutyPeopleInfo = this.roleRow[0].name
@@ -356,11 +321,7 @@ export default {
       this.lastDataList = this.dataList
       this.$refs.multipleTable.clearSelection();
       // 选取流程信息完成
-      this.roleForm.dutyUserInfoName = this.roleRow.name
-      this.modalshowflag = false
-    },
-    // 流程节点负责人抽屉取消按钮
-    cancleUserInfo () {
+      this.roleForm.dutyUserInfoName = this.roleRow[0].name
       this.modalshowflag = false
     },
     //查询按钮

src/pages/processCenter/pages/creatProcess/wfhxzg/step3.vue

@@ -137,32 +137,13 @@
       @submit="handleSubmit"
     >
     </ProcessFooter>
-    <el-drawer
-      :title="drawerTitle"
-      :visible.sync="modalshowflag"
-      :wrapperClosable="false"
-      size="800px">
-      <el-tree
-        v-if="modalshowflag"
-        style="height: 100%; overflow: auto;"
-        node-key="id"
-        class="filter-tree"
-        :data="treeData"
-        :props="defaultProps"
-        :default-checked-keys="nodeList"
-        highlight-current
-        check-strictly
-        @check="drawerCheck"
-        default-expand-all
-        :expand-on-click-node="false"
-        show-checkbox
-        ref="tree">
-      </el-tree>
-      <div id="roleFormButton" class="demo-drawer-footer">
-        <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveUserInfo">确定</el-button>
-        <el-button class="common-button-default" size="mini" icon="el-icon-close" @click="cancleUserInfo">取消</el-button>
-      </div>
-    </el-drawer>
+    <Role-tree
+      check-box
+      :is-title="drawerTitle"
+      :is-visible.sync="modalshowflag"
+      :nodeList="nodeList"
+      @checkedRole="drawerCheck"
+    />
   </div>
 </template>
 
@@ -309,34 +290,15 @@ export default {
       })
     },
 
-    // 获取流程节点数据
-    getTree () {
-      this.$http.get('SarInstitution/institution/institutionAndUser', {}, {}, res=> {
-        this.treeData = res.data
-      })
-    },
     drawerCheck (data) {
-      var getlist = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());
-      if(getlist.length == 1) {
-        this.roleRow = getlist[0]
-      }else {
-        this.$refs.tree.setCheckedKeys([data.id]);
-        this.roleRow = this.$refs.tree.getCheckedNodes()[0]
-      }
-    },
-    // 流程节点负责人抽屉保存按钮
-    saveUserInfo () {
+      this.roleForm = data[0]
       // 选择责任人时input框内值
       this.newDataList.dutyPeople = this.roleRow.name
       this.newDataList.dutyPeopleId = this.roleRow.id
       this.lastDataList = this.dataList
-      console.log(this.dataList)
-      this.modalshowflag = false
-    },
-    // 流程节点负责人抽屉取消按钮
-    cancleUserInfo () {
       this.modalshowflag = false
     },
+
     //查询按钮
     getTableByPage({ standId, productName, responsibleUnit }) {//多条件和模糊查询
       this.realList = this.dataList.filter(item => {