elizebeth/src/xt_pages/stock/drugs/query.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <el-button
        size="small"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="setting"
      >设置
      </el-button
      >
     <!-- <el-button
        size="small"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="exportStock"
      >导出
      </el-button> -->
    </div>
    <div class="app-container ">
      <div class="cell clearfix">
        <el-input
          size="small"
          style="width: 400px;"
          class="filter-item"
          v-model.trim="keywords"
          placeholder="商品名称/规格名称"
        />
        <el-button
          size="small"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="search"
        >搜索
        </el-button
        >
      </div>


      <el-table
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
        :data="WarehouseInfo.warehouseInfoDate"
        :class="signAndWeighBoxPatients"
        border
        v-loading="WarehouseInfo.loading"
        :span-method="merge"

      >
        <el-table-column label="药品名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.drug_name }}
          </template>
        </el-table-column>
        <el-table-column label="规格名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.drug_spec }}</span>
          </template>
        </el-table-column>
        <el-table-column label="入库数量" align="center">
          <template slot-scope="scope">
            <span
              @click="showStockInDetailDialog(scope.row.drug_id)"
            >{{ stockInCount(scope.row) }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="入库退货" align="center">
          <template slot-scope="scope">
            <span
              @click="showSaleReturnDetailDialog(scope.row)"
            >{{ salesReturnCount(scope.row) }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="实际入库" align="center">
          <template slot-scope="scope">
            {{ stockInCount(scope.row) - salesReturnCount(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column label="出库数量" align="center">
          <template slot-scope="scope">
            <span
              @click="showStockOutDetailDialog(scope.row.drug_id)"
            >{{ stockOutCount(scope.row) }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="出库退库" align="center">
          <template slot-scope="scope">
            <span
              @click="showCancelStockDetailDialog(scope.row)"
            >{{ cancelStockCount(scope.row) }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="实际出库" align="center">
          <template slot-scope="scope">
            {{ stockOutCount(scope.row) - cancelStockCount(scope.row) }}
          </template>
        </el-table-column>

        <el-table-column label="剩余库存" align="center">
          <template slot-scope="scope">
            <span>{{
              stockInCount(scope.row) -
                salesReturnCount(scope.row) -
                stockOutCount(scope.row) +
                cancelStockCount(scope.row)
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 50, 100]"
        :page-size="10"
        background
        align="right"
        style="margin-top:20px;"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <setting-dialog
      ref="dialog"
    ></setting-dialog>

  </div>
</template>

<script>
  import { uParseTime } from '@/utils/tools'
  import BreadCrumb from '@/xt_pages/components/bread-crumb'
  import { getAllDrugStockQueryList } from '@/api/drug/drug_stock'
  import SettingDialog from './settingDialog/index'

  export default {
    name: 'stockIn',
    created() {
      this.GetAllDrugStockQueryList()
    },
    components: {
      SettingDialog,
      BreadCrumb
    },
    data() {
      return {
        crumbs: [
          { path: false, name: '库存管理' },
          { path: '/stock/drugs/stock/query', name: '药品库存查询' }
        ],
        keywords: '',
        total: 0,
        multipleSelection: [],
        signAndWeighBoxPatients: 'sign-and-weigh-box-patients',
        start_time: '',
        end_time: '',
        page: 1,
        limit: 10,
        goodType: [],
        goodInfo: [],
        tempArr: [],
        sameRowArr: [],
        WarehouseInfo: {
          loading: false,
          warehouseInfoDate: []
        },
        tableData:[]
      }
    },
    methods: {
      handleSpanTempArr() {
        this.tempArr = []

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

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

      },
      merge({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          const _row = this.tempArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },
      GetAllDrugStockQueryList: function() {
        console.log(this.keywords)
        const Params = {
          page: this.page,
          limit: this.limit,
          keyword: this.keywords
        }
        this.WarehouseInfo.loading = true
        this.WarehouseInfo.warehouseInfoDate = []
        getAllDrugStockQueryList(Params).then(response => {
          if (response.data.state == 0) {
            this.WarehouseInfo.loading = false
            this.$message.error(response.data.msg)
            return false
          } else {
            this.WarehouseInfo.loading = false
            this.total = response.data.data.total
            var arr = []
            for (let i = 0; i < response.data.data.list.length; i++) {
              this.WarehouseInfo.warehouseInfoDate.push(
                response.data.data.list[i]
              )
              arr.push(response.data.data.list[i])
            }
            console.log("数据源头",arr)
            // for(let i=0;i<arr.length;i++){
            //    arr[i].stockInCount = 
            // }
            this.handleSpanTempArr()
          }
        })
      },
      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
      },

      handleBack: function() {
        this.$router.go(-1)
      },
      handleSizeChange(val) {
        this.limit = val
        this.GetAllDrugStockQueryList()
      },
      handleCurrentChange(val) {
        this.page = val
        this.GetAllDrugStockQueryList()
      },
      calculate: function(val) {
        return Math.round(parseFloat(val) * 100) / 100
      },
      startTimeChange: function() {
        this.GetAllDrugStockQueryList()
      },
      endTimeChange: function() {
        this.GetAllDrugStockQueryList()
      },
      stockInCount: function(row) {
        let total = 0
        for (let i = 0; i < row.query_drug_warehousing_info.length; i++) {
          total = total + row.query_drug_warehousing_info[i].warehousing_count
        }
        return total
      },
      salesReturnCount: function(row) {
        let total = 0

        for (let i = 0; i < row.query_drug_sales_return_info.length; i++) {
          total = total + row.query_drug_sales_return_info[i].count
        }
        return total
      },
      stockOutCount: function(row) {
        let total = 0

        for (let i = 0; i < row.query_drug_warehouseout_info.length; i++) {
          total = total + row.query_drug_warehouseout_info[i].count
        }
        return total
      },
      cancelStockCount: function(row) {
        let total = 0
        for (let i = 0; i < row.query_drug_cancel_stock_info.length; i++) {
          total = total + row.query_drug_cancel_stock_info[i].count
        }
        return total
      },
      showStockInDetailDialog: function(val) {
      },
      showSaleReturnDetailDialog: function() {
      },
      showStockOutDetailDialog: function() {
      },
      showCancelStockDetailDialog: function() {
      },
      search: function() {
        this.GetAllDrugStockQueryList()
      }, setting: function() {
        this.$refs.dialog.show()
      },
      //  exportStock(){
      //    import('@/vendor/Export2Excel').then(excel => {
      //    const tHeader = ['药品名称', '规格名称', '入库数量','入库退货','实际入库','出库数量','出库退货','实际出库','剩余库存']
      //    const filterVal = ['index', 'dialysis_no', 'name','drug_name','drug_spec','Total','Count','margin','margin']
      //   //  for(let i=0;i<this.tableData.length;i++){
      //   //     this.tableData[i].margin = (this.tableData[i].Total?this.tableData[i].Total:0) - this.tableData[i].Count
      //   //  }
        
      //    const data = this.formatJson(filterVal, this.tableData)
      
      //    excel.export_json_to_excel({
      //      header: tHeader,
      //      data,
      //      filename: '自备药查询'
      //    })
      //     this.downloadLoading = false
      //   })
      //  },
      //  formatJson(filterVal, jsonData) {
      //   return jsonData.map(v => filterVal.map(j => v[j]));
      // },

    }
  }
</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;
  }

  }

  .title {
    background: #409eff;
    height: 44px;
    line-height: 44px;
    padding: 0 0 0 10px;
    color: #fff;
    margin: 0 0 10px 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 td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #d0d3da;
  }

  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: #d0d3da;
  }
</style>