hsq-pro/src/views/vent/deviceManager/comment/faultConfigTable/index.vue

<template>
  <div class="fault-config">
    <a-button type="primary" @click="handleAdd">新增</a-button>
    <a-table size="small" :dataSource="dataSource" :columns="columns" :scroll="{ y: 620 }" :pagination="pagination"
      @change="pageChange">
      <template #action="{ record }">
        <a class="table-action-link" @click="handleEdit(record)">编辑</a>
        <a class="table-action-link" @click="handleDelete(record)">删除</a>
      </template>
    </a-table>
    <!-- 新增、编辑弹窗 -->
    <a-modal v-model:visible="visibleModal" width="650px" :title="titleModal" :footer="null" centered destroyOnClose
      @cancel="handleCancel">
      <OperationTable ref="operationModal" :gateId="deviceId" :recordData="recordData" :cameraData="cameraData" @handleClose="handleClose">
      </OperationTable>
    </a-modal>

  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { columns } from './faultConfig.data'
import { list, deleteById, cameraList } from './faultConfig.api'
import OperationTable from './components/operationTable.vue'

let props = defineProps({
  deviceId: {
    type: String,
    default: ''
  }
})

let operationModal = ref()
let dataSource = ref<any[]>([]);
//分页参数配置
let pagination = reactive({
  current: 1, // 当前页码
  pageSize: 10, // 每页显示条数
  total: 0, // 总条目数，后端返回
  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
  showSizeChanger: true, // 是否可改变每页显示条数
  pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
});
let visibleModal = ref(false)//是否显示新增、编辑弹窗
let titleModal = ref('')
let recordData = reactive({})
let cameraData = ref<any[]>([])

//列表查询
async function getList() {
  let res = await list({ pageNo: pagination.current, pageSize: pagination.pageSize, gateId: props.deviceId })
  console.log(res, '风门故障配置列表---')
  dataSource.value=res.records || []
  pagination.total=res.total
}
//分页切换
function pageChange(val) {
  pagination.current = val.current;
  pagination.pageSize = val.pageSize;
  getList()
}
//新增
function handleAdd() {
  titleModal.value = '新增'
  visibleModal.value = true
}
function handleCancel() {
  operationModal.value.resetFields()
  visibleModal.value = false
}
//编辑
function handleEdit(record) {
  titleModal.value = '编辑'
  recordData = Object.assign({}, record)
  visibleModal.value = true
}
//删除
async function handleDelete(record) {
  let res = await deleteById({ id: record.id })
  console.log(res, '删除')
  getList()
}
function handleClose() {
  visibleModal.value = false
  getList()
}
//获取摄像头列表
async function getCameraList() {
  let res = await cameraList({ pageNo: 1, pageSize: 100, deviceid: props.deviceId })
  if (res && res.records.length) {
    cameraData.value = res.records.map(el => {
      return {
        label: el.name,
        value: el.id
      }
    })
  }
}
onMounted(() => {
  getList()
  getCameraList()
})
</script>

<style lang="less" scoped></style>