From e3880d7d86d331fcebcbea520acfc1b09008b54a Mon Sep 17 00:00:00 2001
From: clay <209192278@qq.com>
Date: Tue, 24 Jan 2023 22:04:52 +0800
Subject: [PATCH] =?UTF-8?q?dengjie=20commit=20:=20=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/RolePickerMe.vue    | 289 ------------------
 .../src/views/workspace/InitiatedInstance.vue |  49 ++-
 2 files changed, 45 insertions(+), 293 deletions(-)
 delete mode 100644 flowable-engine-web/src/components/common/RolePickerMe.vue

diff --git a/flowable-engine-web/src/components/common/RolePickerMe.vue b/flowable-engine-web/src/components/common/RolePickerMe.vue
deleted file mode 100644
index 1affa4f..0000000
--- a/flowable-engine-web/src/components/common/RolePickerMe.vue
+++ /dev/null
@@ -1,289 +0,0 @@
-<template>
-  <w-dialog :border="false" closeFree width="600px" @ok="selectConfirm" :title="title" v-model="visible">
-    <div class="picker">
-      <div class="candidate" v-loading="loading">
-        <div class="role-header">
-          <div>系统角色</div>
-        </div>
-        <div class="org-items">
-          <el-empty :image-size="100" description="似乎没有数据" v-show="roleList.length === 0"/>
-          <!-- 系统角色-->
-          <div class="org-role-item" v-for="(roleItem , roleIndex) in roleList" :key="roleIndex"
-               @click="selectChange(roleItem)">
-            <el-checkbox v-model="roleItem.selected" v-if="showCheckbox" @change="selectChange(roleItem)"></el-checkbox>
-            <i class="el-icon-user-solid" style="margin-left: 5px"></i>
-            <span>{{ roleItem.label }}</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="selected">
-        <div class="count">
-          <span>已选 {{ selectList.length }} 项</span>
-          <span @click="clearSelected">清空</span>
-        </div>
-        <div class="org-items">
-          <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
-          <div v-for="(org, index) in selectList" :key="index" class="org-role-item">
-            <i class="el-icon-user-solid"></i>
-            <span>{{ org.label }}</span>
-            <i class="el-icon-close" @click="noSelected(org)"></i>
-          </div>
-        </div>
-      </div>
-    </div>
-  </w-dialog>
-</template>
-
-<script>
-import {getRole} from "@/api/org";
-
-export default {
-  name: "RolePicker",
-  props: {
-    selected: {
-      default: () => {
-        return [];
-      },
-      type: Array
-    }
-  },
-  data() {
-    return {
-      visible: false,
-      loading: false,
-      title: "请选择",
-      multiple: true,//是否多选
-      showCheckbox: true,//是否显示左侧选择框
-      roleList: [
-        // {
-        //   value: 1,
-        //   label: "超级管理员"
-        // },
-        // {
-        //   value: 2,
-        //   label: "普通角色"
-        // },
-        // {
-        //   value: 100,
-        //   label: "前端开发人员"
-        // },
-        // {
-        //   value: 101,
-        //   label: "图片文件管理员"
-        // },
-        // {
-        //   value: 102,
-        //   label: "附件管理员"
-        // },
-        // {
-        //   value: 103,
-        //   label: "权限测试角色"
-        // }
-      ],
-      selectList: []
-    };
-  },
-  // created() {
-  //   this.getRole();
-  // },
-  methods: {
-    show(){
-      console.log("4444444444444444444")
-      this.visible = true
-      this.getRole();
-    },
-    //获取角色信息
-    getRole() {
-      getRole().then(res => {
-        this.roleList = res.data;
-      });
-    },
-    //选中角色
-    selectChange(roleItem) {
-      // 左侧有选择框
-      if (this.showCheckbox) {
-        // 左侧有选择框 + 多选
-        if (this.multiple) {
-          for (let i = 0; i < this.selectList.length; i++) {
-            if (this.selectList[i].value === roleItem.value) {
-              this.selectList.splice(i, 1);
-              break;
-            }
-          }
-          if (roleItem.selected) {
-            this.selectList.push(roleItem);
-          }
-        } else {// 左侧有选择框 + 单选
-          //用于左侧选择框选中取消,引起右侧数据变化
-          for (let i = 0; i < this.selectList.length; i++) {
-            if (this.selectList[i].value === roleItem.value) {
-              this.selectList.splice(i, 1);
-              break;
-            }
-          }
-          if (roleItem.selected) {
-            this.selectList = [roleItem];
-          }
-          for (let i = 0; i < this.roleList.length; i++) {
-            for (let j = 0; j < this.selectList.length; j++) {
-              if (this.roleList[i].value !== this.selectList[j].value) {
-                this.roleList[i].selected = false;
-              }
-            }
-          }
-        }
-      } else {// 左侧没有选择框
-        // 左侧没有选择框 + 多选
-        if (this.multiple) {
-          for (let i = 0; i < this.selectList.length; i++) {
-            if (this.selectList[i].value === roleItem.value) {
-              this.selectList.splice(i, 1);
-              break;
-            }
-          }
-          this.selectList.push(roleItem);
-        }else {// 左侧没有选择框 + 单选
-          this.selectList = [roleItem];
-        }
-      }
-    },
-    //右侧的×
-    noSelected(org) {
-      for (let i = 0; i < this.selectList.length; i++) {
-        if (this.selectList[i].value === org.value) {
-          this.selectList.splice(i, 1);
-          break;
-        }
-      }
-      org.selected = false;
-    },
-    //清空
-    clearSelected() {
-      this.$confirm("您确定要清空已选中的项?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(() => {
-        for (let i = 0; i < this.selectList.length; i++) {
-          if (this.selectList[i].selected === true) {
-            this.selectList[i].selected = false;
-          }
-        }
-        this.selectList = [];
-      });
-    },
-    //确定按钮
-    selectConfirm() {
-      console.log(this.selectList)
-      this.$emit("ok", Object.assign([], this.selectList.map(item =>{
-        return  {
-          roleId : item.value,
-          roleName: item.label
-        }
-      })));
-      this.visible = false;
-    }
-
-  }
-};
-</script>
-
-<style lang="less" scoped>
-@containWidth: 278px;
-/deep/ .el-dialog__body {
-  padding: 10px 20px;
-}
-
-
-.picker {
-  height: 402px;
-  position: relative;
-  text-align: left;
-
-  .candidate {
-    left: 0;
-    top: 0;
-  }
-
-  .role-header {
-    padding: 10px !important;
-    margin-bottom: 5px;
-    border-bottom: 1px solid #e8e8e8;
-  }
-}
-
-.candidate, .selected {
-  position: absolute;
-  display: inline-block;
-  width: @containWidth;
-  height: 400px;
-  border: 1px solid #e8e8e8;
-}
-
-.selected {
-  border-left: none;
-  right: 0;
-  top: 0;
-
-  .count {
-    width: calc(@containWidth - 20px);
-    padding: 10px;
-    display: inline-block;
-    border-bottom: 1px solid #e8e8e8;
-    margin-bottom: 5px;
-
-    & > span:nth-child(2) {
-      float: right;
-      color: #c75450;
-      cursor: pointer;
-    }
-  }
-
-}
-
-
-.org-items {
-  overflow-y: auto;
-  height: 350px;
-
-  .el-icon-close {
-    position: absolute;
-    right: 5px;
-    cursor: pointer;
-    font-size: larger;
-  }
-
-  .org-role-item {
-    padding: 7px 5px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin: 0 5px;
-    border-radius: 5px;
-    position: relative;
-
-    &:hover {
-      background: #f1f1f1;
-    }
-
-    > span {
-      margin-left: 5px;
-    }
-
-  }
-}
-
-
-::-webkit-scrollbar {
-  float: right;
-  width: 4px;
-  height: 4px;
-  background-color: white;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 16px;
-  background-color: #efefef;
-}
-</style>
diff --git a/flowable-engine-web/src/views/workspace/InitiatedInstance.vue b/flowable-engine-web/src/views/workspace/InitiatedInstance.vue
index 7bdf479..c027653 100644
--- a/flowable-engine-web/src/views/workspace/InitiatedInstance.vue
+++ b/flowable-engine-web/src/views/workspace/InitiatedInstance.vue
@@ -45,19 +45,39 @@
     </el-table>
     <el-drawer
         title="审批详情"
-        size="50%"
+        size="500px"
         :visible.sync="approveOpen"
         direction="rtl">
       <div v-loading="loading">
+        <div class="top">
+          <div class="top_left">
+            <el-avatar size="large" :src="avatar"></el-avatar>
+            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ selectProcessInstance.approveName }}</span>
+          </div>
+          <div class="top_right">
+            <div style="margin-bottom: 12px">
+              <span style="font-size: 15px;">{{ selectProcessInstance.deploymentName }}</span>
+              <el-tag style="font-size: 12px;margin:0 15px" size="mini">进行中</el-tag>
+              <el-tooltip class="item" effect="dark" content="查看详细流程" placement="top-start">
+                <el-icon class="el-icon-view" style="float: right;font-size: 20px;cursor: pointer" @click.native="processDiagramViewer = true"></el-icon>
+              </el-tooltip>
+            </div>
+            <div>
+              <span style="color: rgb(108, 108, 108);">编号: {{ selectProcessInstance.taskId }}</span>
+            </div>
+          </div>
+        </div>
+        <div style="height: 15px;background:#f5f5f5;"></div>
         <form-render-view ref="taskViewForm" :form-items="processInstanceData.formItems"
                           v-model="processInstanceData.formData"/>
 <!--        <process-diagram-viewer v-if="!loading"/>-->
-        <el-button @click="processDiagramViewer = true">查看详细流程</el-button>
+        <div style="height: 15px;background:#f5f5f5;"></div>
       </div>
     </el-drawer>
 
     <el-dialog title="流程详情" :visible.sync="processDiagramViewer" :close-on-click-modal="true">
       <process-diagram-viewer v-if="processDiagramViewer"/>
+      <div style="height: 70px;"></div>
     </el-dialog>
   </div>
 </template>
@@ -82,7 +102,8 @@ export default {
         formData: {},
         formItems: [],
         processList: [],
-      }
+      },
+      avatar: require("@/assets/image/avatar.png")
     };
   },
   created() {
@@ -143,6 +164,26 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.top {
+  padding: 0 10px 10px 10px;
+  display: flex;
+
+.top_left {
+  display: flex;
+  flex-direction: column;
+  width: 50px;
+  align-items: center;
+}
+
+.top_right {
+  width: 85%;
+  display: flex;
+  flex-direction: column;
+//justify-content: space-between;
+  font-size: 13px;
+  margin-left: 10px;
+}
+}
 
 </style>
-- 
2.40.1