consumoption/consumablespkg/pages/management/details/index.vue

<template>
  <view class="query-wrap">
    <view class="inner-item">
      <view class="text-title">
        <view class="title-circ"> </view>
        <span class="title-text">基本信息</span>
      </view>
      <view v-if="isPending">
        <view class="inventory-item">
          <view class="shuo-item-name">
            <view class="shuo-label">配送订单: </view>
            <view class="shuo-unit">{{ acceptDetaData.delvOrdId }}</view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item">
            <view class="shuo-label">配送品种: </view>
            <view class="shuo-cont">{{ acceptDetaData.delvDrugSum || "" }}</view>
          </view>
          <view class="shuo-item">
            <view class="shuo-label">配送总数: </view>
            <view class="shuo-cont">{{ acceptDetaData.delvCntDetlSum || "" }}</view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item-name">
            <view class="shuo-label">采购订单: </view>
            <view class="shuo-unit">{{ acceptDetaData.purcOrdId }}</view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item">
            <view class="shuo-label">采购品种: </view>
            <view class="shuo-cont">{{ acceptDetaData.ordDetlCnt || "" }}</view>
          </view>
          <view class="shuo-item">
            <view class="shuo-label">采购总数: </view>
            <view class="shuo-cont">{{ acceptDetaData.purcCntDetlSum || "" }}</view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item-name">
            <view class="shuo-label">采购员: </view>
            <view class="shuo-cont">{{ acceptDetaData.planDocmker }}</view>
          </view>
          <view class="shuo-item-name">
            <view class="shuo-label">采购方式: </view>
            <view class="shuo-cont">{{ acceptDetaData.planWay }}</view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item-name">
            <view class="shuo-label">采购时间: </view>
            <view class="shuo-cont">{{ forMatTime(acceptDetaData.ordDocmkDate) }}</view>
          </view>
          <view class="shuo-item-name">
            <view class="shuo-label">配送时间: </view>
            <view class="shuo-cont">{{ forMatTime(acceptDetaData.docmkDate) }}</view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item-name">
            <view class="shuo-label">配送企业: </view>
            <view class="shuo-cont">{{ acceptDetaData.splerName }}</view>
          </view>
        </view>
      </view>

      <view v-else>
        <view class="inventory-item">
          <view class="shuo-item-name">
            <view class="shuo-label"> 验收单号: </view>
            <view class="shuo-unit">
              {{ acceptDetaData.stoinOrdId }}
            </view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item-name">
            <view class="shuo-label"> 配送订单: </view>
            <view class="shuo-unit">
              {{ acceptDetaData.delvOrdId }}
            </view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item-name">
            <view class="shuo-label"> 采购订单: </view>
            <view class="shuo-unit">
              {{ acceptDetaData.purcOrdId }}
            </view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item">
            <view class="shuo-label"> 采购品种: </view>
            <view class="shuo-cont">
              {{ acceptDetaData.detlCnt || "" }}
            </view>
          </view>
          <view class="shuo-item">
            <view class="shuo-label"> 配送品种: </view>
            <view class="shuo-cont">
              {{ acceptDetaData.delvDrugSum || "" }}
            </view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item">
            <view class="shuo-label"> 本次配送: </view>
            <view class="shuo-cont">
              {{ acceptDetaData.delvCntDetlSum || "" }}
            </view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item-name">
            <view class="shuo-label"> 采购总额: </view>
            <view class="shuo-cont">
              {{ acceptDetaData.delvAmt || "" }}
            </view>
          </view>
          <view class="shuo-item-name">
            <view class="shuo-label"> 配送总额: </view>
            <view class="shuo-cont">
              {{ acceptDetaData.ordAmt }}
            </view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item-name">
            <view class="shuo-label"> 验收时间: </view>
            <view class="shuo-cont">
              {{ forMatTime(acceptDetaData.stoinDate) }}
            </view>
          </view>
          <view class="shuo-item-name">
            <view class="shuo-label"> 配送时间: </view>
            <view class="shuo-cont">
              {{ forMatTime(acceptDetaData.docmkDate) }}
            </view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item-name">
            <view class="shuo-label"> 本次验收: </view>
            <view class="shuo-cont">
              {{ acceptDetaData.shppCntDetlSum }}
            </view>
          </view>
          <view class="shuo-item-name">
            <view class="shuo-label"> 验收员: </view>
            <view class="shuo-cont">
              {{ acceptDetaData.docmker }}
            </view>
          </view>
        </view>
        <view class="inventory-item">
          <view class="shuo-item-name">
            <view class="shuo-label"> 配送企业: </view>
            <view class="shuo-cont">
              {{ acceptDetaData.splerName }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="empty-cont" v-if="listData.length == '0'"> 暂无明细数据 </view>
    <view
      class="inner-item"
      v-for="(item, idex) in listData"
      :key="idex"
      @click="handleDetail(item)"
    >
      <view class="text-title" v-if="idex == '0'">
        <view class="title-circ"> </view>
        <span class="title-text">药品明细</span>
      </view>
      <view class="inventory-item" style="margin-top: 40rpx">
        <view class="shuo-item-name">
          <view class="shuo-label-podnme"> 药品名称: </view>
          <view class="shuo-unit">
            <span>{{ item.drugName }}</span>
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item">
          <view class="shuo-label"> 配送数量: </view>
          <view class="shuo-cont">
            {{ item.delvCnt || "" }}
          </view>
        </view>
        <view
          class="shuo-item"
          @click.stop="isPending && openRefuseDialog(idex)"
          style="cursor: pointer"
        >
          <view class="shuo-label" :style="{ color: '#ff4d4f' }">拒收数量:</view>
          <view class="shuo-cont" :style="{ color: '#ff4d4f' }">
            {{ item.refsCnt || 0 }}
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item-name">
          <view class="shuo-label"> 规格: </view>
          <view class="shuo-cont">
            {{ item.specName || "" }}
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item">
          <view class="shuo-label"> 验收数量: </view>
          <view class="shuo-cont">
            {{ item.shppCnt || "" }}
          </view>
        </view>
        <view class="shuo-item">
          <view class="shuo-label"> 是否基药: </view>
          <view class="shuo-cont">
            {{ item.essdrugType === "1" ? "基药" : "非基药" }}
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item">
          <view class="shuo-label"> 生产批次: </view>
          <view class="shuo-cont">
            {{ item.fasBtch || "" }}
          </view>
        </view>
        <view class="shuo-item">
          <view class="shuo-label"> 批准文号: </view>
          <view class="shuo-cont">
            {{ item.aprvNo }}
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item">
          <view class="shuo-label"> 生产日期: </view>
          <view class="shuo-cont">
            {{ forMatTime(item.manuDate) || "" }}
          </view>
        </view>
        <view class="shuo-item">
          <view class="shuo-label"> 有效日期: </view>
          <view class="shuo-cont">
            {{ forMatTime(item.prodExpy) || "" }}
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item">
          <view class="shuo-label"> 药品分类: </view>
          <view class="shuo-cont">
            {{ item.drugType || "" }}
          </view>
        </view>
        <view class="shuo-item">
          <view class="shuo-label"> 生产方式: </view>
          <view class="shuo-cont">
            {{ item.prodMode || "" }}
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item-name">
          <view class="shuo-label"> 生产企业: </view>
          <view class="shuo-cont">
            {{ item.prodentpName }}
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item-name">
          <view class="shuo-label"> 拒收原因: </view>
          <view class="shuo-cont">
            {{ item.refsRea || "" }}
          </view>
        </view>
      </view>
    </view>
    <view class="botm-btn" v-if="isPending">
      <button type="primary" @click="handleAccept">验收</button>
    </view>

    <!-- 拒收弹窗 -->
    <view v-if="showRefuseDialog" class="refuse-dialog-mask">
      <view class="refuse-dialog">
        <view class="dialog-title">
          拒收
          <span class="dialog-close" @click="closeRefuseDialog">×</span>
        </view>
        <view class="dialog-row">
          <view class="dialog-label">拒收数量</view>
          <input
            class="dialog-input"
            type="number"
            v-model="refuseForm.refsCnt"
            placeholder="请输入"
          />
        </view>
        <view class="dialog-row">
          <view class="dialog-label">拒收原因</view>
          <input class="dialog-input" v-model="refuseForm.refsRea" placeholder="请输入" />
        </view>
        <button class="dialog-btn" @click="confirmRefuse">确认</button>
      </view>
    </view>
  </view>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      listData: [],
      acceptDetaData: {},
      subMitData: {},
      isPending: false,
      showRefuseDialog: false,
      refuseForm: {
        refsCnt: 0,
        refsRea: "",
      },
      currentDrugIndex: null,
    };
  },
  onShow() {},
  mounted() {
    let that = this;
    uni.getStorage({
      key: "detailsData",
      success: function (res) {
        that.acceptDetaData = res.data;
        that.isPending = res.data.delvOrdStas === "C";
        that.getDetail(res.data.stoinOrdId);
      },
    });
  },
  methods: {
    async getDetail(stoinOrdId) {
      if (this.isPending) {
        await this.$http(
          "drugHospital.getDelvDetlList",
          {
            delvOrdId: this.acceptDetaData.delvOrdId,
            purcPlanId: this.acceptDetaData.purcPlanId,
          },
          "加载中"
        ).then((res) => {
          if (res && res.data) {
            this.listData = (res.data || []).map((item) => ({
              ...item,
              shppCnt: item.delvCnt,
            }));
          }
        });
      } else {
        await this.$http("drugHospital.getStoinDetlList", { stoinOrdId }, "加载中").then(
          (res) => {
            if (res && res.data) {
              this.listData = res.data || [];
            }
          }
        );
      }
    },
    handleDetail(data) {
      uni.setStorage({
        key: "detailsDrugId",
        data: {
          ...data,
          isPending: this.isPending,
        },
        success: () => {
          uni.navigateTo({
            url: "/consumablespkg/pages/management/drugDetails/index",
          });
        },
      });
    },
    forMatTime(row) {
      return moment(row).format("YYYY-MM-DD ");
    },
    //日期格式化
    forMatTime(time) {
      return moment(time).format("YYYY-MM-DD");
    },
    //加时分秒
    forMatTimehs(time) {
      return moment(time).format("YYYY-MM-DD ");
    },
    openRefuseDialog(index) {
      this.currentDrugIndex = index;
      this.refuseForm.refsCnt = this.listData[index].refsCnt || 0;
      this.refuseForm.refsRea = this.listData[index].refsRea || "";
      this.showRefuseDialog = true;
    },
    closeRefuseDialog() {
      this.showRefuseDialog = false;
    },
    confirmRefuse() {
      const item = this.listData[this.currentDrugIndex];
      const refuseCnt = Number(this.refuseForm.refsCnt);
      if (refuseCnt > Number(item.delvCnt)) {
        uni.showToast({ title: "拒收数量不能大于配送数量", icon: "none" });
        return;
      }
      this.$set(this.listData, this.currentDrugIndex, {
        ...item,
        refsCnt: refuseCnt,
        refsRea: this.refuseForm.refsRea,
      });
      this.showRefuseDialog = false;
    },
    async handleAccept() {
      const detlList = this.listData.map((item) => ({
        delvCnt: item.delvCnt,
        delvOrdId: item.delvOrdId,
        drugListId: item.drugListId,
        id: item.id,
        lotNum: item.lotNum,
        rfusRea: item.refsRea || "",
        shppCnt: item.delvCnt - (item.refsCnt || 0),
      }));
      uni.showModal({
        title: "确认验收",
        content: "是否确认验收？",
        success: async (res) => {
          if (res.confirm) {
            await this.$http("drugHospital.saveDetlStoIn", { detlList }, "验收中").then(
              (result) => {
                if (result.success === true) {
                  uni.showToast({ title: "验收成功", icon: "success" });
                  setTimeout(() => {
                    uni.navigateBack();
                  }, 1000);
                } else {
                  uni.showToast({ title: result.msg || "验收失败", icon: "none" });
                }
              }
            );
          }
        },
      });
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.query-wrap {
  width: 100%;
  height: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #f1f1f1;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
  padding-bottom: 200rpx;

  .botm-btn {
    width: 100%;
    height: 120rpx;
    background-color: transparent;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    button[type="primary"] {
      width: 80%;
      height: 80rpx;
      background: #5ab7a5;
      color: #fff;
      font-size: 32rpx;
      border: none;
      box-shadow: none;
      text-align: center;
      border-radius: 12rpx;
    }
  }

  .time-view {
    height: 350rpx;
    background-color: #fff;
    padding: 50rpx 50rpx 0 50rpx;
    box-sizing: border-box;

    .btn-view {
      width: 100%;
      height: 100rpx;
      margin-top: 100rpx;
      display: flex;
      justify-content: space-around;
    }
  }
}
.title-text {
  font-size: 32rpx;
  color: #5ab7a5;
  font-weight: bold;
}
.item-stats {
  margin-top: 80rpx;
}
uni-page-body {
  width: 100%;
  height: 100%;
}
.link-text {
  color: #1890ff;
  cursor: pointer;
  text-decoration: underline;
}
.refuse-dialog-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.refuse-dialog {
  background: #fff;
  border-radius: 12px;
  width: 320px;
  padding: 24px 20px 20px 20px;
  box-sizing: border-box;
  position: relative;
}
.dialog-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 18px;
  position: relative;
}
.dialog-close {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 22px;
  cursor: pointer;
}
.dialog-row {
  margin-bottom: 16px;
}
.dialog-label {
  font-size: 14px;
  margin-bottom: 6px;
}
.dialog-input {
  width: 100%;
  height: 36px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 0 8px;
  box-sizing: border-box;
  font-size: 14px;
}
.dialog-btn {
  width: 100%;
  height: 40px;
  background: #5ab7a5;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  margin-top: 10px;
}
</style>