admin-ui/src/views/cid/apis/index.vue

<template>
	<div class="cid-apis-container">
		<el-card shadow="hover">
			<div class="system-user-search mb15">
				<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
					<el-form-item label="关键字" prop="keyword">
						<el-input
							v-model="tableData.param.keyword"
							placeholder="请输入接口名称"
							clearable
							size="default"
							style="width: 240px"
							@keyup.enter.native="getList"
						/>
					</el-form-item>
					<el-form-item>
						<el-button size="default" type="primary" @click="getList">
							<el-icon><ele-Search /></el-icon>
							查询
						</el-button>
						<el-button size="default" @click="resetQuery(queryRef)">
							<el-icon><ele-Refresh /></el-icon>
							重置
						</el-button>
						<el-button size="default" type="success" @click="onOpenAdd">
							<el-icon><ele-FolderAdd /></el-icon>
							新增接口
						</el-button>
						<el-button size="default" type="danger" @click="onRowDel(null)">
							<el-icon><ele-Delete /></el-icon>
							删除
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="name" label="接口名称" show-overflow-tooltip />
				<el-table-column prop="path" label="接口路径" show-overflow-tooltip />
				<el-table-column prop="method" label="请求方式" width="100" align="center" />
				<el-table-column prop="datasourceName" label="所属平台" show-overflow-tooltip />
				<el-table-column prop="status" label="状态" width="100" align="center">
					<template #default="scope">
						<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" size="small">
							{{ scope.row.status === 1 ? '启用' : '禁用' }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip />
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">修改</el-button>
						<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				v-show="tableData.total > 0"
				:total="tableData.total"
				v-model:page="tableData.param.pageNum"
				v-model:limit="tableData.param.pageSize"
				@pagination="getList"
			/>
		</el-card>

		<!-- 新增/编辑弹窗 -->
		<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" :close-on-click-modal="false">
			<el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
				<el-form-item label="接口名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入接口名称" />
				</el-form-item>
				<el-form-item label="接口路径" prop="path">
					<el-input v-model="form.path" placeholder="请输入接口路径" />
				</el-form-item>
				<el-form-item label="请求方式" prop="method">
					<el-select v-model="form.method" style="width: 100%">
						<el-option label="GET" value="GET" />
						<el-option label="POST" value="POST" />
						<el-option label="PUT" value="PUT" />
						<el-option label="DELETE" value="DELETE" />
					</el-select>
				</el-form-item>
				<el-form-item label="所属平台" prop="datasourceId">
					<el-input v-model="form.datasourceId" placeholder="请输入所属平台ID" />
				</el-form-item>
				<el-form-item label="描述" prop="description">
					<el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入描述" />
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-select v-model="form.status" style="width: 100%">
						<el-option label="启用" :value="1" />
						<el-option label="禁用" :value="0" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialog.visible = false">取消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="dialog.saving">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
export default { name: 'cidApis' };
</script>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';

const queryRef = ref<FormInstance>();
const formRef = ref<FormInstance>();
const ids = ref<string[]>([]);

const tableData = reactive({
	data: [] as any[],
	total: 0,
	param: {
		pageNum: 1,
		pageSize: 10,
		keyword: '',
	},
});

const dialog = reactive({
	visible: false,
	title: '',
	saving: false,
});

const form = reactive({
	id: '',
	name: '',
	path: '',
	method: 'GET',
	datasourceId: '',
	description: '',
	status: 1,
});

const rules = {
	name: [{ required: true, message: '请输入接口名称', trigger: 'blur' }],
	path: [{ required: true, message: '请输入接口路径', trigger: 'blur' }],
	method: [{ required: true, message: '请选择请求方式', trigger: 'change' }],
};

const getList = () => {
	// TODO: 调用列表接口
};

const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	getList();
};

const handleSelectionChange = (selection: any[]) => {
	ids.value = selection.map((item) => item.id);
};

const onOpenAdd = () => {
	dialog.title = '新增接口';
	dialog.visible = true;
	form.id = '';
	form.name = '';
	form.path = '';
	form.method = 'GET';
	form.datasourceId = '';
	form.description = '';
	form.status = 1;
};

const onOpenEdit = (row: any) => {
	dialog.title = '修改接口';
	dialog.visible = true;
	form.id = row.id;
	form.name = row.name;
	form.path = row.path;
	form.method = row.method;
	form.datasourceId = row.datasourceId;
	form.description = row.description;
	form.status = row.status;
};

const onSubmit = () => {
	if (!formRef.value) return;
	formRef.value.validate((valid) => {
		if (!valid) return;
		dialog.saving = true;
		// TODO: 调用新增/编辑接口
		dialog.saving = false;
		dialog.visible = false;
		getList();
	});
};

const onRowDel = (row: any) => {
	const delIds = row ? [row.id] : ids.value;
	if (delIds.length === 0) {
		ElMessage.error('请选择要删除的数据');
		return;
	}
	ElMessageBox.confirm(`确定要删除选中的接口吗？`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		// TODO: 调用删除接口
		ElMessage.success('删除成功');
		getList();
	}).catch(() => {});
};

onMounted(() => {
	getList();
});
</script>