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

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </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>

      <div class="cell clearfix">
        <el-button
          size="small"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="setting"
        >设置</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: []
        }
      };
    },
    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;
            for (let i = 0; i < response.data.data.list.length; i++) {

              this.WarehouseInfo.warehouseInfoDate.push(
                response.data.data.list[i]
              );
            }
            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()
      }
    }
  };
</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>