| @@ -6,39 +6,45 @@ | |||
| <script> | |||
| export default { | |||
| name: 'App', | |||
| computed: { | |||
| authenticated() { | |||
| return localStorage.getItem('username') != null; | |||
| } | |||
| }, | |||
| mounted() { | |||
| if (!this.authenticated) { | |||
| this.$router.replace({name: "login"}); | |||
| } else { | |||
| this.$router.replace({name: "asset_group"}); | |||
| } | |||
| this.setAuthenticated(); | |||
| }, | |||
| methods: { | |||
| setAuthenticated(user) { | |||
| if (user) { | |||
| localStorage.setItem('username', user.username); | |||
| localStorage.setItem('level', user.level); | |||
| localStorage.setItem('department', user.department); | |||
| this.$router.replace({ name: 'asset_group' }); | |||
| } else { | |||
| this.logout(); | |||
| if (user.level === null) { | |||
| this.logout(); | |||
| } else { | |||
| localStorage.setItem('username', user.username); | |||
| localStorage.setItem('level', user.level); | |||
| localStorage.setItem('department', user.department); | |||
| } | |||
| } | |||
| const level = localStorage.getItem('level'); | |||
| switch (level) { | |||
| case '3': { | |||
| this.$router.replace({name: 'serverlist'}); | |||
| break; | |||
| } | |||
| case null: { | |||
| this.$router.replace({name: 'login'}); | |||
| break; | |||
| } | |||
| default: { | |||
| this.$router.replace({name: 'asset_group'}); | |||
| } | |||
| } | |||
| }, | |||
| logout() { | |||
| this.$axios.get('/account/logout').then((resp) => { | |||
| console.log(resp); | |||
| }) | |||
| .catch(function (resp) { | |||
| console.log(resp); | |||
| }); | |||
| // this.$axios.get('/account/logout').then((resp) => { | |||
| // console.log(resp); | |||
| // }) | |||
| // .catch(function (resp) { | |||
| // console.log(resp); | |||
| // }); | |||
| localStorage.removeItem('username'); | |||
| localStorage.removeItem('roles'); | |||
| this.$router.replace({name: "login"}); | |||
| localStorage.removeItem('department'); | |||
| localStorage.removeItem('level'); | |||
| } | |||
| } | |||
| } | |||
| @@ -91,6 +91,7 @@ | |||
| <p>{{item.level === '0' ? '超級管理員' : ''}}</p> | |||
| <p>{{item.level === '1' ? '一般管理員' : ''}}</p> | |||
| <p>{{item.level === '2' ? '一般使用者' : ''}}</p> | |||
| <p>{{item.level === '3' ? '稽核人員' : ''}}</p> | |||
| </template> | |||
| <template v-slot:item.actions="{ item }"> | |||
| <div class="d-flex"> | |||
| @@ -188,7 +189,8 @@ | |||
| progress: false, | |||
| levelSelectItem: [{'text': '超級管理員', 'value': '0'}, | |||
| {'text': '一般管理員', 'value': '1'}, | |||
| {'text': '一般使用者', 'value': '2'}], | |||
| {'text': '一般使用者', 'value': '2'}, | |||
| {'text': '稽核人員', 'value': '3'}], | |||
| } | |||
| }, | |||
| async mounted() { | |||
| @@ -193,23 +193,31 @@ | |||
| }, | |||
| }, | |||
| mounted() { | |||
| // if () | |||
| this.getRoutes(); | |||
| }, | |||
| methods: { | |||
| logout() { | |||
| this.$emit("authenticated", null); | |||
| this.$emit("authenticated", { | |||
| 'username': null, | |||
| 'department': null, | |||
| 'level': null | |||
| }); | |||
| }, | |||
| async getRoutes() { | |||
| this.addFeatureByLevel(localStorage.getItem('level')); | |||
| this.$axios.get('/routes').then((resp) => { | |||
| resp.data.data.forEach((item) => { | |||
| let route = {'text': '', 'route': ''}; | |||
| route.text = item.descript; | |||
| route.route = `/inventory/${item.tablename}`; | |||
| this.items.push(route); | |||
| const level = localStorage.getItem('level'); | |||
| this.addFeatureByLevel(level); | |||
| if (level !== '3') { | |||
| this.$axios.get('/routes').then((resp) => { | |||
| resp.data.data.forEach((item) => { | |||
| let route = {'text': '', 'route': ''}; | |||
| route.text = item.descript; | |||
| route.route = `/inventory/${item.tablename}`; | |||
| this.items.push(route); | |||
| }); | |||
| }); | |||
| }); | |||
| } | |||
| }, | |||
| addFeatureByLevel(level) { | |||
| //超級管理員 | |||
| @@ -221,6 +229,9 @@ | |||
| if (level === '1') { | |||
| this.items.push({text: '資訊資產群組', route: '/asset_group'}); | |||
| } | |||
| if (level === '3') { | |||
| this.items = [{'text': '資訊資產清冊', 'route': '/serverlist'}]; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| @@ -83,15 +83,6 @@ | |||
| } | |||
| }, | |||
| methods: { | |||
| logintest() { | |||
| console.log('asd'); | |||
| this.$emit('authenticated', | |||
| { | |||
| 'username':'aaa', | |||
| 'department': 'aaa', | |||
| 'level': '1' | |||
| }); | |||
| }, | |||
| login() { | |||
| this.loginError = false; | |||
| const _this = this; | |||
| @@ -106,7 +97,6 @@ | |||
| 'department': json.data.department, | |||
| 'level': json.data.level | |||
| }); | |||
| _this.$router.replace({ name: 'asset_group' }); | |||
| } else { | |||
| _this.message = json.message; | |||
| _this.loginError = true; | |||
| @@ -115,7 +105,6 @@ | |||
| _this.message = 'The username and / or password is incorrect'; | |||
| _this.loginError = true; | |||
| } | |||
| console.log(resp); | |||
| }) | |||
| .catch(function (response) { | |||
| //handle error | |||
| @@ -0,0 +1,186 @@ | |||
| <template> | |||
| <v-container fluid> | |||
| <v-dialog | |||
| v-model="progress" | |||
| persistent | |||
| width="300" | |||
| > | |||
| <v-card | |||
| color="primary" | |||
| dark | |||
| > | |||
| <v-card-text> | |||
| 查詢中... | |||
| <v-progress-linear | |||
| indeterminate | |||
| color="white" | |||
| class="mb-0" | |||
| ></v-progress-linear> | |||
| </v-card-text> | |||
| </v-card> | |||
| </v-dialog> | |||
| <v-toolbar flat > | |||
| <v-toolbar-title class="title font-weight-bold" v-if="result !== null">資訊資產清冊</v-toolbar-title> | |||
| <v-divider | |||
| v-if="result !== null" | |||
| class="mx-4" | |||
| inset | |||
| vertical | |||
| /> | |||
| <v-row justify="start" dense class="ma-0 pa-0"> | |||
| <v-col cols="4"> | |||
| <v-text-field v-model="text" dense outlined prepend-inner-icon="mdi-magnify" hide-details rounded v-on:keyup.enter="search"/> | |||
| </v-col> | |||
| </v-row> | |||
| <!-- <v-btn--> | |||
| <!-- v-if="result !== null"--> | |||
| <!-- color="white"--> | |||
| <!-- class="primary mr-5"--> | |||
| <!-- @click="exportFile"--> | |||
| <!-- icon--> | |||
| <!-- >--> | |||
| <!-- <v-icon >mdi-file-export-outline</v-icon>--> | |||
| <!-- </v-btn>--> | |||
| </v-toolbar> | |||
| <v-tabs | |||
| v-if="result !== null" | |||
| v-model='currentTab' | |||
| centered | |||
| fixed-tabs | |||
| background-color='grey lighten-4' | |||
| show-arrows | |||
| > | |||
| <!-- <v-tab--> | |||
| <!-- v-for='(item, index) in assertGroup'--> | |||
| <!-- :key='index'--> | |||
| <!-- class=' font-weight-bold'--> | |||
| <!-- >--> | |||
| <!-- <v-icon small>{{ item.text }}</v-icon>--> | |||
| <!-- </v-tab>--> | |||
| <div | |||
| v-for='(item, index) in assertGroup' | |||
| :key='index' | |||
| class="d-flex"> | |||
| <v-tab | |||
| v-if="result[item.value]" | |||
| class=' font-weight-bold' | |||
| > | |||
| <v-icon small>{{ item.text }}</v-icon> | |||
| </v-tab> | |||
| </div> | |||
| <v-tabs-items v-model='currentTab'> | |||
| <div | |||
| v-for='(item, index) in assertGroup' | |||
| :key='index' | |||
| class="flex-fill"> | |||
| <v-tab-item | |||
| v-if="result[item.value]" | |||
| > | |||
| <v-data-table v-if="result[item.value]" :headers="allHeaders[item.value]" :items="result[item.value]" > | |||
| </v-data-table> | |||
| </v-tab-item> | |||
| </div> | |||
| </v-tabs-items> | |||
| </v-tabs> | |||
| </v-container> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name: '', | |||
| data() { | |||
| return { | |||
| text: '', | |||
| result: null, | |||
| headers: {}, | |||
| currentTab: 0, | |||
| assertGroup: [], | |||
| allHeaders: {}, | |||
| progress: false | |||
| } | |||
| }, | |||
| mounted() { | |||
| this.getTabs(); | |||
| this.search(); | |||
| }, | |||
| watch: { | |||
| currentTab() { | |||
| // this.tablename = this.assertGroup[this.currentTab].value; | |||
| // console.log(this.tablename); | |||
| // this.getHeaders(); | |||
| }, | |||
| result() { | |||
| Object.keys(this.result).forEach((key) => { | |||
| this.getHeaders(key); | |||
| }) | |||
| }, | |||
| allHeaders() { | |||
| this.$forceUpdate(); | |||
| } | |||
| }, | |||
| methods: { | |||
| async getTabs() { | |||
| await this.$axios.get(`/assert/assertGroups`).then((resp) => { | |||
| this.assertGroup = []; | |||
| resp.data.data.forEach((item) => { | |||
| let header = {'text': null, 'value': null}; | |||
| header.text = item.descript; | |||
| header.value = item.tablename; | |||
| this.assertGroup.push(header); | |||
| }); | |||
| }); | |||
| }, | |||
| async getHeaders(key) { | |||
| await this.$axios.get(`/headers?tablename=${key}`) | |||
| .then(async (resp) => { | |||
| const headers = []; | |||
| await resp.data.data.forEach((item) => { | |||
| let header = {'text': null, 'value': null}; | |||
| header.text = item.descript; | |||
| header.value = item.colname; | |||
| headers.push(header); | |||
| }); | |||
| this.allHeaders[key] = headers; | |||
| }); | |||
| }, | |||
| search() { | |||
| this.progress = true; | |||
| // const pattern = new RegExp('[\\]"\';]'); | |||
| this.text = this.text.replaceAll('"', '').replaceAll('\'', '').replaceAll(';', '').replaceAll('\\', ''); | |||
| this.$axios.get(`/search/search?text=${this.text}`).then((resp) => { | |||
| Object.keys(resp.data.data).forEach(async (key) => { | |||
| await this.getHeaders(key); | |||
| }); | |||
| setTimeout(() => {this.result = resp.data.data; this.progress = false;}, 500); | |||
| // this.result = resp.data.data; | |||
| }); | |||
| }, | |||
| exportFile() { | |||
| let yes = confirm('確定匯出'); | |||
| if (yes) { | |||
| this.$axios.post(`/search/exportFileAllGroup`, this.result, {responseType: 'blob'}) | |||
| .then((resp) => { | |||
| console.log(resp.headers['filename']); | |||
| const blob = new Blob([resp.data], {type: "application/vnd.ms-excel;charset=utf-8"}); | |||
| const reader = new FileReader(); | |||
| reader.readAsDataURL(blob); | |||
| reader.onload = (e) => { | |||
| const a = document.createElement('a'); | |||
| a.download = resp.headers['filename']; | |||
| a.href = e.target.result; | |||
| document.body.appendChild(a); | |||
| a.click(); | |||
| document.body.removeChild(a); | |||
| }; | |||
| } | |||
| ); | |||
| } | |||
| }, | |||
| }, | |||
| } | |||
| </script> | |||
| @@ -5,6 +5,7 @@ import Home from '../components/Home'; | |||
| import AssetGroup from '../components/AssetGroup'; | |||
| import Inventory from '../components/Inventory'; | |||
| import Search from '../components/Search'; | |||
| import ServerList from '../components/ServerList'; | |||
| import account from '../components/AccountManage'; | |||
| Vue.use(Router); | |||
| @@ -35,6 +36,11 @@ export const constantRoutes = [ | |||
| component: Search | |||
| }, | |||
| { | |||
| path: 'serverlist', | |||
| name: 'serverlist', | |||
| component: ServerList | |||
| }, | |||
| { | |||
| path: 'account', | |||
| name: 'account', | |||
| component: account | |||