Merge pull request 'fix : 细节优化' (#35) from dj into master

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/35
2024-03-26 06:47:51 +00:00
parent 203180100e 45f95fa297
commit 08edc44670
10 changed files with 79 additions and 49 deletions
--- a/src/views/workflow/form/components/UserPicker.vue
+++ b/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">
-            <span @click="delDept(i)">×</span>
-            <el-avatar :src="user.avatar"/>
-            <el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
-              <span>{{ user.name }}</span>
-            </el-tooltip>
-          </div>
+          <role-items v-model="userList"/>
+<!--          <div class="userStyle" v-for="(user, i) in userList" :key="i">-->
+<!--            <span @click="delDept(i)">×</span>-->
+<!--&lt;!&ndash;            <el-avatar :src="user.avatar"/>&ndash;&gt;-->
+<!--            <el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">-->
+<!--              <span>{{ user.name }}</span>-->
+<!--            </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">
-            <el-avatar :src="user.avatar"/>
-            <el-tooltip effect="dark" :content="user.name" placement="bottom-start">
-              <span>{{ user.name }}</span>
-            </el-tooltip>
+<!--          class="view_user"-->
+          <div v-for="(user, i) in userList" :key="i" >
+<!--            <el-avatar :src="user.avatar"/>-->
+            <el-tag>{{ user.name }}</el-tag>
+<!--            <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)
--- a/src/views/workflow/process/ProcessTree.vue
+++ b/src/views/workflow/process/ProcessTree.vue
@@ -665,9 +665,8 @@ defineExpose({
 }

 .process-end {
-  width: 60px;
-  margin: 0 auto;
-  margin-bottom: 20px;
+  width: 77px;
+  margin: 0 auto 20px auto;
  border-radius: 15px;
  text-align: center;
  padding: 5px 10px;
--- a/src/views/workflow/process/common/DeptPicker.vue
+++ b/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 {
--- a/src/views/workflow/process/common/InsertButton.vue
+++ b/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 {
--- a/src/views/workflow/process/common/RoleItems.vue
+++ b/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>
--- a/src/views/workflow/process/common/RolePicker.vue
+++ b/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;
 }
--- a/src/views/workflow/process/common/UserPicker.vue
+++ b/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"
-  // isLeaf: function (data, node) {
-  //   return data.type === 0;
+  children: "children",
+  isLeaf:(data, node) => {
+    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){
-    expandedKeys.value.push(item.value);
-  }else {
-   return;
-  }
-  if (data.expanded === true) {
-    if (item.type !== 0) {
-      chooseId.value = item.id;
-      getList();
-      return;
+  if (data.expanded) {
+    if(expandedKeys.value.indexOf(item.value)===-1){
+      expandedKeys.value.push(item.value);
+      if (item.type !== 0) {
+        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 {
            }
--- a/src/views/workflow/process/config/ApprovalNodeConfig.vue
+++ b/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,
-      roleName: val.roleName
+      value: val.roleId,
+      name: val.roleName
    }
    roleInfoList.push(userInfo)
  }
--- a/src/views/workflow/process/nodes/ApprovalNode.vue
+++ b/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 '指定角色（未设置）'
--- a/src/views/workflow/process/nodes/Node.vue
+++ b/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;