elizebeth/src/xt_pages/stock/stockOutOrderDetail.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb v-if="this.$route.query.type == 1" :crumbs='crumbs'></bread-crumb>
      <bread-crumb v-if="this.$route.query.type == 2" :crumbs='crumbs2'></bread-crumb>

    </div>

    <div class="app-container">

      <div class="filter-container">
        <span style="font-size: 18px;color: #606266">出库单详情</span>
        <el-row style="float:right;">
          <span style="color: #606266">出库单号：{{warehousingOutInfo.info.warehouse_out_order_number}}</span>
        </el-row>
      </div>


      <div class="cell clearfix">
        <span style="width: 300px;color: #606266">单据日期:  {{warehousingOutInfo.info.warehouse_out_time | parseTime('{y}-{m}-{d}')}} </span>
        <span style="width: 300px;color: #606266">厂商 {{getManufactuerName(warehousingOutInfo.info.manufacturer)}}</span>
        <span style="width: 300px;color: #606266">经销商 {{getDealerName(warehousingOutInfo.info.dealer)}}</span>
      </div>

      <div style="display:flex;justify-content: space-between;align-items: center;margin: 12px 0;">
        <div>
          <el-button size="small" icon="el-icon-edit" @click="editRecord" v-if="warehousingOutInfo.info.is_sys != 1">编辑</el-button>
          <el-button size="small" icon="el-icon-delete" @click="deleteRecord" v-if="warehousingOutInfo.info.is_sys != 1">删除</el-button>
        </div>
        <el-button size="small" type="primary" @click="printOrder">打印</el-button>
      </div>

      <el-row :gutter="12" style="margin-top: 10px">
        <el-table :data="warehousingOutInfo.warehousingOutData" :class="signAndWeighBoxPatients" style="width: 100%"
                  border :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
                  :span-method="merge"
        >
          <el-table-column min-width="35" align="center">
            <template slot="header" slot-scope="scope">
              <span>耗材类型</span>
            </template>

            <template slot-scope="scope">
              <span v-if="scope.row.good_type_id != 0">{{getTypeName(scope.row.good_type_id)}}</span>
            </template>
          </el-table-column>
           <el-table-column min-width="35" align="center">
            <template slot="header" slot-scope="scope">
              <span>耗材名称</span>
            </template>

            <template slot-scope="scope">
              <span v-if="scope.row.good_id != 0">{{getTypeNameOne(scope.row.good_id)}}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="35" align="center">
            <template slot="header" slot-scope="scope">
              <span>规格型号</span>
            </template>
            <template slot-scope="scope">
              <span v-if="scope.row.good_id != 0">{{getSpecificationName(scope.row.good_id)}}</span>
            </template>
          </el-table-column>


          <el-table-column min-width="23" align="center">
            <template slot="header" slot-scope="scope">
              <span>出货价</span>
            </template>
            <template slot-scope="scope">
              <span>{{scope.row.price}}</span>
            </template>
          </el-table-column>

          <el-table-column min-width="23" align="center">
            <template slot="header" slot-scope="scope">
              <span>出库数量</span>
            </template>
            <template slot-scope="scope">
                <span v-if="scope.row.is_sys == 0">{{scope.row.count}}</span>
                <span v-if="scope.row.is_sys == 1">{{getOutStockCount(scope.row.good_id)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="总价" min-width="20" align="center">
            <template slot-scope="scope">
              {{calculate(scope.row.price*scope.row.count)}}
            </template>
          </el-table-column>

          <el-table-column label="备注" min-width="20" align="center">
            <template slot-scope="scope">
              <el-popover placement="top-start" width="250" trigger="hover">
                <div>{{scope.row.remark}}</div>
                <span slot="reference"
                      v-if="scope.row.remark.length > 20">{{ scope.row.remark.substr(0,20)+'...' }}</span>
                <span slot="reference" v-else>{{ scope.row.remark}}</span>
              </el-popover>

            </template>
          </el-table-column>

          <el-table-column label="" align="center"  >
            <template slot-scope="scope" v-if="scope.row.is_sys == 1">
             <div style="color: #589ff8" @click="jump(scope.row)">使用明细</div>
            </template>
          </el-table-column>



        </el-table>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { uParseTime } from '@/utils/tools'
  import { deleteWarehouseOut, GetAllConfig, getWarehouseOutInfo,GetOutStockTotalCount } from '@/api/stock'
  import BreadCrumb from '../components/bread-crumb'

  export default {
    name: 'stockInOrderDetail',
    components: { BreadCrumb },
    created() {
      const order_id = this.$route.query.id
      const warehouse_out_time = this.$route.query.warehouse_out_time
      console.log("时间搓",warehouse_out_time)
      this.GetConfigInfo()
      this.GetOrderDetail(order_id)
      this.GetTotalCount(warehouse_out_time)
    },
    data() {
      return {
        tempArr: [],
        sameRowArr: [],
        crumbs: [
          { path: false, name: '库存管理' },
          { path: false, name: '耗材出库单' },
          { path: false, name: '出库单详情' }
        ],
        crumbs2: [
          { path: false, name: '库存管理' },
          { path: false, name: '其他出库单' },
          { path: false, name: '出库单详情' }
        ],
        isEdit: 0,
        checked: false,
        signAndWeighBoxPatients: 'sign-and-weigh-box-patients',
        goodType: [],
        goodInfo: [],
        manufacturer: [],
        dealer: [],

        warehousingOutInfo: {
          loading: false,
          warehousingOutData: [],
          info: {}
        },
        stockCount:[]
      }
    },
    methods: {
      getSpecificationName: function(id) {
        let name = ''
        for (let i = 0; i < this.goodInfo.length; i++) {
          if (this.goodInfo[i].id == id) {
            name = this.goodInfo[i].specification_name
          }
        }
        return name
      },
       getTypeName: function(id) {
        let name = ''
        for (let i = 0; i < this.goodType.length; i++) {
          if (this.goodType[i].id == id) {
            name = this.goodType[i].type_name
          }
        }
        return name
      },
       getTypeNameOne: function(id) {
        let name = ''
        for (let i = 0; i < this.goodInfo.length; i++) {
          if (this.goodInfo[i].id == id) {
            name = this.goodInfo[i].good_name
          }
        }
        return name
      },
       GetConfigInfo: function() {
        GetAllConfig().then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.manufacturer = response.data.data.manufacturer
            this.dealer = response.data.data.dealer
            this.goodInfo = response.data.data.goodInfo
            this.goodType = response.data.data.goodType
          }
        })
      }, getManufactuerName: function(manufacturer_id) {
        for (let i = 0; i < this.manufacturer.length; i++) {
          if (this.manufacturer[i].id == manufacturer_id) {
            return this.manufacturer[i].manufacturer_name
          }
        }
      }, getDealerName: function(dealer_id) {
        for (let i = 0; i < this.dealer.length; i++) {
          if (this.dealer[i].id == dealer_id) {
            return this.dealer[i].dealer_name
          }
        }
      }, 
      calculate: function(val) {
        if (val == 0) {
          return ''
        }
        return Math.round(parseFloat(val) * 100) / 100
      },
       GetOrderDetail: function(order_id) {
        const params = {
          'id': order_id
        }
        getWarehouseOutInfo(params).then(response => {
          if (response.data.state == 0) {

            this.$message.error(response.data.msg)
            return false
          } else {
           
            for (let i = 0; i < response.data.data.list.length; i++) {
              this.warehousingOutInfo.warehousingOutData.push(response.data.data.list[i])
            }
            this.warehousingOutInfo.info = response.data.data.info
          
            console.log("数据源头9999999999",this.warehousingOutInfo.warehousingOutData)
            this.handleSpanTempArr()
          }
        })
      },
       deleteRecord: function() {
        const ids = []
        ids.push(this.warehousingOutInfo.info.id)
        const idStr = ids.join(',')

        const params = {
          ids: idStr
        }

        this.$confirm('确认删除出库单?', '删除出库单记录', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteWarehouseOut(params).then(response => {
            if (response.data.state == 0) {
              this.$message.error(response.data.msg)
              return false
            } else {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })

              this.$router.back(-1)
            }
          })
        }).catch(() => {
        })
      },
       editRecord: function() {
         this.$emit('edit-record')
      },
      jump(row){
        this.$router.push({
          name: 'user_detail',
          query: { id: row.id }
        })
      },merge({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          const _row = this.tempArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },
      handleSpanTempArr(){
        this.tempArr = []

        for (let i = 0; i < this.warehousingOutInfo.warehousingOutData.length; i++) {
          if (i === 0) {
            this.tempArr.push(1)
            this.pos = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (this.warehousingOutInfo.warehousingOutData[i].good_type_id === this.warehousingOutInfo.warehousingOutData[i - 1].good_type_id) {
              this.tempArr[this.pos] += 1
              this.tempArr.push(0)
            } else {
              this.tempArr.push(1)
              this.pos = i
            }
          }
        }

        let sameRowArr = [], sIdx = 0
        this.warehousingOutInfo.warehousingOutData.forEach((item, index) => {
          item.index = index
          if (index === 0) {
            sameRowArr.push([index])
          } else {
            if (item.good_type_id === this.warehousingOutInfo.warehousingOutData[index - 1].good_type_id) {
              sameRowArr[sIdx].push(index)
            } else {
              sIdx = sIdx + 1
              sameRowArr.push([index])
            }
          }
        })
        this.sameRowArr = sameRowArr
      },

      GetTotalCount(time){
          var params = {
           warehouse_out_time:time
          }
        GetOutStockTotalCount(params).then(response=>{
           if(response.data.state == 1){
              var stockCount = response.data.data.stockCount
              console.log("stockCount",stockCount)
              this.stockCount = stockCount
           }
        })
      },

      getOutStockCount(id){
         var count = 0 
         for(let i=0;i<this.stockCount.length;i++){
            if(id == this.stockCount[i].good_id){
              count = this.stockCount[i].count
            }
         }
         return count
      },

     printOrder(){
       this.$router.push({
        name: "stockOutDetailPrint",
        query: { id: this.$route.query.id,warehouse_out_time:this.$route.query.warehouse_out_time }
      });
    }
    }
  }
</script>

<style rel="stylesheet/css" lang="scss" scoped>
  .information {
    border: 1px #dcdfe6 solid;
    padding: 30px 20px 30px 20px;

  .border {
    border-bottom: 1px #dcdfe6 solid;
    margin: 0px 0 20px 0;
  }

  }


  .edit_separater {
    border-top: 1px solid rgb(233, 233, 233);
    margin-top: 15px;
    margin-bottom: 15px;
  }

</style>

<style>
  .sign-and-weigh-box .sign-and-weigh-box-patients .cell {
    font-size: 12px;
  }

  .sign-and-weigh-box .sign-and-weigh-box-patients .current-row > td {
    background: #6fb5fa;
  }

  .count {
    color: #bd2c00;

  }
  .el-table__body div > div:hover {
    background-color: #409eff !important;
    color: #fff !important;
  }

</style>