drp-ui/src/views/material/extend/detailMain.vue

<template>
    <div class="app-container">
        <el-tabs v-model="activeName" >
            <el-tab-pane label="基本信息" name="MaterialBaseInfo" >
                <MaterialBaseInfo :materialId="materialId"></MaterialBaseInfo>
            </el-tab-pane>
            <el-tab-pane label="物料图册" name="MaterialPictures" >
                <MaterialPictures :materialId="materialId"></MaterialPictures>
            </el-tab-pane>
            <el-tab-pane label="资质信息" name="MaterialQualifications" >
                <MaterialQualifications :materialId="materialId"></MaterialQualifications>
            </el-tab-pane>
            <el-tab-pane label="销售情况" name="MaterialSale" >
                <MaterialSale :materialId="materialId"></MaterialSale>
            </el-tab-pane>
            <el-tab-pane label="附件" name="MaterialAnnex" >
                <MaterialAnnex :materialId="materialId"></MaterialAnnex>
            </el-tab-pane>
        </el-tabs>
        <div class="button-container">
            <el-button type="danger" @click="qx">取消</el-button>
            <el-button type="danger" @click="bc">保存</el-button>
        </div>
    </div>
</template>
<script>
import { infoSave } from "@/api/material/extend/material.js";
import MaterialBaseInfo from '@/views/material/extend/baseinfo';
import MaterialAnnex from '@/views/material/extend/annex';
import MaterialPictures from '@/views/material/extend/pictures';
import MaterialQualifications from '@/views/material/extend/qualifications';
import MaterialSale from '@/views/material/extend/sale';
import { EventBus } from '@/views/material/extend/event/event-bus.js';
  export default {
    name: "MaterialDetailMain",
    components: {
        MaterialBaseInfo,
        MaterialAnnex,
        MaterialPictures,
        MaterialQualifications,
        MaterialSale
    },
    data() {
      return {
        activeName: 'MaterialBaseInfo', // 默认激活第一个标签
        materialId:'',
        dataSave: {
        },
      };
    },
    created() {
        console.log("1:::"+ this.materialId);
        console.log("2:::"+ this.$route.query.materialId);
        this.materialId = this.$route.query.materialId;
        console.log("3:::"+ this.materialId);
        this.$set(this.dataSave, 'materialId', this.materialId);
    },
    mounted() {
        EventBus.$on('sendMaterialInfo', this.handleSubmit);
    },
    beforeDestroy() {
        EventBus.$off('sendMaterialInfo', this.handleSubmit);
    },
    methods: {
        handleSubmit(val){
            console.log("E:::" + JSON.stringify(val))
            if(JSON.stringify(val).includes('homePicture')){
                // 物料图册
                this.$set(this.dataSave, 'materialPictures', {});
                this.$set(this.dataSave, 'materialPictures', val);
            }
            if(JSON.stringify(val).includes('annex')){
                // 附件
                this.$set(this.dataSave, 'materialAnnex', []);
                this.$set(this.dataSave, 'materialAnnex', val);
            }
            if(JSON.stringify(val).includes('suitDept')){
                // 适用科室
                this.$set(this.dataSave, 'materialSuitDept', []);
                this.$set(this.dataSave, 'materialSuitDept', val);
            }
        },
        bc(){
            if(this.dataSave.materialSuitDept != undefined && this.dataSave.materialSuitDept.length > 0){
                let flag = false;
                this.dataSave.materialSuitDept.forEach(e => {
                    if(e.suitDept == ''){
                        flag = true;
                    }
                });
                if(flag){
                    this.$message({
                        message: '无法保存, 当前存在未填写的适用科室信息, 请处理 !',
                        type: 'error'
                    });
                    return;
                };
            }
            // 提交
            infoSave(this.dataSave).then(response => {
                if(response.code == 200){
                    this.$message({
                        message: '保存成功 !',
                        type: 'success'
                    });
                }
            });
        },
        qx(){
            this.$router.go(-1)
        }
    },
  };
</script>

<style>
    .button-container {
      position: fixed;  /* 使用fixed定位，使得容器始终相对于浏览器窗口 */
      top: 10px;        /* 距离顶部10像素 */
      right: 60px;      /* 距离右侧10像素 */
      z-index: 1000;    /* 设置一个较高的z-index确保按钮在其他内容之上 */
    } 
</style>