sync

mock/business.js

@@ -18,7 +18,17 @@ module.exports = [
             { 'id': '6', 'businessName': 'bizName6', 'businessCode': 'code6', 'appId': 'appCode6', 'appName': 'appName6' },
             { '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': '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': '18', 'businessName': 'bizName8', 'businessCode': 'code8', 'appId': 'appCode8', 'appName': 'appName8' },
+            { 'id': '19', 'businessName': 'bizName9', 'businessCode': 'code9', 'appId': 'appCode9', 'appName': 'appName9' }
           ]
         }
       }

src/styles/index.scss

@@ -199,4 +199,18 @@ aside {
   .el-table td {
     padding: 6px 0;
   }
+}
+
+.home-biz-dialog {
+  width: 1400px;
+
+  .el-dialog__header {
+    border-bottom: 1px solid #d8dbdb;
+  }
+  .el-dialog__footer {
+    border-top: 1px solid #d8dbdb;
+  }
+  .el-dialog__body {
+    padding: 0;
+  }
 }

src/views/home/components/BusinessEdit.vue

@@ -6,33 +6,34 @@
       :close-on-click-modal="false"
       lock-scroll
       append-to-body
-      custom-class="home-more-dialog"
+      custom-class="home-biz-dialog"
       title="My"
       @close="close"
     >
       <div class="drag-container">
         <div v-loading="allLoading" class="drag-left">
-          <div>list</div>
+          <div class="drag-title">list</div>
           <div class="item-filter">
             <el-form ref="filterForm" :model="formData" inline size="mini">
               <el-form-item label="system">
-                <el-input v-model="formData.systemName" clearable />
+                <el-input v-model="formData.systemName" clearable class="filter-item-input" />
               </el-form-item>
               <el-form-item label="business">
-                <!-- <el-select v-model="formData.businessNumber" clearable filterable placeholder="">
-                  <el-option v-for="(item) in businessData" :key="item.businessNumber" :label="item.businessName" :value="item.businessNumber" />
-                </el-select> -->
-                <el-input v-model="formData.businessName" clearable />
+                <el-input v-model="formData.businessName" clearable class="filter-item-input" />
               </el-form-item>
               <el-form-item>
                 <el-button type="primary" @click="searchTable">search</el-button>
-                <el-button type="danger" @click="resetTable('filterForm')">reset</el-button>
+                <!-- <el-button type="danger" @click="resetTable('filterForm')">reset</el-button> -->
               </el-form-item>
             </el-form>
           </div>
-          <draggable :list="allBizData" group="business" class="board-column-content" :set-data="setData">
+          <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">
-              {{ element.businessName }}
+              <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>
           </draggable>
           <div v-if="allBizTotal > 0" class="page">
@@ -47,13 +48,23 @@
           </div>
         </div>
         <div v-loading="myLoading" class="drag-right">
-          <draggable :list="myBizData" group="business" class="board-column-content" :set-data="setData">
+          <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">
-              {{ element.businessName }}
+              <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>
           </draggable>
         </div>
       </div>
+      <div slot="footer">
+        <el-button size="small">Cancel</el-button>
+        <el-button type="primary" size="small">Confirm</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -127,10 +138,13 @@ export default {
     getAllBizList() {
       this.allLoading = true
       const params = {
-        current: this.current,
+        page: this.current,
         size: this.size,
-        systemName: this.formData.systemName,
-        businessName: this.formData.businessName
+        params: {
+          delFlag: 0,
+          appName: this.formData.systemName,
+          businessName: this.formData.businessName
+        }
       }
       fetchAllBizList(params).then(response => {
         this.allLoading = false
@@ -155,8 +169,11 @@ export default {
     getMyBizList() {
       this.myLoading = true
       const params = {
-        current: 1,
-        size: 50
+        page: 1,
+        size: 50,
+        params: {
+          delFlag: 0
+        }
       }
       fetchMyBizList(params).then(response => {
         this.myLoading = false
@@ -219,16 +236,79 @@ export default {
 <style lang="scss" scoped>
 .drag-container {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
 
   .drag-left, .drag-right {
-    width: 40%;
+    width: 50%;
+    padding: 0 0 20px 20px;
+  }
+
+  .drag-left {
+    background-color: #F8F9F9;
+    position: relative;
+
+    .page {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      text-align: center;
+
+      ::v-deep {
+        .btn-prev, .btn-next, .el-pager li{
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  .drag-title {
+    font-size: 14px;
+    line-height: 2;
+    color: rgba(0,0,0,0.85);
+  }
+
+  .item-filter, .item-tip {
+    height: 40px;
+  }
+
+  .item-tip {
+    font-size: 12px;
+    line-height: 40px;
+    color: rgba(0,0,0,0.65);
+  }
+
+  .filter-item-input {
+    width: 150px;
+  }
+
+  .drag-item-box {
+    display: flex;
+    flex-wrap: wrap;
   }
 
   .drag-item {
-    width: 100px;
-    height: 20px;
+    width: 206px;
+    height: 80px;
     border: 1px solid #cccccc;
+    margin-bottom: 10px;
+    margin-right: 20px;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    border-radius: 10px;
+
+    .item-content {
+      display: inline-block;
+      margin-left: 5px;
+
+      .item-name, .item-system {
+        width: 130px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    }
   }
 }
 </style>