aiot-app/pages/production/execute/extrusion/detail.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      :title="title"
      @clickLeft="back"
    >
    </uni-nav-bar>

    <view class="view-container">
      <DetailView :baseInfo="baseInfo" />
    </view>
    <view class="footer">
      <ProcessOperate
        @handlePreparation="handlePreparation"
        :type="0"
        @handleReport="handleReport"
      />
    </view>
  </view>
</template>

<script>
import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue";
import DetailView from "./components/DetailView.vue";
import ProcessOperate from "../components/ProcessOperate.vue";
import { getInfoById } from "@/api/production/extrusion.js";
import { getTaskListById } from "@/api/production/execute";
export default {
  components: { DetailView, baTreePicker, ProcessOperate },
  data() {
    return {
      baseInfo: {
        conventionalStockTransferReq: {},
      },
      loading: false,
      title: "挤压成型",
      showTab: false,
      code: "",
      id: "",
      taskCode: "",
      taskId: "",
    };
  },
  onLoad({ id, code }) {
    if (id) {
      this._getDetail(id);
      this.id = id;
    }
    if (code) {
      this.code = code;
    }
  },
  methods: {
    handleReport() {
      uni.navigateTo({
        url: `/pages/production/execute/extrusion/report?&taskCode=${this.taskCode}&id=${this.id}`,
      });
    },
    handlePreparation() {
      uni.navigateTo({
        url: `/pages/production/execute/extrusion/preparation?&code=${this.code}&id=${this.id}&taskInstanceId=${this.taskId}&versionId=${this.baseInfo.produceVersionId}`,
      });
    },
    toNav(url) {
      if (url) {
        uni.navigateTo({
          url: url,
        });
      }
    },

    async _getDetail(id) {
      const data = await getInfoById(id);
      if (data) {
        this.baseInfo = data;
        this.taskCode = data.taskTypeProcessDiagrams[0].taskCode;
        this._getTaskListById();
      }
    },
    async _getTaskListById() {
      // 获取工序
      const list = await getTaskListById(this.baseInfo.produceVersionId);

      if (list?.length) {
        this.taskId = list[0].id;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  position: fixed;
  width: 100vw;
  background-color: rgba(242, 242, 242, 0.792156862745098);
  padding-top: 20rpx;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20rpx;

  .tab-item {
    width: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    &.active {
      background: linear-gradient(
        180deg,
        rgba(75, 121, 2, 1) 0%,
        rgba(255, 255, 255, 1) 12%
      );
    }
  }
}
.footer {
  padding: 20rpx 0;
  z-index: 1000;
}
</style>