sync

mock/dict.js

@@ -0,0 +1,22 @@
+module.exports = [
+  // user login
+  {
+    url: '/sysDict/type/system_type',
+    type: 'get',
+    response: config => {
+      return {
+        code: 200,
+        msg: 'success',
+        data: {
+          total: 43,
+          records: [
+            { 'id': 1, 'value': '1', 'label': 'Type1', 'sort': 1 },
+            { 'id': 2, 'value': '2', 'label': 'Type2', 'sort': 2 },
+            { 'id': 3, 'value': '3', 'label': 'Type3', 'sort': 3 },
+            { 'id': 4, 'value': '4', 'label': 'Type4', 'sort': 4 }
+          ]
+        }
+      }
+    }
+  }
+]

mock/index.js

@@ -5,8 +5,10 @@ const user = require('./user')
 const message = require('./message')
 const business = require('./business')
 const system = require('./system')
+const dict = require('./dict')
 
 const mocks = [
+  ...dict,
   ...business,
   ...system,
   ...message,

src/components/Kanban/index.vue

@@ -1,99 +0,0 @@
-<template>
-  <div class="board-column">
-    <div class="board-column-header">
-      {{ headerText }}
-    </div>
-    <draggable
-      :list="list"
-      v-bind="$attrs"
-      class="board-column-content"
-      :set-data="setData"
-    >
-      <div v-for="element in list" :key="element.id" class="board-item">
-        {{ element.name }} {{ element.id }}
-      </div>
-    </draggable>
-  </div>
-</template>
-
-<script>
-import draggable from 'vuedraggable'
-
-export default {
-  name: 'DragKanbanDemo',
-  components: {
-    draggable
-  },
-  props: {
-    headerText: {
-      type: String,
-      default: 'Header'
-    },
-    options: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    list: {
-      type: Array,
-      default() {
-        return []
-      }
-    }
-  },
-  methods: {
-    setData(dataTransfer) {
-      // to avoid Firefox bug
-      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-      dataTransfer.setData('Text', '')
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.board-column {
-  min-width: 300px;
-  min-height: 100px;
-  height: auto;
-  overflow: hidden;
-  background: #f0f0f0;
-  border-radius: 3px;
-
-  .board-column-header {
-    height: 50px;
-    line-height: 50px;
-    overflow: hidden;
-    padding: 0 20px;
-    text-align: center;
-    background: #333;
-    color: #fff;
-    border-radius: 3px 3px 0 0;
-  }
-
-  .board-column-content {
-    height: auto;
-    overflow: hidden;
-    border: 10px solid transparent;
-    min-height: 60px;
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: column;
-    align-items: center;
-
-    .board-item {
-      cursor: pointer;
-      width: 100%;
-      height: 64px;
-      margin: 5px 0;
-      background-color: #fff;
-      text-align: left;
-      line-height: 54px;
-      padding: 5px 10px;
-      box-sizing: border-box;
-      box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
-    }
-  }
-}
-</style>
-

src/layout/components/AppMain.vue

@@ -29,10 +29,20 @@ export default {
   width: 100%;
   position: relative;
   overflow: hidden;
+
+  &>div:not(.home-container) {
+    margin: 10px 0 0 10px;
+  }
 }
 
 .hasTagsView {
+  .app-main {
+    // 34px: tag height
+    min-height: calc(100vh - #{$headerHeight} - 34px);
+  }
+
   .fixed-header+.app-main {
+    min-height: calc(100vh - #{$headerHeight});
     padding-top: 34px;
   }
 }

src/views/home/Business.vue

@@ -3,7 +3,7 @@
     <el-card>
       <div slot="header" class="clearfix">
         <span>我的业务</span>
-        <el-button style="float: right; padding: 3px 0" type="text">编辑</el-button>
+        <el-button style="float: right; padding: 3px 0" type="text" @click="showEdit">编辑</el-button>
       </div>
 
       <el-scrollbar class="business-content">

src/views/home/System.vue

@@ -3,7 +3,7 @@
     <el-card>
       <div slot="header" class="clearfix">
         <span>Test</span>
-        <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
+        <el-button style="float: right; padding: 3px 0" type="text" @click="showEdit">More<i class="el-icon-arrow-right" /></el-button>
       </div>
       <el-carousel class="system-content" :autoplay="false" arrow="never" trigger="click">
         <el-carousel-item v-for="(page,index) in carouselData" :key="index">
@@ -16,19 +16,18 @@
         </el-carousel-item>
       </el-carousel>
     </el-card>
+    <system-edit ref="systemEdit" />
   </div>
 </template>
 
 <script>
+import SystemEdit from './components/SystemEdit'
 export default {
+  components: { SystemEdit },
   props: {
     pageSize: {
       type: Number,
       default: 5
-    },
-    module: {
-      type: String,
-      default: ''
     }
   },
   data() {
@@ -80,6 +79,9 @@ export default {
     },
     jumpTo(link) {
       window.open(link, '_blank')
+    },
+    showEdit() {
+      this.$refs.systemEdit.open()
     }
   }
 }

src/views/home/Test.vue

@@ -2,31 +2,23 @@
   <div>
     <el-card>
       <div slot="header" class="clearfix">
-        <span>消息提醒</span>
+        <span>Test</span>
         <el-button style="float: right; padding: 3px 0" type="text" @click="showList">More<i class="el-icon-arrow-right" /></el-button>
       </div>
       <div>
         aaa
       </div>
     </el-card>
-    <message-list ref="messageList" />
   </div>
 </template>
 
 <script>
-import MessageList from './components/MessageList'
 
 export default {
-  components: {
-    MessageList
-  },
   data() {
     return {}
   },
   methods: {
-    showList() {
-      this.$refs.messageList.open()
-    }
   }
 }
 </script>

src/views/system/index.vue

@@ -1,78 +1,181 @@
 <template>
-  <div class="app-container">
-    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
+  <div class="system-container">
+    <el-card class="type-box">
+      <div slot="header" class="clearfix">
+        <span>Test</span>
+      </div>
+      <el-radio-group v-model="formData.appType">
+        <el-radio-button label="">All</el-radio-button>
+        <el-radio-button v-for="item in typeData" :key="item.id" :label="item.value">{{ item.label }}</el-radio-button>
+      </el-radio-group>
+    </el-card>
+    <div class="system-box">
+      <div class="list-filter">
+        <el-form ref="filterForm" :model="formData" inline label-width="100px">
+          <el-form-item label="name">
+            <el-input v-model="formData.systemName" class="filter-item" clearable />
+          </el-form-item>
+          <el-form-item label="dept">
+            <el-input v-model="formData.deptName" class="filter-item" clearable />
+          </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-form-item>
+        </el-form>
+      </div>
+      <div>
+        <div class="item-button">
+          <el-button type="primary">Add</el-button>
+          <el-button type="primary">Upload</el-button>
+        </div>
+        <div class="system-item-box">
+          <div v-for="item in tableData" :key="item.id">
+            <div>
+              <span>{{ item.appType }}</span>
+              <el-button type="text">detail</el-button>
+              <el-button type="text">Edit</el-button>
+              <el-button type="text">Delete</el-button>
+            </div>
+          </div>
+        </div>
 
-    <el-tree
-      ref="tree2"
-      :data="data2"
-      :props="defaultProps"
-      :filter-node-method="filterNode"
-      class="filter-tree"
-      default-expand-all
-    />
+      </div>
+    </div>
 
   </div>
 </template>
 
 <script>
-export default {
+import { fetchDictData } from '@/api/dict'
+import { fetchAllSystemList } from '@/api/system'
+
+import { hasValidRecords } from '@/utils/convert'
 
+export default {
   data() {
     return {
-      filterText: '',
-      data2: [{
-        id: 1,
-        label: 'Level one 1',
-        children: [{
-          id: 4,
-          label: 'Level two 1-1',
-          children: [{
-            id: 9,
-            label: 'Level three 1-1-1'
-          }, {
-            id: 10,
-            label: 'Level three 1-1-2'
-          }]
-        }]
-      }, {
-        id: 2,
-        label: 'Level one 2',
-        children: [{
-          id: 5,
-          label: 'Level two 2-1'
-        }, {
-          id: 6,
-          label: 'Level two 2-2'
-        }]
-      }, {
-        id: 3,
-        label: 'Level one 3',
-        children: [{
-          id: 7,
-          label: 'Level two 3-1'
-        }, {
-          id: 8,
-          label: 'Level two 3-2'
-        }]
-      }],
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      }
+      // type
+      dictType: 'system_type',
+      typeData: [],
+      // table
+      current: 1,
+      size: 20,
+      total: 0,
+      pageSizeAll: [10, 20, 50, 100, 200, 500],
+      tableData: [],
+      // filter
+      formData: {
+        appType: null,
+        systemName: '',
+        deptName: ''
+      },
+      // others
+      loading: false
     }
   },
-  watch: {
-    filterText(val) {
-      this.$refs.tree2.filter(val)
-    }
+  created() {
+    this.getTypeData()
+    this.searchTable()
   },
-
   methods: {
-    filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
+    // 改变每页显示条数
+    handleSizeChange(val) {
+      this.current = 1
+      this.size = val
+      this.getTablelist()
+    },
+    // 切换第几页
+    handleCurrentChange(val) {
+      this.current = val
+      this.getTablelist()
+    },
+    // 重置搜索项
+    resetTable(formName) {
+      this.$refs[formName].resetFields()
+      this.getTablelist()
+    },
+    // 点击搜索按钮
+    searchTable() {
+      this.current = 1
+      this.getTablelist()
+    },
+    // 获取table数据
+    getTablelist() {
+      this.loading = true
+      const params = {
+        current: this.current,
+        size: this.size,
+        params: {
+          delFlag: 0,
+          systemName: this.formData.systemName,
+          deptName: this.formData.deptName
+        }
+      }
+      fetchAllSystemList(params).then(response => {
+        this.loading = false
+        if (hasValidRecords(response)) {
+          this.tableData = response.data.records
+          this.total = response.data.total
+        } else {
+          this.tableData = []
+          this.total = 0
+        }
+      }).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 (hasValidRecords(response)) {
+          this.typeData = response.data.records
+        } else {
+          this.typeData = []
+        }
+      }).catch(error => {
+        console.log(error)
+        this.$message.error({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: ': ' + error.message
+        })
+      })
     }
   }
 }
 </script>
 
+<style lang="scss" scoped>
+.system-container {
+  display: flex;
+
+  .type-box, .system-box {
+  }
+  .type-box {
+    width: 300px;
+    margin-right: 5px;
+
+    .el-radio-button {
+      display: block;
+    }
+
+    ::v-deep .el-radio-button__inner {
+      width: 100%;
+      border: 0;
+      text-align: left;
+    }
+  }
+  .system-box {
+    width: 100%;
+  }
+}
+</style>
+