iailab-plat-ui-vue3.git

潘志宝

2024-11-22 df90c0c5cfa4de114798015b92120ad8ba8b4826

提交 \| 用户 \| 时间
1c14d6	1	<template>
L	2	<Dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
	3	<el-form
	4	ref="formRef"
	5	v-loading="formLoading"
	6	:model="formData"
	7	:rules="formRules"
	8	label-width="120px"
	9	>
	10	<el-row>
	11	<el-col :span="12">
	12	<el-form-item label="编码" prop="code">
6d9c08	13	<el-input v-model="formData.code" placeholder="请输入编码"/>
1c14d6	14	</el-form-item>
L	15	</el-col>
	16	<el-col :span="12">
6d9c08	17	<el-form-item label="名称" prop="name">
潘	18	<el-input v-model="formData.name" placeholder="请输入名称"/>
	19	</el-form-item>
	20	</el-col>
	21	</el-row>
	22	<el-row>
	23	<el-col :span="24">
1c14d6	24	<el-form-item label="url" prop="url">
6d9c08	25	<el-input v-model="formData.url" placeholder="请输入url"/>
1c14d6	26	</el-form-item>
L	27	</el-col>
	28	</el-row>
	29	<el-row>
	30	<el-col :span="12">
6d9c08	31	<el-form-item label="请求方法" prop="method">
潘	32	<el-select v-model="formData.method" placeholder="请选择">
	33	<el-option
	34	v-for="dict in getStrDictOptions(DICT_TYPE.HTTP_METHOD)"
	35	:key="dict.value"
	36	:label="dict.label"
	37	:value="dict.value"
	38	/>
	39	</el-select>
1c14d6	40	</el-form-item>
L	41	</el-col>
	42	<el-col :span="12">
	43	<el-form-item label="参数" prop="param">
6d9c08	44	<el-input v-model="formData.param" placeholder="请输入参数"/>
1c14d6	45	</el-form-item>
L	46	</el-col>
	47	</el-row>
	48	<el-row>
cfaf8b	49	<el-col :span="12">
潘	50	<el-form-item label="是否认证" prop="isAuth">
	51	<el-select v-model="formData.isAuth" placeholder="请选择">
	52	<el-option
	53	v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
	54	:key="dict.value"
	55	:label="dict.label"
	56	:value="dict.value"
	57	/>
	58	</el-select>
	59	</el-form-item>
	60	</el-col>
	61	<el-col :span="12">
	62	<el-form-item label="认证地址" prop="authUrl">
	63	<el-select v-model="formData.authUrl" clearable placeholder="请选择数据源">
	64	<el-option
	65	v-for="item in httpTokenList"
	66	:key="item.id"
	67	:label="item.loginUrl"
	68	:value="item.id"
	69	/>
	70	</el-select>
	71	</el-form-item>
	72	</el-col>
	73	</el-row>
	74
	75	<el-row>
6d9c08	76	<el-col :span="24">
潘	77	<el-form-item label="描述" prop="descp">
	78	<el-input v-model="formData.descp" placeholder="请输入描述" type="textarea" maxlength="100"
	79	show-word-limit/>
1c14d6	80	</el-form-item>
L	81	</el-col>
	82	</el-row>
	83	</el-form>
	84	<template #footer>
	85	<el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button>
	86	<el-button @click="dialogVisible = false">取消</el-button>
	87	</template>
	88	</Dialog>
	89	</template>
	90	<script lang="ts" setup>
	91	import * as HttpApi from '@/api/data/channel/http'
cfaf8b	92	import * as HttpToken from '@/api/data/channel/http/token'
6d9c08	93	import { DICT_TYPE, getStrDictOptions, getBoolDictOptions } from '@/utils/dict'
cfaf8b	94	import {CommonStatusEnum, CommonInfraBool} from '@/utils/constants'
潘	95	import * as DataSourceConfigApi from "@/api/infra/dataSourceConfig";
	96	import {HttpTokenVO} from "@/api/data/channel/http/token";
1c14d6	97
6d9c08	98	defineOptions({name: 'DataHttpApiForm'})
1c14d6	99
6d9c08	100	const {t} = useI18n() // 国际化
潘	101	const message = useMessage() // 消息弹窗
	102	const dialogVisible = ref(false) // 弹窗的是否展示
	103	const dialogTitle = ref('') // 弹窗的标题
	104	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	105	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	106	const formData = ref({
	107	id: undefined,
	108	code: undefined,
cfaf8b	109	name: undefined,
6d9c08	110	url: undefined,
潘	111	method: undefined,
	112	param: undefined,
	113	descp: undefined,
cfaf8b	114	isAuth: CommonInfraBool.FALSE,
潘	115	authUrl: undefined
6d9c08	116	})
潘	117	const formRules = reactive({
	118	name: [{required: true, message: '名称不能为空', trigger: 'blur'}],
	119	code: [{required: true, message: '编码不能为空', trigger: 'blur'}],
	120	url: [{required: true, message: 'url不能为空', trigger: 'blur'}],
	121	})
	122	const formRef = ref() // 表单 Ref
cfaf8b	123	const httpTokenList = ref([] as HttpToken.HttpTokenVO[])
6d9c08	124
潘	125	/** 打开弹窗 */
	126	const open = async (type: string, id?: number) => {
	127	dialogVisible.value = true
	128	dialogTitle.value = t('action.' + type)
	129	formType.value = type
	130	resetForm()
	131	// 修改时，设置数据
	132	if (id) {
	133	formLoading.value = true
	134	try {
	135	formData.value = await HttpApi.getHttpApi(id)
	136	} finally {
	137	formLoading.value = false
	138	}
	139	}
cfaf8b	140	// 加载认证列表
潘	141	httpTokenList.value = await HttpToken.getHttpTokenList()
6d9c08	142	}
潘	143	defineExpose({open}) // 提供 open 方法，用于打开弹窗
	144
	145	/** 提交表单 */
	146	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	147	const submitForm = async () => {
	148	// 校验表单
	149	if (!formRef) return
	150	const valid = await formRef.value.validate()
	151	if (!valid) return
	152	// 提交请求
	153	formLoading.value = true
	154	try {
	155	const data = formData.value as unknown as HttpApi.HttpApiVO
	156	if (formType.value === 'create') {
	157	await HttpApi.createHttpApi(data)
	158	message.success(t('common.createSuccess'))
	159	} else {
	160	await HttpApi.updateHttpApi(data)
	161	message.success(t('common.updateSuccess'))
	162	}
	163	dialogVisible.value = false
	164	// 发送操作成功的事件
	165	emit('success')
	166	} finally {
	167	formLoading.value = false
	168	}
	169	}
	170
	171	/** 重置表单 */
	172	const resetForm = () => {
	173	formData.value = {
1c14d6	174	id: undefined,
L	175	code: undefined,
cfaf8b	176	name: undefined,
1c14d6	177	url: undefined,
L	178	method: undefined,
	179	param: undefined,
	180	descp: undefined,
cfaf8b	181	isAuth: CommonInfraBool.FALSE,
潘	182	authUrl: undefined
1c14d6	183	}
6d9c08	184	formRef.value?.resetFields()
潘	185	}
1c14d6	186	</script>