feat:增加应用接入中角色选择的支持

src/views/iot/projects/detail/index.vue

@@ -14,9 +14,9 @@
         <el-tab-pane label="组态应用" name="2" lazy>
           <TopoVue :resourcesTypes="2"></TopoVue>
         </el-tab-pane>
-        <!-- <el-tab-pane label="视频监控" name="3" lazy>
+        <el-tab-pane label="视频监控" name="3" lazy>
           <VideoVue :resourcesTypes="3"></VideoVue>
-        </el-tab-pane> -->
+        </el-tab-pane>
       </el-tabs>
     </el-card>
   </div>

src/views/system/application/edit.vue

@@ -11,13 +11,13 @@
 			<el-form-item label="应用图标" prop="icon">
 				<uploadVue :img="formData.icon" @set-img="handleAvatarSuccess"></uploadVue>
 			</el-form-item>
-			<el-form-item label="AK" prop="accessKey">
+			<el-form-item label="应用 AK" prop="accessKey">
 				<el-input v-model="formData.accessKey" placeholder="请输入ak，应用接入认证" />
 			</el-form-item>
-			<el-form-item label="SK" prop="secureKey">
+			<el-form-item label="应用  SK" prop="secureKey">
 				<el-input v-model="formData.secureKey" placeholder="请输入sk，应用接入认证" />
 			</el-form-item>
-			<el-form-item label="组织" prop="orgId">
+			<el-form-item label="应用组织" prop="orgId">
 				<el-cascader :options="deptData"
 					:props="{ checkStrictly: true, emitPath: false, value: 'deptId', label: 'deptName' }"
 					placeholder="请选择组织" clearable class="w100" v-model="formData.orgId
@@ -28,22 +28,29 @@
 					</template>
 				</el-cascader>
 			</el-form-item>
-			<el-form-item label="应用描述" prop="desc">
-				<el-input v-model="formData.desc" type="textarea" :rows="3" />
+			<el-form-item label="应用角色" prop="roleId">
+				<el-cascader :options="roleList"
+					:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
+					placeholder="请选择角色" clearable class="w100" v-model="formData.roleId">
+					<template #default="{ node, data }">
+						<span>{{ data.name }}</span>
+						<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+					</template>
+				</el-cascader>
 			</el-form-item>
-			<!-- <el-form-item label="应用类型" prop="name">
-				<el-input v-model="formData.name" placeholder="请输入应用类型" />
-			</el-form-item> -->
 			<el-form-item label="应用状态" prop="status">
 				<el-radio-group v-model="formData.status">
 					<el-radio :label="1">启用</el-radio>
 					<el-radio :label="0">未启用</el-radio>
 				</el-radio-group>
 			</el-form-item>
+			<el-form-item label="回调地址" prop="callbackUri">
+				<el-input v-model="formData.callbackUri" placeholder="请输入回调地址" />
+			</el-form-item>
+			<el-form-item label="应用描述" prop="desc">
+				<el-input v-model="formData.desc" type="textarea" :rows="3" />
+			</el-form-item>
 		</el-form>
-		<el-form-item label="回调地址" prop="callbackUri">
-			<el-input v-model="formData.callbackUri" placeholder="请输入回调地址" />
-		</el-form-item>
 		<template #footer>
 			<div class="dialog-footer">
 				<el-button @click="showDialog = false">取消</el-button>
@@ -53,20 +60,25 @@
 	</el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, nextTick } from 'vue';
+import { ref, reactive, nextTick, onMounted } from 'vue';
 import api from '/@/api/application'
+import systemApi from '/@/api/system'
 import { ruleRequired } from '/@/utils/validator';
 import { ElMessage, UploadProps } from 'element-plus';
 import uploadVue from '/@/components/upload/index.vue'
+
 const emit = defineEmits(['getList']);
 const showDialog = ref(false);
 const formRef = ref();
+const roleList = ref<any[]>([]);
+
 const props = defineProps({
 	deptData: {
 		type: Array,
 		default: () => [],
 	},
 })
+
 const baseForm = {
 	id: undefined,
 	appId:'',
@@ -80,9 +92,11 @@ const baseForm = {
 	status: 1,
 	callbackUri:''
 };
+
 const formData = reactive({
 	...baseForm,
 });
+
 const ruleForm = {
 	name: [ruleRequired('应用名称不能为空')],
 	icon: [ruleRequired('应用图标不能为空')],
@@ -91,6 +105,18 @@ const ruleForm = {
 	orgId: [ruleRequired('组织不能为空')],
 	roleId: [ruleRequired('角色不能为空')],
 };
+
+// 获取角色列表
+const getRoleList = async () => {
+	try {
+		const res = await systemApi.role.getList({ status: 1 });
+		roleList.value = res || [];
+	} catch (error) {
+		console.error('获取角色列表失败:', error);
+		roleList.value = [];
+	}
+};
+
 const onSubmit = async () => {
 	await formRef.value.validate();
 	const theApi = formData.id ? api.edit : api.add;
@@ -100,9 +126,11 @@ const onSubmit = async () => {
 	showDialog.value = false;
 	emit('getList');
 };
+
 const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
 	formData.icon = response
 }
+
 const resetForm = async () => {
 	Object.assign(formData, { ...baseForm });
 	formRef.value && formRef.value.resetFields();
@@ -111,13 +139,19 @@ const resetForm = async () => {
 const open = async (row: any) => {
 	resetForm();
 	showDialog.value = true;
+	// 获取角色列表
+	await getRoleList();
 	nextTick(() => {
 		Object.assign(formData, { ...row });
 		console.log(formData);
-
 	});
 };
 
+// 组件挂载时获取角色列表
+onMounted(() => {
+	getRoleList();
+});
+
 defineExpose({ open });
 </script>
 <style scoped>
@@ -125,4 +159,4 @@ defineExpose({ open });
 	display: block;
 	margin-bottom: 10px;
 	/* 可选，设置间距 */
-}</style>
+}</style>