mts / MTS-UI · Files

<template>
  <page-layout :title="info" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">

    <page-header v-if="!$route.meta.pageHeader" :title="title" :logo="logo" :avatar="avatar">
      <slot slot="action" name="action"></slot>
      <slot slot="content" name="headerContent"></slot>
      <div slot="content" v-if="!this.$slots.headerContent && desc">
        <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ desc }}</p>
        <div class="link">
          <template v-for="(link, index) in linkList">
            <a :key="index" :href="link.href">
              <a-icon :type="link.icon"/>
              <span>{{ link.title }}</span>
            </a>
          </template>
        </div>
      </div>
      <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="basicSource.flowindex" progressDot>
        <a-step v-for="sa in basicSource.flow" :title="sa">
        </a-step>
      </a-steps>
    </a-card>

    <a-card style="margin-top: 24px;" :bordered="false" title="基本信息">
      <detail-list>
        <detail-list-item term="物料名称">{{basicSource.name}}</detail-list-item>
        <detail-list-item term="物料编码">{{basicSource.code}}</detail-list-item>
        <detail-list-item term="关联编码">{{basicSource.linkCode}}</detail-list-item>
        <detail-list-item term="物料规格">{{basicSource.spec}}</detail-list-item>
        <detail-list-item term="制造方式">{{basicSource.attr}}</detail-list-item>
        <detail-list-item term="设计类型">{{basicSource.type}}</detail-list-item>
        <detail-list-item term="设计重量">{{basicSource.dsnweight}}</detail-list-item>
        <detail-list-item term="形状尺寸">{{basicSource.shape}}</detail-list-item>
        <detail-list-item term="工艺信息">{{basicSource.process}}</detail-list-item>
      </detail-list>
      <detail-list title="库存信息" style="color: #9e9e9e">
        <detail-list-item term="WMS库存"><a @click="inventoryClick">{{basicSource.qty}}</a></detail-list-item>
        <detail-list-item term="该数据更新时间">{{basicSource.qtyTime}}</detail-list-item>
      </detail-list>
    </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="operation1"
        :pagination="false"
      >
        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
      </a-table>
      <a-table
        v-if="activeTabKey === '2'"
        :columns="operationColumns2"
        :dataSource="operation2"
        :pagination="false"
      >
        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
        <span slot="departWorking" slot-scope="text, record">
            <a @click="departWorking(record)">{{record.projectName}}</a>
        </span>

        <span slot="openPlan" slot-scope="text, record">
            <a @click="openPlan(record)">{{ record.status }}</a>
      </span>

      </a-table>
      <a-table
        v-if="activeTabKey === '3'"
        :columns="operationColumns3"
        :dataSource="operation3"
        :pagination="false"
      >
        <template
          slot="status"
          slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
      </a-table>

      <j-popup
        v-show="showRentPrise"
        ref="inventory_details"
        code="find_inventory"
        :param="inventoryParam"
        org-fields="username"
        dest-fields="popup"
        field="popup"/>

      <j-popup
        v-show="showRentPrise"
        ref="depart_details"
        code="departWorking"
        :param="materialParam"
        org-fields="username"
        dest-fields="popup"
        field="popup"/>

      <j-popup
        v-show="showRentPrise"
        ref="getPlanProcess"
        code="getProcessPlan"
        :param="processParam"
        org-fields="username"
        dest-fields="popup"
        field="popup"/>

    </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 {getMaterialBasicInfo,getProjectByCode,getProcessPlan,getPurcahseByCode} from "../../api/api";

  const DetailListItem = DetailList.Item

  export default {
    name: "materiaTrack",
    components: {
      PageLayout,
      DetailList,
      DetailListItem
    },
    mixins: [mixinDevice],
    data () {
      return {
        queryParam: {},
        basicSource:[],
        inventoryParam:{code:''},
        materialParam:{code:''},
        processParam:{no:'',headerId:''},
        index:1,
        status:[
          {name:"采购"},
          {name:"到货"},
          {name:"收货"}
        ],
        tabList: [
          {
            key: '1',
            tab: '项目信息'
          },
          {
            key: '2',
            tab: '生产计划'
          },
          {
            key: '3',
            tab: '采购计划'
          }
        ],
        activeTabKey: '1',
        info:'huaheng',
        operationColumns: [
          {
            title: '项目名称',
            dataIndex: 'field0047',
            key: 'field0047'
          },
          {
            title: '工作令',
            dataIndex: 'field0056',
            key: 'field0056'
          },
          {
            title: '系统成套编码',
            dataIndex: 'field0057',
            key: 'field0057'
          },
          {
            title: '机械成套编码',
            dataIndex: 'field0054',
            key: 'field0054'
          }, {
            title: '电气成套编码',
            dataIndex: 'field0055',
            key: 'field0055'
          },{
            title: '软件成套编码',
            dataIndex: 'field0192',
            key: 'field0192'
          },{
            title: '物料名称',
            dataIndex: 'name',
            key: 'name'
          },{
            title: '单位',
            dataIndex: 'f02',
            key: 'f02'
          },
          {
            title: '需求总数',
            dataIndex: 'bnum',
            key: 'bnum'
          }
        ],
        operationColumns2: [
          {
            title: '项目名称',
            dataIndex: 'projectName',
            key: 'projectName',
            scopedSlots:{
              customRender:'departWorking'
            }
          },
          {
            title: '工作令',
            dataIndex: 'orderNo',
            key: 'orderNo'
          },
          {
            title: '部件号',
            dataIndex: 'partNo',
            key: 'partNo'
          },
          {
            title: '项目进度',
            dataIndex: 'progress',
            key: 'progress'
          }, {
            title: '计划完成时间',
            dataIndex: 'completionTime',
            key: 'completionTime'
          },{
            title: '实际完成时间',
            dataIndex: 'actualCompletionTime',
            key: 'actualCompletionTime'
          },{
            title: '项目状态',
            dataIndex: 'headStatus',
            key: 'headStatus'
          },
          {
            title: '名称',
            dataIndex: 'name',
            key: 'name'
          },{
            title: '图号',
            dataIndex: 'drawingNo',
            key: 'drawingNo'
          },{
            title: '数量',
            dataIndex: 'qty',
            key: 'qty'
          },
          {
            title: '完成时间',
            dataIndex: 'completeDate',
            key: 'completeDate'
          },{
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            scopedSlots:{
              customRender:'openPlan'
            }
          }
        ],
        operationColumns3: [
          {
            title: '项目名称',
            dataIndex: 'projectName',
            key: 'projectName'
          },
          {
            title: '工作令',
            dataIndex: 'workNo',
            key: 'workNo'
          },
          {
            title: '采购单号',
            dataIndex: 'code',
            key: 'code'
          }, {
            title: '编码',
            dataIndex: 'materialCode',
            key: 'materialCode'
          }, {
            title: '名称',
            dataIndex: 'materialName',
            key: 'materialName'
          }, {
            title: '单位',
            dataIndex: 'unit',
            key: 'unit'
          }
          , {
            title: '规格',
            dataIndex: 'spec',
            key: 'spec'
          }, {
            title: '数量',
            dataIndex: 'qty',
            key: 'qty'
          },{
            title: '收货',
            dataIndex: 'inQty',
            key: 'inQty'
          }
          ,{
            title: '收货时间',
            dataIndex: 'receiptTime',
            key: 'receiptTime',
            align: 'center',
            scopedSlots: {
              customRender: 'tradeTime'
            }
          },
          {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align: 'center',
            scopedSlots: { customRender: 'status' }
          },
          {
            title: '供应商',
            dataIndex: 'supplier',
            key: 'supplier'
          },
          {
            title: '预计',
            dataIndex: 'planEndTime',
            key: 'planEndTime',
            align: 'center',
            scopedSlots: {
              customRender: 'tradeTime'
            }
          },{
            title: '领料',
            dataIndex: 'outQty',
            key: 'outQty',
          },
         {
            title: '领料时间',
            dataIndex: 'pickingTime',
            key: 'pickingTime',
            align: 'center',
            scopedSlots: {
              customRender: 'tradeTime'
            }
          },
          {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark'
          }
        ],
        operation1: [],
        operation2: [],
        operation3: [],
      }
    },
    methods: {
      searchAll(){
        if (this.queryParam.code==undefined){
          this.$message.error("请输入料号或图号");
          return false;
        }

        let params = {
          'code': this.queryParam.code
        }
        this.basicSource=[];
        getMaterialBasicInfo(params).then(res => {
          if (res.success) {
            this.loading = false
            if (res.result==undefined){
              this.$message.warn("查询无结果!!!");
              return false;
            }
            this.basicSource = res.result
            this.info=res.result.name
          }else{
            this.$message.error("查询异常!!!");
          }
        })
        this.operation1=[];
        getProjectByCode(params).then(res => {
          if (res.success) {
            this.operation1 = res.result
            this.loading = false
          }
        })
        this.operation2=[];
        getProcessPlan(params).then(res => {
          if (res.success) {
            this.operation2 = res.result
            this.loading = false
          }
        })
        this.operation3=[];
        getPurcahseByCode(params).then(res => {
          if (res.success) {
            this.operation3 = res.result
            this.loading = false
          }
        })
      },

      openPlan(data){
        this.processParam['no'] = "'"+data.no+"'";
        this.processParam['headerId'] ="''"+data.headerId+"''";
        this.$refs.getPlanProcess.openModal();
      },

      departWorking(data){
        this.materialParam['code'] = "'"+data.headerId+"'";
        this.$refs.depart_details.openModal();
      },

      inventoryClick(){
        this.inventoryParam['code'] = "'"+this.queryParam.code+"'";
        this.$refs.inventory_details.openModal();
      },
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          'agree': '成功',
          'reject': '驳回'
        }
        return statusMap[status]
      },
      statusTypeFilter(type) {
        const statusTypeMap = {
          'agree': 'success',
          'reject': 'error'
        }
        return statusTypeMap[type]
      }
    }
  }
</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>