123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285 |
- <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'] }}
- </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'] }}
- </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 { 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 userId: string = userInfo ? userInfo['id'] ?? '' : ''
- const signatureUrl: string = userInfo ? userInfo['signatureUrl'] ?? '' : ''
- const currentUserName: string = userInfo ? userInfo['nickname'] ?? '' : ''
- 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[]>([]) //用来缓存展示节点
- getTemplateOpinionListByFlowInstanceId(flowInstanceId).then((tResult) => {
- let tList = tResult.data ?? []
- getOpinionListByFlowInstanceId(flowInstanceId).then((oResult) => {
- const oList = oResult.data ?? []
- if(oList.length === 0){
- isShowTab.value = false;
- }
- if (oList.length > 0) {
- for (let i = 0; i < tList.length; i++) {
- const tItem = tList[i];
- if (tItem['iDisplayOpinion'] === 0) {
- tList.splice(i, 1)
- i--;
- continue;
- }
- tItem['opinions'] = []
- for (let j = 0; j < oList.length; j++) {
- const oItem = oList[j]
- if (oItem['status'] == '40') {
- oList.splice(j, 1);
- j--;
- continue;
- }
- if (tItem['id'] === oItem['flowOpinionId']) {
- 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 : currentUserName;
- }
- oItem['opinionTime'] = oItem['opinionTime'] ? formatDate(new Date(oItem['opinionTime'])) : ''
- if (tItem['iHideNonFilledComment'] == 1 && !oItem['opinionContent'] && oItem['activityInstanceId'] !== activityInstanceId) continue;
- templateOpinion.value.push({
- opinionName: tItem['opinionName'],
- opinionUserText: tItem['opinionUserText'],
- opinionTimeText: tItem['opinionTimeText'],
- ...oItem
- })
- continue
- }
- }
- }
- }
- })
- })
- 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;
- 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>
|