analysis/src/views/anomaly/index.vue

<template>
    <div v-loading="tableLoading" class="hc-layout-box anonaly-page">
        <hc-card :scrollbar="false" action-size="lg">
            <template #header>
                <el-select v-model="searchForm.type" class="w-[148px]" placeholder="异常类型" clearable>
                    <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="searchForm.grade" class="ml-2 w-[100px]" placeholder="异常等级" clearable>
                    <el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="searchForm.isAnnul" class="ml-2 w-[100px]" placeholder="是否撤销" clearable>
                    <el-option :value="1" label="是" />
                    <el-option :value="0" label="否" />
                </el-select>
                <div class="relative ml-3 w-[300px]">
                    <hc-search-input v-model="searchForm.searchValue" color="#151921" text="搜索" @search="searchClick" />
                </div>
            </template>
            <template #extra>
                <el-button v-yes-com:[batchExportClick] :disabled="tableCheckedKeys.length === 0" class="ml-2" color=" #6DC2FF" type="info">
                    <hc-icon class="text-white" name="download" />
                    <span class="text-white">批量导出</span>
                </el-button>
            </template>
            <hc-table
                :cell-style="tableCellStyle" :check-style="{ fixed: true, width: 29 }"
                :column="tableColumn" :datas="tableData" :index-style="{ fixed: true, width: 60 }"
                class="anonaly-page-table" is-check @selection-change="tableSelectionChange"
            >
                <template #action="{ row }">
                    <el-link type="success" @click="cancleClick(row)">
                        <hc-icon name="arrow-go-back" />撤销
                    </el-link>
                    <el-link v-yes-com:[exportClick] type="success" yes-com-text="确定导出项目预警数据?">
                        <hc-icon name="download" />
                        <span>导出</span>
                    </el-link>
                </template>
            </hc-table>
            <template #action>
                <hc-pages :pages="searchForm" @change="pageChange" />
            </template>
        </hc-card>
        <!-- 撤销弹窗 -->
        <hc-dialog v-model="cancelModal" title="请选择撤销结束时间" widths="400px" @close="cancelModalClose">
            <div class="relative pb-[8px] pt-[8px]">
                <el-date-picker v-model="cancelForm.repealEndDate" class="block" value-format="YYYY-MM-DD" placeholder="撤销结束时间" type="date" />
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="large" @click="cancelModalClose">取消</el-button>
                    <el-button :loading="cancelLoding" type="primary" @click="saveCancelClick">确定</el-button>
                </div>
            </template>
        </hc-dialog>
        <!-- 导出弹窗 -->
        <hc-dialog v-model="exportModal" title="导出">
            <el-alert :closable="false" class="export mb-4" show-icon title="确定导出项目预警数据?" type="warning" />
        </hc-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import mainApi from '~api/anomaly/api'
import { getArrValue, isNullES } from 'js-fast-way'

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

//搜索表单
const searchForm = ref({ searchValue: null, current: 1, size: 20, total: 0 })

const typeOptions = ref([{ value: '2', label: '项目进度异常' }, { value: '1', label: '项目投资异常' }])
const levelOptions = ref([{ value: '1', label: '一级' }, { value: '2', label: '二级' }, { value: '2', label: '三级' }])

const searchClick = () => {
    searchForm.value.current = 1
    getTableData()
}
//分页被点击
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表格
const tableColumn = [
    { key: 'projectName', name: '项目名称', align: 'center' },
    { key: 'warningTypeName', name: '异常类型', align: 'center' },
    { key: 'quarterName', name: '季度', align: 'center' },
    { key: 'warningDate', name: '异常时间', align: 'center' },
    { key: 'warningGradeName', name: '异常等级', width: 80, align: 'center' },
    { key: 'isRepeal', name: '是否撤销', align: 'center' },
    { key: 'repealStartDate', name: '撤销开始时间', align: 'center' },
    { key: 'repealEndDate', name: '撤销结束时间', align: 'center' },
    { key: 'action', name: '操作', fixed: 'right', align: 'center' },
]
const tableData = ref([])

//设置单元格的样式
const tableCellStyle = ({ row, column }) => {
    if (column.property === 'warningGradeName') {
        if (row.warningGradeName === '二级') {
            return { backgroundColor: '#FF9102', color: 'white' }
        } else if (row.warningGradeName === '三级') {
            return { backgroundColor: '#06B2F6', color: 'white' }
        } else if (row.warningGradeName === '一级') {
            return { backgroundColor: '#FF0001', color: 'white' }
        }
    }
}

//获取表格数据
const tableLoading = ref(false)
const getTableData = async () => {
    tableData.value = []
    tableLoading.value = true
    const { error, code, data } = await mainApi.page(searchForm.value)
    //处理数据
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data['records'])
        searchForm.value.total = data.total || 0
    } else {
        tableData.value = []
        searchForm.value.total = 0
    }
}

//多选事件
const tableCheckedKeys = ref([])
const tableSelectionChange = (rows) => {
    tableCheckedKeys.value = rows
}

//撤销
const cancelModal = ref(false)
const cancelForm = ref({})
const cancleClick = (row) => {
    cancelModal.value = true
    cancelForm.value = {
        projectId: row.projectId,
        warningType: row.warningType,
        quarter: row.quarter,
        planYear: row.planYear,
        repealEndDate: null,
    }
}

//提交撤销
const cancelLoding = ref(false)
const saveCancelClick = async () => {
    const form = cancelForm.value
    if (isNullES(form.repealEndDate)) {
        window.$message.error('请选择撤销结束时间')
        return
    }
    //发起请求
    const { error, code, msg } = await mainApi.repeal(form)
    if (!error && code === 200) {
        window.$message.success('撤销成功')
        cancelModalClose()
        getTableData().then()
    } else {
        window.$message.error(msg ?? '操作失败')
    }
}

//关闭撤销
const cancelModalClose = () => {
    cancelModal.value = false
    cancelForm.value = {}
}


const exportModal = ref(false)

//批量导出
const batchExportClick = (_, resolve) => {
    //这里可以写一些操作
    resolve() //这个一定要存在，否则不会关闭弹窗
}

//单个导出
const exportClick = async (_, resolve) => {
    //这里可以写一些操作
    resolve() //这个一定要存在，否则不会关闭弹窗
}
</script>

<style lang='scss' scoped>
.hc-layout-box {
    position: relative;
    height: 100%;
    width: 100%;
}
</style>