Forráskód Böngészése

完成应用管理,前端部分

yukai 2 éve
szülő
commit
fdda095a21

+ 34 - 0
src/api/application/index.ts

@@ -0,0 +1,34 @@
+import { get, post, del, put, file } from '/@/utils/request';
+import getOrigin from '/@/utils/origin';
+const baseUrl = getOrigin(import.meta.env.VITE_SERVER_URL);
+
+export default {
+  manage: {
+    getList: (data: any) => get('/dev_ota_fireware/list', data),
+    del: (ids: number) => del('/dev_ota_fireware/delete', { ids }),
+    add: (data: any) => post('/dev_ota_fireware/add', data),
+    edit: (data: any) => post('/dev_ota_fireware/edit', data),
+    detail: (id: number) => get('/dev_ota_fireware/get', { id }),
+
+  },
+  module: {
+    getSubList: () => get('/product/list'),
+    getList: (data: any) => get('/dev_ota_module/list', data),
+    del: (ids: number) => del('/dev_ota_module/delete', { ids }),
+    add: (data: any) => post('/dev_ota_module/add', data),
+    edit: (data: any) => post('/dev_ota_module/edit', data),
+  },
+  batch: {
+    getList: (data: any) => get('/dev_ota_strategy/list', data),
+    getDeviceList: (data: any) => get('/product/device/list', data),
+    del: (ids: number) => del('/dev_ota_strategy/delete', { ids }),
+    add: (data: any) => post('/dev_ota_strategy/add', data),
+    edit: (data: any) => post('/dev_ota_strategy/edit', data),
+  },
+  device: {
+    getList: (data: any) => get('/dev_ota_detail/list', data),
+    del: (ids: number) => del('/dev_ota_detail/delete', { ids }),
+    add: (data: any) => post('/dev_ota_detail/add', data),
+    edit: (data: any) => post('/dev_ota_detail/edit', data),
+  }
+} 

+ 137 - 0
src/views/system/application/edit.vue

@@ -0,0 +1,137 @@
+<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="appId">
+				<el-input v-model="formData.appId" placeholder="请输入应用标识" />
+			</el-form-item>
+			<el-form-item label="应用名称" prop="name">
+				<el-input v-model="formData.name" placeholder="请输入应用名称" />
+			</el-form-item>
+			<el-form-item label="应用图标" prop="icon">
+				<uploadVue :img="formData.icon" @set-img="handleAvatarSuccess"></uploadVue>
+			</el-form-item>
+			<el-form-item label="AK" prop="access_key">
+				<el-input v-model="formData.access_key" placeholder="请输入ak,应用接入认证" />
+			</el-form-item>
+			<el-form-item label="SK" prop="secure_key">
+				<el-input v-model="formData.secure_key" placeholder="请输入sk,应用接入认证" />
+			</el-form-item>
+			<el-form-item label="组织" prop="org_id">
+				<el-cascader :options="deptData"
+					:props="{ checkStrictly: true, emitPath: false, value: 'deptId', label: 'deptName' }"
+					placeholder="请选择组织" clearable class="w100" v-model="formData.org_id
+						">
+					<template #default="{ node, data }">
+						<span>{{ data.deptName }}</span>
+						<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+					</template>
+				</el-cascader>
+			</el-form-item>
+			<el-form-item label="角色" prop="role_id">
+				<el-cascader :options="roleData"
+					:props="{ checkStrictly: true, multiple: true, emitPath: false, value: 'id', label: 'name' }"
+					placeholder="请选择角色" clearable class="w100" v-model="formData.role_id">
+					<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="desc">
+				<el-input v-model="formData.desc" type="textarea" :rows="3" />
+			</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>
+		<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/application'
+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 props = defineProps({
+	deptData: {
+		type: Array,
+		default: () => [],
+	},
+	roleData: {
+		type: Array,
+		default: () => [],
+	},
+})
+const baseForm = {
+	id: undefined,
+	name: '',
+	appId: '',
+	icon: '',
+	access_key: '',
+	secure_key: '',
+	org_id: '',
+	role_id: '',
+	desc: '',
+	status: 1,
+};
+const formData = reactive({
+	...baseForm,
+});
+const ruleForm = {
+	name: [ruleRequired('应用名称不能为空')],
+	appId: [ruleRequired('应用标识不能为空')],
+	icon: [ruleRequired('应用图标不能为空')],
+	access_key: [ruleRequired('AK不能为空')],
+	secure_key: [ruleRequired('SK不能为空')],
+	org_id: [ruleRequired('组织不能为空')],
+	role_id: [ruleRequired('角色产品不能为空')],
+};
+const onSubmit = async () => {
+	await formRef.value.validate();
+	const theApi = formData.id ? api.module.edit : api.module.add;
+	await theApi(formData);
+	ElMessage.success('操作成功');
+	resetForm();
+	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();
+};
+
+const open = async (row: any) => {
+	resetForm();
+	showDialog.value = true;
+	nextTick(() => {
+		Object.assign(formData, { ...row });
+	});
+};
+
+defineExpose({ open });
+</script>
+<style>
+.vertical-form-item {
+	display: block;
+	margin-bottom: 10px;
+	/* 可选,设置间距 */
+}</style>

+ 121 - 0
src/views/system/application/index.vue

@@ -0,0 +1,121 @@
+<template>
+	<el-card shadow="hover">
+		<div class="search">
+			<el-form :inline="true" ref="queryRef">
+				<el-form-item label="应用名称:" prop="name">
+					<el-input
+						v-model="params.keyWord"
+						placeholder="请输入应用名称"
+						clearable
+						size="default"
+						style="width: 240px"
+						@keyup.enter.native="getList"
+					/>
+				</el-form-item>
+				<el-form-item label="应用状态" prop="status" style="width: 200px;">
+					<el-select v-model="params.status" placeholder="应用状态" clearable size="default" style="width: 240px">
+						<el-option label="启用" :value="1" />
+						<el-option label="禁用" :value="0" />
+					</el-select>
+				</el-form-item>
+				<el-form-item>
+					<el-button size="default" type="primary" class="ml10" @click="getList()">
+						<el-icon>
+							<ele-Search />
+						</el-icon>
+						查询
+					</el-button>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" v-auth="'add'" @click="addOrEdit()">
+						<el-icon>
+							<ele-FolderAdd />
+						</el-icon>
+						添加应用
+					</el-button>
+				</el-form-item>
+			</el-form>
+		</div>
+		<el-table :data="tableData" style="width: 100%" row-key="id" v-loading="loading">
+			<el-table-column prop="id" label="ID" width="60" show-overflow-tooltip></el-table-column>
+			<el-table-column prop="name" label="应用标识" show-overflow-tooltip></el-table-column>
+			<el-table-column prop="nameAs" label="应用名称" show-overflow-tooltip></el-table-column>
+			<el-table-column prop="status" label="应用状态" align="center">
+				<template #default="scope">
+					<el-tag size="small" type="success" v-if="scope.row.status == 1">启用</el-tag>
+					<el-tag size="small" type="info" v-if="scope.row.status == 0">未启用</el-tag>
+				</template>
+			</el-table-column>
+			<el-table-column prop="createdAt" label="创建时间" min-width="100" align="center"></el-table-column>
+			<el-table-column label="操作" width="200" align="center">
+				<template #default="scope">
+					<el-button size="small" text type="success" @click="onActionStatus(scope.row)"
+						v-if="scope.row.status == 0" v-auth="'startOrStop'">启用</el-button>
+					<el-button size="small" text type="primary" @click="onActionStatus(scope.row)" v-if="scope.row.status > 0"
+						v-auth="'startOrStop'">停用</el-button>
+					<el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(scope.row)">编辑</el-button>
+					<el-button size="small" text type="danger" v-auth="'del'" @click="del(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"  :deptData="deptData" :roleData="roleData" @getList="getList()"></EditForm>
+	</el-card>
+</template>
+  
+<script lang="ts" setup>
+import { ElMessageBox, ElMessage } from 'element-plus'
+import EditForm from './edit.vue'
+import { ref } from 'vue'
+import api from '/@/api/application'
+import user from '/@/api/system';
+import { useSearch } from '/@/hooks/useCommon'
+const queryRef = ref()
+const deptData = ref([])
+const roleData = ref([])
+const editFormRef = ref()
+const { params, tableData, getList, loading } = useSearch<any[]>(api.module.getList, 'Data', { keyWord: '' })
+getList()
+const initTableData = () => {
+	user.dept.getList({status:1}).then((res: any) => {
+		deptData.value = res;
+	});
+	user.role.getList({status:1}).then((res: any) => {
+		roleData.value = res;
+	});
+};
+initTableData();
+const onActionStatus = (item: any) => {
+	if (item.status == 0) {
+		api.manage.status({ id: item.id,status:1 }).then((res: any) => {
+			getList();
+			ElMessage.success(res.message || '操作成功');
+		});
+	} else {
+		api.manage.status({ id: item.id,status:0 }).then((res: any) => {
+			getList();
+			ElMessage.success(res.message || '操作成功');
+		});
+	}
+}
+const addOrEdit = async (row?: any) => {
+	if (row) {
+		editFormRef.value.open(row)
+		return
+	} else {
+		editFormRef.value.open()
+	}
+}
+const del = (row: any) => {
+	ElMessageBox.confirm(`此操作将删除模型:“${row.name}”,是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(async () => {
+		await api.module.del(row.id)
+		ElMessage.success('删除成功')
+		getList()
+	})
+}
+</script>
+