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">
      <!-- <div class="version-info">
        <span class="version-label">工艺版本：{{ partVersion || '-' }}</span>
      </div> -->
      <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 processPlanning from './processPlanning.vue';

export default {
  name: 'DsPartIndex',
  components: {
    dsPartBasicInfo,
    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;
}

.version-info {
  width: 50%;
  position: absolute;
  right: 0;
  top: 10px;
  /* 或者使用 flex: 0 0 200px; 根据需要调整宽度 */
  .version-label{
    float: right;
  }
}
</style>