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="operationColumns"
        :dataSource="operation2"
        :pagination="false"
      >
        <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>

      <j-popup
        v-show="showRentPrise"
        ref="inventory_details"
        code="find_inventory"
        :param="inventoryParam"
        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} from "../../api/api";

  const DetailListItem = DetailList.Item

  export default {
    name: "materiaTrack",
    components: {
      PageLayout,
      DetailList,
      DetailListItem
    },
    mixins: [mixinDevice],
    data () {
      return {
        queryParam: {},
        basicSource:[],
        inventoryParam:{code:''},
        index:1,
        status:[
          {name:"采购"},
          {name:"到货"},
          {name:"收货"}
        ],
        tabList: [
          {
            key: '1',
            tab: '项目信息'
          },
          {
            key: '2',
            tab: '生产计划'
          },
          {
            key: '3',
            tab: '采购计划'
          }
        ],
        activeTabKey: '1',
        info:'huaheng',
        operationColumns: [
          {
            title: '操作类型',
            dataIndex: 'type',
            key: 'type'
          },
          {
            title: '操作人',
            dataIndex: 'name',
            key: 'name'
          },
          {
            title: '执行结果',
            dataIndex: 'status',
            key: 'status',
            scopedSlots: { customRender: 'status' },
          },
          {
            title: '操作时间',
            dataIndex: 'updatedAt',
            key: 'updatedAt'
          },
          {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark'
          }
        ],
        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: '-'
          }
        ],
      }
    },
    methods: {
      searchAll(){
        let params = {
          'code': this.queryParam.code
        }
        this.basicSource=[];
        getMaterialBasicInfo(params).then(res => {
          if (res.success) {
            this.basicSource = res.result
            this.loading = false
          }
        })
      },

      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>