hac/src/views/home/task-details.vue

<template>
    <HcCard scrollbar actionUi="text-center">
        <HcCardItem>
            <div class="hac-task-name-box">
                <div class="label">任务名称</div>
                <div class="name">【任务描述】申请【任务转移】</div>
            </div>
            <div class="hac-task-text-box">
                <span>上报类型：废除任务</span>
                <span class="ml-10">上报人：张三</span>
                <span class="ml-10">上报时间：2023-02-23 19:20:22</span>
            </div>
        </HcCardItem>

        <HcCardItem title="任务详情" class="mt-4">
            <div class="h-52">
                <HcTable :isIndex="false" :column="tableColumn" :datas="tableData"/>
            </div>
        </HcCardItem>

        <HcCardItem title="操作任务" class="mt-4">
            <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="" :disabled="dataType !== 'to-do'">
                <el-form-item label="变更类别：" prop="type" size="large">
                    <el-radio-group v-model="formModel.type" size="large">
                        <el-radio label="1">已完成</el-radio>
                        <el-radio label="2">延期执行</el-radio>
                        <el-radio label="3">任务转移</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="完成时间：" prop="finish_time" class="w-72" v-if="formModel.type === '1'">
                    <el-date-picker class="block" v-model="formModel.finish_time" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                </el-form-item>
                <el-form-item label="延期时间：" prop="delay_time" class="w-72" v-if="formModel.type === '2'">
                    <el-date-picker class="block" v-model="formModel.delay_time" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                </el-form-item>
                <el-form-item label="延期原因：" prop="delay_cause" v-if="formModel.type === '2'">
                    <el-input v-model="formModel.delay_cause" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea"/>
                </el-form-item>
                <div class="flex" v-if="formModel.type === '3'">
                    <el-form-item label="转移时间：" prop="transfer" class="w-64 mr-4">
                        <el-date-picker class="block" v-model="formModel.transfer" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                    </el-form-item>
                    <el-form-item label="转移后剩余工作任务完成日期：" prop="complete" class="w-96 ml-4">
                        <el-date-picker class="block" v-model="formModel.complete" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                    </el-form-item>
                </div>
                <el-form-item label="转移对象：" prop="type" size="large" v-if="formModel.type === '3'">
                    <div class="form-item-div">张三</div>
                </el-form-item>
                <el-form-item label="转移原因：" prop="textContent" v-if="formModel.type === '3'">
                    <el-input v-model="formModel.textContent" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea"/>
                </el-form-item>
            </el-form>
        </HcCardItem>

        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span v-if="dataType === 'to-do'">取消并返回</span>
                <span v-else>返回</span>
            </el-button>
            <el-button size="large" type="danger" hc-btn @click="groundsShow" v-if="dataType === 'to-do'">
                <HcIcon name="arrow-go-forward"/>
                <span>驳回申请</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn @click="doubleClick" v-if="dataType === 'to-do'">
                <HcIcon name="check-double"/>
                <span>审核通过</span>
            </el-button>
        </template>

        <HcDialog isToBody :loading="groundsLoading" :show="groundsModal" title="请填写驳回理由" widths="600px" @close="closeGroundsClick" @save="saveGroundsClick">
            <el-form ref="formGroundsRef" :model="formGroundsModel" :rules="formGroundsRules" label-width="0" size="large">
                <el-form-item prop="grounds">
                    <el-input v-model="formGroundsModel.grounds" :autosize="{ minRows: 6, maxRows: 10 }" placeholder="请输入驳回理由" type="textarea"/>
                </el-form-item>
            </el-form>
        </HcDialog>
    </HcCard>
</template>

<script setup>
import {onActivated, ref} from "vue";
import {useRouter, useRoute} from 'vue-router'

//初始变量
const router = useRouter()
const useRoutes = useRoute()
const dataType = ref(useRoutes?.query?.type ?? '')
const dataId = ref(useRoutes?.query?.id ?? '')

//缓存页面被激活时
onActivated(() => {
    dataType.value = useRoutes?.query?.type ?? ''
    dataId.value = useRoutes?.query?.id ?? ''
    console.log(useRoutes.query)
})

//任务表格
const tableColumn = [
    {key: 'taskName', name: '任务名称'},
    {key: 'description', name: '任务描述'},
    {key: 'date', name: '完成日期', width: '160', align: 'center'},
    {key: 'status', name: '状态', width: '100', align: 'center'},
]
const tableData = ref([
    {taskName: '【任务描述】申请【任务转移】', description: '任务描述。。。。。', date: '2022-02-01', status: '已完成'},
    {taskName: '【任务描述】申请【任务转移】', description: '任务描述。。。。。', date: '2022-02-01', status: '已完成'},
    {taskName: '【任务描述】申请【任务转移】', description: '任务描述。。。。。', date: '2022-02-01', status: '已完成'},
    {taskName: '【任务描述】申请【任务转移】', description: '任务描述。。。。。', date: '2022-02-01', status: '已完成'},
])

//任务操作数据
const formRef = ref(null)
const formModel = ref({
    type: '1',
})
const formRules = {
    title: {
        required: true,
        trigger: 'blur',
        message: "请输入节点名称"
    },
}

const groundsShow = () => {
    groundsLoading.value = false
    groundsModal.value = true
}

//驳回弹窗
const groundsLoading = ref(false)
const groundsModal = ref(false)

//驳回表单
const formGroundsRef = ref(null)
const formGroundsModel = ref({grounds: ''})
const formGroundsRules = {
    grounds: {
        required: true,
        trigger: 'blur',
        message: "请输入驳回理由"
    },
}

//确认驳回
const saveGroundsClick = () => {
    closeGroundsClick()
    window?.$message.warning('驳回成功!')
}

//取消驳回
const closeGroundsClick = () => {
    groundsModal.value = false
    groundsLoading.value = false
}

//审核通过
const doubleClick = () => {
    window?.$message.success('审核通过!')
}

//返回
const goBackClick = () => {
    router.back()
}
</script>

<style lang="scss" scoped>
.hac-task-name-box {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #c5d7ff;
    border-radius: 3px;
    .label {
        position: relative;
        padding: 12px;
        background: #cddcff;
    }
    .name {
        position: relative;
        padding: 12px;
        border-left: 1px solid #c5d7ff;
    }
}
.hac-task-text-box {
    position: relative;
    font-size: 14px;
    margin-top: 14px;
}
</style>