measure/src/views/tasks/components/hc-data/repeal-form.vue

<template>
    <hc-new-dialog widths="30rem" :show="isShow" title="填写驳回原因" @close="modalClose">
        <div class="relative">
            <el-input v-model="meterTaskRepealDesc" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" placeholder="请描述废除整个任务的原因" />
        </div>
        <template #footer>
            <div class="hc-task-notes-footer">
                <el-button @click="modalClose">取消驳回</el-button>
                <el-button type="primary" :loading="confirmLoading" @click="confirmClick">确定驳回</el-button>
            </div>
        </template>
    </hc-new-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import mainApi from '~api/tasks/hc-data'

const props = defineProps({
    info: {
        type: Object,
        default: () => ({}),
    },
})

//事件
const emit = defineEmits(['finish', 'close'])

const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId || '')
const contractId = ref(useAppState.getContractId || '')

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

//监听数据
const taskInfo = ref(props.info)
watch(() => props.info, (row) => {
    taskInfo.value = row
}, { deep: true })

//监听
watch(isShow, (val) => {
    if (val) {
        meterTaskRepealDesc.value = ''
    }
})

//审批表单
const meterTaskRepealDesc = ref('')

//确定保存
const confirmLoading = ref(false)
const confirmClick = async () => {
    const repealDesc = meterTaskRepealDesc.value
    if (!repealDesc) {
        window.$message.error('请先填写驳回原因')
        return
    }
    //发起请求
    confirmLoading.value = true
    const { error, code, msg } = await mainApi.taskRepeal({
        taskId: taskInfo.value.id,
        projectId: projectId.value,
        contractId: contractId.value,
        meterTaskRepealDesc: repealDesc,
    })
    confirmLoading.value = false
    if (!error && code === 200) {
        window.$message.success('提交成功')
        emit('finish')
        modalClose()
    } else {
        window.$message.error(msg ?? '提交失败')
    }
}

//取消关闭
const modalClose = () => {
    isShow.value = false
    meterTaskRepealDesc.value = ''
    emit('close')
}
</script>

<style lang="scss" scoped>
.hc-task-notes-footer {
    position: relative;
    text-align: center;
}
</style>