生产管理
This commit is contained in:
‘937886381’
rodzic
2ab8a99ff5
commit
c847ba1595
@ -173,3 +173,26 @@ export function orderSplit(data) {
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function getDetailTree(data) {
|
||||
return request({
|
||||
url: 'base/order/getDetailTree',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
export function getDetailTreeInfo(data) {
|
||||
return request({
|
||||
url: 'base/order/getDetailTreeInfoById',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
export function orderStop(data) {
|
||||
return request({
|
||||
url: 'base/order/stop',
|
||||
method: 'post',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
27
src/assets/icons/svg/back.svg
Normal file
27
src/assets/icons/svg/back.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="72px" height="72px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>rollback</title>
|
||||
<defs>
|
||||
<filter x="-1.1%" y="-5.8%" width="102.1%" height="115.3%" filterUnits="objectBoundingBox" id="filter-1">
|
||||
<feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="6" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0926573427 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="页内多种导航方式" transform="translate(-1914.000000, -745.000000)" fill-rule="nonzero">
|
||||
<g id="编组-16" filter="url(#filter-1)" transform="translate(94.000000, 641.000000)">
|
||||
<g id="编组-3备份" transform="translate(1816.000000, 96.000000)">
|
||||
<g id="rollback" transform="translate(16.000000, 15.000000)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="20" height="20"></rect>
|
||||
<path d="M11.390625,3.78125 L5.71875,3.78125 L5.71875,2.625 C5.71875,2.5203125 5.5984375,2.4625 5.5171875,2.5265625 L3.2984375,4.2765625 C3.234375,4.3265625 3.234375,4.4234375 3.2984375,4.4734375 L5.5171875,6.2234375 C5.5984375,6.2875 5.71875,6.2296875 5.71875,6.125 L5.71875,4.96875 L11.203125,4.96875 C11.7554097,4.96875 12.203125,5.41646525 12.203125,5.96875 L12.203125,11.3125 C12.203125,11.8647847 11.7554097,12.3125 11.203125,12.3125 L2.93775156,12.3125 L2.93775156,12.3125 C2.55569144,12.3125 2.36466138,12.4938859 2.36466138,12.8566576 C2.36466138,13.5 2.93775156,13.5 2.93775156,13.5 C2.93775156,13.5 5.75537604,13.5 11.390625,13.5 C13,13.5 13.390625,12.8986083 13.390625,11.9909216 L13.390625,4.96875 C13.390625,4.06071182 13,3.78125 11.390625,3.78125 Z" id="路径" fill="#0B58FF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Po Szerokość: | Wysokość: | Rozmiar: 2.4 KiB |
@ -89,6 +89,7 @@ export default {
|
||||
id: '',
|
||||
name: '',
|
||||
code: '',
|
||||
grade:1,
|
||||
planQuantity: '',
|
||||
planProductId: '',
|
||||
specifications:undefined,
|
||||
|
||||
@ -0,0 +1,37 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-09-06 14:44:06
|
||||
* @LastEditTime: 2024-09-09 16:31:04
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-button @click="handleRoute" type="text"> {{ injectData.workOrderNum }} </el-button>
|
||||
</template>
|
||||
<script>
|
||||
import { orderAssignmentList } from '@/api/base/orderManage'
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async handleRoute() {
|
||||
const res = await orderAssignmentList({ orderIdList: [this.injectData.id] })
|
||||
console.log(res.data);
|
||||
let arr = []
|
||||
res.data[this.injectData.id].forEach((ele) => {
|
||||
arr.push(ele.workOrderId)
|
||||
});
|
||||
let woIdString = arr.join(',')
|
||||
console.log(woIdString);
|
||||
|
||||
this.$router.push({
|
||||
path: '/produce/core-work-order-detail?woIdString=' + woIdString
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -31,9 +31,10 @@
|
||||
</template>
|
||||
<script>
|
||||
import { parseTime } from '@/utils/ruoyi'
|
||||
import { getOrderPage, orderDelete, customerList, orderFinish, orderVoid } from '@/api/base/orderManage'
|
||||
import { getOrderPage, orderDelete, customerList, orderFinish, orderVoid, orderStop } from '@/api/base/orderManage'
|
||||
import OrderAdd from './components/orderAdd'
|
||||
import orderSplit from './components/orderSplit'
|
||||
import orderNum from './components/orderNum.vue'
|
||||
|
||||
import AddWorkOrder from './components/addWorkOrder'
|
||||
import { publicFormatter } from '@/utils/dict'
|
||||
@ -98,7 +99,8 @@ const tableProps = [
|
||||
},
|
||||
{
|
||||
prop: 'workOrderNum',
|
||||
label: '工单数量'
|
||||
label: '工单数量',
|
||||
subcomponent: orderNum,
|
||||
}
|
||||
]
|
||||
export default {
|
||||
@ -305,6 +307,22 @@ export default {
|
||||
]
|
||||
}
|
||||
}
|
||||
: undefined,
|
||||
this.$auth.hasPermi('base:order-manage:stop')
|
||||
? {
|
||||
type: 'stop',
|
||||
btnName: '终止',
|
||||
// showParam: {
|
||||
// type: '&',
|
||||
// data: [
|
||||
// {
|
||||
// type: 'equal',
|
||||
// name: 'status',
|
||||
// value: 1
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
}
|
||||
: undefined
|
||||
].filter((v) => v),
|
||||
addOrEditTitle: '',
|
||||
@ -333,15 +351,15 @@ export default {
|
||||
name: this.queryParams.name,
|
||||
status: this.queryParams.status,
|
||||
lastIssuedTime: this.queryParams.lastIssuedTime,
|
||||
parentId: row.parentId
|
||||
parentId: row.id
|
||||
}
|
||||
const response = await getOrderPage(queryParams)
|
||||
row.children = response.data.records
|
||||
// this.list.forEach((ele) => {
|
||||
// if (ele.parentId === row.parentId) {
|
||||
// row.children = response.data.records
|
||||
this.list.forEach((ele) => {
|
||||
if (ele.id === row.id) {
|
||||
this.$set(this.list[row._pageIndex-1], 'children', response.data.records); // 展开该行
|
||||
// }
|
||||
// })
|
||||
}
|
||||
})
|
||||
row.hasChildren = true;
|
||||
this.$set(row, 'expanded', true); // 展开该行
|
||||
} else {
|
||||
@ -356,7 +374,6 @@ export default {
|
||||
getOrderPage({...this.queryParams}).then(res => {
|
||||
let arr = res.data.records || []
|
||||
this.total = res.data.total || 0
|
||||
console.log(11111);
|
||||
// if (arr.length > 0) {
|
||||
// customerList().then(result => {
|
||||
// let tempData = result.data || []
|
||||
@ -445,6 +462,11 @@ export default {
|
||||
case 'complete':
|
||||
this.handleComplete(val.data)
|
||||
break
|
||||
case 'stop':
|
||||
orderStop({ id: val.data.id }).then((res) => {
|
||||
this.getList()
|
||||
})
|
||||
break
|
||||
default:
|
||||
}
|
||||
},
|
||||
|
||||
@ -108,8 +108,15 @@
|
||||
<!-- <div :class="{ active: activeModule === 'useInfo' }" @click="toggleTab('useInfo')">用料信息</div> -->
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<base-table v-show="activeModule === 'orderInfo'" :page="queryParams.pageNo" :limit="queryParams.pageSize"
|
||||
:table-props="tableProps1" :table-data="list1" :max-height="tableH" />
|
||||
<el-row v-show="activeModule === 'orderInfo'">
|
||||
<el-col :span="6">
|
||||
<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps1"
|
||||
:table-data="list1" :max-height="tableH" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- <base-table v-show="activeModule === 'useInfo'" :page="queryParams.pageNo" :limit="queryParams.pageSize"
|
||||
:table-props="tableProps2" :table-data="list2" :max-height="tableH" /> -->
|
||||
</div>
|
||||
@ -119,6 +126,7 @@
|
||||
import { parseTime } from '@/utils/ruoyi'
|
||||
import { publicFormatter } from '@/utils/dict'
|
||||
import { getProcessFlowList } from '@/api/base/orderManage'
|
||||
import { orderDetail, bomUseNum, getDetailTree, getDetailTreeInfo } from '@/api/base/orderManage'
|
||||
const tableProps1 = [
|
||||
{
|
||||
prop: 'issueTime',
|
||||
@ -199,13 +207,13 @@ const tableProps2 = [
|
||||
label: '剩余生产预计消耗'
|
||||
}
|
||||
]
|
||||
import { orderDetail, bomUseNum } from '@/api/base/orderManage'
|
||||
export default {
|
||||
name: 'OrderDetailData',
|
||||
data() {
|
||||
return {
|
||||
orderId: '',
|
||||
tableProps1,
|
||||
treeData:undefined,
|
||||
activeModule:'orderInfo',
|
||||
tableProps2,
|
||||
list1: [],
|
||||
@ -216,6 +224,10 @@ export default {
|
||||
pageNo: 1,
|
||||
pageSize: 500
|
||||
},
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
orderMsg: {},
|
||||
processFlowName: ''
|
||||
}
|
||||
@ -234,6 +246,15 @@ export default {
|
||||
toggleTab(val) {
|
||||
this.activeModule = val
|
||||
},
|
||||
handleNodeClick(val) {
|
||||
console.log(val)
|
||||
getDetailTreeInfo({
|
||||
id: val.id
|
||||
}).then(res => {
|
||||
this.list1 = res.data.order
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
initData(to) {
|
||||
if (to.name === 'OrderDetailData') {
|
||||
this.orderId = location.href.split('?')[1].split('=')[1]
|
||||
@ -262,6 +283,12 @@ export default {
|
||||
this.list2 = []
|
||||
}
|
||||
})
|
||||
getDetailTree({
|
||||
id: this.orderId
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
this.treeData =res.data
|
||||
})
|
||||
// 工艺
|
||||
getProcessFlowList().then(res => {
|
||||
let arr = res.data || []
|
||||
|
||||
@ -174,40 +174,40 @@ export default {
|
||||
}
|
||||
}
|
||||
: undefined,
|
||||
this.$auth.hasPermi('base:order-completion-monitoring:qualityDet')
|
||||
? {
|
||||
type: 'qualityDetail',
|
||||
btnName: '质量',
|
||||
showTip: '质量详情',
|
||||
showParam: {
|
||||
type: '&',
|
||||
data: [
|
||||
{
|
||||
type: 'more',
|
||||
name: 'workOrderNum',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
: undefined,
|
||||
this.$auth.hasPermi('base:order-completion-monitoring:sendOut')
|
||||
? {
|
||||
type: 'sendOutDetail',
|
||||
btnName: '发货',
|
||||
showTip: '发货详情',
|
||||
showParam: {
|
||||
type: '&',
|
||||
data: [
|
||||
{
|
||||
type: 'more',
|
||||
name: 'workOrderNum',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
// this.$auth.hasPermi('base:order-completion-monitoring:qualityDet')
|
||||
// ? {
|
||||
// type: 'qualityDetail',
|
||||
// btnName: '质量',
|
||||
// showTip: '质量详情',
|
||||
// showParam: {
|
||||
// type: '&',
|
||||
// data: [
|
||||
// {
|
||||
// type: 'more',
|
||||
// name: 'workOrderNum',
|
||||
// value: 1
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
// : undefined,
|
||||
// this.$auth.hasPermi('base:order-completion-monitoring:sendOut')
|
||||
// ? {
|
||||
// type: 'sendOutDetail',
|
||||
// btnName: '发货',
|
||||
// showTip: '发货详情',
|
||||
// showParam: {
|
||||
// type: '&',
|
||||
// data: [
|
||||
// {
|
||||
// type: 'more',
|
||||
// name: 'workOrderNum',
|
||||
// value: 1
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
// : undefined
|
||||
].filter((v) => v),
|
||||
chartList: []
|
||||
}
|
||||
@ -297,7 +297,7 @@ export default {
|
||||
switch (val.type) {
|
||||
case 'orderDetail':
|
||||
this.$router.push({
|
||||
path: '/core/core-work-order-detail?woIdString='+val.data.woIdString
|
||||
path: '/produce/core-work-order-detail?woIdString='+val.data.woIdString
|
||||
})
|
||||
break
|
||||
case 'qualityDetail':
|
||||
@ -368,4 +368,4 @@ export default {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
100
src/views/produce/workOrder/barChart.vue
Normal file
100
src/views/produce/workOrder/barChart.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-09-11 10:07:42
|
||||
* @LastEditTime: 2024-09-11 10:07:43
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div
|
||||
id="orderEnergyChart"
|
||||
style="width: 100%"
|
||||
:style="{ height: chartHeight + 'px' }"
|
||||
></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from '@/utils/chartMixins/resize'
|
||||
export default {
|
||||
name: "BarChart",
|
||||
mixins: [resize],
|
||||
data() {
|
||||
return {
|
||||
chartDom: '',
|
||||
chart: '',
|
||||
chartHeight: this.tableHeight(430)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: function () {
|
||||
this.getChart()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartHeight = this.tableHeight(430)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getChart() {
|
||||
if (
|
||||
this.chart !== null &&
|
||||
this.chart !== '' &&
|
||||
this.chart !== undefined
|
||||
) {
|
||||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||||
}
|
||||
this.chartDom = document.getElementById('orderEnergyChart')
|
||||
this.chart = echarts.init(this.chartDom)
|
||||
console.log(this.chartData)
|
||||
let xData = []
|
||||
let yData = []
|
||||
this.chartData && this.chartData.map(item =>{
|
||||
xData.push(item.objName)
|
||||
yData.push(item.useNum)
|
||||
})
|
||||
var option = {
|
||||
color:['#288AFF'],
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '1%',
|
||||
bottom: '1%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
rotate: "45"
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: 'bar',
|
||||
barMaxWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,155 +1,175 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2023-11-23 18:45:15
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2024-09-11 10:27:13
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<!-- <el-drawer
|
||||
<!-- <el-drawer
|
||||
:visible.sync="visible"
|
||||
:show-close="false"
|
||||
:wrapper-closable="false"
|
||||
class="drawer"
|
||||
size="50%"> -->
|
||||
<div class="app-container">
|
||||
<!-- <small-title slot="title" :no-padding="true">
|
||||
{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
|
||||
</small-title> -->
|
||||
<el-button style="float: right" type="primary" @click="goback()">返回</el-button>
|
||||
<div v-show="workOrderButton.length">
|
||||
<el-button v-for="(work, index) in workOrderButton" :key="index" type="primary" @click="init(work.id, true)">{{ work.name }}</el-button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div>
|
||||
<h1>工单编码：{{ dataForm.code }}</h1>
|
||||
</div>
|
||||
<small-title
|
||||
style="margin: 16px 0; padding-left: 8px"
|
||||
:no-padding="true">
|
||||
基本信息
|
||||
</small-title>
|
||||
<div class="formContent">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">工单名称:{{ dataForm.name }}</el-col>
|
||||
<el-col :span="8">工单来源:{{ dataForm.triggerOrigin === 1 ? 'MES' : dataForm.triggerOrigin === 2 ? 'ERP' : ''}}</el-col>
|
||||
<el-col :span="8">所属订单:
|
||||
<span v-for="(item, index) in orderList" :key="index" style="margin-right: 10px">{{ item.orderName }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">产品名称:{{ dataForm.productName }}</el-col>
|
||||
<el-col :span="8">规 格:{{ dataForm.specifications }}</el-col>
|
||||
<el-col :span="8">计划生产数量:{{ dataForm.planQuantity }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">预计用时(小时):{{ dataForm.remainingTime }}</el-col>
|
||||
<el-col :span="8">计划投入数量:{{ dataForm.planAssignQuantity }}</el-col>
|
||||
<el-col :span="8">优先级:{{ fitlerP(dataForm.priority) }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">负责人:{{ dataForm.workers }}</el-col>
|
||||
<el-col :span="8">关联产线:
|
||||
<span v-for="(item, index) in dataForm.productLineNames" :key="index" style="margin-right: 10px">{{ item }}</span>
|
||||
</el-col>
|
||||
<el-col :span="8">物料计算方式:{{ dataForm.materialMethod === 1 ? '产品基础' : dataForm.materialMethod === 2 ? '工艺扩展' : '' }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">关联工艺:{{ dataForm.processFlowName }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<small-title
|
||||
style="margin: 16px 0; padding-left: 8px"
|
||||
:no-padding="true">
|
||||
生产信息
|
||||
</small-title>
|
||||
<div class="formContent">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">工单创建时间:{{ parseTime(dataForm.createTime) }}</el-col>
|
||||
<el-col :span="8">计划开始时间:{{ parseTime(dataForm.planStartTime) }}</el-col>
|
||||
<el-col :span="8">计划完成时间:{{ parseTime(dataForm.planFinishTime) }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">预计结束时间:{{ parseTime(dataForm.computeFinishTime) }}</el-col>
|
||||
<el-col :span="8">实际开始时间:{{ parseTime(dataForm.startProduceTime) }}</el-col>
|
||||
<el-col :span="8">实际完成时间:{{ parseTime(dataForm.finishProduceTime) }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">工单状态:{{ fitlerS(dataForm.status) }}</el-col>
|
||||
<el-col :span="8">实际投入数量:{{ dataForm.assignQuantity }}</el-col>
|
||||
<el-col :span="8">实际生产数量:{{ dataForm.actualQuantity }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">废片数量:{{ dataForm.nokQuantity }}</el-col>
|
||||
<el-col :span="8">检测瑕疵数:{{ }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="status-timegraph-container" style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column">
|
||||
<el-row v-show="workOrderButton.length !== 0" class="" style="
|
||||
margin-bottom: 4px;
|
||||
border-radius: 8px;
|
||||
">
|
||||
<workOrderNav :id-list="workOrderButton" @getWorkOrderId="getId">
|
||||
</workOrderNav>
|
||||
</el-row>
|
||||
<el-row class="" style="
|
||||
height: 1px;
|
||||
flex: .3;
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 16px 16px px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
">
|
||||
<div class="content">
|
||||
<div>
|
||||
<h1>工单编码：{{ dataForm.code }}</h1>
|
||||
</div>
|
||||
<small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true">
|
||||
基本信息
|
||||
</small-title>
|
||||
<div class="formContent">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">工单名称:{{ dataForm.name }}</el-col>
|
||||
<el-col :span="8">工单来源:{{ dataForm.triggerOrigin === 1 ? 'MES' : dataForm.triggerOrigin === 2 ? 'ERP' : ''}}
|
||||
</el-col>
|
||||
<el-col :span="8">所属订单:
|
||||
<span v-for="(item, index) in orderList" :key="index" style="margin-right: 10px">{{ item.orderName
|
||||
}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">产品名称:{{ dataForm.productName }}</el-col>
|
||||
<el-col :span="8">规 格:{{ dataForm.specifications }}</el-col>
|
||||
<el-col :span="8">计划生产数量:{{ dataForm.planQuantity }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">预计用时(小时):{{ dataForm.remainingTime }}</el-col>
|
||||
<el-col :span="8">计划投入数量:{{ dataForm.planAssignQuantity }}</el-col>
|
||||
<el-col :span="8">优先级:{{ fitlerP(dataForm.priority) }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">负责人:{{ dataForm.workers }}</el-col>
|
||||
<el-col :span="8">关联产线:
|
||||
<span v-for="(item, index) in dataForm.productLineNames" :key="index" style="margin-right: 10px">{{ item
|
||||
}}</span>
|
||||
</el-col>
|
||||
<el-col :span="8">物料计算方式:{{ dataForm.materialMethod === 1 ? '产品基础' : dataForm.materialMethod === 2 ? '工艺扩展'
|
||||
:
|
||||
'' }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">关联工艺:{{ dataForm.processFlowName }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row class="" style="
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
margin-bottom: 12px;
|
||||
background: #fff;
|
||||
padding: 16px 16px 32px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
">
|
||||
<el-tabs v-model="activeName" @tab-click="switchTab">
|
||||
<el-tab-pane label="生产信息" name="produce">
|
||||
<div class="formContent">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">工单创建时间:{{ parseTime(dataForm.createTime) }}</el-col>
|
||||
<el-col :span="8">计划开始时间:{{ parseTime(dataForm.planStartTime) }}</el-col>
|
||||
<el-col :span="8">计划完成时间:{{ parseTime(dataForm.planFinishTime) }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">预计结束时间:{{ parseTime(dataForm.computeFinishTime) }}</el-col>
|
||||
<el-col :span="8">实际开始时间:{{ parseTime(dataForm.startProduceTime) }}</el-col>
|
||||
<el-col :span="8">实际完成时间:{{ parseTime(dataForm.finishProduceTime) }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">工单状态:{{ fitlerS(dataForm.status) }}</el-col>
|
||||
<el-col :span="8">实际投入数量:{{ dataForm.assignQuantity }}</el-col>
|
||||
<el-col :span="8">实际生产数量:{{ dataForm.actualQuantity }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">废片数量:{{ dataForm.nokQuantity }}</el-col>
|
||||
<el-col :span="8">检测瑕疵数:{{ }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="订单信息" name="order">
|
||||
<base-table :max-height="tableH" :table-props="tableProps" :page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize" :table-data="orderList">
|
||||
<method-btn v-if="!isdetail" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn"
|
||||
@clickBtn="handleClick" />
|
||||
</base-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="预计用料信息" name="material">
|
||||
<base-table :max-height="tableH" :table-props="tableProps1" :page="listQuery1.pageNo"
|
||||
:limit="listQuery1.pageSize" :table-data="materialList" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="质量信息" name="quality">
|
||||
<base-table :max-height="tableH" :table-props="tablePropsQuality" :table-data="qualityList" :page="1"
|
||||
:limit="10" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="能源信息" name="energy">
|
||||
<div class="toggleTabBox">
|
||||
<div :class="{ active: activeModule === 'dataList' }" @click="toggleTab('dataList')">数据列表</div>
|
||||
<div :class="{ active: activeModule === 'barChart' }" @click="toggleTab('barChart')">柱状图</div>
|
||||
</div>
|
||||
<div>
|
||||
<div v-show="activeModule === 'dataList'">
|
||||
<!-- 表格 -->
|
||||
<base-table :max-height="tableH" :table-props="tablePropsEnergy" :page="listQueryEnergy.pageNo"
|
||||
:limit="listQueryEnergy.pageSize" :table-data="energyList" />
|
||||
</div>
|
||||
<!-- 图形 -->
|
||||
<div v-show="activeModule === 'barChart'">
|
||||
<bar-chart ref="orderEnergyChart" :chartData="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<div class="attr-list">
|
||||
<small-title
|
||||
style="margin: 16px 0; padding-left: 8px"
|
||||
:no-padding="true">
|
||||
订单相关信息
|
||||
</small-title>
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:table-data="orderList">
|
||||
<method-btn
|
||||
v-if="!isdetail"
|
||||
slot="handleBtn"
|
||||
:width="120"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<!-- <pagination
|
||||
v-show="listQuery.total > 0"
|
||||
:total="listQuery.total"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page-sizes="[5, 10, 15]"
|
||||
@pagination="getList" /> -->
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<div class="attr-list">
|
||||
<small-title
|
||||
style="margin: 16px 0; padding-left: 8px"
|
||||
:no-padding="true">
|
||||
预计用料信息
|
||||
</small-title>
|
||||
<base-table
|
||||
:table-props="tableProps1"
|
||||
:page="listQuery1.pageNo"
|
||||
:limit="listQuery1.pageSize"
|
||||
:table-data="materialList" />
|
||||
<!-- <pagination
|
||||
v-show="listQuery1.total > 0"
|
||||
:total="listQuery1.total"
|
||||
:page.sync="listQuery1.pageNo"
|
||||
:limit.sync="listQuery1.pageSize"
|
||||
:page-sizes="[5, 10, 15]"
|
||||
@pagination="getList" /> -->
|
||||
</div>
|
||||
|
||||
<!-- <div class="drawer-body__footer">
|
||||
<el-button type="primary" @click="goback()">关闭</el-button>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 对话框(添加 / 修改) -->
|
||||
<!-- <base-dialog dialogTitle="添加设备" :dialogVisible="open" width="500px" @close="open = false" @cancel="open = false"
|
||||
@confirm="submitForm">
|
||||
<el-select v-if="open" style="width: 100%" filterable clearable v-model="queryParams.equipmentId"
|
||||
placeholder="请选择一个设备">
|
||||
<el-option v-for="eq in eqList" :key="eq.id" :value="eq.id" :label="eq.name"></el-option>
|
||||
</el-select>
|
||||
</base-dialog> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import basicAdd from '../../core/mixins/basic-add';
|
||||
import { getCoreWO, getMaterialBomPage, getConOrderList, getCoreWOListById } from "@/api/base/coreWorkOrder";
|
||||
import tableHeightMixin from '@/mixins/tableHeightMixin';
|
||||
import { getOrderEnergyData } from "@/api/monitoring/orderEnergy";
|
||||
// import { orderList } from "@/api/base/orderManage";
|
||||
import {
|
||||
getStatisticalDataPage,
|
||||
} from '@/api/monitoring/statisticalData';
|
||||
import { getProcessFlowList } from '@/api/base/orderManage'
|
||||
import SmallTitle from './SmallTitle';
|
||||
import { publicFormatter } from "@/utils/dict";
|
||||
import { parseTime } from '@/utils/ruoyi'
|
||||
|
||||
import workOrderNav from './workOrderNav.vue'
|
||||
import BarChart from "./barChart"
|
||||
const tableBtn = [
|
||||
{
|
||||
type: 'edit',
|
||||
@ -199,14 +219,101 @@ const tableProps1 = [
|
||||
label: '剩余生产预计消耗'
|
||||
},
|
||||
];
|
||||
|
||||
const tablePropsEnergy = [
|
||||
{
|
||||
prop: 'objName',
|
||||
label: '对象名称'
|
||||
},
|
||||
{
|
||||
prop: 'objCode',
|
||||
label: '对象编码',
|
||||
// filter: publicFormatter('unit_dict')
|
||||
},
|
||||
{
|
||||
prop: 'energyType',
|
||||
label: '能源类型',
|
||||
// filter: publicFormatter('unit_dict')
|
||||
},
|
||||
{
|
||||
prop: 'startNum',
|
||||
label: '工单开始值',
|
||||
// filter: publicFormatter('unit_dict')
|
||||
},
|
||||
{
|
||||
prop: 'endNum',
|
||||
label: '工单结束值/当前值'
|
||||
},
|
||||
{
|
||||
prop: 'useNum',
|
||||
label: '使用量'
|
||||
},
|
||||
];
|
||||
export default {
|
||||
components: { SmallTitle },
|
||||
mixins: [tableHeightMixin],
|
||||
components: { SmallTitle, workOrderNav, BarChart },
|
||||
computed: {
|
||||
tablePropsQuality() {
|
||||
return [
|
||||
{
|
||||
// width: 128,
|
||||
prop: 'workOrderName',
|
||||
label: '工单名称',
|
||||
},
|
||||
{
|
||||
// width: 128,
|
||||
prop: 'productionName',
|
||||
label: '产品',
|
||||
},
|
||||
{
|
||||
// width: 160,
|
||||
prop: 'inspectionContent',
|
||||
label: '检测内容',
|
||||
},
|
||||
...this.dynamicProps,
|
||||
{
|
||||
// width: 128,
|
||||
prop: 'sumScrap',
|
||||
label: '未检测总数',
|
||||
},
|
||||
{
|
||||
// width: 128,
|
||||
prop: 'scrapRatio',
|
||||
label: '比例(%)',
|
||||
// subcomponent: {
|
||||
// name: 'TextOnly',
|
||||
// props: {
|
||||
// injectData: {
|
||||
// type: Object,
|
||||
// default: () => ({}),
|
||||
// },
|
||||
// },
|
||||
// data() {
|
||||
// return {
|
||||
// text: '比例',
|
||||
// };
|
||||
// },
|
||||
// methods: {
|
||||
// handleEmit(payload) {
|
||||
// console.log('handleEmit', payload);
|
||||
// },
|
||||
// },
|
||||
// render(h) {
|
||||
// return h('el-button', { props: { type: 'text' } }, this.text);
|
||||
// },
|
||||
// },
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableBtn,
|
||||
tableProps,
|
||||
tableProps1,
|
||||
tableProps,
|
||||
heightNum: 236,
|
||||
tablePropsEnergy,
|
||||
tableProps1,
|
||||
activeModule:'dataList',
|
||||
workOrderId:undefined,
|
||||
addOrUpdateVisible: false,
|
||||
urlOptions: {
|
||||
infoURL: getCoreWO
|
||||
@ -215,7 +322,13 @@ export default {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
total: 0,
|
||||
},
|
||||
},
|
||||
listQueryEnergy: {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
total: 0,
|
||||
},
|
||||
activeName:'produce',
|
||||
listQuery1: {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
@ -223,40 +336,120 @@ export default {
|
||||
},
|
||||
dataForm: {},
|
||||
orderList: [],
|
||||
materialList: [],
|
||||
materialList: [],
|
||||
energyList: [],
|
||||
qualityList: [],
|
||||
chartData:[],
|
||||
dynamicProps:[],
|
||||
// orderArray: [],
|
||||
visible: false,
|
||||
isdetail: false,
|
||||
workOrderButton: [],
|
||||
processFlowList: []
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
workOrderId(newValue, oldValue) {
|
||||
this.activeName = 'produce'
|
||||
this.init(newValue)
|
||||
this.dataForm.id = newValue
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDict()
|
||||
},
|
||||
mounted() {
|
||||
if (this.$route.query.woIdString && this.$route.query.woIdString !== 'undefined') {
|
||||
const idList = this.$route.query.woIdString.split(',')
|
||||
const idList = this.$route.query.woIdString.split(',')
|
||||
console.log(idList);
|
||||
|
||||
getCoreWOListById(idList).then(res => {
|
||||
this.workOrderButton = res.data.map(work => {
|
||||
return {
|
||||
id: work.id,
|
||||
name: work.name
|
||||
}
|
||||
})
|
||||
})
|
||||
// console.log(this.workOrderButton);
|
||||
this.init(this.workOrderButton[0].id, true)
|
||||
})
|
||||
} else {
|
||||
this.init(this.$route.query.id, true)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
methods: {
|
||||
getId(val) {
|
||||
this.workOrderId = val
|
||||
},
|
||||
async switchTab(val) {
|
||||
if (this.activeName === 'order') {
|
||||
getConOrderList({
|
||||
workOrderId: this.dataForm.id,
|
||||
}).then((response) => {
|
||||
this.orderList = response.data;
|
||||
// this.listQuery.total = response.data.total;
|
||||
});
|
||||
}else if (this.activeName === 'material') {
|
||||
getConOrderList({
|
||||
workOrderId: this.dataForm.id,
|
||||
}).then((response) => {
|
||||
this.materialList = response.data;
|
||||
// this.listQuery.total = response.data.total;
|
||||
});
|
||||
} else if (this.activeName === 'energy') {
|
||||
getOrderEnergyData({
|
||||
workOrderId: this.dataForm.id,
|
||||
}).then((response) => {
|
||||
this.energyList = response.data
|
||||
this.chartData = response.data
|
||||
// this.listQuery.total = response.data.total;
|
||||
});
|
||||
} else if (this.activeName === 'quality') {
|
||||
const {
|
||||
data: { data, otherList, otherMap, nameData },
|
||||
} = await getStatisticalDataPage({
|
||||
workOrderIdList:[this.dataForm,id]
|
||||
})
|
||||
// console.log(this.queryParams);
|
||||
this.dynamicProps = this.filterNameData(nameData)
|
||||
this.qualityList = this.filterData(data);
|
||||
}
|
||||
},
|
||||
getDict() {
|
||||
// 工艺
|
||||
getProcessFlowList().then(res => {
|
||||
this.processFlowList = res.data || []
|
||||
})
|
||||
},
|
||||
},
|
||||
filterNameData(nameData) {
|
||||
const ndSet = new Set();
|
||||
nameData.forEach((nd) => {
|
||||
ndSet.add(nd.name);
|
||||
});
|
||||
return Array.from(ndSet.values())
|
||||
.sort()
|
||||
.map((name) => ({
|
||||
prop: name,
|
||||
label: name,
|
||||
}));
|
||||
},
|
||||
filterData(data) {
|
||||
return data.map((item) => {
|
||||
const { data: innerData } = item;
|
||||
const keyValuePairs = {};
|
||||
innerData.map((d) => {
|
||||
keyValuePairs[d.dynamicName] = d.dynamicValue;
|
||||
});
|
||||
return {
|
||||
inspectionContent: item.inspectionContent,
|
||||
...keyValuePairs,
|
||||
sumInput: item.sumInput,
|
||||
productionName: item.productionName,
|
||||
workOrderId: item.workOrderId,
|
||||
scrapRatio: item.scrapRatio,
|
||||
};
|
||||
});
|
||||
},
|
||||
fitlerP(val) {
|
||||
if (val) {
|
||||
if (val === 1) {
|
||||
@ -318,24 +511,26 @@ export default {
|
||||
} else {
|
||||
this.addNew(raw.data.id);
|
||||
}
|
||||
},
|
||||
},
|
||||
toggleTab(val) {
|
||||
this.activeModule = val
|
||||
if (this.activeModule === 'barChart') {
|
||||
this.$nextTick((res) => {
|
||||
this.$refs.orderEnergyChart.getChart()
|
||||
})
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
// 获取订单列表
|
||||
getConOrderList({
|
||||
workOrderId: this.dataForm.id,
|
||||
}).then((response) => {
|
||||
this.orderList = response.data;
|
||||
// this.listQuery.total = response.data.total;
|
||||
});
|
||||
// 获取预使用原料列表
|
||||
if (this.dataForm.planProductId) {
|
||||
getMaterialBomPage({
|
||||
productId: this.dataForm.planProductId,
|
||||
}).then((response) => {
|
||||
this.materialList = response.data;
|
||||
// this.listQuery.total = response.data.length;
|
||||
});
|
||||
}
|
||||
// if (this.dataForm.planProductId) {
|
||||
// getMaterialBomPage({
|
||||
// productId: this.dataForm.planProductId,
|
||||
// }).then((response) => {
|
||||
// this.materialList = response.data;
|
||||
// // this.listQuery.total = response.data.length;
|
||||
// });
|
||||
// }
|
||||
// 获取订单相关信息
|
||||
// orderList({
|
||||
// workOrderId: this.dataForm.id
|
||||
@ -364,7 +559,7 @@ export default {
|
||||
})
|
||||
}
|
||||
// 获取订单列表和用料列表
|
||||
this.getList();
|
||||
// this.getList();
|
||||
});
|
||||
} else {
|
||||
if (this.urlOptions.isGetCode) {
|
||||
@ -373,10 +568,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
goback() {
|
||||
this.$router.go(-1);
|
||||
// this.initData();
|
||||
},
|
||||
goEdit() {
|
||||
this.isdetail = false;
|
||||
},
|
||||
@ -390,7 +581,7 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.drawer >>> .el-drawer {
|
||||
border-radius: 8px 0 0 8px;
|
||||
display: flex;
|
||||
@ -453,4 +644,26 @@ export default {
|
||||
.add {
|
||||
color: #0b58ff;
|
||||
}
|
||||
.container{
|
||||
/* background-color: #fff; */
|
||||
border-radius: 8px;
|
||||
padding: 16px 16px 0 16px;
|
||||
margin: 8px 0 8px 0px;
|
||||
}
|
||||
.toggleTabBox {
|
||||
display: inline-block;
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
padding: 0 8px 4px;
|
||||
color: rgba(102, 102, 102, 0.5);
|
||||
border-bottom: 2px solid rgba(242, 244, 249, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
border-bottom-color: #0B58FF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
151
src/views/produce/workOrder/workOrderNav.vue
Normal file
151
src/views/produce/workOrder/workOrderNav.vue
Normal file
@ -0,0 +1,151 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-09-09 15:39:08
|
||||
* @LastEditTime: 2024-09-11 10:25:54
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div class="button-nav">
|
||||
<!-- <div class="text-carousel"> -->
|
||||
<el-button style="flex: .1" type="text" @click="prevText" icon="el-icon-caret-left"></el-button>
|
||||
<button @click="handleChange(item.id)" v-for="(item,index) in idList" :key="item.id"
|
||||
:class="[item.id === currentMenu ? 'active' : '']">{{ item.name }}
|
||||
</button>
|
||||
<el-button style="flex: .1" type="text" @click="nextText" icon="el-icon-caret-right"></el-button>
|
||||
<button style="flex: .2;display: inline-block;" @click="goback()">
|
||||
<svg-icon style="width: 20px; height: 20px" :icon-class=" 'back' " />
|
||||
<span>返回</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
idList: {
|
||||
type: Array,
|
||||
default:[]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentMenu: undefined
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
currentMenu(newValue,oldValue) {
|
||||
this.$emit('getWorkOrderId', newValue)
|
||||
},
|
||||
idList(newValue, oldValue) {
|
||||
console.log(newValue);
|
||||
this.currentMenu = newValue[0].id
|
||||
}
|
||||
},
|
||||
// created() {
|
||||
// if (this.currentMenu === undefined) {
|
||||
// console.log(this.idList);
|
||||
// this.$nextTick(() => {
|
||||
// this.currentMenu = this.idList[0]?.id
|
||||
// })
|
||||
// }
|
||||
// },
|
||||
// mounted() {
|
||||
|
||||
// },
|
||||
methods: {
|
||||
goback() {
|
||||
this.$router.go(-1);
|
||||
// this.initData();
|
||||
},
|
||||
handleChange(val) {
|
||||
this.currentMenu = val
|
||||
// this.$emit('getWorkOrderId',val)
|
||||
},
|
||||
prevText() {
|
||||
const currentIndex = this.idList.findIndex((item) => item.id === this.currentMenu);
|
||||
const newIndex = (currentIndex - 1 + this.idList.length) % this.idList.length;
|
||||
this.currentMenu = this.idList[newIndex].id;
|
||||
// this.$emit('getWorkOrderId', val)
|
||||
},
|
||||
nextText() {
|
||||
const currentIndex = this.idList.findIndex((item) => item.id === this.currentMenu);
|
||||
const newIndex = (currentIndex + 1) % this.idList.length;
|
||||
this.currentMenu = this.idList[newIndex].id;
|
||||
// this.$emit('getWorkOrderId', val)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.button-nav {
|
||||
width: 100%;
|
||||
padding: 12px 0;
|
||||
display: flex;
|
||||
// justify-content: space-around;
|
||||
gap: 12px;
|
||||
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
padding: 20px;
|
||||
color: #888;
|
||||
letter-spacing: 2px;
|
||||
flex: 1;
|
||||
box-sizing: padding-box;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #111;
|
||||
border-bottom: 4px solid #0b58ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.custom-tabs >>> .el-tabs__header {
|
||||
margin-bottom: 8px;
|
||||
display: inline-block;
|
||||
/* transform: translateY(-12px); */
|
||||
}
|
||||
.custom-tabs >>> .el-tabs__item {
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
line-height: 36px !important;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.custom-tabs >>> .el-tabs__content {
|
||||
height: calc(100% - 42px);
|
||||
}
|
||||
.custom-tabs >>> .el-tab-pane {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
border: 10px solid #f002;
|
||||
}
|
||||
</style>
|
||||
@ -1,3 +1,10 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-13 08:36:54
|
||||
* @LastEditTime: 2024-09-11 09:35:12
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
|
||||
Ładowanie…
Reference in New Issue
Block a user