jonhon-mes-web/src/views/processManagement/components/processMainte/dsPartIndex.vue

<template>
  <el-dialog title="零件信息" v-model="setCrewShow" :before-close="cancel" fullscreen @opened="opened">
    <div class="tabs-container">
      <el-tabs v-if="setCrewShow" v-model="activeName" @tab-click="handleClick">
        <!-- 零件信息-->
        <el-tab-pane label="零件信息" name="1">
          <dsPartBasicInfo ref="dsPartRef" v-if="activeName == '1'" :part-id="partId" @cancelClose="cancelClose"
            :dialogType="dialogType" :partType="partType" :dsPartInfo="dsPartInfo" @updateVersion="updateVersion" :updateRow="updateRow" />
        </el-tab-pane>
        <!-- 子件信息 -->
        <el-tab-pane label="工艺编制" name="2">
          <!-- 工艺编制 -->
          <processPlanning ref="craftEdit" v-if="activeName == '2'" :part-id="partId" :dialogType="dialogType" :updateRow="updateRow"></processPlanning>
        </el-tab-pane>
      </el-tabs>
      <div class="content-right">
        <p>工艺版本：{{partVersion}}</p>
      </div>
    </div>

    <template #footer v-if="activeName == '1'">
      <div class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="submit()" :loading="submitLoading">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import dsPartBasicInfo from './dsPartBasicInfo.vue';
import dsCraftPage from './dsCraft.vue'
import processPlanning from './processPlanning.vue'

import {
  getPartDetail,getModelList
} from '@/api/processManagement/taskProcessing';

export default {
  name: 'DsPartIndex',
  components: {
    dsPartBasicInfo,
    dsCraftPage,
    processPlanning
  },
  props: {
    partType: {
      type: String,
      default: '',
    },
    isOpen: {
      type: Boolean,
      default: false
    },
    partId: {
      type: [Number, String],
      default: null
    },
    dialogType: {
      type: String,
      default: '',
    },
    updateRow:{
      type:Object,
      default:{}
    }
  },
  data() {
    return {
      submitLoading: false,
      setCrewShow: false,
      activeName: '1',
      dsPartInfo:{},
      partVersion:'',//
    };
  },
  methods: {
    updateVersion(value){
      this.partVersion = value
    },
    opened() {
      // this.getPartDetails()
      // if (this.partId) {
      //   this.$refs.dsPartRef.loadData(this.partId);
      // }
    },
    handleClick(tab, event) {
      if (tab.name === '1') {
        // this.$refs.dsPartRef.loadData(this.partId);
      } else if (tab.name === '2') {
        // this.$refs.partSubRef.getData(this.partId, true);
      }
    },
    partSubRefLoad() {
      this.$refs.partSubRef.loadData(this.partId, true);
    },
    cancelClose(flag, dsPart) {
       this.submitLoading = false;
      if (flag) {
       
        this.cancel(true);
      } else {
        this.partId = dsPart.partId;
      }
    },
    cancel(refresh) {
      this.activeName = '1';
      //   this.$refs.dsPartRef.clear();
      this.setCrewShow = false
      
      this.$emit('cancel', typeof refresh === 'boolean' && refresh);
    },
    submit(){
      if(this.activeName=='1'){
        this.submitLoading = true
        this.$refs.dsPartRef.submit()
      }
    }
  },
  mounted() {
    this.setCrewShow = this.isOpen
    console.log('弹框页', this.dialogType)
  }
};
</script>
<style lang="scss" scoped>
.tabs-container {
  position: relative;
}

.content-right {
  width: 200px;
  position: absolute;
  right: -24px;
  top: -5px;
  /* 或者使用 flex: 0 0 200px; 根据需要调整宽度 */
}
</style>