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

<script>
import {
  queryQuoteDetailBomTree,
  queryQuoteDetailBomTreeLevel,
  queryQuoteDetailBomTreeAlternative
} from "@/api/quote/quoteDetailBomTree";
import {queryQuoteDetailBom} from "@/api/quote/quoteDetailBom";
import {changeQuoteDetailBomTree} from "../../../../../api/quote/quoteDetailBomTree";

export default {
  name: "quoteDetailBom",
  props: {
    quoteDetail: {
      type: Object,
      required: true
    },
  },
  model: {
    prop: "quoteDetail",
    event: "update"
  },
  data() {
    return {
      isAllBom: false,
      dataList: [],
      treeData: [],
      columns: [
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table4LineSequence',
          tableId: "5011Table4",
          tableName: "报价材料信息",
          columnProp: 'lineSequence',
          headerAlign: "center",
          align: "center",
          columnLabel: '序号',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 50,
        }, {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table4PartNo',
          tableId: "5011Table4",
          tableName: "报价材料信息",
          columnProp: 'partNo',
          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: '5011Table4ComponentPart',
          tableId: "5011Table4",
          tableName: "报价材料信息",
          columnProp: 'componentPart',
          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: '5011Table4PartDesc',
          tableId: "5011Table4",
          tableName: "报价材料信息",
          columnProp: 'partDesc',
          headerAlign: "center",
          align: "left",
          columnLabel: '物料名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 160,
        }, {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table4QtyPerAssembly',
          tableId: "5011Table4",
          tableName: "报价材料信息",
          columnProp: 'qtyPerAssembly',
          headerAlign: "center",
          align: "right",
          columnLabel: '单位用量',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
        }, {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table4ComponentScrap',
          tableId: "5011Table4",
          tableName: "报价材料信息",
          columnProp: 'componentScrap',
          headerAlign: "center",
          align: "right",
          columnLabel: '调机用量',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
        }, {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table4ShrinkageFactor',
          tableId: "5011Table4",
          tableName: "报价材料信息",
          columnProp: 'shrinkageFactor',
          headerAlign: "center",
          align: "right",
          columnLabel: '损耗率%',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
        }, {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table4PrintUnitName',
          tableId: "5011Table4",
          tableName: "报价材料信息",
          columnProp: 'printUnit',
          headerAlign: "center",
          align: "center",
          columnLabel: '单位',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
        }, {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table4NoteText',
          tableId: "5011Table4",
          tableName: "报价材料信息",
          columnProp: 'noteText',
          headerAlign: "center",
          align: "left",
          columnLabel: '备注',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table4UnitPrice',
          tableId: "5011Table4",
          tableName: "报价材料信息",
          columnProp: 'unitPrice',
          headerAlign: "center",
          align: "right",
          columnLabel: '单位标准成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table4ActualPrice',
          tableId: "5011Table4",
          tableName: "报价材料信息",
          columnProp: 'actualPrice',
          headerAlign: "center",
          align: "right",
          columnLabel: '单位报价成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 90,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table4QuoteUnitPrice',
          tableId: "5011Table4",
          tableName: "报价材料信息",
          columnProp: 'quoteUnitPrice',
          headerAlign: "center",
          align: "right",
          columnLabel: '材料标准总成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: 'right',
          columnWidth: 100,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 5011,
          serialNumber: '5011Table4ActualQuotePrice',
          tableId: "5011Table4",
          tableName: "报价材料信息",
          columnProp: 'actualQuotePrice',
          headerAlign: "center",
          align: "right",
          columnLabel: '材料报价总成本',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: 'right',
          columnWidth: 100,
        },
      ],
      props: {
        children: 'list',
        label: (data, node) => {
          return `${data.partNo}-${data.engChgLevel}-${data.alternativeNo}-${data.bomType}`;
        },
      },
      queryLoading: false,
      queryTreeLoading: false,
      versionVisible: false,
      versionList: [],
      alternativeList: [],
      bomEngChgLevel: {
        partNo: '',
        bomType: '',
        buNo: '',
        site: '',
        engChgLevel: null,
      }
    }
  },
  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.handleQueryQuoteDetailBom();
            })
          }
          this.queryTreeLoading = false;
        } else {
          this.$message.warning(data.msg);
          this.queryTreeLoading = false;
        }
      }).catch((error) => {
        this.$message.error(error);
      })
    },
    nodeClick(data) {
      this.handleQueryQuoteDetailBom();
    },
    handleQueryQuoteDetailBom() {
      let params = {
        quoteDetailId: this.quoteDetail.id,
        treeId: this.$refs.tree.getCurrentKey(),
        allTree: this.isAllBom,
      }
      this.queryLoading = true;
      queryQuoteDetailBom(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;
      })
    },
    handleCheckedVersion() {
      this.handleQueryQuoteDetailBomTreeVersion();
      let node = this.$refs.tree.getCurrentNode();
      if (node) {
        this.bomEngChgLevel = {
          partNo: node.partNo,
          bomType: node.bomType,
          buNo: node.buNo,
          site: node.site,
          engChgLevel: node.engChgLevel,
          alternativeNo: node.alternativeNo,
        }
      }
      this.versionVisible = true
    },
    handleQueryQuoteDetailBomTreeVersion() {
      let node = this.$refs.tree.getCurrentNode();
      let params = {
        site: this.quoteDetail.site,
        partNo: this.quoteDetail.partNo,
        buNo: this.quoteDetail.buNo,
      }
      if (node) {
        params = {
          site: node.site,
          partNo: node.partNo,
          bomType: node.bomType,
          buNo: node.buNo,
        }
      }
      queryQuoteDetailBomTreeLevel(params).then(({data}) => {
        if (data && data.code === 0) {
          this.versionList = data.rows;
        } else {
          this.$message.warning(data.msg);
        }
      }).catch((error) => {
        this.$message.error(error);
      })
    },
    levelRowStyle({row}) {
      if (row.engChgLevel === this.bomEngChgLevel.engChgLevel) {
        return {'background-color': '#E8F7F6'};
      }
    },
    alternativeRowStyle({row}) {
      let node = this.$refs.tree.getCurrentNode();
      if (row.engChgLevel === this.bomEngChgLevel.engChgLevel && row.alternativeNo === this.bomEngChgLevel.alternativeNo) {
        return {'background-color': '#E8F7F6'};
      }
    },
    levelRowClick(row) {
      this.bomEngChgLevel.partNo = row.partNo;
      this.bomEngChgLevel.buNo = row.buNo;
      this.bomEngChgLevel.site = row.site;
      this.bomEngChgLevel.engChgLevel = row.engChgLevel;
      this.bomEngChgLevel.bomType = row.bomType;
      let params = {
        ...this.bomEngChgLevel
      }
      queryQuoteDetailBomTreeAlternative(params).then(({data}) => {
        if (data && data.code === 0) {
          this.alternativeList = data.rows;
        } else {
          this.$message.warning(data.msg);
        }
      }).catch((error) => {
        this.$message.error(error);
      })
    },
    handleChangeVersion(row) {
      let node = this.$refs.tree.getCurrentNode();
      let params = {
        partNo: row.partNo,
        bomType: row.bomType,
        buNo: row.buNo,
        site: row.site,
        engChgLevel: row.engChgLevel,
        alternativeNo: row.alternativeNo,
        createBy: this.$store.state.user.name,
        quoteId: this.quoteDetail.quoteId,
        quoteDetailId: this.quoteDetail.id,
        quoteNo: this.quoteDetail.quoteNo,
        quoteDetailItemNo: this.quoteDetail.itemNo,
        versionNo:this.quoteDetail.versionNo,

      }
      if (node) {
        params.id = node.id
        params.partNo = node.partNo
        params.bomType = node.bomType
        params.buNo = node.buNo
        params.site = node.site
      }
      changeQuoteDetailBomTree(params).then(({data}) => {
        if (data && data.code === 0) {
          this.$message.success(data.msg);
          this.versionVisible = false;
          this.handleQueryQuoteDetailBomTree();
        } else {
          this.$message.warning(data.msg);
        }
      }).catch((error) => {
        this.$message.error(error);
      })
    },
    handleJumpToBom(row){
      if (this.$router.resolve('part-bomManagement').resolved.name === '404') {
        this.$alert('权限不足,访问失败', '警告', {confirmButtonText: '确定',});
      } else {
        this.$emit('close')
        let params = {
          name: "part-bomManagement",
          params: {
            type:'quote',
            partNo:row.partNo,
            bomType:row.bomType,
            engChgLevel:row.engChgLevel,
            alternativeNo:row.alternativeNo,
          }
        }
        this.$router.push(params)
      }
    }
  },
  created() {
    if (this.quoteDetail && this.quoteDetail.id) {
      this.handleQueryQuoteDetailBomTree();
    }
  },
  watch: {
    'quoteDetail.id'(newVal, oldVal) {
      this.handleQueryQuoteDetailBomTree();
    },
    isAllBom(newVal, oldVal) {
      this.handleQueryQuoteDetailBom();
    },
    'bomEngChgLevel.engChgLevel'(newVal, oldVal) {
      if (newVal) {
        let node = this.$refs.tree.getCurrentNode();
        let row = {
          partNo: this.quoteDetail.partNo,
          buNo: this.quoteDetail.buNo,
          site: this.quoteDetail.site,
          engChgLevel: newVal,
        }
        if (node) {
          row.partNo = node.partNo;
          row.bomType = node.bomType;
          row.buNo = node.buNo;
          row.site = node.site;
        }
        this.levelRowClick(row)
      }
    }
  }
}
</script>

<template>
  <div>
    <div style="margin-bottom: 10px">
      <el-link style="margin-right: 20px;cursor: pointer" @click="handleCheckedVersion" v-if="quoteDetail.status === '草稿'">切换版本</el-link>
      <el-checkbox v-model="isAllBom">全级BOM结构</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">
              <template v-if="item.columnProp === 'partNo'">
                <el-link @click="handleJumpToBom(scope.row)">{{ scope.row[item.columnProp] }}</el-link>
              </template>
              <template v-else>
                <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>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <el-dialog title="BOM版本切换" :visible.sync="versionVisible" append-to-body :close-on-click-modal="false" v-drag
               width="900px">
      <el-table :data="versionList" :row-style="levelRowStyle" @row-click="levelRowClick" ref="versionTable"
                style="width: 100%" border :height="240">
        <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="engChgLevel" header-align="center" align="center" show-overflow-tooltip
                         min-width="60"/>
        <el-table-column label="类型" prop="bomType" header-align="center" align="center" show-overflow-tooltip
                         min-width="100"/>
      </el-table>
      <el-table :data="alternativeList" :row-style="alternativeRowStyle" ref="versionTable"
                style="width: 100%;margin-top: 20px" border :height="240">
        <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="engChgLevel" 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="bomType" header-align="center" align="center" show-overflow-tooltip
                         min-width="100"/>
        <el-table-column label="操作" header-align="center" align="center" min-width="100">
          <template slot-scope="scope">
            <a @click="handleChangeVersion(scope.row)">选择</a>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>