yckj_framework/vue-next-admin/src/views/system/baseSettings/components/apiConfig.vue

<template>
    <div>
        <el-card shadow="hover" class="mt20">
			<template #header>
				<div class="card-header">
					<span>后端地址配置</span>
				</div>
			</template>
			<el-form
				:label-position="state.labelPosition"
				label-width="100px"
				style="max-width: 960px"
				:inline="false"
			>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="接口地址">
						<el-input v-model="state.file" />
					</el-form-item>
				</el-col>
				<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="接口地址">
						<el-input v-model="state.host" />
					</el-form-item>
				</el-col> -->
			</el-form>
			<el-button type="primary" @click="configSave3">保存</el-button>
		</el-card>
    </div>
</template>

<script lang="ts" setup name="systemConfig">
import { defineComponent, onMounted, reactive, toRefs } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import ruleReg from '/@/utils/ruleReg.ts';
import { Local, Session } from '/@/utils/storage';
import config from '/@/config.ts';
import mittBus from '/@/utils/mitt';
import { useRoute } from 'vue-router';

const state = reactive({
	file: config.file,
	// host: config.host,
	timer:<any> {},
	labelPosition: 'top',
})

const configSave3 = () => {
	if (!ruleReg.emptyReg(state.file)) {
		return ElMessage.warning('资源地址为空');
	}
	// if (!ruleReg.emptyReg(state.host)) {
	// 	return ElMessage.warning('接口地址为空');
	// }
	clearTimeout(state.timer);
	state.timer = setTimeout(()=>{
		config.file = state.file;
		// config.host = state.host;
		Local.set('file',state.file);
		// Local.set('host',state.host);
		ElMessage.success('保存成功');
		window.location.reload();
		// refreshCurrentTagsView();
	},500)
}

// 定义变量内容
const route = useRoute();

// 1、刷新当前 tagsView
const refreshCurrentTagsView = () => {
	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 0, ...route }));
};

onMounted(()=>{
	setTimeout(()=>{	
		state.file = Local.get('file') ? Local.get('file') : state.file;
		// state.host = Local.get('host') ? Local.get('host') : state.host;
	},500)
})
</script>

<style scoped lang="scss">
    .demo-date-picker{
		display: flex;
	}
</style>