sync

mock/system.js

@@ -1,4 +1,15 @@
 module.exports = [
+  {
+    url: '/app/uninstall/',
+    type: 'get',
+    response: config => {
+      return {
+        code: 200,
+        msg: '',
+        data: 1
+      }
+    }
+  },
   {
     url: '/app/search',
     type: 'post',
@@ -9,22 +20,22 @@ module.exports = [
         data: {
           total: 44,
           records: [
-            { 'id': '0', 'systemName': 'system1', 'appType': 1, 'deptName': 'dept0', 'url': 'http://system1.com', 'icon': 'el-icon-plus' },
-            { 'id': '1', 'systemName': 'system2', 'appType': 2, 'deptName': 'dept1', 'url': 'http://system2.com', 'icon': 'el-icon-plus' },
-            { 'id': '2', 'systemName': 'system3', 'appType': 3, 'deptName': 'dept2', 'url': 'http://system3.com', 'icon': 'el-icon-plus' },
-            { 'id': '3', 'systemName': 'system4', 'appType': 4, 'deptName': 'dept3', 'url': 'http://system4.com', 'icon': 'el-icon-plus' },
-            { 'id': '4', 'systemName': 'system5', 'appType': 1, 'deptName': 'dept4', 'url': 'http://system5.com', 'icon': 'el-icon-plus' },
-            { 'id': '5', 'systemName': 'system6', 'appType': 2, 'deptName': 'dept5', 'url': 'http://system6.com', 'icon': 'el-icon-plus' },
-            { 'id': '6', 'systemName': 'system7', 'appType': 4, 'deptName': 'dept6', 'url': 'http://system7.com', 'icon': 'el-icon-plus' },
-            { 'id': '7', 'systemName': 'system8', 'appType': 4, 'deptName': 'dept7', 'url': 'http://system8.com', 'icon': 'el-icon-plus' },
-            { 'id': '8', 'systemName': 'system9', 'appType': 3, 'deptName': 'dept8', 'url': 'http://system9.com', 'icon': 'el-icon-plus' },
-            { 'id': '9', 'systemName': 'system10', 'appType': 4, 'deptName': 'dept9', 'url': 'http://system10.com', 'icon': 'el-icon-plus' },
-            { 'id': '10', 'systemName': 'system11', 'appType': 1, 'deptName': 'dept10', 'url': 'http://system11.com', 'icon': 'el-icon-plus' },
-            { 'id': '11', 'systemName': 'system12', 'appType': 1, 'deptName': 'dept11', 'url': 'http://system12.com', 'icon': 'el-icon-plus' },
-            { 'id': '12', 'systemName': 'system13', 'appType': 3, 'deptName': 'dept12', 'url': 'http://system13.com', 'icon': 'el-icon-plus' },
-            { 'id': '13', 'systemName': 'system14', 'appType': 2, 'deptName': 'dept13', 'url': 'http://system14.com', 'icon': 'el-icon-plus' },
-            { 'id': '14', 'systemName': 'system15', 'appType': 4, 'deptName': 'dept14', 'url': 'http://system15.com', 'icon': 'el-icon-plus' },
-            { 'id': '15', 'systemName': 'system16', 'appType': 4, 'deptName': 'dept14', 'url': 'http://system15.com', 'icon': 'el-icon-plus' }
+            { 'id': '0', 'appType': 1, 'systemName': 'system1', 'systemNumber': 'code0', 'shortName': 'sys1', 'deptName': 'dept0', 'url': 'http://system1.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' },
+            { 'id': '1', 'appType': 2, 'systemName': 'system2', 'systemNumber': 'code1', 'shortName': 'sys2', 'deptName': 'dept1', 'url': 'http://system2.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' },
+            { 'id': '2', 'appType': 3, 'systemName': 'system3', 'systemNumber': 'code2', 'shortName': 'sys3', 'deptName': 'dept2', 'url': 'http://system3.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' },
+            { 'id': '3', 'appType': 4, 'systemName': 'system4', 'systemNumber': 'code3', 'shortName': 'sys4', 'deptName': 'dept3', 'url': 'http://system4.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' },
+            { 'id': '4', 'appType': 1, 'systemName': 'system5', 'systemNumber': 'code4', 'shortName': 'sys5', 'deptName': 'dept4', 'url': 'http://system5.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' },
+            { 'id': '5', 'appType': 2, 'systemName': 'system6', 'systemNumber': 'code5', 'shortName': 'sys6', 'deptName': 'dept5', 'url': 'http://system6.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' },
+            { 'id': '6', 'appType': 4, 'systemName': 'system7', 'systemNumber': 'code6', 'shortName': 'sys7', 'deptName': 'dept6', 'url': 'http://system7.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' },
+            { 'id': '7', 'appType': 4, 'systemName': 'system8', 'systemNumber': 'code7', 'shortName': 'sys8', 'deptName': 'dept7', 'url': 'http://system8.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' },
+            { 'id': '8', 'appType': 3, 'systemName': 'system9', 'systemNumber': 'code8', 'shortName': 'sys9', 'deptName': 'dept8', 'url': 'http://system9.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' },
+            { 'id': '9', 'appType': 4, 'systemName': 'system10', 'systemNumber': 'code9', 'shortName': 'sys10', 'deptName': 'dept9', 'url': 'http://system10.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' },
+            { 'id': '10', 'appType': 1, 'systemName': 'system11', 'systemNumber': 'code10', 'shortName': 'sys11', 'deptName': 'dept10', 'url': 'http://system11.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' },
+            { 'id': '11', 'appType': 1, 'systemName': 'system12', 'systemNumber': 'code11', 'shortName': 'sys12', 'deptName': 'dept11', 'url': 'http://system12.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' },
+            { 'id': '12', 'appType': 3, 'systemName': 'system13', 'systemNumber': 'code12', 'shortName': 'sys13', 'deptName': 'dept12', 'url': 'http://system13.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' },
+            { 'id': '13', 'appType': 2, 'systemName': 'system14', 'systemNumber': 'code13', 'shortName': 'sys14', 'deptName': 'dept13', 'url': 'http://system14.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' },
+            { 'id': '14', 'appType': 4, 'systemName': 'system15', 'systemNumber': 'code14', 'shortName': 'sys15', 'deptName': 'dept14', 'url': 'http://system15.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' },
+            { 'id': '15', 'appType': 4, 'systemName': 'system16', 'systemNumber': 'code15', 'shortName': 'sys16', 'deptName': 'dept14', 'url': 'http://system15.com', 'activeFlag': 1, 'icon': 'el-icon-plus', 'policeCategory': 'A1' }
           ]
         }
       }
@@ -40,15 +51,15 @@ module.exports = [
         data: {
           total: 44,
           records: [
-            { 'id': '0', 'systemName': 'systemName', 'businessCode': 'code0', 'appId': 'appCode0', 'systemName': 'systemName0' },
-            { 'id': '3', 'systemName': 'systemName', 'businessCode': 'code3', 'appId': 'appCode3', 'systemName': 'systemName3' },
-            { 'id': '4', 'systemName': 'systemName', 'businessCode': 'code4', 'appId': 'appCode4', 'systemName': 'systemName4' },
-            { 'id': '5', 'systemName': 'systemName', 'businessCode': 'code5', 'appId': 'appCode5', 'systemName': 'systemName5' },
-            { 'id': '16', 'systemName': 'systemName', 'businessCode': 'code6', 'appId': 'appCode6', 'systemName': 'systemName16' },
-            { 'id': '9', 'systemName': 'systemName', 'businessCode': 'code9', 'appId': 'appCode9', 'systemName': 'systemName9' },
-            { 'id': '10', 'systemName': 'systemName', 'businessCode': 'code0', 'appId': 'appCode0', 'systemName': 'systemName10' },
-            { 'id': '17', 'systemName': 'systemName', 'businessCode': 'code1', 'appId': 'appCode1', 'systemName': 'systemName17' },
-            { 'id': '18', 'systemName': 'systemName', 'businessCode': 'code2', 'appId': 'appCode2', 'systemName': 'systemName18' }
+            { 'id': '0', 'systemName': 'systemName', 'businessCode': 'code0', 'appId': 'appCode0', 'appName': 'systemName0' },
+            { 'id': '3', 'systemName': 'systemName', 'businessCode': 'code3', 'appId': 'appCode3', 'appName': 'systemName3' },
+            { 'id': '4', 'systemName': 'systemName', 'businessCode': 'code4', 'appId': 'appCode4', 'appName': 'systemName4' },
+            { 'id': '5', 'systemName': 'systemName', 'businessCode': 'code5', 'appId': 'appCode5', 'appName': 'systemName5' },
+            { 'id': '16', 'systemName': 'systemName', 'businessCode': 'code6', 'appId': 'appCode6', 'appName': 'systemName16' },
+            { 'id': '9', 'systemName': 'systemName', 'businessCode': 'code9', 'appId': 'appCode9', 'appName': 'systemName9' },
+            { 'id': '10', 'systemName': 'systemName', 'businessCode': 'code0', 'appId': 'appCode0', 'appName': 'systemName10' },
+            { 'id': '17', 'systemName': 'systemName', 'businessCode': 'code1', 'appId': 'appCode1', 'appName': 'systemName17' },
+            { 'id': '18', 'systemName': 'systemName', 'businessCode': 'code2', 'appId': 'appCode2', 'appName': 'systemName18' }
           ]
         }
       }

src/api/file.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function uploadFile(type, data) {
+  return request({
+    url: `fileMge/upload/${type}`,
+    method: 'post',
+    data: data
+  })
+}

src/api/system.js

@@ -23,3 +23,17 @@ export function pushSaveFavorite(data) {
     data: data
   })
 }
+
+export function pushDeleteSystem(id) {
+  return request({
+    url: `app/delete/${id}`
+  })
+}
+
+export function pushSaveSystem(data) {
+  return request({
+    url: 'app/add',
+    method: 'post',
+    data: data
+  })
+}

src/components/Upload/UploadFile.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="upload-single">
+    <el-upload
+      :ref="refName"
+      :name="aliasName"
+      action=""
+      :http-request="httpRequest"
+      :show-file-list="false"
+    >
+      <el-button icon="el-icon-upload2">{{ btnText }}</el-button>
+    </el-upload>
+  </div>
+</template>
+
+<script>
+import { uploadFile } from '@/api/file'
+
+let _uploadId_ = 0
+export default {
+  props: {
+    btnText: {
+      type: String,
+      default: 'Upload'
+    },
+    fileType: {
+      type: String,
+      default: 'default'
+    }
+  },
+  data() {
+    return {
+      uploadedFile: null,
+      refName: '_upload_ref_',
+      aliasName: '_upload_name_'
+    }
+  },
+  created() {
+    this.initConfig()
+  },
+  methods: {
+    initConfig() {
+      if (this.$attrs.name) {
+        this.aliasName = this.$attrs.name
+      }
+      this.refName += _uploadId_
+      this.aliasName += _uploadId_
+      _uploadId_++
+    },
+    onChange(file, fileList) {
+      debugger
+    },
+    httpRequest(options) {
+      const formData = new FormData()
+      formData.append('file', options.file)
+      uploadFile(this.fileType, formData).then(res => {
+        if (options.onSuccess && res.data) {
+          options.onSuccess(res.data.url)
+        } else {
+          options.onError(new Error('Upload Failed: ' + res.data))
+        }
+      }).catch(error => {
+        console.log(error)
+        options.onError(error)
+      })
+    }
+  }
+}
+</script>

src/components/Upload/UploadFiles.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="upload-multi">
+    <el-upload
+      :ref="refName"
+      :name="aliasName"
+      multiple
+      action=""
+      :auto-upload="false"
+      :before-upload="beforeUpload"
+      :http-request="httpRequest"
+      :on-change="onChange"
+      :show-file-list="false"
+    >
+      <slot />
+    </el-upload>
+
+  </div>
+</template>
+<script>
+let _uploadId_ = 0
+export default {
+  props: {
+    upload: {
+      type: Function,
+      default() {}
+    }
+  },
+  data() {
+    return {
+      inputFiles: [],
+      uploadedFiles: [],
+      refName: '_upload_ref_',
+      aliasName: '_upload_name_'
+    }
+  },
+  created() {
+    this.initConfig()
+  },
+  methods: {
+    initConfig() {
+      if (this.$attrs.name) {
+        this.aliasName = this.$attrs.name
+      }
+      this.refName += _uploadId_
+      this.aliasName += _uploadId_
+      _uploadId_++
+    },
+    httpRequest(options) {
+      this.inputFiles = []
+      this.upload(this.uploadedFiles)
+      this.uploadedFiles = []
+      this.$refs[this.refName].clearFiles()
+    },
+    onChange(file, fileList) {
+      if (file.status === 'ready') {
+        this.uploadedFiles.push(file.raw)
+      }
+      if (this.inputFiles.length === 0) {
+        this.inputFiles = Array.from(document.getElementsByName(this.aliasName)[0].files || [])
+      }
+      if (this.inputFiles.length === this.uploadedFiles.length) {
+        this.$refs[this.refName].submit()
+      }
+    },
+    beforeUpload() {
+      return this.inputFiles.length !== 0 && this.uploadedFiles.length === this.inputFiles.length
+    }
+  }
+}
+</script>

src/styles/index.scss

@@ -197,7 +197,8 @@ aside {
 }
 
 .home-more-dialog,
-.home-edit-dialog {
+.home-edit-dialog,
+.main-edit-dialog {
   margin-top: 10vh !important;
 
   .el-dialog__header {

src/utils/request.js

@@ -49,11 +49,11 @@ service.interceptors.response.use(
     if (res.code !== undefined) {
       if (res.code !== 200) {
         Message({
-          message: res.msg || '出错',
+          message: res.msg || res.message || '出错',
           type: 'error',
           duration: 5 * 1000
         })
-        return Promise.reject(new Error(res.msg || '出错'))
+        return Promise.reject(new Error(res.msg || res.message || '出错'))
       }
     }
     return res

src/views/system/components/SystemDetail.vue

@@ -20,7 +20,7 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="Name" required>
-              <el-input v-model="formData.name" />
+              <el-input v-model="formData.systemName" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -69,35 +69,47 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="label" required>
-              <el-upload action="">
-                <el-button icon="el-icon-upload2">Upload</el-button>
-              </el-upload>
+              <upload-file :file-type="system" :on-success="uploadSuccess" />
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
+      <div slot="footer">
+        <el-button @click="close">Cancel</el-button>
+        <el-button v-if="routeType !== 'VIEW'" type="primary" @click="saveSystem">Confirm</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
 <script>
-import { fetchDictData } from '@/api/dict'
-import { isObject, isNull } from '@/utils/convert'
+import { isObject } from '@/utils/convert'
 
-import { pushSaveFavorite } from '@/api/system'
+import { pushSaveSystem } from '@/api/system'
+
+import UploadFile from '@/components/Upload/UploadFile'
 
 export default {
+  components: { UploadFile },
+  props: {
+    typeData: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
   data() {
     return {
       dictSysType: 'system_type',
       // dialog
       visible: false,
+      routeType: '',
       title: 'Edit',
       formData: {},
       // select:
-      typeData: [],
       orgData: [],
       policeCategoryData: [],
-      activeFlagData: [],
+      activeFlagData: [{ value: '1', label: 'Active' }, { value: '0', label: 'Deactive' }],
       // others
       loading: false
     }
@@ -107,28 +119,29 @@ export default {
       return this.myListData.map(item => item.id)
     }
   },
-  created() {
-    console.log('aaaaaaaaaaaaaaaaaaa')
-  },
-  mounted() {
-    console.log('bbbbbbbbbbbbbbb')
-  },
   methods: {
+    // Upload
+    uploadSuccess(data) {
+      console.log(data)
+    },
+    uploadError(error) {
+      console.log(error)
+    },
     /**
      * 加载dialog
      */
     open(type, data) {
+      this.routeType = type
       this.title = type === 'ADD' ? 'Add' : type === 'VIEW' ? 'View' : 'Edit'
       this.formData = isObject(data) ? data : {}
-      this.getTypeData()
       this.visible = true
     },
     close() {
       this.visible = false
     },
-    save() {
+    saveSystem() {
       this.loading = true
-      pushSaveFavorite().then(res => {
+      pushSaveSystem().then(res => {
         this.loading = false
         this.visible = false
         this.$message({
@@ -145,23 +158,6 @@ export default {
           message: error.message
         })
       })
-    },
-    getTypeData() {
-      fetchDictData(this.dictSysType).then(response => {
-        if (!isNull(response.data)) {
-          this.typeData = response.data
-        } else {
-          this.typeData = []
-        }
-      }).catch(error => {
-        console.log(error)
-        this.$message.error({
-          type: 'error',
-          duration: 0,
-          showClose: true,
-          message: '获取应用类型出错: ' + error.message
-        })
-      })
     }
   }
 }

src/views/system/index.vue

@@ -15,7 +15,7 @@
           <el-form-item label="name">
             <el-input v-model="formData.systemName" class="filter-item" clearable />
           </el-form-item>
-          <el-form-item label="deptdeptdept">
+          <el-form-item label="name2">
             <el-input v-model="formData.deptName" class="filter-item" clearable />
           </el-form-item>
           <el-form-item>
@@ -39,41 +39,43 @@
           <el-button>Upload</el-button>
         </el-upload>
       </div>
-      <!-- <el-scrollbar> -->
-      <div class="system-item-box">
-        <div v-for="item in tableData" :key="item.id" class="system-item">
-          <div class="item-header">
-            <div class="item-type">{{ formatDictData(item.appType) }}</div>
-            <div class="item-btn">
-              <el-button type="text" @click="showEdit('VIEW', item)">Detail</el-button>
-              <el-button type="text" @click="showEdit('EDIT', item)">Edit</el-button>
-              <el-button type="text">Delete</el-button>
+      <div v-loading="loading" class="list-box">
+        <el-scrollbar class="list-scrollbar">
+          <div class="system-item-box">
+            <div v-for="item in tableData" :key="item.id" class="system-item">
+              <div class="item-header">
+                <div class="item-type">{{ formatDictData(item.appType) }}</div>
+                <div class="item-btn">
+                  <el-button type="text" @click="showEdit('VIEW', item)">Detail</el-button>
+                  <el-button type="text" @click="showEdit('EDIT', item)">Edit</el-button>
+                  <el-button type="text" @click="deleteSystem(item.id)">Delete</el-button>
+                </div>
+              </div>
+              <div class="item-content">
+                <div class="item-content-left">
+                  <el-avatar :size="56" :src="item.icon" />
+                  <span class="item-name">{{ item.systemName }}</span>
+                </div>
+                <el-button class="item-link" size="small" @click="jumpTo(item.url)">Open</el-button>
+              </div>
+              <div class="item-footer">{{ item.deptName }}</div>
             </div>
           </div>
-          <div class="item-content">
-            <div class="item-content-left">
-              <el-avatar :size="56" :src="item.icon" />
-              <span class="item-name">{{ item.systemName }}</span>
-            </div>
-            <el-button class="item-link" @click="jumpTo(item.url)">Open</el-button>
-          </div>
-          <div class="item-footer">{{ item.deptName }}</div>
+        </el-scrollbar>
+        <div v-if="total > 0" class="page">
+          <el-pagination
+            layout="total, prev, pager, next, jumper"
+            :current-page="current"
+            :total="total"
+            :page-sizes="pageSizeAll"
+            :page-size="size"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
         </div>
       </div>
-      <!-- </el-scrollbar> -->
-      <div v-if="total > 0" class="page">
-        <el-pagination
-          layout="total, prev, pager, next, jumper"
-          :current-page="current"
-          :total="total"
-          :page-sizes="pageSizeAll"
-          :page-size="size"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
-      </div>
     </div>
-    <system-detail ref="systemDetail" />
+    <system-detail ref="systemDetail" :type-data="typeData" />
   </div>
 </template>
 
@@ -81,7 +83,7 @@
 import SystemDetail from './components/SystemDetail'
 
 import { fetchDictData } from '@/api/dict'
-import { fetchAllSystemList } from '@/api/system'
+import { fetchAllSystemList, pushDeleteSystem } from '@/api/system'
 
 import { hasValidRecords, formatDictData, isNull } from '@/utils/convert'
 
@@ -167,6 +169,27 @@ export default {
         })
       })
     },
+    jumpTo(link) {
+      window.open(link, '_blank')
+    },
+    showEdit(type, data) {
+      this.$refs.systemDetail.open(type, data)
+    },
+    deleteSystem(id) {
+      this.loading = true
+      pushDeleteSystem(id).then(res => {
+        this.getTablelist()
+      }).catch(error => {
+        console.log(error)
+        this.loading = false
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: ': ' + error.message
+        })
+      })
+    },
     getTypeData() {
       fetchDictData(this.dictType).then(response => {
         if (!isNull(response.data)) {
@@ -184,12 +207,6 @@ export default {
         })
       })
     },
-    showEdit(type, data) {
-      this.$refs.systemDetail.open(type, data)
-    },
-    jumpTo(link) {
-      window.open(link, '_blank')
-    },
     formatDictData(type) {
       return formatDictData(this.typeData, type)
     }
@@ -198,14 +215,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@/styles/variables.scss";
-
 .system-container {
   display: flex;
 
   .type-box {
-    width: 200px;
-    min-width: 200px;
+    width: 230px;
+    min-width: 230px;
     margin-right: 5px;
 
     .el-radio-group {
@@ -243,9 +258,10 @@ export default {
   }
 
   .system-box {
-    // height: calc(100% - 110px);
     padding-left: 20px;
     background-color: #fff;
+    width: 100%;
+    height: 100%;
 
     .upload-btn {
       display: inline-block;
@@ -259,9 +275,9 @@ export default {
 
     ::v-deep {
       .el-scrollbar__wrap{
-        max-height: 520px;
-        // overflow-x: hidden;
+        overflow-x: hidden;
       }
+
       .el-scrollbar__bar.is-horizontal {
         display: none;
       }
@@ -278,10 +294,18 @@ export default {
     height: 50px;
   }
 
+  .list-box {
+    min-width: 800px;
+    height: calc(100% - 110px);
+  }
+
+  .list-scrollbar {
+    height: calc(100% - 32px);
+  }
+
   .system-item-box {
     display: flex;
     flex-wrap: wrap;
-    height: 664px;
   }
 
   .system-item {