New file |
| | |
| | | import request from '@/utils/request'; |
| | | |
| | | /** |
| | | * 查询所有的区域 |
| | | * @returns {*} |
| | | */ |
| | | export function getAreaTreeApi() { |
| | | return request({ |
| | | url: '/areaInf/getAllAreaInf', |
| | | method: 'get' |
| | | }); |
| | | } |
| | |
| | | <script lang="ts"> |
| | | import { defineComponent } from 'vue'; |
| | | import { getAreaTreeApi } from '@/api/area'; |
| | | import { formatAreaTree } from '@/utils/tree'; |
| | | |
| | | export default defineComponent({ |
| | | name: 'HdwTree', |
| | |
| | | children: 'children', |
| | | label: 'label' |
| | | }, |
| | | data: [ |
| | | { |
| | | label: '河南省', |
| | | children: [ |
| | | { |
| | | label: '驻马店市', |
| | | children: [ |
| | | { |
| | | label: '上蔡县' |
| | | }, |
| | | { |
| | | label: '确山县' |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | label: '湖北省', |
| | | children: [ |
| | | { |
| | | label: '武汉市', |
| | | children: [ |
| | | { |
| | | label: '东西湖区' |
| | | }, |
| | | { |
| | | label: '青山区' |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | data: [] |
| | | }; |
| | | }, |
| | | methods: { |
| | | handleNodeClick(data) { |
| | | console.log(data); |
| | | }, |
| | | async getAreaTree() { |
| | | try { |
| | | const res = await getAreaTreeApi(); |
| | | let data = []; |
| | | if (res.code === 1 && res.data) { |
| | | data = res.data2; |
| | | } |
| | | const treeList = []; |
| | | for (let i = 0; i < data.length; i++) { |
| | | formatAreaTree(data[i], treeList); |
| | | } |
| | | console.log(data); |
| | | console.log(treeList); |
| | | this.data = treeList; |
| | | } catch (e) { |
| | | console.log(e); |
| | | } |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.getAreaTree(); |
| | | } |
| | | }); |
| | | </script> |
| | |
| | | style="max-width: 600px" |
| | | :data="data" |
| | | :props="defaultProps" |
| | | :expand-on-click-node="false" |
| | | @node-click="handleNodeClick" |
| | | /> |
| | | </el-scrollbar> |
| | |
| | | import { defineStore } from 'pinia'; |
| | | import { login as apiLogin, logout as apiLogout, getInfo as apiGetInfo } from '@/api/user'; |
| | | import { logout as apiLogout, getInfo as apiGetInfo } from '@/api/user'; |
| | | import { getToken, setToken, removeToken } from '@/utils/auth'; |
| | | import router, { resetRouter } from '@/router'; |
| | | import tagsViewStore from './tagsView'; |
| | |
| | | getters: {}, |
| | | actions: { |
| | | // user login |
| | | login(userInfo):Promise<void> { |
| | | const { username, password } = userInfo; |
| | | return new Promise((resolve, reject) => { |
| | | apiLogin({ username: username.trim(), password: password }).then(response => { |
| | | const { data } = response; |
| | | this.token = data.token; |
| | | setToken(data.token); |
| | | login():Promise<void> { |
| | | // const { username, password } = userInfo; |
| | | return new Promise((resolve) => { |
| | | setToken('admin'); |
| | | resolve(); |
| | | }).catch(error => { |
| | | reject(error); |
| | | }); |
| | | // apiLogin({ username: username.trim(), password: password }).then(response => { |
| | | // const { data } = response; |
| | | // this.token = data.token; |
| | | // setToken(data.token); |
| | | // resolve(); |
| | | // }).catch(error => { |
| | | // reject(error); |
| | | // }); |
| | | }); |
| | | }, |
| | | |
| | | // get user info |
| | | getInfo() { |
| | | return new Promise((resolve, reject) => { |
| | | apiGetInfo(this.token).then(response => { |
| | | const { data } = response; |
| | | |
| | | if (!data) { |
| | | reject('Verification failed, please Login again.'); |
| | | } |
| | | |
| | | return new Promise((resolve) => { |
| | | const data = { |
| | | roles: ['admin'], |
| | | introduction: 'I am a super administrator', |
| | | avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', |
| | | name: 'Super Admin' |
| | | }; |
| | | const { roles, name, avatar, introduction } = data; |
| | | |
| | | // roles must be a non-empty array |
| | | if (!roles || roles.length <= 0) { |
| | | reject('getInfo: roles must be a non-null array!'); |
| | | } |
| | | |
| | | this.roles = roles; |
| | | this.name = name; |
| | | this.avatar = avatar; |
| | | this.introduction = introduction; |
| | | resolve(data); |
| | | }).catch(error => { |
| | | reject(error); |
| | | }); |
| | | }); |
| | | }, |
| | | |
| | |
| | | import store from '@/store'; |
| | | import { getToken } from '@/utils/auth'; |
| | | |
| | | // 生产环境和开发环境切换请求地址 |
| | | let baseURL = 'http://localhost:8100/bl/'; |
| | | if (process.env.NODE_ENV === 'production') { |
| | | baseURL = location.protocol + '//' + location.host + '/bl/'; |
| | | } |
| | | |
| | | // create an axios instance |
| | | const service = axios.create({ |
| | | baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url |
| | | // withCredentials: true, // send cookies when cross-domain requests |
| | | timeout: 5000 // request timeout |
| | | baseURL: baseURL, // url = base url + request url |
| | | withCredentials: true, // send cookies when cross-domain requests |
| | | timeout: 10000 // request timeout |
| | | }); |
| | | |
| | | // request interceptor |
| | | service.interceptors.request.use( |
| | | config => { |
| | | // do something before request is sent |
| | | |
| | | if (store.user().token) { |
| | | // let each request carry token |
| | | // ['X-Token'] is a custom headers key |
| | | // please modify it according to the actual situation |
| | | config.headers['X-Token'] = getToken(); |
| | | } |
| | | return config; |
| | | }, |
| | | error => { |
| | |
| | | * You can also judge the status by HTTP Status Code |
| | | */ |
| | | response => { |
| | | const res = response.data; |
| | | |
| | | // if the custom code is not 20000, it is judged as an error. |
| | | if (res.code !== 20000) { |
| | | ElMessage({ |
| | | message: res.message || 'Error', |
| | | type: 'error', |
| | | duration: 5 * 1000 |
| | | }); |
| | | |
| | | // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired; |
| | | if (res.code === 50008 || res.code === 50012 || res.code === 50014) { |
| | | // to re-login |
| | | ElMessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', { |
| | | confirmButtonText: 'Re-Login', |
| | | cancelButtonText: 'Cancel', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | store.user().resetToken(); |
| | | location.reload(); |
| | | }); |
| | | } |
| | | return Promise.reject(new Error(res.message || 'Error')); |
| | | } else { |
| | | return res; |
| | | } |
| | | return response.data; |
| | | }, |
| | | error => { |
| | | console.log('err' + error); // for debug |
| | | ElMessage({ |
| | | message: error.message, |
| | | type: 'error', |
| | | duration: 5 * 1000 |
| | | }); |
| | | return Promise.reject(error); |
| | | } |
| | | ); |
New file |
| | |
| | | export function formatAreaTree(item, list) { |
| | | if (item.parentId === 0) { |
| | | list.push({ |
| | | label: item.areaName, |
| | | id: item.id, |
| | | data: item, |
| | | children: [] |
| | | }); |
| | | } else { |
| | | let isCurrentChild = false; |
| | | for (let i = 0; i < list.length; i++) { |
| | | const listItem = list[i]; |
| | | if (listItem.id === item.parentId) { |
| | | isCurrentChild = true; |
| | | listItem.children.push({ |
| | | label: item.areaName, |
| | | id: item.id, |
| | | data: item, |
| | | children: [] |
| | | }); |
| | | } |
| | | } |
| | | |
| | | for (let i = 0; i < list.length; i++) { |
| | | const listItem = list[i]; |
| | | if (!isCurrentChild && listItem.children !== 0) { |
| | | formatAreaTree(item, listItem.children); |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | ], |
| | | server: { |
| | | host: 'localhost', |
| | | port: 8001, |
| | | proxy: { |
| | | '/api-test': { |
| | | target: 'https://api.midfar.com/dspt_test/api', |
| | | changeOrigin: true, |
| | | rewrite: (path) => path.replace(/^\/api-test/, ''), |
| | | headers: { |
| | | Cookie: env.VUE_APP_COOKIE |
| | | } |
| | | } |
| | | } |
| | | port: 8001 |
| | | } |
| | | }; |
| | | }); |