gas-injection/src/views/vent/monitorManager/ledMonitor/index.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="p-10px device-manager-box">
    <!-- 配置预警设备 -->
    <a-button class="vent-margin-b-5 mr-5px" type="primary" @click="handleDisplay()">批量下发</a-button>
    <a-popconfirm title="停止播放" @confirm="handleStop()">
      <a-button class="vent-margin-b-5 mr-5px" type="primary">批量停止</a-button>
    </a-popconfirm>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #operation="{ record }">
        <a class="action-link" @click="handleChange(record)">切换节目</a>
        <a class="action-link ml-10px" @click="handleDisplay(record)">下发</a>
        <a-popconfirm title="停止播放" @confirm="handleStop(record)">
          <a class="action-link ml-10px">停止播放</a>
        </a-popconfirm>
      </template>
    </BasicTable>
    <BasicModal title="节目表单" @register="register1" @ok="onSubmit1">
      <BasicForm @register="registerForm1" />
    </BasicModal>
    <BasicModal title="下发内容表单" @register="register2" @ok="onSubmit2">
      <BasicForm @register="registerForm2" />
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, nextTick } from 'vue';
  import { programSchema, displaySchema } from './led.data';
  // import BaseModal from './BaseModal.vue';
  import { message } from 'ant-design-vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import { BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { changeProgram, inputDisplay, list, stopVoice } from './led.api';
  import { get } from 'lodash-es';

  /** 等待操作的led屏幕列表 */
  let ledList: any[] = [];

  const [register1, modalContext1] = useModal();
  const [register2, modalContext2] = useModal();
  const [registerForm1, formContext1] = useForm({
    schemas: programSchema,
    showActionButtonGroup: false,
  });
  const [registerForm2, formContext2] = useForm({
    schemas: displaySchema,
    showActionButtonGroup: false,
  });
  const { tableContext } = useListPage({
    tableProps: {
      api: list,
      showActionColumn: true,
      actionColumn: {
        dataIndex: 'operation',
        title: '操作',
        width: 120,
        slots: { customRender: 'operation' },
      },
      rowSelection: { type: 'checkbox' },
      useSearchForm: false,
      title: 'LED列表',
    },
  });
  const [registerTable, { setColumns, reload, getSelectRows }, { rowSelection }] = tableContext;

  /** 切换节目 */
  function handleChange(record) {
    modalContext1.openModal();
    nextTick(() => {
      formContext1.setFieldsValue({
        deviceId: record.deviceId,
        id: record.other1,
      });
      // 根据每个显示屏的节目初始化节目下拉框
      formContext1.updateSchema({
        field: 'id',
        componentProps: {
          options: get(record, 'programList', []).map((e) => {
            return {
              value: e.id,
              label: e.programName,
              programType: e.programType,
            };
          }),
        },
      });
    });
  }

  async function onSubmit1() {
    await formContext1.validateFields();
    const values = formContext1.getFieldsValue();
    await changeProgram(values);
    reload();
    modalContext1.closeModal();
  }

  /** 内容下发 */
  function handleDisplay(record?: any) {
    if (record) {
      ledList = [record];
      modalContext2.openModal();
      nextTick(() => {
        formContext2.setFieldsValue(record);
      });
    } else {
      const selection = getSelectRows();
      if (!selection.length) return message.info('未选择项目');

      ledList = selection;
      modalContext2.openModal();
      nextTick(() => {
        formContext2.resetFields();
      });
    }
  }

  async function onSubmit2() {
    await formContext2.validateFields();
    const values = formContext2.getFieldsValue();
    inputDisplay({
      deviceIdList: ledList.map((e) => e.deviceId), //设备id,可以传多个
      ...values,
    });
    reload();
    modalContext2.closeModal();
  }

  /** 停止播放 */
  function handleStop(record?: any) {
    if (record) {
      ledList = [record];
    } else {
      const selection = getSelectRows();
      if (!selection.length) return message.info('未选择项目');

      ledList = selection;
    }

    stopVoice(ledList.map((e) => e.deviceId));
  }

  onMounted(async () => {
    setColumns(getTableHeaderColumns(`led_list`));
  });
</script>