zjugis_OA/client_h5/src/components/flowForm.vue

<template>
  <div class="flow_form_box">
    <div class="flow_container">
      <template v-if="isShowTab">
        <van-tabs v-model:active="currentActive" :sticky="true">
          <van-tab title="基础信息">
            <slot></slot>
          </van-tab>
          <van-tab title="审批意见">
            <div class="flowOpinionBox">
              <template v-if="templateOpinion.length > 0">
                <div v-for="(item,index) in templateOpinion" :key="index" :class="{'flowOpinionItem': true, 'disabled': !item['isEditor']}">
                  <h4>{{ item['opinionName'] }}</h4>
                  <div class="content">
                    <template v-if="item['isEditor']">
                      <van-field
                      v-model="currentOpinion.opinionContent"
                      rows="3"
                      autosize
                      label=""
                      type="textarea"
                      maxlength="50"
                      placeholder="请输入留言"
                    />
                  </template>
                  <template v-else>
                      <van-field
                      v-model="item.opinionContent"
                      rows="3"
                      autosize
                      label=""
                      type="textarea"
                      :disabled="true"
                      maxlength="50"
                      placeholder="请输入留言"
                    />
                  </template>
                  </div>
                  <div class="footer">
                    <p>
                      <span>办理人：</span>
                      <span v-if="item['isEditor']">
                        <template v-if="currentOpinion['sign'] && currentOpinion['sign'].indexOf('http') !== -1">
                          <img class="signImg" :src="currentOpinion['sign']" />
                        </template>
                        <template v-else>
                          {{ currentOpinion['sign'] ?? currentUserName }}
                        </template>
                      </span>
                      <span v-else>
                        <template v-if="item['sign'] && item['sign'].indexOf('http') !== -1">
                          <img class="signImg" :src="item['sign']" />
                        </template>
                        <template v-else>
                          {{ item['sign'] ??  userMap[item['userId'] ]}}
                        </template>
                      </span>
                    </p>
                    <p>
                      <span>办理时间：</span>
                      <span>{{ item['isEditor'] ? currentOpinion['opinionTime'] : item['opinionTime']}}</span>
                    </p>
                  </div>
                </div>
              </template>
            </div>
          </van-tab>
        </van-tabs>
      </template>
      <template v-else>
        <slot></slot>
      </template>
    </div>
    <div class="fixed-btn" v-if="isSubmitVisabled">
      <van-button :disabled="isSubmitDisabled" round block type="primary" @click="submitHandle">
          转件
      </van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { showNotify } from 'vant';
import { closePage } from 'dingtalk-jsapi';
import { getSimpleUserMap } from '@/service/user'
import PubsubService from "@/utils/PubsubService";
import { formatDate, jsonToFormData } from "@/utils/common";
import { FlowDTO, getNextActivity } from "@/service/flow";
import { getTemplateOpinionListByFlowInstanceId, getOpinionListByFlowInstanceId } from '@/service/flow';

defineOptions({
  name: 'FlowForm'
})
const isSubmitVisabled = ref<boolean>(true)
const isSubmitDisabled = ref<boolean>(false)
const userInfo = JSON.parse(localStorage.getItem('_userInfo') as string);
const signatureUrl: string = userInfo ? userInfo['signatureUrl'] ?? '' : ''
const currentUserName: string = userInfo ? userInfo['nickname'] ?? '' : ''

const userMap = ref<any>({})
async function initSimpleUserMap() {
  userMap.value = await getSimpleUserMap()
}
initSimpleUserMap()

defineProps<{
  data: any
}>();
const emit = defineEmits<{
  (e: 'submit', payload?: any):void
}>()
const route = useRoute();
const currentActive = ref<string>('基础信息')
const { flowInstanceId, activityInstanceId, participant, _o, _top } = route.query as {
  flowInstanceId: string
  activityInstanceId: string
  participant: string
  _o: string
  _top: string
}
if (_o && _o == 'v') {
  isSubmitVisabled.value = false
}
const currentOpinion = ref({
  id: '',
  opinionContent: '',
  opinionTime: '',
  sign: ''
})
const isShowTab = ref<boolean>(true)
const templateOpinion = ref<any[]>([])  //用来缓存展示节点

const initTemplateOptinionFunc = async () => {
  const templateOpinions = [];
  const tResult = await getTemplateOpinionListByFlowInstanceId(flowInstanceId);
  const tList = tResult.data ?? []
  const oResult = await getOpinionListByFlowInstanceId(flowInstanceId);
  const oList = oResult.data ?? []
  if (oList.length === 0) {
    isShowTab.value = false;
  }
  for (let j = 0; j < oList.length; j++) { 
    const oItem = oList[j]
    if (oItem['status'] == '40') {
      oList.splice(j, 1);
      j--;
      continue;
    }
    const tItems = tList.filter((item: any) => {
      return item['id'] === oItem['flowOpinionId']
    })
    if (tItems.length > 0) {
      const tItem = tItems[0]
      if (_o !== 'v' && oItem['activityInstanceId'] === activityInstanceId && oItem['participantId'] === participant) {
        oItem['isEditor'] = true;
        currentOpinion.value.id = oItem['id']
        currentOpinion.value.opinionContent = oItem['opinionContent'] ?? '同意'
        currentOpinion.value.opinionTime = formatDate(new Date())
        currentOpinion.value.sign = signatureUrl ? signatureUrl : null;
      }
      oItem['opinionTime'] = oItem['opinionTime'] ? formatDate(new Date(oItem['opinionTime'])) : ''
      if (tItem['iHideNonFilledComment'] == 1 && !oItem['opinionContent'] && oItem['activityInstanceId'] !== activityInstanceId) continue;
      templateOpinions.push({
        opinionName: tItem['opinionName'],
        opinionUserText: tItem['opinionUserText'],
        opinionTimeText: tItem['opinionTimeText'],
        ...oItem
      })
    }
  }
  templateOpinions.sort((a, b) => {
    return a.isEditor === b.isEditor ? 0 : a.isEditor ? -1 : 1
  })
  templateOpinion.value = templateOpinions;
}
initTemplateOptinionFunc();

const activityData: FlowDTO = {
  activityInstanceId,
  participantId: participant,
  flowOpinion: "",
};
const router = useRouter();
const submitHandle = async (): Promise<any> => {
  emit('submit', async () => {
    isSubmitDisabled.value = true;
    //工作流转件
    activityData.activityInstanceId = activityInstanceId;
    activityData.participantId = participant;
    activityData.flowOpinion = JSON.stringify(currentOpinion.value);
    const result = await getNextActivity(jsonToFormData(activityData) as FormData);
    if (result) {
      //@ts-ignore
      if (result.error_code) {
        showNotify({
          type: 'danger',
          //@ts-ignore
          message: result.msg,
          position: 'top',
          onClose() {
            isSubmitDisabled.value = false;
          }
        });
      } else {
        showNotify({
          type: 'primary',
          message: '转件成功',
          position: 'top',
          onClose() {
            isSubmitDisabled.value = false;
            PubsubService.publish('clear_keep_alive')
            if (_top == '1') {
              closePage({})
            } else {
              router.back();
            }
          }
        });
      }
    }
    return result;
  });
}
</script>

<style scoped lang="scss">
.flow_form_box {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
  >.flow_container {
    flex-grow: 1;
    height: 0px;
    overflow-y: scroll;
  }
  >.fixed-btn {
    padding: 10px 20px;
  }
  .flowOpinionBox {
    margin: 10px;
    >.flowOpinionItem {
      margin-bottom: 15px;
      background-color: #fff;
      padding: 10px 0px;
      &.disabled {
        >h4 {
          color: #999;
        }
        
        >.footer {
          > p {
            color: #999;
          }
        }
      }
      >h4 {
        font-size: 17px;
        margin: 0px;
        padding: 0px 16px;
      }
      >.content {
        :deep(.van-field__value) {
          border: 1px solid #ececec;
          border-radius: 5px;
          padding: 10px
        }
      }
      >.footer {
        display: flex;
        align-items: center;
        padding: 0px 16px;
        >p {
          margin: 0px;
          flex: 1;
          white-space: nowrap;
          color: #333;
          >span {
            display: inline-block;
            &:first-child {
              margin-right: 5px;
            }
          }
          .signImg {
            height: 30px;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>