alert-front/src/views/run/calc/index.vue

<script lang="ts" setup>
import { Space,Badge, Button, Divider, Switch } from 'ant-design-vue'
import { onMounted, ref, reactive } from 'vue'
import moment from 'moment'
import HistoryModal from '../../exa/config/HistoryModal.vue'
import { calcFormSchemas, columns, searchFormSchema } from './calc.data'

import { BasicTable, TableAction, useTable } from '@/components/Table'
import { BasicForm, useForm } from '@/components/Form'

import { getInstantCount, getInstantPage, updateInstant } from '@/api/alert/run/instant'
import { getExaNow } from '@/api/alert/exa'
import { useI18n } from '@/hooks/web/useI18n'
import { router } from '@/router'
import { useMessage } from '@/hooks/web/useMessage'
import { IconEnum } from '@/enums/appEnum'
import { useModal } from '@/components/Modal'

defineOptions({ name: 'InstantCalc' })
const { createMessage } = useMessage()
const { t } = useI18n()
// 添加多选框相关状态
const selectedRowss = ref<any[]>([])
const [registerTable, { getForm, reload, getDataSource, updateTableDataRecord }] = useTable({
  title: '实例列表',
  api: getInstantPage,
  rowKey: 'mpId',
  immediate: true,
  columns,
  formConfig: {
    labelWidth: 70,
    schemas: searchFormSchema,
    showResetButton: false,
    actionColOptions: {
      span: 2,
      style: {
        textAlign: 'left' ,
        marginLeft: '10px',
      },
    },

  },
  useSearchForm: true,
  showTableSetting: true,
  showIndexColumn: false,
  actionColumn: {
    width: 100,
    title: t('common.action'),
    dataIndex: 'action',
    fixed: 'right',
  },
  // 添加多选框配置
  rowSelection: {
    type: 'checkbox',

    onChange: (selectedRowKeys, selectedRows) => {
      console.log(24)
      selectedRowss.value = selectedRows
    }
  }
})

/**
 * BasicForm绑定注册;
 */
const [registerForm] = useForm({
  // 注册表单列
  schemas: calcFormSchemas,
  // 是否显示展开收起按钮，默认false
  // showAdvancedButton: true,
  // // // 超过指定行数折叠，默认3行
  // autoAdvancedLine: 1,
  // // // 折叠时默认显示行数，默认1行
  // alwaysShowLines: 1,
  layout: 'horizontal',
  model: { time: [moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')] },
  fieldMapToTime: [
    // data为时间组件在表单内的字段，startTime，endTime为转化后的开始时间于结束时间
    ['time', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss'],
  ],

  actionColOptions: { span: 5,style: { textAlign: 'left' ,marginLeft: '10px',} },
  showSubmitButton: false,
  showResetButton: false,
})


// 添加回算状态跟踪
const calcLoading = ref<boolean>(false)
const rowCalcLoading = reactive({});

/**
 * 点击导出按钮
 * @param values
 */
function handleExport(values: any) {
  console.log('导出按钮数据::::', values)
}

async function handlebeforeCalc() {
  console.log("触发了回算按钮")
  //获取选中的实例
  console.log('选中的实例:', selectedRowss.value)
  const selectedRowIds = selectedRowss.value.map(row => row.mpId)

  //check selectedRows
  if (selectedRowIds.length === 0) {
    createMessage.error('请选择要回算的实例')
    return
  }
    // 校验表单数据
    const formData = await getForm().validateFields()
    // 给函数传递需要回算的实例id数组
    formData.mpIds = selectedRowIds;
    handleCalc(formData)
}
// 回算
  async function handleCalc(formData: any) {
    calcLoading.value = true
    console.log('点击回算按钮数据::::', formData)
    // 循环调用后端的回算接口
    for (const mpId of formData.mpIds) {
      rowCalcLoading[mpId] = true
      console.log('行内回算loading状态:', mpId, rowCalcLoading[mpId])
      try {
        // 调用后端的回算接口 - 行内回算
        // 模拟3秒接口调用延迟
        await new Promise(resolve => {
          setTimeout(() => {
            resolve()
          }, 3000)
        })
        createMessage.success(t('common.success'))
      } catch (error) {
        createMessage.error(t('common.fail'))
      } finally {
        rowCalcLoading[mpId] = false
      }
    }
    calcLoading.value = false
  }
</script>

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #form-formFooter>
        <!-- <a-button v-auth="['run:instant:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate">
          {{ t('action.create') }}
        </a-button> -->
        <Divider orientation="left">
          回算
        </Divider>
        <!-- 自定义表单 -->
        <BasicForm @register="registerForm">
          <template #advanceBefore>
            <Space>
            <a-button type="primary" :loading="calcLoading" :pre-icon="IconEnum.BACK_CALC" @click="handlebeforeCalc">
              {{ t('action.backCalc') }}
            </a-button>
            <a-button type="primary" :pre-icon="IconEnum.EXPORT" @click="handleExport">
              {{ t('action.export') }}
            </a-button>
            </Space>
          </template>
        </BasicForm>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
<!--          <TableAction-->
<!--            :actions="[-->
<!--              { icon: IconEnum.BACK_CALC,label: rowCalcLoading[record.mpId] ? t('action.calcIng') : t('action.backCalc'), onClick: handleCalc.bind(null, record) },-->
<!--            ]"-->
<!--          />-->
          <TableAction
            :actions="[
              { icon: IconEnum.BACK_CALC,label: rowCalcLoading[record.mpId] ? t('action.calcIng') : t('action.backCalc'), onClick: handlebeforeCalc,
          disabled: rowCalcLoading[record.mpId]},
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </div>
</template>

<style lang="less" scoped>
:deep(.instant) {
  font-weight: bold;
  color: #0B55A4
}

:deep(.alarm .ant-badge-status-dot) {
  animation: flash 1s linear infinite;
}

@keyframes flash {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.runningStatus {
  cursor: pointer;
}
</style>