sync

mock/business.js

@@ -19,14 +19,11 @@ module.exports = [
             { 'id': '7', 'businessName': 'bizName7', 'businessCode': 'code7', 'appId': 'appCode7', 'appName': 'appName7' },
             { 'id': '8', 'businessName': 'bizName8', 'businessCode': 'code8', 'appId': 'appCode8', 'appName': 'appName8' },
             { 'id': '9', 'businessName': 'bizName9', 'businessCode': 'code9', 'appId': 'appCode9', 'appName': 'appName9' },
-            { 'id': '10', 'businessName': 'bizName0', 'businessCode': 'code0', 'appId': 'appCode0', 'appName': 'appName0' },
-            { 'id': '11', 'businessName': 'bizName1', 'businessCode': 'code1', 'appId': 'appCode1', 'appName': 'appName1' },
-            { 'id': '12', 'businessName': 'bizName2', 'businessCode': 'code2', 'appId': 'appCode2', 'appName': 'appName2' },
-            { 'id': '13', 'businessName': 'bizName3', 'businessCode': 'code3', 'appId': 'appCode3', 'appName': 'appName3' },
-            { 'id': '14', 'businessName': 'bizName4', 'businessCode': 'code4', 'appId': 'appCode4', 'appName': 'appName4' },
-            { 'id': '15', 'businessName': 'bizName5', 'businessCode': 'code5', 'appId': 'appCode5', 'appName': 'appName5' },
-            { 'id': '16', 'businessName': 'bizName6', 'businessCode': 'code6', 'appId': 'appCode6', 'appName': 'appName6' },
-            { 'id': '17', 'businessName': 'bizName7', 'businessCode': 'code7', 'appId': 'appCode7', 'appName': 'appName7' }
+            { 'id': '10', 'businessName': 'bizName10', 'businessCode': 'code0', 'appId': 'appCode0', 'appName': 'appName0' },
+            { 'id': '11', 'businessName': 'bizName11', 'businessCode': 'code1', 'appId': 'appCode1', 'appName': 'appName1' },
+            { 'id': '12', 'businessName': 'bizName12', 'businessCode': 'code2', 'appId': 'appCode2', 'appName': 'appName2' },
+            { 'id': '13', 'businessName': 'bizName13', 'businessCode': 'code3', 'appId': 'appCode3', 'appName': 'appName3' },
+            { 'id': '14', 'businessName': 'bizName14', 'businessCode': 'code4', 'appId': 'appCode4', 'appName': 'appName4' }
           ]
         }
       }
@@ -42,12 +39,15 @@ module.exports = [
         data: {
           total: 44,
           records: [
-            { 'id': '1', 'businessName': 'bizName1', 'businessCode': 'code1', 'appId': 'appCode1', 'appName': 'appName1' },
-            { 'id': '2', 'businessName': 'bizName2', 'businessCode': 'code2', 'appId': 'appCode2', 'appName': 'appName2' },
+            { 'id': '0', 'businessName': 'bizName0', 'businessCode': 'code0', 'appId': 'appCode0', 'appName': 'appName0' },
+            { 'id': '3', 'businessName': 'bizName3', 'businessCode': 'code3', 'appId': 'appCode3', 'appName': 'appName3' },
             { 'id': '4', 'businessName': 'bizName4', 'businessCode': 'code4', 'appId': 'appCode4', 'appName': 'appName4' },
             { 'id': '5', 'businessName': 'bizName5', 'businessCode': 'code5', 'appId': 'appCode5', 'appName': 'appName5' },
-            { 'id': '8', 'businessName': 'bizName8', 'businessCode': 'code8', 'appId': 'appCode8', 'appName': 'appName8' },
-            { 'id': '9', 'businessName': 'bizName9', 'businessCode': 'code9', 'appId': 'appCode9', 'appName': 'appName9' }
+            { 'id': '16', 'businessName': 'bizName16', 'businessCode': 'code6', 'appId': 'appCode6', 'appName': 'appName6' },
+            { 'id': '9', 'businessName': 'bizName9', 'businessCode': 'code9', 'appId': 'appCode9', 'appName': 'appName9' },
+            { 'id': '10', 'businessName': 'bizName10', 'businessCode': 'code0', 'appId': 'appCode0', 'appName': 'appName0' },
+            { 'id': '17', 'businessName': 'bizName17', 'businessCode': 'code1', 'appId': 'appCode1', 'appName': 'appName1' },
+            { 'id': '18', 'businessName': 'bizName18', 'businessCode': 'code2', 'appId': 'appCode2', 'appName': 'appName2' }
           ]
         }
       }

src/api/biz.js

@@ -15,3 +15,11 @@ export function fetchMyBizList(data) {
     data: data
   })
 }
+
+export function pushSaveFavorite(data) {
+  return request({
+    url: 'business/save',
+    method: 'post',
+    data: data
+  })
+}

src/styles/index.scss

@@ -195,6 +195,7 @@ aside {
 .home-more-dialog {
   width: 70%;
   min-width: 1200px;
+  margin-top: 5vh !important;
 
   .el-table td {
     padding: 6px 0;
@@ -203,6 +204,7 @@ aside {
 
 .home-biz-dialog {
   width: 1400px;
+  margin-top: 5vh !important;
 
   .el-dialog__header {
     border-bottom: 1px solid #d8dbdb;

src/views/home/components/BusinessEdit.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
     <el-dialog
+      v-loading="loading"
       :visible.sync="visible"
-      :close-on-press-escape="true"
+      :close-on-press-escape="false"
       :close-on-click-modal="false"
-      lock-scroll
+      :show-close="false"
       append-to-body
       custom-class="home-biz-dialog"
       title="My"
-      @close="close"
     >
       <div class="drag-container">
         <div v-loading="allLoading" class="drag-left">
@@ -28,22 +28,22 @@
             </el-form>
           </div>
           <draggable
-            :list="allBizData"
+            v-model="allBizData"
             :group="{name: 'business', pull: 'clone', put: false}"
-            :clone="cloneUnique"
-            class="drag-item-box"
+            :clone="clone"
             :sort="false"
-            filter=".filtered"
-            handle=".handle"
+            :move="checkMove"
             :set-data="setData"
+            filter=".filtered"
+            class="drag-item-box"
           >
             <div
-              v-for="element in allBizData"
+              v-for="(element, index) in allBizData"
               :key="element.id"
               class="drag-item"
               :class="{'filtered': element.isFavorite}"
             >
-              <i class="el-icon-plus handle-icon" :class="{'handle': !element.isFavorite}" />
+              <i class="el-icon-plus handle-icon" @click="clickAddItem(index)" />
               <el-avatar :size="56" :src="element.url" />
               <div class="item-content">
                 <div class="item-name">{{ element.businessName }}</div>
@@ -65,20 +65,29 @@
         <div v-loading="myLoading" class="drag-right">
           <div class="drag-title">My</div>
           <div class="item-tip">tip</div>
-          <draggable :list="myBizData" group="business" class="drag-item-box" :set-data="setData">
-            <div v-for="element in myBizData" :key="element.id" class="drag-item">
-              <el-avatar :size="56" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
-              <div class="item-content">
-                <div class="item-name">{{ element.businessName }}</div>
-                <div class="item-system">{{ element.appName }}</div>
+          <el-scrollbar class="my-scroll-box">
+            <draggable
+              :list="myBizData"
+              group="business"
+              class="drag-item-box"
+              :set-data="setData"
+              @add="addItem"
+            >
+              <div v-for="(element, index) in myBizData" :key="element.id" class="drag-item">
+                <i class="el-icon-minus handle-icon" @click="clickRemoveItem(index)" />
+                <el-avatar :size="56" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
+                <div class="item-content">
+                  <div class="item-name">{{ element.businessName }}</div>
+                  <div class="item-system">{{ element.appName }}</div>
+                </div>
               </div>
-            </div>
-          </draggable>
+            </draggable>
+          </el-scrollbar>
         </div>
       </div>
       <div slot="footer">
-        <el-button size="small">Cancel</el-button>
-        <el-button type="primary" size="small">Confirm</el-button>
+        <el-button size="small" @click="close">Cancel</el-button>
+        <el-button type="primary" size="small" @click="saveFavorite">Confirm</el-button>
       </div>
     </el-dialog>
   </div>
@@ -86,8 +95,8 @@
 <script>
 import draggable from 'vuedraggable'
 
-import { hasValidRecords, formatDictData } from '@/utils/convert'
-import { fetchAllBizList, fetchMyBizList } from '@/api/biz'
+import { hasValidRecords } from '@/utils/convert'
+import { fetchAllBizList, fetchMyBizList, pushSaveFavorite } from '@/api/biz'
 
 export default {
   components: {
@@ -100,8 +109,7 @@ export default {
       visible: false,
       // table
       current: 1,
-      size: 18,
-      pageSizeAll: [10, 20, 50, 100, 200, 500],
+      size: 15,
       allBizTotal: 0,
       allBizData: [],
       myBizData: [
@@ -121,6 +129,7 @@ export default {
       systemData: [],
       businessData: [],
       // others
+      loading: false,
       allLoading: false,
       myLoading: false
     }
@@ -222,37 +231,58 @@ export default {
         })
       })
     },
-    getSelectData() {
+    saveFavorite() {
+      this.loading = true
+      pushSaveFavorite(this.myBizData).then(res => {
+        this.loading = false
+        this.visible = false
+        this.$message({
+          type: 'success',
+          message: 'Save Successfully!'
+        })
+      }).catch(error => {
+        console.log(error)
+        this.loading = false
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: error.message
+        })
+      })
     },
     /**
-     * 加载附件界面
+     * 加载dialog
      */
     open() {
-      this.tableData = []
+      this.allBizData = []
+      this.myBizData = []
       this.visible = true
       this.getMyBizList()
     },
     close() {
       this.visible = false
     },
-    cloneUnique(data) {
-      if (!this.myBizIds.includes(data.id)) {
-        return data
-      }
+    clone(item) {
+      return { ...item }
+    },
+    checkMove(evt) {
+      return !this.myBizIds.includes(evt.draggedContext.element.id)
+    },
+    addItem(evt) {
+      this.allBizData[evt.oldIndex].isFavorite = true
+    },
+    clickAddItem(index) {
+      this.myBizData.push({ ...this.allBizData[index] })
+      this.allBizData[index].isFavorite = true
+    },
+    clickRemoveItem(index) {
+      this.myBizData.splice(index, 1)
     },
     setData(dataTransfer) {
       // to avoid Firefox bug
       // Detail see : https://github.com/RubaXa/Sortable/issues/1012
       dataTransfer.setData('Text', '')
-    },
-    formatDictData(row, column, cellValue) {
-      let data
-      if (column.property === 'messageType') {
-        data = this.typeData
-      } else if (column.property === 'readStatus') {
-        data = this.statusData
-      }
-      return formatDictData(data, cellValue)
     }
   }
 }
@@ -266,6 +296,7 @@ export default {
   .drag-left, .drag-right {
     width: 50%;
     padding: 0 0 20px 20px;
+    max-height: 540px;
   }
 
   .drag-left {
@@ -287,9 +318,28 @@ export default {
     }
   }
 
+  .drag-right {
+    .my-scroll-box {
+      // 48 = drag-title + item-tip - drag-right.margin-bottom
+      height: calc(100% - 48px);
+      margin-top: -2px;
+    }
+
+    ::v-deep {
+      .el-scrollbar__wrap{
+        overflow-x: hidden;
+        padding-top: 2px;
+      }
+      .el-scrollbar__bar.is-horizontal {
+        display: none;
+      }
+    }
+  }
+
   .drag-title {
     font-size: 14px;
     line-height: 2;
+    height: 28px;
     color: rgba(0,0,0,0.85);
   }
 
@@ -323,9 +373,11 @@ export default {
     padding-left: 10px;
     border-radius: 10px;
     position: relative;
+    cursor: move;
+    cursor: -webkit-grabbing;
 
     .handle-icon {
-      display: none;
+      display: inline-block;
       position: absolute;
       top: -3px;
       right: -7px;
@@ -333,9 +385,14 @@ export default {
       background-color: #FF0000;
       color: #FFFFFF;
       cursor: pointer;
+      z-index: 100;
+    }
+
+    &.filtered {
+      cursor: pointer;
 
-      &.handle {
-        display: block;
+      .el-icon-plus {
+        display: none;
       }
     }