|
|
@@ -0,0 +1,266 @@
|
|
|
+<template>
|
|
|
+ <div class="index_box">
|
|
|
+ <div class="content_box">
|
|
|
+ <div class="top-ste">
|
|
|
+ <el-steps
|
|
|
+ :active="activeIndex"
|
|
|
+ space="20px"
|
|
|
+ align-center
|
|
|
+ style="margin-top: 18px"
|
|
|
+ >
|
|
|
+ <el-step
|
|
|
+ v-for="(item, index) in routeList"
|
|
|
+ :key="index"
|
|
|
+ :title="item.taskTypeName"
|
|
|
+ @click.native="handIdx(index, item)"
|
|
|
+ :description="desIndex == index ? '此处' : ''"
|
|
|
+ :class="desIndex == index?'active':''"
|
|
|
+ ></el-step>
|
|
|
+ </el-steps>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getTaskInstanceList } from '@/api/produce/job';
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeIndex:0,
|
|
|
+ routeList:[],
|
|
|
+ desIndex: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 折叠悬浮中样式调整
|
|
|
+ init() {
|
|
|
+ this.$store.dispatch('theme/setCollapse', true);
|
|
|
+ },
|
|
|
+
|
|
|
+ //工序步骤条数据
|
|
|
+ getTaskFn() {
|
|
|
+ let workid=this.$route.query.workOrderId
|
|
|
+ getTaskInstanceList(workid).then((res) => {
|
|
|
+ this.routeList = res;
|
|
|
+
|
|
|
+ // 使用findIndex方法查找
|
|
|
+ const index = this.routeList.findIndex(
|
|
|
+ (item) => Number(item.taskId) == Number(this.workOrderInfo.taskId)
|
|
|
+ );
|
|
|
+
|
|
|
+
|
|
|
+ this.desIndex = index;
|
|
|
+ console.log(this.routeList,'888888');
|
|
|
+ // this.newId = this.routeList[this.desIndex].taskId||'';
|
|
|
+
|
|
|
+ // if (this.workOrderInfo.taskId != -2) {
|
|
|
+ // this.curTaskObj = JSON.parse(JSON.stringify(this.routeObj));
|
|
|
+ // } else {
|
|
|
+ // this.curTaskObj = JSON.parse(JSON.stringify(this.routeList[0]));
|
|
|
+ // this.desIndex = 0;
|
|
|
+ // }
|
|
|
+ this.activeIndex = index;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const targetElements =
|
|
|
+ document.getElementsByClassName('ele-admin-tabs');
|
|
|
+
|
|
|
+ if (targetElements.length > 0) {
|
|
|
+ // 遍历所有具有 'ele-admin-tabs' 类的元素
|
|
|
+ Array.from(targetElements).forEach((element) => {
|
|
|
+ // 对每个元素添加 'new-ele-admin-tabs' 类
|
|
|
+ element.classList.add('new-ele-admin-tabs');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ destroyed() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const targetElements =
|
|
|
+ document.getElementsByClassName('ele-admin-tabs');
|
|
|
+ if (targetElements.length > 0) {
|
|
|
+ Array.from(targetElements).forEach((element) => {
|
|
|
+ element.classList.remove('new-ele-admin-tabs');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.content_box {
|
|
|
+ width:100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.footBtn {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.new-ele-admin-tabs {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+.c_title {
|
|
|
+ color: #157a2c;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.tableZ_box {
|
|
|
+ border: 1px solid #e3e5e5;
|
|
|
+ margin: 6px 0;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col {
|
|
|
+ width: calc(100% / 5);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ min-width: 200px;
|
|
|
+ min-height: 32px;
|
|
|
+ border-bottom: 1px solid #e3e5e5;
|
|
|
+ border-right: 1px solid #e3e5e5;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 4px;
|
|
|
+ width: 80px;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #d0e4d5;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding: 4px 6px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pd6 {
|
|
|
+ padding: 0 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.seek-list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.right_main_box {
|
|
|
+ background-color: #fff;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.index_box {
|
|
|
+ padding: 10px;
|
|
|
+ padding-bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-width: 1280px !important;
|
|
|
+ height: calc(100vh - 60px);
|
|
|
+ // overflow-x: auto;
|
|
|
+ /* 当内容超出宽度时，允许水平滚动 */
|
|
|
+ white-space: nowrap;
|
|
|
+ /* 防止内部文本换行，确保所有内容都在一行显示 */
|
|
|
+ scrollbar-width: thin;
|
|
|
+ /* 设置滚动条宽度（浏览器兼容性可能有所不同） */
|
|
|
+ scrollbar-color: #40a9ff transparent;
|
|
|
+ /* 设置滚动条颜色和轨道颜色（同样，浏览器兼容性） */
|
|
|
+}
|
|
|
+
|
|
|
+.main {
|
|
|
+ width: 100%;
|
|
|
+ min-width: 1280px;
|
|
|
+
|
|
|
+ height: calc(100vh - 70px - 50px - 80px);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.left_main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ min-width: 640px;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ // .bottom {
|
|
|
+ // width: 100%;
|
|
|
+ // min-height: calc((100vh - 70px - 50px - 80px - 20px) / 2);
|
|
|
+ // overflow: hidden;
|
|
|
+ // }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-tabs__item.is-active {
|
|
|
+ background-color: #DFFADE;
|
|
|
+ /* 蓝色背景 */
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .is-active {
|
|
|
+ color: #DFFADE;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.right_main {
|
|
|
+ min-width: 640px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ height: calc((100vh - 70px - 50px - 80px - 12px));
|
|
|
+ background: #f0f3f3;
|
|
|
+}
|
|
|
+
|
|
|
+//工单报工样式
|
|
|
+.top-ste{
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
longfenglin