vent-template/src/views/vent/monitorManager/airDoor/components/operationModal.vue

<template>
  <div class="operation-modal">
    <a-modal v-model:visible="Visible" width="1200px" title="操作日志" :footer="null" centered destroyOnClose
      @cancel="handleCancel">
      <a-tabs v-model:activeKey="activeKey" @change="tabChange">
        <a-tab-pane key="0" tab="读取规则日志">
          <a-form :model="formState" layout="inline" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
            autocomplete="off">
            <a-form-item label="操作类型">
              <a-select v-model:value="formState.operationType" style="width: 220px">
                <a-select-option v-for="(item, index) in OptionList" :key="index" :value="item.value">{{ item.label
                  }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-button type="primary" preIcon="ant-design:search-outlined" @click="getSearch">查询</a-button>
            <a-button type="primary" preIcon="ant-design:sync-outlined" @click="getReset">重置</a-button>
          </a-form>
          <a-table size="small" :dataSource="tableData" :columns="columns" :scroll="{ y: 420 }" :pagination="pagination"
            @change="pageChange">

          </a-table>
        </a-tab-pane>
        <a-tab-pane key="1" tab="读取集控风门日志">
          <a-form :model="formState" layout="inline" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
            autocomplete="off">
            <a-form-item label="操作类型">
              <a-select v-model:value="formState.nctrltype" style="width: 220px">
                <a-select-option v-for="(item, index) in controlOptionList" :key="index" :value="item.value">{{
                  item.label
                  }}</a-select-option>
              </a-select>
            </a-form-item>
            <a-button type="primary" preIcon="ant-design:search-outlined" @click="getSearch">查询</a-button>
            <a-button type="primary" preIcon="ant-design:sync-outlined" @click="getReset">重置</a-button>
          </a-form>
          <a-table size="small" :dataSource="controlTableData" :columns="controlColumns" :scroll="{ y: 420 }"
            :pagination="pagination" @change="pageChange">
            <template #action="{ record }">
              <a class="table-action-link" @click="handleSpDetail(record)">详情</a>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
      <!-- 集控风门详情 -->
      <a-modal v-model:visible="visibleDetail" width="800px" title="详情信息" :footer="null" centered destroyOnClose>
        <a-table size="small" :dataSource="detailTableData" :columns="detailColumns" :scroll="{ y: 420 }"
          :pagination="false"></a-table>
      </a-modal>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect } from 'vue'
import { pagination, columns, controlColumns, detailColumns, OptionList, controlOptionList } from '../airdoor.data'
import { GetSyncRuleOperationLog, GetSyncRuleExecLog } from '../airdoor.api'

let props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
})

let Visible = ref(false)
let activeKey = ref('0')
let tableData = ref<any[]>([])
let controlTableData = ref<any[]>([])
//集控风门详情弹窗
let visibleDetail = ref(false)
let detailTableData = ref<any[]>([])
//操作类型
let formState = reactive({
  operationType: '',
  nctrltype: "",
})
let $emit = defineEmits(['handleCancel'])
//tabs选项切换
function tabChange(val) {
  activeKey.value = val
  pagination.current = 1
  pagination.total = 0
  formState.nctrltype = ''
  formState.operationType = ''
  switch (activeKey.value) {
    case '0':
      getTableData()
      break;
    case '1':
      getControlTableData()
      break;
  }
}
//读写规则日志列表
async function getTableData() {
  let res = await GetSyncRuleOperationLog({ pageNo: pagination.current, pageSize: pagination.pageSize, operationType: formState.operationType })
  console.log(res, '读写规则日志列表---')
  tableData.value = res.records || []
  pagination.total = res.total
}
//集控风门日志列表
async function getControlTableData() {
  let res = await GetSyncRuleExecLog({ pageNo: pagination.current, pageSize: pagination.pageSize, nctrltype: formState.nctrltype })
  console.log(res, '集控风门列表---')
  controlTableData.value = res.records || []
  pagination.total = res.total
}
//集控风门详情
function handleSpDetail(record) {
  visibleDetail.value = true
  let detailData = JSON.parse(record.failedDetailJson)
  console.log(detailData, '详情数据---')
  detailTableData.value = detailData
}

//切换分页
function pageChange(val) {
  pagination.current = val.current;
  pagination.pageSize = val.pageSize;
  if (activeKey.value == '0') {
    getTableData();
  } else {
    getControlTableData()
  }
}
//查询
function getSearch() {
  pagination.current = 1
  if (activeKey.value == '0') {
    getTableData();
  } else {
    getControlTableData()
  }

}
//重置
function getReset() {
  pagination.current = 1
  if (activeKey.value == '0') {
    formState.operationType = ''
    getTableData();
  } else {
    formState.nctrltype = ''
    getControlTableData()
  }
}
function handleCancel() {
  formState.nctrltype = ''
  formState.operationType = ''
  $emit('handleCancel', false)
}

watchEffect(() => {
  Visible.value = props.visible
  activeKey.value = '0'
  if (Visible.value) {
    getTableData()
  }
})
</script>

<style lang="less" scoped>
.zxm-tabs {
  margin: 0px 10px;
}

.zxm-form {
  margin-bottom: 15px;
}

.zxm-btn {
  margin: 0px 10px;
}

::v-deep .zxm-table-small {
  margin: 10px !important;
}
</style>