feat: 介入接口权限

src/components/scFormTable/index.vue

@@ -1,15 +1,10 @@
 <template>
 	<div ref="scFormTableRef" class="sc-form-table">
 		<el-table ref="tableRef" :data="data" border stripe>
-			<el-table-column type="index" width="50" fixed="left">
-				<template #header>
-					<el-button v-if="!hideAdd" type="primary" :icon="Plus" size="small" circle @click="rowAdd"></el-button>
-				</template>
+			<el-table-column type="index" width="65" fixed="left">
+				<template #header>序号</template>
 				<template #default="scope">
-					<div :class="['sc-form-table-handle', { 'sc-form-table-handle-delete': !hideDelete }]">
-						<span>{{ scope.$index + 1 }}</span>
-						<el-button v-if="!hideDelete" type="danger" :icon="Delete" size="small" plain circle @click="rowDel(scope.row, scope.$index)"></el-button>
-					</div>
+					<span class="text-center">{{ scope.$index + 1 }}</span>
 				</template>
 			</el-table-column>
 			<el-table-column v-if="dragSort" label="" width="50">
@@ -106,6 +101,10 @@ onMounted(() => {
 		rowDrop()
 	}
 })
+
+defineExpose({
+	rowAdd
+})
 </script>
 
 <style scoped>

src/views/setting/menu/save.vue

@@ -58,13 +58,16 @@
 							<span class="flex flex-align-pack-center"
 								>路由
 								<el-tooltip content="正常路由地址，次顶级菜单记得'/'开头" placement="right">
-									<Warning style="width: 16px; margin-left: 4px; color: var(--el-color-danger)" /> </el-tooltip></span>
+									<Warning style="width: 16px; margin-left: 4px; color: var(--el-color-danger)" /> </el-tooltip
+							></span>
 						</template>
 						<el-input v-model="form.path" clearable placeholder="请认真填写路由，否则可能无法访问"></el-input>
 					</el-form-item>
 					<el-form-item label="重定向" prop="redirect">
 						<el-input v-model="form.redirect" clearable placeholder=""></el-input>
-						<div class="el-form-item-msg" style="color: var(--el-color-danger)">若为Iframe的外部链接，请填写URL地址，eg: 「https://xxxx.com」格式</div>
+						<div class="el-form-item-msg" style="color: var(--el-color-danger)">
+							若为Iframe的外部链接，请填写URL地址，eg: 「https://xxxx.com」格式
+						</div>
 					</el-form-item>
 					<!--					<el-form-item label="菜单高亮" prop="active">
 						<el-input v-model="form.active" clearable placeholder=""></el-input>
@@ -103,29 +106,44 @@
 			</el-col>
 
 			<el-col :lg="12" class="apilist">
-				<h2>接口权限列表</h2>
-				<sc-form-table v-model="form.apiList" :add-template="apiListAddTemplate" placeholder="暂无匹配接口权限">
+				<div class="flex flex-pack-justify">
+					<h2>接口权限列表</h2>
+					<el-button size="mini" :icon="Plus" @click="addTableTemplate">新增</el-button>
+				</div>
+				<sc-form-table ref="formTable" v-model="form.apiList" :add-template="apiListAddTemplate" placeholder="暂无匹配接口权限">
 					<el-table-column prop="code" label="编码">
 						<template #default="scope">
-							<el-input v-model="scope.row.code" placeholder="请输入编码" :maxlength="100"></el-input>
+							<el-input v-if="scope.row.editing" v-model="scope.row.code" placeholder="请输入编码" :maxlength="100"></el-input>
+							<span v-else>{{ scope.row.code }}</span>
 						</template>
 					</el-table-column>
 					<el-table-column prop="remark" label="备注">
 						<template #default="scope">
-							<el-input v-model="scope.row.remark" placeholder="请输入备注" :maxlength="255"></el-input>
+							<el-input v-if="scope.row.editing" v-model="scope.row.remark" placeholder="请输入备注" :maxlength="255"></el-input>
+							<span v-else>{{ scope.row.remark }}</span>
 						</template>
 					</el-table-column>
-					<!-- <el-table-column label="操作" width="100">
+					<el-table-column label="操作" width="100">
 						<template #default="scope">
-							<div v-if="scope.row.id">
-								<LeIcon class="text-lg text-icon-color cursor-pointer" icon-class="icon-processInfo-mage--edit" />
-								<LeIcon class="text-lg ml-2 text-rose-700 cursor-pointer" icon-class="icon-processInfo-iconoir--trash" />
+							<div v-if="scope.row.editing" class="cursor-pointer">
+								<el-icon @click="saveSourceEv(scope.row, scope.$index)">
+									<Check color="var(--el-color-primary)" />
+								</el-icon>
 							</div>
 							<div v-else>
-
+								<LeIcon
+									class="text-lg text-icon-color cursor-pointer"
+									icon-class="icon-processInfo-mage--edit"
+									@click="editSourceEv(scope.row, scope.$index)"
+								/>
+								<LeIcon
+									class="text-lg ml-2 text-rose-700 cursor-pointer"
+									icon-class="icon-processInfo-iconoir--trash"
+									@click="deleteSourceEv(scope.row, scope.$index)"
+								/>
 							</div>
 						</template>
-					</el-table-column> -->
+					</el-table-column>
 				</sc-form-table>
 			</el-col>
 		</template>
@@ -133,31 +151,40 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import resource from '@/api/system/resource'
+import { ref, computed, onMounted, toRefs, reactive } from 'vue'
+import { Plus, Check } from '@element-plus/icons-vue'
 import IconPicker from '@/components/IconPicker/index.vue'
 import ScFormTable from '@/components/ScFormTable'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { generateTitle } from '@/utils/i18n'
-const dialogForm = ref()
-const form = ref({
-	id: '',
-	pid: '',
-	alias: '',
-	path: '',
-	component: '',
-	redirect: '',
-	title: '',
-	icon: '',
-	active: '',
-	color: '',
-	type: '0',
-	sort: 0,
-	apiList: [],
-	// 指定父级菜单(路由)名称
-	parentRoute: ''
+import resource from '@/api/system/resource'
+
+const commonObj = reactive({
+	dialogForm: null,
+	formTable: null,
+	form: {
+		id: '',
+		pid: '',
+		alias: '',
+		path: '',
+		component: '',
+		redirect: '',
+		title: '',
+		icon: '',
+		active: '',
+		color: '',
+		type: '0',
+		sort: 0,
+		apiList: [],
+		// 指定父级菜单(路由)名称
+		parentRoute: ''
+	},
+	menuTreeList: null,
+	loading: false,
+	currentResourceId: null
 })
-const menuTreeList = ref()
+const { dialogForm, formTable, menuTreeList, form, loading, currentResourceId } = toRefs(commonObj)
+
 const i18n_formTitle = computed(() => {
 	return generateTitle(form.value.title)
 })
@@ -170,9 +197,9 @@ const rules = {
 }
 const apiListAddTemplate = ref({
 	code: '',
-	remark: ''
+	remark: '',
+	editing: true
 })
-const loading = ref(false)
 const $myEmit = defineEmits(['successCb'])
 
 // methods
@@ -198,6 +225,7 @@ const save = () =>
 const setData = async data => {
 	//表单注入数据
 	loading.value = true
+	currentResourceId.value = data.id
 	try {
 		let res = await resource.sysSourceGetApi({ id: data.id })
 		loading.value = false
@@ -218,6 +246,57 @@ const setData = async data => {
 	menuTreeList.value = await resource.resourceListTreeApi()
 }
 
+const addTableTemplate = () => {
+	formTable.value.rowAdd()
+}
+
+const saveSourceEv = async (item, idx) => {
+	// 校验 form.apiList 数组中 code 是否都填写
+	if (!item.code) {
+		ElMessage.warning('接口权限的编码不能为空！')
+		return // 中断执行
+	}
+	if (item.id) {
+		await resource.sysSourceCreateApi({ ...item, resourceId: currentResourceId.value })
+		ElMessage.success('保存成功')
+		// let res = await resource.sysSourceGetApi({ id: data.id })
+		// form.value.apiList = res
+		form.value.apiList.splice(idx, 1, {
+			...item,
+			id: Math.random(100), // 写死假的
+			editing: false
+		})
+	} else {
+		await resource.sysSourceUpdateApi({ ...item, resourceId: currentResourceId.value })
+		ElMessage.success('修改成功')
+		// let res = await resource.sysSourceGetApi({ id: data.id })
+		// form.value.apiList = res
+		form.value.apiList.splice(idx, 1, {
+			...item,
+			editing: false
+		})
+	}
+}
+
+const editSourceEv = (item, idx) => {
+	form.value.apiList.splice(idx, 1, {
+		...item,
+		editing: true
+	})
+}
+
+const deleteSourceEv = async (item, idx) => {
+	ElMessageBox.confirm(`确认删除「${item.code}」这条数据？`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'error'
+	}).then(async () => {
+		await resource.sysSourceDeleteApi([item.id])
+		ElMessage.success('删除成功')
+		form.value.apiList.splice(idx, 1)
+	})
+}
+
 // 父组件使用的话需要导出
 defineExpose({
 	setData