elizebeth/src/xt_pages/stock/stockQuery.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <div
        style="
          justify-content: space-between;
          margin: 0px 0 12px 0;
          display: flex;
          align-items: center;
        "
      >
        <div>
          <el-select
            v-model="type_name"
            style="width: 140px; margin-right: 10px"
            placeholder="请选择"
            @change="changeTypeName"
          >
            <el-option
              v-for="item in types"
              :key="item.id"
              :label="item.type_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-date-picker
            size="small"
            v-model="start_time"
            prefix-icon="el-icon-date"
            :editable="false"
            style="width: 196px"
            type="date"
            placeholder="选择日期时间"
            align="right"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="startTimeChange"
          ></el-date-picker
          >-
          <el-date-picker
            size="small"
            v-model="end_time"
            prefix-icon="el-icon-date"
            :editable="false"
            style="width: 196px"
            type="date"
            placeholder="选择日期时间"
            align="right"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="endTimeChange"
          ></el-date-picker>
          <el-input
            size="small"
            style="width: 200px; margin-left: 10px"
            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>
          <el-button size="small" type="primary" @click="exportList"
            >导出</el-button
          >
          <el-button size="small" type="primary" @click="toPrint"
            >打印</el-button
          >
        </div>
      </div>

      <el-table
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266',
        }"
        :data="tableList"
        :class="signAndWeighBoxPatients"
        border
        v-loading="WarehouseInfo.loading"
      >
        <el-table-column label="耗材类型" align="center">
          <template slot-scope="scope">
            <span>{{ getGoodType(scope.row.good_type_id) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="耗材名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.good_name }}
          </template>
        </el-table-column>
        <el-table-column label="规格&单位" align="center">
          <template slot-scope="scope">
            <span
              >{{ scope.row.specification_name }} /
              {{ scope.row.packing_unit }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="国家编码" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.social_security_directory_code }}</span>
          </template>
        </el-table-column>
        <el-table-column label="进货单价" align="center">
          <template slot-scope="scope">
            {{ scope.row.buy_price }}
          </template>
        </el-table-column>
        <el-table-column label="生产商" align="center">
          <template slot-scope="scope">
            <!-- <tr style="background: none">
              <td style="border-right: none; border-inline-end: none">
                {{ getManufacture(scope.row.manufacturer) }}
              </td>
            </tr> -->
            <span>
              {{ getManufacture(scope.row.manufacturer) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="入库数量" align="center">
          <template slot-scope="scope">
              <span
                v-if="getWareInfo(scope.row.xt_warehouse_info) > 0"
              >
                {{ getWareInfo(scope.row.xt_warehouse_info)
                }}{{ scope.row.packing_unit }}
              </span>
           
            <!-- <span v-if="getWareInfo(scope.row.xt_warehouse_info)>0">{{getWareInfo(scope.row.xt_warehouse_info)}}{{scope.row.packing_unit}}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="出库数量" align="center" v-if="showOne">
          <template slot-scope="scope">
            <span
              v-if="
                org_id == 9671 ||
                org_id == 10138 ||
                org_id == 10028 ||
                org_id == 9675 ||
                org_id == 4 ||
                org_id == 3877 ||
                org_id == 10243 ||
                org_id == 10088 ||
                org_id == 10245 ||
                org_id == 9779 ||
                org_id == 10106 ||
                org_id == 9504 ||
                org_id == 10215 ||
                org_id == 10188 ||
                org_id == 10191 ||
                org_id == 9919 ||
                org_id == 10265 ||
                org_id == 10164 ||
                org_id == 10290
              "
            >
              <span>
                {{
                  getWareInfo(scope.row.xt_warehouse_info) -
                  getOverFlushInfo(scope.row.xt_warehouse_info)
                }}
              </span>
            </span>
            <span v-else
              >{{ getAutoCount(scope.row.id) + getOutCount(scope.row.id) }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="剩余库存量" align="center" v-if="showThree">
          <template slot-scope="scope">
           
              <span
                v-if="
                  org_id == 9671 ||
                  org_id == 10138 ||
                  org_id == 10028 ||
                  org_id == 9675 ||
                  org_id == 4 ||
                  org_id == 3877 ||
                  org_id == 10243 ||
                  org_id == 10088 ||
                  org_id == 10245 ||
                  org_id == 9779 ||
                  org_id == 10106 ||
                  org_id == 9504 ||
                  org_id == 10215 ||
                  org_id == 10188 ||
                  org_id == 10191 ||
                  org_id == 9919 ||
                  org_id == 10265 ||
                  org_id == 10164 ||
                  org_id == 10290
                "
              >
                {{ getOverFlushInfo(scope.row.xt_warehouse_info) }}
              </span>
              <span v-else>
                {{
                  getWareInfo(scope.row.xt_warehouse_info) -
                  getAutoCount(scope.row.id) -
                  getOutCount(scope.row.id) +
                  getCancelCount(scope.row.id)
                }}
              </span>
           
            <!-- <span
              v-if="
                org_id == 9671 ||
                org_id == 10138 ||
                org_id == 10028 ||
                org_id == 9675 ||
                org_id == 4 ||
                org_id == 3877 ||
                org_id == 10243 ||
                org_id == 10088 ||
                org_id == 10245 ||
                org_id == 9779 ||
                org_id == 10106 ||
                org_id == 9504 ||
                org_id == 10215 ||
                org_id == 10188 ||
                org_id == 10191 ||
                org_id == 9919 ||
                org_id == 10265 ||
                org_id == 10164 ||
                org_id == 10290
              "
            >
              {{ getOverFlushInfo(scope.row.xt_warehouse_info) }}
            </span>
            <span v-else>{{
              getWareInfo(scope.row.xt_warehouse_info) -
              getAutoCount(scope.row.id) -
              getOutCount(scope.row.id) +
              getCancelCount(scope.row.id)
            }}</span> -->
          </template>
        </el-table-column>

        <el-table-column label="剩余库存量" align="center" v-if="showFour">
          <template slot-scope="scope">
            <span>{{
              getWareInfo(scope.row.xt_warehouse_info) -
              getAutoCount(scope.row.id) -
              getOutCount(scope.row.id) +
              getCancelCount(scope.row.id)
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="出库数量" align="center" v-if="showTwo">
          <template slot-scope="scope">
            <span
              >{{ getAutoCount(scope.row.id) + getOutCount(scope.row.id) }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="260px">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="toClick(scope.row)"
              >库存流水
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="toClickOne(scope.row)"
              >批次
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 50, 100, 200, 500, 1000]"
        :page-size="10"
        background
        align="right"
        style="margin-top: 20px"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import {
  GetAllGoodType,
  getAllStockList,
  getStockDrugCount,
} from "@/api/stock";

export default {
  name: "stockIn",
  created() {
    this.org_id = this.$store.getters.xt_user.org_id;

    var start_time = window.sessionStorage.getItem("start_time");
    var end_time = window.sessionStorage.getItem("end_time");

    if (start_time != null) {
      this.start_time = start_time;
    }
    if (end_time != null) {
      this.end_time = end_time;
    }
    window.sessionStorage.removeItem("start_time");
    window.sessionStorage.removeItem("end_time");
    this.GetAllGoodType();
    this.getlist();
    this.getStockDrugCount();
  },
  components: {
    BreadCrumb,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "库存管理" },
        { path: "/stock/query", name: "库存查询" },
      ],
      keywords: "",
      total: 0,
      multipleSelection: [],
      signAndWeighBoxPatients: "sign-and-weigh-box-patients",
      start_time: "",
      end_time: "",
      page: 1,
      limit: 10,
      goodType: [],
      goodInfo: [],
      WarehouseInfo: {
        loading: false,
        warehouseInfoDate: [],
      },
      options: [],
      value: "",
      type_name: 0,
      types: [],
      tableList: [],
      manufacturerList: [],
      countList: [],
      outCountList: [],
      autoCountList: [],
      cancelCountList: [],
      org_id: 0,
      showOne: true,
      showTwo: false,
      showThree: true,
      showFour: false,
    };
  },
  methods: {
    GetAllGoodType: function () {
      GetAllGoodType().then((response) => {
        if (response.data.state == 0) {
          this.$message.error(response.data.msg);
          return false;
        } else {
          var obj = {
            id: 0,
            type_name: "全部",
          };
          this.types.push(obj);
          for (let i = 0; i < response.data.data.goodType.length; i++) {
            this.goodType.push(response.data.data.goodType[i]);
            this.types.push(response.data.data.goodType[i]);
          }
        }
      });
    },
    GetAllGoodInfo: function () {
      GetAllGoodInfo().then((response) => {
        if (response.data.state == 0) {
          this.$message.error(response.data.msg);
          return false;
        } else {
          for (let i = 0; i < response.data.data.goodInfo.length; i++) {
            this.goodInfo.push(response.data.data.goodInfo[i]);
          }
        }
      });
    },
    handleBack: function () {
      this.$router.go(-1);
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getlist();
      this.getStockDrugCount();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getlist();
      this.getStockDrugCount();
    },
    calculate: function (val) {
      return Math.round(parseFloat(val) * 100) / 100;
    },
    startTimeChange: function (val) {
      window.sessionStorage.removeItem("start_time");
      var time = this.getTimestamp(val) - this.getTimestamp(this.end_time);
      if (time > 0) {
        this.$message.error("开始时间不能大于结束时间");
        this.start_time = "";
      } else {
        this.start_time = val;
        this.getlist();
        this.getStockDrugCount();
      }
    },
    endTimeChange: function (val) {
      window.sessionStorage.removeItem("end_time");
      var time = this.getTimestamp(val) - this.getTimestamp(this.start_time);
      if (time < 0) {
        this.$message.error("结束时间不能小于开始时间");
        this.end_time = "";
      } else {
        this.end_time = val;
        this.getlist();
        this.getStockDrugCount();
      }
    },
    stockInCount: function (row) {
      let total = 0;
      for (let i = 0; i < row.query_warehousing_info.length; i++) {
        total = total + row.query_warehousing_info[i].warehousing_count;
      }
      return total;
    },
    salesReturnCount: function (row) {
      let total = 0;
      for (let i = 0; i < row.query_sales_return_info.length; i++) {
        total = total + row.query_sales_return_info[i].count;
      }
      return total;
    },
    stockOutCount: function (row) {
      let total = 0;
      for (let i = 0; i < row.query_warehouseout_info.length; i++) {
        total = total + row.query_warehouseout_info[i].count;
      }
      return total;
    },
    cancelStockCount: function (row) {
      let total = 0;
      for (let i = 0; i < row.query_cancel_stock_info.length; i++) {
        total = total + row.query_cancel_stock_info[i].count;
      }
      return total;
    },
    search: function () {
      this.getlist();
      this.getStockDrugCount();
    },

    // 合并单元格样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      let arr = [6, 7, 8, 9];
      if (arr.indexOf(columnIndex) > -1) {
        return "spanClass";
      }
    },

    exportList() {
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = [
          "耗材类型",
          "耗材名称",
          "规格&单位",
          "国家编码",
          "进货单价",
          "生产商",
          "入库数量",
          "出库数量",
          "库存剩余量",
        ];
        const filterVal = [
          "type_name",
          "good_name",
          "unit",
          "social_security_directory_code",
          "buy_price",
          "prodect_name",
          "inCount",
          "outCount",
          "overplus",
        ];

        for (let i = 0; i < this.tableList.length; i++) {
          this.tableList[i].type_name = this.getGoodType(
            this.tableList[i].good_type_id
          );
          this.tableList[i].unit =
            this.tableList[i].specification_name +
            "/" +
            this.tableList[i].packing_unit;
          this.tableList[i].prodect_name = this.getManufacture(
            this.tableList[i].manufacturer
          );
          this.tableList[i].inCount = this.getWareInfo(
            this.tableList[i].xt_warehouse_info
          );

          if (this.end_time == "") {
            if (
              this.org_id == 9671 ||
              this.org_id == 10138 ||
              this.org_id == 10028 ||
              this.org_id == 9675 ||
              this.org_id == 4 ||
              this.org_id == 3877 ||
              this.org_id == 10243 ||
              this.org_id == 10088 ||
              this.org_id == 10245 ||
              this.org_id == 9779 ||
              this.org_id == 10106 ||
              this.org_id == 9504 ||
              this.org_id == 10215 ||
              this.org_id == 10088 ||
              this.org_id == 10191 ||
              this.org_id == 9919 ||
              this.org_id == 10265 ||
              this.org_id == 10164 ||
              this.org_id == 10290
            ) {
              this.tableList[i].outCount =
                this.getWareInfo(this.tableList[i].xt_warehouse_info) -
                this.getOverFlushInfo(this.tableList[i].xt_warehouse_info) +
                this.getCancelSotckInfo(this.tableList[i].cancel_stock_info);
            } else {
              this.tableList[i].outCount =
                this.getAutoCount(this.tableList[i].id) +
                this.getOutCount(this.tableList[i].id);
            }

            if (
              this.org_id == 9671 ||
              this.org_id == 10138 ||
              this.org_id == 10028 ||
              this.org_id == 9675 ||
              this.org_id == 4 ||
              this.org_id == 3877 ||
              this.org_id == 10243 ||
              this.org_id == 10088 ||
              this.org_id == 10245 ||
              this.org_id == 9779 ||
              this.org_id == 10106 ||
              this.org_id == 9504 ||
              this.org_id == 10215 ||
              this.org_id == 10088 ||
              this.org_id == 10191 ||
              this.org_id == 9919 ||
              this.org_id == 10265 ||
              this.org_id == 10164 ||
              this.org_id == 10290
            ) {
              this.tableList[i].overplus = this.getOverFlushInfo(
                this.tableList[i].xt_warehouse_info
              );
            } else {
              this.tableList[i].overplus =
                this.getWareInfo(this.tableList[i].xt_warehouse_info) -
                this.getAutoCount(this.tableList[i].id) -
                this.getOutCount(this.tableList[i].id) +
                this.getCancelCount(this.tableList[i].id);
            }
          } else {
            this.tableList[i].outCount =
              this.getAutoCount(this.tableList[i].id) +
              this.getOutCount(this.tableList[i].id);
            this.tableList[i].overplus =
              this.getWareInfo(this.tableList[i].xt_warehouse_info) -
              this.getAutoCount(this.tableList[i].id) -
              this.getOutCount(this.tableList[i].id) +
              this.getCancelCount(this.tableList[i].id);
          }
        }
        const data = this.formatJson(filterVal, this.tableList);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "库存查询",
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    changeTypeName() {
      this.getlist();
    },
    toPrint() {
      window.sessionStorage.setItem("start_time", this.start_time);
      window.sessionStorage.setItem("end_time", this.end_time);
      this.$router.push(
        "/stock/stockprint?start_time=" +
          this.start_time +
          "&end_time=" +
          this.end_time +
          "&keyword=" +
          this.keywords +
          "&type_name=" +
          this.type_name +
          "&page=" +
          this.page +
          "&limit=" +
          this.limit
      );
    },

    getUnit(id) {
      var name = "";
      for (let i = 0; i < this.$store.getters.good_unit.length; i++) {
        if (id == this.$store.getters.good_unit[i].id) {
          name = this.$store.getters.good_unit[i].name;
        }
      }
      return name;
    },

    getTimestamp(time) {
      // 把时间日期转成时间戳
      return new Date(time).getTime() / 1000;
    },
    getGoodType(id) {
      var name = "";
      for (let i = 0; i < this.goodType.length; i++) {
        if (id == this.goodType[i].id) {
          name = this.goodType[i].type_name;
        }
      }
      return name;
    },
    getlist() {
      const params = {
        page: this.page,
        limit: this.limit,
        keywords: this.keywords,
        start_time: this.start_time,
        end_time: this.end_time,
        type: this.type_name,
      };
      console.log("params232322323", params);
      getAllStockList(params).then((response) => {
        if (response.data.state == 1) {
          if (this.end_time == "") {
            this.showTwo = false;
            this.showFour = false;
            this.showThree = true;
            this.showOne = true;
          }
          if (this.end_time != "") {
            this.showThree = false;
            this.showOne = false;
            this.showTwo = true;
            console.log("hh3223322323", this.showTwo);
            this.showFour = true;
          }
          var list = response.data.data.list;

          this.tableList = list;
          var total = response.data.data.total;
          this.total = total;
          var manufacturerList = response.data.data.manufacturerList;
          this.manufacturerList = manufacturerList;
        }
      });
    },
    getManufacture(id) {
      var name = "";
      for (let i = 0; i < this.manufacturerList.length; i++) {
        if (id == this.manufacturerList[i].id) {
          name = this.manufacturerList[i].manufacturer_name;
        }
      }
      return name;
    },
    toClick(val) {
      var manufacturer_name = "";
      var specification_name = "";
      for (let i = 0; i < this.manufacturerList.length; i++) {
        if (val.manufacturer == this.manufacturerList[i].id) {
          manufacturer_name = this.manufacturerList[i].manufacturer_name;
        }
      }
      specification_name = val.specification_name + "/" + val.packing_unit;
      var overCount = this.getOverplus(val.xt_warehouse_info);
      window.sessionStorage.setItem("start_time", this.start_time);
      window.sessionStorage.setItem("end_time", this.end_time);
      this.$router.push({
        path:
          "/stock/in/stockflow?id=" +
          val.id +
          "&good_name=" +
          val.good_name +
          "&manufacturer=" +
          manufacturer_name +
          "&specification_name=" +
          specification_name +
          "&packing_unit=" +
          val.packing_unit +
          "&overCount=" +
          overCount,
      });
    },
    toClickOne(val) {
      var manufacturer_name = "";
      var specification_name = "";
      for (let i = 0; i < this.manufacturerList.length; i++) {
        if (val.manufacturer == this.manufacturerList[i].id) {
          manufacturer_name = this.manufacturerList[i].manufacturer_name;
        }
      }
      specification_name = val.specification_name + "/" + val.packing_unit;
      var overCount = this.getOverplus(val.xt_warehouse_info);
      window.sessionStorage.setItem("start_time", this.start_time);
      window.sessionStorage.setItem("end_time", this.end_time);
      this.$router.push({
        path:
          "/stock/in/stockbatchnumber?id=" +
          val.id +
          "&good_name=" +
          val.good_name +
          "&manufacturer=" +
          manufacturer_name +
          "&specification_name=" +
          specification_name +
          "&packing_unit=" +
          val.packing_unit +
          "&overCount=" +
          overCount,
      });
    },
    getStockDrugCount() {
      var params = {
        keywords: this.keywords,
        start_time: this.start_time,
        end_time: this.end_time,
      };
      console.log("参数23233223", params);
      getStockDrugCount(params).then((response) => {
        if (response.data.state == 1) {
          var outlist = response.data.data.outList;
          console.log("outlist22323232233", outlist);
          this.outCountList = outlist;
          var autoCount = response.data.data.autoCount;

          this.autoCountList = autoCount;
          var totalCount = response.data.data.totalCount;

          this.cancelCountList = totalCount;
        }
      });
    },
    getInCount(id) {
      var count = 0;
      for (let i = 0; i < this.countList.length; i++) {
        if (id == this.countList[i].good_id) {
          count = this.countList[i].count;
        }
      }
      return count;
    },
    getOutCount(id) {
      var count = 0;
      for (let i = 0; i < this.outCountList.length; i++) {
        if (id == this.outCountList[i].good_id) {
          count = this.outCountList[i].count;
        }
      }
      return count;
    },
    getAutoCount(id) {
      var count = 0;
      for (let i = 0; i < this.autoCountList.length; i++) {
        if (id == this.autoCountList[i].good_id) {
          count = this.autoCountList[i].count;
        }
      }
      return count;
    },
    getCancelCount(id) {
      var count = 0;
      for (let i = 0; i < this.cancelCountList.length; i++) {
        if (id == this.cancelCountList[i].good_id) {
          count = this.cancelCountList[i].count;
        }
      }
      return count;
    },
    getStockCount(id) {
      var stock_count = 0;
      for (let i = 0; i < this.countList.length; i++) {
        if (id == this.countList[i].good_id) {
          stock_count = this.countList[i].stock_count;
        }
      }
      return stock_count;
    },
    getWareInfo(arr) {
      var total = 0;
      if (arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          total += parseInt(arr[i].warehousing_count);
        }
      } else {
        total = "";
      }
      return total;
    },
    getOverplus(arr) {
      var total = 0;
      if (arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          total += arr[i].stock_count;
        }
      } else {
        total = "";
      }
      return total;
    },
    getCancelInfo(arr) {
      var total = 0;
      if (arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          total += arr[i].count;
        }
      } else {
        total = "";
      }
      return total;
    },
    getOverFlushInfo(arr) {
      var total = 0;
      if (arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          total += arr[i].stock_count;
        }
      }
      return total;
    },
    getCancelSotckInfo(arr) {
      var cancle_toal = 0;
      if (arr.length > 0) {
        for (let z = 0; z < arr.length; z++) {
          cancle_toal += arr[z].count;
        }
      }
      return cancle_toal;
    },
  },
};
</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;
}

/* 合并表格线样式 */

.spanClass .cell {
  padding: 0 !important;
}

.spanClass .cell tr {
  display: inline-block;
  width: 100%;
}

.spanClass .cell tr td {
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
  display: block;
  width: 100%;
}
.spanClass .cell tr:last-of-type td {
  border-bottom: none;
}
</style>