完成项目和设备组管理

src/router/index.js

@@ -7,6 +7,7 @@ import Layout from "../views/layout/layout";
 import PrivApply from "../views/system/privApply";
 import Logs from "../views/monitor/logs";
 import Item from "../views/system/item";
+import Group from "../views/system/group";
 
 const routes = [{
 		path: "/",
@@ -22,6 +23,11 @@ const routes = [{
 				name: "Logs",
 				component: Logs
 			},
+			{
+				path: "/groups",
+				name: "Group",
+				component: Group
+			},
 			{
 				path: "/items",
 				name: "Item",

src/static/js/global.js

@@ -24,6 +24,8 @@ const URL = {
 	item: {
 		//列表
 		listPage: server + "item/listPage.do",
+		//全部的项目列表
+		allList: server + "item/listAll.do",
 		//增
 		save: server + "item/save.do",
 		//禁用
@@ -33,6 +35,21 @@ const URL = {
 		//更新
 		update: server + "item/update.do",
 	},
+	//项目组管理
+	group: {
+		//列表
+		listPage: server + "group/listPage.do",
+		//增
+		save: server + "group/save.do",
+		//查重
+		isRepeat: server + "group/isRepeat.do",
+		//禁用
+		forbidden: server + "group/forbidden.do",
+		//启用
+		permit: server + "group/permit.do",
+		//更新
+		update: server + "group/update.do",
+	},
 
 	//webSocket 地址
 	webSocket: "wss://www.mang406.top/webSocket/",

src/views/layout/layout.vue

@@ -34,7 +34,7 @@
 						<el-menu-item index="3-2">项目管理</el-menu-item>
 					</router-link>
 					<router-link to="/apply">
-						<el-menu-item index="3-3">项目组管理</el-menu-item>
+						<el-menu-item index="3-3">设备组管理</el-menu-item>
 					</router-link>
 					<router-link to="/apply">
 						<el-menu-item index="3-4">权限申请记录</el-menu-item>

src/views/system/group.vue

@@ -0,0 +1,287 @@
+<template>
+	<div class="zy-template">
+		<div class="zy-main-title">设备组管理</div>
+		<div class="zy-module">
+			<el-form :model="query" label-width="80px">
+				<el-form-item label="关键字" class="zy-search-form-item">
+					<el-input v-model="query.name" size="mini" placeholder="名称/编号" clearable></el-input>
+				</el-form-item>
+
+				<el-form-item label="项目" class="zy-search-form-item">
+					<el-select v-model="query.itemId" size="mini" clearable placeholder="不选默认全部">
+						<el-option :label="item.name" :value="item.id" v-for="item in itemList" />
+					</el-select>
+				</el-form-item>
+
+				<el-form-item label="状态" class="zy-search-form-item">
+					<el-select v-model="query.status" size="mini" clearable placeholder="不选默认全部">
+						<el-option label="禁用" value="0" />
+						<el-option label="启用" value="1" />
+					</el-select>
+				</el-form-item>
+				<el-button type="primary" size="mini" @click="submit">查询</el-button>
+			</el-form>
+		</div>
+
+		<div class="zy-module">
+			<el-button type="primary" size="small" style="margin-bottom: 20px;" @click="addDialog = true">增加</el-button>
+			<el-table :data="page.records" max-height="800" stripe size="small"
+				header-cell-class-name="zy-table-header-cell" cell-class-name='zy-table-cell'>
+				<el-table-column prop="code" label="设备组编号" width="100" />
+				<el-table-column prop="name" label="设备组名称" width="120" />
+				<el-table-column prop="item" label="所属项目" width="150" />
+				<el-table-column label="备注" min-width="30%">
+					<template #default="scope">
+						<div style="height: 24px; overflow: hidden;">
+							{{scope.row.remark}}
+						</div>
+					</template>
+				</el-table-column>
+				<el-table-column label="状态" width="60">
+					<template #default="scope">
+						<el-tag type="danger" size="mini" v-if="scope.row.status==0">禁用</el-tag>
+						<el-tag type="success" size="mini" v-if="scope.row.status==1">启用</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="createTime" label="创建时间" width="180" />
+				<el-table-column label="操作" width="100" min-width="10%">
+					<template #default="scope">
+						<el-button @click="handleUpdate(scope.row)" type="text" size="small">修改</el-button>
+						<el-button @click="handlePass(scope.row.id)" type="text" size="small" style="color: #67c23a"
+							v-if="scope.row.status==0">启用</el-button>
+						<el-button @click="handleRefuse(scope.row.id)" type="text" size="small" style="color: #f56c6c;"
+							v-if="scope.row.status==1">禁用</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<el-pagination class="zy-table-pagination" background layout="prev, pager, next"
+				:current-page="page.current" :total="page.total" :page-size="page.size" @current-change="pagination" />
+		</div>
+
+		<el-dialog title="添加设备组" v-model="addDialog" width="500px">
+			<el-form ref="addForm" :model="addForm" label-width="100px" :rules="rules">
+				<el-form-item label="设备组编号:" prop="code">
+					<el-input v-model="addForm.code" maxlength="30" placeholder="不可重复"></el-input>
+				</el-form-item>
+
+				<el-form-item label="设备组名称:">
+					<el-input v-model="addForm.name" maxlength="30"></el-input>
+				</el-form-item>
+
+				<el-form-item label="所属项目:">
+					<el-select v-model="addForm.itemId" clearable placeholder="可以为空,但不建议">
+						<el-option :label="item.name" :value="item.id" v-for="item in itemList" />
+					</el-select>
+				</el-form-item>
+
+				<el-form-item label="备注:">
+					<el-input type="textarea" v-model="addForm.remark" maxlength="100"></el-input>
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="addDialog = false">取 消</el-button>
+					<el-button type="primary" @click="addSubmit('addForm')">提 交</el-button>
+				</span>
+			</template>
+		</el-dialog>
+
+		<el-dialog title="修改设备组" v-model="updateDialog" width="500px">
+			<el-form ref="updateForm" :model="updateForm" label-width="100px" :rules="rules">
+				<el-form-item label="设备组编号:" prop="code">
+					<el-input v-model="updateForm.code" maxlength="30" placeholder="不可重复"></el-input>
+				</el-form-item>
+
+				<el-form-item label="设备组名称:">
+					<el-input v-model="updateForm.name" maxlength="30"></el-input>
+				</el-form-item>
+
+				<el-form-item label="所属项目:">
+					<el-select v-model="updateForm.itemId" clearable placeholder="可以为空,但不建议">
+						<el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in itemList" />
+					</el-select>
+				</el-form-item>
+
+				<el-form-item label="备注:">
+					<el-input type="textarea" v-model="updateForm.remark" maxlength="100"></el-input>
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="updateDialog = false">取 消</el-button>
+					<el-button type="primary" @click="updateSubmit('updateForm')">提 交</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				query: {
+					name: null,
+					itemId: null,
+					status: null,
+				},
+				page: {
+					current: 1,
+					size: 10,
+				},
+				itemList: null, //项目列表
+				addDialog: false, //增加表单
+				updateDialog: false, //更新表单
+				updateForm: { //更新表单
+					code: null,
+					name: null,
+					itemId: null,
+					remark: null
+				},
+				addForm: { //添加表单
+					code: null,
+					name: null,
+					itemId: null,
+					remark: null
+				},
+				rules: {
+					code: [{
+						required: true,
+						message: '项目编号必填',
+						trigger: 'blur'
+					}],
+
+				}
+			};
+		},
+		mounted: function() {
+			this.getListPage(this.page);
+			this.allItem();
+		},
+		methods: {
+			/**
+			 * 提交查询条件
+			 */
+			submit: function() {
+				const params = {
+					name: this.query.name,
+					itemId: this.query.itemId,
+					status: this.query.status
+				};
+				this.getListPage(params);
+			},
+
+			/**
+			 * 分页点击事件
+			 */
+			pagination: function(current) {
+				const params = {
+					name: this.query.name,
+					itemId: this.query.itemId,
+					status: this.query.status,
+					current: current,
+					size: this.page.size,
+				};
+				this.getListPage(params);
+			},
+
+			/**
+			 * 获取设备列表
+			 */
+			getListPage: function(params) {
+				this.$http.Get(this.$global.group.listPage, params).then(res => {
+					this.page = res.data;
+				})
+			},
+
+			/**
+			 * 增加设备组
+			 */
+			handleAdd: function(obj) {
+				this.addDialog = true;
+			},
+
+			/**
+			 * 更新设备组
+			 */
+			handleUpdate: function(obj) {
+				this.updateForm = {
+					id:obj.id,
+					code: obj.code,
+					name: obj.name,
+					itemId: parseInt(obj.itemId),
+					remark: obj.remark
+				}
+				console.log(obj);
+				this.updateDialog = true;
+			},
+
+			/**
+			 * 提交增加表单
+			 */
+			addSubmit: function(formName) {
+				this.$refs[formName].validate((valid) => {
+					if (!valid) return false;
+					//提交表单
+					this.$http.Post(this.$global.group.save, this.addForm).then(res => {
+						this.$message.success("添加成功!");
+						this.refresh();
+					})
+				});
+			},
+
+			/**
+			 * 提交更新表单
+			 */
+			updateSubmit: function(formName) {
+				this.$refs[formName].validate((valid) => {
+					if (!valid) return false;
+					//提交表单
+					this.$http.Post(this.$global.group.update, this.updateForm).then(res => {
+						console.log(res.data);
+						this.$message.success("修改成功!");
+						this.refresh();
+					})
+				});
+			},
+
+			/**
+			 * 禁用
+			 */
+			forbidden: function(id) {},
+
+			/**
+			 * 启用
+			 */
+			permit: function(id) {},
+
+			/**
+			 * 全部的项目组
+			 */
+			allItem: function() {
+				this.$http.Get(this.$global.item.allList, {}).then(res => {
+					this.itemList = res.data;
+				})
+			},
+			/**
+			 * 刷新列表
+			 */
+			refresh: function() {
+				this.addDialog = false;
+				this.updateDialog = false;
+				const params = {
+					key: this.query.key,
+					itemId: this.query.itemId,
+					status: this.query.status,
+					current: this.page.current,
+					size: this.page.size,
+				}
+				this.getListPage(params);
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+
+</style>