mky-vent-base/src/views/vent/performance/comment/HistorySp.vue

<template>
  <div class="HistorySp">
    <div class="btn-box" v-if="isShow">
      <a-button type="primary" style="margin-right: 10px" @click="getPass">通过</a-button>
      <a-button type="plain" @click="getReject">驳回</a-button>
    </div>
    <div class="top-box">
      <div class="box-title">流程审批进度历史</div>
      <div class="box-content">
        <a-table size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 730 }" :pagination="pagination" />
      </div>
    </div>
    <div class="bottom-box">
      <div class="box-title">实时流程图</div>
      <div class="box-content">
        <img :src="imgSrcs" alt="" @error="showerrimg" />
      </div>
    </div>
    <!-- 审批通过弹窗 -->
    <a-modal v-model:visible="visibleTg" centered :width="600" title="审批通过" @ok="handleTgOk" @cancel="handleTgCancel">
      <a-textarea
        v-model:value="passDes"
        placeholder="请输入通过原因..."
        :rows="4"
        style="width: 96%; margin: 10px; background-color: transparent; color: #fff"
      />
    </a-modal>
    <!-- 审批驳回弹窗 -->
    <a-modal v-model:visible="visibleBh" centered :width="600" title="审批驳回" @ok="handleBhOk" @cancel="handleBhCancel">
      <a-textarea
        v-model:value="rejectDes"
        placeholder="请输入驳回原因..."
        :rows="4"
        style="width: 96%; margin: 10px; background-color: transparent; color: #fff"
      />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, defineProps, watch } from 'vue';
  import { columns } from './comment.data';
  import { pass, back } from './comment.api';
  import { message } from 'ant-design-vue';
  import errorImg from '../../../../assets/images/errorImg.png';
  let props = defineProps({
    historySpList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    imgSrc: {
      type: String,
      default: '',
    },
    isShow: {
      type: Boolean,
      default: true,
    },
    spInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  //数据列表
  let dataSource = ref<any[]>([]);
  //分页参数配置
  let pagination = reactive({
    current: 1, // 当前页码
    pageSize: 10, // 每页显示条数
    total: 0, // 总条目数，后端返回
    // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
    showSizeChanger: true, // 是否可改变每页显示条数
    pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
  });

  //审批通过驳回参数信息
  let spInfos = reactive({
    id: '',
    priority: '',
    procInstId: '',
  });
  //审批通过
  let visibleTg = ref(false);
  let passDes = ref('');
  //审批驳回
  let visibleBh = ref(false);
  let rejectDes = ref('');

  let imgSrcs = ref('');

  let emit = defineEmits(['spClose']);

  function showerrimg() {
    imgSrcs.value = errorImg;
  }

  //审批通过
  function getPass() {
    visibleTg.value = true;
  }
  //审批通过-确认
  async function handleTgOk() {
    let res = await pass({
      comment: passDes.value,
      id: spInfos.id,
      priority: spInfos.priority,
      procInstId: spInfos.procInstId,
      sendEmail: false,
      sendMessage: true,
      sendSms: false,
    });
    visibleTg.value = false;
    emit('spClose');
    message.warning(res.message || res);
  }
  //审批通过-取消
  function handleTgCancel() {
    passDes.value = '';
    visibleTg.value = false;
  }
  //审批驳回
  function getReject() {
    visibleBh.value = true;
  }
  //确定驳回
  async function handleBhOk() {
    let res = await back({
      comment: rejectDes.value,
      id: spInfos.id,
      procInstId: spInfos.procInstId,
      sendEmail: false,
      sendMessage: true,
      sendSms: false,
    });
    visibleBh.value = false;
    emit('spClose');
    message.warning(res.message || res);
  }
  //取消驳回
  function handleBhCancel() {
    rejectDes.value = '';
    visibleBh.value = false;
  }
  watch(
    () => props.historySpList,
    (newV, oldV) => {
      if (newV.length != 0) {
        dataSource.value = newV;
      }
    },
    {
      immediate: true,
      deep: true,
    }
  );
  watch(
    () => props.spInfo,
    (newV, oldV) => {
      spInfos.id = newV.id;
      spInfos.priority = newV.priority;
      spInfos.procInstId = newV.procInstId;
    },
    {immediate:true, deep: true }
  );

  watch(
    () => props.imgSrc,
    (newV, oldV) => {
      imgSrcs.value = newV;
    },
    { immediate: true, deep: true }
  );
</script>

<style lang="less" scoped>
  .HistorySp {
    position: relative;
    width: 100%;
    height: 100%;

    .btn-box {
      width: 98%;
      padding: 15px 11px 0px 11px;
      box-sizing: border-box;
    }

    .top-box {
      width: 98%;
      height: 400px;
      margin: 15px auto;
      box-shadow: 0 0 20px rgba(68, 180, 255, 0.2) inset;
      border-radius: 2px;
      border: 1px solid rgba(68, 211, 255, 0.4392156863) !important;
      padding: 10px;
      box-sizing: border-box;

      .box-content {
        height: calc(100% - 30px);
      }
    }

    .bottom-box {
      width: 98%;
      height: 200px;
      margin: 15px auto;
      box-shadow: 0 0 20px rgba(68, 180, 255, 0.2) inset;
      border-radius: 2px;
      border: 1px solid rgba(68, 211, 255, 0.4392156863) !important;
      padding: 10px;
      box-sizing: border-box;

      .box-content {
        position: relative;
        height: calc(100% - 30px);

        img {
          width: 408px;
          height: 95px;
          position: absolute;
          left: 50%;
          top: 26px;
          transform: translate(-56%, 0);
        }
      }
    }

    .box-title {
      font-size: 14px;
      height: 30px;
      line-height: 30px;
      color: #fff;
    }
  }

  .zxm-modal .zxm-modal-body {
    padding: 15px !important;
    box-sizing: border-box;
  }
</style>