BST_bigScreen/src/views/BidSystem/ContractList/purchaseDetail.vue

<template>
  <div>
    <Toptitle title="工装单审批详情">
      <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="2">
          <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_title}}</span></div>
          <div class="info_item"><span>项目名称:</span><span>{{orderInfo.residential_name}}</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>{{func.replaceDate(orderInfo.arrive_time)}}</span></div>
          <div class="info_item"><span>备注:</span><span>采购需要快点，生产部等着要</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="tableContent">
        <div class="table_title">请购清单</div>
        <Table :columns="purchaseColumus" :data="purchaseData">
           <template slot="materiel_specs" slot-scope="{ row }">
            <div>
              {{ row.long ? row.long : 0 }}*{{ row.width ? row.width : 0 }}*{{
                row.high ? row.high : 0
              }}
        </div>
           </template>
            <template slot="untaxed_price" slot-scope="{ row }">
            <div>
              {{row.price-row.price*row.fax}}
        </div>
           </template>
             <template slot="untaxed_price_total" slot-scope="{ row }">
            <div>
              {{(row.price-row.price*row.fax)*row.num}}
        </div>
           </template>
            <template slot="tax_amount" slot-scope="{ row }">
            <div>
              {{row.price*row.fax}}
        </div>
           </template>
            <template slot="price_total" slot-scope="{ row }">
            <div>
              {{row.price*row.num}}
        </div>
           </template>
        </Table>
      </div>
        </div>
      </div>
</template>

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

export default {
  name: '',
  components: {

  },
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data () {
    // 这里存放数据
    return {
      setpContent: [],
      orderInfo: {},
      oaInfo: [],
      type: null,
      purchaseColumus:[
        { title: '项目名称', key: 'residential_name', align: 'center', minWidth: 92 },
        { title: '物料分类', key: 'type_title', align: 'center', minWidth: 92 },
        { title: '物料名称', key: 'title', align: 'center', minWidth: 92 },
        { title: '物料规格', key: '', align: 'center', minWidth: 92, slot: "materiel_specs"},
        { title: '计量单位', key: 'unit', align: 'center', minWidth: 92 },
        { title: '采购数量', key: 'num', align: 'center', minWidth: 92 },
        { title: '无税单价', key: '', align: 'center', minWidth: 92 ,slot:'untaxed_price'},
        { title: '税率', key: 'fax', align: 'center', minWidth: 70 },
        { title: '含税单价', key: 'price', align: 'center', minWidth: 92 },
        { title: '无税金额', key: '', align: 'center', minWidth: 92 ,slot:'untaxed_price_total'},
        { title: '税额', key: '', align: 'center', minWidth: 70 ,slot:'tax_amount'},
        { title: '价格合计', key: '', align: 'center', minWidth: 92 ,slot:'price_total'},
      ],
      purchaseData:[],
      // tableColumns: [
      //   { title: '序号', type: 'index', key: '', align: 'center', minWidth: 80 },
      //   { title: '产品名称', key: 'title', align: 'center', tooltip: true, minWidth: 100 },
      //   { title: '数量', key: 'num', align: 'center', minWidth: 80 },
      //   { title: '价格', key: 'price', align: 'center', minWidth: 80 },
      //   { title: '规格', key: 'measure', align: 'center', tooltip: true, minWidth: 140 },
      //   { title: '工艺属性', key: 'process_property', align: 'center', tooltip: true, minWidth: 120 },
      //   {
      //     title: '图纸', align: 'center', key: 'url', minWidth: 100,
      //     render: (h, params) => {
      //       const { row } = params
      //       let url = row.url ? row.url : []
      //       return h('img', {
      //         attrs: {
      //           src: this.$store.state.ip + url[0],
      //           style: 'max-width:50px;max-height:50px;position:relative;top:3px;'
      //         },
      //         on: {
      //           click: (e) => {
      //             // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
      //             // row.imgs = res.data
      //             let list = []
      //             url.length > 0 && url.forEach(el => {
      //               list.push({ img_url: el })
      //             });
      //             this.$previewImg({
      //               list,
      //               baseUrl: this.$store.state.ip,
      //               baseImgField: 'img_url',
      //               baseTitleField: ''
      //             })
      //             // })
      //           }
      //         }
      //       })
      //     }
      //   },
      //   { title: '左右式', key: '', align: 'center', tooltip: true, minWidth: 80 },
      //   { title: '图号', key: 'url_number', align: 'center', tooltip: true, minWidth: 80 },
      //   { title: '备注', key: 'remark', align: 'center', minWidth: 80 },
      //   // { title: '操作', key: 'remark', align: 'center', slot: 'Set', minWidth: 120 },
      // ],
      isOpen: false,
      btnLoading: false,
      fullAreaList: [],
      singleAreaList: [],
      warningList: [],
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.axios({
      method: 'get',
      url: '/api/order_oa_detail',
      params: {
        order_no: this.$route.query.order_no,
      type: this.$route.query.type
      }
    }).then((res) => {
      this.orderInfo = res.data
      // this.oaInfo = res.data.__ob__
      // this.areaList = [res.data.area]
      // this.singleAreaList = JSON.parse(JSON.stringify([res.data.area]))
      this.purchaseData = res.data.list;
      console.log(res)
    }).catch((err) => { });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
    methods: {
    handleSet () { },
    // approval (status) {
    //   let params = {
    //     status,
    //     type: this.type,
    //     oa_order_no: this.$route.query.oa_order_no
    //   }
    //   this.axios.post('/api/order_price_oa_pull', params).then(res => {
    //     if (res.code == 200) {
    //       this.$Message.success(res.msg || '无提示')
    //       // this.goback()
    //     }
    //   })
    // },
    goback () { this.$router.go(-1) },
    handleShowMore () {
      if (this.fullAreaList.length > 0) {
        this.areaList = this.isOpen ? JSON.parse(JSON.stringify(this.singleAreaList)) : JSON.parse(JSON.stringify(this.fullAreaList))
        this.isOpen = !this.isOpen
      } else {
        this.btnLoading = true
        this.axios({
          method: 'get',
          url: '/api/order_price_oa_deep_area_detail',
          params: {
            oa_order_no: this.$route.query.oa_order_no
          }
        }).then((res) => {
          this.isOpen = !this.isOpen
          this.fullAreaList = JSON.parse(JSON.stringify(res.data))
          this.areaList = res.data
          this.btnLoading = false
        }).catch((err) => { });
      }
    },

  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.body {
  margin-top: 10px;
   .tableContent{
      .table_title{
        line-height: 30px;
        height: 36px;
        border-top: 1px solid #F4F4F4;
        font-size: 18px;
        font-weight: bold;
      }
    }
  .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: 180px;
        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;
      }
    }
  }
}
</style>