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

<template>
    <div class="hc-task-form-body">
        <el-tabs v-if="taskInfo.meterType <= 3" v-model="taskTabsKey" type="border-card" @tab-change="taskTabsClick">
            <el-tab-pane v-if="taskInfo.meterType === 1" name="key1" label="计量信息">
                <HcMiddlepayForm :table="tableInfo" :info="taskInfo" :is-edit="isEdits" />
            </el-tab-pane>
            <el-tab-pane v-if="taskInfo.meterType === 1" label="质保资料" name="key2">
                <HcMassForm :table="tableInfo" :info="taskInfo" :is-edit="isEdits" />
            </el-tab-pane>
            <el-tab-pane v-if="taskInfo.meterType !== 1" label="详细信息" name="key4">
                <HcMaterialForm v-if="taskInfo.meterType === 2" :table="tableInfo" :info="taskInfo" :is-edit="isEdits" />
                <HcStartWorkForm v-if="taskInfo.meterType === 3" :table="tableInfo" :info="taskInfo" :is-edit="isEdits" />
            </el-tab-pane>
            <template v-if="!isNullES(detailInfo.opinionType)">
                <el-tab-pane v-if="detailInfo.opinionType !== 4" name="key3" label="审计咨询意见">
                    <HcHtmlForm ref="htmlFormRef" :detail="detailInfo" />
                </el-tab-pane>
            </template>
        </el-tabs>
        <HcAlterForm v-if="taskInfo.meterType === 4" :table="tableInfo" :info="taskInfo" :is-edit="isEdits" />
        <hc-card-item v-if="taskTabsKey !== 'key3' && taskTabsKey !== 'key2'" class="hc-card-footer mt-3">
            <template #header>
                <el-radio-group v-model="taskForm.auditStatus" size="large" :disabled="!isEdits || tableInfo.status === 2">
                    <el-radio :value="1">同意</el-radio>
                    <el-radio :value="2">驳回</el-radio>
                </el-radio-group>
            </template>
            <template #extra>
                <el-link type="primary" :disabled="taskForm.auditStatus === 0 || !isEdits || tableInfo.status === 2" @click="tableSubmitClick">
                    <hc-icon name="check" />
                    <span class="ml-1">这里点提交</span>
                </el-link>
            </template>
            <div class="relative">
                <el-input v-model="taskForm.repealDesc" :autosize="{ minRows: 2, maxRows: 4 }" :disabled="!isEdits || tableInfo.status === 2" type="textarea" placeholder="请描述废除整条任务的原因" />
            </div>
        </hc-card-item>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { getObjValue, isNullES } from 'js-fast-way'
import HcMiddlepayForm from './middlepay-form.vue'
import HcMassForm from './mass-form.vue'
import HcStartWorkForm from './start-work-form.vue'
import HcAlterForm from './alter-form.vue'
import HcMaterialForm from './material-form.vue'
import HcHtmlForm from './html-form.vue'
import mainApi from '~api/tasks/hc-data'

const props = defineProps({
    isEdit: {
        type: Boolean,
        default: true,
    },
    info: {
        type: Object,
        default: () => ({}),
    },
    table: {
        type: Object,
        default: () => ({}),
    },
    detail: {
        type: Object,
        default: () => ({}),
    },
})

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

const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId || '')
const contractId = ref(useAppState.getContractId || '')
const taskInfo = ref(props.info)
const tableInfo = ref(props.table)
const detailInfo = ref(props.detail)

//选项卡被切换
const taskTabsKey = ref('key1')
const taskTabsClick = (key) => {
    taskTabsKey.value = key
    emit('tabTap', key)
}

//监听可否编辑
const isEdits = ref(props.isEdit)
watch(() => props.isEdit, (val) => {
    isEdits.value = val
}, { immediate: true, deep: true })

//监听数据
watch(() => [props.table, props.info, props.detail], ([table, row, detail]) => {
    tableInfo.value = table
    taskInfo.value = row
    taskForm.value = { auditStatus: table.status ?? 0, repealDesc: table.repealDesc ?? '' }
    detailInfo.value = detail
}, { deep: true })

//渲染完成
onMounted(() => {
    const { status, repealDesc } = tableInfo.value
    const { meterType } = taskInfo.value
    taskForm.value = { auditStatus: status ?? 0, repealDesc: repealDesc ?? '' }
    taskTabsKey.value = meterType !== 1 ? 'key4' : 'key1'
    console.log(meterType)
})

//审批表单
const taskForm = ref({ auditStatus: 0, repealDesc: '' })

//单条提交
const htmlFormRef = ref(null)
const tableSubmitClick = async () => {
    const { auditStatus, repealDesc } = taskForm.value
    if (auditStatus === 0) {
        window.$message.error('请先选择同意或驳回')
        return
    }
    if (auditStatus === 2 && !repealDesc) {
        window.$message.error('请先填写驳回原因')
        return
    }
    //发起请求
    const { error, code, msg } = await mainApi.taskAudit({
        ...taskForm.value,
        dataId: tableInfo.value.id,
        taskId: taskInfo.value.id,
        projectId: projectId.value,
        contractId: contractId.value,
    })
    if (!error && code === 200) {
        window.$message.success('提交成功')
        emit('finish')
    } else {
        window.$message.error(msg ?? '提交失败')
    }
}

//获取表单数据
const getTableForm = () => {
    const res = htmlFormRef.value?.getTableForm()
    return getObjValue(res)
}

defineExpose({
    getTableForm,
})
</script>

<style lang="scss" scoped>
.hc-task-form-body {
    position: relative;
}
</style>

<style lang="scss">
.hc-task-form-body .hc-card-item-box {
    background: #f6f6f6 !important;
}
.hc-task-form-body .hc-card-item-box.hc-card-footer {
    background: white !important;
}
.hc-task-form-body .el-tabs--border-card>.el-tabs__content {
    padding: 6px;
}
</style>