调整内容

whychdw

2024-11-26 d780f4b5636dbc6b96a5ca315aab390f1825c2aa

调整内容

 src/api/area.js

New file
@@ -0,0 +1,12 @@
import request from '@/utils/request';

/**
 * 查询所有的区域
 * @returns {*}
 */
export function getAreaTreeApi() {
  return request({
    url: '/areaInf/getAllAreaInf',
    method: 'get'
  });
}

 src/components/HdwTree/index.vue

@@ -1,5 +1,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { getAreaTreeApi } from '@/api/area';
import { formatAreaTree } from '@/utils/tree';

export default defineComponent({
  name: 'HdwTree',
@@ -9,46 +11,34 @@
        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>
@@ -59,6 +49,7 @@
        style="max-width: 600px"
        :data="data"
        :props="defaultProps"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
    />
  </el-scrollbar>

 src/store/modules/user.ts

@@ -1,5 +1,5 @@
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';
@@ -27,45 +27,37 @@
  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);
          resolve();
        }).catch(error => {
          reject(error);
        });
    login():Promise<void> {
      // const { username, password } = userInfo;
      return new Promise((resolve) => {
        setToken('admin');
        resolve();
        // 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.');
          }

          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);
        });
      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;
        this.roles = roles;
        this.name = name;
        this.avatar = avatar;
        this.introduction = introduction;
        resolve(data);
      });
    },


 src/utils/request.js

@@ -2,24 +2,22 @@
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 => {
@@ -42,40 +40,9 @@
   * 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);
  }
);

 src/utils/tree.js

New file
@@ -0,0 +1,31 @@
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);
      }
    }
  }
}

 vite.config.ts

@@ -69,17 +69,7 @@
    ],
    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
    }
  };
});