From c9e43052a3263c648d4b7938a140a544e6140f4b Mon Sep 17 00:00:00 2001
From: dengbf <dengbf@aliyun.com>
Date: Thu, 31 Jul 2025 14:26:25 +0800
Subject: [PATCH] =?UTF-8?q?-=20[=E5=85=B3=E8=81=94]=20#[1476864680361984]?=
 =?UTF-8?q?=E9=80=9A=E7=9F=A5=E7=AD=96=E7=95=A5=E8=AF=A6=E6=83=85=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4=20http://192.168.0.96:8090/demo/rdm?=
 =?UTF-8?q?.html#/story-detail/939050947543040/939050947543042/14768646803?=
 =?UTF-8?q?61984?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TsAvatar/TsAvatar.vue          |   3 +-
 .../notifytactics/notifytactics-edit.vue      | 177 +++++++-----------
 .../tacticsedit/active-detail.vue             |  31 ++-
 .../tacticsedit/condition-modal.vue           |   6 +
 4 files changed, 83 insertions(+), 134 deletions(-)

diff --git a/src/resources/components/TsAvatar/TsAvatar.vue b/src/resources/components/TsAvatar/TsAvatar.vue
index 6790e991..41e7431f 100644
--- a/src/resources/components/TsAvatar/TsAvatar.vue
+++ b/src/resources/components/TsAvatar/TsAvatar.vue
@@ -64,12 +64,11 @@ export default {
   },
   computed: {
     avatarSrc() {
-      if (this.avatar === null) return null;
       if (this.avatar && this.avatar.indexOf('api') > -1) return this.avatar.indexOf(BASEURLPREFIX + '/') != 0 ? BASEURLPREFIX + '/' + this.avatar : this.avatar;
       if (this.initType === 'role') return require('@/resources/assets/images/avatar/role.png');
       if (this.initType === 'team') return require('@/resources/assets/images/avatar/team.png');
       if (this.initType === 'user' && !this.namePinyin) return require('@/resources/assets/images/avatar/user.png');
-      if (this.initType && !this.namePinyin) return require('@/resources/assets/images/avatar/process.png');
+      if (this.initType && !['role', 'team', 'user'].includes(this.initType)) return require('@/resources/assets/images/avatar/process.png');
       else return null;
     },
 
diff --git a/src/views/pages/framework/notifytactics/notifytactics-edit.vue b/src/views/pages/framework/notifytactics/notifytactics-edit.vue
index 077170a5..d6be6bbc 100644
--- a/src/views/pages/framework/notifytactics/notifytactics-edit.vue
+++ b/src/views/pages/framework/notifytactics/notifytactics-edit.vue
@@ -18,7 +18,12 @@
           </span>
         </div>
       </template>
-      <div slot="content">
+      <div
+        slot="content"
+        v-click-outside:false="onClickOutside"
+        v-click-outside:false.mousedown="onClickOutside"
+        v-click-outside:false.touchstart="onClickOutside"
+      >
         <Loading :loadingShow="loadingShow" type="fix"></Loading>
         <div class="search-box">
           <TsRow class="input-border">
@@ -71,8 +76,8 @@
                   </div>
                   <div v-if="row.notifyList && row.notifyList.length > 0">
                     <div class="number-box text-title">
-                      <span>{{ $t('page.actions') }}</span>
-                      <span class="border-color number">{{ row.notifyList.length }}</span>
+                      <span class="pr-xs">{{ $t('page.actions') }}</span>
+                      <Badge :count="row.notifyList.length" type="info"></Badge>
                     </div>
                     <div class="action-btn bg-block" :class="{'block':row.isDel || row.isDelActive || row.isShowDetail, 'text-mask': row.isDel || row.isDelActive}">
                       <span class="tsfont-plus text-action" @click="addCondition(row)">{{ $t('page.actions') }}</span>
@@ -81,17 +86,16 @@
                   </div>
                 </div>
                 <div class="content">
-                  <div class="overview">
-                    <div v-if="row.notifyList.length > 0" class="trigger-overview">
+                  <div class="overview pr-xs overflow">
+                    <div v-if="row.notifyList.length > 0" class="trigger-overview flex-start overflow">
                       <div
                         v-for="(item, index) in row.notifyList"
                         :key="index"
-                        class="action-item overflow"
-                        :class="[index > 0 ? 'dividing-color' : '', index > 0 && (row.notifyList.length - 1 == index) ? 'last-action-item-class' : '' ]"
+                        class="action-item dividing-color"
                       >
                         <template v-if="index < 3">
                           <div class="name text-tip">{{ $t('page.actions') }}{{ numberChinese(index) }}</div>
-                          <div class="type">
+                          <div class="type flex-start">
                             <span
                               v-for="action in item.actionList"
                               :key="action.templateId"
@@ -104,7 +108,7 @@
                     </div>
                     <div v-else class="tsfont-plus add-active text-action" @click="addCondition(row)">{{ $t('page.actions') }}</div>
                   </div>
-                  <div v-if="row.notifyList.length > 0" class="trigger-detail bg-block bottom-shadow" :class="row.isDel || row.isDelActive || row.isShowDetail ? 'block' : ''">
+                  <div v-if="row.notifyList.length > 0" class="trigger-detail bg-block bottom-shadow" :class="row.isDel || row.isDelActive || row.isShowDetail? 'block' : ''">
                     <div @click.stop>
                       <DelItme
                         v-if="row.isDel || row.isDelActive"
@@ -113,52 +117,33 @@
                         @on-close="closeSetting(delType, row)"
                       ></DelItme>
                     </div>
-                    <div :class="row.isDel || row.isDelActive ? 'text-mask' : ''">
-                      <div v-for="(detail, dindex) in row.notifyList" :key="dindex" class="list border-color">
-                        <div class="name bg-block">{{ $t('page.actions') }}{{ numberChinese(dindex) }}</div>
-                        <div v-for="n in detail.actionList" :key="n.templateId" class="active-li overflow">
-                          <span>{{ n.notifyHandlerName }}：</span>
-                          <span v-if="n.receiverObjList && n.receiverObjList.length > 0">
-                            <span v-for="(user, uindex) in slice(n.receiverObjList, true)" :key="uindex" style="padding-right: 4px;">
-                              <UserCard class="user-name" v-bind="user" @showPop="(isshow)=>showPop(isshow, row, 'detail_' + detail.id)"></UserCard>
-                            </span>
-                            <span v-if="n.receiverObjList.length > 3" class="more">
-                              <Dropdown
-                                trigger="click"
-                                transfer
-                                style="margin-left: 20px"
-                                @on-visible-change="showUserList(arguments, row, 'detail_' + detail.id)"
-                              >
-                                <span class="tsfont-option-vertical bg-block text-action"></span>
-                                <DropdownMenu slot="list">
-                                  <DropdownItem v-for="(user, uindex) in slice(n.receiverObjList, false)" :key="uindex">
-                                    <UserCard class="user-name" v-bind="user"></UserCard>
-                                  </DropdownItem>
-                                </DropdownMenu>
-                              </Dropdown>
-                            </span>
-                          </span>
-                        </div>
-                        <div class="li-btn bg-block">
-                          <span class="text-tip-active">
-                            <Poptip
-                              ref="pop"
-                              placement="bottom"
-                              width="400"
-                              word-wrap
-                              @on-popper-show="showDetail(row, 'detail_' + detail.id)"
-                              @on-popper-hide="hideDetail(row, 'detail_' + detail.id)"
-                            >
-                              <i class="tsfont-formlist text-tip-active" :title="$t('page.detail')">{{ row.visible }}</i>
-                              <div slot="content">
-                                <ActiveDetail :config="detail" :conditionList="conditionOptionList"></ActiveDetail>
-                              </div>
-                            </Poptip>
-                          </span>
-                          <span class="tsfont-edit text-tip-active" @click="editTactics(row, detail)"></span>
-                          <span class="tsfont-trash-s text-tip-active" @click.stop="emptyData('active', row, detail, dindex)"></span>
-                        </div>
-                      </div>
+                    <div :class="row.isDel || row.isDelActive ? 'text-mask' : ''" class="pb-sm">
+                      <Collapse
+                        value="action_0"
+                        accordion
+                        @on-change="(val)=>{
+                          onChangeCollapse(val, 'detail_' + row.id,row)
+                        }"
+                      >
+                        <Panel
+                          v-for="(detail, dindex) in row.notifyList"
+                          :key="dindex"
+                          :name="'action_' + dindex"
+                          class="panel-box"
+                        >
+                          {{ $t('page.actions') }}{{ numberChinese(dindex) }}
+                          <div slot="content">
+                            <ActiveDetail
+                              :config="detail"
+                              :conditionList="conditionOptionList"
+                            ></ActiveDetail>
+                          </div>
+                          <div class="panel-btn">
+                            <span class="tsfont-edit text-tip-active pr-xs" @click.stop="editTactics(row, detail)"></span>
+                            <span class="tsfont-trash-s text-tip-active" @click.stop="emptyData('active', row, detail, dindex)"></span>
+                          </div>
+                        </Panel>
+                      </Collapse>
                     </div>
                   </div>
                 </div>
@@ -199,6 +184,7 @@
 </template>
 <script>
 import ActiveDetail from './tacticsedit/active-detail.vue';
+import { directive as ClickOutside } from '@/resources/directives/v-click-outside-x.js';
 export default {
   name: '',
   components: {
@@ -209,7 +195,7 @@ export default {
     SettingTemplate: () => import('./tacticsedit/setting/setting-template'),
     SettingParameter: () => import('./tacticsedit/setting/setting-parameter'),
     DelItme: () => import('./tacticsedit/setting/del-item.vue'),
-    UserCard: () => import('@/resources/components/UserCard/UserCard.vue'),
+    // UserCard: () => import('@/resources/components/UserCard/UserCard.vue'),
     InputSearcher: () => import('@/resources/components/InputSearcher/InputSearcher.vue'),
     ActiveDetail
   },
@@ -218,6 +204,7 @@ export default {
       $notifyBox: this
     };
   },
+  directives: { ClickOutside },
   filters: {},
   props: {},
   data() {
@@ -299,14 +286,6 @@ export default {
         this.$set(row, 'isShowDetail', false);
       }
     },
-    showUserList(arr, row, text) {
-      //通知对象
-      if (arr[0]) {
-        this.showDetail(row, text);
-      } else {
-        this.hideDetail(row, text);
-      }
-    },
     hideDel() {
       this.triggerList.forEach(e => {
         this.$set(e, 'isDel', false);
@@ -408,10 +387,6 @@ export default {
       this.conditionDialogShow = true;
     },
     emptyData(type, row, item, index) {
-      let listPop = this.$refs.pop;
-      listPop.forEach(item => {
-        item.visible = false;
-      });
       this.triggerList.forEach(e => {
         if (row.trigger != e.trigger) {
           this.$set(e, 'isDelActive', false);
@@ -464,26 +439,18 @@ export default {
         this.$set(row, 'isDelActive', false);
       }
     },
-    slice(list, key) {
-      if (list.length > 0) {
-        if (key) {
-          return list.slice(0, 3);
-        } else {
-          return list.slice(3, list.length);
-        }
-      }
-    },
-    showPop(isshow, row, text) { //用户提示框显示问题处理
-      var _this = this;
-      if (isshow) {
-        setTimeout(function() {
-          _this.showDetail(row, text);
-        }, 250);
+    onChangeCollapse(val, text, row) {
+      if (!this.$utils.isEmpty(val)) {
+        this.showDetail(row, text);
       } else {
-        setTimeout(function() {
-          _this.hideDetail(row, text);
-        }, 150);
+        this.hideDetail(row, text);
       }
+    },
+    onClickOutside() {
+      console.log('点击了');
+      this.triggerList.forEach(e => {
+        this.$set(e, 'isShowDetail', false);
+      });
     }
   },
   computed: {
@@ -583,21 +550,13 @@ export default {
           padding: 6px 0;
         }
         .action-item {
-          float: left;
-          width: 33.3333%;
           height: 100%;
           padding: 0 10px;
-          white-space: nowrap;
-          &:not(:first-child) {
-            border-left: 1px solid;
-          }
-          &.last-action-item-class {
-            border-left: none;
-            height: 0;
-            padding: 0;
+          flex: 1;
+          &:not(:last-child) {
+            border-right: 1px solid;
           }
           .action-icon {
-            display: inline-block;
             width: 32px;
             height: 32px;
             border-radius: 50%;
@@ -630,22 +589,6 @@ export default {
           padding: 4px 8px;
           font-size: 13px;
         }
-        .li-btn {
-          position: absolute;
-          top: -15px;
-          right: 16px;
-          > span {
-            padding: 0 6px;
-          }
-        }
-      }
-      .active-li {
-        position: relative;
-        .more {
-          position: absolute;
-          top: 2px;
-          right: -10px;
-        }
       }
     }
   }
@@ -673,4 +616,12 @@ export default {
 .block {
   display: block !important;
 }
+.panel-box {
+  position: relative;
+  .panel-btn {
+    position: absolute;
+    top: 0;
+    right: 8px;
+  }
+}
 </style>
diff --git a/src/views/pages/framework/notifytactics/tacticsedit/active-detail.vue b/src/views/pages/framework/notifytactics/tacticsedit/active-detail.vue
index f7bb1bd5..8df8ee5c 100644
--- a/src/views/pages/framework/notifytactics/tacticsedit/active-detail.vue
+++ b/src/views/pages/framework/notifytactics/tacticsedit/active-detail.vue
@@ -2,7 +2,7 @@
   <div v-if="config">
     <div class="condition-text dividing-color">
       <div v-if="config.conditionConfig && config.conditionConfig.conditionGroupList && config.conditionConfig.conditionGroupList.length > 0" class="condition-block">
-        <div class="text-title condition-title">{{ $t('page.condition') }}</div>
+        <Divider orientation="start">{{ $t('page.condition') }}</Divider>
         <div class="condition-content">
           <div v-for="(groupitem, groupindex) in config.conditionConfig.conditionGroupList" :key="groupindex">
             <div>
@@ -28,13 +28,18 @@
         </div>
       </div>
       <div v-if="config.actionList && config.actionList.length > 0" class="condition-block">
-        <div class="text-title condition-title">{{ $t('page.actions') }}</div>
+        <Divider orientation="start">{{ $t('page.actions') }}</Divider>
         <div class="condition-content">
-          <div v-for="(action, acindex) in config.actionList" :key="acindex" class="active-li">
-            <span class="name">{{ action.notifyHandlerName }}：</span>
-            <span v-for="(user, uindex) in action.receiverObjList" :key="uindex">
-              <UserCard class="user-name" v-bind="user"></UserCard>
-            </span>
+          <div v-for="(action, acindex) in config.actionList" :key="acindex" class="pt-xs">
+            <div class="name">{{ action.notifyHandlerName }}</div>
+            <div>
+              <UserCard
+                v-for="(user, uindex) in action.receiverObjList"
+                :key="uindex"
+                class="pr-xs pb-xs"
+                v-bind="user"
+              ></UserCard>
+            </div>
           </div>
         </div>
       </div>
@@ -107,16 +112,4 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-.active-li {
-  position: relative;
-  padding-left: 80px;
-  word-break: break-all;
-  white-space: pre-wrap;
-  line-height: 28px;
-  .name{
-    position: absolute;
-    top: 0;
-    left: 10px;
-  }
-}
 </style>
diff --git a/src/views/pages/framework/notifytactics/tacticsedit/condition-modal.vue b/src/views/pages/framework/notifytactics/tacticsedit/condition-modal.vue
index dc5448cc..bc64e923 100644
--- a/src/views/pages/framework/notifytactics/tacticsedit/condition-modal.vue
+++ b/src/views/pages/framework/notifytactics/tacticsedit/condition-modal.vue
@@ -89,6 +89,7 @@
                           border="none"
                           size="small"
                           :transfer="true"
+                          class="transparentSelect"
                         ></TsFormSelect>
                       </div>
                     </Col>
@@ -731,4 +732,9 @@ export default {
     }
   }
 }
+.transparentSelect {
+  .ivu-input {
+    background-color: transparent !important;
+  }
+}
 </style>
-- 
Gitee