sync

mock/business.js

@@ -26,9 +26,7 @@ module.exports = [
             { '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': '18', 'businessName': 'bizName8', 'businessCode': 'code8', 'appId': 'appCode8', 'appName': 'appName8' },
-            { 'id': '19', 'businessName': 'bizName9', 'businessCode': 'code9', 'appId': 'appCode9', 'appName': 'appName9' }
+            { 'id': '17', 'businessName': 'bizName7', 'businessCode': 'code7', 'appId': 'appCode7', 'appName': 'appName7' }
           ]
         }
       }

src/views/home/components/BusinessEdit.vue

@@ -27,9 +27,24 @@
               </el-form-item>
             </el-form>
           </div>
-          <draggable :list="allBizData" group="business" class="drag-item-box" :sort="false" filter=".filtered" :set-data="setData">
-            <div v-for="element in allBizData" :key="element.id" class="drag-item">
-              <el-avatar :size="56" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
+          <draggable
+            :list="allBizData"
+            :group="{name: 'business', pull: 'clone', put: false}"
+            :clone="cloneUnique"
+            class="drag-item-box"
+            :sort="false"
+            filter=".filtered"
+            handle=".handle"
+            :set-data="setData"
+          >
+            <div
+              v-for="element in allBizData"
+              :key="element.id"
+              class="drag-item"
+              :class="{'filtered': element.isFavorite}"
+            >
+              <i class="el-icon-plus handle-icon" :class="{'handle': !element.isFavorite}" />
+              <el-avatar :size="56" :src="element.url" />
               <div class="item-content">
                 <div class="item-name">{{ element.businessName }}</div>
                 <div class="item-system">{{ element.appName }}</div>
@@ -85,7 +100,7 @@ export default {
       visible: false,
       // table
       current: 1,
-      size: 20,
+      size: 18,
       pageSizeAll: [10, 20, 50, 100, 200, 500],
       allBizTotal: 0,
       allBizData: [],
@@ -110,6 +125,11 @@ export default {
       myLoading: false
     }
   },
+  computed: {
+    myBizIds() {
+      return this.myBizData.map(item => item.id)
+    }
+  },
   created() {
   },
   methods: {
@@ -149,6 +169,13 @@ export default {
       fetchAllBizList(params).then(response => {
         this.allLoading = false
         if (hasValidRecords(response)) {
+          response.data.records.forEach(item => {
+            if (this.myBizIds.includes(item.id)) {
+              item.isFavorite = true
+            } else {
+              item.isFavorite = false
+            }
+          })
           this.allBizData = response.data.records
           this.allBizTotal = response.data.total
         } else {
@@ -168,6 +195,7 @@ export default {
     },
     getMyBizList() {
       this.myLoading = true
+      this.allLoading = true
       const params = {
         page: 1,
         size: 50,
@@ -182,6 +210,7 @@ export default {
         } else {
           this.myBizData = []
         }
+        this.searchTable()
       }).catch(error => {
         console.log(error)
         this.myLoading = false
@@ -201,19 +230,15 @@ export default {
     open() {
       this.tableData = []
       this.visible = true
-      this.searchTable()
       this.getMyBizList()
     },
     close() {
       this.visible = false
     },
-    viewDetail(content) {
-      this.content = content
-      this.detailVisible = true
-    },
-    closeDetail() {
-      this.content = ''
-      this.detailVisible = false
+    cloneUnique(data) {
+      if (!this.myBizIds.includes(data.id)) {
+        return data
+      }
     },
     setData(dataTransfer) {
       // to avoid Firefox bug
@@ -290,13 +315,29 @@ export default {
   .drag-item {
     width: 206px;
     height: 80px;
-    border: 1px solid #cccccc;
+    border: 1px solid rgba(0,0,0,0.09);
     margin-bottom: 10px;
     margin-right: 20px;
     display: flex;
     align-items: center;
     padding-left: 10px;
     border-radius: 10px;
+    position: relative;
+
+    .handle-icon {
+      display: none;
+      position: absolute;
+      top: -3px;
+      right: -7px;
+      border-radius: 50%;
+      background-color: #FF0000;
+      color: #FFFFFF;
+      cursor: pointer;
+
+      &.handle {
+        display: block;
+      }
+    }
 
     .item-content {
       display: inline-block;
@@ -308,6 +349,16 @@ export default {
         overflow: hidden;
         white-space: nowrap;
       }
+
+      .item-name {
+        font-size: 16px;
+        color: rgba(0,0,0,0.85);
+      }
+
+      .item-system {
+        font-size: 14px;
+        color: rgba(0,0,0,0.45);
+      }
     }
   }
 }