feat(router): 添加数字钢卷路由
feat(components): 为MutiSelect组件添加collapseTags属性 feat(views): 新增酸连轧系统页面及组件 feat(views): 添加数字钢卷信息展示组件 refactor(views): 重构基础面板组件，支持数字钢卷功能
This commit is contained in:
48
klp-ui/src/views/micro/pages/acid/components/Inventory.vue
Normal file
48
klp-ui/src/views/micro/pages/acid/components/Inventory.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="inventory-container">
|
||||
<BasePage
|
||||
:qrcode="qrcode"
|
||||
:querys="querys"
|
||||
:showControl="showControl"
|
||||
:useWarehouseIds="useWarehouseIds"
|
||||
:warehouseOptions="warehouseOptions"
|
||||
:showMaterialType="showMaterialType"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BasePage from '@/views/wms/coil/panels/base.vue';
|
||||
|
||||
export default {
|
||||
name: 'AcidInventory',
|
||||
components: {
|
||||
BasePage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
qrcode: false,
|
||||
querys: {
|
||||
dataType: 1,
|
||||
status: 0
|
||||
},
|
||||
useWarehouseIds: true,
|
||||
warehouseOptions: [
|
||||
{value: '1988150044862377986', label: '酸连轧原料库'},
|
||||
{value: '1988150099140866050', label: '酸连轧成品库'},
|
||||
{value: '1988150263284953089', label: '镀锌原料库'},
|
||||
{value: '1988150545175736322', label: '脱脂原料库'},
|
||||
],
|
||||
showControl: false,
|
||||
showMaterialType: true,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.inventory-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
77
klp-ui/src/views/micro/pages/acid/components/Processing.vue
Normal file
77
klp-ui/src/views/micro/pages/acid/components/Processing.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="processing-container">
|
||||
<el-tabs v-model="activeTab" type="border-card">
|
||||
<el-tab-pane v-for="tab in tabs" :label="tab.title" :name="tab.name">
|
||||
<DoPage
|
||||
v-if="activeTab === tab.name"
|
||||
:label="tab.label"
|
||||
:tabs="tab.tabs"
|
||||
:useSpecialSplit="tab.useSpecialSplit"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DoPage from '@/views/wms/coil/panels/do.vue';
|
||||
|
||||
export default {
|
||||
name: 'AcidProcessing',
|
||||
components: {
|
||||
DoPage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'typing',
|
||||
tabs: [
|
||||
{
|
||||
title: '酸轧加工',
|
||||
name: 'typing',
|
||||
label: '酸轧工序',
|
||||
tabs: [
|
||||
{value: '1988150044862377986', label: '酸连轧原料库'},
|
||||
{value: '1988150099140866050', label: '酸连轧成品库'},
|
||||
{value: '1988150263284953089', label: '镀锌原料库'},
|
||||
{value: '1988150545175736322', label: '脱脂原料库'},
|
||||
],
|
||||
useSpecialSplit: false,
|
||||
},
|
||||
{
|
||||
title: '酸轧分条',
|
||||
name: 'split',
|
||||
label: '分条',
|
||||
useSpecialSplit: false,
|
||||
},
|
||||
{
|
||||
title: '合卷',
|
||||
name: 'merge',
|
||||
label: '酸轧合卷',
|
||||
useSpecialSplit: false,
|
||||
},
|
||||
{
|
||||
title: '酸轧修复',
|
||||
name: 'repair',
|
||||
label: '酸轧修复工序',
|
||||
tabs: [
|
||||
{value: '1988150044862377986', label: '酸连轧原料库'},
|
||||
{value: '1988150099140866050', label: '酸连轧成品库'},
|
||||
{value: '1988150263284953089', label: '镀锌原料库'},
|
||||
{value: '1988150545175736322', label: '脱脂原料库'},
|
||||
],
|
||||
useSpecialSplit: true,
|
||||
},
|
||||
]
|
||||
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.processing-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
88
klp-ui/src/views/micro/pages/acid/components/Quality.vue
Normal file
88
klp-ui/src/views/micro/pages/acid/components/Quality.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="quality-container">
|
||||
<el-tabs v-model="activeTab" class="quality-tabs">
|
||||
<el-tab-pane label="异常钢卷" name="abnormal">
|
||||
<div class="tab-content" v-if="activeTab === 'abnormal'">
|
||||
<BasePage
|
||||
:qrcode="qrcode"
|
||||
:querys="abnormalQuerys"
|
||||
:labelType="labelType"
|
||||
:hideType="hideType"
|
||||
:showAbnormal="showAbnormal"
|
||||
:showControl="showControl"
|
||||
:useWarehouseIds="useWarehouseIds"
|
||||
:warehouseOptions="warehouseOptions"
|
||||
:showMaterialType="showMaterialType"
|
||||
/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="钢卷判级" name="gradeCoil">
|
||||
<div class="tab-content" v-if="activeTab === 'gradeCoil'">
|
||||
<BasePage
|
||||
:qrcode="false"
|
||||
:querys="{
|
||||
dataType: 0,
|
||||
status: 1,
|
||||
}"
|
||||
:hideType="false"
|
||||
:showControl="false"
|
||||
:showGrade="true"
|
||||
:showStatus="false"
|
||||
:useWarehouseIds="useWarehouseIds"
|
||||
:warehouseOptions="warehouseOptions"
|
||||
:showMaterialType="showMaterialType"
|
||||
/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BasePage from '@/views/wms/coil/panels/base.vue';
|
||||
|
||||
export default {
|
||||
name: 'AcidQuality',
|
||||
components: {
|
||||
BasePage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'abnormal',
|
||||
qrcode: false,
|
||||
abnormalQuerys: {
|
||||
dataType: 1,
|
||||
orderByAbnormal: true,
|
||||
},
|
||||
useWarehouseIds: true,
|
||||
warehouseOptions: [
|
||||
{value: '1988150044862377986', label: '酸连轧原料库'},
|
||||
{value: '1988150099140866050', label: '酸连轧成品库'},
|
||||
{value: '1988150263284953089', label: '镀锌原料库'},
|
||||
{value: '1988150545175736322', label: '脱脂原料库'},
|
||||
],
|
||||
labelType: '2',
|
||||
hideType: false,
|
||||
showAbnormal: true,
|
||||
showControl: false,
|
||||
showMaterialType: true,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.quality-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.quality-tabs {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
67
klp-ui/src/views/micro/pages/acid/components/Report.vue
Normal file
67
klp-ui/src/views/micro/pages/acid/components/Report.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="report-container">
|
||||
<el-tabs v-model="activeTab" class="report-tabs">
|
||||
<el-tab-pane label="综合报表" name="comprehensive">
|
||||
<Comprehensive v-if="activeTab === 'comprehensive'"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="日报表" name="day">
|
||||
<DayReport v-if="activeTab === 'day'"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="月报表" name="month">
|
||||
<MonthReport v-if="activeTab === 'month'"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="年报表" name="year">
|
||||
<YearReport v-if="activeTab === 'year'"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="损耗报表" name="loss">
|
||||
<LossReport v-if="activeTab === 'loss'"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="产出报表" name="out">
|
||||
<OutReport v-if="activeTab === 'out'"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="班报表" name="team">
|
||||
<TeamReport v-if="activeTab === 'team'"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Comprehensive from '@/views/wms/report/zha/comprehensive.vue';
|
||||
import DayReport from '@/views/wms/report/zha/day.vue';
|
||||
import MonthReport from '@/views/wms/report/zha/month.vue';
|
||||
import YearReport from '@/views/wms/report/zha/year.vue';
|
||||
import LossReport from '@/views/wms/report/zha/loss.vue';
|
||||
import OutReport from '@/views/wms/report/zha/out.vue';
|
||||
import TeamReport from '@/views/wms/report/zha/team.vue';
|
||||
|
||||
export default {
|
||||
name: 'AcidReport',
|
||||
components: {
|
||||
Comprehensive,
|
||||
DayReport,
|
||||
MonthReport,
|
||||
YearReport,
|
||||
LossReport,
|
||||
OutReport,
|
||||
TeamReport,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'comprehensive',
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.report-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.report-tabs {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
92
klp-ui/src/views/micro/pages/acid/components/Shipping.vue
Normal file
92
klp-ui/src/views/micro/pages/acid/components/Shipping.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="shipping-container">
|
||||
<el-tabs v-model="activeTab" class="shipping-tabs">
|
||||
<el-tab-pane label="配卷情况" name="waybill">
|
||||
<div class="tab-content">
|
||||
<BasePage
|
||||
:qrcode="qrcode"
|
||||
:showWaybill="showWaybill"
|
||||
:showNewExport="showNewExport"
|
||||
:querys="waybillQuerys"
|
||||
:showStatus="showStatus"
|
||||
:hideType="hideType"
|
||||
:useWarehouseIds="useWarehouseIds"
|
||||
:warehouseOptions="warehouseOptions"
|
||||
:showMaterialType="showMaterialType"
|
||||
/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="发货记录" name="ship">
|
||||
<div class="tab-content">
|
||||
<BasePage
|
||||
:qrcode="qrcode"
|
||||
:querys="shipQuerys"
|
||||
:showStatus="showStatus"
|
||||
:hideType="hideType"
|
||||
:useWarehouseIds="useWarehouseIds"
|
||||
:warehouseOptions="warehouseOptions"
|
||||
:showControl="false"
|
||||
:showExportTime="true"
|
||||
:showMaterialType="showMaterialType"
|
||||
/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BasePage from '@/views/wms/coil/panels/base.vue';
|
||||
|
||||
export default {
|
||||
name: 'AcidShipping',
|
||||
components: {
|
||||
BasePage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'waybill',
|
||||
qrcode: false,
|
||||
waybillQuerys: {
|
||||
dataType: 1,
|
||||
includeBindInfo: true,
|
||||
},
|
||||
shipQuerys: {
|
||||
dataType: 1,
|
||||
status: 1,
|
||||
},
|
||||
useWarehouseIds: true,
|
||||
warehouseOptions: [
|
||||
{value: '1988150044862377986', label: '酸连轧原料库'},
|
||||
{value: '1988150099140866050', label: '酸连轧成品库'},
|
||||
{value: '1988150263284953089', label: '镀锌原料库'},
|
||||
{value: '1988150545175736322', label: '脱脂原料库'},
|
||||
],
|
||||
showControl: false,
|
||||
labelType: '3',
|
||||
showStatus: false,
|
||||
hideType: false,
|
||||
showExportTime: false,
|
||||
showWaybill: true,
|
||||
showNewExport: true,
|
||||
showMaterialType: true,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.shipping-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.shipping-tabs {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
125
klp-ui/src/views/micro/pages/acid/index.vue
Normal file
125
klp-ui/src/views/micro/pages/acid/index.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="acid-container">
|
||||
<div class="acid-sidebar">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
class="sidebar-menu"
|
||||
@select="handleMenuSelect"
|
||||
>
|
||||
<el-menu-item index="inventory">
|
||||
<i class="el-icon-box"></i>
|
||||
<span slot="title">库存</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="processing">
|
||||
<i class="el-icon-s-operation"></i>
|
||||
<span slot="title">加工</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="report">
|
||||
<i class="el-icon-document"></i>
|
||||
<span slot="title">报表</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="shipping">
|
||||
<i class="el-icon-truck"></i>
|
||||
<span slot="title">发货</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="quality">
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
<span slot="title">品质</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div>
|
||||
<component :is="currentComponent" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Inventory from './components/Inventory.vue';
|
||||
import Processing from './components/Processing.vue';
|
||||
import Report from './components/Report.vue';
|
||||
import Shipping from './components/Shipping.vue';
|
||||
import Quality from './components/Quality.vue';
|
||||
|
||||
export default {
|
||||
name: 'AcidSystem',
|
||||
components: {
|
||||
Inventory,
|
||||
Processing,
|
||||
Report,
|
||||
Shipping,
|
||||
Quality,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeMenu: 'inventory',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentComponent() {
|
||||
const componentMap = {
|
||||
inventory: 'Inventory',
|
||||
processing: 'Processing',
|
||||
report: 'Report',
|
||||
shipping: 'Shipping',
|
||||
quality: 'Quality',
|
||||
};
|
||||
return componentMap[this.activeMenu];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleMenuSelect(index) {
|
||||
this.activeMenu = index;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.acid-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: calc(100vh - 84px);
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.acid-sidebar {
|
||||
width: 100px;
|
||||
background-color: #fff;
|
||||
border-right: 1px solid #e4e7ed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
|
||||
|
||||
.sidebar-menu {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
border-right: none;
|
||||
|
||||
::v-deep .el-menu-item {
|
||||
color: #606266;
|
||||
padding: 0 20px;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
background-color: #ecf5ff;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: #ecf5ff;
|
||||
color: #409eff;
|
||||
border-right: 3px solid #409eff;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user