feat：常用功能优化

src/components/drawer/Drawer.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="drawer-dialog">
     <el-drawer
+      v-if="showDrawer"
       :custom-class="customClass"
       :show-close="showClose"
       :append-to-body="appendToBody"
@@ -8,6 +9,7 @@
       :direction="direction"
       :size="percent"
       :withHeader="withHeader"
+      :destroy-on-close="destroyOnClose"
       @before-close="beforeClose"
       @close="close"
       >
@@ -86,6 +88,10 @@ export default {
     appendToBody: {
       type: Boolean,
       default: false
+    },
+    destroyOnClose: {
+      type: Boolean,
+      default: false
     }
   },
   model: {

src/store/workspace/common-use.js

@@ -43,12 +43,16 @@ export default {
     commonList: [], // 常用功能(显示在外)
     transferCommonList: [], // 常用功能，去除过期的(显示在穿梭框右侧)
     saveData: null, // 要提交的数据
-    mainFunctions: [] // 可用主要功能（商机、分析、数据、服务）不包含二级菜单
+    mainFunctions: [], // 可用主要功能（商机、分析、数据、服务）不包含二级菜单
+    drawerShow: false
   }),
   mutations: {
     changeDialogState (state, show) {
       state.dialogShow = show
     },
+    changeDrawerState (state, show) {
+      state.drawerShow = show
+    },
     sortMenuFunctions (state, menuInfoList = []) {
       const menuList = flatMenuList(menuInfoList, 0)
       // 排除无权限的
@@ -74,7 +78,6 @@ export default {
         const obj = { ...item, children: flatTabsMenu(item.child) }
         filterMainList.push(obj)
       })
-      console.log(filterMainList)
       this.commit('workspace/commonUse/setMainFunList', filterMainList)
     },
     setAllFunctionsContainsUsable: function (state, list = []) {
@@ -171,9 +174,10 @@ export default {
     },
     // dialog 卡片组件保存按钮提交事件
     async confirmSave ({ dispatch, commit, state }) {
-      // if (!state.saveData) {
-      //   return commit('changeDialogState', false)
-      // }
+      if (!state.saveData) {
+        // return commit('changeDialogState', false)
+        return commit('changeDrawerState', false)
+      }
       try {
         const { error_code: code, error_msg: msg } = await workspaceCommonUse('save', {
           platform: state.platform,
@@ -184,10 +188,12 @@ export default {
         } else {
           throw new Error(msg)
         }
-        commit('changeDialogState', false)
+        // commit('changeDialogState', false)
+        commit('changeDrawerState', false)
       } catch (error) {
         console.log(error)
-        commit('changeDialogState', false)
+        // commit('changeDialogState', false)
+        commit('changeDrawerState', false)
       }
     }
   },

src/views/portrayal/Loading.vue

@@ -25,7 +25,7 @@ export default {
   },
   created () {
     this.type = this.$route.params.type // ent企业画像 buyer采购单位画像
-    this.params = encodeURIComponent(this.$route.params.params) // 企业画像id 或 采购单位名称
+    this.params = decodeURIComponent(this.$route.params.params) // 企业画像id 或 采购单位名称
     this.position = this.$route.query?.position // 定位到画像哪个模块
   },
   mounted () {

src/views/workspace/components/CommonUse.vue

@@ -11,7 +11,7 @@
             <img slot="error" src="https://www.jianyu360.cn/common-module/public/image/auto.png" />
           </el-image>
         </div>
-        <span v-html="item.name" class="item-name"></span>
+        <span v-html="item.name.replace('/', '/<br>')" class="item-name"></span>
       </div>
       <div v-if="commonList && commonList.length < maxCount" class="list-add" @click="setCommonFun">
         <span class="icon-add-img"></span>
@@ -35,18 +35,18 @@
       </SelectorCard>
     </el-dialog>
     <!-- 改为抽屉式 -->
-    <DrawerCard customClass="drawer-class" title="常用功能设置" percent="600px" :with-header="false" v-model="showDrawer" @close="onCloseDrawer" @saveData="onSaveDrawer">
+    <DrawerCard customClass="drawer-class" title="常用功能设置" percent="600px" :with-header="false" v-model="drawerShow" @close="onCloseDrawer" @saveData="onSaveDrawer">
       <div class="function-drawer-content" @scroll="handleScroll($event)">
         <div class="added-function">
           <h3 class="added-title">已添加（{{addedList.length}}）</h3>
           <transition-group class="added-container" name="drag" tag="ul" v-if="addedList && addedList.length > 0">
-            <li class="added-item" draggable v-for="(item, i) in addedList" :key="item.id" @dragstart="onDragstart(i)" @dragenter="onDragenter($event, i)" @dragover="onDragover($event, i)">
+            <li class="added-item" draggable v-for="(item, i) in addedList" :key="item.id" @dragover.prevent @dragstart="onDragstart($event, i)" @dragenter="onDragenter($event, i)" @dragend="onDragend($event, i)">
               <div class="icon-box-container">
                 <el-image :src="item.icon" :alt="item.name">
                   <img slot="error" src="https://www.jianyu360.cn/common-module/public/image/auto.png" />
                 </el-image>
               </div>
-              <span v-html="item.name" class="item-name"></span>
+              <span v-html="item.name.replace('/', '/<br>')" class="item-name"></span>
               <span class="remove-tag" @click.stop="onAddedRemove(item)">-</span>
             </li>
           </transition-group>
@@ -64,9 +64,9 @@
                   <li class="insert-item" v-for="next in level.children" :key="next.id">
                     <div class="insert-item-left">
                       <el-image :src="next.icon" :alt="next.name">
-                        <img slot="error" src="/common-module/public/image/auto.png" />
+                        <img slot="error" src="https://www.jianyu360.cn/common-module/public/image/auto.png" />
                       </el-image>
-                      <span v-html="next.name"></span>
+                      <span v-html="next.name.replace('<br>', '')"></span>
                     </div>
                     <transition name="el-zoom-in-center">
                       <span v-if="next.status" class="handle-btn remove-btn" @click.stop="onRemoveFun(next)">移除</span>
@@ -113,7 +113,6 @@ export default {
       mainFunList: [],
       dragIndex: '',
       enterIndex: '',
-      showDrawer: false,
       tabActive: 0,
       tabFixed: false
     }
@@ -125,7 +124,8 @@ export default {
       allFunctions: state => state.workspace.commonUse.allFunctions, // 所有功能
       transferCommonList: state => state.workspace.commonUse.transferCommonList,
       commonList: state => state.workspace.commonUse.commonList, // 常用功能
-      mainFunctions: state => state.workspace.commonUse.mainFunctions
+      mainFunctions: state => state.workspace.commonUse.mainFunctions,
+      drawerShow: state => state.workspace.commonUse.drawerShow
     }),
     tabNames () {
       return this.mainFunctions.filter(item => item.level === 1)
@@ -152,7 +152,8 @@ export default {
   methods: {
     ...mapMutations('workspace/commonUse', [
       'changeDialogState',
-      'transferSave'
+      'transferSave',
+      'changeDrawerState'
     ]),
     ...mapActions('workspace/commonUse', [
       'getAllFunctions',
@@ -237,8 +238,10 @@ export default {
         this.$toast(error)
       }
     },
-    onDragstart (index) {
+    onDragstart (e, index) {
       this.dragIndex = index
+      const element = e.target
+      element.classList.add('drag-move-item')
     },
     onDragenter: debounce(function (e, index) {
       e.preventDefault()
@@ -251,11 +254,13 @@ export default {
           return v.id
         })
         this.transferSave(ids)
-        console.log(ids)
       }
     }, 200),
-    onDragover (e, index) {
+    onDragend (e, index) {
       e.preventDefault()
+      const element = e.srcElement
+      element.classList.remove('drag-move-item')
+      this.$forceUpdate()
     },
     formatMainFunList (allList = [], addedList = []) {
       allList.forEach(v => {
@@ -269,14 +274,15 @@ export default {
       })
     },
     onCloseDrawer () {
-      this.showDrawer = false
+      this.changeDrawerState(false)
     },
     onSaveDrawer () {
       this.confirmSaveFn()
-      this.showDrawer = false
     },
     setCommonFun () {
-      this.showDrawer = true
+      this.changeDrawerState(true)
+      this.addedList = JSON.parse(JSON.stringify(this.commonList))
+      this.formatMainFunList(this.mainFunList, this.addedList)
     },
     onRemoveFun (item) {
       this.addedList.splice(this.addedList.findIndex(add => add.id === item.id), 1)
@@ -308,13 +314,17 @@ export default {
           })
         }
       })
+      const ids = this.addedList.map(v => {
+        return v.id
+      })
+      this.transferSave(ids)
     },
     goAnchor (item, index) {
       this.tabActive = index
       const dom = this.$root.$el.querySelector('#' + item.name)
       const offsetTop = this.getOffsetTop(dom)
+      // qiankun 子应用选择器获取不到document  改为this.$root.$el
       const scrollDom = this.$root.$el.querySelector('.function-drawer-content')
-      console.log(offsetTop, index)
       scrollDom.scrollTo({
         /**
          * 抽屉header高度70px, tabs导航栏高度48px, 滚动子元素h3标题高度60px
@@ -422,17 +432,19 @@ $main: #2cb7ca;
         flex-direction: column;
         align-items: center;
         width: 104px;
-        min-height: 70px;
+        height: fit-content;
         margin: 16px 0 0 0;
+        padding: 8px 0;
         text-align: center;
         flex-shrink: 0;
         border-radius: 8px;
-        cursor: move;
+        cursor: grabbing;
         .item-name{
           margin-top: 8px;
           line-height: 22px;
           font-size: 14px;
           color: #1D1D1D;
+          pointer-events: none;
         }
         .remove-tag{
           position: absolute;
@@ -449,6 +461,19 @@ $main: #2cb7ca;
           cursor: pointer;
         }
       }
+      .drag-move-item{
+        // padding: 8px 0;
+        border: 1px solid rgba(0, 0, 0, 0.05);
+        box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.08);
+        // border-radius: 8px;
+        .remove-tag{
+          display: none;
+        }
+      }
+      .drag-init-hide{
+        transition: 0.01s;
+        transform: translateX(-9999px);
+      }
     }
     .classify-function{
       margin-top: 12px;
@@ -565,6 +590,7 @@ $main: #2cb7ca;
   justify-content: center;
   width: 44px;
   height: 44px;
+  pointer-events: none;
   ::before{
     content: ''
   }