ccl_plm-vue/src/views/modules/part/componentWhereUsed.vue

<template>
  <div class="mod-config">
    <el-form
      :inline="true"
      label-position="top"
      :model="searchData"
      @keyup.enter.native="getDataList()">
      <el-form-item label="子件编码">
        <el-input v-model="searchData.componentPart" clearable style="width: 160px" />
      </el-form-item>
      <el-form-item label="子件描述">
        <el-input v-model="searchData.componentPartDesc" clearable style="width: 160px" />
      </el-form-item>
      <el-form-item label="子件零件类型">
        <el-select v-model="searchData.componentPartType" clearable style="width: 150px">
          <el-option label="Manufactured" value="Manufactured"></el-option>
          <el-option label="Manufactured Recipe" value="Manufactured Recipe"></el-option>
          <el-option label="Purchased (raw)" value="Purchased (raw)"></el-option>
          <el-option label="Purchased" value="Purchased"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <span style="cursor: pointer" slot="label" @click="getBaseList(125)"><a herf="#">子件零件状态</a></span>
        <el-input v-model="searchData.componentPartStatus" @change="partStatusBlur(125)" clearable style="width: 128px"></el-input>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" :loading="queryLoading" @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :height="height"
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        v-for="(item, index) in columnList"
        :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 && ['qtyPerAssembly', 'componentScrap', 'shrinkageFactor'].includes(item.columnProp)">{{ formatNumber(scope.row[item.columnProp]) }}</span>
          <span v-else-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
        </template>
      </el-table-column>
    </el-table>

    <Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist>

    <el-pagination
      style="margin-top: 0px"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 200, 500]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper" />
  </div>
</template>

<script>
import { completeWhereUsedSearch } from '@/api/part/completeWhereUsed.js'
import Chooselist from '@/views/modules/common/Chooselist'
import { verifyData } from '@/api/chooselist/chooselist.js'

export default {
  name: 'CompleteWhereUsed',
  components: {
    Chooselist
  },
  data () {
    return {
      height: 200,
      pageIndex: 1,
      pageSize: 50,
      totalPage: 0,
      queryLoading: false,
      dataListLoading: false,
      dataList: [],
      searchData: {
        site: this.$store.state.user.site,
        componentPart: '',
        componentPartDesc: '',
        componentPartType: '',
        componentPartStatus: '',
        page: 1,
        limit: 50
      },
      columnList: [
        { columnProp: 'site', columnLabel: '工厂', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 80 },
        { columnProp: 'parentPartNo', columnLabel: '父件编码', headerAlign: 'center', align: 'left', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 130 },
        { columnProp: 'parentPartDesc', columnLabel: '父件描述', headerAlign: 'center', align: 'left', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 180 },
        { columnProp: 'parentPartType', columnLabel: '父件零件类型', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 120 },
        { columnProp: 'parentPartStatus', columnLabel: '父件零件状态', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 100 },
        { columnProp: 'parentPartStatusDesc', columnLabel: '父件零件状态描述', headerAlign: 'center', align: 'left', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 120 },
        { columnProp: 'engChgLevel', columnLabel: 'BOM版本', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 90 },
        { columnProp: 'alternativeNo', columnLabel: '替代编码', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 110 },
        { columnProp: 'bomDetailStatus', columnLabel: '替代状态', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 100 },
        { columnProp: 'lineItemNo', columnLabel: '行号', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 80 },
        { columnProp: 'lineSequence', columnLabel: '行序', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 80 },
        { columnProp: 'componentPart', columnLabel: '子件编码', headerAlign: 'center', align: 'left', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 130 },
        { columnProp: 'componentPartDesc', columnLabel: '子件描述', headerAlign: 'center', align: 'left', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 180 },
        { columnProp: 'componentPartType', columnLabel: '子件零件类型', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 120 },
        { columnProp: 'issueType', columnLabel: '生产属性', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 150 },
        { columnProp: 'componentPartStatus', columnLabel: '子件零件状态', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 100 },
        { columnProp: 'componentPartStatusDesc', columnLabel: '子件零件状态描述', headerAlign: 'center', align: 'left', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 120 },
        { columnProp: 'bomType', columnLabel: '制造类型', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 120 },
        { columnProp: 'effPhaseInDate', columnLabel: '生效日期', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 160 },
        { columnProp: 'effPhaseOutDate', columnLabel: '失效日期', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 160 },
        { columnProp: 'qtyPerAssembly', columnLabel: '单位用量', headerAlign: 'center', align: 'right', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 100 },
        { columnProp: 'componentScrap', columnLabel: '调机量', headerAlign: 'center', align: 'right', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 90 },
        { columnProp: 'shrinkageFactor', columnLabel: '损耗率', headerAlign: 'center', align: 'right', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 90 },
        { columnProp: 'operationNo', columnLabel: '工序号', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 90 },
        { columnProp: 'issueToLoc', columnLabel: '发料库位', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 110 },
        { columnProp: 'noteText', columnLabel: '备注', headerAlign: 'center', align: 'left', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 160 },
        { columnProp: 'consumptionItem', columnLabel: '消耗项目', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 110 },
        { columnProp: 'printUnit', columnLabel: '单位', headerAlign: 'center', align: 'center', columnSortable: false, columnHidden: false, showOverflowTooltip: true, fixed: '', columnWidth: 80 }
      ]
    }
  },
  watch: {
    searchData: {
      deep: true,
      handler: function () {
        if (typeof this.searchData.componentPart === 'string') {
          this.searchData.componentPart = this.searchData.componentPart.toUpperCase()
        }
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.height = window.innerHeight - 170
    })
  },
  methods: {
    formatNumber (value) {
      if (value === null || value === undefined || value === '') return value
      let numStr = String(value)
      if (numStr.includes('e') || numStr.includes('E')) {
        return Number(value).toLocaleString('fullwide', { useGrouping: false, maximumFractionDigits: 10 })
      }
      return value
    },
    getBaseList (val) {
      this.$nextTick(() => {
        let strVal = ''
        if (val === 125) {
          strVal = this.searchData.componentPartStatus
        }
        this.$refs.baseList.init(val, strVal)
      })
    },
    getBaseData (val) {
      if (val && val.part_status) {
        this.searchData.componentPartStatus = val.part_status
      }
    },
    partStatusBlur (tagNo) {
      let tempData = {
        tagno: tagNo,
        conditionSql: " and part_status = '" + this.searchData.componentPartStatus + "'" + " and site = '" + this.searchData.site + "'"
      }
      verifyData(tempData).then(({data}) => {
        if (data && data.code === 0) {
          if (data.baseListData.length > 0) {
            this.searchData.componentPartStatus = data.baseListData[0].part_status
          } else {
            this.searchData.componentPartStatus = ''
          }
        }
      })
    },
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    getDataList () {
      if (!this.searchData.componentPart && !this.searchData.componentPartDesc && !this.searchData.componentPartType && !this.searchData.componentPartStatus) {
        this.$message.warning('请至少填写一项查询条件')
        return
      }
      this.searchData.limit = this.pageSize
      this.searchData.page = this.pageIndex
      this.queryLoading = true
      this.dataListLoading = true
      completeWhereUsedSearch(this.searchData)
        .then(({ data }) => {
          if (data.code === 0) {
            this.dataList = data.page.list
            this.pageIndex = data.page.currPage
            this.pageSize = data.page.pageSize
            this.totalPage = data.page.totalCount
          } else {
            this.$message.error(data.msg || '查询失败')
          }
        })
        .catch(() => {
          this.$message.error('请求失败')
        })
        .finally(() => {
          this.queryLoading = false
          this.dataListLoading = false
        })
    }
  }
}
</script>