entityControl_mobile/pagesMine/auditDetail.vue

<template>
  <view class="container">

    <view v-show="detailData.billType == 0"><text>入库类型</text>：{{ detailData.rkTypeName }}</view>
    <view v-show="detailData.billType == 1"><text>出库类型</text>：{{ detailData.ckTypeName }}</view>
    <view><text>所属仓库：</text>{{ detailData.cangkuName }}</view>
    <view><text>物资类型：</text>{{ detailData.wlTypeName }}</view>
    <view><text>理货员：</text>{{ detailData.lihuoYName }}</view>
    <view><text>入库时间：</text>{{ parseTime(detailData.createTime) }}</view>
    <view class="box">
      <view v-for="item in detailData.scenePhotos" class="item">
        <view><text>项目描述：</text>{{ item.xmMs }}</view>
        <view><text>供应商：</text>{{ item.gysMc }}</view>
        <view><text>物料号：</text>{{ item.wlNo }}</view>
        <view><text>物料描述：</text>{{ item.wlMs }}</view>
        <view><text>数量：</text>{{ item.realQty }}{{ item.dw }}</view>
        <view><text>项目定义号：</text>{{ item.xmNo }}</view>
        <view><text>存放位置：</text>{{ item.pcode || "-" }}</view>
        <!-- <view><text>身份码：</text>{{ item.entityId || "-" }}</view> -->
        <view><text>备注：</text>{{ item.rkRemark || "-" }}</view>
        <view><text>现场照片：</text><uv-image height="80" mode="heightFix" @tap="previewImage(item.signUrl)" :src="item.signUrl"></uv-image></view>
      </view>
    </view>
      
    <view class="btn">
      <uv-button type="error" text="确定" size="large" style="width: 48%;" @tap="openModal(0)">驳 回</uv-button>
      <uv-button type="primary" text="确定" size="large" class="mainBtn" style="width: 48%;" @tap="openModal(1)">同 意</uv-button>
    </view>



    <uv-modal ref="auditModalRef" title="审批信息" @confirm="auditConfirm" :showCancelButton="true" :closeOnClickOverlay="false" asyncClose>
      <view class="slot-content" style="width: 100%;">
				<uv-form labelPosition="top" :model="auditForm" labelWidth="80" :rules="auditRules" ref="auditFormRef">
          <uv-form-item label="签字" prop="approverSignUrl" borderBottom v-if="auditStatus == 1">
            <uv-button text="去签名" v-if="!auditForm.approverSignUrl" @tap="goSign"></uv-button>
            <uv-image height="80" mode="heightFix" v-if="auditForm.approverSignUrl" @tap="previewImage(auditForm.approverSignUrl)" :src="auditForm.approverSignUrl"></uv-image>
          </uv-form-item>
          <uv-form-item label="备注" prop="remark" borderBottom>
            <uv-textarea v-model="auditForm.remark" placeholder="备注" />
          </uv-form-item>
        </uv-form>
			</view>
    </uv-modal>


  </view>
</template>

<script setup>
import { ref, computed, getCurrentInstance, onUnmounted } from "vue";
import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
import { passedAudit } from "@/api/mine"

const instance = getCurrentInstance().proxy

const detailData = ref({})
onLoad(() => {
  const eventChannel = instance.getOpenerEventChannel();
  // 监听redactInfo事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('auditInfo', function(data) {
    detailData.value = data.info
    console.log("获取到信息", data.info)
  });
})

// 预览
const previewImage = (img) => {
  let arr = []
  arr.push(img)
  uni.previewImage({
    urls: arr,
  })
}


const auditModalRef = ref(null)
const auditFormRef = ref(null)
const auditStatus = ref(0)
const openModal = (status) => {
  auditForm.value.approverSignUrl = ""
  auditForm.value.remark = ""
  auditStatus.value = status
  auditModalRef.value.open();
}
const auditForm = ref({
  approverSignUrl: "",
  remark: '',
})
const auditRules = computed(() => ({
  'approverSignUrl': {
    type: 'string',
    required: auditStatus.value == 1,
    message: '请手写签字',
    trigger: ['blur', 'change']
  },
  'remark': {
    type: 'string',
    required: auditStatus.value == 0,
    message: '请填写备注',
    trigger: ['blur', 'change']
  },
}));

// 去签名页面
const goSign = () => {
  // 移除之前的事件监听器避免重复
  uni.$off('getSignImg')

  uni.navigateTo({
    url: '/pagesMine/signature',
    success: () => {
      // 监听签名返回事件
      const eventHandler = (e) => {
        console.log('getSignImg', e)
        // signBase64.value = e.base64
        // signTempimg.value = e.path
        auditForm.value.approverSignUrl = e.url
      }
      
      // 监听一次自定义事件
      uni.$once('getSignImg', eventHandler)
      
      // 页面卸载时移除监听（避免内存泄漏）
      // uni.$off('getSignImg', eventHandler)
    }
  })
}

const auditConfirm = () => {
  auditFormRef.value.validate().then(res => {
    let obj = {
      billNo: detailData.value.billNo,
      id: detailData.value.id,
      rkId: detailData.value.rkId,
      remark: auditForm.value.remark,
      auditResult: auditStatus.value,
    }
    if (auditStatus.value == 1) {
      obj.approverSignUrl = auditForm.value.approverSignUrl
    }
    passedAudit(obj).then(res => {
      auditModalRef.value.close()
      uni.showToast({
        title: res.msg,
        icon: 'none',
        mask: true,
        dution: 2000
      })
      setTimeout(() => {
        uni.navigateBack({})
      }, 2000)
    })
  }).catch(errors => {
    auditModalRef.value.closeLoading()
  })
}

// 组件卸载时移除事件监听器
onUnmounted(() => {
  console.log("协助")
  uni.$off('getSignImg')
})

</script>

<style scoped lang="scss">
.container {
  position: relative;
  padding: 32rpx;
  padding-bottom: 120rpx;
  line-height: 50rpx;
  font-size: 28rpx;
  border-radius: 8rpx;
  color: #333;
  
  text{
    color: #666;
  }
  .box{
    .item {
      background: #efefef;
      padding: 20rpx;
      margin-top: 20rpx;
      .title {
        font-size: 32rpx;
        font-weight: bold;
        display: flex;
        align-items: center;
      }
    }
  }
  .btn{
    position: fixed;
    width: calc(100vw - 64rpx);
    bottom: 0;
    left: 32rpx;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  ::v-deep .uv-input__content{
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>