|
|
@@ -5,23 +5,27 @@
|
|
|
<span>{{ title }}</span>
|
|
|
<el-button style="float: right; padding: 3px 0" type="text" size="medium" @click="showEdit">编辑</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">
|
|
|
+ <el-carousel v-loading="loading" class="system-content" :autoplay="false" arrow="never" trigger="click">
|
|
|
+ <el-carousel-item v-for="(page, index) in carouselData" :key="'carousel_' + index">
|
|
|
<div class="system-box">
|
|
|
- <div v-for="item in page" :key="item.id" class="system-item-box" @click="jumpTo(item.link)">
|
|
|
- <el-avatar :size="56" fit="fill" />
|
|
|
- <div class="system-title">{{ item.name }}</div>
|
|
|
+ <div v-for="item in page" :key="item.id" class="system-item-box" @click="jumpTo(item.url)">
|
|
|
+ <el-avatar :size="56" fit="fill" :src="item.icon" />
|
|
|
+ <div class="system-title">{{ item.systemName }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</el-card>
|
|
|
- <system-edit ref="systemEdit" />
|
|
|
+ <system-edit ref="systemEdit" :title="title.startsWith('我的') ? title.substr(2) : title" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import SystemEdit from './components/SystemEdit'
|
|
|
+
|
|
|
+import { fetchMySystemList } from '@/api/system'
|
|
|
+import { isNull, hasValidRecords } from '@/utils/convert'
|
|
|
+
|
|
|
export default {
|
|
|
components: { SystemEdit },
|
|
|
props: {
|
|
|
@@ -36,28 +40,15 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- rawData: [
|
|
|
- { id: '1', code: '1', name: 'System1', link: 'https://www.baidu.com', icon: 'icon-1' },
|
|
|
- { id: '2', code: '2', name: 'System2', link: 'https://www.baidu.com', icon: 'icon-2' },
|
|
|
- { id: '3', code: '3', name: 'System3', link: 'https://www.baidu.com', icon: 'icon-3' },
|
|
|
- { id: '4', code: '4', name: 'System4', link: 'https://www.baidu.com', icon: 'icon-4' },
|
|
|
- { id: '5', code: '5', name: 'System5', link: 'https://www.baidu.com', icon: 'icon-5' },
|
|
|
- { id: '6', code: '6', name: 'System6', link: 'https://www.baidu.com', icon: 'icon-6' },
|
|
|
- { id: '7', code: '7', name: 'System7', link: 'https://www.baidu.com', icon: 'icon-7' },
|
|
|
- { id: '8', code: '8', name: 'System8', link: 'https://www.baidu.com', icon: 'icon-8' },
|
|
|
- { id: '9', code: '9', name: 'System9', link: 'https://www.baidu.com', icon: 'icon-9' },
|
|
|
- { id: '10', code: '10', name: 'System10', link: 'https://www.baidu.com', icon: 'icon-10' },
|
|
|
- { id: '11', code: '11', name: 'System11', link: 'https://www.baidu.com', icon: 'icon-11' },
|
|
|
- { id: '12', code: '12', name: 'System12', link: 'https://www.baidu.com', icon: 'icon-12' },
|
|
|
- { id: '13', code: '13', name: 'System13', link: 'https://www.baidu.com', icon: 'icon-13' }
|
|
|
- ],
|
|
|
- carouselData2: []
|
|
|
+ rawData: [],
|
|
|
+ carouselData2: [],
|
|
|
+ loading: false
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
carouselData() {
|
|
|
const result = []
|
|
|
- if (this.rawData && this.rawData.length > 0) {
|
|
|
+ if (!isNull(this.rawData)) {
|
|
|
const len = this.rawData.length
|
|
|
const page = Math.ceil(len / this.pageSize)
|
|
|
for (var i = 0; i < page; i++) {
|
|
|
@@ -68,24 +59,41 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- // this.formatData()
|
|
|
+ this.getMySystemData()
|
|
|
},
|
|
|
methods: {
|
|
|
- formatData() {
|
|
|
- this.carouselData2 = []
|
|
|
- if (this.rawData && this.rawData.length > 0) {
|
|
|
- const len = this.rawData.length
|
|
|
- const page = Math.ceil(len / this.pageSize)
|
|
|
- for (var i = 0; i < page; i++) {
|
|
|
- this.carouselData2.push(this.rawData.slice(i * this.pageSize, (i + 1) * this.pageSize))
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
jumpTo(link) {
|
|
|
window.open(link, '_blank')
|
|
|
},
|
|
|
showEdit() {
|
|
|
this.$refs.systemEdit.open()
|
|
|
+ },
|
|
|
+ getMySystemData() {
|
|
|
+ this.loading = true
|
|
|
+ const params = {
|
|
|
+ page: 1,
|
|
|
+ size: 100,
|
|
|
+ params: {
|
|
|
+ delFlag: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ fetchMySystemList(params).then(response => {
|
|
|
+ this.loading = false
|
|
|
+ if (hasValidRecords(response)) {
|
|
|
+ this.rawData = response.data.records
|
|
|
+ } else {
|
|
|
+ this.rawData = []
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ console.log(error)
|
|
|
+ this.loading = false
|
|
|
+ this.$message.error({
|
|
|
+ type: 'error',
|
|
|
+ duration: 0,
|
|
|
+ showClose: true,
|
|
|
+ message: '获取我的应用出错：' + error.message
|
|
|
+ })
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -113,20 +121,24 @@ export default {
|
|
|
.system-box {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
- width: 790px !important;
|
|
|
- margin: 0 auto;
|
|
|
+ // justify-content: space-around;
|
|
|
+ align-content: space-around;
|
|
|
+ // width: 790px !important;
|
|
|
+ // margin: 0 auto;
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px 0;
|
|
|
|
|
|
.system-item-box {
|
|
|
- width: 150px;
|
|
|
- height: 110px;
|
|
|
+ width: 170px;
|
|
|
+ height: 130px;
|
|
|
border: 1px solid rgba(0,0,0,0.09);
|
|
|
border-radius: 10px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- margin: 5px 0;
|
|
|
+ margin: 5px calc(10% - 85px);
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
.system-title {
|
|
|
font-size: 16px;
|
|
|
@@ -138,5 +150,26 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ @media only screen and (min-width: 1680px) {
|
|
|
+ .system-item-box {
|
|
|
+ width: 170px !important;
|
|
|
+ margin: 5px calc(10% - 85px) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media only screen and (min-width: 1440px) and (max-width: 1679px) {
|
|
|
+ .system-item-box {
|
|
|
+ width: 140px !important;
|
|
|
+ margin: 5px calc(10% - 70px) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media only screen and (max-width: 1439px) {
|
|
|
+ .system-item-box {
|
|
|
+ width: 100px !important;
|
|
|
+ margin: 5px calc(10% - 50px) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
caiaa