wms / wms4_wuhanfeipu · Files

<template>
 
  <page-layout title="产品追溯" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
    <page-header v-if="!$route.meta.pageHeader">
       
      <slot slot="extra" name="extra"></slot>
      <div slot="pageMenu">
        <div class="page-menu-search"  >
          <a-input-search style="width: 80%; max-width: 522px;"  v-model="queryParam.code" @search="searchAll"  placeholder="计划号查询..." size="large" enterButton="搜索" />
        </div>

      </div>
    </page-header>
    

<!--    <a-card :bordered="false" title="流程进度">-->
<!--      <a-steps :direction="isMobile() && 'vertical' || 'horizontal'" :current="1" progressDot>-->
<!--        <a-step title="创建项目">-->
<!--        </a-step>-->
<!--        <a-step title="部门初审">-->
<!--        </a-step>-->
<!--        <a-step title="财务复核">-->
<!--        </a-step>-->
<!--        <a-step title="完成">-->
<!--        </a-step>-->
<!--      </a-steps>-->
<!--    </a-card>-->

    <a-card style="margin-top: 24px" :bordered="false" title="订单信息">
      <detail-list>
        <detail-list-item term="客户名称">{{basicSource.customerName}}</detail-list-item>
        <detail-list-item term="产品名称">{{basicSource.orderName}}</detail-list-item>
        <detail-list-item term="项目号">{{basicSource.techAsk}}</detail-list-item>
        <detail-list-item term="计划号">{{basicSource.planNumber}}</detail-list-item>
        <detail-list-item term="下单日期">{{basicSource.day}}</detail-list-item>
        <detail-list-item term="客户要求">{{basicSource.customerAsked}}</detail-list-item>
        <detail-list-item term="订单数量">{{basicSource.qty}}</detail-list-item>
        <detail-list-item term="订单单位">{{basicSource.unit}}</detail-list-item>
        <detail-list-item term="交货期">{{basicSource.deliveryAsk}}</detail-list-item>
        <detail-list-item term="备注">{{basicSource.remark}}</detail-list-item>
      </detail-list>
      
<!--      <a-card type="inner" title="多层信息组">-->
<!--        <detail-list title="组名称" size="small">-->
<!--          <detail-list-item term="负责人">林东东</detail-list-item>-->
<!--          <detail-list-item term="角色码">1234567</detail-list-item>-->
<!--          <detail-list-item term="所属部门">XX公司-YY部</detail-list-item>-->
<!--          <detail-list-item term="过期时间">2018-08-08</detail-list-item>-->
<!--          <detail-list-item term="描述">这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...</detail-list-item>-->
<!--        </detail-list>-->
<!--        <a-divider style="margin: 16px 0"/>-->
<!--        <detail-list title="组名称" size="small" :col="1">-->
<!--          <detail-list-item term="学名"> Citrullus lanatus (Thunb.) Matsum. et Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..-->
<!--          </detail-list-item>-->
<!--        </detail-list>-->
<!--        <a-divider style="margin: 16px 0"/>-->
<!--        <detail-list title="组名称" size="small" :col="2">-->
<!--          <detail-list-item term="负责人">付小小</detail-list-item>-->
<!--          <detail-list-item term="角色码">1234567</detail-list-item>-->
<!--        </detail-list>-->
<!--      </a-card>-->

    </a-card>

<!--    <a-card style="margin-top: 24px" :bordered="false" title="用户近半年来电记录">-->
<!--      <div class="no-data">-->
<!--        <a-icon type="frown-o"/>-->
<!--        暂无数据-->
<!--      </div>-->
<!--    </a-card>-->

    <!-- 操作 -->
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      :tabList="tabList"
      :activeTabKey="activeTabKey"
      @tabChange="(key) => {this.activeTabKey = key}"
    >
      <a-table
        v-if="activeTabKey === '1'"
        :columns="operationColumns"
        :dataSource="partSource"
        :pagination="true"
      >
        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
      </a-table>
      <a-table
        v-if="activeTabKey === '2'"
        :columns="materialColumns"
        :dataSource="materialSource"
        :pagination="true"
      >
        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
      </a-table>
      <a-table
        v-if="activeTabKey === '3'"
        :columns="operationColumns"
        :dataSource="operation3"
        :pagination="false"
      >
        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
      </a-table>
    </a-card>

  </page-layout>
</template>

<script>
import {mixinDevice} from '@/utils/mixin.js'
import PageLayout from '@/components/page/PageLayout'
import DetailList from '@/components/tools/DetailList' 
import {getOrderBasicInfo,getPartInfo,getProductionMaterialRequisition} from '@/api/api'
const DetailListItem = DetailList.Item

export default {
  name: "Advanced",
  components: {
    PageLayout,
    DetailList,
    DetailListItem
  },
  mixins: [mixinDevice],
  data() {
    return {
      queryParam: {},
      basicSource:[],
      partSource:[],
      materialSource:[],
      mainId:'',
      tabList: [
        {
          key: '1',
          tab: '部件情况'
        },
        {
          key: '2',
          tab: '生产领料'
        },
        {
          key: '3',
          tab: '生产质检'
        }, 
      ],
      activeTabKey: '1',

      operationColumns: [
        {
          title: '图号',
          dataIndex: 'parentdrawingno',
          key: 'parentdrawingno'
        },
        {
          title: '部件名称',
          dataIndex: 'partName',
          key: 'partName'
        },
        {
          title: '生产情况',
          dataIndex: 'userDef3',
          key: 'userDef3' 
        }
      ],
       materialColumns: [
         {
           title: '领料单号',
           dataIndex: 'userdef2',
           key: 'userdef2'
         },
         {
           title: '发料人',
           dataIndex: 'createBy',
           key: 'createBy'
         },
         {
           title: '班组',
           dataIndex: 'userdef3',
           key: 'userdef3'
         },
         {
           title: '计划号',
           dataIndex: 'referCode',
           key: 'referCode'
         },
        {
          title: '物料名称',
          dataIndex: 'materialName',
          key: 'materialName'
        },
        {
          title: '物料编码',
          dataIndex: 'materialCode',
          key: 'materialCode'
        },
        {
          title: '物料规格',
          dataIndex: 'materialSpec',
          key: 'materialSpec'
        },
         {
           title: '领料数量',
           dataIndex: 'qty',
           key: 'qty'
         }, {
           title: '单位',
           dataIndex: 'materialUnit',
           key: 'materialUnit'
         }
      ],
      operation1: [
        {
          key: 'op1',
          type: '订购关系生效',
          name: '曲丽丽',
          status: 'agree',
          updatedAt: '2017-10-03  19:23:12',
          remark: '-'
        },
        {
          key: 'op2',
          type: '财务复审',
          name: '付小小',
          status: 'reject',
          updatedAt: '2017-10-03  19:23:12',
          remark: '不通过原因'
        },
        {
          key: 'op3',
          type: '部门初审',
          name: '周毛毛',
          status: 'agree',
          updatedAt: '2017-10-03  19:23:12',
          remark: '-'
        },
        {
          key: 'op4',
          type: '提交订单',
          name: '林东东',
          status: 'agree',
          updatedAt: '2017-10-03  19:23:12',
          remark: '很棒'
        },
        {
          key: 'op5',
          type: '创建订单',
          name: '汗牙牙',
          status: 'agree',
          updatedAt: '2017-10-03  19:23:12',
          remark: '-'
        }
      ],
      operation2: [
        {
          key: 'op2',
          type: '财务复审',
          name: '付小小',
          status: 'reject',
          updatedAt: '2017-10-03  19:23:12',
          remark: '不通过原因'
        },
        {
          key: 'op3',
          type: '部门初审',
          name: '周毛毛',
          status: 'agree',
          updatedAt: '2017-10-03  19:23:12',
          remark: '-'
        },
        {
          key: 'op4',
          type: '提交订单',
          name: '林东东',
          status: 'agree',
          updatedAt: '2017-10-03  19:23:12',
          remark: '很棒'
        }
      ],
      operation3: [
        {
          key: 'op2',
          type: '财务复审',
          name: '付小小',
          status: 'reject',
          updatedAt: '2017-10-03  19:23:12',
          remark: '不通过原因'
        },
        {
          key: 'op3',
          type: '部门初审',
          name: '周毛毛',
          status: 'agree',
          updatedAt: '2017-10-03  19:23:12',
          remark: '-'
        }
      ],
    }
  }, 
  filters: {
    statusFilter(status) {
      const statusMap = {
        'agree': '成功',
        'reject': '驳回'
      }
      return statusMap[status]
    },
    statusTypeFilter(type) {
      const statusTypeMap = {
        'agree': 'success',
        'reject': 'error'
      }
      return statusTypeMap[type]
    }
  },
  methods: {
      searchAll(){
        if (this.queryParam.code==undefined){
          this.$message.error("请输入料号或图号");
          return false;
        }
  
        let params = {
          'code': this.queryParam.code
        } 
        this.basicSource=[];
        getOrderBasicInfo(params).then(res => {
          if (res.success) {
            this.loading = false
            if (res.result==undefined){
              this.$message.warn("查询无结果!!!");
              return false;
            }
            this.basicSource = res.result 
          }else{
            this.$message.error("查询异常!!!");
          }
        })
        getPartInfo(params).then(res => {
          this.partSource = res.result
        })
        getProductionMaterialRequisition(params).then(res => {
          this.materialSource = res.result
        })
      }
    },
}
</script>

<style lang="less" scoped>

.detail-layout {
  margin-left: 44px;
}

.text {
  color: rgba(0, 0, 0, .45);
}

.heading {
  color: rgba(0, 0, 0, .85);
  font-size: 20px;
}

.no-data {
  color: rgba(0, 0, 0, .25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}

.mobile {
  .detail-layout {
    margin-left: unset;
  }

  .text {

  }

  .status-list {
    text-align: left;
  }
}
</style>