jf-frock/src/views/PurchasingManage/approvalDetail.vue

<template>
  <div>
    <Toptitle :title="type==1?'请购审批详情':type==2?'采购审批详情':type==3?'到货审批详情':'质检审批详情'">
      <slot name="titleButton">
        <Button @click="approval(1)"
                type="success"
                style="margin-right:10px;">通过</Button>
        <Button @click="approval(2)"
                type="error"
                style="margin-right:10px;">驳回</Button>
        <Button @click="goback()"
                type="primary"
                style="margin-right:10px;">返回</Button>
      </slot>
    </Toptitle>
    <div class="body">
      <div class="header">
        <Steps :current="1">
          <Step title="开始审批"></Step>
          <Step title="1级审批"></Step>
          <Step title="2级审批"></Step>
          <Step title="审批完成"></Step>
        </Steps>
      </div>
      <div class="info_wrapper">
        <div class="info">
          <div class="info_item"><span>制单人: </span><span>{{orderInfo.nickname}}</span></div>
          <div class="info_item"><span>请购类型: </span><span>{{orderInfo.type==1?'请购':orderInfo.type==2?'采购':orderInfo.type==3?'到货':'质检'}}</span></div>
          <div class="info_item"><span>项目名称: </span><span>{{orderInfo.title}}</span></div>
          <div class="info_item"><span>单据号: </span><span>{{orderInfo.order_no}}</span></div>
          <div class="info_item"><span>制单日期: </span><span>{{func.replaceDate(orderInfo.crt_time)}}</span></div>
          <div class="info_item"><span>备注: </span><span>{{orderInfo.remark}}</span></div>
        </div>
        <div class="info_fixed">
          <Steps :current="99"
                 size="small"
                 direction="vertical">
            <Step v-for="item in oaInfo"
                  :key="item.level">
              <div slot="title">
                {{func.replaceDate(item.upd_time)}}
                审批人:{{item.nickname}}
              </div>
            </Step>
          </Steps>
        </div>
      </div>
      <div class="content">
        <div class="content_header">
        </div>
        <Table :columns="tableColumns"
               :data="tableData"
               max-height="600"
               show-summary
               :summary-method="handleSummary"
               border>
          <template slot="Set"
                    slot-scope="{row,index}">
            <a style="margin:0 5px"
               v-show="$route.query.type!=3"
               @click="handleSet(row,index,3,areaItem.product,areaIndex)">详情</a>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  name: '',
  components: {

  },
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data () {
    // 这里存放数据
    return {
      setpContent: [],
      orderInfo: {},
      oaInfo: [],
      tableData: [],
      type: null,
      tableColumns: [
        { title: '物料名称', key: 'type_title', align: 'center', tooltip: true, minWidth: 80 },
        { title: '物料分类', key: 'title', align: 'center', minWidth: 80 },
        {
          title: '物料规格', key: 'measure', align: 'center', minWidth: 80,
          render: (h, params) => { return h('span', {}, `${params.row.long || 0}*${params.row.width || 0}*${params.row.high || 0}`) }
        },
        { title: '计量单位', key: 'unit', align: 'center', tooltip: true, minWidth: 70 },
        { title: '数量', key: 'num', align: 'center', tooltip: true, minWidth: 40 },
        {
          title: '到货时间', key: '', align: 'center', tooltip: true, minWidth: 150,
          render: (h, params) => { return h('span', {}, this.func.replaceDate(params.row.arrive_time)) }
        },
        { title: '建议供应商', key: 'supply_title', align: 'center', tooltip: true, minWidth: 120 },
      ],
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.axios({
      method: 'get',
      url: '/api/purchase_oa_detail',
      params: {
        oa_order_no: this.$route.query.oa_order_no
      }
    }).then((res) => {
      this.orderInfo = res.data.detail
      this.type = this.orderInfo.type
      this.oaInfo = res.data.oa
      this.tableData = res.data.list
    }).catch((err) => { });
  },
  methods: {
    handleSet (row, index) {
      this.$router.push({
        path: '/cms/BidSystem/DeepeningOrder/approvalProductDetail',
        query: {
          oa_id: row.id,
          // order_no: row.order_no,
          // type: 'oa',
          currency_type: this.currency_type,
        }
      })
    },
    approval (status) {
      let params = {
        status,
        type: this.orderInfo.type,
        oa_order_no: this.$route.query.oa_order_no
      }
      this.axios.post('/api/purchase_oa_pull', params).then(res => {
        if (res.code == 200) {
          this.$Message.success(res.msg || '无提示')
          // this.goback()
        }
      })
    },
    goback () { this.$router.go(-1) },
    handleSummary ({ columns, data }) {
      const sums = {};
      columns.forEach((column, index) => {
        const key = column.key;
        if (index === 0) {
          sums[key] = {
            key,
            value: '合计'
          };
          return;
        } else if (index === 2) {
          sums[key] = {
            key,
            value: ''
          };
        }
        const values = data.map(item => Number(item[key]));
        if (!values.every(value => isNaN(value))) {
          const v = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[key] = {
            key,
            value: v
          };
        } else {
          sums[key] = {
            key,
            value: ''
          };
        }
      });
      return sums;
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.body {
  margin-top: 10px;
  .header {
    margin: 20px 10px;
  }
  .info_wrapper {
    display: flex;
    justify-content: space-around;
    .info {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .info_item {
        width: 250px;
        padding: 0 10px 10px 10px;
      }
    }
    .info_fixed {
      width: 100%;
      max-height: 150px;
      padding-top: 20px;
      padding-left: 5px;
      border: 1px solid #ffffbb;
      overflow: hidden;
      overflow-y: auto;
      background-color: #ffffbb;
      text-align: center;
      /deep/.ivu-steps-head-inner {
        margin: 0;
      }
      /deep/.ivu-steps-title,
      /deep/.ivu-steps-head {
        background: transparent;
      }
    }
  }
  .content {
    .content_header {
      margin: 20px 0;
      display: flex;
      justify-content: flex-end;
    }
    .addArea {
      position: relative;
      padding: 15px;
      margin-bottom: 30px;
      border-radius: 5px;
      box-shadow: 1px 1px 5px 1px #999;
      /deep/ .ivu-form-item {
        display: inline-block;
        width: 220px;
      }
    }
  }
}
</style>