增加插件的编辑页面

src/api/system/index.ts

@@ -145,6 +145,7 @@ export default {
     getList: (params: object) => get('/system/plugins/list', params),
     del: (ids: object) => del('/system/plugins/set', {ids}),
     changeStatus: (data: object) => post('/system/plugins/set', data),
+    edit: (data: any) => put('/system/plugins/edit', data),
     addPluginFile: (formatDate: FormData) => post('/system/plugins/add', formatDate),
   },
   blackList: {

src/hooks/useCommon.ts

@@ -45,7 +45,7 @@ export function useSearch<T>(api: any, resKey: string, expandParams?: any) {
     loading.value = true;
     params.total = 0;
     let res = await api(params).finally(() => loading.value = false)
-    console.log(res)
+    // console.log(res)
     tableData.value = (resKey ? (res[resKey]) : (res)) || [];
     params.total = res.total;
   };

src/views/system/monitor/plugin/edit.vue

@@ -0,0 +1,119 @@
+<template>
+	<el-dialog class="api-edit" v-model="showDialog" title="编辑插件内容" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
+		<el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="110px" @keyup.enter="onSubmit">
+			<el-form-item label="通信方式" prop="types">
+				<el-input v-model="formData.types" placeholder="输入接口名称" />
+			</el-form-item>
+			<el-form-item label="功能类型" prop="handleType" required>
+				<el-input v-model="formData.handleType" placeholder="输入功能类型" />
+			</el-form-item>
+			<el-form-item label="名称" prop="name" required>
+				<el-input v-model="formData.name" placeholder="输入名称" />
+			</el-form-item>
+			<el-form-item label="标题" prop="title" required>
+				<el-input v-model="formData.title" placeholder="输入标题" />
+			</el-form-item>
+			<el-form-item label="说明" prop="description">
+				<el-input v-model="formData.description" placeholder="输入名称" />
+			</el-form-item>
+			<el-form-item label="版本" prop="version">
+				<el-input v-model="formData.version" placeholder="输入版本" />
+			</el-form-item>
+			<el-form-item label="作者" prop="author">
+				<el-input v-model="formData.author" placeholder="输入作者" />
+			</el-form-item>
+			<el-form-item label="插件图标" prop="icon">
+				<el-input v-model="formData.icon" placeholder="输入插件图标" />
+			</el-form-item>
+			<el-form-item label="插件网址" prop="link">
+				<el-input v-model="formData.link" placeholder="输入插件网址" />
+			</el-form-item>
+			<el-form-item label="运行指令" prop="command">
+				<el-input v-model="formData.command" placeholder="输入运行指令" />
+			</el-form-item>
+			<el-form-item label="指令参数" prop="args">
+				<el-input v-model="formData.args" placeholder="输入指令参数" />
+			</el-form-item>
+			<el-form-item label="有无插件页面" prop="frontendUi">
+				<el-switch v-model="formData.frontendUi" :active-value="1" :inactive-value="0" />
+			</el-form-item>
+			<el-form-item label="插件页面地址" v-if="formData.frontendUi" prop="frontendUrl">
+				<el-input v-model="formData.frontendUrl" placeholder="输入插件页面地址" />
+			</el-form-item>
+			<el-form-item label="显示配置页面" prop="frontendConfiguration">
+				<el-switch v-model="formData.frontendConfiguration" :active-value="1" :inactive-value="0" />
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="showDialog = false">取消</el-button>
+				<el-button type="primary" @click="onSubmit">确定</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, nextTick } from 'vue'
+import api from '/@/api/system'
+import { ruleRequired } from '/@/utils/validator'
+import { ElMessage } from 'element-plus'
+
+const emit = defineEmits(['getList'])
+
+const showDialog = ref(false)
+const formRef = ref()
+
+const baseForm = {
+	id: '',
+	types: '',
+	handleType: '',
+	name: '',
+	title: '',
+	description: '',
+	version: '',
+	author: '',
+	icon: '',
+	link: '',
+	command: '',
+	args: [],
+	frontendUi: 0,
+	frontendUrl: '',
+	frontendConfiguration: '',
+}
+
+const formData = reactive({
+	...baseForm,
+})
+
+const ruleForm = {
+	types: [ruleRequired('通信方式不能为空')],
+	menuIds: [ruleRequired('关联页面不能为空', 'change')],
+}
+
+const onSubmit = async () => {
+	await formRef.value.validate()
+
+	await api.plugin.edit(formData)
+
+	ElMessage.success('操作成功')
+	resetForm()
+	showDialog.value = false
+	emit('getList')
+}
+
+const resetForm = async () => {
+	Object.assign(formData, { ...baseForm })
+	formRef.value && formRef.value.resetFields()
+}
+
+const open = async (row: any) => {
+	resetForm()
+	showDialog.value = true
+	nextTick(() => {
+		Object.assign(formData, row)
+	})
+}
+
+defineExpose({ open })
+</script>

src/views/system/monitor/plugin/index.vue

@@ -23,7 +23,7 @@
 							<el-icon>
 								<ele-Plus />
 							</el-icon>
-							新增
+							上传插件ZIP
 						</el-button>
 					</el-form-item>
 				</el-form>
@@ -35,7 +35,7 @@
 				<el-table-column label="名称" v-col="'name'" align="center" prop="name" />
 				<el-table-column label="通信方式" v-col="'types'" align="center" prop="types" />
 				<el-table-column label="功能类型" v-col="'handleType'" align="center" prop="handleType" />
-				<el-table-column label="说明" v-col="'description'" align="center" prop="description" />
+				<el-table-column label="说明" v-col="'description'" show-overflow-tooltip align="left" prop="description" />
 				<el-table-column label="作者" v-col="'author'" align="center" prop="author" />
 				<el-table-column label="状态" v-col="'status'" align="center" prop="status" width="80">
 					<template #default="scope">
@@ -45,37 +45,23 @@
 						<el-tag type="info" size="small" v-else>-</el-tag>
 					</template>
 				</el-table-column>
-				<el-table-column label="操作" width="200" align="center" fixed="right" v-col="'handle'">
+				<el-table-column label="操作" width="240" align="center" fixed="right" v-col="'handle'">
 					<template #default="scope">
-						<el-button
-							:disabled="scope.row.status == 0"
-							type="warning"
-							text="warning"
-							size="small"
-							link
-							@click="changeStatus(scope.row, 0)"
-							v-auth="'stop'"
+						<el-button size="small" type="primary" link v-auth="'detail'">详情</el-button>
+						<el-button :disabled="scope.row.status == 0" type="warning" size="small" link @click="changeStatus(scope.row, 0)" v-auth="'stop'"
 							>停用</el-button
 						>
-						<el-button
-							:disabled="scope.row.status == 1"
-							size="small"
-							type="success"
-							text="success"
-							link
-							@click="changeStatus(scope.row, 1)"
-							v-auth="'start'"
+						<el-button :disabled="scope.row.status == 1" size="small" type="success" link @click="changeStatus(scope.row, 1)" v-auth="'start'"
 							>启用</el-button
 						>
-						<el-button :disabled="scope.row.status == 1" size="small" type="danger" text="danger" link @click="onDel(scope.row)" v-auth="'del'"
-							>删除</el-button
-						>
-						<el-button size="small" type="primary" text="primary" link v-auth="'detail'">详情</el-button>
+						<el-button :disabled="scope.row.status == 1" size="small" type="danger" link @click="onDel(scope.row)" v-auth="'del'">删除</el-button>
+						<el-button size="small" type="plain" link @click="addOrEdit(scope.row)">编辑</el-button>
 					</template>
 				</el-table-column>
 			</el-table>
 			<pagination :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList" />
 		</el-card>
+		<EditForm ref="editFormRef" @getList="getList()"></EditForm>
 	</div>
 </template>
 
@@ -84,8 +70,10 @@ import { ref, h } from 'vue'
 import { ElMessage, ElMessageBox, ElUpload } from 'element-plus'
 import api from '/@/api/system'
 import { useSearch } from '/@/hooks/useCommon'
+import EditForm from './edit.vue'
 
 const queryRef = ref()
+const editFormRef = ref()
 
 let uploadFile: File | null = null
 
@@ -101,6 +89,7 @@ getList()
 const addOrEdit = (row?: any) => {
 	// edit
 	if (row) {
+		editFormRef.value.open(row)
 	} else {
 		// add
 		ElMessageBox({
@@ -119,10 +108,13 @@ const addOrEdit = (row?: any) => {
 			beforeClose: (action, instance, done) => {
 				if (action === 'confirm') {
 					if (!uploadFile) return ElMessage('请先上传插件！')
+
 					instance.confirmButtonLoading = true
 					instance.confirmButtonText = '上传中...'
+
 					const formData = new FormData()
 					formData.append('file', uploadFile)
+
 					api.plugin
 						.addPluginFile(formData)
 						.then(() => {