hy-vue/src/views/accessrecords/plan/ProcessMaterialWarehousingPlan.vue

<template>
  <a-card :bordered="false" >

    <a-tabs style="text-align: center" :active-key="this.tabKey" @change="callback">
      <a-tab-pane tab="物资明细" key="1" forceRender >
        <process-material-warehousing-detail :materWared="this.$route.query.item" />
      </a-tab-pane>

      <a-tab-pane tab="流程节点图" key="2" forceRender >
        <process-material-warehousing-flow-chart v-if="ifShow" :pictureId="pictureId" :procInstId="procInstId"/>
      </a-tab-pane>
      <a-tab-pane tab="制式表格" key="3" forceRender>
        <process-material-warehousing-statement :materWared="this.$route.query.item"/>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
import ProcessMaterialWarehousingDetail from '../modules/ProcessMaterialWarehousingDetail'
import ProcessMaterialWarehousingFlowChart from '../flowchart/ProcessMaterialWarehousingFlowChart'
import ProcessMaterialWarehousingStatement from '../statement/ProcessMaterialWarehousingStatement'
import { getAction } from '@api/manage'

export default {
  name: 'ProcessMaterialWarehousingPlan',
  components: {
    ProcessMaterialWarehousingDetail,
    ProcessMaterialWarehousingFlowChart,
    ProcessMaterialWarehousingStatement
  },
  data() {
    return {
      tabKey:'1',
      isNew:'',
      ifShow:false,
      pictureId:'',
      procInstId:'',
      proMaterListId: this.$route.query.item,
      url:{
        list:"",
        getProcessPicture:'/hy/processMaterialWarehousing/getProcessPicture'
      },
    }
  },
  props: {

    /*流程数据*/
    processData:{
      type:Object,
      default:()=>{return {}},
      required:false
    },
    item: {
      type:String,
    },
  },
  // props: {
  //   /*流程数据*/
  //   processData:{
  //     type:Object,
  //     default:()=>{return {}},
  //     required:false
  //   },
  //   /*是否新增*/
  //   isNew: {type: Boolean, default: false, required: false},
  //   /*是否处理流程*/
  //   task: {type: Boolean, default: false, required: false},
  //   //流程表单data
  //   formData: {
  //     type: Object,
  //     default: () => {
  //     },
  //     required: false
  //   },
  //   //表单模式：false流程表单 true普通表单
  //   formBpm: {
  //     type: Boolean,
  //     default: false,
  //     required: false
  //   },
  //   //表单禁用
  //   disabled: {
  //     type: Boolean,
  //     default: false,
  //     required: false
  //   }
  // },
  created(){
    console.log(this.proMaterListId);
    // this.getPicture();
  },
  watch:{
    $route(to,from) {
      this.tabKey = '1'
      console.log("我监听到了页面的切换")
    }
  },
  methods: {
    callback(key){
      this.tabKey = key
      if (key==2){
        getAction(this.url.getProcessPicture, { id:this.$route.query.item }).then((res) => {
          if (res.success) {
            // this.dataSource = res.result.records;
            // this.ipagination.total = res.result.total;
            this.pictureId=res.result.procDefId;
            this.ifShow=true;
            console.log(res,'獲取數據')
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      }
    }

  },
}
</script>

<style scoped>

</style>