fix : 细节优化

src/views/workflow/form/components/UserPicker.vue

@@ -12,22 +12,25 @@
         <user-picker :multiple="multiple" ref="userPicker" title="请选择人员" v-model:value="userList" @ok="selected"/>
         <span class="placeholder"> {{ placeholder }}</span>
         <div style="display: flex;">
-          <div class="userStyle" v-for="(user, i) in userList" :key="i">
+          <role-items v-model="userList"/>
-            <span @click="delDept(i)">×</span>
+<!--          <div class="userStyle" v-for="(user, i) in userList" :key="i">-->
-            <el-avatar :src="user.avatar"/>
+<!--            <span @click="delDept(i)">×</span>-->
-            <el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
+<!--&lt;!&ndash;            <el-avatar :src="user.avatar"/>&ndash;&gt;-->
-              <span>{{ user.name }}</span>
+<!--            <el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">-->
-            </el-tooltip>
+<!--              <span>{{ user.name }}</span>-->
-          </div>
+<!--            </el-tooltip>-->
+<!--          </div>-->
         </div>
       </template>
       <template v-else-if="perm === 'R'">
         <div style="display: flex;">
-          <div v-for="(user, i) in userList" :key="i" class="view_user">
+<!--          class="view_user"-->
-            <el-avatar :src="user.avatar"/>
+          <div v-for="(user, i) in userList" :key="i" >
-            <el-tooltip effect="dark" :content="user.name" placement="bottom-start">
+<!--            <el-avatar :src="user.avatar"/>-->
-              <span>{{ user.name }}</span>
+            <el-tag>{{ user.name }}</el-tag>
-            </el-tooltip>
+<!--            <el-tooltip effect="dark" :content="user.name" placement="bottom-start">-->
+<!--              <span>{{ user.name }}</span>-->
+<!--            </el-tooltip>-->
           </div>
         </div>
       </template>
@@ -37,7 +40,8 @@
 </template>
 
 <script setup>
-import UserPicker from "../../process/common/UserPicker.vue";
+import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
+import RoleItems from "@/views/workflow/process/common/RoleItems.vue";
 import {computed, defineProps} from "vue";
 const emit = defineEmits(["input"])
 const showPickerSelect = ref(false)

src/views/workflow/process/ProcessTree.vue

@@ -665,9 +665,8 @@ defineExpose({
 }
 
 .process-end {
-  width: 60px;
+  width: 77px;
-  margin: 0 auto;
+  margin: 0 auto 20px auto;
-  margin-bottom: 20px;
   border-radius: 15px;
   text-align: center;
   padding: 5px 10px;

src/views/workflow/process/common/DeptPicker.vue

@@ -224,7 +224,7 @@ getDepartmentTreeList();
 </script>
 
 <style lang="scss" scoped>
-$containWidth: 278px;
+$containWidth: 264px;
 
 ///deep/ .el-tree-node {
 //  .is-leaf + .el-checkbox .el-checkbox__inner {

src/views/workflow/process/common/InsertButton.vue

@@ -104,6 +104,7 @@ const disVisible = () =>{
     background-color: #F8F9F9;
     border-radius: 10px;
     width: 130px;
+    line-height: 7px;
     position: relative;
 
     span {

src/views/workflow/process/common/RoleItems.vue

@@ -2,7 +2,7 @@
   <div style="margin-top: 10px">
     <el-tag class="role-item" v-model="_value" v-for="(role, index) in _value" :key="index + '_role'"
             closable size="mini" @close="removeRoleItem(index)">
-      {{ role.roleName }}
+      {{ role.name }}
     </el-tag>
   </div>
 </template>

src/views/workflow/process/common/RolePicker.vue

@@ -177,7 +177,7 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-$containWidth: 278px;
+$containWidth: 264px;
 .el-dialog__body {
   padding: 10px 20px;
 }

src/views/workflow/process/common/UserPicker.vue

@@ -21,12 +21,12 @@
             <div class="tree">
               <el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
                        :default-expanded-keys="expandedKeys" lazy accordion
-                       @node-click="handleChange"
+                       @node-click="handleChange" @node-expand="handleChange"
               >
                 <template #default="{ node, data }">
                   <div class="tree-node">
                     <div v-if="data.type === 0" style="display: flex;align-items: center;padding: 3px 0">
-                      <el-avatar :src="data.avatar"></el-avatar>
+<!--                      <el-avatar :src="data.avatar"></el-avatar>-->
                       {{ node.label }}
                     </div>
                     <div v-else-if="data.type ===1">
@@ -44,7 +44,6 @@
                   </div>
                 </template>
               </el-tree>
-
             </div>
           </el-scrollbar>
         </div>
@@ -56,7 +55,7 @@
           <div class="org-items" style="height: 350px;">
             <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
             <div v-for="(selectItem, selectIndex) in selectList" :key="selectIndex" class="org-item">
-              <el-avatar :src="selectItem.avatar" style="margin-right: 5px;"></el-avatar>
+<!--              <el-avatar :src="selectItem.avatar" style="margin-right: 5px;"></el-avatar>-->
               {{ selectItem.name}}
               <i class="el-icon-close" @click="noSelected(selectItem)"></i>
             </div>
@@ -110,9 +109,13 @@ const expandedKeys = ref([]);
 const defaultProps = {
   value: "value",
   label: "name",
-  children: "children"
+  children: "children",
-  // isLeaf: function (data, node) {
+  isLeaf:(data, node) => {
-  //   return data.type === 0;
+    if (node.level === 2) {
+      return true
+    }
+  }
+
 };
 const emit = defineEmits();
 
@@ -187,20 +190,31 @@ const showUserPicker = () => {
 const handleChange = (item, data, node) => {
   //渲染子节点用户或部门及用户数据
   selectItem = item;
-  if(expandedKeys.value.indexOf(item.value)==-1){
+  if (data.expanded) {
-    expandedKeys.value.push(item.value);
+    if(expandedKeys.value.indexOf(item.value)===-1){
-  }else {
+      expandedKeys.value.push(item.value);
-   return;
+      if (item.type !== 0) {
-  }
+        chooseId.value = item.id;
-  if (data.expanded === true) {
+        getList();
-    if (item.type !== 0) {
+        return;
-      chooseId.value = item.id;
+      }
-      getList();
-      return;
     }
   }
+
+  // if(expandedKeys.value.indexOf(item.value)==-1){
+  //   expandedKeys.value.push(item.value);
+  // }else {
+  //   if (data.expanded === true) {
+  //     if (item.type !== 0) {
+  //       chooseId.value = item.id;
+  //       getList();
+  //       return;
+  //     }
+  //   }
+  // }
+
   //仅选择用户
-  if (item.avatar !== null) {
+  if (item.type === 0) {
     if (props.multiple) {
       //不添加重复的数据到右边
       for (let i = 0; i < selectList.value.length; i++) {
@@ -249,14 +263,14 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-$containWidth: 278px;
+$containWidth: 264px;
 :deep(.tree) {
   .el-tree {
     .el-tree-node {
       .el-tree-node__children {
         .el-tree-node {
           .el-tree-node__content {
-            height: 45px !important;
+            //height: 45px !important;
 
             .tree-node {
             }

src/views/workflow/process/config/ApprovalNodeConfig.vue

@@ -9,7 +9,8 @@
           选择人员
         </el-button>
         <user-picker title="请选择系统角色" :multiple="false" ref="sysRolePicker" :v-model="assignedUser" @ok="selectedUser"/>
-        <avatar-ellipsis :row="3" :user-info="assignedUser"/>
+<!--        <ellipsis :row="3" :user-info="assignedUser"/>-->
+        <role-items v-model="assignedUser"/>
       </div>
       <div v-else-if="nodeProps.assignedType === 'SELF_SELECT'">
         <el-radio-group size="mini" v-model="nodeProps.selfSelect.multiple">
@@ -42,11 +43,11 @@
         </el-form-item>
       </div>
       <div v-else-if="nodeProps.assignedType === 'ROLE'">
-        <el-button size="mini" icon="Plus" type="primary" @click="showRolePicker()" round>
+        <el-button size="mini" icon="Plus" type="primary" @click="showRolePicker" round>
           选择系统角色
         </el-button>
         <role-picker title="请选择人员" :multiple="false" ref="rolePicker" :v-model="roleList" @ok="selectedRole"/>
-        <role-items v-model="nodeProps.roleList"/>
+        <role-items v-model="roleList"/>
       </div>
       <div v-else-if="nodeProps.assignedType === 'FORM_USER'">
         <el-form-item label="选择表单联系人项" prop="text" class="approve-end">
@@ -73,7 +74,7 @@
         </el-button>
         <user-picker title="请指定用户" :multiple="false" ref="toUserPicker" :v-model="nobodyAssignedUser"
                      @ok="selectNoSetUser"/>
-        <avatar-ellipsis :row="3" :user-info="nobodyAssignedUser"/>
+        <ellipsis :row="3" :user-info="nobodyAssignedUser"/>
       </div>
     </el-form-item>
 
@@ -216,7 +217,7 @@
 import {useProcessStore} from '@/stores/processStore.js'
 import UserPicker from '../common/UserPicker.vue'
 import RolePicker from '../common/RolePicker.vue'
-import AvatarEllipsis from '../common/AvatarEllipsis.vue'
+import Ellipsis from '../common/Ellipsis.vue'
 import RoleItems from "../common/RoleItems.vue";
 import {computed, defineProps} from 'vue'
 
@@ -375,8 +376,8 @@ const selectedRole = (select) => {
   let roleInfoList = []
   for (let val of select) {
     let userInfo = {
-      roleId: val.roleId,
+      value: val.roleId,
-      roleName: val.roleName
+      name: val.roleName
     }
     roleInfoList.push(userInfo)
   }

src/views/workflow/process/nodes/ApprovalNode.vue

@@ -86,7 +86,7 @@ const content = computed(() => {
     case "ROLE":
       if (config.roleList.length > 0) {
         return config.roleList.map(role => {
-          return role.roleName;
+          return role.name;
         }).join("、")
       } else {
         return '指定角色（未设置）'

src/views/workflow/process/nodes/Node.vue

@@ -22,7 +22,10 @@
         </template>
         <template v-else-if="showAvatar">
           <span class="placeholder" v-if="userInfo.length === 0">{{ placeholder }}</span>
-          <avatar-ellipsis :row="3" :user-info="userInfo" v-else/>
+          <div  v-else v-for="item in userInfo" class="circle-user">
+            <span >{{item.name}}</span>
+          </div>
+<!--          <avatar-ellipsis :row="3" :user-info="userInfo"/>-->
         </template>
         <template v-else>
           <span class="placeholder" v-if="(content || '').trim() === ''">{{ placeholder }}</span>
@@ -173,7 +176,15 @@ const init = () => {
 </script>
 
 <style lang="scss" scoped>
-
+.circle-user{
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: 1px solid #ACACAC;
+}
 .root {
   &:before {
     display: none !important;