xujiecloud-vue/src/views/modules/quote/detail/primary/quoteDetailRouting.vue

<script>
import {queryQuoteDetailBomTree} from "@/api/quote/quoteDetailBomTree";
import {
  queryQuoteDetailRouting,
  queryQuoteDetailRoutingAlternative, changeQuoteDetailRoutingChange,
  queryQuoteDetailRoutingVersion
} from "@/api/quote/quoteDetailRouting";

export default {
  name: "quoteDetailRouting",
  props:{
    quoteDetail:{
      type:Object,
      required:true
    },
  },
  model:{
    prop: "quoteDetail",
    event: "update"
  },
  data(){
    return{
      isAllRouting:false,
      dataList:[],
      queryLoading:false,
      treeData:[],
      columns: [
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5OperationNo',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'operationNo',
          headerAlign: "center",
          align: "center",
          columnLabel: '工序号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 60,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5OperationName',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'operationName',
          headerAlign: "center",
          align: "left",
          columnLabel: '工序名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5PartNo',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'partNo',
          headerAlign: "center",
          align: "left",
          columnLabel: '物料编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5PartDesc',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'partDesc',
          headerAlign: "center",
          align: "left",
          columnLabel: '物料描述',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 200,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5Version',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'routingRevision',
          headerAlign: "center",
          align: "center",
          columnLabel: '版本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5AlternativeNo',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'alternativeNo',
          headerAlign: "center",
          align: "left",
          columnLabel: '替代编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5WorkCenterNo',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'workCenterNo',
          headerAlign: "center",
          align: "left",
          columnLabel: '加工中心编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5WorkCenterDesc',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'workCenterDesc',
          headerAlign: "center",
          align: "left",
          columnLabel: '加工中心名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 200,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5WorkCenterCost',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'workCenterCost',
          headerAlign: "center",
          align: "left",
          columnLabel: '加工中心成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5EfficiencyFactor',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'efficiencyFactor',
          headerAlign: "center",
          align: "right",
          columnLabel: '效率%',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5MachRunFactor',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'machRunFactor',
          headerAlign: "center",
          align: "right",
          columnLabel: '机器单位产出',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5MachSetupTime',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'machSetupTime',
          headerAlign: "center",
          align: "right",
          columnLabel: '调机时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5LaborRunFactor',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'laborRunFactor',
          headerAlign: "center",
          align: "right",
          columnLabel: '人工单位产出',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5LaborSetupTime',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'laborSetupTime',
          headerAlign: "center",
          align: "right",
          columnLabel: '人工调机时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5RunTimeDesc',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'runTimeDesc',
          headerAlign: "center",
          align: "center",
          columnLabel: '产出单位',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5MachCycleTime',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'machCycleTime',
          headerAlign: "center",
          align: "right",
          columnLabel: '机器处理时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5LaborCycleTime',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'laborCycleTime',
          headerAlign: "center",
          align: "right",
          columnLabel: '人工处理时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5ResourceNum',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'resourceNum',
          headerAlign: "center",
          align: "right",
          columnLabel: '机台数量',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5CrewSize',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'crewSize',
          headerAlign: "center",
          align: "right",
          columnLabel: '生产过程人数',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5SetupCrewSize',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'setupCrewSize',
          headerAlign: "center",
          align: "right",
          columnLabel: '调机过程人数',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5LaborClassNo',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'laborClassNo',
          headerAlign: "center",
          align: "left",
          columnLabel: '人员等级',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5SetupLaborClassNo',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'setupLaborClassNo',
          headerAlign: "center",
          align: "left",
          columnLabel: '调机过程中人员等级',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5LaborClassCost',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'laborClassCost',
          headerAlign: "center",
          align: "left",
          columnLabel: '人员等级成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5SetupLaborClassCost',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'setupLaborClassCost',
          headerAlign: "center",
          align: "left",
          columnLabel: '调机人员等级成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 120,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5MachineCost',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'machineCost',
          headerAlign: "center",
          align: "right",
          columnLabel: '单位机器成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5MachineCost',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'unitManufacturingCosts',
          headerAlign: "center",
          align: "right",
          columnLabel: '单位制造成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5LaborCosts',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'laborCosts',
          headerAlign: "center",
          align: "right",
          columnLabel: '单位人工成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 140,
        },{
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table5QuoteUnitCost',
          tableId: "5011Table5",
          tableName: "报价工艺信息",
          columnProp: 'quoteUnitCost',
          headerAlign: "center",
          align: "right",
          columnLabel: '单位报价成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: 'right',
          columnWidth: 120,
        },
      ],
      props:{
        children: 'list',
        label: (data,node)=>{
          return `${data.partNo}-${data.engChgLevel}-${data.alternativeNo}-${data.bomType}`;
        },
      },
      queryTreeLoading:false,
      versionVisible:false,
      versionList:[],
      alternativeList:[],
      routing:{

      }
    }
  },
  methods:{
    handleQueryQuoteDetailBomTree(){
      let params = {
        id: this.quoteDetail.id,
      }
      this.queryTreeLoading = true;
      queryQuoteDetailBomTree(params).then(({data})=>{
        if (data && data.code === 0){
          this.treeData = data.rows;
          if (this.treeData.length > 0){
            this.$nextTick(()=>{
              this.$refs.tree.setCurrentKey(this.treeData[0].id);
              this.handleQueryDetailRouting();
            })
          }
          this.queryTreeLoading = false;
        }else {
          this.$message.warning(data.msg);
          this.queryTreeLoading = false;
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    nodeClick(data){
      this.handleQueryDetailRouting();
    },
    handleQueryDetailRouting(){
      let node = this.$refs.tree.getCurrentNode();
      let params = {
        treeId:node.id,
        quoteDetailId: this.quoteDetail.id,
        isAllRouting: this.isAllRouting,
      }
      this.queryLoading = true;
      queryQuoteDetailRouting(params).then(({data})=>{
        if (data && data.code === 0){
          this.dataList = data.rows;
        }else {
          this.$message.warning(data.msg);
        }
        this.queryLoading = false;
      }).catch((error)=>{
        this.$message.error(error);
        this.queryLoading = false;
      })
    },
    handleChangeVersion(){
      let node = this.$refs.tree.getCurrentNode();
      let row = {
        routingRevision:null,
        alternativeNo: '',
        routingType: null,
      }
      if (this.dataList.length > 0){
        row = this.dataList[0];
      }else {
        this.$message.warning("为维护BOM结构")
        return;
      }
      if (node){
        this.routing = {
          partNo: node.partNo,
          buNo: node.buNo,
          site: node.site,
          routingType: row.routingType,
          routingRevision: row.routingRevision,
          alternativeNo: row.alternativeNo,
        }
      }
      this.handleQueryVersionList();
      this.versionVisible = true;
    },
    versionRowStyle({row}){
      if (row.routingRevision === this.routing.routingRevision){
        return { 'background-color': '#E8F7F6' };
      }
    },
    handleQueryVersionList(){
      let node = this.$refs.tree.getCurrentNode();
      let params = {
        treeId: node.id,
        routingType: this.routing.routingType,
      }
      queryQuoteDetailRoutingVersion(params).then(({data})=>{
        if (data && data.code === 0){
          this.versionList = data.rows;
          if (this.versionList.length > 0){
            this.handleQueryAlternativeList();
          }
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    handleQueryAlternativeList(){
      let params = {
        ...this.routing,
      }
      queryQuoteDetailRoutingAlternative(params).then(({data})=>{
        if (data && data.code === 0){
          this.alternativeList = data.rows;
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    versionRowClick(row){
      this.routing.routingRevision = row.routingRevision;
    },
    alternativeRowStyle({row}){
      if (this.dataList.length > 0){
        if (this.dataList[0].alternativeNo === row.alternativeNo && this.dataList[0].routingRevision === row.routingRevision){
          return { 'background-color': '#E8F7F6' };
        }
      }
    },
    changeRouting(row){
      let params = {
        quoteId: this.quoteDetail.quoteId,
        quoteDetailId: this.quoteDetail.id,
        quoteDetailItemNo:this.quoteDetail.itemNo,
        site: row.site,
        partNo: row.partNo,
        buNo: row.buNo,
        quoteNo: this.quoteDetail.quoteNo,
        routingType: row.routingType,
        routingRevision: row.routingRevision,
        alternativeNo: row.alternativeNo,
        treeId: this.$refs.tree.getCurrentNode().id,
        createBy: this.$store.state.user.name,
      }
      changeQuoteDetailRoutingChange(params).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg);
          this.versionVisible = false;
          this.handleQueryDetailRouting();
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error)
      })

    }
  },
  created() {
    if (this.quoteDetail && this.quoteDetail.id){
      this.handleQueryQuoteDetailBomTree();
    }
  },
  watch:{
    'quoteDetail.id'(newVal,oldVal){
      this.handleQueryQuoteDetailBomTree();
    },
    isAllRouting(newVal,oldVal){
      this.handleQueryDetailRouting();
    },
    'routing.routingRevision'(newVal,oldVal){
      this.handleQueryAlternativeList();
    }
  }
}
</script>

<template>
  <div>
    <div style="margin-bottom: 10px">
      <el-link style="margin-right: 20px;cursor:pointer;" @click="handleChangeVersion">切换版本</el-link>
      <el-checkbox v-model="isAllRouting">全级Routing结构</el-checkbox>
    </div>
    <el-container>
      <el-aside width="300px" v-loading="queryTreeLoading">
        <el-tree
          :data="treeData"
          :props="props"
          :default-expand-all="true"
          :expand-on-click-node="false"
          node-key="id"
          highlight-current
          @node-click="nodeClick" ref="tree">

        </el-tree>
      </el-aside>
      <el-main style="padding: 0">
        <el-table :data="dataList" v-loading="queryLoading" border style="width: 100%" :height="420">
          <el-table-column
            v-for="(item,index) in columns" :key="index"
            :sortable="item.columnSortable"
            :prop="item.columnProp"
            :header-align="item.headerAlign"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :align="item.align"
            :fixed="item.fixed===''?false:item.fixed"
            :min-width="item.columnWidth"
            :label="item.columnLabel">
            <template slot-scope="scope">
              <span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
              <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <el-dialog title="切换版本" :visible.sync="versionVisible" width="1000px" v-drag :close-on-click-modal="false" append-to-body>
      <el-table :data="versionList" :row-style="versionRowStyle" ref="routingVersionTable" style="margin-top: 8px" border :height="240" @row-click="versionRowClick">
        <el-table-column label="物料编码" prop="partNo" header-align="center" align="center" show-overflow-tooltip min-width="140"/>
        <el-table-column label="物料描述" prop="partDesc" header-align="center" align="left" show-overflow-tooltip min-width="200"/>
        <el-table-column label="版本" prop="routingRevision" header-align="center" align="center" show-overflow-tooltip min-width="60"/>
        <el-table-column label="类型" prop="routingType" header-align="center" align="center" show-overflow-tooltip min-width="100"/>
      </el-table>

      <el-table :data="alternativeList" :row-style="alternativeRowStyle" ref="routingAlternativeTable" border :height="240" style="margin-top: 8px">
        <el-table-column label="物料编码" prop="partNo" header-align="center" align="center" show-overflow-tooltip min-width="140"/>
        <el-table-column label="物料描述" prop="partDesc" header-align="center" align="left" show-overflow-tooltip min-width="200"/>
        <el-table-column label="版本" prop="routingRevision" header-align="center" align="center" show-overflow-tooltip min-width="60"/>
        <el-table-column label="替代编码" prop="alternativeNo" header-align="center" align="left" show-overflow-tooltip min-width="60"/>
        <el-table-column label="类型" prop="routingRevision" header-align="center" align="center" show-overflow-tooltip min-width="100"/>
        <el-table-column label="操作" min-width="80" header-align="center" align="center">
          <template slot-scope="{row,$index}">
            <a @click="changeRouting(row)">选择</a>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>