mky-vent-base/src/views/vent/deviceManager/comment/warningTabel/index2.vue

<template>
  <!-- 预警条目管理 -->
  <div class="">
    <BasicTable @register="registerTable" :columns="workFaceWarningColumns">
      <template #tableTitle>
        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="openModal(true, {})">新增</a-button>
      </template>
      <template #action="{ record }">
        <a class="table-action-link" @click="openModalFn(record)">编辑</a>
        <a-popconfirm title="确定删除?" @confirm="handleDelete(record)">
          <a class="table-action-link">删除</a>
        </a-popconfirm>
      </template>
    </BasicTable>
    <BaseModal @register="register" @add="onSubmit" @update="onSubmit" :destroy-on-close="true" :form-schemas="workFaceWarningSchemas" />
  </div>
</template>

<script lang="ts" name="system-user" setup>
  import { BasicTable, FormSchema } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import BaseModal from './BaseModal1.vue';
  import { useModal } from '/@/components/Modal';
  import { workFaceWarningColumns, workFaceWarningFormSchemas } from './warning.data';
  import { warningLogList, warningLogAdd, warningLogEdit, warningLogDeleteById } from './warning.api';

  const props = defineProps({
    deviceId: { type: String },
  });

  const { tableContext } = useListPage({
    tableProps: {
      api: warningLogList.bind(null, { sysId: props.deviceId }),
      scroll: { y: 390 },
      size: 'small',
      // expandRowByClick: true,
      clickToRowSelect: true,
      useSearchForm: false,
      rowSelection: {
        columnWidth: 20,
      },
      showTableSetting: false,
      formConfig: {
        disabled: true,
        showResetButton: false,
        showSubmitButton: false,
      },
    },
  });
  const [registerTable, { reload }] = tableContext;

  const [register, { openModal, closeModal }] = useModal();

  function openModalFn(record?) {
    if (record) {
      openModal(true, {
        isUpdate: true,
        record,
      });
    } else {
      openModal(true, {
        isUpdate: false,
      });
    }
  }

  async function handleDelete(record) {
    await warningLogDeleteById(record.id);
  }

  async function onSubmit(flag, values) {
    // 提交数据弹窗
    if (flag == 'update') {
      await warningLogEdit(values);
    } else {
      await warningLogAdd({ ...values, sysId: props.deviceId });
    }
    closeModal();
    //刷新列表
    reload();
  }

  const workFaceWarningSchemas: FormSchema[] = [
    ...workFaceWarningFormSchemas,
    {
      label: '关联条目',
      field: 'relatedEntries',
      component: 'ApiSelect',
      componentProps: {
        labelField: 'alarmName',
        valueField: 'id',
        resultField: 'records',
        api: warningLogList.bind(null, { sysId: props.deviceId }),
      },
    },
  ];
</script>

<style scoped></style>