fix: 调整网络错误的提示形式，出现网络超时不再踢出登录

fix: 修复当key为数字类型时，联想弹层第一次选择显示title失败的bug
2024-03-20 15:02:42 +08:00
parent 8cb2bcc9ad
commit 756e92f00d
4 changed files with 434 additions and 416 deletions
--- a/src/components/Designer/src/types/index.ts
+++ b/src/components/Designer/src/types/index.ts
@ -121,6 +121,9 @@ export const basicComponents = [
        typeName: t('计数组件'),
        type: 'number',
        options: {
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            responsive: false,
            width: '100%',
            span: '',
            defaultValue: 0,
@ -1165,6 +1168,9 @@ export const infoComponents = [
        typeName: t('人员选择'),
        type: 'user',
        options: {
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            responsive: false,
            span: '',
            width: '100%',
            defaultValue: '',
--- a/src/components/MultiplePopup/src/MultiplePopup.vue
+++ b/src/components/MultiplePopup/src/MultiplePopup.vue
@ -2,71 +2,71 @@
    <div>
        <a-input
            v-model:value="popupValue"
-      :placeholder="placeholder"
-      :addonBefore="addonBefore"
            :addonAfter="addonAfter"
-      :disabled="disabled"
+            :addonBefore="addonBefore"
            :bordered="bordered"
-      autoComplete="off"
+            :disabled="disabled"
+            :placeholder="placeholder"
            :size="size"
            allowClear
-      @click="showDialog"
+            autoComplete="off"
            @change="handleChange"
+            @click="showDialog"
        >
-      <template #prefix v-if="prefix">
-        <Icon :icon="prefix" />
+            <template v-if="prefix" #prefix>
+                <Icon :icon="prefix"/>
            </template>
-      <template #suffix v-if="suffix">
-        <Icon :icon="suffix" />
+            <template v-if="suffix" #suffix>
+                <Icon :icon="suffix"/>
            </template>
        </a-input>
        <FormItemRest>
            <MultipleSelect
                ref="MultipleSelectRef"
                v-model:multipleDialog="multipleDialog"
-        :popupType="popupType"
-        :dataSourceOptions="dataSourceOptions"
-        :params="params"
-        v-model:value="defaultVal"
                v-model:popupValue="popupValue"
-        :labelField="labelField"
-        :valueField="valueField"
+                v-model:selectedDataSource="selectedDataSourceVal"
+                v-model:value="defaultVal"
+                :apiConfig="apiConfig"
+                :dataSourceOptions="dataSourceOptions"
                :datasourceType="datasourceType"
                :dicOptions="dicOptions"
-        :apiConfig="apiConfig"
-        v-model:selectedDataSource="selectedDataSourceVal"
+                :labelField="labelField"
                :mainKey="mainKey"
+                :params="params"
+                :popupType="popupType"
                :subTableIndex="index"
-        @get-list="getList"
+                :valueField="valueField"
                @submit="handleSubmit"
+                @get-list="getList"
            />
        </FormItemRest>
    </div>
 </template>
 <script lang="ts" setup>
-  import { ref, watch, nextTick, inject, onMounted } from 'vue';
-  import { Form } from 'ant-design-vue';
-  import { Icon } from '/@/components/Icon';
+    import {ref, watch, nextTick, inject, onMounted} from 'vue';
+    import {Form} from 'ant-design-vue';
+    import {Icon} from '/@/components/Icon';
    import MultipleSelect from './components/MultipleSelect.vue';
-  import { camelCaseString, isValidJSON } from '/@/utils/event/design';
+    import {camelCaseString, isValidJSON} from '/@/utils/event/design';

    const props = defineProps({
-    popupType: { type: String },
-    value: { type: String },
-    labelField: { type: String, default: 'label' },
-    valueField: { type: String, default: 'value' },
-    placeholder: { type: String },
-    addonBefore: { type: String },
-    addonAfter: { type: String },
-    prefix: { type: String },
-    suffix: { type: String },
-    disabled: { type: Boolean },
-    params: { type: [Array, Object, String, Number] },
-    dataSourceOptions: { type: Array },
-    dicOptions: { type: Array },
+        popupType: {type: String},
+        value: {type: String},
+        labelField: {type: String, default: 'label'},
+        valueField: {type: String, default: 'value'},
+        placeholder: {type: String},
+        addonBefore: {type: String},
+        addonAfter: {type: String},
+        prefix: {type: String},
+        suffix: {type: String},
+        disabled: {type: Boolean},
+        params: {type: [Array, Object, String, Number]},
+        dataSourceOptions: {type: Array},
+        dicOptions: {type: Array},
        //数据来源 默认为空  如果不为空 则参数 api
        datasourceType: String,
-    apiConfig: { type: Object },
+        apiConfig: {type: Object},
        bordered: {
            type: Boolean,
            default: true,
@ -115,6 +115,7 @@
    };

    const getSubDatasourceList = async () => {
+        debugger;
        let showValueArr: string[] = [];
        await MultipleSelectRef.value?.getDatasourceList();

@ -123,7 +124,12 @@
        const selectedArr = props.value?.split(',');
        dataSourceList.value?.map((item) => {
            selectedArr?.map((selected) => {
-        if (item[props.valueField] === selected) {
+                let itemVal = item[props.valueField];
+                if ((itemVal || itemVal === 0) && typeof selected === 'string') {
+                    // 处理当key为数字类型时
+                    itemVal += '';
+                }
+                if (itemVal === selected) {
                    selectedDataSourceVal.value?.push(item);
                }
            });
--- a/src/utils/http/axios/Axios.ts
+++ b/src/utils/http/axios/Axios.ts
@ -310,11 +310,7 @@ export class VAxios {
        })
        .catch((e: Error | AxiosError) => {
          if (e.message.includes('timeout') || e.message.includes('Network Error')) {
-            const userStore = useUserStore();
-            userStore.setToken(undefined);
-            userStore.setSessionTimeout(false);
-            userStore.setUserInfo(null);
-            router.push(PageEnum.BASE_LOGIN);
+            // 太极端了，这里没必要给人踢回登录页面
          }
          if (requestCatchHook && isFunction(requestCatchHook)) {
            reject(requestCatchHook(e, opt));
--- a/src/utils/http/axios/index.ts
+++ b/src/utils/http/axios/index.ts
@ -20,11 +20,23 @@ import { useUserStoreWithOut } from '/@/store/modules/user';
 import { AxiosRetry } from '/@/utils/http/axios/axiosRetry';
 import { useGo } from '/@/hooks/web/usePage';
 import { validateScript } from '/@/utils/event/design';
+import { notification } from 'ant-design-vue';
+import { throttle } from 'lodash-es';

 const globSetting = useGlobSetting();
 const urlPrefix = globSetting.urlPrefix;
 const { createMessage, createErrorModal } = useMessage();

+const showNetworkError = function() {
+    notification.error({
+        message: '网络超时，请检查本地网络是否正常，或者稍后再试',
+        placement: 'topRight',
+        duration: 3
+    });
+};
+
+const trNetworkError = throttle(showNetworkError, 5000, { trailing: false });
+
 /**
 * @description: 数据处理，方便区分多种处理方式
 */
@ -127,7 +139,7 @@ const transform: AxiosTransform = {
                if (isBoolean(joinParamsToUrl) && joinParamsToUrl) {
                    config.url = setObjToUrlParams(
                        config.url as string,
-            Object.assign({}, config.params, config.data),
+                        Object.assign({}, config.params, config.data)
                    );
                }
            } else {
@ -176,13 +188,10 @@ const transform: AxiosTransform = {

        try {
            if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
-        errMessage = t('接口请求超时,请刷新页面重试!');
-      }
-      if (err?.includes('Network Error')) {
-        errMessage = t('网络异常，请检查您的网络连接是否正常!');
-      }
-
-      if (errMessage) {
+                trNetworkError();
+            } else if (err?.includes('Network Error')) {
+                trNetworkError();
+            } else if (errMessage) {
                if (errorMessageMode === 'modal') {
                    createErrorModal({ title: t('错误提示'), content: errMessage });
                } else if (errorMessageMode === 'message') {
@ -204,7 +213,7 @@ const transform: AxiosTransform = {
        // @ts-ignore
        retryRequest.retry(axiosInstance, error);
        return Promise.reject(error);
-  },
+    }
 };

 function createAxios(opt?: Partial<CreateAxiosOptions>) {
@ -251,14 +260,15 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
                    retryRequest: {
                        isOpenRetry: false,
                        count: 5,
-            waitTime: 100,
+                        waitTime: 100
+                    }
+                }
            },
-        },
-      },
-      opt || {},
-    ),
+            opt || {}
+        )
    );
 }
+
 export const defHttp = createAxios();

 // other api url