analysis/src/views/anomaly/index.vue

<template>
    <div 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="异常类型">
                    <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="异常等级">
                    <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="是否撤销">
                    <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 type="success" @click="exportClick(row)">  <hc-icon name="download" />导出</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">
            <div class="relative pb-[8px] pt-[8px]">
                <el-date-picker v-model="cancelTime" class="block" placeholder="撤销结束时间" type="date" />
            </div>
        </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'

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

})

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

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

const searchClick = () => {

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

//表格
const tableColumn = [
    { key: 'key1', name: '项目名称', align: 'center' },
    { key: 'key2', name: '异常类型', align: 'center' },
    { key: 'key3', name: '季度', align: 'center' },
    { key: 'key4', name: '异常时间', align: 'center' },
    { key: 'key5', name: '异常等级', width: 80, align: 'center' },
    { key: 'key6', name: '是否撤销', align: 'center' },
    { key: 'key7', name: '撤销开始时间', align: 'center' },
    { key: 'key8', name: '撤销结束时间', align: 'center' },
    { key: 'action', name: '操作', fixed: 'right', align: 'center' },
]
const tableData = ref([])

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

const getTableData = async () => {

}


const tableCheckedKeys = ref([])
//多选事件
const tableSelectionChange = (rows) => {
    tableCheckedKeys.value = rows
}
const cancelModal = ref(false)
const cancleClick = (row) => {
    cancelModal.value = true
}
const cancelTime = ref('')
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>