meswork/FLX_MES_Manage_View
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

界面美化

Browse Source
This commit is contained in:
zhangshun
2026-05-29 16:32:43 +08:00
parent ebfa6f0458
commit 42dab65fed
26 changed files with 2000 additions and 1072 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Breadcrumb/index.vue
View File

@@ -1,9 +1,19 @@
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" v-if="item.meta.title" :key="item.path">
<span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{ translateMenuTitle(item.meta.title) }}</span>
<router-link v-else :to="item.redirect||item.path">{{ translateMenuTitle(item.meta.title) }}</router-link>
<el-breadcrumb-item
v-for="(item, index) in filteredLevelList"
:key="item.path"
>
<span
v-if="item.redirect === 'noredirect' || index === filteredLevelList.length - 1"
class="no-redirect"
>
{{ translateMenuTitle(item.meta.title) }}
</span>
<router-link v-else :to="item.redirect || item.path">
{{ translateMenuTitle(item.meta.title) }}
</router-link>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
@@ -18,6 +28,12 @@ export default {
levelList: null
}
},
computed: {
// 过滤掉没有 title 的项
filteredLevelList() {
return this.levelList.filter(item => item.meta?.title)
}
},
watch: {
$route() {
this.getBreadcrumb()

29
src/lang/en-US.js
View File

@@ -37,6 +37,7 @@ export default {
secondLevelMenuName: 'Second-Level Menu',
roleName: 'Role Name',
role: 'Role:',
roleMenuData: 'Role Menu Data',
selectPlaceholder: 'Please select',
sequence: 'No.',
addFirstLevelModule: 'Add First-Level Menu',
@@ -361,6 +362,11 @@ export default {
qualified: 'Qualified',
unqualified: 'Unqualified',
all: 'All',
detailTitle: 'Assembly Quality Details',
detailSubtitle: 'Inspect measurements, limits, and quality status after multi-filter search',
summaryTotal: 'Total Results',
summaryPageSize: 'Page Size',
summaryFilters: 'Active Filters',
noData: 'No data'
},
inquiryTransitInformation: {
@@ -406,11 +412,17 @@ export default {
productModel: 'Product Model',
offlineTime: 'Offline Time',
trendTitle: 'Offline Output Trend Analysis',
trendSubtitle: 'Monitor output fluctuations and abnormal offline periods within the selected range',
detailTitle: 'Offline Detail Records',
detailSubtitle: 'Shows production offline details matching the current filters',
saveAsImage: 'Save as Image',
dateAxis: 'Date',
hourAxis: 'Hour',
offlineQuantityAxis: 'Offline Engine Qty',
offlineQuantityAxis: 'Offline production Qty',
offlineQuantitySeries: 'Offline Qty',
summaryTotal: 'Offline Total',
summaryTrendPoints: 'Trend Points',
summaryGranularity: 'Granularity',
selectDateRange: 'Please select start date and end date!',
noData: 'No data'
},
@@ -431,9 +443,16 @@ export default {
station: 'Station',
totalAverageBeat: 'Total Avg Beat (s)',
totalAverageBeatChartTitle: 'Total Average Beat Bar Chart',
chartSubtitle: 'Quickly identify bottleneck stations with higher average beat',
detailTitle: 'Station Beat Details',
detailSubtitle: 'Review average beat by station across each date',
totalAverageBeatAxis: 'Total Avg Beat (s)',
totalAverageBeatSeries: 'Total Avg Beat',
saveAsImage: 'Save as Image',
summaryStations: 'Stations',
summaryDays: 'Days',
summarySelectedStations: 'Selected Stations',
allStations: 'All',
noData: 'No data'
},
stationJph: {
@@ -453,12 +472,20 @@ export default {
historyTab: 'History',
realtimeChartTitle: 'Realtime Hourly Output by Station',
historyChartTitle: 'Historical Hourly Output by Station',
realtimeSubtitle: 'Auto-refreshing view of today\'s hourly output distribution',
historySubtitle: 'Review hourly output changes by date',
detailTitle: 'Historical Output Details',
detailSubtitle: 'Tabular breakdown of output for each date and hour slot',
saveAsImage: 'Save as Image',
sequence: 'No.',
date: 'Date',
station: 'Station',
hourSlot: 'Hour Slot',
outputQty: 'Output Qty',
summaryRealtimePoints: 'Realtime Hours',
summaryRealtimeTotal: 'Realtime Total',
summaryRefreshMode: 'Refresh Mode',
autoRefresh: 'Auto Polling',
noData: 'No data'
},
materialDataQuery: {

29
src/lang/zh-CN.js
View File

@@ -37,6 +37,7 @@ export default {
secondLevelMenuName: '二级菜单名称',
roleName: '角色名称',
role: '角色:',
roleMenuData: '角色菜单树',
selectPlaceholder: '请选择',
sequence: '序号',
addFirstLevelModule: '新增一级菜单',
@@ -361,6 +362,11 @@ export default {
qualified: '合格',
unqualified: '不合格',
all: '全部',
detailTitle: '装配质量明细',
detailSubtitle: '多维筛选后查看测量结果、上下限与合格状态',
summaryTotal: '结果总数',
summaryPageSize: '每页条数',
summaryFilters: '已启用筛选',
noData: '暂无数据'
},
inquiryTransitInformation: {
@@ -406,11 +412,17 @@ export default {
productModel: '产品型号',
offlineTime: '下线时间',
trendTitle: '下线产量趋势分析',
trendSubtitle: '用于监控指定时间范围内的下线产量波动与异常时段',
detailTitle: '下线明细记录',
detailSubtitle: '展示符合筛选条件产品下线明细',
saveAsImage: '保存为图片',
dateAxis: '日期',
hourAxis: '小时',
offlineQuantityAxis: '下线发动机数量',
offlineQuantityAxis: '下线产品数量',
offlineQuantitySeries: '下线数量',
summaryTotal: '下线总数',
summaryTrendPoints: '趋势点数',
summaryGranularity: '统计粒度',
selectDateRange: '请选择开始时间与结束时间！',
noData: '暂无数据'
},
@@ -431,9 +443,16 @@ export default {
station: '工位',
totalAverageBeat: '总平均节拍(秒)',
totalAverageBeatChartTitle: '总平均节拍横向柱状图',
chartSubtitle: '快速识别平均节拍偏高的瓶颈工位',
detailTitle: '工位节拍明细',
detailSubtitle: '按日期展开查看各工位平均节拍',
totalAverageBeatAxis: '总平均节拍(秒)',
totalAverageBeatSeries: '总平均节拍',
saveAsImage: '保存为图片',
summaryStations: '工位数量',
summaryDays: '统计天数',
summarySelectedStations: '已选工位',
allStations: '全部',
noData: '暂无数据'
},
stationJph: {
@@ -453,12 +472,20 @@ export default {
historyTab: '历史',
realtimeChartTitle: '工位每小时实时产量',
historyChartTitle: '工位每小时历史产量',
realtimeSubtitle: '自动刷新今日每小时产量分布',
historySubtitle: '按日期回看每小时产量变化',
detailTitle: '历史产量明细',
detailSubtitle: '表格展示每个日期每小时段的产量结果',
saveAsImage: '保存为图片',
sequence: '序号',
date: '日期',
station: '工位',
hourSlot: '小时段',
outputQty: '产量',
summaryRealtimePoints: '实时小时点',
summaryRealtimeTotal: '实时总产量',
summaryRefreshMode: '刷新模式',
autoRefresh: '自动轮询',
noData: '暂无数据'
},
materialDataQuery: {

11
src/styles/element-ui.scss
View File

@@ -23,8 +23,14 @@
padding: 10px 10px;
border-radius: 10px 10px 0 0;
.el-dialog__title {
color: #fff;
font-size: 1.2rem;
color: #203247 !important;
font-size: 16px;
font-weight: 700;
}
.el-dialog__title,
.el-dialog__title * {
color: #203247 !important;
font-weight: 700;
}
.el-dialog__headerbtn {
top: 13px;
@@ -162,4 +168,3 @@
border: 1px solid gray!important;
}*/

1
src/styles/index.scss
View File

@@ -2,6 +2,7 @@
@use './mixin.scss';
@use './transition.scss';
@use './element-ui.scss';
@use './mes-admin-pages.scss';
@use './sidebar.scss';
body {

215
src/styles/mes-admin-pages.scss Normal file
View File

@@ -0,0 +1,215 @@
:root {
--mes-page-bg: linear-gradient(180deg, #f6f9fc 0%, #edf3f8 100%);
--mes-surface: rgba(255, 255, 255, 0.96);
--mes-surface-soft: linear-gradient(135deg, #f9fbfd 0%, #f1f6fb 100%);
--mes-border: #d6e1ec;
--mes-border-strong: #c3d3e4;
--mes-text: #243447;
--mes-text-soft: #5f7186;
--mes-primary: #1f78d1;
--mes-primary-soft: #eef6ff;
--mes-success-soft: #edf8f1;
--mes-warning-soft: #fff5e9;
--mes-shadow: 0 10px 24px rgba(31, 57, 90, 0.08);
--mes-radius-lg: 16px;
--mes-radius-md: 12px;
}
.mes-admin-page {
min-height: calc(100vh - 84px);
padding: 14px !important;
background:
radial-gradient(circle at top right, rgba(31, 120, 209, 0.08), transparent 28%),
radial-gradient(circle at top left, rgba(38, 166, 154, 0.06), transparent 24%),
var(--mes-page-bg);
.el-card {
border: 1px solid var(--mes-border);
border-radius: var(--mes-radius-lg);
background: var(--mes-surface);
box-shadow: var(--mes-shadow);
overflow: hidden;
}
.el-card__body {
padding: 16px !important;
margin: 0 !important;
}
.topCard,
> .el-card {
margin: 0 !important;
}
.topDiv,
.toolbarRow {
//display: flex;
//flex-wrap: wrap;
//align-items: center;
//gap: 10px 12px;
//margin-bottom: 14px;
//padding: 14px 16px;
//border: 1px solid var(--mes-border);
//border-radius: var(--mes-radius-md);
//background: var(--mes-surface-soft);
}
.promptText,
.topDiv > span,
.toolbarRow > span {
color: var(--mes-text);
font-weight: 600;
letter-spacing: 0.02em;
}
.el-input__inner,
.el-textarea__inner {
border-color: var(--mes-border);
border-radius: 10px;
color: var(--mes-text);
background: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.el-input__inner:hover,
.el-textarea__inner:hover {
border-color: var(--mes-border-strong);
}
.el-input__inner:focus,
.el-textarea__inner:focus {
border-color: var(--mes-primary) !important;
box-shadow: 0 0 0 3px rgba(31, 120, 209, 0.12);
}
.el-select,
.el-date-editor {
max-width: 100%;
}
.el-button {
min-height: 34px;
border-radius: 10px;
font-weight: 600;
letter-spacing: 0.01em;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.el-button:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(31, 57, 90, 0.08);
}
.el-button--primary.is-plain {
color: var(--mes-primary);
border-color: rgba(31, 120, 209, 0.22);
background: var(--mes-primary-soft);
}
.el-button--info.is-plain,
.el-button--info {
border-color: rgba(86, 119, 153, 0.2);
background: #f3f7fb;
color: #4a627d;
}
.el-button--warning {
border-color: rgba(236, 160, 71, 0.22);
background: var(--mes-warning-soft);
color: #b66f10;
}
.el-button--distribution {
border-color: rgba(236, 122, 57, 0.26);
background: #fff2e8;
color: #d16a21;
}
.el-button--success,
.el-button--success.is-plain {
border-color: rgba(46, 174, 96, 0.22);
background: var(--mes-success-soft);
color: #1f8a4c;
}
.el-table {
margin-top: 6px;
border: 1px solid var(--mes-border) !important;
border-radius: 14px;
overflow: hidden;
background: #fff;
}
.el-table::before,
.el-table--border::after,
.el-table--group::after {
background-color: var(--mes-border) !important;
}
.el-table th {
background: linear-gradient(180deg, #f7fafc 0%, #edf3f8 100%) !important;
color: var(--mes-text) !important;
font-weight: 700;
}
.el-table td {
color: #31465c;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
background-color: #f8fbfd;
}
.el-table__body tr:hover > td {
background-color: #f0f7ff !important;
}
.el-table__body tr.current-row > td {
background: linear-gradient(90deg, #2f8be5 0%, #57a5ec 100%) !important;
color: #fff !important;
}
.block,
.el-pagination {
padding-top: 10px;
}
.el-pagination button,
.el-pagination .el-pager li {
border-radius: 8px;
}
.chartCard {
border: 1px solid var(--mes-border);
border-radius: 14px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 249, 252, 0.98) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.el-tabs__item {
height: 38px;
line-height: 38px;
font-weight: 600;
color: var(--mes-text-soft);
}
.el-tabs__item.is-active {
color: var(--mes-primary);
}
.el-dialog {
border-radius: 16px;
overflow: hidden;
}
.el-dialog__header {
background: linear-gradient(180deg, #f8fbfd 0%, #eef4f9 100%);
border-bottom: 1px solid var(--mes-border);
}
.el-dialog__title {
color: var(--mes-text);
font-weight: 700;
}
}

391
src/views/BasicData/MenuManagement/index.vue
View File

@@ -1,16 +1,36 @@
<template>
<div class="app-container">
<el-row>
<div class="app-container mes-admin-page menu-management-page">
<!-- <div class="heroCard">-->
<!-- <div class="heroContent">-->
<!-- <div class="heroText">-->
<!-- <div class="heroTitle">菜单权限编排</div>-->
<!-- <div class="heroSubtitle">围绕角色完成一级菜单、二级菜单的分配、回收与排序维护。</div>-->
<!-- </div>-->
<!-- <div class="heroActions">-->
<!-- <el-button size="small" type="primary" plain icon="el-icon-plus" @click="addFisrtLevel">-->
<!-- {{ $t('menuManagement.addFirstLevelModule') }}-->
<!-- </el-button>-->
<!-- <div class="roleStatus">-->
<!-- <span class="roleStatusLabel">{{ $t('menuManagement.role') }}</span>-->
<!-- <span class="roleStatusValue">{{ roleName || '&#45;&#45;' }}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<el-row :gutter="18" class="workspaceRow">
<el-col :span="7">
<!-- <el-card style="margin-bottom: 10px">-->
<!-- <el-button size="small" type="distribution" @click="addFisrtLevel">创建一级菜单</el-button>-->
<!-- </el-card>-->
<el-card style="height: 550px">
<div slot="header">
<el-card class="boardCard">
<div slot="header" style="padding: 5px 11px">
<div class="panelHeader">
<div class="panelTitle">{{ $t('menuManagement.firstLevelMenuName') }}</div>
<div class="panelCount">{{ fisrtLevelFilter.length }}</div>
</div>
<el-input v-model="filterTextLeft" clearable :placeholder="$t('menuManagement.filterPlaceholder')" size="small"/>
</div>
<el-table
ref="multipleTableLeft"
class="panelTable"
:data="fisrtLevelFilter"
height="500"
highlight-current-row
@@ -28,44 +48,51 @@
</el-card>
</el-col>
<el-col :span="1">
<el-tooltip class="item" :content="$t('menuManagement.assignFirstLevelTooltip')" effect="dark" placement="top-start">
<el-button
:disabled="!roleName || selectLeft.length === 0"
icon="el-icon-right"
size="mini"
style="margin: 300px auto 0 auto;display: block"
type="primary"
@click="giveFirstLevel"/>
</el-tooltip>
<div class="transferRail">
<el-tooltip class="item" :content="$t('menuManagement.assignFirstLevelTooltip')" effect="dark" placement="top-start">
<el-button
:disabled="!roleName || selectLeft.length === 0"
class="transferButton"
icon="el-icon-right"
size="mini"
type="primary"
@click="giveFirstLevel"/>
</el-tooltip>
</div>
</el-col>
<el-col :span="8">
<!-- <el-card style="margin-bottom: 10px">-->
<!-- -->
<!-- </el-card>-->
<el-card style="height: 550px">
<div slot="header">
<span>{{ $t('menuManagement.role') }}</span>
<el-select
v-model="roleName"
filterable
:placeholder="$t('menuManagement.selectPlaceholder')"
size="small"
style="width:150px;margin-left:10px"
@change="getModule">
<el-option
v-for="item in roleNames"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
<el-input v-model="filterText" clearable :placeholder="$t('menuManagement.filterPlaceholder')" size="small" style="width:200px;margin-left:10px"/>
<el-card class="boardCard centerBoardCard">
<div slot="header" style="padding: 5px 11px">
<div class="panelHeader">
<div class="panelTitle">{{ $t('menuManagement.roleMenuData') }}</div>
<div class="panelCount">{{ moduleTree.length }}</div>
</div>
<div class="panelControls">
<div class="roleSelector">
<span class="fieldLabel">{{ $t('menuManagement.role') }}</span>
<el-select
v-model="roleName"
filterable
:placeholder="$t('menuManagement.selectPlaceholder')"
size="small"
style="width: 150px"
@change="getModule">
<el-option
v-for="item in roleNames"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</div>
<el-input v-model="filterText" clearable :placeholder="$t('menuManagement.filterPlaceholder')" size="small" style="width: 200px"/>
</div>
</div>
<el-tree
ref="moduleTree"
:data="moduleTree"
:filter-node-method="filterNode"
check-strictly
class="moduleTree"
class="moduleTree panelTree"
default-expand-all
node-key="id"
show-checkbox
@@ -98,29 +125,32 @@
</el-card>
</el-col>
<el-col :span="1">
<el-tooltip class="item" :content="$t('menuManagement.assignSecondLevelTooltip')" effect="dark" placement="top-start">
<el-button
:disabled="treeCheckList.length !== 1 || selectRight.length === 0 || treeCheckListJudge"
icon="el-icon-back"
size="mini"
style="margin: 300px auto 0 auto;display: block"
type="primary"
@click="giveSecondLevel"/>
</el-tooltip>
<div class="transferRail">
<el-tooltip class="item" :content="$t('menuManagement.assignSecondLevelTooltip')" effect="dark" placement="top-start">
<el-button
:disabled="treeCheckList.length !== 1 || selectRight.length === 0 || treeCheckListJudge"
class="transferButton"
icon="el-icon-back"
size="mini"
type="primary"
@click="giveSecondLevel"/>
</el-tooltip>
</div>
</el-col>
<el-col :span="7">
<!-- <el-card style="margin-bottom: 10px">-->
<!-- <el-button size="small" type="distribution" @click="addSecondLevel">创建二级菜单</el-button>-->
<!-- <el-button size="small" style="float: right" type="success" @click="RoleNameasdShow=!RoleNameasdShow">-->
<!-- 模块分配情况-->
<!-- </el-button>-->
<!-- </el-card>-->
<el-card style="height: 550px;">
<div slot="header">
<el-card class="boardCard">
<div slot="header" style="padding: 5px 11px">
<div class="panelHeader">
<div class="panelTitle">{{ $t('menuManagement.secondLevelMenuName') }}</div>
<div class="panelCount">{{ secondLevelFilter.length }}</div>
</div>
<el-input v-model="filterTextRight" clearable :placeholder="$t('menuManagement.filterPlaceholder')" size="small"/>
</div>
<el-table
ref="multipleTableRight"
class="panelTable"
:data="secondLevelFilter"
height="500"
highlight-current-row
@@ -139,24 +169,30 @@
</el-col>
</el-row>
<el-row v-show="RoleNameasdShow">
<el-card>
<el-row v-show="RoleNameasdShow" class="statusRow">
<el-card class="statusCard">
<div slot="header">
<el-select
v-model="TitleValue"
filterable
:placeholder="$t('menuManagement.selectPlaceholder')"
size="small"
style="width:200px;margin-left:10px"
@change="getTitle">
<el-option
v-for="item in Title"
:key="item.value"
:label="translateMenuTitle(item.label)"
:value="item.value"/>
</el-select>
<div class="panelHeader">
<div>
<div class="panelTitle">模块分配情况</div>
<div class="panelSubtitle">按菜单查看已分配角色</div>
</div>
<el-select
v-model="TitleValue"
filterable
:placeholder="$t('menuManagement.selectPlaceholder')"
size="small"
style="width: 220px"
@change="getTitle">
<el-option
v-for="item in Title"
:key="item.value"
:label="translateMenuTitle(item.label)"
:value="item.value"/>
</el-select>
</div>
</div>
<el-table :data="RoleNameasd" border height="200" size="mini" stripe style="width: 465px">
<el-table :data="RoleNameasd" border class="statusTable" height="200" size="mini" stripe style="width: 100%">
<el-table-column align="center" :label="$t('menuManagement.sequence')" type="index" width="50"/>
<el-table-column align="center" :label="$t('menuManagement.roleName')" width="400">
<template slot-scope="scope">
@@ -535,12 +571,225 @@ export default {
</script>
<style scoped>
.menu-management-page {
min-height: calc(100vh - 84px);
}
.heroCard {
margin-bottom: 18px;
padding: 18px 22px;
border: 1px solid rgba(207, 220, 232, 0.9);
border-radius: 18px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 247, 252, 0.98) 100%);
box-shadow: 0 14px 34px rgba(31, 57, 90, 0.08);
}
.heroContent {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.heroTitle {
color: #203247;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.01em;
}
.heroSubtitle {
margin-top: 6px;
color: #667a90;
font-size: 13px;
}
.heroActions {
display: flex;
align-items: center;
gap: 12px;
}
.roleStatus {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 0 14px;
border: 1px solid rgba(31, 120, 209, 0.18);
border-radius: 999px;
background: rgba(239, 247, 255, 0.92);
}
.roleStatusLabel {
color: #5f7186;
font-size: 12px;
font-weight: 600;
}
.roleStatusValue {
color: #1f78d1;
font-size: 13px;
font-weight: 700;
}
.workspaceRow {
margin-top: 2px;
}
.panelHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.panelTitle {
color: #203247;
font-size: 15px;
font-weight: 700;
}
.panelSubtitle {
margin-top: 4px;
color: #6e8197;
font-size: 12px;
}
.panelCount {
min-width: 38px;
height: 28px;
padding: 0 10px;
border-radius: 999px;
background: linear-gradient(135deg, #edf6ff 0%, #dbeeff 100%);
color: #1f78d1;
font-size: 13px;
font-weight: 700;
line-height: 28px;
text-align: center;
}
.panelControls {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
flex-wrap: nowrap;
}
.roleSelector {
display: inline-flex;
align-items: center;
gap: 10px;
}
.fieldLabel {
color: #203247;
font-weight: 600;
}
.transferRail {
display: flex;
align-items: center;
justify-content: center;
min-height: 550px;
}
.transferButton {
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 12px 24px rgba(31, 120, 209, 0.16);
}
.panelTree {
min-height: 500px;
max-height: 500px;
overflow: auto;
padding: 6px 4px 0;
}
.panelTable,
.statusTable {
width: 100% !important;
}
.statusRow {
margin-top: 18px;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
gap: 12px;
padding: 6px 8px 6px 2px;
}
::v-deep .boardCard > .el-card__header,
::v-deep .statusCard > .el-card__header {
padding-bottom: 10px;
}
::v-deep .boardCard > .el-card__body,
::v-deep .statusCard > .el-card__body {
//display: flex;
//flex-direction: column;
}
::v-deep .centerBoardCard > .el-card__body {
overflow: visible;
}
::v-deep .panelTree .el-tree-node__content {
height: auto;
min-height: 34px;
border-radius: 10px;
}
::v-deep .panelTree .el-tree-node__content:hover {
background: #eef6ff;
}
::v-deep .custom-tree-node .el-button--text {
padding: 4px 6px;
color: #1f78d1;
}
@media (max-width: 1400px) {
.heroContent {
flex-direction: column;
align-items: flex-start;
}
.heroActions {
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
}
}
@media (max-width: 1200px) {
.workspaceRow {
display: block;
}
.workspaceRow .el-col {
width: 100%;
margin-bottom: 16px;
}
.transferRail {
min-height: auto;
padding: 4px 0;
}
.transferButton {
transform: rotate(90deg);
}
}
</style>

1
src/views/BasicData/PartsNumberMaintenance/index.vue
View File

@@ -809,6 +809,7 @@ export default {
return this.group[i].label
}
}
return ''
}
},
watch: {

392
src/views/BasicData/PersonnelManagement/index.vue
View File

@@ -1,20 +1,21 @@
<template>
<div class="app-container">
<el-row>
<div class="app-container mes-admin-page">
<el-row class="personnel-shell">
<el-col :span="6">
<el-card>
<el-card class="actionCard">
<el-button
icon="el-icon-circle-plus-outline"
size="small"
type="distribution"
@click="handleAdd('department_Form')">{{ $t('personnelManagement.add') }}
@click="handleAdd('department_Form')"
>{{ $t('personnelManagement.add') }}
</el-button>
<el-button icon="el-icon-edit" plain size="small" type="warning" @click="handleEdit()">{{ $t('personnelManagement.edit') }}</el-button>
<el-button icon="el-icon-delete" plain size="small" type="danger" @click="deleteTable()">{{ $t('personnelManagement.delete') }}</el-button>
</el-card>
</el-col>
<el-col :span="18">
<el-card>
<el-card class="actionCard searchCard">
<span>{{ $t('personnelManagement.peopleName') }}</span>
<el-input
v-model="Name"
@@ -22,7 +23,8 @@
clearable
:placeholder="$t('personnelManagement.peopleNamePlaceholder')"
size="small"
style="width: 200px; margin-right: 15px">
style="width: 200px; margin-right: 15px"
>
<el-button slot="append" icon="el-icon-search" @click="fetchPeopleForName"/>
</el-input>
<el-button icon="el-icon-circle-plus-outline" size="small" type="distribution" @click="addPeople()">{{ $t('personnelManagement.add') }}
@@ -37,7 +39,8 @@
plain
size="small"
type="success"
@click="moveGroup">{{ $t('personnelManagement.move') }}
@click="moveGroup"
>{{ $t('personnelManagement.move') }}
</el-button>
<!--<el-button size="small" @click="postMaintain()">岗位维护</el-button>-->
<el-popover
@@ -46,13 +49,15 @@
placement="bottom"
trigger="click"
width="178"
@hide="hide()">
@hide="hide()"
>
<el-dropdown placement="right-start" size="small" style="margin-right: 0">
<el-input
v-model="nodeName1"
:disabled="true"
:placeholder="$t('personnelManagement.selectDepartmentPlaceholder')"
size="small"/>
size="small"
/>
<el-button size="small" style="margin-left: 50px; margin-top: 15px" type="text" @click="moveGroupConfim">
{{ $t('common.confirm') }}
</el-button>
@@ -64,7 +69,8 @@
accordion
node-key="id"
style="width: 200px;margin: 10px"
@node-click="NodeClick"/>
@node-click="NodeClick"
/>
</el-dropdown-menu>
</el-dropdown>
</el-popover>
@@ -72,10 +78,10 @@
</el-col>
</el-row>
<el-row>
<el-row class="personnel-shell contentRow">
<el-col :span="6">
<el-card class="box-card" style="min-height: 600px; max-height: 650px">
<div slot="header" class="clearfix">
<el-card class="box-card departmentCard" style="min-height: 600px; max-height: 650px">
<div slot="header" class="clearfix" style="display: flex; align-items: center;justify-content: space-between;">
<span>{{ $t('personnelManagement.departmentMaintenance') }}</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="expandALL()">{{ $t('personnelManagement.expand') }}</el-button>
</div>
@@ -88,12 +94,13 @@
default-expand-all
node-key="id"
show-checkbox
@check-change="handleClick"/>
@check-change="handleClick"
/>
</div>
</el-card>
</el-col>
<el-col :span="18">
<el-card>
<el-card class="tableCard">
<el-table
ref="multipleTable"
:data="List"
@@ -102,11 +109,13 @@
size="mini"
style="width: 100%"
tooltip-effect="dark"
@selection-change="handleSelectionChange">
@selection-change="handleSelectionChange"
>
<el-table-column
align="center"
type="selection"
width="50"/>
width="50"
/>
<el-table-column align="center" type="index" :label="$t('personnelManagement.sequence')" />
<!--<el-table-column align="center" label="照片" width="200">-->
<!-- <template slot-scope="scope">-->
@@ -171,11 +180,11 @@
<!-- {{ scope.row.身份证号 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="学历" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.学历名称 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="学历" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.学历名称 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="入职时间" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{-->
@@ -190,16 +199,16 @@
<!-- }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="联系方式" width="110">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.联系电话 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="班组" width="110">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.班组名称 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="联系方式" width="110">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.联系电话 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="班组" width="110">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.班组名称 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="民族" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.民族 }}-->
@@ -222,7 +231,8 @@
icon="el-icon-edit"
size="mini"
type="primary"
@click="handleEditPeople(scope.row)">{{ $t('personnelManagement.edit') }}
@click="handleEditPeople(scope.row)"
>{{ $t('personnelManagement.edit') }}
</el-button>
<!--<el-button-->
<!--size="mini"-->
@@ -240,7 +250,8 @@
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"/>
@current-change="handleCurrentChange"
/>
</div>
</el-card>
</el-col>
@@ -253,14 +264,16 @@
:visible.sync="department_DFV"
center
style="min-height: 200px"
width="400px">
width="400px"
>
<el-form
ref="department_Form"
:model="department_Form"
:rules="rules"
class="demo-ruleForm"
label-position="left"
label-width="110px">
label-width="110px"
>
<el-form-item :label="$t('personnelManagement.departmentName')" prop="DepartmentName">
<el-input v-model="department_Form.DepartmentName" size="small" style="width:200px"/>
</el-form-item>
@@ -271,13 +284,15 @@
v-if="department_Title==='add'"
:disabled="handleAdd_disable"
type="primary"
@click="submitAdd('department_Form')">{{ $t('common.confirm') }}
@click="submitAdd('department_Form')"
>{{ $t('common.confirm') }}
</el-button>
<el-button
v-else-if="department_Title==='edit'"
:disabled="handleAdd_disable"
type="primary"
@click="submitEdit('department_Form')">{{ $t('common.confirm') }}
@click="submitEdit('department_Form')"
>{{ $t('common.confirm') }}
</el-button>
</div>
</el-dialog>
@@ -288,14 +303,16 @@
:visible.sync="people_DFV"
center
style="min-height: 200px"
width="400px">
width="400px"
>
<el-form
ref="people_form"
:model="people_form"
:rules="rules"
class="demo-ruleForm"
label-position="left"
label-width="110px">
label-width="110px"
>
<el-row>
<el-form-item :label="$t('personnelManagement.employeeName')" prop="Name">
<el-input v-model="people_form.Name" size="small" style="width:200px"/>
@@ -307,76 +324,75 @@
<el-input v-model="people_form.Password" size="small" style="width:200px"/>
</el-form-item>
<!-- <el-col :span="12">-->
<!-- <el-form-item label="性别" prop="Sex">-->
<!-- <el-select v-model="people_form.Sex" clearable placeholder="请选择性别" size="small" style="width: 200px">-->
<!-- <el-option-->
<!-- v-for="item in SexData"-->
<!-- :key="item.value"-->
<!-- :label="item.label"-->
<!-- :value="item.value"/>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="出生日期" prop="Birthday">-->
<!-- <el-date-picker-->
<!-- v-model="people_form.Birthday"-->
<!-- placeholder="请选择出生日期"-->
<!-- size="small"-->
<!-- style="width: 200px"-->
<!-- type="date"-->
<!-- value-format="yyyy-MM-dd"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="身份证号" prop="IDcard">-->
<!-- <el-input v-model="people_form.IDcard" size="small" style="width:200px"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="入职时间" prop="TimeOfEntry">-->
<!-- <el-date-picker-->
<!-- v-model="people_form.TimeOfEntry"-->
<!-- placeholder="请选择入职时间"-->
<!-- size="small"-->
<!-- style="width: 200px"-->
<!-- type="date"-->
<!-- value-format="yyyy-MM-dd"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="联系方式" prop="ContactInformation">-->
<!-- <el-input v-model="people_form.ContactInformation" size="small" style="width:200px"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="学历" prop="Education">-->
<!-- <el-select-->
<!-- v-model="people_form.Education"-->
<!-- clearable-->
<!-- placeholder="请选择学历"-->
<!-- size="small"-->
<!-- style="width: 200px">-->
<!-- <el-option-->
<!-- v-for="item in EducationDate"-->
<!-- :key="item.value"-->
<!-- :label="item.label"-->
<!-- :value="item.value"/>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="家庭住址" prop="Address">-->
<!-- <el-input v-model="people_form.Address" size="small" style="width:200px"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="民族" prop="Nation">-->
<!-- <el-input v-model="people_form.Nation" size="small" style="width:200px"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="性别" prop="Sex">-->
<!-- <el-select v-model="people_form.Sex" clearable placeholder="请选择性别" size="small" style="width: 200px">-->
<!-- <el-option-->
<!-- v-for="item in SexData"-->
<!-- :key="item.value"-->
<!-- :label="item.label"-->
<!-- :value="item.value"/>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="出生日期" prop="Birthday">-->
<!-- <el-date-picker-->
<!-- v-model="people_form.Birthday"-->
<!-- placeholder="请选择出生日期"-->
<!-- size="small"-->
<!-- style="width: 200px"-->
<!-- type="date"-->
<!-- value-format="yyyy-MM-dd"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="身份证号" prop="IDcard">-->
<!-- <el-input v-model="people_form.IDcard" size="small" style="width:200px"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="入职时间" prop="TimeOfEntry">-->
<!-- <el-date-picker-->
<!-- v-model="people_form.TimeOfEntry"-->
<!-- placeholder="请选择入职时间"-->
<!-- size="small"-->
<!-- style="width: 200px"-->
<!-- type="date"-->
<!-- value-format="yyyy-MM-dd"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="联系方式" prop="ContactInformation">-->
<!-- <el-input v-model="people_form.ContactInformation" size="small" style="width:200px"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="学历" prop="Education">-->
<!-- <el-select-->
<!-- v-model="people_form.Education"-->
<!-- clearable-->
<!-- placeholder="请选择学历"-->
<!-- size="small"-->
<!-- style="width: 200px">-->
<!-- <el-option-->
<!-- v-for="item in EducationDate"-->
<!-- :key="item.value"-->
<!-- :label="item.label"-->
<!-- :value="item.value"/>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="家庭住址" prop="Address">-->
<!-- <el-input v-model="people_form.Address" size="small" style="width:200px"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="民族" prop="Nation">-->
<!-- <el-input v-model="people_form.Nation" size="small" style="width:200px"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!--<el-col :span="12">-->
<!-- <el-form-item label="职称" prop="Post">-->
<!-- <el-select-->
@@ -413,14 +429,16 @@
:disabled="addPeople_disable"
:loading="btnLoading"
type="primary"
@click="submitAddPeople">{{ $t('common.confirm') }}
@click="submitAddPeople"
>{{ $t('common.confirm') }}
</el-button>
<el-button
v-else-if="people_title === 'edit'"
:disabled="addPeople_disable"
:loading="btnLoading"
type="primary"
@click="submitEditPeople">{{ $t('common.confirm') }}
@click="submitEditPeople"
>{{ $t('common.confirm') }}
</el-button>
</div>
</el-dialog>
@@ -432,7 +450,8 @@
center
style="height: 800px"
:title="$t('personnelManagement.resignedList')"
width="40%">
width="40%"
>
<el-table
:data="LeavingList"
border
@@ -441,7 +460,8 @@
size="mini"
stripe
style="width: 100%"
tooltip-effect="dark">
tooltip-effect="dark"
>
<el-table-column align="center" type="index" :label="$t('personnelManagement.sequence')" />
<el-table-column align="center" :label="$t('personnelManagement.departmentName')" width="100">
<template slot-scope="scope">
@@ -463,62 +483,63 @@
{{ scope.row.姓名 }}
</template>
</el-table-column>
<!-- <el-table-column align="center" label="性别" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.性别 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="身份证号" width="165">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.身份证号 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="学历" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.学历名称 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="入职时间" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{-->
<!-- scope.row.入公司时间 !== '' && scope.row.入公司时间 !== null ? scope.row.入公司时间 = scope.row.入公司时间.split(' ')[0] : scope.row.入公司时间-->
<!-- }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="出生日期" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{-->
<!-- scope.row.出生日期 !== '' && scope.row.出生日期 !== null ? scope.row.出生日期 = scope.row.出生日期.split(' ')[0] : scope.row.出生日期-->
<!-- }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="联系方式" width="110">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.联系电话 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="性别" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.性别 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="身份证号" width="165">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.身份证号 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="学历" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.学历名称 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="入职时间" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{-->
<!-- scope.row.入公司时间 !== '' && scope.row.入公司时间 !== null ? scope.row.入公司时间 = scope.row.入公司时间.split(' ')[0] : scope.row.入公司时间-->
<!-- }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="出生日期" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{-->
<!-- scope.row.出生日期 !== '' && scope.row.出生日期 !== null ? scope.row.出生日期 = scope.row.出生日期.split(' ')[0] : scope.row.出生日期-->
<!-- }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="联系方式" width="110">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.联系电话 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="岗位工种" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.岗位名称 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="民族" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.民族 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="家庭住址">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.家庭住址 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="民族" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.民族 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="家庭住址">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.家庭住址 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column align="center" :label="$t('personnelManagement.operation')" width="100">
<template slot-scope="scope">
<el-button
icon="el-icon-circle-close-outline"
size="mini"
type="danger"
@click="deletePeople(scope.row)">{{ $t('personnelManagement.delete') }}
@click="deletePeople(scope.row)"
>{{ $t('personnelManagement.delete') }}
</el-button>
</template>
</el-table-column>
@@ -531,7 +552,8 @@
:total="totalN"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChangeN"
@current-change="handleCurrentChangeN"/>
@current-change="handleCurrentChangeN"
/>
</div>
</el-dialog>
<el-dialog
@@ -540,7 +562,8 @@
center
style="height: 800px"
:title="$t('personnelManagement.uploadPicture')"
width="300px">
width="300px"
>
<el-upload
id="invoiceScan"
ref="upload"
@@ -556,7 +579,8 @@
:on-remove="handelLimitStyle"
:on-success="uploadSuccess"
list-type="picture-card"
style="margin-left: 60px">
style="margin-left: 60px"
>
<i class="el-icon-plus"/>
</el-upload>
<div slot="footer" class="dialog-footer">
@@ -1257,5 +1281,49 @@ export default {
</script>
<style scoped>
.personnel-shell {
margin-bottom: 14px;
}
.actionCard,
.departmentCard,
.tableCard {
border-radius: 14px;
}
.searchCard {
min-height: 64px;
}
.contentRow ::v-deep .el-card__body {
padding: 14px !important;
}
.departmentCard {
background: linear-gradient(180deg, rgba(252, 253, 255, 0.98) 0%, rgba(244, 248, 252, 0.98) 100%);
}
.tableCard {
min-height: 650px;
}
::v-deep .departmentCard .el-card__header {
display: flex;
align-items: center;
justify-content: space-between;
}
::v-deep .departmentCard .el-tree {
padding: 4px 2px;
background: transparent;
}
::v-deep .departmentCard .el-tree-node__content,
::v-deep .departmentCard .el-tree-node__label {
font-size: 13px;
}
::v-deep .tableCard .el-table {
margin-top: 0;
}
</style>

2
src/views/BasicData/SystemRrolemaintenance/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="app-container">
<div class="app-container mes-admin-page">
<el-card>
<!--<el-input v-model="RoleFunctioning" size="small" clearable placeholder="请输入角色功能" style="width:200px"/>-->
<!--<el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 15px" plain @click="searchData()">查询</el-button>-->

2
src/views/BasicData/WorkshopPersonnelRoleMana/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="app-container">
<div class="app-container mes-admin-page">
<el-card>
<div style="margin-top: 7px; margin-bottom: 7px">
<el-input v-model="staffName" :placeholder="$t('workshopPersonnelRoleMana.staffName')" size="small" clearable style="width:200px"/>

2
src/views/BasicDataMaintenance/StationInformationMaintenance/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="app-container">
<div class="app-container mes-admin-page">
<el-card>
<el-table
v-loading="loading"

20
src/views/ProcessManagement/MaterialVerificationMaintenance/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<div class="app-container mes-admin-page">
<el-card class="topCard">
<div class="topDiv">
<div class="topDiv materialToolbar">
<span style="margin-left: 10px">{{ $t('materialVerificationMaintenance.stationNumberLabel') }}</span>
<el-select v-model="stationNumberValue" clearable :placeholder="$t('materialVerificationMaintenance.selectStationNumber')" size="small" style="width: 250px" @change="searchOrder">
<el-option
@@ -46,6 +46,7 @@
<!-- <el-button type="info" plain size="small" icon="el-icon-upload2" @click="importOrder('form')">物料导入</el-button>-->
<el-button type="warning" plain size="small" icon="el-icon-download" @click="exportExcel()">{{ $t('materialVerificationMaintenance.exportMaterial') }}</el-button>
</div>
<div class="tablePanel">
<el-table
v-loading="loading"
ref="multipleTable"
@@ -149,6 +150,7 @@
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" :title="$t('materialVerificationMaintenance.createMaterial')" center style="min-height: 200px;" width="800px">
<el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="120px">
@@ -1239,6 +1241,16 @@ export default {
.topDiv{
margin-bottom: 10px;
}
.materialToolbar {
align-items: flex-end;
}
.tablePanel {
padding-top: 4px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.52) 0%, rgba(243,248,252,0.92) 100%);
}
.el-select{
width:200px
}
@@ -1273,4 +1285,8 @@ export default {
::v-deep.el-input.is-disabled .el-input__inner{
background-color: white!important;
}
::v-deep .materialToolbar .el-button {
margin-bottom: 2px;
}
</style>

259
src/views/QualityAssurance/AssemblyQualitydataQuery/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<div class="app-container mes-admin-page">
<el-card class="topCard">
<div class="topDiv">
<div class="topDiv queryToolbar">
<div>
<!--<span style="margin-left: 10px">制造编号：</span>-->
<!--<el-input v-model="workCode" placeholder="制造编号" clearable size="small" style="width: 200px; margin-left: 13px"/>-->
@@ -123,116 +123,118 @@
<!-- size="mini"/>-->
<!-- </el-select>-->
</div>
<el-table
v-loading="loading"
ref="multipleTable"
:data="tableData"
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
:cell-class-name="tableRowClassName"
:element-loading-text="$t('assemblyQualitydataQuery.loadingData')"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.2)"
class="main"
tooltip-effect="dark"
height="600px"
style="width: 100%"
border
size="mini">
<!-- <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
<el-table-column type="index" width="60" :label="$t('assemblyQualitydataQuery.sequence')" align="center"/>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.orderNumber')">
<template slot-scope="scope">
{{ scope.row.订单号 }}
</template>
</el-table-column>
<el-table-column align="center" width="100px" :label="$t('assemblyQualitydataQuery.stationNumber')">
<template slot-scope="scope">
{{ scope.row.工位号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.productNumber')">
<template slot-scope="scope">
{{ scope.row.发动机号 }}
</template>
</el-table-column>
<div class="tablePanel">
<el-table
v-loading="loading"
ref="multipleTable"
:data="tableData"
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
:cell-class-name="tableRowClassName"
:element-loading-text="$t('assemblyQualitydataQuery.loadingData')"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.2)"
class="main assemblyTable"
tooltip-effect="dark"
height="600px"
style="width: 100%"
border
size="mini">
<!-- <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
<el-table-column type="index" width="60" :label="$t('assemblyQualitydataQuery.sequence')" align="center"/>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.orderNumber')">
<template slot-scope="scope">
{{ scope.row.订单号 }}
</template>
</el-table-column>
<el-table-column align="center" width="100px" :label="$t('assemblyQualitydataQuery.stationNumber')">
<template slot-scope="scope">
{{ scope.row.工位号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.productNumber')">
<template slot-scope="scope">
{{ scope.row.发动机号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.productModel')">
<template slot-scope="scope">
{{ scope.row.发动机型号 }}
</template>
</el-table-column>
<!--<el-table-column align="center" label="制造编号">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.制造编号 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<!--<el-table-column align="center" label="项目名称">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.项目名称 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<!--<el-table-column align="center" label="间隔号">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.间隔号 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<!--<el-table-column align="center" label="DS/ES编号">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.单元号 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.productModel')">
<template slot-scope="scope">
{{ scope.row.发动机型号 }}
</template>
</el-table-column>
<!--<el-table-column align="center" label="制造编号">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.制造编号 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<!--<el-table-column align="center" label="项目名称">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.项目名称 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<!--<el-table-column align="center" label="间隔号">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.间隔号 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<!--<el-table-column align="center" label="DS/ES编号">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.单元号 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<!--<el-table-column align="center" label="工位名称">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.工位名称 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<el-table-column align="center" width="150px" :label="$t('assemblyQualitydataQuery.measuringPosition')">
<template slot-scope="scope">
{{ scope.row.测量位置 }}
</template>
</el-table-column>
<el-table-column align="center" width="100px" :label="$t('assemblyQualitydataQuery.measuringProject')">
<template slot-scope="scope">
{{ scope.row.测量项目 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.measuringValue')" width="120px">
<template slot-scope="scope">
{{ scope.row.测量值 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.measuringUnit')" width="80px">
<template slot-scope="scope">
{{ scope.row.测量单位 }}
</template>
</el-table-column>
<!-- <el-table-column align="center" label="理论值" width="80px">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.理论值 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.upperLimit')" width="100px">
<template slot-scope="scope">
{{ scope.row.上限值 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.lowerLimit')" width="100px">
<template slot-scope="scope">
{{ scope.row.下限值 }}
</template>
</el-table-column>
<el-table-column align="center" width="150px" :label="$t('assemblyQualitydataQuery.productionDate')">
<template slot-scope="scope">
{{ scope.row.生产日期 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.qualifiedFlag')" width="110px">
<template slot-scope="scope">
{{ scope.row.合格标志 }}
</template>
</el-table-column>
</el-table>
<!--<el-table-column align="center" label="工位名称">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.工位名称 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<el-table-column align="center" width="150px" :label="$t('assemblyQualitydataQuery.measuringPosition')">
<template slot-scope="scope">
{{ scope.row.测量位置 }}
</template>
</el-table-column>
<el-table-column align="center" width="100px" :label="$t('assemblyQualitydataQuery.measuringProject')">
<template slot-scope="scope">
{{ scope.row.测量项目 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.measuringValue')" width="120px">
<template slot-scope="scope">
{{ scope.row.测量值 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.measuringUnit')" width="80px">
<template slot-scope="scope">
{{ scope.row.测量单位 }}
</template>
</el-table-column>
<!-- <el-table-column align="center" label="理论值" width="80px">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.理论值 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.upperLimit')" width="100px">
<template slot-scope="scope">
{{ scope.row.上限值 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.lowerLimit')" width="100px">
<template slot-scope="scope">
{{ scope.row.下限值 }}
</template>
</el-table-column>
<el-table-column align="center" width="150px" :label="$t('assemblyQualitydataQuery.productionDate')">
<template slot-scope="scope">
{{ scope.row.生产日期 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.qualifiedFlag')" width="110px">
<template slot-scope="scope">
{{ scope.row.合格标志 }}
</template>
</el-table-column>
</el-table>
</div>
<div class="block" style="margin-top: 10px;">
<el-pagination
v-if="!loading"
@@ -600,4 +602,41 @@ export default {
.topDiv{
margin-bottom: 10px;
}
.queryToolbar {
align-items: flex-end;
}
.tablePanel {
width: 100%;
max-width: 100%;
padding-top: 4px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(243,247,251,0.94) 100%);
overflow-x: auto;
}
.assemblyTable {
width: 100% !important;
max-width: 100%;
}
.panelHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.panelTitle {
color: #203247;
font-size: 15px;
font-weight: 700;
}
.panelSubtitle {
color: #6b7f93;
font-size: 12px;
margin-top: 3px;
}
.compactHeader {
padding: 0 2px;
}
::v-deep .queryToolbar .el-button {
margin-bottom: 2px;
}
</style>

225
src/views/QualityAssurance/InquiryTransitInformation/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<div class="app-container mes-admin-page">
<el-card class="topCard">
<div class="topDiv">
<div class="topDiv queryToolbar">
<!--<div>-->
<!-- <span style="margin-left: 10px">制造编号：</span>-->
<!-- <el-input v-model="workCode" placeholder="制造编号" clearable size="small" style="width: 150px; margin-left: 5px"/>-->
@@ -103,97 +103,98 @@
</el-button>
<el-button icon="el-icon-download" size="small" type="info" @click="exportExcel()">Excel</el-button>
</div>
<el-table
v-loading="loading"
ref="multipleTable"
:cell-class-name="tableRowClassName"
:data="tableData"
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
border
class="main"
element-loading-background="rgba(0, 0, 0, 0.2)"
element-loading-spinner="el-icon-loading"
:element-loading-text="$t('inquiryTransitInformation.loadingData')"
height="600px"
size="mini"
style="width: 100%;max-height: 650px;margin-top: 10px"
tooltip-effect="dark">
<!-- <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
<el-table-column align="center" :label="$t('inquiryTransitInformation.sequence')" type="index" width="60"/>
<el-table-column align="center" :label="$t('inquiryTransitInformation.stationNumber')" width="120">
<template slot-scope="scope">
{{ scope.row.工位号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.orderNumber')">
<template slot-scope="scope">
{{ scope.row.订单号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.productNumber')">
<template slot-scope="scope">
{{ scope.row.发动机号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.productModel')">
<template slot-scope="scope">
{{ scope.row.机型 }}
</template>
</el-table-column>
<!--<el-table-column align="center" label="制造编号">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.制造编号 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<!--<el-table-column align="center" label="项目名称">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.项目名称 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<!--<el-table-column align="center" label="间隔号">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.间隔号 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<!--<el-table-column align="center" label="DS/ES编号">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.单元号 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<el-table-column align="center" :label="$t('inquiryTransitInformation.arrivalTime')">
<template slot-scope="scope">
{{ scope.row.到达时间 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.departureTime')">
<template slot-scope="scope">
{{ scope.row.离开时间 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.onlineTimeSeconds')">
<template slot-scope="scope">
{{ scope.row.在线时间 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.isQualified')" width="80px">
<template slot-scope="scope">
{{ scope.row.是否合格 }}
</template>
</el-table-column>
<!-- <el-table-column align="center" label="是否报工" width="80px">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.是否完成报工 ? '是' : '否' }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="操作时间">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.操作时间 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
<div class="block" style="margin-top: 10px;">
<div class="tablePanel">
<el-table
v-loading="loading"
ref="multipleTable"
:cell-class-name="tableRowClassName"
:data="tableData"
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
border
class="main transitTable"
element-loading-background="rgba(0, 0, 0, 0.2)"
element-loading-spinner="el-icon-loading"
:element-loading-text="$t('inquiryTransitInformation.loadingData')"
height="600px"
size="mini"
style="width: 100%"
tooltip-effect="dark">
<!-- <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
<el-table-column align="center" :label="$t('inquiryTransitInformation.sequence')" type="index" width="60"/>
<el-table-column align="center" :label="$t('inquiryTransitInformation.stationNumber')" width="120">
<template slot-scope="scope">
{{ scope.row.工位号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.orderNumber')">
<template slot-scope="scope">
{{ scope.row.订单号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.productNumber')">
<template slot-scope="scope">
{{ scope.row.发动机号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.productModel')">
<template slot-scope="scope">
{{ scope.row.机型 }}
</template>
</el-table-column>
<!--<el-table-column align="center" label="制造编号">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.制造编号 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<!--<el-table-column align="center" label="项目名称">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.项目名称 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<!--<el-table-column align="center" label="间隔号">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.间隔号 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<!--<el-table-column align="center" label="DS/ES编号">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.单元号 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<el-table-column align="center" :label="$t('inquiryTransitInformation.arrivalTime')">
<template slot-scope="scope">
{{ scope.row.到达时间 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.departureTime')">
<template slot-scope="scope">
{{ scope.row.离开时间 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.onlineTimeSeconds')">
<template slot-scope="scope">
{{ scope.row.在线时间 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.isQualified')" width="80px">
<template slot-scope="scope">
{{ scope.row.是否合格 }}
</template>
</el-table-column>
<!-- <el-table-column align="center" label="是否报工" width="80px">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.是否完成报工 ? '是' : '否' }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="操作时间">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.操作时间 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</div>
<div class="block paginationWrap">
<el-pagination
v-if="!loading"
:current-page="pageCurrent"
@@ -456,7 +457,45 @@ export default {
margin: 5px;
}
::v-deep .topCard > .el-card__body {
display: block !important;
width: 100%;
}
.topDiv {
margin-bottom: 10px;
//margin-bottom: 10px;
}
.queryToolbar {
//align-items: flex-end;
}
.contentStack {
display: block;
width: 100%;
clear: both;
}
.tablePanel {
display: block;
width: 100%;
padding-top: 4px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(243,247,251,0.94) 100%);
overflow-x: auto;
}
.transitTable {
width: 100% !important;
max-width: 100%;
}
.paginationWrap {
display: block;
width: 100%;
}
::v-deep .queryToolbar .el-button {
margin-bottom: 2px;
}
</style>

101
src/views/QualityAssurance/MaterialDataQuery/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="app-container">
<div class="app-container mes-admin-page">
<el-card class="topCard">
<div class="topDiv">
<div class="topDiv queryToolbar">
<div>
<span style="margin-left: 10px;margin-right: 1px;letter-spacing: 3px">{{ $t('materialDataQuery.stationNumberLabel') }}</span>
<el-select
@@ -111,21 +111,23 @@
<!-- size="mini"/>-->
<!-- </el-select>-->
</div>
<el-table
v-loading="loading"
ref="multipleTable"
:cell-class-name="tableRowClassName"
:data="tableData"
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
border
class="main"
element-loading-background="rgba(0, 0, 0, 0.2)"
element-loading-spinner="el-icon-loading"
:element-loading-text="$t('materialDataQuery.loadingData')"
height="560px"
size="mini"
style="width: 100%"
tooltip-effect="dark">
<div class="contentStack">
<div class="tablePanel">
<el-table
v-loading="loading"
ref="multipleTable"
:cell-class-name="tableRowClassName"
:data="tableData"
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
border
class="main materialTable"
element-loading-background="rgba(0, 0, 0, 0.2)"
element-loading-spinner="el-icon-loading"
:element-loading-text="$t('materialDataQuery.loadingData')"
height="560px"
size="mini"
style="width: 100%"
tooltip-effect="dark">
<!-- <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
<el-table-column align="center" :label="$t('materialDataQuery.sequence')" type="index" width="60"/>
<el-table-column align="center" :label="$t('materialDataQuery.orderNumber')" width="120px">
@@ -195,17 +197,19 @@
{{ scope.row.操作时间 }}
</template>
</el-table-column>
</el-table>
<div class="block" style="margin-top: 10px;">
<el-pagination
v-if="!loading"
:current-page="pageCurrent"
:page-size="pageSize"
:page-sizes="[15, 30, 40]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"/>
</el-table>
</div>
<div class="block paginationWrap">
<el-pagination
v-if="!loading"
:current-page="pageCurrent"
:page-size="pageSize"
:page-sizes="[15, 30, 40]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"/>
</div>
</div>
</div>
</el-card>
@@ -524,7 +528,48 @@ export default {
margin: 5px;
}
::v-deep .topCard > .el-card__body {
display: block !important;
width: 100%;
}
.topDiv {
margin-bottom: 10px;
}
.queryToolbar {
align-items: flex-end;
}
.contentStack {
display: block;
width: 100%;
clear: both;
}
.tablePanel {
display: block;
width: 100%;
max-width: 100%;
padding-top: 4px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(243,247,251,0.94) 100%);
overflow-x: auto;
}
.materialTable {
width: 100% !important;
max-width: 100%;
}
.paginationWrap {
display: block;
width: 100%;
margin-top: 10px;
text-align: right;
}
::v-deep .queryToolbar .el-button {
margin-bottom: 2px;
}
</style>

283
src/views/QualityAssurance/OffLinePartCount/index.vue
View File

@@ -1,128 +1,142 @@
<template>
<el-card class="topCard">
<el-row class="toolbarRow">
<span class="promptText">{{ $t('offLinePartCount.productionTimeLabel') }}</span>
<el-date-picker
v-model="dateTime"
:clearable="false"
align="center"
:end-placeholder="$t('offLinePartCount.endDate')"
format="yyyy-MM-dd"
:range-separator="$t('offLinePartCount.dateRangeSeparator')"
size="small"
:start-placeholder="$t('offLinePartCount.startDate')"
style="width: 240px"
type="daterange"
value-format="yyyy-MM-dd"
/>
<span style="margin-left: 10px">{{ $t('offLinePartCount.orderNumberLabel') }}</span>
<el-input
v-model="orderNumberValue"
:placeholder="$t('offLinePartCount.orderNumberPlaceholder')"
clearable
size="small"
style="width: 150px"
/>
<span class="promptText">{{ $t('offLinePartCount.productModelLabel') }}</span>
<el-select
v-model="engineTypeValue"
:placeholder="$t('offLinePartCount.selectProductModel')"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="item in engineType"
:key="item.value"
:label="item.label"
:value="item.value"
size="mini"
/>
</el-select>
<span class="promptText">{{ $t('offLinePartCount.trendGranularityLabel') }}</span>
<el-radio-group v-model="trendMode" size="small">
<el-radio-button label="day">{{ $t('offLinePartCount.byDay') }}</el-radio-button>
<el-radio-button label="hour">{{ $t('offLinePartCount.byHour') }}</el-radio-button>
</el-radio-group>
<el-button
class="functionButton"
type="primary"
size="small"
icon="el-icon-search"
plain
@click="searchTable(true)"
>{{ $t('offLinePartCount.search') }}</el-button>
<el-button
type="info"
style="margin-left: 0"
icon="el-icon-document"
size="small"
plain
@click="exportExcel()"
>{{ $t('offLinePartCount.export') }}</el-button>
<span v-show="isExporting" style="color: #16a188">{{ $t('offLinePartCount.exporting') }}</span>
</el-row>
<el-row>
<div class="chartCard">
<div id="offlineTrendChart" class="chartDom" />
</div>
</el-row>
<el-row>
<div>
<el-table
v-loading="loading"
:data="tableData"
highlight-current-row
border
stripe
class="tableCustomization"
height="600px"
style="width: 100%"
>
<el-table-column
type="index"
<div class="app-container mes-admin-page">
<el-card class="topCard">
<el-row>
<div class="toolbarRow">
<span class="promptText">{{ $t('offLinePartCount.productionTimeLabel') }}</span>
<el-date-picker
v-model="dateTime"
:clearable="false"
align="center"
:label="$t('offLinePartCount.sequence')"
width="90px"
:end-placeholder="$t('offLinePartCount.endDate')"
format="yyyy-MM-dd"
:range-separator="$t('offLinePartCount.dateRangeSeparator')"
size="small"
:start-placeholder="$t('offLinePartCount.startDate')"
style="width: 240px"
type="daterange"
value-format="yyyy-MM-dd"
/>
<el-table-column width="200px" :label="$t('offLinePartCount.orderNumber')" align="center">
<template slot-scope="scope">
{{ scope.row.订单号 }}
</template>
</el-table-column>
<el-table-column min-width="240px" :label="$t('offLinePartCount.productNumber')" align="center">
<template slot-scope="scope">
{{ scope.row.发动机号 }}
</template>
</el-table-column>
<el-table-column :label="$t('offLinePartCount.productModel')" width="200px" align="center">
<template slot-scope="scope">
{{ scope.row.机型 }}
</template>
</el-table-column>
<el-table-column :label="$t('offLinePartCount.offlineTime')" width="250px" align="center">
<template slot-scope="scope">
{{ scope.row.离开时间 }}
</template>
</el-table-column>
</el-table>
<div class="block" style="margin-top: 10px">
<el-pagination
:current-page="pageCurrent"
:page-sizes="[15, 30, 40]"
:page-size="pageSize"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChanges"
@current-change="handleCurrentChanges"
<span style="margin-left: 10px">{{ $t('offLinePartCount.orderNumberLabel') }}</span>
<el-input
v-model="orderNumberValue"
:placeholder="$t('offLinePartCount.orderNumberPlaceholder')"
clearable
size="small"
style="width: 150px"
/>
<span class="promptText" style="margin-left: 10px">{{ $t('offLinePartCount.productModelLabel') }}</span>
<el-select
v-model="engineTypeValue"
:placeholder="$t('offLinePartCount.selectProductModel')"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="item in engineType"
:key="item.value"
:label="item.label"
:value="item.value"
size="mini"
/>
</el-select>
</div>
</div>
</el-row>
</el-card>
<div style="margin-top: 10px" class="toolbarRow">
<span class="promptText">{{ $t('offLinePartCount.trendGranularityLabel') }}</span>
<el-radio-group v-model="trendMode" size="small">
<el-radio-button label="day">{{ $t('offLinePartCount.byDay') }}</el-radio-button>
<el-radio-button label="hour">{{ $t('offLinePartCount.byHour') }}</el-radio-button>
</el-radio-group>
<el-button
class="functionButton"
type="primary"
size="small"
icon="el-icon-search"
plain
@click="searchTable(true)"
style="margin-left: 10px"
>{{ $t('offLinePartCount.search') }}</el-button>
<el-button
type="info"
style="margin-left: 10px"
icon="el-icon-document"
size="small"
plain
@click="exportExcel()"
>{{ $t('offLinePartCount.export') }}</el-button>
</div>
<span v-show="isExporting" style="color: #16a188">{{ $t('offLinePartCount.exporting') }}</span>
</el-row>
<el-row>
<div class="chartCard">
<div id="offlineTrendChart" class="chartDom" />
</div>
</el-row>
<el-row>
<div class="tablePanel">
<div class="panelHeader compactHeader">
<div>
<div class="panelTitle">{{ $t('offLinePartCount.detailTitle') }}</div>
<div class="panelSubtitle">{{ $t('offLinePartCount.detailSubtitle') }}</div>
</div>
</div>
<el-table
v-loading="loading"
:data="tableData"
highlight-current-row
border
stripe
class="tableCustomization"
height="600px"
style="width: 100%"
>
<el-table-column
type="index"
align="center"
:label="$t('offLinePartCount.sequence')"
width="90px"
/>
<el-table-column width="200px" :label="$t('offLinePartCount.orderNumber')" align="center">
<template slot-scope="scope">
{{ scope.row.订单号 }}
</template>
</el-table-column>
<el-table-column min-width="240px" :label="$t('offLinePartCount.productNumber')" align="center">
<template slot-scope="scope">
{{ scope.row.发动机号 }}
</template>
</el-table-column>
<el-table-column :label="$t('offLinePartCount.productModel')" width="200px" align="center">
<template slot-scope="scope">
{{ scope.row.机型 }}
</template>
</el-table-column>
<el-table-column :label="$t('offLinePartCount.offlineTime')" width="250px" align="center">
<template slot-scope="scope">
{{ scope.row.离开时间 }}
</template>
</el-table-column>
</el-table>
<div class="block" style="margin-top: 10px">
<el-pagination
:current-page="pageCurrent"
:page-sizes="[15, 30, 40]"
:page-size="pageSize"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChanges"
@current-change="handleCurrentChanges"
/>
</div>
</div>
</el-row>
</el-card>
</div>
</template>
<script>
@@ -417,4 +431,33 @@ export default {
width: 100%;
height: 360px;
}
.panelHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.panelTitle {
color: #203247;
font-size: 15px;
font-weight: 700;
}
.panelSubtitle {
color: #6b7f93;
font-size: 12px;
margin-top: 3px;
}
.compactHeader {
padding: 0 2px;
}
.tablePanel {
padding-top: 4px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.54) 0%, rgba(243,247,251,0.94) 100%);
}
</style>

246
src/views/QualityAssurance/StationBeat/index.vue
View File

@@ -1,109 +1,115 @@
<template>
<el-card class="topCard">
<el-row class="toolbarRow">
<span class="promptText">{{ $t('stationBeat.productionTimeLabel') }}</span>
<el-date-picker
v-model="dateTime"
:clearable="false"
align="center"
:end-placeholder="$t('stationBeat.endDate')"
format="yyyy-MM-dd"
:range-separator="$t('stationBeat.dateRangeSeparator')"
size="small"
:start-placeholder="$t('stationBeat.startDate')"
style="width: 240px"
type="daterange"
value-format="yyyy-MM-dd"
/>
<span class="promptText">{{ $t('stationBeat.stationLabel') }}</span>
<el-select
v-model="stationValues"
:placeholder="$t('stationBeat.selectStation')"
clearable
filterable
collapse-tags
multiple
size="small"
style="width: 320px"
>
<el-option
v-for="item in stationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<span style="margin-left: 10px">{{ $t('stationBeat.orderNumberLabel') }}</span>
<el-input
v-model="orderNumberValue"
:placeholder="$t('stationBeat.orderNumberPlaceholder')"
clearable
size="small"
style="width: 150px"
/>
<span class="promptText">{{ $t('stationBeat.productModelLabel') }}</span>
<el-select
v-model="engineTypeValue"
:placeholder="$t('stationBeat.selectProductModel')"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="item in engineType"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button
class="functionButton"
type="primary"
size="small"
icon="el-icon-search"
plain
@click="searchTable()"
>{{ $t('stationBeat.search') }}</el-button>
<el-button
type="info"
size="small"
icon="el-icon-download"
plain
@click="exportExcel()"
>{{ $t('stationBeat.excel') }}</el-button>
</el-row>
<el-row>
<div class="chartCard">
<div id="stationBeatChart" class="chartDom" />
</div>
</el-row>
<el-row>
<el-table
v-loading="loading"
:data="tableData"
border
stripe
class="tableCustomization"
height="650px"
style="width: 100%"
>
<el-table-column type="index" align="center" :label="$t('stationBeat.sequence')" width="80" />
<el-table-column prop="工位" :label="$t('stationBeat.station')" align="center" min-width="140" />
<el-table-column prop="总平均节拍" :label="$t('stationBeat.totalAverageBeat')" align="center" min-width="140" />
<el-table-column
v-for="item in dynamicDateColumns"
:key="item.prop"
:prop="item.prop"
:label="item.label"
<div class="app-container mes-admin-page">
<el-card class="topCard">
<el-row class="toolbarRow">
<span class="promptText">{{ $t('stationBeat.productionTimeLabel') }}</span>
<el-date-picker
v-model="dateTime"
:clearable="false"
align="center"
min-width="130"
:end-placeholder="$t('stationBeat.endDate')"
format="yyyy-MM-dd"
:range-separator="$t('stationBeat.dateRangeSeparator')"
size="small"
:start-placeholder="$t('stationBeat.startDate')"
style="width: 240px"
type="daterange"
value-format="yyyy-MM-dd"
/>
</el-table>
</el-row>
</el-card>
<span class="promptText" style="margin-left: 10px">{{ $t('stationBeat.stationLabel') }}</span>
<el-select
v-model="stationValues"
:placeholder="$t('stationBeat.selectStation')"
clearable
filterable
collapse-tags
multiple
size="small"
style="width: 270px"
>
<el-option
v-for="item in stationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<span style="margin-left: 10px">{{ $t('stationBeat.orderNumberLabel') }}</span>
<el-input
v-model="orderNumberValue"
:placeholder="$t('stationBeat.orderNumberPlaceholder')"
clearable
size="small"
style="width: 150px"
/>
<span class="promptText" style="margin-left: 10px">{{ $t('stationBeat.productModelLabel') }}</span>
<el-select
v-model="engineTypeValue"
:placeholder="$t('stationBeat.selectProductModel')"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="item in engineType"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button
class="functionButton"
type="primary"
size="small"
icon="el-icon-search"
plain
@click="searchTable()"
style="margin-left: 10px"
>{{ $t('stationBeat.search') }}</el-button>
<el-button
type="info"
size="small"
icon="el-icon-download"
plain
@click="exportExcel()"
>{{ $t('stationBeat.excel') }}</el-button>
</el-row>
<el-row>
<div class="chartCard">
<div id="stationBeatChart" class="chartDom" />
</div>
</el-row>
<el-row>
<div class="tablePanel">
<el-table
v-loading="loading"
:data="tableData"
border
stripe
class="tableCustomization"
height="650px"
style="width: 100%"
>
<el-table-column type="index" align="center" :label="$t('stationBeat.sequence')" width="80" />
<el-table-column prop="工位" :label="$t('stationBeat.station')" align="center" min-width="140" />
<el-table-column prop="总平均节拍" :label="$t('stationBeat.totalAverageBeat')" align="center" min-width="140" />
<el-table-column
v-for="item in dynamicDateColumns"
:key="item.prop"
:prop="item.prop"
:label="item.label"
align="center"
min-width="130"
/>
</el-table>
</div>
</el-row>
</el-card>
</div>
</template>
<script>
@@ -375,4 +381,38 @@ export default {
width: 100%;
height: 360px;
}
.panelHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.panelTitle {
color: #203247;
font-size: 15px;
font-weight: 700;
}
.panelSubtitle {
color: #6b7f93;
font-size: 12px;
margin-top: 3px;
}
.compactHeader {
padding: 0 2px;
}
.tablePanel {
width: 100%;
padding-top: 4px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.54) 0%, rgba(243,247,251,0.94) 100%);
}
::v-deep .toolbarRow .el-button {
margin-bottom: 2px;
}
</style>

203
src/views/QualityAssurance/StationJPH/index.vue
View File

@@ -1,106 +1,57 @@
<template>
<el-card class="topCard">
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
<el-tab-pane :label="$t('stationJph.realtimeTab')" name="realtime">
<div class="chartCard">
<div id="stationJphRealtimeChart" class="chartDom" />
</div>
</el-tab-pane>
<el-tab-pane :label="$t('stationJph.historyTab')" name="history">
<el-row class="toolbarRow">
<span class="promptText">{{ $t('stationJph.productionTimeLabel') }}</span>
<el-date-picker
v-model="dateTime"
:clearable="false"
align="center"
:end-placeholder="$t('stationJph.endDate')"
format="yyyy-MM-dd"
:range-separator="$t('stationJph.dateRangeSeparator')"
size="small"
:start-placeholder="$t('stationJph.startDate')"
style="width: 240px"
type="daterange"
value-format="yyyy-MM-dd"
/>
<span class="promptText">{{ $t('stationJph.stationLabel') }}</span>
<el-select
v-model="stationValues"
:placeholder="$t('stationJph.selectStation')"
clearable
filterable
collapse-tags
multiple
size="small"
style="width: 320px"
>
<el-option
v-for="item in stationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
<div class="app-container mes-admin-page">
<el-card class="topCard">
<el-tabs v-model="activeTab" @tab-click="handleTabChange">
<el-tab-pane :label="$t('stationJph.realtimeTab')" name="realtime">
<div class="chartCard realtimeChartCard">
<div id="stationJphRealtimeChart" class="chartDom" />
</div>
</el-tab-pane>
<el-tab-pane :label="$t('stationJph.historyTab')" name="history">
<el-row class="toolbarRow">
<span class="promptText">{{ $t('stationJph.productionTimeLabel') }}</span>
<el-date-picker
v-model="dateTime"
:clearable="false"
align="center"
:end-placeholder="$t('stationJph.endDate')"
format="yyyy-MM-dd"
:range-separator="$t('stationJph.dateRangeSeparator')"
size="small"
:start-placeholder="$t('stationJph.startDate')"
style="width: 240px"
type="daterange"
value-format="yyyy-MM-dd"
/>
</el-select>
<span style="margin-left: 10px">{{ $t('stationJph.orderNumberLabel') }}</span>
<el-input
v-model="orderNumberValue"
:placeholder="$t('stationJph.orderNumberPlaceholder')"
clearable
size="small"
style="width: 150px"
/>
<span class="promptText">{{ $t('stationJph.productModelLabel') }}</span>
<el-select
v-model="engineTypeValue"
:placeholder="$t('stationJph.selectProductModel')"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="item in engineType"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button
class="functionButton"
type="primary"
size="small"
icon="el-icon-search"
plain
@click="handleSearch()"
>{{ $t('stationJph.search') }}</el-button>
<el-button
type="info"
size="small"
icon="el-icon-download"
plain
@click="exportExcel()"
>{{ $t('stationJph.export') }}</el-button>
</el-row>
<span class="promptText" style="margin-left: 10px;">{{ $t('stationJph.stationLabel') }}</span>
<div class="chartCard">
<div id="stationJphHistoryChart" class="chartDom" />
</div>
<el-table
v-loading="historyLoading"
:data="historyTableData"
border
stripe
height="560px"
style="width: 100%"
>
<el-table-column type="index" align="center" :label="$t('stationJph.sequence')" width="80" />
<el-table-column prop="日期" :label="$t('stationJph.date')" align="center" min-width="120" />
<el-table-column prop="小时段" :label="$t('stationJph.hourSlot')" align="center" min-width="120" />
<el-table-column prop="产量" :label="$t('stationJph.outputQty')" align="center" min-width="100" />
</el-table>
</el-tab-pane>
</el-tabs>
</el-card>
<el-select v-model="stationValues" :placeholder="$t('stationJph.selectStation')" clearable filterable collapse-tags multiple size="small" style="width: 320px">
<el-option v-for="item in stationOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<span class="promptText" style="margin-left: 10px;">{{ $t('stationJph.orderNumberLabel') }}</span>
<el-input v-model="orderNumberValue" :placeholder="$t('stationJph.orderNumberPlaceholder')" clearable size="small" style="width: 150px" />
<span class="promptText" style="margin-left: 10px;">{{ $t('stationJph.productModelLabel') }}</span>
<el-select v-model="engineTypeValue" :placeholder="$t('stationJph.selectProductModel')" filterable clearable size="small" style="width: 150px">
<el-option v-for="item in engineType" :key="item.value" :label="item.label" :value="item.value" /></el-select>
<el-button class="functionButton" type="primary" size="small" icon="el-icon-search" plain @click="handleSearch()">{{ $t('stationJph.search') }}</el-button>
<el-button type="info" size="small" icon="el-icon-download" plain @click="exportExcel()">{{ $t('stationJph.export') }}</el-button>
</el-row>
<div class="chartCard historyChartCard">
<div id="stationJphHistoryChart" class="chartDom" /></div>
<div class="tablePanel">
<el-table v-loading="historyLoading" :data="historyTableData" border stripe height="560px" style="width: 100%">
<el-table-column type="index" align="center" :label="$t('stationJph.sequence')" width="80" />
<el-table-column prop="日期" :label="$t('stationJph.date')" align="center" min-width="120" />
<el-table-column prop="小时段" :label="$t('stationJph.hourSlot')" align="center" min-width="120" />
<el-table-column prop="产量" :label="$t('stationJph.outputQty')" align="center" min-width="100" />
</el-table>
</div>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
<script>
@@ -126,6 +77,12 @@ export default {
realtimeTimer: null
}
},
watch: {
'$i18n.locale'() {
this.renderRealtimeChart()
this.renderHistoryChart()
}
},
created() {
this.dateTime = [getNowShotTime(), getNowShotTime()]
this.getStationOptions()
@@ -155,12 +112,6 @@ export default {
this.historyChart = null
}
},
watch: {
'$i18n.locale'() {
this.renderRealtimeChart()
this.renderHistoryChart()
}
},
methods: {
getStationOptions() {
const param = []
@@ -465,6 +416,7 @@ export default {
flex-wrap: wrap;
gap: 8px 0;
margin-bottom: 12px;
margin-top: 10px;
}
.chartCard {
@@ -480,4 +432,43 @@ export default {
width: 100%;
height: 360px;
}
.tablePanel {
padding-top: 4px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.54) 0%, rgba(243,247,251,0.94) 100%);
}
.panelHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.panelTitle {
color: #203247;
font-size: 15px;
font-weight: 700;
}
.panelSubtitle {
color: #6b7f93;
font-size: 12px;
margin-top: 3px;
}
.compactHeader {
padding: 0 2px;
}
.realtimeChartCard,
.historyChartCard {
position: relative;
}
::v-deep .toolbarRow .el-button {
margin-bottom: 2px;
}
</style>

2
src/views/RecipeManagement/RecipeManagement/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="app-container">
<div class="app-container mes-admin-page">
<el-card class="topCard">
<div class="topDiv">
<span style="margin-left: 10px">{{ $t('recipeManagement.productModelLabel') }}</span>

450
src/views/WorkOrderManagement/ReleaseOfProductionPlan/index.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class="app-container">
<div class="app-container mes-admin-page">
<el-card class="topCard">
<div class="topDiv">
<div class="topDiv topToolbar">
<span style="margin-left: 10px">{{ $t('releaseOfProductionPlan.orderNumberLabel') }}</span>
<el-input v-model="orderNumberValue" clearable :placeholder="$t('releaseOfProductionPlan.filterOrderNumber')" size="small" style="width: 200px"/>
<el-input v-model="orderNumberValue" clearable :placeholder="$t('releaseOfProductionPlan.filterOrderNumber')" size="small" style="width: 200px"/>
<span style="margin-left: 10px">{{ $t('releaseOfProductionPlan.productModelLabel') }}</span>
<el-select
v-model="engineTypeValue"
@@ -57,185 +57,189 @@
<!-- <el-button type="info" plain size="small" icon="el-icon-upload2" @click="importOrder('form')">订单导入</el-button>-->
<!-- <el-button type="info" plain size="small" icon="el-icon-download" @click="exportExcel()">订单导出</el-button>-->
</div>
<el-table
ref="multipleTable"
v-loading="loading"
:data="tableData"
:header-cell-style="{ background: '#eef1f6', color: '#606266' }"
:cell-class-name="tableRowClassName"
:expand-row-keys="expandsDetail"
:row-key="getRowKeys"
:element-loading-text="$t('releaseOfProductionPlan.loadingData')"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.2)"
class="main"
tooltip-effect="dark"
style="width: 100%; max-height: 700px"
border
height="800px"
size="mini"
@expand-change="selectPlan"
@selection-change="handleSelectionChange"
>
<el-table-column align="center" type="index" :label="$t('releaseOfProductionPlan.sort')" />
<el-table-column align="center" type="expand" label="" fixed width="35">
<template slot-scope="scope">
<div style="display: flex">
<!-- 详细数据盒子 -->
<div style="margin: 5px 10px; width: 1000px; z-index: 99">
<el-table
:data="tableDataPrintDetail"
:header-cell-style="{
background: '#e5e7f8',
color: '#606266',
}"
:element-loading-text="$t('releaseOfProductionPlan.loadingData')"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.2)"
class="main"
tooltip-effect="dark"
style="width: 100%; z-index: 99"
max-height="400px"
border
size="mini"
>
<el-table-column align="center" type="index" :label="$t('releaseOfProductionPlan.sequence')" />
<el-table-column align="center" :label="$t('releaseOfProductionPlan.crankcaseAssemblyNo')" width="250">
<template slot-scope="scope">
{{ scope.row.发动机号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.onlineTime')" width="150">
<template slot-scope="scope">
{{ scope.row.上线时间 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.offlineTime')" width="150">
<template slot-scope="scope">
{{ scope.row.下线时间 }}
</template>
</el-table-column>
</el-table>
<div class="tablePanel">
<el-table
ref="multipleTable"
v-loading="loading"
:data="tableData"
:header-cell-style="{ background: '#eef1f6', color: '#606266' }"
:cell-class-name="tableRowClassName"
:expand-row-keys="expandsDetail"
:row-key="getRowKeys"
:element-loading-text="$t('releaseOfProductionPlan.loadingData')"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.2)"
class="main"
tooltip-effect="dark"
style="width: 100%; max-height: 700px"
border
height="800px"
size="mini"
@expand-change="selectPlan"
@selection-change="handleSelectionChange"
>
<el-table-column align="center" type="index" :label="$t('releaseOfProductionPlan.sort')" />
<el-table-column align="center" type="expand" label="" fixed width="35">
<template>
<div style="display: flex">
<!-- 详细数据盒子 -->
<div style="margin: 5px 10px; width: 1000px; z-index: 99">
<el-table
:data="tableDataPrintDetail"
:header-cell-style="{
background: '#e5e7f8',
color: '#606266',
}"
:element-loading-text="$t('releaseOfProductionPlan.loadingData')"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.2)"
class="main"
tooltip-effect="dark"
style="width: 100%; z-index: 99"
max-height="400px"
border
size="mini"
>
<el-table-column align="center" type="index" :label="$t('releaseOfProductionPlan.sequence')" />
<el-table-column align="center" :label="$t('releaseOfProductionPlan.crankcaseAssemblyNo')" width="250">
<template slot-scope="scope">
{{ scope.row.发动机号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.onlineTime')" width="150">
<template slot-scope="scope">
{{ scope.row.上线时间 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.offlineTime')" width="150">
<template slot-scope="scope">
{{ scope.row.下线时间 }}
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.orderNumber')">
<template slot-scope="scope">
{{ scope.row.订单号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.productModel')">
<template slot-scope="scope">
{{ scope.row.产品型号 }}
</template>
</el-table-column>
<!-- <el-table-column align="center" label="总成号">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.零件号 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column align="center" :label="$t('releaseOfProductionPlan.planQuantity')">
<template slot-scope="scope">
{{ scope.row.计划数量 }}
</template>
</el-table-column>
<!-- <el-table-column align="center" label="完成数量">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.完成数量 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="状态">-->
<!-- <template slot-scope="scope">-->
<!-- <el-tag v-if="parseInt(scope.row.订单状态) === 0" effect="plain" style="width: 70px" type="info">已结束</el-tag>-->
<!-- <el-tag v-if="parseInt(scope.row.订单状态) === 1" effect="plain" style="width: 70px" type="success">生产中</el-tag>-->
<!-- <el-tag v-if="parseInt(scope.row.订单状态) === 2" effect="plain" style="width: 70px" type="text">未上线</el-tag>-->
<!-- <el-tag v-if="parseInt(scope.row.订单状态) === 3" effect="plain" style="width: 70px" type="warning">未完成</el-tag>-->
<!-- <el-tag v-if="parseInt(scope.row.订单状态) === 4" effect="plain" style="width: 70px" type="danger">已超额</el-tag>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column align="center" :label="$t('releaseOfProductionPlan.planStartDate')">
<template slot-scope="scope">
{{ scope.row.计划开始时间 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.planEndDate')">
<template slot-scope="scope">
{{ scope.row.计划完成时间 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.productionStatus')">
<template slot-scope="scope">
<el-tag
v-if="Number(scope.row.订单状态) === 1"
size="mini"
type="info"
>{{ $t('releaseOfProductionPlan.notStarted') }}</el-tag>
<el-tag
v-if="Number(scope.row.订单状态) === 2"
size="mini"
type="warning"
>{{ $t('releaseOfProductionPlan.inProduction') }}</el-tag>
<el-tag
v-if="Number(scope.row.订单状态) === 3"
size="mini"
type="success"
>{{ $t('releaseOfProductionPlan.completed') }}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.operation')" min-width="150">
<template slot-scope="scope">
<el-button
v-if="parseInt(scope.row.订单状态) === 2"
size="mini"
type="text"
icon="el-icon-check"
@click="competeOrder(scope.row)"
>{{ $t('releaseOfProductionPlan.completeOrder') }}</el-button>
<el-button
v-if="parseInt(scope.row.订单状态) === 1"
size="mini"
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
>{{ $t('releaseOfProductionPlan.modify') }}</el-button>
<el-button
v-if="parseInt(scope.row.订单状态) === 1"
size="mini"
type="text"
icon="el-icon-delete"
style="color: red"
@click="deleteOrder(scope.row)"
>{{ $t('releaseOfProductionPlan.delete') }}</el-button>
<el-button
v-if="parseInt(scope.row.是否下发) === 0"
size="mini"
type="text"
icon="el-icon-download"
@click="ordersIssuedEditor(scope.row)"
>{{ $t('releaseOfProductionPlan.issue') }}</el-button>
<el-button
v-if="parseInt(scope.row.是否下发) === 1 && parseInt(scope.row.订单状态) === 1"
size="mini"
type="text"
icon="el-icon-upload2"
@click="ordersIssuedEditor1(scope.row)"
>{{ $t('releaseOfProductionPlan.withdraw') }}</el-button>
<el-button
v-if="parseInt(scope.row.是否下发) === 0 && parseInt(scope.row.订单状态) === 1"
size="mini"
type="text"
icon="el-icon-top"
@click="topOrder(scope.row)">{{ $t('releaseOfProductionPlan.moveUp') }}</el-button>
<el-button
v-if="parseInt(scope.row.是否下发) === 0 && parseInt(scope.row.订单状态) === 1"
size="mini"
type="text"
icon="el-icon-bottom"
@click="downOrder(scope.row)">{{ $t('releaseOfProductionPlan.moveDown') }}</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.orderNumber')">
<template slot-scope="scope">
{{ scope.row.订单号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.productModel')">
<template slot-scope="scope">
{{ scope.row.产品型号 }}
</template>
</el-table-column>
<!-- <el-table-column align="center" label="总成号">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.零件号 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column align="center" :label="$t('releaseOfProductionPlan.planQuantity')">
<template slot-scope="scope">
{{ scope.row.计划数量 }}
</template>
</el-table-column>
<!-- <el-table-column align="center" label="完成数量">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.完成数量 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="状态">-->
<!-- <template slot-scope="scope">-->
<!-- <el-tag v-if="parseInt(scope.row.订单状态) === 0" effect="plain" style="width: 70px" type="info">已结束</el-tag>-->
<!-- <el-tag v-if="parseInt(scope.row.订单状态) === 1" effect="plain" style="width: 70px" type="success">生产中</el-tag>-->
<!-- <el-tag v-if="parseInt(scope.row.订单状态) === 2" effect="plain" style="width: 70px" type="text">未上线</el-tag>-->
<!-- <el-tag v-if="parseInt(scope.row.订单状态) === 3" effect="plain" style="width: 70px" type="warning">未完成</el-tag>-->
<!-- <el-tag v-if="parseInt(scope.row.订单状态) === 4" effect="plain" style="width: 70px" type="danger">已超额</el-tag>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column align="center" :label="$t('releaseOfProductionPlan.planStartDate')">
<template slot-scope="scope">
{{ scope.row.计划开始时间 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.planEndDate')">
<template slot-scope="scope">
{{ scope.row.计划完成时间 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.productionStatus')">
<template slot-scope="scope">
<el-tag
v-if="Number(scope.row.订单状态) === 1"
size="mini"
type="info"
>{{ $t('releaseOfProductionPlan.notStarted') }}</el-tag>
<el-tag
v-if="Number(scope.row.订单状态) === 2"
size="mini"
type="warning"
>{{ $t('releaseOfProductionPlan.inProduction') }}</el-tag>
<el-tag
v-if="Number(scope.row.订单状态) === 3"
size="mini"
type="success"
>{{ $t('releaseOfProductionPlan.completed') }}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.operation')" min-width="150">
<template slot-scope="scope">
<el-button
v-if="parseInt(scope.row.订单状态) === 2"
size="mini"
type="text"
icon="el-icon-check"
@click="competeOrder(scope.row)"
>{{ $t('releaseOfProductionPlan.completeOrder') }}</el-button>
<el-button
v-if="parseInt(scope.row.订单状态) === 1"
size="mini"
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
>{{ $t('releaseOfProductionPlan.modify') }}</el-button>
<el-button
v-if="parseInt(scope.row.订单状态) === 1"
size="mini"
type="text"
icon="el-icon-delete"
style="color: red"
@click="deleteOrder(scope.row)"
>{{ $t('releaseOfProductionPlan.delete') }}</el-button>
<el-button
v-if="parseInt(scope.row.是否下发) === 0"
size="mini"
type="text"
icon="el-icon-download"
@click="ordersIssuedEditor(scope.row)"
>{{ $t('releaseOfProductionPlan.issue') }}</el-button>
<el-button
v-if="parseInt(scope.row.是否下发) === 1 && parseInt(scope.row.订单状态) === 1"
size="mini"
type="text"
icon="el-icon-upload2"
@click="ordersIssuedEditor1(scope.row)"
>{{ $t('releaseOfProductionPlan.withdraw') }}</el-button>
<el-button
v-if="parseInt(scope.row.是否下发) === 0 && parseInt(scope.row.订单状态) === 1"
size="mini"
type="text"
icon="el-icon-top"
@click="topOrder(scope.row)"
>{{ $t('releaseOfProductionPlan.moveUp') }}</el-button>
<el-button
v-if="parseInt(scope.row.是否下发) === 0 && parseInt(scope.row.订单状态) === 1"
size="mini"
type="text"
icon="el-icon-bottom"
@click="downOrder(scope.row)"
>{{ $t('releaseOfProductionPlan.moveDown') }}</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="block" style="margin-top: 10px">
<el-pagination
v-if="!loading"
@@ -395,34 +399,34 @@
:placeholder="$t('releaseOfProductionPlan.enterPlanQuantity')"
/>
</el-form-item>
<!-- <el-form-item-->
<!-- label="桥壳上线数"-->
<!-- prop="planQuantity"-->
<!-- style="display: inline-block"-->
<!-- >-->
<!-- <el-input-number-->
<!-- v-model="form1.qiaoKeOverNumber"-->
<!-- :min="0"-->
<!-- :step="1"-->
<!-- size="small"-->
<!-- style="width: 200px"-->
<!-- placeholder="请输入计划数量"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item-->
<!-- label="轮毂上线数"-->
<!-- prop="planQuantity"-->
<!-- style="display: inline-block"-->
<!-- >-->
<!-- <el-input-number-->
<!-- v-model="form1.lunGuOverNumber"-->
<!-- :min="0"-->
<!-- :step="1"-->
<!-- size="small"-->
<!-- style="width: 200px"-->
<!-- placeholder="请输入计划数量"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item-->
<!-- label="桥壳上线数"-->
<!-- prop="planQuantity"-->
<!-- style="display: inline-block"-->
<!-- >-->
<!-- <el-input-number-->
<!-- v-model="form1.qiaoKeOverNumber"-->
<!-- :min="0"-->
<!-- :step="1"-->
<!-- size="small"-->
<!-- style="width: 200px"-->
<!-- placeholder="请输入计划数量"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item-->
<!-- label="轮毂上线数"-->
<!-- prop="planQuantity"-->
<!-- style="display: inline-block"-->
<!-- >-->
<!-- <el-input-number-->
<!-- v-model="form1.lunGuOverNumber"-->
<!-- :min="0"-->
<!-- :step="1"-->
<!-- size="small"-->
<!-- style="width: 200px"-->
<!-- placeholder="请输入计划数量"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item
:label="$t('releaseOfProductionPlan.planStartTime')"
prop="startPlanTime"
@@ -738,6 +742,11 @@ export default {
loading: false
}
},
watch: {
'$i18n.locale'() {
this.initValidationRules()
}
},
created() {
this.initValidationRules()
this.getOrderNumber()
@@ -779,11 +788,6 @@ export default {
// }
// }
},
watch: {
'$i18n.locale'() {
this.initValidationRules()
}
},
methods: {
initValidationRules() {
this.printRules = {
@@ -1747,6 +1751,16 @@ export default {
margin-bottom: 10px;
}
.topToolbar {
align-items: center;
}
.tablePanel {
padding: 4px 2px 0;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(244,248,252,0.92) 100%);
}
.el-select {
width: 200px;
}
@@ -1777,4 +1791,12 @@ export default {
.el-table .success-row {
background: #f0f9eb;
}
::v-deep .topToolbar .el-button {
margin-bottom: 2px;
}
::v-deep .tablePanel .el-table__expanded-cell {
background: #f8fbfe !important;
}
</style>

47
src/views/dashboard/index.vue
View File

@@ -1,37 +1,33 @@
<template>
<el-card style="min-height:calc(100vh - 84px);background: white;background-size:100% 100%">
<div class="dashboard-container">
<div class="sudoku_row" >
<div class="sudoku_row">
<svg-icon icon-class="人员" style="width: 35px;height: 35px"/>
<div class="dashboard-text" style="color:black">/{{ name }}</div>
<el-divider content-position="right" style="margin:24px"/>
<!-- <div v-for="(sudoku,index) in sudokus" :class="curSelect === sudoku.id?'opacity':''" :key="index+9999" shadow="hover" class="sudoku_item" style="background: white;border: 2px solid rgb(208,222,234)">-->
<!-- <router-link v-if="sudoku.router!=undefined" :to="sudoku.router" style="width: 100%">-->
<!-- <el-badge :value="sudoku.value" class="dashbadge" style="width: 100%;text-align:center">-->
<!-- <svg-icon :icon-class="sudoku.icon" :style="{color:colors[index]}" style="width: 25px;height: 25px"/>-->
<!-- <h2 :style="{color:colors[index]}" style="margin: 0px;height: 30px;display: inline-block;line-height: 30px">{{ sudoku.name }}</h2>-->
<!-- </el-badge>-->
<!-- </router-link>-->
<!-- </div>-->
<div v-for="(value1,index1) in fathers" :key="index1" style="width:100%;background: white;margin-bottom: 15px">
<div v-for="(father, index1) in fathers" :key="index1" style="width:100%;background: white;margin-bottom: 15px">
<div style="width: 100%;height: 40px;line-height: 40px;background: rgb(127,172,237);color:white">
<svg-icon :icon-class="value1.icon" style="color: white;margin: 5px 5px 0px 10px;border: 0 solid black;width:20px;height:20px"/>
{{ translateMenuTitle(value1.title) }}
<svg-icon :icon-class="father.icon" style="color: white;margin: 5px 5px 0px 10px;border: 0 solid black;width:20px;height:20px"/>
{{ translateMenuTitle(father.title) }}
</div>
<router-link v-for="(value2,index2) in sons" v-if="value2.pid === value1.id" :key="index2" :to="value2.path">
<!-- ✅ 使用计算属性后的 sonsMap，不再有 v-if -->
<router-link
v-for="(son, index2) in getSonsByPid(father.id)"
:key="index2"
:to="son.path"
>
<el-card shadow="hover" class="sudoku_item1" style="height:130px;width:175px;margin: 5px;display: inline-block;background: rgba(255,255,255,0.4);border: 2px solid rgb(208,222,234)">
<svg-icon :icon-class="value2.icon" class="bgc" style="color: rgb(37,89,164);display:block;margin: auto;border: 0px solid black;width:40px;height:40px"/>
<h4 style="margin-top: 10px;color:rgb(37,89,164);text-align:center">{{ translateMenuTitle(value2.title) }}</h4>
<svg-icon :icon-class="son.icon" class="bgc" style="color: rgb(37,89,164);display:block;margin: auto;border: 0px solid black;width:40px;height:40px"/>
<h4 style="margin-top: 10px;color:rgb(37,89,164);text-align:center">{{ translateMenuTitle(son.title) }}</h4>
</el-card>
</router-link>
</div>
</div>
</div>
</el-card>
</template>
<script>
import { mapGetters } from 'vuex'
import request from '@/utils/request'
@@ -53,7 +49,19 @@ export default {
...mapGetters([
'name',
'token'
])
]),
// 预先按 pid 分组，避免每次渲染都过滤
sonsByPid() {
const map = {}
for (const son of this.sons) {
const pid = son.pid
if (!map[pid]) {
map[pid] = []
}
map[pid].push(son)
}
return map
}
},
mounted() {
this.getFileList()
@@ -65,6 +73,9 @@ export default {
clearInterval(this.timer)
},
methods: {
getSonsByPid(pid) {
return this.sonsByPid[pid] || []
},
translateMenuTitle,
async initFirstModule() {
await request({

31
src/views/layout/components/Sidebar/SidebarItem.vue
View File

@@ -1,28 +1,29 @@
<template>
<div v-if="!item.hidden&&item.children" class="menu-wrapper">
<div v-if="!item.hidden && item.children" class="menu-wrapper">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
<template v-if="hasOneShowingChild(visibleChildren, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
<a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path, $event)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown': !isNest}">
<item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon || item.meta.icon" :title="onlyOneChild.meta.title" />
</el-menu-item>
</a>
</template>
<el-submenu v-else :index="item.name||item.path">
<el-submenu v-else :index="item.name || item.path">
<template slot="title">
<item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
</template>
<template v-for="child in item.children" v-if="!child.hidden">
<template v-for="child in visibleChildren">
<sidebar-item
v-if="child.children&&child.children.length>0"
v-if="child.children && child.children.length > 0"
:key="child.path"
:is-nest="true"
:item="child"
:key="child.path"
:base-path="resolvePath(child.path)"
class="nest-menu" />
<a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)">
class="nest-menu"
/>
<a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path, $event)">
<el-menu-item :index="resolvePath(child.path)" style="padding-left: 58px!important;">
<item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
</el-menu-item>
@@ -32,7 +33,6 @@
</div>
</template>
<script>
import path from 'path'
import { validateURL } from '@/utils/validate'
@@ -61,6 +61,13 @@ export default {
onlyOneChild: null
}
},
computed: {
// 过滤掉 hidden 的 children
visibleChildren() {
if (!this.item.children) return []
return this.item.children.filter(child => !child.hidden)
}
},
methods: {
hasOneShowingChild(children, parent) {
const showingChildren = children.filter(item => {

105
src/views/layout/components/Sidebar/SidebarItem2.vue
View File

@@ -1,36 +1,50 @@
<template>
<div class="menu-wrapper">
<template v-for="item in routes" v-if="!item.hidden&&item.children">
<!--一级-->
<router-link v-if="item.children.length===1 && !item.children[0].children" :key="item.children[0].name" :to="item.path+'/'+item.children[0].path">
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"/>
<span v-if="item.children[0].meta&&item.children[0].meta.title">{{ translateMenuTitle(item.children[0].meta.title) }}</span>
<!-- 一级菜单：过滤掉 hidden 的路由 -->
<template v-for="item in visibleRoutes">
<!-- 情况1：只有一个子菜单且没有孙子菜单 → 显示为一级菜单项 -->
<router-link
v-if="shouldShowAsMenuItem(item)"
:key="getMenuItemKey(item)"
:to="getMenuItemPath(item)"
>
<el-menu-item :index="getMenuItemPath(item)" :class="{'submenu-title-noDropdown': !isNest}">
<svg-icon v-if="getFirstChild(item).meta && getFirstChild(item).meta.icon" :icon-class="getFirstChild(item).meta.icon" />
<span v-if="getFirstChild(item).meta && getFirstChild(item).meta.title">
{{ translateMenuTitle(getFirstChild(item).meta.title) }}
</span>
</el-menu-item>
</router-link>
<!--二级-->
<el-submenu v-else :key="item.name" :index="item.name||item.path">
<!-- 情况2：有多个子菜单或有孙子菜单 → 显示为下拉菜单 -->
<el-submenu v-else :key="item.name || item.path" :index="item.name || item.path">
<template slot="title">
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"/>
<span v-if="item.meta&&item.meta.title">{{ translateMenuTitle(item.meta.title) }}</span>
<svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon" />
<span v-if="item.meta && item.meta.title">{{ translateMenuTitle(item.meta.title) }}</span>
</template>
<template v-for="child in item.children" v-if="!child.hidden">
<sidebar-item v-if="child.children&&child.children.length>0" :key="child.path" :routes="[child]" :is-nest="true" class="nest-menu"/>
<router-link v-else :key="child.name" :to="item.path+child.path">
<el-menu-item :index="item.path+'/'+child.path">
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"/>
<span v-if="child.meta&&child.meta.title">{{ translateMenuTitle(child.meta.title) }}</span>
{{ item.path+'/'+child.path }}
<!-- 二级菜单：使用计算属性过滤后的 children -->
<template v-for="child in visibleChildren(item)">
<!-- 有子菜单 → 递归 -->
<sidebar-item
v-if="child.children && child.children.length > 0"
:key="child.path"
:routes="[child]"
:is-nest="true"
class="nest-menu"
/>
<!-- 无子菜单 → 直接显示 -->
<router-link v-else :key="child.name" :to="getChildPath(item, child)">
<el-menu-item :index="getChildPath(item, child)">
<svg-icon v-if="child.meta && child.meta.icon" :icon-class="child.meta.icon" />
<span v-if="child.meta && child.meta.title">{{ translateMenuTitle(child.meta.title) }}</span>
</el-menu-item>
</router-link>
</template>
</el-submenu>
</template>
</div>
</template>
<script>
import { translateMenuTitle } from '@/utils/i18n'
@@ -46,8 +60,59 @@ export default {
default: false
}
},
computed: {
// ✅ 过滤掉 hidden 的路由，同时过滤掉没有 children 的路由
visibleRoutes() {
return this.routes.filter(route => {
return !route.hidden && route.children && route.children.length > 0
})
}
},
methods: {
translateMenuTitle
translateMenuTitle,
// ✅ 获取第一个子菜单
getFirstChild(item) {
return item.children[0]
},
// ✅ 判断是否应该显示为单菜单项（没有孙子菜单，且只有一个子菜单）
shouldShowAsMenuItem(item) {
const firstChild = this.getFirstChild(item)
return item.children.length === 1 && (!firstChild.children || firstChild.children.length === 0)
},
// ✅ 获取菜单项的 key
getMenuItemKey(item) {
const firstChild = this.getFirstChild(item)
return firstChild.name
},
// ✅ 获取菜单项的路径（处理斜杠重复问题）
getMenuItemPath(item) {
const firstChild = this.getFirstChild(item)
return this.joinPath(item.path, firstChild.path)
},
// ✅ 获取子菜单路径
getChildPath(parent, child) {
return this.joinPath(parent.path, child.path)
},
// ✅ 智能拼接路径，避免双斜杠
joinPath(parentPath, childPath) {
if (!parentPath) return childPath
if (!childPath) return parentPath
// 去除首尾多余的斜杠后拼接
const cleanParent = parentPath.replace(/\/$/, '')
const cleanChild = childPath.replace(/^\//, '')
return `${cleanParent}/${cleanChild}`
},
// ✅ 过滤当前菜单的可见子菜单（用于二级菜单）
visibleChildren(item) {
if (!item.children) return []
return item.children.filter(child => !child.hidden)
}
}
}
</script>

1
src/views/layout/components/TagsView.vue
View File

@@ -264,6 +264,7 @@ export default {
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
border-radius: 5px;
&:first-of-type {
margin-left: 15px;
}

2
修改注意事项.txt
View File

@@ -19,4 +19,4 @@ sidebar.scss
Layout.vue
@use "../../styles/mixin.scss";
.app-wrapper {
@include mixin.clearfix;
@include mixin.clearfix;