<template>
|
<div>
|
<h3 class="row align-items-center font-weight-bold py-4 mb-4">
|
|
<div class="col py-2 px-5">
|
应用中心
|
<!-- <div class="text-muted text-tiny font-weight-light pt5">用户系统目录</div> -->
|
</div>
|
<!-- <div class="col-sm-6 col-md-4 col-xl-3 mt-4 mt-sm-0">
|
<b-input size="lg" v-model="searchName" placeholder="输入以搜索系统..." />
|
</div> -->
|
</h3>
|
<!-- <hr class="border-light container-m--x my-0"> -->
|
|
<!-- <div class="row row-bordered my-4"> -->
|
<div style="float:right; width:85%;" class="row my-4">
|
<div style="margin:10px 10px"
|
class="col-6 col-sm-4 col-md-3 col-lg-4 col-xl-3"
|
v-for="(iteam,index) in searchList"
|
:key="index"
|
>
|
<a href="javascript:void(0)"
|
@click="openModule(iteam)"
|
:class="iteam.state === 1?'card card-hover text-dark my-2':'card my-2 disabled'"
|
>
|
<div class="text-center " style="background-color:white;height:220px;width:100%">
|
<div class="display-3 img-box">
|
<img
|
style="height:60%;width:60%;margin:50px 0px"
|
:src="`/static/img/application_center_icon/${iteam.state === 1?iteam.module:iteam.module+'_disabled'}.png`"
|
:alt="iteam.module"
|
:onerror="noneImg"
|
>
|
</div>
|
<h5 title="iteam.module">{{iteam.name}}</h5>
|
</div>
|
</a>
|
</div>
|
|
</div>
|
<hr class="border-light container-m--x my-0">
|
</div>
|
</template>
|
|
<script>
|
import { mapActions } from 'vuex'
|
import { getApplicationList } from '@/server/common.js'
|
export default {
|
name: 'application-center',
|
metaInfo: {
|
title: '应用中心'
|
},
|
data() {
|
return {
|
noneImg: 'this.src="' + require('@/assets/img/noneImg.png') + '"',
|
userInfo: this.$store.getters.basicUserInfo,
|
applicationList: [],
|
searchName: ''
|
}
|
},
|
computed: {
|
searchList() {
|
const searchName = this.searchName.replace(/\s/g, '').toUpperCase()
|
if (!searchName) {
|
return this.applicationList
|
}
|
let searchList = []
|
this.applicationList.map(item => {
|
if (
|
item.name.indexOf(searchName) !== -1 ||
|
item.module.indexOf(searchName) !== -1
|
) {
|
searchList.push(item)
|
}
|
})
|
return searchList
|
},
|
newList() {
|
let list = []
|
this.applicationList.map(item => {
|
if (item.state === 1) {
|
list.push(item)
|
}
|
})
|
return list
|
}
|
},
|
methods: {
|
...mapActions(['openNewWindowtab']),
|
/* 获取应用列表 */
|
async getApplicationList() {
|
let result = await getApplicationList({
|
orgId: this.userInfo.orgId,
|
userId: this.userInfo.id
|
})
|
if (result && !result.error) {
|
let nums = new Array(99)
|
for (let mm = 0; mm < result.length; mm++) {
|
if (result[mm].state === 1) {
|
if (nums[result[mm].id] === result[mm].id) {
|
|
} else {
|
this.applicationList.push(result[mm])
|
nums[result[mm].id] = result[mm].id
|
}
|
}
|
}
|
// this.applicationList = result
|
} else if (result && result.message) {
|
this.$toast({
|
message: result.message ? result.message : '报错了',
|
type: 'error'
|
})
|
}
|
},
|
openModule(data) {
|
if (!data || data.state !== 1) {
|
// this.$toast({
|
// message: '这个系统您目前还不能使用!',
|
// type: 'error'
|
// })
|
return false
|
}
|
this.openNewWindowtab(data.url)
|
}
|
},
|
created() {
|
this.getApplicationList()
|
},
|
watch: {
|
newList(val, oldVal) {
|
if (val !== oldVal && val.length === 1) {
|
this.openNewWindowtab({ urlStr: val[0].url, isblank: true })
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.img-box {
|
display: inline-block;
|
width: 140px;
|
height: 140px;
|
img {
|
width: 100%;
|
}
|
}
|
.card.disabled {
|
background: transparent !important;
|
border: 0;
|
color: #a3a4a6 !important;
|
cursor: no-drop;
|
}
|
</style>
|
