labsop_h5/src/view/todo/component/approveTasks.vue

<template>
  <div>
    <el-dialog :title="dialog.title" v-model="dialog.isShowDialog" width="90%">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="2" disabled>
          <template #title>
            <el-icon class="header-icon"><info-filled /></el-icon>
            <span>审批意见</span>
          </template>
          <el-form ref="formRef" :rules="rules" :model="state.form" label-position="top" label-width="150px" style="padding: 10px 0">
            <el-form-item label="审批意见" prop="approveOpinion">
              <el-input
                v-model="state.form.approveOpinion"
                type="textarea"
                :rows="3"
                resize="none"
                placeholder="请输入审批意见"
                clearable
                style="width: 100%"
              ></el-input>
            </el-form-item>
            <el-form-item label="审批结果" prop="approveResult">
              <el-radio-group v-model="state.form.approveResult">
                <el-radio label="pass">通过</el-radio>
                <el-radio label="rejection">拒绝</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-show="state.taskDetail.isFile && state.form.approveResult === 'pass'" label="附件" prop="fileList">
              <el-upload
                :accept="state.SUPPORT_FILE_UPLOAD_TYPE_MAX"
                ref="upload"
                :file-list="state.form.fileList"
                :action="uploadUrl"
                :headers="getUploadHeaders()"
                :before-upload="beforeAvatarFileUpload"
                :on-success="handleSuccess"
                :limit="1"
                :on-exceed="handleExceed"
                style="width: 100%"
              >
                <template #trigger>
                  <el-button type="primary" size="default">点击上传</el-button>
                </template>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <template #footer>
        <el-button @click="dialog.isShowDialog = false">取 消</el-button>
        <el-button type="primary" @click="onSave">提 交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="approvalForm">
  import to from 'await-to-js'
  import { nextTick, reactive, ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import { useExecutionApi } from '/@/api/platform/execution'
  import { useDictApi } from '/@/api/system/dict'
  import type { UploadFile, UploadUserFile, UploadProps, UploadRawFile } from 'element-plus'
  import { genFileId } from 'element-plus'
  import { Session } from '/@/utils/storage'
  import { getUploadHeaders } from '/@/utils/upload'
  import { getFileUrl } from '/@/utils/url'
  import { SUPPORT_FILE_UPLOAD_TYPE_MAX } from '/@/constants/pageConstants'

  // 定义变量内容
  const uploadUrl = import.meta.env.VITE_UPLOAD
  const upload = ref()
  const dictApi = useDictApi()
  const executionApi = useExecutionApi()
  const riskLevelOption = ref<RowDicDataType[]>([])
  const activeNames = ref(['1', '2', '3'])
  const formRef = ref()
  const dialog = reactive({
    type: '',
    isShowDialog: false,
    title: '',
    submitTxt: ''
  })
  const idList = ref<number[]>([])
  const state = reactive<any>({
    SUPPORT_FILE_UPLOAD_TYPE_MAX,
    taskDetail: {},
    detail: {},
    form: {
      taskId: 0,
      approveResult: 'pass',
      approveOpinion: '',
      fileList: [] as UploadUserFile[],
      fileUrl: ''
    },
    tableData: {
      data: [],
      loading: false,
      param: {
        id: 0
      }
    }
  })
  const checkFileUrl = (rule: any, value: any, callback: any) => {
    if (state.form.isFile && state.form.approveResult === 'pass') {
      if (!state.form.fileUrl) {
        callback(new Error('请上传附件'))
      }
    } else {
      callback()
    }
  }
  const rules = {
    approveResult: [{ required: true, message: '请选择审批结果', trigger: 'blur' }],
    approveOpinion: [{ required: true, message: '请输入审批意见', trigger: 'blur' }],
    fileList: [{ validator: checkFileUrl }]
  }
  const beforeAvatarFileUpload = (file: any) => {
    let isLt10m = file.size / 1024 / 1024 / 20 < 1
    if (!isLt10m) {
      ElMessage.error('上传文件大小不能超过 20MB!')
      return false
    }
    return true
  }
  const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
  }
  const handleSuccess = (res: any, uploadFile: UploadFile) => {
    state.form.fileUrl = res.Data
    state.form.fileList = [
      {
        name: uploadFile?.name,
        url: getFileUrl(res.Data),
        uid: uploadFile?.uid
      }
    ]
  }

  // 初始化表格数据
  const getTableData = async (id: number) => {
    state.tableData.loading = true
    state.tableData.param.id = id
    const [err, res]: ToResponse = await to(executionApi.getParticipantByProcInstID({ id }))
    if (err) return
    const arr = res?.data || []
    state.tableData.data = arr
    setTimeout(() => {
      state.tableData.loading = false
    }, 500)
  }
  // 刷新上级列表
  const emit = defineEmits(['getParentTableDate'])

  // 保存
  const onSave = async () => {
    formRef.value.validate(async (valid: any) => {
      if (valid) {
        let params = {
          paramIds: idList.value,
          result: state.form.approveResult,
          opinion: state.form.approveOpinion
        }
        const [err]: ToResponse = await to(executionApi.batchApprove(params))
        if (err) return
        ElMessage({ type: 'success', message: '提交成功' })
        dialog.isShowDialog = false
        emit('getParentTableDate')
      }
    })
  }
  const getDicts = () => {
    Promise.all([dictApi.getDictDataByType('RiskLevel')]).then(([riskLevel]) => {
      riskLevelOption.value = riskLevel.data.values
    })
  }

  // 打开弹窗
  const openDialog = (ids: number[]) => {
    getDicts()
    idList.value = ids
    activeNames.value = ['1', '2', '3']
    dialog.isShowDialog = true
    nextTick(() => {
      formRef.value.resetFields()
    })
  }

  // 暴露变量
  defineExpose({
    openDialog
  })
</script>

<style scoped lang="scss">
  .system-user-container {
    :deep(.el-card__body) {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: auto;

      .vxe-table {
        flex: 1;
      }
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      font-size: 18px;
      font-weight: bold;
      color: #2c405e;
    }
  }

  :deep(.el-descriptions__label) {
    width: 10%;
  }

  :deep(.el-descriptions__content) {
    width: 23%;
  }
</style>