hvac-web/src/views/setup-protocol/ProtocolContent.vue

<script setup lang="ts">
import { computed, onMounted, ref, useTemplateRef } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { debounce } from 'lodash-es';

import { useDictData } from '@/hooks/dict-data';
import { useRequest } from '@/hooks/request';
import { t } from '@/i18n';
import { batchDeleleProtocolParam, getProtocolParamList } from '@/api';
import { DictCode, ProtocolType } from '@/constants';

import CustomParams from './CustomParams.vue';
import SelectStandardParams from './SelectStandardParams.vue';

import type { FormInstance } from 'ant-design-vue';
import type { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select';
import type { Key } from 'ant-design-vue/es/table/interface';
import type { CheckedType, FormRules, PageParams, ProtocolBaseInfo, ProtocolParamInfo } from '@/types';

interface Props {
  info: Partial<ProtocolBaseInfo>;
}

const props = defineProps<Props>();

const { dictData: protocolTypes, getDictData: getProtocolTypes } = useDictData(DictCode.AllProtocolType);
const { dictData: baudRateList, getDictData: getBaudRateList } = useDictData(DictCode.BaudRate);
const { dictData: readContinuousAddr, getDictData: getReadContinuousAddr } = useDictData(DictCode.ReadContinuousAddr);
const { dictData: byteOrderList, getDictData: getByteOrderList } = useDictData(DictCode.ByteOrder);
const { dictData: addrOrderList, getDictData: getAddrOrderList } = useDictData(DictCode.AddrOrder);

const isModbusRtuProtocol = computed(() => {
  return props.info.protocolType?.includes(ProtocolType.ModbusRTU);
});

const isModbusTcpProtocol = computed(() => {
  return props.info.protocolType?.includes(ProtocolType.ModbusTCP);
});

const isS7Protocol = computed(() => {
  return props.info.protocolType?.includes(ProtocolType.S7);
});

const formRef = ref<FormInstance>();

const rules = computed<FormRules<ProtocolBaseInfo>>(() => {
  return {
    protocolName: [
      {
        required: true,
        message: t('common.plzEnter', { name: t('setupProtocol.protocolName') }),
        trigger: 'blur',
      },
    ],
    protocolType: [
      {
        required: true,
        message: t('setupProtocol.plzSelectProtocolType'),
        trigger: 'blur',
      },
    ],
    deviceType: [
      {
        required: true,
        message: t('common.plzSelect', { name: t('setupProtocol.deviceType') }),
        trigger: 'blur',
      },
    ],
    dataBit: [
      {
        required: true,
        message: t('common.plzSelect', { name: t('setupProtocol.dataBit') }),
        trigger: 'blur',
      },
    ],
    parityBit: [
      {
        required: true,
        message: t('common.plzSelect', { name: t('setupProtocol.parityBit') }),
        trigger: 'blur',
      },
    ],
    stopBit: [
      {
        required: true,
        message: t('common.plzSelect', { name: t('setupProtocol.stopBit') }),
        trigger: 'blur',
      },
    ],
    baudRate: [
      {
        required: true,
        message: t('common.plzSelect', { name: t('setupProtocol.baudRate') }),
        trigger: 'blur',
      },
    ],
    dataSendInterval: [
      {
        required: true,
        message: t('common.plzEnter', { name: t('setupProtocol.dataSendInterval') }),
        trigger: 'blur',
      },
    ],
    highFreqSendInterval: [
      {
        required: true,
        message: t('common.plzEnter', { name: t('setupProtocol.highFreqSendInterval') }),
        trigger: 'blur',
      },
    ],
    readTimeout: [
      {
        required: true,
        message: t('common.plzEnter', { name: t('setupProtocol.readTimeout') }),
        trigger: 'blur',
      },
    ],
    nextDataReadDelay: [
      {
        required: true,
        message: t('common.plzEnter', { name: t('setupProtocol.nextDataReadDelay') }),
        trigger: 'blur',
      },
    ],
    nextRoundDataReadDelay: [
      {
        required: true,
        message: t('common.plzEnter', { name: t('setupProtocol.nextRoundDataReadDelay') }),
        trigger: 'blur',
      },
    ],
    byteOrder: [
      {
        required: true,
        message: t('common.plzSelect', { name: t('setupProtocol.byteOrder') }),
        trigger: 'blur',
      },
    ],
    addrOrder: [
      {
        required: true,
        message: t('common.plzSelect', { name: t('setupProtocol.addrOrder') }),
        trigger: 'blur',
      },
    ],
  };
});

const validateProtocolInfo = async () => {
  await formRef.value?.validate();
};

onMounted(() => {
  getProtocolTypes();
  getBaudRateList();
  getReadContinuousAddr();
  getByteOrderList();
  getAddrOrderList();
  getCurrentProtocolParams();
});

const handleReadContinuousAddrChange = (checked: CheckedType) => {
  const [first, second] = readContinuousAddr.value;

  if (checked === first?.dictValue) {
    props.info.readContinuousAddrCode = Number(first?.dictEngValue);
  } else {
    props.info.readContinuousAddrCode = Number(second?.dictEngValue);
  }
};

const handleByteOrderChange = (_value: SelectValue, option: DefaultOptionType) => {
  props.info.byteOrderCode = option.key;
};

const handleAddrOrderChange = (_value: SelectValue, option: DefaultOptionType) => {
  props.info.addrOrderCode = option.key;
};

const paramList = ref<ProtocolParamInfo[]>([]);
const paramTotal = ref(0);
const paramNameOrCode = ref('');
const pageParams = ref<PageParams>({
  pageIndex: 1,
  pageSize: 10,
  pageSorts: [
    {
      column: 'id',
      asc: true,
    },
  ],
});

const { isLoading, handleRequest } = useRequest();

const getCurrentProtocolParams = () => {
  handleRequest(async () => {
    const { id } = props.info;

    if (!id) {
      return;
    }

    const { records, total } = await getProtocolParamList({
      ...pageParams.value,
      baseInfoId: id,
      paramName: paramNameOrCode.value,
      paramCode: paramNameOrCode.value,
    });

    paramList.value = records;
    paramTotal.value = total;
  });
};

const handleParamNameOrCodeChange = debounce(() => {
  pageParams.value.pageIndex = 1;
  selectedParamIds.value = [];
  getCurrentProtocolParams();
}, 300);

const handlePageChange = (page: number, pageSize: number) => {
  pageParams.value.pageIndex = page;
  pageParams.value.pageSize = pageSize;
  selectedParamIds.value = [];
  getCurrentProtocolParams();
};

const selectedParamIds = ref<number[]>([]);

const handleParamSelectChange = (selectedRowKeys: Key[]) => {
  selectedParamIds.value = selectedRowKeys as number[];
};

const deleteSelectedParams = () => {
  Modal.confirm({
    title: t('setupProtocol.confirmDeleteParams'),
    async onOk() {
      try {
        await batchDeleleProtocolParam(selectedParamIds.value);
        selectedParamIds.value = [];
        message.success(t('setupProtocol.deleteParamsSuccessful'));

        pageParams.value.pageIndex = 1;
        getCurrentProtocolParams();
      } catch (err) {
        message.error((err as Error).message);
        console.error(err);
      }
    },
  });
};

const customParamsRef = useTemplateRef('customParams');
const selectStandardParamsRef = useTemplateRef('selectStandardParams');

defineExpose({
  validateProtocolInfo,
});
</script>

<template>
  <div>
    <AForm class="protocol-container" ref="formRef" :model="info" :rules="rules" layout="vertical">
      <div class="protocol-label">{{ $t('common.basicInfo') }}</div>
      <ARow>
        <ACol :span="6">
          <AFormItem :label="$t('setupProtocol.protocolName')" name="protocolName">
            <AInput v-model:value="info.protocolName" class="protocol-input" :placeholder="$t('common.plzEnter')" />
          </AFormItem>
        </ACol>
        <ACol :span="6">
          <AFormItem :label="$t('setupProtocol.protocolType')" name="protocolType">
            <ASelect
              v-model:value="info.protocolType"
              class="protocol-input"
              :placeholder="$t('common.plzSelect')"
              disabled
            >
              <ASelectOption v-for="item in protocolTypes" :key="item.dictValueId" :value="item.dictValue">
                {{ item.dictValue }}
              </ASelectOption>
            </ASelect>
          </AFormItem>
        </ACol>
        <ACol :span="6">
          <AFormItem :label="$t('setupProtocol.deviceType')" name="deviceType">
            <ASelect
              v-model:value="info.deviceType"
              class="protocol-input"
              :placeholder="$t('common.plzSelect')"
              disabled
            >
              <!-- <ASelectOption :value=""></ASelectOption> -->
            </ASelect>
          </AFormItem>
        </ACol>
        <ACol v-if="isModbusRtuProtocol" :span="6">
          <AFormItem :label="$t('setupProtocol.dataBit')" name="dataBit">
            <ARadioGroup v-model:value="info.dataBit">
              <ARadio :value="5">5</ARadio>
              <ARadio :value="6">6</ARadio>
              <ARadio :value="7">7</ARadio>
              <ARadio :value="8">8</ARadio>
            </ARadioGroup>
          </AFormItem>
        </ACol>
        <ACol v-if="isModbusRtuProtocol" :span="6">
          <AFormItem :label="$t('setupProtocol.parityBit')" name="parityBit">
            <ARadioGroup v-model:value="info.parityBit">
              <ARadio value="N">N</ARadio>
              <ARadio value="O">O</ARadio>
              <ARadio value="E">E</ARadio>
            </ARadioGroup>
          </AFormItem>
        </ACol>
        <ACol v-if="isModbusRtuProtocol" :span="6">
          <AFormItem :label="$t('setupProtocol.stopBit')" name="stopBit">
            <ARadioGroup v-model:value="info.stopBit">
              <ARadio value="1">1</ARadio>
              <ARadio value="1.5">1.5</ARadio>
              <ARadio value="2">2</ARadio>
            </ARadioGroup>
          </AFormItem>
        </ACol>
        <ACol v-if="isModbusRtuProtocol" :span="6">
          <AFormItem :label="$t('setupProtocol.baudRate')" name="baudRate">
            <ASelect v-model:value="info.baudRate" class="protocol-input" :placeholder="$t('common.plzSelect')">
              <ASelectOption v-for="item in baudRateList" :key="item.dictValueId" :value="Number(item.dictValue)">
                {{ item.dictValue }}
              </ASelectOption>
            </ASelect>
          </AFormItem>
        </ACol>
        <ACol :span="6">
          <AFormItem :label="$t('setupProtocol.dataSendInterval')" name="dataSendInterval">
            <AInputNumber
              v-model:value="info.dataSendInterval"
              class="protocol-input"
              :placeholder="$t('common.plzEnter')"
              addon-after="s"
              :min="0"
              :precision="0"
            />
          </AFormItem>
        </ACol>
        <ACol :span="6">
          <AFormItem :label="$t('setupProtocol.highFreqSendInterval')" name="highFreqSendInterval">
            <AInputNumber
              v-model:value="info.highFreqSendInterval"
              class="protocol-input"
              :placeholder="$t('common.plzEnter')"
              addon-after="s"
              :min="0"
              :precision="0"
            />
          </AFormItem>
        </ACol>
        <ACol :span="6">
          <AFormItem :label="$t('setupProtocol.readTimeout')" name="readTimeout">
            <AInputNumber
              v-model:value="info.readTimeout"
              class="protocol-input"
              :placeholder="$t('common.plzEnter')"
              addon-after="ms"
              :min="0"
              :precision="0"
            />
          </AFormItem>
        </ACol>
        <ACol :span="6">
          <AFormItem :label="$t('setupProtocol.nextDataReadDelay')" name="nextDataReadDelay">
            <AInputNumber
              v-model:value="info.nextDataReadDelay"
              class="protocol-input"
              :placeholder="$t('common.plzEnter')"
              addon-after="ms"
              :min="0"
              :precision="0"
            />
          </AFormItem>
        </ACol>
        <ACol :span="6">
          <AFormItem :label="$t('setupProtocol.nextRoundDataReadDelay')" name="nextRoundDataReadDelay">
            <AInputNumber
              v-model:value="info.nextRoundDataReadDelay"
              class="protocol-input"
              :placeholder="$t('common.plzEnter')"
              addon-after="ms"
              :min="0"
              :precision="0"
            />
          </AFormItem>
        </ACol>
        <ACol v-if="!isS7Protocol" :span="6">
          <AFormItem :label="$t('setupProtocol.readContinuousAddr')" name="readContinuousAddr">
            <ASwitch
              v-model:checked="info.readContinuousAddr"
              :checked-value="readContinuousAddr[1]?.dictValue"
              :un-checked-value="readContinuousAddr[0]?.dictValue"
              :checked-children="$t('common.on')"
              :un-checked-children="$t('common.off')"
              @change="handleReadContinuousAddrChange"
            />
          </AFormItem>
        </ACol>
        <ACol v-if="!isS7Protocol" :span="6">
          <AFormItem :label="$t('setupProtocol.readContinuousAddrLength')" name="readContinuousAddrLength">
            <AInputNumber
              v-model:value="info.readContinuousAddrLength"
              class="protocol-input"
              :placeholder="$t('common.plzEnter')"
              :min="0"
              :precision="0"
            />
          </AFormItem>
        </ACol>
      </ARow>
      <div v-if="!isS7Protocol" class="protocol-label advanced-label">{{ $t('common.advancedSettings') }}</div>
      <ARow v-if="!isS7Protocol" :gutter="[4, 30]">
        <ACol :span="6">
          <AFormItem :label="$t('setupProtocol.byteOrder')" name="byteOrder">
            <ASelect
              v-model:value="info.byteOrder"
              class="protocol-input"
              :placeholder="$t('common.plzSelect')"
              @change="handleByteOrderChange"
            >
              <ASelectOption v-for="item in byteOrderList" :key="item.dictEngValue" :value="item.dictValue">
                {{ item.dictValue }}
              </ASelectOption>
            </ASelect>
          </AFormItem>
        </ACol>
        <ACol :span="6">
          <AFormItem :label="$t('setupProtocol.addrOrder')" name="addrOrder">
            <ASelect
              v-model:value="info.addrOrder"
              class="protocol-input"
              :placeholder="$t('common.plzSelect')"
              @change="handleAddrOrderChange"
            >
              <ASelectOption v-for="item in addrOrderList" :key="item.dictEngValue" :value="item.dictValue">
                {{ item.dictValue }}
              </ASelectOption>
            </ASelect>
          </AFormItem>
        </ACol>
      </ARow>
    </AForm>
    <div class="protocol-label params-label">
      {{ $t('setupProtocol.protocolParams') }}
      <span class="protocol-params-tip">{{ $t('setupProtocol.protocolTypeTipForPlc') }}</span>
    </div>
    <div class="protocol-container protocol-params-query">
      <AInput
        v-model:value="paramNameOrCode"
        class="protocol-input"
        :placeholder="$t('setupProtocol.plzEnterParamOrCode')"
        allow-clear
        @change="handleParamNameOrCodeChange"
      />
      <div>
        <AButton danger :disabled="selectedParamIds.length === 0" @click="deleteSelectedParams">
          {{ $t('setupProtocol.deleteSelected') }}
        </AButton>
        <AButton @click="customParamsRef?.showView">{{ $t('setupProtocol.addCustomParams') }}</AButton>
        <AButton @click="selectStandardParamsRef?.showView" type="primary">
          {{ $t('setupProtocol.addStandardParams') }}
        </AButton>
      </div>
    </div>
    <ATable
      :data-source="paramList"
      row-key="id"
      :row-selection="{ selectedRowKeys: selectedParamIds, onChange: handleParamSelectChange }"
      :scroll="{ x: 2800 }"
      :loading="isLoading"
      :pagination="{
        current: pageParams.pageIndex,
        pageSize: pageParams.pageSize,
        total: paramTotal,
        showSizeChanger: true,
        hideOnSinglePage: false,
        showTotal: (total) => $t('common.pageTotal', { total }),
        onChange: handlePageChange,
      }"
    >
      <ATableColumn
        :title="$t('setupProtocol.protocolParamFields.customParamName')"
        data-index="paramName"
        :width="180"
        fixed="left"
      />
      <ATableColumn :title="$t('setupProtocol.protocolParamFields.result')" data-index="result" :width="110" />
      <ATableColumn
        :title="$t('setupProtocol.protocolParamFields.platformParamName')"
        data-index="platformParamName"
        :width="170"
      />
      <ATableColumn
        :title="$t('setupProtocol.protocolParamFields.platformParamCode')"
        data-index="platformParamCode"
        :width="280"
      />
      <ATableColumn
        :title="$t('setupProtocol.protocolParamFields.gatewayParamName')"
        data-index="gatewayParamName"
        :width="200"
      />
      <ATableColumn
        :title="$t('setupProtocol.protocolParamFields.gatewayParamCode')"
        data-index="gatewayParamCode"
        :width="200"
      />
      <ATableColumn :title="$t('setupProtocol.protocolParamFields.unit')" data-index="unit" />
      <ATableColumn :title="$t('setupProtocol.protocolParamFields.module')" data-index="module" />
      <ATableColumn :title="$t('setupProtocol.protocolParamFields.readWriteType')" data-index="readWriteType" />
      <ATableColumn :title="$t('setupProtocol.protocolParamFields.readFunctionCode')" data-index="readFuncCode" />
      <ATableColumn :title="$t('setupProtocol.protocolParamFields.writeFunctionCode')" data-index="writeFuncCode" />
      <ATableColumn :title="$t('setupProtocol.protocolParamFields.registerAddress')" data-index="registerAddr" />
      <ATableColumn
        :title="$t('setupProtocol.protocolParamFields.parsingType')"
        data-index="parsingType"
        :width="150"
      />
      <ATableColumn :title="$t('setupProtocol.protocolParamFields.addressLength')" data-index="addrLength" />
      <ATableColumn :title="$t('setupProtocol.protocolParamFields.dataType')" data-index="dataType" />
      <ATableColumn :title="$t('setupProtocol.protocolParamFields.coefficient')" data-index="coefficient" />
      <ATableColumn
        :title="$t('setupProtocol.protocolParamFields.isHighFrequencyParameter')"
        data-index="isHighFreqParam"
        :width="150"
      />
      <ATableColumn
        :title="$t('setupProtocol.protocolParamFields.writeCalculationFormula')"
        data-index="writeCalcFormula"
      />
      <ATableColumn
        :title="$t('setupProtocol.protocolParamFields.readCalculationFormula')"
        data-index="readCalcFormula"
      />
      <ATableColumn :title="$t('setupProtocol.protocolParamFields.decimalPlaces')" data-index="decimalPlace" />
    </ATable>
    <CustomParams
      ref="customParams"
      :protocol-id="info.id"
      :is-modbus-rtu-protocol="isModbusTcpProtocol"
      :is-modbus-tcp-protocol="isModbusTcpProtocol"
      :is-s7-protocol="isS7Protocol"
      @refresh-list="getCurrentProtocolParams"
    />
    <SelectStandardParams ref="selectStandardParams" :protocol-id="info.id" @refresh-list="getCurrentProtocolParams" />
  </div>
</template>

<style lang="scss" scoped>
.protocol-container {
  width: 62%;
}

.protocol-label {
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: var(--antd-color-text);

  &.advanced-label {
    margin-top: 46px;
  }

  &.params-label {
    margin-top: 56px;
  }
}

.protocol-input {
  width: 224px;
}

.protocol-params-tip {
  font-size: 11px;
  font-weight: normal;
  color: var(--antd-color-text-tertiary);
}

.protocol-params-query {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;

  button + button {
    margin-left: 23px;
  }
}
</style>