consumoption/consumablespkg/pages/planApproval/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 class="inventory-item">
        <view class="shuo-item-name">
          <view class="shuo-label"> 单据编号: </view>
          <view class="shuo-unit">
            {{ acceptDetaData.id }}
          </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.purcCntSum || "" }}
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item">
          <view class="shuo-label"> 采购总额: </view>
          <view class="shuo-cont">
            {{ acceptDetaData.purcAmt || "" }}
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item-name">
          <view class="shuo-label"> 来源机构: </view>
          <view class="shuo-cont">
            {{ acceptDetaData.orgName }}
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item-name">
          <view class="shuo-label"> 采购时间: </view>
          <view class="shuo-cont">
            {{ acceptDetaData.docmkDate }}
          </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">
      <view class="item-stats">
        <span v-if="item.stas == 'A'">未受理</span>
        <span v-if="item.stas == 'B'">已受理</span>
        <span v-if="item.stas == 'R'">被驳回</span>
        <span v-if="item.stas == 'DB'">部分出库</span>
        <span v-if="item.stas == 'DC'">已出库</span>
        <span v-if="item.stas == 'DQ'">部分验收</span>
        <span v-if="item.stas == 'DR'">已验收</span>
        <span v-if="item.stas == 'Y'">已入库</span>
      </view>
      <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-name">
          <view class="shuo-label-podnme"> 药品编码: </view>
          <view class="shuo-cont">
            <span>{{ item.drugListId }}</span>
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item-name">
          <view class="shuo-label-podnme"> 医保编码: </view>
          <view class="shuo-cont">
            <span>{{ item.natDrugNo }}</span>
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item-name">
          <view class="shuo-label"> 药品规格: </view>
          <view class="shuo-cont">
            {{
              "【" +
              item.specName +
              "*" +
              item.convrat +
              item.pac +
              "/" +
              item.pacUnt +
              "】"
            }}
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item">
          <view class="shuo-label"> 采购数量: </view>
          <view class="shuo-cont">
            {{ item.purcCnt || "" }}
          </view>
        </view>
        <view class="shuo-item">
          <view class="shuo-label"> 采购金额: </view>
          <view class="shuo-cont">
            {{ item.purcAmt }}
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item">
          <view class="shuo-label"> 药品剂型: </view>
          <view class="shuo-cont">
            {{ item.dosformName }}
          </view>
        </view>
        <view class="shuo-item">
          <view class="shuo-label"> 单价: </view>
          <view class="shuo-cont">
            {{ item.purcPric || "" }}
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item-name">
          <view class="shuo-label-podnme"> 批准文号: </view>
          <view class="shuo-cont">
            <span>{{ item.aprvNo || "" }}</span>
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item-name">
          <view class="shuo-label-podnme"> 生产企业: </view>
          <view class="shuo-cont">
            <span>{{ item.prodentpName }}</span>
          </view>
        </view>
      </view>
      <view class="inventory-item">
        <view class="shuo-item-name">
          <view class="shuo-label-podnme"> 配送企业: </view>
          <view class="shuo-cont">
            <span>{{ item.splerName }}</span>
          </view>
        </view>
      </view>
    </view>
    <view class="botm-btn" v-if="acceptDetaData.stas === '0'">
      <button class="btn-confirm" @click="handleConfirm">确认</button>
      <button class="btn-reject" @click="showRejectPopup">退回</button>
    </view>
    <uni-popup ref="rejectPopup" type="center">
      <transition name="fade">
        <view v-if="showPopup" class="reject-popup">
          <view class="popup-title">请输入退回原因</view>
          <textarea
            v-model="rejectReason"
            class="popup-textarea"
            placeholder="请输入退回原因"
          />
          <view class="popup-btns">
            <button class="btn-cancel" @click="closeRejectPopup">取消</button>
            <button class="btn-reject-mini" @click="confirmReject">退回</button>
          </view>
        </view>
      </transition>
    </uni-popup>
  </view>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      listData: [],
      acceptDetaData: {},
      subMitData: {},
      rejectReason: "",
      showPopup: false,
    };
  },
  onShow() {
    let that = this;
    uni.getStorage({
      key: "planApprovalDetail",
      success: function (res) {
        that.acceptDetaData = res.data;
        that.getDetail(res.data.id);
      },
    });
  },
  methods: {
    async getDetail(id) {
      await this.$http("drugHospital.getApprDetlList", { id }, "加载中").then((res) => {
        if (res && res.data) {
          this.listData = res.data || [];
        }
      });
    },
    handleConfirm() {
      uni.showModal({
        title: "提示",
        content: "确定要确认吗？",
        success: (res) => {
          if (res.confirm) {
            const params = {
              apprStas: "Y",
              apprType: "plan",
              planApprDetls: this.listData.map((item) => ({
                detlId: item.detlId,
                drugListId: item.drugListId,
                orgId: item.orgId,
                planId: item.planId,
                splerId: item.splerId,
                splerIdCurr: item.splerIdCurr,
              })),
              reason: "",
            };
            this.$http("drugHospital.apprPurcPlan", params, "处理中").then(() => {
              uni.showToast({ title: "确认成功", icon: "success" });
              uni.navigateBack();
            });
          }
        },
      });
    },
    showRejectPopup() {
      this.rejectReason = "";
      this.showPopup = true;
      this.$refs.rejectPopup.open();
    },
    closeRejectPopup() {
      this.showPopup = false;
      this.$refs.rejectPopup.close();
    },
    confirmReject() {
      if (!this.rejectReason) {
        uni.showToast({ title: "请填写退回原因", icon: "none" });
        return;
      }
      uni.showModal({
        title: "提示",
        content: "确定要退回吗？",
        success: (res) => {
          if (res.confirm) {
            this.handleReject();
          }
        },
      });
    },
    handleReject() {
      const params = {
        apprStas: "R",
        apprType: "plan",
        planApprDetls: this.listData.map((item) => ({
          detlId: item.detlId,
          drugListId: item.drugListId,
          orgId: item.orgId,
          planId: item.planId,
          splerId: item.splerId,
          splerIdCurr: item.splerIdCurr,
        })),
        reason: this.rejectReason,
      };
      this.$http("drugHospital.apprPurcPlan", params, "处理中").then(() => {
        uni.showToast({ title: "退回成功", icon: "success" });
        this.closeRejectPopup();
        uni.navigateBack();
      });
    },
  },
};
</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: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    padding-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .btn-confirm {
    width: 200rpx;
    height: 80rpx;
    background: #5ab7a5;
    color: #fff;
    font-size: 32rpx;
    border: none;
    border-radius: 8rpx;
    font-weight: bold;
    margin-right: 20rpx;
  }

  .btn-reject {
    width: 200rpx;
    height: 80rpx;
    background: #e74c3c;
    color: #fff;
    font-size: 32rpx;
    border: none;
    border-radius: 8rpx;
    font-weight: bold;
  }
  .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%;
}
.reject-popup {
  padding: 40rpx;
  width: 500rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.popup-title {
  font-size: 32rpx;
  margin-bottom: 20rpx;
  color: #333;
  font-weight: bold;
  text-align: left;
}
.popup-textarea {
  width: 100%;
  height: 120rpx;
  border: 1rpx solid #eee;
  padding: 10rpx;
  font-size: 28rpx;
  border-radius: 8rpx;
  resize: none;
  margin-bottom: 20rpx;
}
.popup-btns {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
}
.btn-cancel {
  width: 120rpx;
  height: 60rpx;
  background: #eee;
  color: #333;
  font-size: 28rpx;
  border: none;
  border-radius: 8rpx;
}
.btn-reject-mini {
  width: 140rpx;
  height: 60rpx;
  background: #e74c3c;
  color: #fff;
  font-size: 28rpx;
  border: none;
  border-radius: 8rpx;
  font-weight: bold;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: scale(0.95);
}
</style>