hac/src/views/task/logs/components/logs-content.vue

<template>
    <HcCardItem scrollbar>
        <div class="hac-logs-user-info">
            <img class="user-avatar" :src="logData?.headPicture || avatarPng" alt="">
            <div class="user-info">
                <div class="name">
                    {{ logData?.logTitle }}
                </div>
                <div class="time">
                    {{ logData?.createTime }}{{ isEditState ? '' : ' 添加' }}
                </div>
            </div>
        </div>
        <div class="hc-logs-content-item">
            <div class="title">
                风险预警
            </div>
            <div class="content">
                <el-input v-model="logData.riskWarning" :autosize="{ minRows: 3, maxRows: 5 }" :readonly="!isEditState" :placeholder="isEditState ? '请输入文字说明' : '无'" type="textarea" />
            </div>
        </div>

        <div v-if="!isEditState" class="hc-logs-content-item">
            <div class="title">
                今日工作内容
            </div>
            <div v-if="undefinedNum > 0" class="warning-tip">
                警告：有{{ undefinedNum }}条任务已超期逾期未完成，请及时完成！
            </div>
            <div class="content">
                <HcTable :is-index="false" :column="taskColumn" :datas="logData?.taskList ?? []" :row-style="tableRowStyle" />
            </div>
        </div>

        <div v-if="isEditState" class="hc-logs-content-item">
            <div class="title">
                今日工作范围
            </div>
            <div v-if="undefinedNum > 0" class="warning-tip">
                警告：有{{ undefinedNum }}条任务已超期逾期未完成，请及时完成！
            </div>
            <div class="extra-tip">
                提示：如果该任务已完成，则点击【变更已完成】进行提交部门领导审批
            </div>
            <div class="content">
                <HcTable :is-index="false" :column="tableColumn" :datas="tableData" :row-style="tableRowStyle">
                    <template #action="{ row }">
                        <!-- <el-button size="small" type="primary" @click="statusClick(row)">{{row.statusName === '未完成' ? '变更已完成': '已完成' }}</el-button> -->
                        <!-- <el-button size="small" type="primary" :disabled="row.status === 1 || row.status === 2" @click="statusClick(row)"> -->
                        <el-button size="small" type="primary" :disabled="row.statusName === '已完成' || row.statusName === '待审批' || row.statusName === '已审批' || row.status === 1 || row.status === 2" @click="statusClick(row)">
                            变更已完成
                        </el-button>
                    </template>
                </HcTable>
            </div>
        </div>

        <div class="hc-logs-content-item">
            <div class="title">
                工作内容描述
            </div>
            <div class="content">
                <el-input v-model="logData.workDesc" :autosize="{ minRows: 5, maxRows: 8 }" :readonly="!isEditState" :placeholder="isEditState ? '请输入工作内容描述' : '无'" type="textarea" />
            </div>
        </div>

        <HcListItem v-if="logData?.expenseReimbursementAmount > 0" title="差旅报销:" is-center class="mt-8">
            <el-input v-model="logData.expenseReimbursementAmount" class="w-72" :readonly="!isEditState" placeholder="报销金额(元)" />
        </HcListItem>
    </HcCardItem>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import logsApi from '~api/task/logs'
import { deepClone, getArrValue, isArray } from 'js-fast-way'
import avatarPng from '~src/assets/images/avatar.png'

//参数
const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
    edit: {
        type: Boolean,
        default: true,
    },
    isShowmyEdit:{
        type: Boolean,
        default: false,
    },
    undefinedNum:{
        type: Number,
        default: 0,
    },
    taskList:{
        type:Array,
        default:[],
    },
})

//变量
const isEditState = ref(props.edit)
const logData = ref(props.data)
const ismyEdit = ref(props.isShowmyEdit)
const undefinedNum = ref(props.undefinedNum)//未完成数量
const taskList = ref(props.taskList)//修改日志任务

//渲染完成
onMounted(() => {
    if (isEditState.value) {
        getTableData()
    }
})

//监听
watch(() => [
    props.edit,
], ([edit]) => {
    isEditState.value = edit
    if (edit) {
        getTableData()
    }
}, { deep: true })

//深度监听
watch(() => [
    props.data,
    props.isShowmyEdit,
    props.undefinedNum,
    props.taskList,

], ([data, edit, num, list]) => {
    logData.value = data
    undefinedNum.value = num
    taskList.value = list
console.log(data, 'data11111')
}, { deep: true })

//表格
const taskColumn = [
    { key: 'taskDesc', name: '任务内容' },
    { key: 'startAndEndDate', name: '起止日期', width: '280', align: 'center' },
    { key: 'statusName', name: '状态', width: '160', align: 'center' },
]

//表格行样式
const tableRowStyle = ({ row }) => {
    if (row.isOverdue === 1) {
        return {
            '--el-fill-color-lighter': 'rgba(189, 49, 36, 0.79)',
            '--el-table-row-hover-bg-color': 'var(--el-fill-color-lighter)',
            'background-color': 'var(--el-fill-color-lighter)',
            'color': 'white',
        }
    }
}

//表格
const tableColumn = [
    { key: 'taskDesc', name: '任务内容' },
    { key: 'action', name: '操作', width: 130, align: 'center' },
]
const tableData = ref([])
const getTableData = async () => {
  console.log(ismyEdit.value, '是否修改自己的日志')

        const { error, code, data, msg } = await logsApi.getLogTaskList()
        //判断状态
        if (!error && code === 200) {
            tableData.value = getArrValue(data)
        } else {
            tableData.value = []
            window.$message?.error(msg)
        }
        let arr = []
        arr = tableData.value.filter((ele)=>{
            if (ele?.isOverdue === 1) {
                return ele
            }
        })
        undefinedNum.value = arr.length
        if (ismyEdit.value) {
            tableData.value = taskList.value
            arr = taskList.value.filter((ele)=>{
                if (ele?.isOverdue === 1) {
                    return ele
                }
            })
            undefinedNum.value = arr.length
        }
    


}



//变更状态
const statusClick = async (row) => {
    const { error, code, msg } = await logsApi.setLogTaskComplete({
        taskId: row.id,
        logId: ismyEdit.value ? logData.value.id : '',
    })
    //判断状态
    if (!error && code === 200) {
        window.$message?.success(msg)
        row.status = 1
        row.statusName = '待审批'
        // getTableData().then()
    } else {
        window.$message?.error(msg)
    }
}

//获取表单数据
const getLogForm = () => {
    return deepClone(logData.value)
}

// 暴露出去
defineExpose({
    getLogForm,
})
</script>

<style lang="scss" scoped>
@import "~src/styles/task/logs.scoped.scss";
</style>