异常管理

src/views/anomaly/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="hc-layout-box anonaly-page">
+    <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="异常类型">
@@ -31,7 +31,6 @@
                     <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>
@@ -43,10 +42,16 @@
             </template>
         </hc-card>
         <!-- 撤销弹窗 -->
-        <hc-dialog v-model="cancelModal" title="请选择撤销结束时间" widths="400px">
+        <hc-dialog v-model="cancelModal" title="请选择撤销结束时间" widths="400px" @close="cancelModalClose">
             <div class="relative pb-[8px] pt-[8px]">
-                <el-date-picker v-model="cancelTime" class="block" placeholder="撤销结束时间" type="date" />
+                <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="导出">
@@ -58,10 +63,11 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import mainApi from '~api/anomaly/api'
+import { getArrValue, isNullES } from 'js-fast-way'
 
 //渲染完成
 onMounted(() => {
-
+    searchClick()
 })
 
 //搜索表单
@@ -73,7 +79,8 @@ const typeOptions = ref([{ value: '2', label: '项目进度异常' }, { value: '
 const levelOptions = ref([{ value: '1', label: '一级' }, { value: '2', label: '二级' }, { value: '2', label: '三级' }])
 
 const searchClick = () => {
-
+    searchForm.value.current = 1
+    getTableData()
 }
 //分页被点击
 const pageChange = ({ current, size }) => {
@@ -84,53 +91,93 @@ const pageChange = ({ current, size }) => {
 
 //表格
 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: 'projectName', name: '项目名称', align: 'center' },
+    { key: 'warningTypeName', name: '异常类型', align: 'center' },
+    { key: 'quarter', name: '季度', align: 'center' },
+    { key: 'warningDate', name: '异常时间', align: 'center' },
+    { key: 'warningGrade', 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 === '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',
+    if (column.property === 'warningGrade') {
+        if (row.warningGrade === '二级') {
+            return { backgroundColor: '#FF9102', color: 'white' }
+        } else if (row.warningGrade === '三级') {
+            return { backgroundColor: '#06B2F6', color: 'white' }
+        } else if (row.warningGrade === '一级') {
+            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 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,
+        repealEndDate: null,
+    }
 }
-const cancelTime = ref('')
+
+//提交撤销
+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)
 
 //批量导出