pms-app/pages/message/detail/index.vue

<template>
  <view class="page">
    <view class="flex-col item" style="overflow: auto; height: 100%">
      <view class="item-process-id">
        {{ $t('message.processId') + data.processInstance?.id }}
      </view>
      <uni-row class="flex-row flex-wrap item-content">
        <uni-col :span="7">{{ $t('message.startUser') }}</uni-col>
        <uni-col :span="17">{{ data.processInstance?.startUser?.nickname }}</uni-col>
        <uni-col :span="7" class="mt-15">{{ $t('message.deviceName') }}</uni-col>
        <uni-col :span="17" class="mt-15">{{ faultInfo?.deviceName }}</uni-col>
        <template v-if="processId.startsWith('GZ')">
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.name') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ faultInfo?.failureName }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.system') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ faultInfo?.failureSystem }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.ifDeal') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ getYesOrNo(faultInfo?.ifDeal) }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.status') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ getFaultStatusName(faultInfo?.status) }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.ifStop') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ getYesOrNo(faultInfo?.ifStop) }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.failureTime') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ formatDate(faultInfo?.failureTime) }}</uni-col>
          <uni-col v-if="faultInfo?.ifDeal" :span="7" class="mt-15">{{ $t('approval.fault.dealTime') }}</uni-col>
          <uni-col v-if="faultInfo?.ifDeal" :span="17" class="mt-15">{{ formatDate(faultInfo?.dealTime) }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.needHelp') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ getYesOrNo(faultInfo?.needHelp) }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.failureInfluence') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ faultInfo?.failureInfluence }}</uni-col>
          <uni-col v-if="faultInfo?.ifDeal" :span="7" class="mt-15">{{ $t('approval.fault.solution') }}</uni-col>
          <uni-col v-if="faultInfo?.ifDeal" :span="17" class="mt-15">{{ faultInfo?.solution }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.description') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ faultInfo?.description }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.remark') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ faultInfo?.remark }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.pic') }}</uni-col>
          <uni-col :span="17" class="mt-15">
            <image :src="faultInfo?.pic" style="width: 50px; height: 50px" @click="previewImage(faultInfo?.pic)" />
          </uni-col>
        </template>
        <template v-else>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.status') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ getFaultStatusName(faultInfo?.status) }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.maintain.type') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ getRepairTypeName(faultInfo?.type) }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.ifStop') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ getYesOrNo(faultInfo?.ifStop) }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.maintain.startTime') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ formatDate(faultInfo?.maintainStartTime) }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.maintain.endTime') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ formatDate(faultInfo?.maintainEndTime) }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.maintain.person') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ faultInfo?.nickname }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.failureTime') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ formatDate(faultInfo?.failureTime) }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.failureInfluence') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ faultInfo?.failureInfluence }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.system') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ faultInfo?.failureSystem }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.maintain.maintainFee') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ faultInfo?.maintainFee }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.description') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ faultInfo?.description }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.maintain.desc') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ faultInfo?.maintainDescription }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.solution') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ faultInfo?.solution }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.remark') }}</uni-col>
          <uni-col :span="17" class="mt-15">{{ faultInfo?.remark }}</uni-col>
          <uni-col :span="7" class="mt-15">{{ $t('approval.fault.pic') }}</uni-col>
          <uni-col :span="17" class="mt-15">
            <image :src="faultInfo?.pic" style="width: 50px; height: 50px" @click="previewImage(faultInfo?.pic)" />
          </uni-col>
        </template>
        <uni-col :span="24" class="mt-15 flex-row flex-wrap justify-end">
          <view v-for="(button, index) of buttonList">
            <button
              v-if="button.enable"
              class="fill-button"
              style="margin-left: 10px; margin-top: 10px"
              @click="onButtonClick(index, button.displayName)"
            >
              {{ button.displayName }}
            </button>
          </view>
<!--          <view v-if="buttonList && buttonList.length === 0">-->
<!--            <button-->
<!--              class="fill-button"-->
<!--              style="margin-left: 10px; margin-top: 10px"-->
<!--              @click="onButtonClick('7', $t('operation.cancel'))"-->
<!--            >-->
<!--            {{ $t('operation.cancel') }}-->
<!--            </button>-->
<!--          </view>-->
        </uni-col>
      </uni-row>
    </view>
    <uni-popup ref="dispatchUserPopup" type="bottom" background-color="white" border-radius="6px 6px 0 0">
      <view class="popup">
        <uni-forms ref="formRef" :model="form" :rules="rules" label-width="100px">
          <uni-forms-item v-if="['1', '3', '4'].includes(clickedButtonIndex)" :label="userFormItemLabel" name="assigneeUserId" required>
            <next-data-select
              v-model="form.assigneeUserId"
              :options="userList"
              filterable
              themeColor="#004098"
            />
          </uni-forms-item>
          <uni-forms-item v-if="clickedButtonIndex === '5'" :label="userFormItemLabel" name="userIds" required>
            <next-data-select
                v-model="form.userIds"
                :options="userList"
                :collapseTagsNum="2"
                multiple
                filterable
                themeColor="#004098"
            />
          </uni-forms-item>
          <uni-forms-item v-if="clickedButtonIndex === '1'" :label="$t('message.repairType')" name="type" required>
            <next-data-select
              v-model="form.type"
              :options="repairTypeList"
              format="{label}"
              field="value as value, label as text, label as label"
            />
          </uni-forms-item>
          <uni-forms-item v-if="clickedButtonIndex !== '7'" :label="$t('message.reason')" name="reason" :required="['3', '4', '5'].includes(clickedButtonIndex)">
            <uni-easyinput v-model="form.reason" type="textarea" />
          </uni-forms-item>
          <uni-forms-item v-if="clickedButtonIndex === '7'" :label="$t('message.reason1')" name="reason" required>
            <uni-easyinput v-model="form.reason" :placeholder="$t('message.cancelHint')" type="textarea" />
          </uni-forms-item>
        </uni-forms>
        <uni-row class="flex-row justify-center">
          <button v-if="clickedButtonIndex !== '5'" class="fill-button" style="margin-right: 10px" @click="handleClick">
            {{ clickedButtonIndex !== '7' ? clickedButtonText : $t('operation.confirm1') }}
          </button>
          <button v-if="clickedButtonIndex === '5'" class="fill-button" style="margin-right: 10px" @click="handleClick('before')">
            {{ $t('message.form.beforeSign') }}
          </button>
          <button v-if="clickedButtonIndex === '5'" class="fill-button" style="margin-right: 10px" @click="handleClick('after')">
            {{ $t('message.form.afterSign') }}
          </button>
          <button class="outline-button" plain="true" @click="cancel">{{ $t('operation.cancel') }}</button>
        </uni-row>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { computed, getCurrentInstance, reactive, ref } from "vue"
import { onLoad } from '@dcloudio/uni-app'
import {
  approvalTask, cancelTask,
  createSignTask,
  delegateTask,
  getApprovalDetail,
  rejectTask,
  returnTask,
  transferTask
} from "@/api/task"
import { getFaultDetail, updateFaultProcess } from "@/api/fault";
import dayjs from "dayjs";
import { useDataDictStore } from "@/store/modules/dataDict";
import { getUserList } from "@/api";
import { reloginByUserId } from "@/utils/auth";
import { getRepairDetail } from "@/api/repair";

const data = ref({}) // 详情数据
const faultInfo = ref({}) // 故障信息
const statusList = ref([]) // 审批状态列表
const repairTypeList = ref([]) // 维修状态列表
const userList = ref([]) // 用户列表
const yesOrNo = ref([]) // 是或否
const faultStatusList = ref([]) // 故障状态列表

// 通过状态码获取状态名称
const getFaultStatusName = (status) => {
  if (!status) return ''
  for (const item of faultStatusList.value) {
    if (item.value === status) {
      return item.label
    }
  }
}
// const getStatusName = (status) => {
//   if (!status) return ''
//   for (const item of statusList.value) {
//     if ((item.value + '') === status) {
//       return item.label
//     }
//   }
// }

// 通过布尔类型获取是或否
const getYesOrNo = (value) => {
  if (value === undefined) return ''
  for (const item of yesOrNo.value) {
    if (value && item.value === 'true') {
      return item.label
    } else if (!value && item.value === 'false') {
      return item.label
    }
  }
}

// 通过维修类型获取名称
const getRepairTypeName = (type) => {
  if (!type) return ''
  for (const item of repairTypeList.value) {
    if (item.value === type) {
      return item.label
    }
  }
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  return dayjs(date).format('YYYY-MM-DD')
}

const getUserName = (userId) => {
  if (!userId) return
  for (const item of userList.value) {
    if (item.value === userId) {
      faultInfo.value.nickname = item.label
      return item.label
    }
  }
}

// 预览图片
const previewImage = (url) => {
  if (!url) return
  uni.previewImage({ urls: [url] })
}

const buttonList = ref()
const setButtonList = (data) => {
  if (data && data.todoTask) {
    buttonList.value = data.todoTask.buttonsSetting || []
  } else {
    buttonList.value = []
  }
}

const userFormItemLabel = computed(() => {
  const index = clickedButtonIndex.value
  if (index === '1') {
    return t('message.dispatchUser') // 负责人
  } else if (index === '3') {
    return t('message.form.user3') // 新审批人
  } else if (index === '4') {
    return t('message.form.user4') // 接收人
  } else if (index === '5') {
    return t('message.form.user5') // 加签处理人
  } else {
    return ''
  }
})
const clickedButtonIndex = ref(0)
const clickedButtonText = ref('')
const onButtonClick = async (index, text) => {
  clickedButtonIndex.value = index
  clickedButtonText.value = text

  if (index === '1') { // 分配责任人
    rules.assigneeUserId.rules = [{ required: true, errorMessage: t('message.form.errorHint1') }]
    rules.reason.rules[0].required = false
  } else if (index === '2') { // 拒绝
    rules.assigneeUserId.rules[0].required = false
    rules.reason.rules[0].required = false
  } else if (index === '3') { // 转办
    rules.assigneeUserId.rules = [{ required: true, errorMessage: t('message.form.errorHint3') }]
    rules.reason.rules[0].required = true
  } else if (index === '4') { // 委派
    rules.assigneeUserId.rules = [{ required: true, errorMessage: t('message.form.errorHint5') }]
    rules.reason.rules[0].required = true
  } else if (index === '5') { // 加签
    rules.assigneeUserId.rules[0].required = false
    rules.userIds.rules[0].required = true
    rules.reason.rules[0].required = true
  } else if (index === '6') { // 退回
    const code = (await returnTask(taskId.value)).code
    if (code === 0) {
      uni.showToast({ title: t('operation.success'), icon: 'none' })
      uni.navigateBack()
      uni.$emit('update')
    }
    return
  } else if (index === '7') {
    rules.reason.rules[0].errorMessage = t('message.form.errorHint7')
  }
  showDispatchUserPopup()
}
// 分配责任人弹窗
const dispatchUserPopup = ref()
const showDispatchUserPopup = () => {
  dispatchUserPopup.value.open('bottom')
}
const form = reactive({
  assigneeUserId: undefined,
  delegateUserId: undefined,
  userIds: undefined,
  type: undefined,
  reason: undefined,
  id: undefined,
})

const formRef = ref()
const { appContext } = getCurrentInstance()
const t = appContext.config.globalProperties.$t
const rules = reactive({
  assigneeUserId: { rules: [{ required: true, errorMessage: t('message.form.errorHint1') }] },
  userIds: { rules: [{ required: true, errorMessage: t('message.form.errorHint6') }] }, // 加签处理人
  type: { rules: [{ required: true, errorMessage: t('message.form.errorHint2') }] },
  reason: { rules: [{ required: true, errorMessage: t('message.form.errorHint4') }] },
})
const cancel = () => dispatchUserPopup.value.close('bottom')
const handleClick = async (sign) => {
  try {
    const valid = await formRef.value.validate()
    if (!valid) return

    if (!form.reason) {
      form.reason = form.reason || ''
    }

    let code = -1
    if (clickedButtonIndex.value === '1') { // 分配责任人
      code = (await updateFaultProcess(faultId.value, form.type, form.assigneeUserId)).code
      code = (await approvalTask(taskId.value, form.reason)).code
    } else if (clickedButtonIndex.value === '2') { // 拒绝
      code = (await rejectTask(taskId.value, form.reason)).code
    } else if (clickedButtonIndex.value === '3') { // 转办
      code = (await transferTask(taskId.value, form.assigneeUserId, form.reason)).code
    } else if (clickedButtonIndex.value === '4') { // 委派
      code = (await delegateTask(taskId.value, form.assigneeUserId, form.reason)).code
    } else if (clickedButtonIndex.value === '5') { // 加签
      code = (await createSignTask(taskId.value, form.userIds, sign, form.reason)).code
    } else if (clickedButtonIndex.value === '7') { // 退回
      code = (await cancelTask(processId.value, form.reason)).code
    }
    if (code === 0) { // 成功时返回
      uni.showToast({ title: t('operation.success'), icon: 'none' })
      uni.$emit('update')
      uni.navigateBack()
    }
  } catch (e) {
    console.log(e)
  }
}

const processId = ref('')
const taskId = ref('')
const faultId = ref('')
const { loadDataDictList, getDataDictList } = useDataDictStore()
onLoad(async (options) => {
  await reloginByUserId(options.reloginUserId)

  taskId.value = options.id
  processId.value = options.processInstanceId
  statusList.value = getDataDictList('crm_audit_status') // 审批状态列表
  repairTypeList.value = getDataDictList('pms_main_type') // 维修类型列表
  faultStatusList.value = getDataDictList('pms_failure_status') // 故障状态列表
  yesOrNo.value = getDataDictList('infra_boolean_string') // 是或否

  if (repairTypeList.value.length === 0) {
    await loadDataDictList()

    statusList.value = getDataDictList('crm_audit_status') // 审批状态列表
    repairTypeList.value = getDataDictList('pms_main_type') // 维修类型列表
    faultStatusList.value = getDataDictList('pms_failure_status') // 故障状态列表
    yesOrNo.value = getDataDictList('infra_boolean_string') // 是或否
  }

  data.value = (await getApprovalDetail(options)).data
  faultId.value = data.value.processInstance.businessKey
  if (processId.value.startsWith('GZ')) {
    faultInfo.value = (await getFaultDetail({ id: faultId.value })).data
  } else {
    faultInfo.value = (await getRepairDetail({ id: faultId.value})).data
  }
  setButtonList(data.value)

  let userId
  if (data.value.todoTask) {
    userId = data.value.todoTask.assigneeUser.id
    if (!taskId.value) {
      taskId.value = data.value.todoTask.id
    }
  } else {
    userId = data.value.processInstance.startUser.id
  }
  userList.value = (await getUserList(userId)).data.map(item => ({
    value: item.id,
    text: item.nickname,
    label: item.nickname,
  }))
  getUserName(faultInfo.value?.maintainPerson)
})
</script>

<style scoped lang="scss">
.item {
  margin: 10px 0;
  background-color: white;
  border-radius: 0 0 6px 6px;
}

.item-process-id {
  padding: 10px;
  background: linear-gradient( 270deg, #FFFFFF 0%, #8EBEFF 100%);
  border-radius: 6px 6px 0 0;
}

.item-content {
  padding: 15px 20px 12px 10px;
  font-size: 14px;
  color: #333333;
}

.mt-15 {
  margin-top: 15px;
}

.mt-27 {
  margin-top: 27px;
}

.outline-button {
  border: 1px #004098 solid;
  border-radius: 3px;
  color: #004098;
  font-size: 14px;
  min-width: 90px;
  height: 32px;
  line-height: 32px;
  margin: 0;
}

.fill-button {
  background-color: #004098;
  color: white;
  font-size: 14px;
  min-width: 90px;
  height: 32px;
  line-height: 32px;
  margin: 0;
  padding: 0;
}

.popup {
  padding: 10px;
}
</style>