hg-lvke-web/src/views/run-config-manage/monitor-analysis/error-warning/rules.vue

<template>
  <cacp-dialog
    v-model="state.show"
    title="告警规则配置"
    :resizable="false"
    width="80%"
    @closed="$emit('update:show', false)"
  >
    <div class="dialog" v-if="state.init">
      <cacp-search-layout>
        <template #search>
          <cacp-search-panel-layout
            :model="state.form"
            ref="ref_query"
            label-width="auto"
            label-position="right"
            :gutter="30"
            :colSpan="6"
          >
            <el-form-item label="规则编号" prop="name">
              <el-input v-model="state.form.name"></el-input>
            </el-form-item>
            <el-form-item label="规则名称" prop="name">
              <el-input v-model="state.form.name"></el-input>
            </el-form-item>
            <el-form-item label="告警等级" prop="name">
              <el-input v-model="state.form.name"></el-input>
            </el-form-item>
            <el-form-item label="监控对象" prop="xxx">
              <el-select v-model="state.form.xxx" placeholder="" clearable>
                <el-option
                  v-for="item in state.options.xxx"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
            <template #buttonGroup>
              <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button type="info" @click="onReset">重置</el-button>
            </template>
          </cacp-search-panel-layout>
        </template>
        <cacp-complex-table
          :actions="actions"
          :data="tableData"
          :pagination="tablePagination"
          :loading="loading"
          @on-page-change="onPageChange"
          @on-size-change="onSizeChange"
        >
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column property="areaCode" label="规则名称" min-width="100" />
          <el-table-column property="code" label="规则描述" min-width="100" />
          <el-table-column property="funcType" label="告警等级" min-width="100" />
          <el-table-column property="xxx" label="监控对象" min-width="100" />
          <el-table-column property="xxx" label="监控指标" min-width="100" />
          <el-table-column property="xxx" label="触发条件" min-width="100" />
          <el-table-column property="xxx" label="创建时间" min-width="100" />
        </cacp-complex-table>
      </cacp-search-layout>
    </div>
  </cacp-dialog>
  <rulesDetail v-model:show="state.detail.show" :transfer="state.detail.transfer" />
</template>

<script setup lang="ts">
import { nextTick, reactive, ref, watch } from 'vue'
import { SuccessResultCode, type TableAction, useComplexTable, useLoading } from '@cacp/ui'
import config from '@/config'
import rulesDetail from './rules-detail.vue'

const props = defineProps({
  show: { default: false }
})
const { loading, setLoading } = useLoading()
const { tableData, tablePagination, setPagination, setPageIndex, setPageSizes } = useComplexTable(config)
const state: any = reactive({
  show: props.show,
  init: false,
  form: {},
  options: {
    xxx: [{ name: '男', code: 1 }],
    certType: [{ name: '身份证', code: 1 }],
    port: [{ name: '新海港', code: 1 }],
    bayonetType: [{ name: '卡口1', code: 1 }],
    nationality: [{ name: '中国', code: 1 }],
    control: [{ name: '是', code: 1 }]
  },
  detail: {
    show: false,
    transfer: {}
  }
})
watch(
  () => props.show,
  (n) => {
    state.show = n
    //  查询条件样式问题
    nextTick(() => {
      state.init = n
      if (n) {
        nextTick(() => {
          onSearch()
        })
      }
    })
  }
)
const ref_query = ref()
const onSearch = async () => {
  await ref_query.value?.validate((valid: boolean, fields: any) => {
    if (valid) {
      onPageChange(1)
    } else {
      console.log('error submit!', fields)
    }
  })
}
const onReset = () => {
  ref_query.value?.resetFields()
  state.form = {}
  onPageChange(1)
}

const onSizeChange = (size: number) => {
  setPageSizes(size)
  onQuery()
}
function onPageChange(currentPage: number) {
  setPageIndex(currentPage)
  onQuery()
}
const onQuery = async () => {
  setLoading(true)
  // const res = await typicalOneQuery({
  //   ...state.form,
  //   pageIndex: tablePagination.currentPage,
  //   pageSize: tablePagination.pageSize
  // })
  const res = {
    code: '0',
    data: {
      pageNum: 1,
      pageSize: 20,
      size: 20,
      pages: 3,
      total: 56,
      list: [
        {
          id: '460000200103174428',
          status: 1,
          areaCode: '上海 上海市 510000',
          code: 3643,
          funcType: '创建',
          xxx: '常磊',
          createTime: '1974-06-02 15:53:23',
          lastModified: '1988-07-20 05:47:55'
        },
        {
          id: '4600002001031744282',
          status: 1,
          areaCode: '上海 上海市 510000',
          code: 3643,
          funcType: '创建',
          xxx: '常磊',
          createTime: '1974-06-02 15:53:23',
          lastModified: '1988-07-20 05:47:55'
        }
      ]
    }
  }
  if (res.code === SuccessResultCode) {
    setPagination(res.data)
  }
  setLoading(false)
}
const onAdd = () => {
  state.detail.transfer = {
    mode: 'add'
  }
  state.detail.show = true
}
const onView = (row: any) => {
  state.detail.transfer = {
    mode: 'view',
    row
  }
  state.detail.show = true
}
const onEdit = (row: any) => {
  state.detail.transfer = {
    mode: 'edit',
    row
  }
  state.detail.show = true
}
const onDel = (row: any) => {}
const actions: TableAction[] = [
  {
    key: 'add',
    text: '新增',
    type: 'primary',
    plain: false,
    onclick: onAdd,
    limit: 'none',
    position: 'left'
  },
  {
    key: 'view',
    text: '查看',
    type: 'primary',
    plain: true,
    onclick: onView,
    limit: 'one'
  },
  {
    key: 'view',
    text: '编辑',
    type: 'primary',
    plain: true,
    onclick: onEdit,
    limit: 'one'
  },
  {
    key: 'del',
    text: '删除',
    type: 'text',
    confirm: '确定要删除吗？',
    onclick: onDel,
    limit: 'one'
  }
]
</script>

<style lang="less" scoped>
.dialog {
  height: 600px;
  :deep(.cacp-group__container) {
    padding-left: 0;
    padding-right: 0;
  }
  .el-divider--horizontal {
    border-top: 1px solid #e5e8ef;
  }
  :deep(.el-form-item__content) {
    padding-right: 26px;
  }
}
</style>