for_client/src/global/components/hc-report-modal/index.vue

<template>
    <el-dialog v-model="isShow" :title="title" width="47rem" class="hc-modal-border" draggable destroy-on-close @closed="cancelReportClick">
        <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="auto" size="large">
            <el-form-item label="任务名称" prop="taskName">
                <el-input v-model="formModel.taskName" disabled/>
            </el-form-item>
            <el-form-item label="任务描述" path="taskContent">
                <el-input type="textarea" v-model="formModel.taskContent" placeholder="请输入任务描述" :autosize="{ minRows: 3, maxRows: 5 }"/>
            </el-form-item>
            <el-form-item label="任务流程" path="fixedFlowId">
                <el-select v-model="formModel.fixedFlowId" block @change="handleProcessValue">
                    <el-option v-for="item in processData" :label="item.fixedFlowName" :value="item.id"/>
                </el-select>
            </el-form-item>
            <el-form-item label="任务人" path="user" v-if="false">
                <HcTasksUser ui="w-full"/>
            </el-form-item>
            <el-form-item label="任务人">
                <div class="form-item-div">{{linkUserJoinString}}</div>
            </el-form-item>
            <el-form-item label="上报批次" path="batch">
                <HcCounter v-model:value="formModel.batch" @update:modelValue="batchUpdateValue"/>
            </el-form-item>
            <el-form-item label="限定审批时间" path="restrictDay">
                <HcCounter v-model:value="formModel.restrictDay" text="(天)" @update:modelValue="restrictDayUpdateValue"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button size="large" @click="cancelReportClick">取消</el-button>
                <el-button type="primary" hc-btn :loading="formReportLoading" @click="formReportClick">提交</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {ref,watch,onMounted} from "vue";
import tasksFlowApi from '~api/tasks/flow';
import {ApprovalApi,queryFixedFlow} from '~api/other';
import {getArrValue,getIndex,formValidate} from "vue-utils-plus"
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: '上报审批'
    },
    taskName: {
        type: String,
        default: ''
    },
    ids: {
        type: String,
        default: null
    },
    projectId: {
        type: [String,Number],
        default: ''
    },
    contractId: {
        type: [String,Number],
        default: ''
    },
    url: {
        type: [String,Number],
        default: ''
    },
    addition: {
        type: Object,
        default: () => ({})
    },
    type: { //first,log,wbs
        type: [String,Number],
        default: ''
    },
    typeData: {
        type: [String, Number, Array, Object],
        default: ''
    },
})

//变量
const isShow = ref(props.show)
const projectId = ref(props.projectId)
const contractId = ref(props.contractId)
const ApiUrl = ref(props.url)
const isTypes = ref(props.type)
const typeDatas = ref(props.typeData)

//表单
const formRef = ref(null)
const processData = ref([])
const formModel = ref({
    projectId: projectId.value, contractId: contractId.value, ids: props.ids,
    taskName: props.taskName, taskContent: '', fixedFlowId: '', batch: 1, restrictDay: 1,
    ...props.addition
})
const formRules = ref({
    taskContent: {
        required: true,
        trigger: "blur",
        message: "请输入任务描述"
    },
    fixedFlowId: {
        required: true,
        trigger: "blur",
        message: "请选择任务流程"
    },
    user: {
        required: true,
        trigger: "blur",
        message: "请选择任务人"
    }
})

//监听
watch(() => [
    props.show,
    props.projectId,
    props.contractId,
    props.taskName,
    props.ids,
    props.url,
    props.addition,
    props.type,
    props.typeData
], ([val,pid,cid,name,ids,url,addition, type, typeData]) => {
    isShow.value = val
    projectId.value = pid
    contractId.value = cid
    ApiUrl.value = url
    //更新到表单数据
    formModel.value = {
        projectId: pid, contractId: cid, ids: ids, taskName: name,
        taskContent: '', fixedFlowId: '', batch: 1, restrictDay: 1,
        ...addition
    }
    typeDatas.value = typeData
    if (type !== isTypes.value) {
        isTypes.value = type
        getProcessDatasApi()
    }
})

//渲染完成
onMounted(() => {
    getProcessDatasApi()
})

const getProcessDatasApi = () => {
    if (isShow.value) {
        const type = isTypes.value
        if (type === 'first' || type === 'log' || type === 'wbs') {
            queryFixedFlowApi(type, typeDatas.value)
        } else {
            getProcessData()
        }
    }
}

//获取流程数据
const linkUserJoinString = ref('')
const getProcessData = async () => {
    linkUserJoinString.value = ''
    const { error, code, data } = await tasksFlowApi.getPageData({
        projectId: projectId.value,
        contractId: contractId.value,
        current: 1, size: 100
    })
    if (!error && code === 200) {
        processData.value = getArrValue(data['records'])
    } else {
        processData.value = []
    }
}

//获取符合条件的预设流程（三大填报页、日志列表的批量上报、首件列表的批量上报）
const queryFixedFlowApi = async (type, datas) => {
    let flowJson = {}
    if (type === 'first') {
        flowJson['firstId'] = datas
    } else if (type === 'log') {
        flowJson['theLogPrimaryKeyId'] = datas
    } else if (type === 'wbs') {
        flowJson['privatePKeyId'] = datas
    }
    //请求数据
    linkUserJoinString.value = ''
    const { error, code, data } = await queryFixedFlow({
        projectId: projectId.value,
        contractId: contractId.value,
        ...flowJson
    })
    if (!error && code === 200) {
        processData.value = getArrValue(data['records'])
    } else {
        processData.value = []
    }
}


//流程数据切换
const handleProcessValue = (val) => {
    const list = processData.value
    const index = getIndex(list, 'id', val)
    linkUserJoinString.value = list[index]?.linkUserJoinString
}

//上报批次改变
const batchUpdateValue = (val) => {
    formModel.value.batch = val
}

//上报批次改变
const restrictDayUpdateValue = (val) => {
    formModel.value.restrictDay = val
}

const emit = defineEmits(['hide','finish'])
//取消
const cancelReportClick = () => {
    linkUserJoinString.value = ''
    isShow.value = false
    emit('hide', false)
}
//上报
const formReportClick = async () => {
    const res = await formValidate(formRef.value)
    if (res) await batchApprovalApi()
}

//上报请求
const formReportLoading = ref(false)
const batchApprovalApi = async () => {
    formReportLoading.value = true
    const { error, code, data } = await ApprovalApi(ApiUrl.value, {
        projectId: projectId.value,
        contractId: contractId.value,
        ...formModel.value
    })
    linkUserJoinString.value = ''
    formReportLoading.value = false
    if (!error && code === 200) {
        isShow.value = false
        window.$message?.success('上报成功')
        emit('hide', false)
        emit('finish', data)
    } else {
        processData.value = []
    }
}
</script>