zjugis_OA/client_h5/src/components/flowForm.vue

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

<script setup lang="ts">
import { formatDate } from "@/utils/common";
import { getTemplateOpinionListByFlowInstanceId, getOpinionListByFlowInstanceId } from '@/service/flow';

defineOptions({
  name: 'FlowForm'
})
const userInfo = JSON.parse(localStorage.getItem('_userInfo') as string);
const currentUserName = userInfo ? userInfo['nickname'] ?? '' : ''
defineProps<{
  data: any
}>();
const emit = defineEmits<{
  (e: 'submit', payload?: any):void
}>()
const route = useRoute();
const tabs = ref<{
  title: string
}[]>([{}])
const currentActive = ref<string>('基础信息')
const { flowInstanceId, activityInstanceId } = route.query as {
  flowInstanceId: string
  activityInstanceId: string
}
const currentOpinion = ref({
  id: '',
  opinionContent: '',
  opinionTime: '',
  sign: null
})
const templateOpinions = ref<any[]>([]);
getTemplateOpinionListByFlowInstanceId(flowInstanceId).then((tResult) => {
  const tList = tResult.data ?? []
  getOpinionListByFlowInstanceId(flowInstanceId).then((oResult) => {
    const oList = oResult.data ?? []
    if (oList.length > 0) { 
      tList.forEach((tItem: any) => {
        tItem['opinions'] = []
        for (let i = 0; i < oList.length; i++) { 
          const oItem = oList[i]
          if (tItem['id'] === oItem['flowOpinionId']) {
            if (oItem['activityInstanceId'] === activityInstanceId) {
              oItem['isEditor'] = true;
              currentOpinion.value.id = oItem['id']
              currentOpinion.value.opinionContent = oItem['opinionContent']
              currentOpinion.value.opinionTime = formatDate(new Date())
              if (oItem['sign']) {
                currentOpinion.value.sign = oItem['sign']
              }
            }
            tItem['opinions'].push(oItem);
            oList.splice(i, 1)
            i--;
          }
        }
      })
    }
    templateOpinions.value = tList
  })
})
const submitHandle = () => {
  emit('submit', currentOpinion.value);
}

</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;
      >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;
        padding: 0px 16px;
        >p {
          margin: 0px;
          flex: 1;
          white-space: nowrap;
          >span {
            color: #333;
            &:first-child {
              display: inline-block;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
}
</style>