From 7b230899435f64c2191af136d8d43e273eb19d70 Mon Sep 17 00:00:00 2001
From: hailin <1356886193@qq.com>
Date: 星期三, 19 七月 2023 13:03:43 +0800
Subject: [PATCH] 补充修复侧边栏的样式以及一些小问题
---
src/store/modules/user.js | 2
src/views/standardLibrary/index.vue | 134 ++++++++++++++--------
src/api/standardLibrary.js | 9 +
src/views/standardLibrary/SpecificationDetails.vue | 10 +
src/layout/components/Navbar.vue | 1
src/layout/components/Sidebar/Item.vue | 8 +
src/router/index.js | 135 +++++++++++-----------
src/components/Breadcrumb/index.vue | 14 +-
src/styles/element-ui.scss | 3
src/styles/sidebar.scss | 13 -
src/layout/components/Sidebar/Logo.vue | 11 +
src/store/modules/app.js | 3
src/layout/components/Sidebar/SidebarItem.vue | 12 +
13 files changed, 214 insertions(+), 141 deletions(-)
diff --git a/src/api/standardLibrary.js b/src/api/standardLibrary.js
index 0c7344e..1123199 100644
--- a/src/api/standardLibrary.js
+++ b/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({
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index f6aaf66..c7f6f66 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/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
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 52e3c41..060391e 100644
--- a/src/layout/components/Navbar.vue
+++ b/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">
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
index aa1f5da..5bfc188 100644
--- a/src/layout/components/Sidebar/Item.vue
+++ b/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']} />)
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index d30b499..d07b76a 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/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;
}
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 0fd21c9..44f67e4 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/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 => {
diff --git a/src/router/index.js b/src/router/index.js
index 2f584ea..5f236ab 100644
--- a/src/router/index.js
+++ b/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,
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 7ea7e33..86c5133 100644
--- a/src/store/modules/app.js
+++ b/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'
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index c81f028..3ff12ca 100644
--- a/src/store/modules/user.js
+++ b/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 = () => {
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 9b495c7..0463a2a 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -111,3 +111,6 @@
min-width: 100px !important;
// background-color: #fff ;
}
+.el-popover.el-popper{
+ min-width: 60px !important;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 5d12bfc..15195b5 100644
--- a/src/styles/sidebar.scss
+++ b/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;
}
}
diff --git a/src/views/standardLibrary/SpecificationDetails.vue b/src/views/standardLibrary/SpecificationDetails.vue
index 46310fc..3efd266 100644
--- a/src/views/standardLibrary/SpecificationDetails.vue
+++ b/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>
diff --git a/src/views/standardLibrary/index.vue b/src/views/standardLibrary/index.vue
index b55dc64..e5d8274 100644
--- a/src/views/standardLibrary/index.vue
+++ b/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: '',
// 鏍囧噯搴揵om鏍�
- 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%;
--
Gitblit v1.9.3