feat: 仿真镜像组界面设计

src/router/index.js

@@ -8,7 +8,7 @@ import sceneLibrary from "./sceneLibrary"; // 场景库
 import systemManagement from "./systemManagement"; // 账户管理
 import workManagement from "./workManagement"; // 工作管理
 import personalInformation from "./personalInformation"
-
+import simulationSceneGroup from "@/views/systemManagement/SimulationSceneGroup"
 Vue.use(VueRouter);
 
 const routes = [{
@@ -67,17 +67,15 @@ const routes = [{
       redirect: '/index',
       children: sceneLibrary,
     },
-    // {
-    //   path: "/multimodeSimulation",
-    //   name: "multimodeSimulation",
-    //   meta: {
-    //     tabname: "工作管理",
-    //     login: true
-    //   },
-    //   component: () => import("@/views/multimodeSimulation/index"),
-    //   redirect: '/index',
-    //   children: multimodeSimulation,
-    // },
+     {
+       path: "/simulationSceneGroup",
+       name: "simulationSceneGroup",
+       meta: {
+         tabname: "仿真景象组",
+         login: true
+       },
+       component: simulationSceneGroup,
+     },
     {
       path: "/workManagement",
       name: "workManagement",

src/views/systemManagement/SimulationSceneGroup.vue

@@ -0,0 +1,233 @@
+<template>
+	<div class="container">
+		<el-card class="box-card">
+			<el-form :inline="true" :model="formInline" class="demo-form-inline">
+				<el-form-item label="名称">
+					<el-input v-model="formInline.name" placeholder=""></el-input>
+				</el-form-item>
+
+				<el-form-item label="描述">
+					<el-input v-model="formInline.desc" placeholder=""></el-input>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="onSubmit">查询</el-button>
+					<el-button type="primary" @click="onSubmit">重置</el-button>
+				</el-form-item>
+			</el-form>
+		</el-card>
+		<div class="cus-table">
+			<div class="operator">
+				<el-button type="danger" class="delete-btn">批量删除</el-button>
+				<el-button type="primary" class="add-btn">新增</el-button>
+			</div>
+			<el-table :data="tableData" stripe style="width: 100%">
+				<el-table-column prop="address" label="序号">
+				</el-table-column>
+				<el-table-column prop="name" label="名称">
+				</el-table-column>
+				<el-table-column prop="name" label="描述">
+				</el-table-column>
+				<el-table-column prop="date" label="创建时间">
+				</el-table-column>
+				<el-table-column label="操作">
+					<template slot-scope="scope">
+						<el-button size="mini" @click="dialogFormVisible = true">编辑</el-button>
+						<el-button size="mini" type="danger"
+							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<el-pagination class="pageage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+				:current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
+				layout="total, sizes, prev, pager, next, jumper" :total="400">
+			</el-pagination>
+		</div>
+
+		<el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="450px">
+			<el-form :model="form">
+				<el-form-item  :label-width="formLabelWidth">
+					<span slot="label">
+						<span style="color: red">*</span>
+						<span>仿真镜像组名称</span>
+					</span>
+					<el-input v-model="form.name" autocomplete="off"></el-input>
+				</el-form-item>
+				<el-form-item :label-width="formLabelWidth">
+					<span slot="label">
+						<span style="color: red">*</span>
+						<span>仿真软件</span>
+					</span>
+					<el-input v-model="form.name" autocomplete="off"></el-input>
+				</el-form-item>
+				<el-form-item :label-width="formLabelWidth">
+					<span slot="label">
+						<span style="color: red">*</span>
+						<span>仿真控制器</span>
+					</span>
+					<el-input v-model="form.name" autocomplete="off"></el-input>
+				</el-form-item>
+				<el-form-item :label-width="formLabelWidth">
+					<span slot="label">
+						<span style="color: red">*</span>
+						<span>仿真连接器</span>
+					</span>
+					<el-input v-model="form.name" autocomplete="off"></el-input>
+				</el-form-item>
+				<el-form-item label="仿真镜像组秒速" :label-width="formLabelWidth">
+					<el-input v-model="form.name" autocomplete="off"></el-input>
+				</el-form-item>
+			</el-form>
+			<div slot="footer" class="dialog-footer">
+				<el-button @click="dialogFormVisible = false">取 消</el-button>
+				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: "SimulationSceneGroup",
+		data() {
+			return {
+				dialogFormVisible: false,
+				formLabelWidth: '160px',
+				form: {
+					name: '',
+					region: '',
+					date1: '',
+					date2: '',
+					delivery: false,
+					type: [],
+					resource: '',
+					desc: ''
+				},
+				currentPage4: 4,
+				formInline: {
+					name: '',
+					desc: ''
+				},
+				tableData: [{
+					date: '2016-05-02',
+					name: '王小虎',
+					address: '上海市普陀区金沙江路 1518 弄'
+				}, {
+					date: '2016-05-04',
+					name: '王小虎',
+					address: '上海市普陀区金沙江路 1517 弄'
+				}, {
+					date: '2016-05-01',
+					name: '王小虎',
+					address: '上海市普陀区金沙江路 1519 弄'
+				}, {
+					date: '2016-05-03',
+					name: '王小虎',
+					address: '上海市普陀区金沙江路 1516 弄'
+				}, {
+					date: '2016-05-02',
+					name: '王小虎',
+					address: '上海市普陀区金沙江路 1518 弄'
+				}, {
+					date: '2016-05-04',
+					name: '王小虎',
+					address: '上海市普陀区金沙江路 1517 弄'
+				}, {
+					date: '2016-05-01',
+					name: '王小虎',
+					address: '上海市普陀区金沙江路 1519 弄'
+				}, {
+					date: '2016-05-03',
+					name: '王小虎',
+					address: '上海市普陀区金沙江路 1516 弄'
+				}]
+			}
+		},
+		methods: {
+			onSubmit() {
+				console.log('submit!');
+			},
+			handleSizeChange(val) {
+				console.log(`每页 ${val} 条`);
+			},
+			handleCurrentChange(val) {
+				console.log(`当前页: ${val}`);
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.container {
+		width: 100%;
+	}
+
+	.box-card {
+		margin: 20px;
+		padding: 10px;
+		display: flex;
+		justify-content: center;
+	}
+
+	.el-card__body {
+		width: 100%;
+	}
+
+	.demo-form-inline {
+		width: 100%;
+		display: flex;
+		justify-content: space-evenly;
+
+	}
+
+	.cus-table {
+		margin: 50px 20px;
+	}
+
+	.operator {
+		margin: 10px 0;
+		padding: 5px 0;
+		float: right;
+	}
+
+	.add-btn {
+		height: 35px;
+	}
+
+	.delete-btn {
+		height: 35px;
+	}
+
+	.el-table__cell {
+		text-align: center !important;
+	}
+
+	.el-table__cell .cell {
+		font-size: 18px !important;
+	}
+
+	.el-table__row .cell {
+		font-size: 15px !important;
+	}
+
+	.el-form-item__label {
+		font-size: 18px !important;
+	}
+
+	.el-table th.el-table__cell {
+		background-color: #fafafa !important;
+	}
+
+	.pageage {
+		margin: 20px;
+		display: flex;
+		justify-content: right;
+	}
+
+	.el-form {
+		width: 100%;
+	}
+
+	.el-dialog__body {
+		width: 100%;
+	}
+</style>