浏览代码

更好登录页面背景图,部分页面代码清理

chenwen 2 年之前
父节点
当前提交
7c2f80da16
共有 9 个文件被更改,包括 176 次插入3 次删除
  1. 5 0
      public/test/menu.json
  2. 二进制
      src/assets/img/img.jpg
  3. 二进制
      src/assets/img/login-bg.jpg
  4. 二进制
      src/assets/img/login_bg.jpg
  5. 二进制
      src/assets/img/logo.png
  6. 1 1
      src/components/NavmenuItem.vue
  7. 1 1
      src/pages/Home.vue
  8. 19 1
      src/pages/Login.vue
  9. 150 0
      src/pages/sys/SortCode.vue

+ 5 - 0
public/test/menu.json

@@ -37,6 +37,11 @@
 				"menuName":"角色管理",
 				"menuLink":"sys/Role.vue"
 			},
+			{
+				"menuId":"5-5",
+				"menuName":"编码管理",
+				"menuLink":"sys/SortCode.vue"
+			},
 			{
 				"menuId":"5-1",
 				"menuName":"参数类型管理",

二进制
src/assets/img/img.jpg


二进制
src/assets/img/login-bg.jpg


二进制
src/assets/img/login_bg.jpg


二进制
src/assets/img/logo.png


+ 1 - 1
src/components/NavmenuItem.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup>
-	import {toRefs,defineEmits} from 'vue';
+	import {toRefs} from 'vue';
 	
 	const emit = defineEmits(['clickMenuItem'])
 	

+ 1 - 1
src/pages/Home.vue

@@ -48,7 +48,7 @@
 	   
    })
    
-   const loadMenuPage=(val)=>import(`/src/pages/${val}`)
+   const loadMenuPage=(val)=>import(/* @vite-ignore */`/src/pages/${val}`)
 </script>
 
 <style scoped>

+ 19 - 1
src/pages/Login.vue

@@ -1,5 +1,9 @@
 <template>
 	<div class="login-wrap">
+		<div class="logo-box">
+			<img  src="../assets/img/logo.png"/>
+			<p>众联石油</p>
+		</div>
 	    <div class="ms-login">
 	        <div class="ms-title">智能油田生产决策平台</div>
 	        <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
@@ -77,10 +81,24 @@ import { ElMessage } from "element-plus";
     position: relative;
     width: 100%;
     height: 100%;
-    background-image: url(../assets/img/bg_mh.jpg);
+    background-image: url(../assets/img/login_bg.jpg);
     background-repeat: no-repeat;
 	background-size:cover;
 }
+.logo-box{
+	position: absolute;
+	left:100px;
+	top:50px;
+	color:#fff;
+	font-family: 'STXingkai','SimHei';
+	text-align: center;
+}
+.logo-box p{
+	width:64px;
+	padding:5px;
+	text-align: center;
+	font-size: 16px;
+}
 .ms-title {
     width: 100%;
     line-height: 50px;

+ 150 - 0
src/pages/sys/SortCode.vue

@@ -0,0 +1,150 @@
+<template>
+	<div class="page-container">
+		<div class="page-side">
+			<el-scrollbar style="height:100%;padding:5px;box-sizing: border-box;">
+				<el-tree :data="treeNodes" :props="treeNodeProps" :highlight-current="true" class="tree"  @node-click="nodeClickHandle">
+					    <template #default="{ node, data }">
+					        <span class="custom-tree-node">
+							  <template v-if="node.isLeaf">
+								 <el-icon><Tools/></el-icon><span style="margin-left:2px;">{{ node.label }}</span> 
+							  </template>
+					          
+							  <span v-else>{{ node.label }}</span>
+					          
+					        </span>
+					    </template>
+				</el-tree> 
+			</el-scrollbar>
+		</div>
+		<div class="page-split"></div>
+		<div class="page-main">
+			<el-form :model="formModel" label-position="right" label-width="auto" :inline="false" :rules="rules" :inline-message="true">
+			    <el-form-item label="上级编码名">
+			        <el-input v-model="formModel.fatherCodeName" autocomplete="off"  class="edit-form-item" :readonly="true"/>
+					<el-button type="primary" plain size="default">清除</el-button>
+					<span class="footnote">(为空表示顶级)</span>
+			    </el-form-item>
+				<el-form-item label="编码">
+				    <el-input v-model="formModel.codeId" autocomplete="off"  class="edit-form-item" :readonly="true"/>
+					<span class="footnote">(系统自动生成)</span>
+				</el-form-item>
+			     
+				
+				  
+				<el-form-item label="编码名" prop="codeName">
+				    <el-input v-model="formModel.codeName"  autocomplete="off" placeholder="请输入编码名" class="edit-form-item" clearable/>
+				</el-form-item>
+				  
+				<el-form-item label="显示序号">
+				    <el-input v-model="formModel.displayNum"  autocomplete="off"  class="edit-form-item" clearable/>
+				   
+				</el-form-item>
+				  
+				<el-form-item label="助记码">
+				    <el-input v-model="formModel.assistCode"  autocomplete="off"  class="edit-form-item" :readonly="true"/>
+					<span class="footnote">(系统自动生成)</span>
+				</el-form-item>
+				  
+				<el-form-item label="备注1">
+				    <el-input v-model="formModel.spare1"  autocomplete="off"  class="edit-form-item" clearable/>
+				</el-form-item>
+				  
+				<el-form-item label="备注2">
+				    <el-input v-model="formModel.spare2"  autocomplete="off" class="edit-form-item" clearable/>
+				</el-form-item>
+				  
+				<el-form-item label="备注3">
+				    <el-input v-model="formModel.spare3"  autocomplete="off"  class="edit-form-item" clearable/>
+				</el-form-item>
+				  
+				<el-form-item label="备注4">
+				    <el-input v-model="formModel.spare4"  autocomplete="off" class="edit-form-item" clearable/>
+				</el-form-item>
+				 
+				  
+				<el-form-item label=" ">
+					<el-button type="primary">保存</el-button>
+					<el-button type="success">新增</el-button>
+					<el-button>删除</el-button>
+				</el-form-item>
+			</el-form>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import {ref,reactive} from 'vue'
+	import { fetchData} from "../../api/sidetree.js"
+	
+	const treeNodes = ref([])
+	
+	const treeNodeProps = {
+		children: 'children',
+		label: 'label',
+		isLeaf:'leaf'
+	}
+	
+	const formModel = reactive({
+	  fatherCodeName:null,
+	  codeId: '',
+	  codeName:'',
+	  displayNum:'',
+	  assistCode:'',
+	  spare1:null,
+	  spare2:null,
+	  spare3:null,
+	  spare4:null
+	})
+	
+	const nodeClickHandle=()=>{
+		
+	}
+	
+	const getData = () => {
+	    fetchData({}).then((res) => {
+	        treeNodes.value=res
+	    });
+	};
+	getData();
+	
+	const rules =reactive({
+		codeName:[
+			{required:true,message:'编码名还未填写',trigger:'blur'},
+			{ min: 3, max: 20, message: '编码名长度应该为3-20', trigger: 'blur' }
+			]
+	})
+</script>
+
+<style scoped>
+	.page-container{
+		padding: 5px 10px;
+		box-sizing: border-box;
+		height: 100%;
+		display: flex;
+		flex-flow: row nowrap;
+	}
+	.page-side{
+		width:240px;
+		height: 100%;
+	}
+	.page-split{
+		width:5px;
+		height: 100%;
+		background-color: #f2f2f2;
+	}
+	.page-main{
+		flex:1;
+		padding:0 50px;
+	}
+	
+	.el-form--inline.el-form--label-top{
+		justify-content: space-between;
+	}
+	.edit-form-item{
+		width:350px;
+	}
+	.footnote{
+		font-size:12px;
+		color:#999;
+	}
+</style>