mky-vent-base/src/hooks/vent/useSystemSelect.ts

import { ref, nextTick } from 'vue';
import { defHttp } from '/@/utils/http/axios';

type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
type OptionType = { id: string; strsystype: string; systemname: string };
const getTableList = (params) => defHttp.get({ url: '/safety/ventanalyManageSystem/list', params });
const systemList = (params) => defHttp.post({ url: '/monitor/device', params });

/**
 * 用于setup关于系统设备下拉框相关的内容
 * @param sysType 对应的设备/类型码，可在设备管理 -> 设备类型管理里查阅
 * @param changeModalType 即 optionValue（选择了的设备）变化后的回调，参数为该 option
 */
export function useSystemSelect(sysType: string, changeModalType?: (param) => {}) {
  const options = ref<OptionType[]>([]);
  const optionValue = ref('');
  const deviceList = ref<DeviceType[]>([]);
  const deviceActive = ref('');
  const deviceType = ref('');
  const deviceValue = ref({});
  const isRefresh = ref(true);

  async function getDeviceList() {
    const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
    const result = res.msgTxt;
    const deviceArr = <DeviceType[]>[];
    result.forEach((item) => {
      const data = item['datalist'].filter((data: any) => {
        const readData = data.readData;
        return Object.assign(data, readData);
      });
      if (item.type != 'sys') {
        deviceArr.unshift({
          deviceType: item.type,
          deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'],
          datalist: data,
        });
      }
    });
    deviceList.value = deviceArr;
    deviceActive.value = deviceArr[0].deviceType;
    deviceChange(0);
  }

  async function getSysDataSource() {
    const res = await getTableList({ strtype: sysType, pagetype: 'normal' });
    if (options.value.length == 0) {
      // 初始时选择第一条数据
      options.value = res.records || [];
      if (!optionValue.value) {
        optionValue.value = options.value[0]['id'];
        getDeviceList();
        if (changeModalType) changeModalType(options.value[0]);
      }
    }
  }

  function deviceChange(index) {
    deviceValue.value = deviceList.value[index];
    deviceActive.value = deviceType.value = deviceValue.value['deviceType'];
    isRefresh.value = false;
    nextTick(() => {
      isRefresh.value = true;
    });
  }

  async function getSelectRow(deviceID) {
    const currentData = options.value.find((item: any) => {
      return item.id == deviceID;
    });
    optionValue.value = deviceID;
    if (changeModalType) changeModalType(currentData);
    getDeviceList();
  }

  return {
    /** 下拉框选项 */
    options,
    /** 下拉框目前选择的值 */
    optionValue,
    /** 设备列表 */
    deviceList,
    deviceActive,
    deviceType,
    isRefresh,
    /** 选中了的具体设备 */
    deviceValue,
    getSysDataSource,
    getSelectRow,
    deviceChange,
  };
}