大屏管理，增加编辑操作、设计大屏跳转

src/api/screen/index.ts

@@ -1,7 +1,8 @@
-import { get, del, post } from '/@/utils/request';
+import { get, del, post, put } from '/@/utils/request';
 
 export default {
   getList: (data: object) => get('/screen/project/list', data),
   del: (ids: string[]) => del('/screen/project/delProjectById', { ids }),
   add: (data: any) => post('/screen/project/add', data),
+  edit: (data: any) => put('/screen/project/edit', data),
 }

src/views/screen/edit.vue

@@ -0,0 +1,81 @@
+<template>
+	<el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑大屏' : '新增大屏'}`" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
+		<el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="80px">
+			<el-form-item label="规则名称" prop="projectName">
+				<el-input v-model="formData.projectName" placeholder="输入大屏项目名称" />
+			</el-form-item>
+			<el-form-item label="说明" prop="remarks">
+				<el-input v-model="formData.remarks" type="textarea" :rows="3" />
+			</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/screen';
+import axios from 'axios';
+import { ruleRequired } from '/@/utils/validator';
+import { ElMessage } from 'element-plus';
+
+const emit = defineEmits(['getList']);
+
+const headers = {
+	Authorization: 'Bearer ' + JSON.parse(sessionStorage.token),
+};
+const flowsUrl = window.location.origin + '/rule-engine/flow';
+// const flowsUrl = 'http://zhgy.sagoo.cn/rule-engine/flow';
+
+
+const showDialog = ref(false);
+const formRef = ref();
+
+const baseForm = {
+	id: undefined,
+	indexImage: null,
+	projectName: '',
+	remarks: '',
+};
+
+const formData = reactive({
+	...baseForm,
+});
+
+const ruleForm = {
+	name: [ruleRequired('规则名称不能为空')],
+};
+
+const onSubmit = async () => {
+	await formRef.value.validate();
+
+	const theApi = formData.id ? api.edit : api.add;
+
+	await theApi(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/screen/index.vue

@@ -9,11 +9,11 @@
 							</el-icon>
 							查询
 						</el-button> -->
-					<el-button type="success" @click="add()">
+					<el-button type="success" @click="addOrEdit()">
 						<el-icon>
 							<ele-FolderAdd />
 						</el-icon>
-						新增大屏项目
+						新增大屏
 					</el-button>
 				</el-form-item>
 			</el-form>
@@ -25,28 +25,43 @@
 			<el-table-column prop="remarks" label="描述" show-overflow-tooltip></el-table-column>
 			<el-table-column prop="createdAt" label="创建时间" min-width="100" align="center"></el-table-column>
 			<el-table-column prop="updatedAt" label="更新时间" min-width="100" align="center"></el-table-column>
-			<el-table-column label="操作" width="150" align="center">
+			<el-table-column label="操作" width="200" align="center">
 				<template #default="scope">
 					<el-button size="small" text type="primary" @click="preview(scope.row)">预览</el-button>
-					<el-button size="small" text type="warning" @click="edit(scope.row)">编辑</el-button>
+					<el-button size="small" text type="warning" @click="addOrEdit(scope.row)">编辑</el-button>
+					<el-button size="small" text type="warning" @click="edit(scope.row)">设计大屏</el-button>
 					<el-button size="small" text type="danger" @click="onDel(scope.row)">删除</el-button>
 				</template>
 			</el-table-column>
 		</el-table>
 		<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
+		<EditForm ref="editFormRef" @getList="getList()"></EditForm>
 	</el-card>
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
 import api from '/@/api/screen';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { useSearch } from '/@/hooks/useCommon';
 import { Session } from '/@/utils/storage';
+import EditForm from './edit.vue';
+
+const editFormRef = ref();
 
 const { params, tableData, getList, loading } = useSearch<any[]>(api.getList, 'Data', { name: '', address: '' });
 
 getList();
 
+const addOrEdit = async (row?: any) => {
+	if (row) {
+		editFormRef.value.open(row);
+		return;
+	} else {
+		editFormRef.value.open();
+	}
+};
+
 const add = async () => {
 	ElMessageBox.prompt('请输入项目名称', '创建大屏项目', {
 		confirmButtonText: '确认',