websocket更新，配置文件增加websocket地址

Ben Lin

2024-07-25 cdd0a28197fb9b432a45bbf9ebc0cfd8db939125

 src/views/tigerprojects/system/lowcode/normal/index.vue

@@ -4,65 +4,38 @@
 * @version: 
 * @Date: 2024-05-30 13:28:20
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-06-24 18:49:29
 * @LastEditTime: 2024-07-24 23:47:07
-->
<template>
  <div>
    <Suspense>
      <mainTable />
    </Suspense>
    <CustModal
      @register="registerCust"
      @success="custSuccess"
      :type="cType"
      :detailSlots="dtlSlots"
    >
      <!-- 用插槽自定义多表单 -->
      <template #[item.name] v-for="item in dtlSlots" :key="item.name">
        <BasicForm @register="useFormData[item.name][0]" v-if="useFormData[item.name]">
          <!-- 用插槽自定义弹出选择框 -->
          <template #[name]="{ field }" v-for="name in item.slots" :key="name">
            <a-button
              class="mt-1 ml-1"
              size="small"
              @click="handleCustClick(field)"
              :preIcon="item.preIcons[name]"
            />
            <GeneralModal
              @register="useModalData[name][0]"
              @success="(d, u) => handleEntSuccess(d, u, item.name)"
            />
          </template>
        </BasicForm>
        <!-- 自定义内容 -->
      </template>
    </CustModal>
  </div>
</template>
<script lang="ts" setup>
  import { Ref, h, onMounted, provide, ref, unref } from 'vue';
  import { Ref, defineAsyncComponent, h, onMounted, provide, ref, unref, watch } from 'vue';
  import mainTable from './mainTable.vue';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import { DeleteEntity, GetEnum, getEntity, getListByPage } from '/@/api/tigerapi/system';
  import { useRoute, useRouter } from 'vue-router';
  import { Tag, Tooltip } from 'ant-design-vue';
  import CustModal from '/@/views/components/CustModal.vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { isNullOrEmpty, isNullOrUnDef } from '/@/utils/is';
  import { custOnChange, OpenCustModal, GetUseModalData } from '../data';
  import { useModal } from '/@/components/Modal';
  import { custOnChange, OpenCustModal, GetUseModalData, initRoute } from '../data';
  import { useLocale } from '/@/locales/useLocale';
  import { uploadApi } from '/@/api/sys/upload';
  import { useGo } from '/@/hooks/web/usePage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { getRoleButtons } from '/@/api/sys/menu';
  import { useWebSocketStore } from '/@/store/modules/websocket';

  const { getLocale } = useLocale();
  const webSocketStore = useWebSocketStore();
  const { t } = useI18n();
  const route = useRoute();
  const { currentRoute } = useRouter();
  const go = useGo();
  const objParams = ref(JSON.parse(decodeURI(route.params?.id as string)));
  const entityName = ref(objParams.value.ID);
  const _columns = ref([]);
  const _searchFormSchema = ref([]);
  const _crudFormSchema = ref([]);
@@ -75,16 +48,27 @@
  const custImport = ref<any>(null);
  const isMounted = ref(false);
  const buttons = ref([]);
  const others = ref<any>(null);
  provide<Ref<any>>('objParams', objParams.value);
  const readyState = ref<number>(WebSocket.CONNECTING);
  const AuthOption = ref({
    BY_ORG: '',
    BY_PROD: '',
    BY_WH: '',
  });
  const keyFieldValues = ref<any>(null);
  provide<Ref<any>>('objParams', objParams);
  provide<Ref<any[]>>('_columns', _columns);
  provide<Ref<any[]>>('_searchFormSchema', _searchFormSchema);
  provide<Ref<any[]>>('_crudFormSchema', _crudFormSchema);
  provide<Ref<string>>('isExistSql', isExistSql);
  provide<Ref<any>>('others', others);

  const [registerCust, { openModal: openCustomModal, closeModal }] = useModal();

  provide<Ref<{}>>('AuthOption', AuthOption);
  provide<Ref<any>>('keyFieldValues', keyFieldValues);
  // 监听readyState变化
  watch(readyState, (newState) => {
    if (newState === WebSocket.CLOSED || newState === WebSocket.CLOSING) {
      // 尝试重连
      setTimeout(webSocketStore.connectWebSocket, 3000);
    }
  });
  onMounted(async () => {
    /* 用json获取列 */
    // _searchFormSchema.value = await fetchJson(
@@ -106,6 +90,7 @@
    // }
    // _columns.value = objs;

    webSocketStore.connectWebSocket();
    isMounted.value = false;
    /* 动态import实体名.ts的自定义方法 */
    try {
@@ -118,7 +103,11 @@
    const data = await getEntity({
      sqlcmd: "ASSEMBLY_NAME ='" + objParams.value.ID + "'",
      entityName: 'SYS_LOW_CODE',
      order: '',
    });
    AuthOption.value.BY_ORG = data.Data.Items[0].BY_ORG;
    AuthOption.value.BY_PROD = data.Data.Items[0].BY_PROD;
    AuthOption.value.BY_WH = data.Data.Items[0].BY_WH;
    var searchForms = JSON.parse(data.Data.Items[0].SEARCH_FORM_JSON);
    for (const i in searchForms) {
      if (
@@ -166,6 +155,7 @@
        _cruds[i].componentProps.api = uploadApi;
        _cruds[i].componentProps.multiple = false;
        _cruds[i].componentProps.maxNumber = 1;
        _cruds[i].componentProps.uploadParams = { entityName: objParams.value.ID };
        _cruds[i].rules = [{ required: true, message: '请选择上传文件' }];
      }
      if (_cruds[i].isexist == 'Y') {
@@ -207,46 +197,5 @@
        };
      };
    }
  }

  //弹出框确定返回
  function custSuccess(d) {
    // reload();
  }

  /**
   * @description: 各表单内弹出选择框选择成功后方法
   * @param {*} d
   * @param {*} u
   * @param {*} item
   * @return {*}
   */
  function handleEntSuccess(d, u, item) {
    /* 动态import实体名.ts的自定义方法 */
    try {
      import(`../entityts/${cType.value}.ts`).then((m) => {
        const [{ GetSelectSuccess }] = m.default();
        var values = GetSelectSuccess(d, u);
        selectVals.value = values; //保存弹出框选择的结果
        let _val = {};
        _val[d.returnFieldName] = values[d.returnFieldName];
        useFormData.value[item][1].setFieldsValue(_val);
      });
    } catch (e) {}
  }

  /**
   * @description: 打开自定义模态框
   * @param {*} item
   * @return {*}
   */
  function handleCustClick(item) {
    OpenCustModal(
      useModalData.value[item][1].openModal, //带入openModal方法
      cType.value,
      item,
      [],
      // selectVals.value['ROUTE_CODE'],
    ); //[openRvModal], selectVals.value['ID']这是自定义参数，按实际需求
  }
</script>