elizebeth/src/xt_pages/stock/stockInOrderDetail.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">入库单号: {{ WarehouseInfo.warehouse.warehousing_order }}</span>
        </el-row>
      </div>

      <div class="cell clearfix">
        <span style="width: 300px;color: #606266"
          >单据日期:
          {{
            WarehouseInfo.warehouse.warehousing_time | parseTime("{y}-{m}-{d}")
          }}</span
        >
        <span style="width: 300px;color: #606266"
          >厂商:
          {{ getManufactuerName(WarehouseInfo.warehouse.manufacturer) }}</span
        >
        <span style="width: 300px;color: #606266"
          >经销商: {{ getDealerName(WarehouseInfo.warehouse.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"
            >编辑</el-button
          >
          <el-button size="small" icon="el-icon-delete" @click="deleteRecord"
            >删除</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="WarehouseInfo.warehouseInfoDate"
          :class="signAndWeighBoxPatients"
          style="width: 100%"
          border
          :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)' }"
        >
          <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>
             <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>{{ scope.row.warehousing_count }}</span>
            </template>
          </el-table-column>

          <el-table-column label="总价" min-width="20" align="center">
            <template slot-scope="scope">
              {{ calculate(scope.row.price * scope.row.warehousing_count) }}
            </template>
          </el-table-column>

          <el-table-column align="center" min-width="25">
            <template slot="header" slot-scope="scope">
              <span>批号</span>
            </template>
            <template slot-scope="scope">
              <span>{{ scope.row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column label="生产日期" min-width="40" align="center">
            <template v-if="scope.row.product_date != 0" slot-scope="scope">
              {{ scope.row.product_date | parseTime("{y}-{m}-{d}") }}
            </template>
          </el-table-column>
          <el-table-column label="有效日期" min-width="40" align="center">
            <template v-if="scope.row.expiry_date != 0" slot-scope="scope">
              {{ scope.row.expiry_date | parseTime("{y}-{m}-{d}") }}
            </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>
      </el-row>
    </div>
  </div>
</template>

<script>
import { uParseTime } from "@/utils/tools";
import {
  GetAllConfig,
  getWarehouseInfoList,
  deleteWarehouseInfo
} from "@/api/stock";
import BreadCrumb from "../components/bread-crumb";

export default {
  name: "stockInOrderDetail",
  components: { BreadCrumb },
  created() {
    const order_id = this.$route.query.id;
    this.GetConfigInfo();
    this.GetOrderDetail(order_id);
  },
  data() {
    return {
      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: [],
      Warehouse: {
        loading: false,
        warehouseDate: [],
        tableCurrentIndex: ""
      },

      WarehouseInfo: {
        loading: false,
        warehouseInfoDate: [],
        warehouse: {}
      }
    };
  },
  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
      };
      getWarehouseInfoList(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.info.length; i++) {
            this.WarehouseInfo.warehouseInfoDate.push(
              response.data.data.info[i]
            );
          }
          this.WarehouseInfo.warehouse = response.data.data.warehousing;
        }
      });
    },
    deleteRecord: function() {
      const ids = [];
      ids.push(this.WarehouseInfo.warehouse.id);
      const idStr = ids.join(",");

      const params = {
        ids: idStr
      };

      this.$confirm("确认删除入库单记录?", "删除入库单记录", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteWarehouseInfo(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");
    },
    printOrder(){
       this.$router.push({
        name: "stockInDetailPrint",
        query: { id: this.$route.query.id }
      });
    }
  }
};
</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;
}
</style>