补充修复侧边栏的样式以及一些小问题

hailin

2023-07-19 7b230899435f64c2191af136d8d43e273eb19d70

补充修复侧边栏的样式以及一些小问题

 src/api/standardLibrary.js

@@ -8,6 +8,15 @@
  })
}

// 分页查询所有标准数据
export function getStandardsListOfPage(params) {
  return request({
    url: '/standards/list_page',
    method: 'get',
    params
  })
}

// 添加类型
export function addStandards() {
  return request({

 src/components/Breadcrumb/index.vue

@@ -29,12 +29,12 @@
  methods: {
    getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      const first = matched[0]

      if (!this.isDashboard(first)) {
        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
      }
      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      // const first = matched[0]
      // console.log(this.isDashboard(first))// 判断是否有主页
      // if (!this.isDashboard(first)) {
      //   matched = [{ path: '/home', meta: { title: '主页', icon: 'el-icon-s-home' }}].concat(matched)
      // }

      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },
@@ -43,7 +43,7 @@
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
      return name.trim().toLocaleLowerCase() === 'home'.toLocaleLowerCase()
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561

 src/layout/components/Navbar.vue

@@ -12,7 +12,6 @@
      </div>
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> -->
          <a class="user-avatar">{{'中天'.slice(0,1)}}</a>
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">

 src/layout/components/Sidebar/Item.vue

@@ -3,6 +3,10 @@
  name: 'MenuItem',
  functional: true,
  props: {
    // show: {
    //   type: Boolean,
    //   default: true
    // },
    icon: {
      type: String,
      default: ''
@@ -15,7 +19,9 @@
  render(h, context) {
    const { icon, title } = context.props
    const vnodes = []

    // console.log(show)
    // if (!show) return
    console.log(icon, title)
    if (icon) {
      if (icon.includes('el-icon')) {
        vnodes.push(<i class={[icon, 'sub-el-icon']} />)

 src/layout/components/Sidebar/Logo.vue

@@ -53,17 +53,18 @@
  & .sidebar-logo-link {
    height: 100%;
    width: 100%;
    padding: 0px;
    padding: 0px 8px;
    box-sizing: border-box;
    text-align: center;
    align-items: center;
    // text-align: center;
    // align-items: center;
    & .sidebar-logo {
      width: 100%;
      // width: 32px;
      // height: 32px;
      // width: 60%;
      // height: 70%;
      width: 80%;
      height: 80%;
      // width: 80%;
      // height: 80%;
      vertical-align: middle;
      // margin-right: 12px;
    }

 src/layout/components/Sidebar/SidebarItem.vue

@@ -2,8 +2,13 @@
  <div v-if="!item.hidden">
    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />

        <el-menu-item v-if="onlyOneChild.meta.show==false ?onlyOneChild.meta.show: true" :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
          <!-- <template slot="title">
            <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
          </template> -->
          <item :show="onlyOneChild.meta.show" :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
          <span v-if="onlyOneChild.meta.title==='主页'">主页</span>
        </el-menu-item>
      </app-link>
    </template>
@@ -56,6 +61,9 @@
    this.onlyOneChild = null
    return {}
  },
  created() {
    // console.log(this.item)
  },
  methods: {
    hasOneShowingChild(children = [], parent) {
      const showingChildren = children.filter(item => {

 src/router/index.js

@@ -45,6 +45,7 @@
    path: '/',
    component: Layout,
    redirect: '/home',
    // meta: { title: '主页', icon: 'el-icon-s-home' },
    children: [{
      path: 'home',
      name: 'Home',
@@ -55,6 +56,7 @@
  {
    path: '/standardLibrary',
    component: Layout,
    redirect: '/standardLibrary/index',
    meta: { title: '标准库', icon: 'el-icon-s-help' },
    children: [
      {
@@ -64,10 +66,11 @@
        meta: { title: '标准库', icon: 'form' }
      },
      {
        path: 'specificationDetails',
        path: 'specificationDetails/:id',
        name: 'SpecificationDetails',
        // hidden: true,
        component: () => import('@/views/standardLibrary/SpecificationDetails'),
        meta: { title: '标准库详情', icon: 'form' }
        meta: { title: '产品规格详情', icon: 'form', show: false, breadcrumb: false }
      }
    ]
  },
@@ -76,7 +79,7 @@
    component: Layout,
    redirect: '/rawMaterials/reportForInspection',
    name: 'rawMaterials',
    meta: { title: '原材料报检', icon: 'el-icon-s-help' },
    meta: { title: '检验', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'reportForInspection',
@@ -134,69 +137,69 @@
      }
    ]
  },
  {
    path: '/finishedProduct',
    component: Layout,
    redirect: '/finishedProduct/reportForInspection',
    name: 'FinishedProduct',
    meta: { title: '成品检验', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'reportForInspection',
        name: 'ReportForInspection',
        component: () => import('@/views/rawMaterials/reportForInspection/index'),
        meta: { title: '成品送检登记', icon: 'table' }
      },
      {
        path: 'print',
        name: 'Print',
        component: () => import('@/views/rawMaterials/print/index'),
        meta: { title: '条码打印', icon: 'tree' }
      },
      {
        path: 'planAssignments',
        name: 'PlanAssignments',
        component: () => import('@/views/rawMaterials/planAssignments/index'),
        meta: { title: '检验计划分配', icon: 'tree' }
      },
      {
        path: 'rawMaterialInspection',
        name: 'RawMaterialInspection',
        component: () => import('@/views/rawMaterials/rawMaterialInspection/index'),
        meta: { title: '成品检验', icon: 'tree' }
      },
      {
        path: 'checkTheReport',
        name: 'CheckTheReport',
        component: () => import('@/views/rawMaterials/checkTheReport/index'),
        meta: { title: '检验报告', icon: 'tree' }
      },
      {
        path: 'reportAuditing',
        name: 'ReportAuditing',
        component: () => import('@/views/rawMaterials/reportAuditing/index'),
        meta: { title: '报告审核', icon: 'tree' }
      },
      {
        path: 'nonConformanceReview',
        name: 'NonConformanceReview',
        component: () => import('@/views/rawMaterials/nonConformanceReview/index'),
        meta: { title: '不合格反馈', icon: 'tree' }
      },
      {
        path: 'nonConformingFeedback',
        name: 'NonConformingFeedback',
        component: () => import('@/views/rawMaterials/nonConformingFeedback/index'),
        meta: { title: '不合格评审', icon: 'tree' }
      },
      {
        path: 'passRateStatistics',
        name: 'PassRateStatistics',
        component: () => import('@/views/rawMaterials/passRateStatistics/index'),
        meta: { title: '合格率统计', icon: 'tree' }
      }
    ]
  },
  // {
  //   path: '/finishedProduct',
  //   component: Layout,
  //   redirect: '/finishedProduct/reportForInspection',
  //   name: 'FinishedProduct',
  //   meta: { title: '成品检验', icon: 'el-icon-s-help' },
  //   children: [
  //     {
  //       path: 'reportForInspection',
  //       name: 'ReportForInspection',
  //       component: () => import('@/views/rawMaterials/reportForInspection/index'),
  //       meta: { title: '成品送检登记', icon: 'table' }
  //     },
  //     {
  //       path: 'print',
  //       name: 'Print',
  //       component: () => import('@/views/rawMaterials/print/index'),
  //       meta: { title: '条码打印', icon: 'tree' }
  //     },
  //     {
  //       path: 'planAssignments',
  //       name: 'PlanAssignments',
  //       component: () => import('@/views/rawMaterials/planAssignments/index'),
  //       meta: { title: '检验计划分配', icon: 'tree' }
  //     },
  //     {
  //       path: 'rawMaterialInspection',
  //       name: 'RawMaterialInspection',
  //       component: () => import('@/views/rawMaterials/rawMaterialInspection/index'),
  //       meta: { title: '成品检验', icon: 'tree' }
  //     },
  //     {
  //       path: 'checkTheReport',
  //       name: 'CheckTheReport',
  //       component: () => import('@/views/rawMaterials/checkTheReport/index'),
  //       meta: { title: '检验报告', icon: 'tree' }
  //     },
  //     {
  //       path: 'reportAuditing',
  //       name: 'ReportAuditing',
  //       component: () => import('@/views/rawMaterials/reportAuditing/index'),
  //       meta: { title: '报告审核', icon: 'tree' }
  //     },
  //     {
  //       path: 'nonConformanceReview',
  //       name: 'NonConformanceReview',
  //       component: () => import('@/views/rawMaterials/nonConformanceReview/index'),
  //       meta: { title: '不合格反馈', icon: 'tree' }
  //     },
  //     {
  //       path: 'nonConformingFeedback',
  //       name: 'NonConformingFeedback',
  //       component: () => import('@/views/rawMaterials/nonConformingFeedback/index'),
  //       meta: { title: '不合格评审', icon: 'tree' }
  //     },
  //     {
  //       path: 'passRateStatistics',
  //       name: 'PassRateStatistics',
  //       component: () => import('@/views/rawMaterials/passRateStatistics/index'),
  //       meta: { title: '合格率统计', icon: 'tree' }
  //     }
  //   ]
  // },
  {
    path: '/laboratory',
    component: Layout,

 src/store/modules/app.js

@@ -2,7 +2,8 @@

const state = {
  sidebar: {
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    // opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    opened: false,
    withoutAnimation: false
  },
  device: 'desktop'

 src/store/modules/user.js

@@ -1,5 +1,5 @@
import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken, getRefresh, setRefresh, removeRefresh } from '@/utils/auth'
import { getToken, setToken, removeToken, getRefresh, setRefresh } from '@/utils/auth'
import { resetRouter } from '@/router'

const getDefaultState = () => {

 src/styles/element-ui.scss

@@ -111,3 +111,6 @@
  min-width: 100px !important;
  // background-color: #fff ;
}
.el-popover.el-popper{
  min-width: 60px !important;
}

 src/styles/sidebar.scss

@@ -71,21 +71,19 @@
    // menu hover
    
    .el-submenu__title,.el-tooltip{

      &:hover {
        background-color: $menuHover !important;
        border-radius: 8px;
        overflow: hidden;
      &:hover {
        background-color: $menuHover !important;   
        color: $menuActiveText !important;

      }
    }
    .submenu-title-noDropdown{
      &:hover {
        background-color:transparent !important; 
        // background-color: $menuBg !important;
        border-radius: 8px;
        overflow: hidden;
        // border-radius: 8px;
        // overflow: hidden;
        color: $menuActiveText !important;

      }
@@ -96,8 +94,6 @@
      }
     .el-submenu__title{
        background-color: #ffffff !important;
        border-radius: 8px;
        overflow: hidden;
        color: $menuActiveText !important;
      }

@@ -111,6 +107,7 @@
      background-color: $subMenuBg !important;

      &:hover {
        
        background-color: $subMenuHover !important;
      }
    }

 src/views/standardLibrary/SpecificationDetails.vue

@@ -118,7 +118,9 @@
  name: 'SpecificationDetail',
  data() {
    return {
    // 默认值
      // 查找对应详情id
      id: '',
      // 默认值
      defaultProps: {
        children: 'children',
        label: 'label'
@@ -161,6 +163,12 @@
        keyword: ''
      }
    }
  },
  created() {
    console.log(this.$route.params)
  },
  methods: {

  }
}
</script>

 src/views/standardLibrary/index.vue

@@ -6,7 +6,7 @@
          v-model="filterText"
          placeholder="输入关键字进行过滤"
        />
        <el-button type="text">全部</el-button>
        <el-button type="text" @click="getAllStandard">全部</el-button>
        <el-tree
          ref="tree"
          class="filter-tree"
@@ -42,10 +42,10 @@
        </div>
        <div class="table-box">
          <el-table
            ref="standardLibraryTable"
            ref="tableData"
            :cell-style="{textAlign: 'center'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
            :data="standardLibraryTable"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
@@ -93,19 +93,34 @@
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                  :style="{marginRight:'8px'}"
                  @click="specificationDetails(scope.row)"
                >查看</el-button>
                <el-button type="text" size="small"><i class="el-icon-more" /></el-button>
                <el-popover
                  v-model="scope.row.visible"
                  placement="top"
                  width="30"
                >
                  <div style="text-align: center; margin: 0">
                    <div>
                      <el-button size="mini" type="text">编辑</el-button>
                    </div>
                    <div>
                      <el-button size="mini" type="text">停用</el-button>
                    </div>
                  </div>
                  <el-button slot="reference" type="text"><i class="el-icon-more" /></el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              :current-page="pageParams.pageNo"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageParams.pageNo"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              :total="pageParams.total"
            />
          </div>
        </div>
@@ -115,28 +130,15 @@
</template>

<script>
import { getStandardsList, getSerialNumberList, getSpecificationsList } from '@/api/standardLibrary'
import { getStandardsList, getSerialNumberList, getSpecificationsList, getStandardsListOfPage } from '@/api/standardLibrary'
export default {
  data() {
    return {
      visible: false,
      filterText: '',
      // 标准库bom树
      standardTree: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }],
      // 默认值
      standardTree: [],
      // bom的,默认值
      defaultProps: {
        children: 'children',
        label: 'label'
@@ -145,18 +147,42 @@
      searchData: {
        keyword: ''
      },
      standardLibraryTable: [
      tableData: [
        {
          id: 2,
          name: 'AB',
          updateTime: '2023-07-12 00:00:12',
          username: '小小',
          vel: 'V1.0',
          spe_state: 1
          spe_state: 1,
          visible: false
        },
        {
          id: 3,
          name: 'AB',
          updateTime: '2023-07-12 00:00:12',
          username: '小小',
          vel: 'V1.0',
          spe_state: 1,
          visible: false

        },
        {
          id: 4,
          name: 'AB',
          updateTime: '2023-07-12 00:00:12',
          username: '小小',
          vel: 'V1.0',
          spe_state: 1,
          visible: false

        }
      ],
      currentPage: 1

      pageParams: {
        pageNo: 1,
        pageSize: 10,
        total: 3
      }
    }
  },
  watch: {
@@ -174,34 +200,46 @@
    },
    async getStandardTree() {
      const { data: standard } = await getStandardsList()// 获取所有标准
      // console.log(standard)// 获取所有标准
      for (const standardItem of standard) {
        const { data: serialNumber } = await getSerialNumberList({ IdOrNameOfSerialNumber: standardItem.name, standardsId: standardItem.id })
        // console.log(children) //所有型号
        // for (const serialNumberItem of serialNumber) {
        //   // const {data} = await getSpecificationsList({})
        // }
        standardItem.children = serialNumber.map(item => ({ id: item.id, label: item.name }))
      }
      this.standardTree = standard.map(item => ({ ...item, label: item.name }))
      console.log(this.standardTree)// 获取所有标准
      console.log(standard)// 获取所有标准
      this.standardTree = standard.map(item => {
        item.serialNumber = item.serialNumber?.map(childrenItem => ({ ...childrenItem, label: childrenItem.name }))
        return { ...item, label: item.name, children: item.serialNumber }
      })
      console.log(this.standardTree)
    },
    async nodeClick(data, node, element) {
      // 数据 节点node对象 节点组件对象
      // console.log(data, node, element)
      // console.log(data.children && data.children?.length !== 0)
      if (!data.children && data.children?.length !== 0) {
      console.log(data)
      console.log('children' in data)
      if (!('children' in data)) {
        console.log('点击子节点', data)
        const res = await getSpecificationsList({ serialNumberId: data.id, specificationsName: data.label, pageNo: 1, pageSize: 10 })
        console.log(res)
        const { data: { row, total }} = await getSpecificationsList({ serialNumberId: data.id, specificationsName: data.label, pageNo: 1, pageSize: 10 })
        console.log(row)
        this.tableData = row
        this.pageParams.total = total
        return
      }
      console.log('点击父节点')
      const { data: { row, total }} = await getSerialNumberList({ standardsId: data.id, ...this.pageParams })
      // console.log('点击父节点', serialNumberList)
      this.tableData = row
      this.pageParams.total = total
    },
    specificationDetails(row) {
      // 跳转产品规格详情页
      console.log(row)
      this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`)
    },
    async getAllStandard() {
      console.log(this.pageParams)
      const { data: { row, total }} = await getStandardsListOfPage({ ...this.pageParams })
      this.pageParams.total = total
      this.tableData = row
    }
  }
}
</script>

<style lang="scss" scoped>

.standard-library-main{
  width: 100%;
  height: 100%;