sync

mock/index.js

@@ -4,9 +4,11 @@ const { param2Obj } = require('./utils')
 const user = require('./user')
 const message = require('./message')
 const business = require('./business')
+const system = require('./system')
 
 const mocks = [
   ...business,
+  ...system,
   ...message,
   ...user
 ]

mock/system.js

@@ -0,0 +1,56 @@
+module.exports = [
+  {
+    url: '/app/search',
+    type: 'post',
+    response: config => {
+      return {
+        code: 200,
+        msg: 'success',
+        data: {
+          total: 44,
+          records: [
+            { 'id': '0', 'businessName': 'bizName0', 'businessCode': 'code0', 'appId': 'appCode0', 'systemName': 'systemName1' },
+            { 'id': '1', 'businessName': 'bizName1', 'businessCode': 'code1', 'appId': 'appCode1', 'systemName': 'systemName2' },
+            { 'id': '2', 'businessName': 'bizName2', 'businessCode': 'code2', 'appId': 'appCode2', 'systemName': 'systemName3' },
+            { 'id': '3', 'businessName': 'bizName3', 'businessCode': 'code3', 'appId': 'appCode3', 'systemName': 'systemName4' },
+            { 'id': '4', 'businessName': 'bizName4', 'businessCode': 'code4', 'appId': 'appCode4', 'systemName': 'systemName5' },
+            { 'id': '5', 'businessName': 'bizName5', 'businessCode': 'code5', 'appId': 'appCode5', 'systemName': 'systemName6' },
+            { 'id': '6', 'businessName': 'bizName6', 'businessCode': 'code6', 'appId': 'appCode6', 'systemName': 'systemName7' },
+            { 'id': '7', 'businessName': 'bizName7', 'businessCode': 'code7', 'appId': 'appCode7', 'systemName': 'systemName8' },
+            { 'id': '8', 'businessName': 'bizName8', 'businessCode': 'code8', 'appId': 'appCode8', 'systemName': 'systemName9' },
+            { 'id': '9', 'businessName': 'bizName9', 'businessCode': 'code9', 'appId': 'appCode9', 'systemName': 'systemName10' },
+            { 'id': '10', 'businessName': 'bizName10', 'businessCode': 'code0', 'appId': 'appCode0', 'systemName': 'systemName11' },
+            { 'id': '11', 'businessName': 'bizName11', 'businessCode': 'code1', 'appId': 'appCode1', 'systemName': 'systemName12' },
+            { 'id': '12', 'businessName': 'bizName12', 'businessCode': 'code2', 'appId': 'appCode2', 'systemName': 'systemName13' },
+            { 'id': '13', 'businessName': 'bizName13', 'businessCode': 'code3', 'appId': 'appCode3', 'systemName': 'systemName14' },
+            { 'id': '14', 'businessName': 'bizName14', 'businessCode': 'code4', 'appId': 'appCode4', 'systemName': 'systemName15' }
+          ]
+        }
+      }
+    }
+  },
+  {
+    url: '/app/list',
+    type: 'post',
+    response: config => {
+      return {
+        code: 200,
+        msg: 'success',
+        data: {
+          total: 44,
+          records: [
+            { 'id': '0', 'businessName': 'bizName0', 'businessCode': 'code0', 'appId': 'appCode0', 'systemName': 'systemName0' },
+            { 'id': '3', 'businessName': 'bizName3', 'businessCode': 'code3', 'appId': 'appCode3', 'systemName': 'systemName3' },
+            { 'id': '4', 'businessName': 'bizName4', 'businessCode': 'code4', 'appId': 'appCode4', 'systemName': 'systemName4' },
+            { 'id': '5', 'businessName': 'bizName5', 'businessCode': 'code5', 'appId': 'appCode5', 'systemName': 'systemName5' },
+            { 'id': '16', 'businessName': 'bizName16', 'businessCode': 'code6', 'appId': 'appCode6', 'systemName': 'systemName16' },
+            { 'id': '9', 'businessName': 'bizName9', 'businessCode': 'code9', 'appId': 'appCode9', 'systemName': 'systemName9' },
+            { 'id': '10', 'businessName': 'bizName10', 'businessCode': 'code0', 'appId': 'appCode0', 'systemName': 'systemName10' },
+            { 'id': '17', 'businessName': 'bizName17', 'businessCode': 'code1', 'appId': 'appCode1', 'systemName': 'systemName17' },
+            { 'id': '18', 'businessName': 'bizName18', 'businessCode': 'code2', 'appId': 'appCode2', 'systemName': 'systemName18' }
+          ]
+        }
+      }
+    }
+  }
+]

src/api/system.js

@@ -1,9 +1,25 @@
 import request from '@/utils/request'
 
-export function fetchSystemList(data) {
+export function fetchAllSystemList(data) {
+  return request({
+    url: 'app/search',
+    method: 'post',
+    data: data
+  })
+}
+
+export function fetchMySystemList(data) {
   return request({
     url: 'app/list',
     method: 'post',
     data: data
   })
 }
+
+export function pushSaveFavorite(data) {
+  return request({
+    url: 'app/save',
+    method: 'post',
+    data: data
+  })
+}

src/views/home/components/SystemEdit.vue

@@ -12,14 +12,14 @@
     >
       <div class="drag-container">
         <div v-loading="allLoading" class="drag-left">
-          <div class="item-filter">
-            list
-            <el-input v-model="systemName" size="mini" clearable class="filter-item-input">
+          <div class="list-filter">
+            <span class="filter-title">list</span>
+            <el-input v-model="formData.systemName" size="small" clearable>
               <el-button slot="append" icon="el-icon-search" />
             </el-input>
           </div>
           <draggable
-            v-model="allBizData"
+            v-model="allListData"
             :group="{name: 'system', pull: 'clone', put: false}"
             :clone="clone"
             :sort="false"
@@ -29,46 +29,44 @@
             class="drag-item-box"
           >
             <div
-              v-for="(element, index) in allBizData"
+              v-for="(element, index) in allListData"
               :key="element.id"
               class="drag-item"
               :class="{'filtered': element.isFavorite}"
             >
               <i class="el-icon-plus handle-icon" @click="clickAddItem(index)" />
-              <el-avatar :size="56" :src="element.url" />
-              <div class="item-name">{{ element.businessName }}</div>
+              <el-avatar :size="56" :src="element.icon" />
+              <div class="item-system">{{ element.systemName }}</div>
             </div>
           </draggable>
-          <div v-if="allBizTotal > 0" class="page">
+          <div v-if="allListTotal > 0" class="page">
             <el-pagination
               small
               layout="prev, pager, next"
               :current-page="current"
-              :total="allBizTotal"
+              :total="allListTotal"
               :page-size="size"
               @current-change="handleCurrentChange"
             />
           </div>
         </div>
         <div v-loading="myLoading" class="drag-right">
-          <div class="drag-title">My
-            <div class="item-tip">tip</div>
+          <div class="list-filter">
+            <span class="filter-title">My</span>
+            <span class="filter-tip">tip</span>
           </div>
           <el-scrollbar class="my-scroll-box">
             <draggable
-              :list="myBizData"
+              :list="myListData"
               group="system"
               class="drag-item-box"
               :set-data="setData"
               @add="addItem"
             >
-              <div v-for="(element, index) in myBizData" :key="element.id" class="drag-item">
+              <div v-for="(element, index) in myListData" :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 class="item-system">{{ element.systemName }}</div>
               </div>
             </draggable>
           </el-scrollbar>
@@ -85,7 +83,7 @@
 import draggable from 'vuedraggable'
 
 import { hasValidRecords } from '@/utils/convert'
-import { fetchAllBizList, fetchMyBizList, pushSaveFavorite } from '@/api/biz'
+import { fetchAllSystemList, fetchMySystemList, pushSaveFavorite } from '@/api/system'
 
 export default {
   components: {
@@ -98,25 +96,14 @@ export default {
       visible: false,
       // table
       current: 1,
-      size: 15,
-      allBizTotal: 0,
-      allBizData: [],
-      myBizData: [
-        { businessName: 'bizleft4', id: 4 },
-        { businessName: 'bizleft5', id: 5 },
-        { businessName: 'bizleft6', id: 6 },
-        { businessName: 'bizleft7', id: 7 }
-      ],
+      size: 16,
+      allListTotal: 0,
+      allListData: [],
+      myListData: [],
       // filter
       formData: {
-        systemNumber: '',
-        systemName: '',
-        businessName: '',
-        businessNumber: ''
+        systemName: ''
       },
-      // select data
-      systemData: [],
-      businessData: [],
       // others
       loading: false,
       allLoading: false,
@@ -124,8 +111,8 @@ export default {
     }
   },
   computed: {
-    myBizIds() {
-      return this.myBizData.map(item => item.id)
+    myListIds() {
+      return this.myListData.map(item => item.id)
     }
   },
   created() {
@@ -135,25 +122,25 @@ export default {
     handleSizeChange(val) {
       this.current = 1
       this.size = val
-      this.getAllBizList()
+      this.getAllListData()
     },
     // 切换第几页
     handleCurrentChange(val) {
       this.current = val
-      this.getAllBizList()
+      this.getAllListData()
     },
     // 重置搜索项
     resetTable(formName) {
       this.$refs[formName].resetFields()
-      this.getAllBizList()
+      this.getAllListData()
     },
     // 点击搜索按钮
     searchTable() {
       this.current = 1
-      this.getAllBizList()
+      this.getAllListData()
     },
     // 获取table数据
-    getAllBizList() {
+    getAllListData() {
       this.allLoading = true
       const params = {
         page: this.current,
@@ -164,21 +151,21 @@ export default {
           businessName: this.formData.businessName
         }
       }
-      fetchAllBizList(params).then(response => {
+      fetchAllSystemList(params).then(response => {
         this.allLoading = false
         if (hasValidRecords(response)) {
           response.data.records.forEach(item => {
-            if (this.myBizIds.includes(item.id)) {
+            if (this.myListIds.includes(item.id)) {
               item.isFavorite = true
             } else {
               item.isFavorite = false
             }
           })
-          this.allBizData = response.data.records
-          this.allBizTotal = response.data.total
+          this.allListData = response.data.records
+          this.allListTotal = response.data.total
         } else {
-          this.allBizData = []
-          this.allBizTotal = 0
+          this.allListData = []
+          this.allListTotal = 0
         }
       }).catch(error => {
         console.log(error)
@@ -191,7 +178,7 @@ export default {
         })
       })
     },
-    getMyBizList() {
+    getMyListData() {
       this.myLoading = true
       this.allLoading = true
       const params = {
@@ -201,17 +188,18 @@ export default {
           delFlag: 0
         }
       }
-      fetchMyBizList(params).then(response => {
+      fetchMySystemList(params).then(response => {
         this.myLoading = false
         if (hasValidRecords(response)) {
-          this.myBizData = response.data.records
+          this.myListData = response.data.records
         } else {
-          this.myBizData = []
+          this.myListData = []
         }
         this.searchTable()
       }).catch(error => {
         console.log(error)
         this.myLoading = false
+        this.allLoading = false
         this.$message.error({
           type: 'error',
           duration: 0,
@@ -222,7 +210,7 @@ export default {
     },
     saveFavorite() {
       this.loading = true
-      pushSaveFavorite(this.myBizData).then(res => {
+      pushSaveFavorite(this.myListData).then(res => {
         this.loading = false
         this.visible = false
         this.$message({
@@ -244,10 +232,10 @@ export default {
      * 加载dialog
      */
     open() {
-      this.allBizData = []
-      this.myBizData = []
+      this.allListData = []
+      this.myListData = []
       this.visible = true
-      this.getMyBizList()
+      this.getMyListData()
     },
     close() {
       this.visible = false
@@ -256,18 +244,18 @@ export default {
       return { ...item }
     },
     checkMove(evt) {
-      return !this.myBizIds.includes(evt.draggedContext.element.id)
+      return !this.myListIds.includes(evt.draggedContext.element.id)
     },
     addItem(evt) {
-      this.allBizData[evt.oldIndex].isFavorite = true
+      this.allListData[evt.oldIndex].isFavorite = true
     },
     clickAddItem(index) {
-      this.myBizData.push({ ...this.allBizData[index] })
-      this.allBizData[index].isFavorite = true
+      this.myListData.push({ ...this.allListData[index] })
+      this.allListData[index].isFavorite = true
     },
     clickRemoveItem(index) {
-      const removed = this.myBizData.splice(index, 1)[0]
-      this.allBizData.forEach(item => {
+      const removed = this.myListData.splice(index, 1)[0]
+      this.allListData.forEach(item => {
         if (item.id === removed.id) {
           item.isFavorite = false
         }
@@ -290,7 +278,7 @@ export default {
   .drag-left, .drag-right {
     width: 50%;
     padding: 0 0 20px 20px;
-    max-height: 540px;
+    max-height: 560px;
   }
 
   .drag-left {
@@ -314,8 +302,8 @@ export default {
 
   .drag-right {
     .my-scroll-box {
-      // 48 = drag-title + item-tip - drag-right.margin-bottom
-      height: calc(100% - 48px);
+      // 48 = filter-title + filter-tip - drag-right.margin-bottom
+      height: calc(100% - 36px);
       margin-top: -2px;
     }
 
@@ -330,28 +318,28 @@ export default {
     }
   }
 
-  .drag-title {
-    font-size: 14px;
-    line-height: 2;
-    height: 28px;
-    color: rgba(0,0,0,0.85);
+  .list-filter {
+    height: 56px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-right: 20px;
+
+    .el-input {
+      width: 250px;
+    }
   }
 
-  .item-filter, .item-tip {
-    height: 40px;
+  .filter-title {
+    font-size: 14px;
+    color: rgba(0,0,0,0.85);
   }
 
-  .item-tip {
+  .filter-tip {
     font-size: 12px;
-    line-height: 40px;
     color: rgba(0,0,0,0.65);
   }
 
-  .filter-item-input {
-    float: right;
-    width: 150px;
-  }
-
   .drag-item-box {
     display: flex;
     flex-wrap: wrap;
@@ -359,7 +347,7 @@ export default {
 
   .drag-item {
     width: 150px;
-    height: 100px;
+    height: 110px;
     border: 1px solid rgba(0,0,0,0.09);
     margin-bottom: 10px;
     margin-right: 20px;
@@ -393,13 +381,11 @@ export default {
     }
 
     .item-system {
+      text-align: center;
       width: 130px;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
-    }
-
-    .item-system {
       font-size: 14px;
       color: rgba(0,0,0,0.45);
     }