1.cookie带到接口上

loulijun2021

2022-06-15 edbe2964e959a334e1d9e12717bf854d89d25c92

1.cookie带到接口上

 .env.development

@@ -2,5 +2,6 @@
ENV = 'development'

# base api
VUE_APP_BASE_API = 'http://121.196.36.24:8001/api/'
VUE_APP_BASE_API = '/api/'
#VUE_APP_BASE_API = 'http://47.96.97.237/API/'


 .env.production

@@ -2,6 +2,5 @@
ENV = 'production'

# base api
#VUE_APP_BASE_API = './'
VUE_APP_BASE_API = 'http://121.196.36.24:8001/api/'
VUE_APP_BASE_API = '/apis/'


 src/api/user.js

@@ -1,5 +1,12 @@
import request from '@/utils/request'

// export function login(data) {
//   return request({
//     url: 'Web/GetUser',
//     method: 'get',
//     params: data
//   })
// }
export function login(data) {
  return request({
    url: 'Login/LoginSave',

 src/layout/components/AppMain.vue

@@ -26,7 +26,7 @@
<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 90px);
  min-height: calc(100vh - 100px);
  width: 100%;
  position: relative;
  overflow: hidden;

 src/layout/components/Navbar.vue

@@ -7,8 +7,13 @@
    <div class="right-menu">
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
          <i class="el-icon-caret-bottom" />
          <!--          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
          <div style="display: flex;align-items: center;margin-top: -5px">
            <div class="headerImg"><i class="el-icon-user" /></div>
            <div class="headerName">{{ username }}</div>
          </div>

          <!--          <i class="el-icon-caret-bottom" />-->
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <!--          <router-link to="/">-->
@@ -22,6 +27,9 @@
          <!--          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">-->
          <!--            <el-dropdown-item>Docs</el-dropdown-item>-->
          <!--          </a>-->
          <!--          <el-dropdown-item @click.native="logout">-->
          <!--            <span style="display:block;">修改密码</span>-->
          <!--          </el-dropdown-item>-->
          <!--          divided-->
          <el-dropdown-item @click.native="logout">
            <span style="display:block;">退出</span>
@@ -36,6 +44,7 @@
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import { getCookie } from '@/utils/auth'

export default {
  components: {
@@ -47,6 +56,14 @@
      'sidebar',
      'avatar'
    ])
  },
  created() {
    this.username = getCookie('admin')
  },
  data() {
    return {
      username: ''
    }
  },
  methods: {
    toggleSideBar() {
@@ -118,10 +135,18 @@
      .avatar-wrapper {
        margin-top: 5px;
        position: relative;
        cursor: pointer;
        .headerImg{
          margin: 5px;
        }

        .headerName{
          font-weight: bolder;
        }

        .user-avatar {
          cursor: pointer;
          width: 40px;
          width: 60px;
          height: 40px;
          border-radius: 10px;
        }

 src/layout/components/Sidebar/index.vue

@@ -37,6 +37,7 @@
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { LoginMenu } from '@/api/user'
import axios from 'axios'

export default {
  components: { SidebarItem, Logo },
@@ -55,7 +56,8 @@
    //     children: [
    //       { name: '组织架构' },
    //       { name: '角色清单' },
    //       { name: '用户清单' }
    //       { name: '用户清单' }color: $main_color !important;

    //     ]
    //   },
    //   {
@@ -68,8 +70,14 @@
    //   }
    // ]
    // this.routers = arr
    console.log(document.cookie, 777)

    const res = await LoginMenu()
    console.log(res, 999)

    // axios.get('http://121.196.36.24:8001/api/Login/LoginSave?username=Admin&password=123456').then(res => {
    //   console.log(res, 11)
    // })
  },
  computed: {
    ...mapGetters([

 src/router/index.js

@@ -62,7 +62,7 @@
      path: 'index',
      name: 'index',
      component: () => import('@/views/xtsy/index'),
      meta: { title: '系统首页', icon: 'dashboard' }
      meta: { title: '系统首页', icon: 'dashboard', affix: true }
    }]
  },
  {

 src/store/modules/user.js

@@ -33,6 +33,7 @@
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
      // login({ UserName: '001', PassWord: 123, HOrgName: 1 }).then(response => {
        const { data: res } = response

        setCookie('admin', res.username)

 src/utils/auth.js

@@ -14,32 +14,32 @@
  return Cookies.remove(TokenKey)
}

export function getCookie(c_name) {
export function getCookie(key) {
  // document.cookie = escape(key) + ';path=/'
  if (document.cookie.length > 0) {
    let c_start = document.cookie.indexOf(c_name + '=')
    if (c_start != -1) {
      c_start = c_start + c_name.length + 1
      let c_end = document.cookie.indexOf(';', c_start)
      if (c_end == -1) {
        c_end = document.cookie.length
      }
      return unescape(document.cookie.substring(c_start, c_end))
    }
  }
  return ''
  // return Cookies.get(key)
  // if (document.cookie.length > 0) {
  //   let c_start = document.cookie.indexOf(c_name + '=')
  //   if (c_start != -1) {
  //     c_start = c_start + c_name.length + 1
  //     let c_end = document.cookie.indexOf(';', c_start)
  //     if (c_end == -1) {
  //       c_end = document.cookie.length
  //     }
  //     return unescape(document.cookie.substring(c_start, c_end))
  //   }
  // }
  // return ''
  return Cookies.get(key)
}

export function setCookie(key, value) {
  var date = new Date()
  date.setSeconds(date.getSeconds() + 10000)
  document.cookie = key + '=' + escape(value) + '; expires=' + date.toGMTString() + ';path=/'
  // var date = new Date()
  // date.setSeconds(date.getSeconds() + 10000)
  // document.cookie = key + '=' + escape(value) + '; expires=' + date.toGMTString() + ';path=/'

  // return Cookies.set(key, value)
  return Cookies.set(key, value)
}

export function removeCookie(key) {
  setCookie(key, '', -1)
  // return Cookies.remove(key)
  // setCookie(key, '', -1)
  return Cookies.remove(key)
}

 src/utils/request.js

@@ -3,12 +3,13 @@
import store from '@/store'
import { getCookie, getToken } from '@/utils/auth'
// 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

})
// axios.defaults.withCredentials = true

// request interceptor
service.interceptors.request.use(
@@ -21,7 +22,7 @@
    // please modify it according to the actual situation
    // config.headers['X-Token'] = getToken()
    //   config.headers['Authorization'] = 'admin=' + getCookie('admin') + ';navTabId=' + getCookie('navTabId')
      config.headers['Cookie'] = 'admin=' + getCookie('admin') + ';navTabId=' + getCookie('navTabId')
    //   config.headers['Cookie'] = 'admin=' + getCookie('admin') + ';navTabId=' + getCookie('navTabId')
    //   document.cookie = 'admin=' + getCookie('admin') + ';navTabId=' + getCookie('navTabId')
    //   document.cookie = 'admin'
    }

 src/views/jcsz/zzjg.vue

@@ -1,10 +1,10 @@
<template>
  <div>
    <div class="body" style="background-color: #ffffff;  padding: 20px 10px 0 20px;">
    <div class="body" style="background-color: #ffffff;  padding: 20px 10px 0 20px;" :style="{height:mainHeight+'px'}">
      <div style="margin-bottom: 20px;display: flex">
        <el-button type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
        <el-button type="primary" icon="el-icon-delete">修改</el-button>
        <el-button type="primary" icon="el-icon-delete">删除</el-button>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
        <el-button type="primary" icon="el-icon-delete" @click="edit('edit')">修改</el-button>
        <el-button type="primary" icon="el-icon-delete" @click="del">删除</el-button>
      </div>

      <div style="display: flex;border: 1px solid #eee">
@@ -22,7 +22,7 @@

          <el-tree
            ref="tree"
            style="margin-left: 10px;overflow-y: scroll;height: 230px"
            :style="{marginLeft: 10+'px',overflowY: 'scroll',height:(tableHeight-140)+'px'}"
            :icon-class="iconClass"
            :data="treeData"
            default-expand-all
@@ -33,32 +33,11 @@
            @node-click="nodeClick"
          />
        </div>
        <el-table
          v-if="false"
          :data="tableTreeData"
          border
          style="flex: 0.22"
          :span-method="spanMethod"
          :header-cell-style="headerCellStyle"
        >

          <el-table-column
            label="组织分类"
            width="300"
            prop="zzfl"
            :resizable="false"
          >
            <template slot-scope="{row}">

              <el-input v-model="filterText" placeholder="请输入内容" />

            </template>
          </el-table-column>
        </el-table>
        <el-table
          :data="tableData"
          border
          style="width: 72%"
          :style="{width: 72+'%',height:tableHeight+'px'}"
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
        >
@@ -113,11 +92,53 @@
        align="right"
        layout="prev, pager, next,sizes"
        popper-class="select_bottom"
        style="padding: 0;margin-top: 100px"
      />
      <!--      @pagination="getManageList"-->

    </div>

    <el-dialog
      :title="operation==='add'?'添加':'修改'"
      :visible.sync="dialogVisible"
      width="50%"
      top="15vh"
      @closed="handleClose"
    >
      <el-form ref="dialogForm" :model="dialogForm" label-width="80px">
        <el-form-item label="组织类型" required>
          <el-radio-group v-model="dialogForm.zzlx" style="display: flex;align-items: end;height: 29px;">
            <el-radio :label="1">工厂</el-radio>
            <el-radio :label="2">部门</el-radio>
            <el-radio :label="3">车间</el-radio>
            <el-radio :label="4">科室</el-radio>
            <el-radio :label="5">生产线</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="组织编码" required>
          <el-input v-model="dialogForm.zzbm" style="width: 220px" />
        </el-form-item>
        <el-form-item label="组织名称" required>
          <el-input v-model="dialogForm.zzmc" style="width: 220px" />
        </el-form-item>
        <el-form-item label="上级单位" required>
          <!--          <el-input v-model="dialogForm.sjdw" />-->
          <el-select v-model="dialogForm.sjdw" style="width: 220px" placeholder="请选择">
            <el-option
              v-for="item in sjdw"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button @click="dialogVisibleCancel">取 消</el-button>
          <el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

@@ -131,6 +152,8 @@
  },
  data() {
    return {
      mainHeight: 0,
      tableHeight: 0,
      form: {
        pageNum: 1, // 第几页
        pageSize: 10 // 每页多少条
@@ -146,6 +169,16 @@
        { id: 7, zzbm: 'OD', zzmc: '销售部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin4', cjsj: '2022-04-15 10:12:10' },
        { id: 8, zzbm: 'OD', zzmc: '销售部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin4', cjsj: '2022-04-15 10:12:10' },
        { id: 9, zzbm: 'FC', zzmc: '工程部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-16 12:10:10' },
        { id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
        { id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
        { id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
        { id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
        { id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
        { id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
        { id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
        { id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
        { id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
        { id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' },
        { id: 10, zzbm: 'CM', zzmc: '开发部', zzlx: '部门', sjdw: '大连恒祥', cjry: 'Admin3', cjsj: '2022-04-17 15:10:10' }
      ],
      filterText: '',
@@ -195,7 +228,21 @@
        children: 'children',
        label: 'label'
      },
      iconClass: 'el-icon-caret-right'
      iconClass: 'el-icon-caret-right',
      dialogVisible: true,
      dialogForm: {
        zzlx: '',
        zzbm: '',
        zzmc: '',
        sjdw: ''
      },
      sjdw: [
        // { value: '001', label: 'test1' },
        // { value: '001', label: 'test2' },
        // { value: '001', label: 'test3' },
        // { value: '001', label: 'test4' }
      ],
      operation: ''

    }
  },
@@ -207,8 +254,47 @@
  created() {

  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    // 新增按钮
    add(val) {
      this.operation = val
      this.dialogVisible = true
    },
    // 修改按钮
    edit(val) {
      this.operation = val
      this.dialogVisible = true
    },
    // 删除按钮
    del() {

    },
    // 对话框关闭事件
    handleClose() {

    },
    // 对话框取消
    dialogVisibleCancel() {
      this.dialogVisible = false
    },
    // 对话框确认
    dialogVisibleConfirm() {
      console.log(this.dialogForm.zzlx)
      // this.dialogVisible = false
    },
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 200
        // this.panelHeight = this.mainHeight - 40
        this.tableHeight = this.mainHeight - 55
      })
    },
    // 树形过滤节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
@@ -266,6 +352,32 @@
  font-size: 14px
}

.footerButton{
  display: flex;
  justify-content: end;
}
::v-deep .el-button--default{
  background-color: #ffffff !important;
  height: 30px;
  display: flex;
  align-items: center;
}

::v-deep .el-button--default:hover{
  color: #606266;
}
::v-deep .el-dialog__body{
  padding: 20px 100px !important;
}

::v-deep .el-radio__input.is-checked .el-radio__inner{
  background-color: $main_color;
  border-color: $main_color;
}

::v-deep .el-radio__input.is-checked+.el-radio__label{
color: $main_color !important;
}
/*::v-deep*/
/*.el-icon-caret-right:before {*/
/*  content: "\e722";*/

 vue.config.js

@@ -38,10 +38,10 @@
    },
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: process.env.VUE_APP_BASE_API, // 请求的第三⽅接⼝地址
        target: 'http://121.196.36.24:8001', // 请求的第三⽅接⼝地址
        changeOrigin: true, // 请求跨域时，需配置此项
        pathRewrite: { // 路径重写,替换target中的请求地址
          ['^' + process.env.VUE_APP_BASE_API]: ''
          ['^' + process.env.VUE_APP_BASE_API]: '/api/'
        }
      }
    }