7、vue_根据用户权限获取菜单

1、获取后台数据

// 获取菜单
export const $getMenus = async (params) => {
  let { data } = await $get("sys_Login/getMenus", params);
  return data;
};

2、替换layoutAside.vue中的固定菜单

import { $getMenus } from "../api/login.js";
// 定义数据
const data = reactive({
  menusList: [],
});
const { menusList } = toRefs(data);
// 获取菜单
const getMenus = async () => {
  const { data: menu } = await $getMenus({
    userId: sessionStorage.getItem("UserId"),
  });
  console.log(menu);
  // 将后台信息绑定到控件
  data.menusList = menu;
};
getMenus();

 

1

<template>
  <el-card>
    <el-row :gutter="10" align="middle" class="header">
      <el-col :span="1" class="search_lable">单位：</el-col>
      <el-col :span="3">
        <el-select v-model="queryForm.ent" placeholder="请选择单位">
          <el-option
            v-for="item in $entList"
            :key="item.entId"
            :label="item.entName"
            :value="item.entId"
          />
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select v-model="queryForm.org" placeholder="选择产品线">
          <el-option
            v-for="item in $orgList"
            :key="item.orgId"
            :label="item.orgName"
            :value="item.orgId"
          />
        </el-select>
      </el-col>
      <el-col :span="1" class="search_lable">日期： </el-col>
      <el-col :span="3">
        <el-date-picker
          v-model="queryForm.beginDates"
          type="date"
          placeholder="开始日期"
          :size="size"
        />
      </el-col>
      <el-col :span="3">
        <el-date-picker
          v-model="queryForm.endDates"
          type="date"
          placeholder="结束日期"
          :size="size"
        />
      </el-col>
      <el-col :span="1" class="search_lable">客户： </el-col>
      <el-col :span="3">
        <el-input clearable v-model="queryForm.customer"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="success" @click="loadTable">查询</el-button></el-col
      >
    </el-row>
  </el-card>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import { $entList, $orgList } from "../api/option";
import { $getsale } from "../api/sale";

const data = reactive({
  // 搜索区域
  queryForm: {
    ent: "", //单位
    org: "", //产品线
    beginDates: "", //开始日期
    endDates: "", //结束日期
    customer: "", //客户：模糊查询
  },
  // 表格数据
  tableData: [],
});
const { queryForm, tableData } = toRefs(data);

// 获取列表
const loadTable = async () => {
  // if (data.ent == "") {
  //   $msg("请选择单位！！！");
  // } else {
  const { count, data: arData } = await $getsale({
    entnameStr: data.queryForm.ent,
    orgnameStr: data.queryForm.org,
    beginDates: data.queryForm.beginDates,
    endDates: data.queryForm.endDates,
    businessnameStr: data.queryForm.customer,
  });
  console.log(arData);
  // 将后台信息绑定到控件
  data.tableData = arData;
  // data.count = count;
  // }
};
// 加载数据
loadTable();
</script>
<style lang="scss" scoped>
.header {
  padding-bottom: 10px;
  box-sizing: border-box;
  .search_lable {
    padding: 0px;
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #3a3b3d;
  }
}
</style>