用户，参数管理、角色管理增删改基础页面

public/test/menu.json

@@ -32,9 +32,14 @@
 				"menuName":"用户管理",
 				"menuLink":"sys/User.vue"
 			},
+			{
+				"menuId":"5-4",
+				"menuName":"角色管理",
+				"menuLink":"sys/Role.vue"
+			},
 			{
 				"menuId":"5-1",
-				"menuName":"参数管理",
+				"menuName":"参数类型管理",
 				"menuLink":"sys/ParamMgr.vue"
 			},
 			{

src/assets/css/qpage.css

@@ -0,0 +1,18 @@
+	.qpage{
+		padding: 10px;
+		box-sizing: border-box;
+		height: 100%;
+		
+	}
+	.query-form-inline{
+		margin:0 0px;
+	}
+	
+	.qpage-body{
+		height: calc(100% - 50px);
+	}
+	
+	.tool-column{
+		display: flex;
+		justify-content: space-around;
+	}

src/components/crudtable/index.js

@@ -1 +0,0 @@
-import request from '../utils/request';

src/pages/sys/ParamMgr.vue

@@ -16,7 +16,7 @@
 			page-info-opts="total, prev, pager, next,sizes"
 			url="./test/tableDatas.json"
 			:initWhere="{a:1,b:2}"
-			:pageSize="21"
+			:pageSize="20"
 			>
 			  <template #toolGroup>
 				  <el-button type="primary" icon="plus">新增</el-button>
@@ -24,12 +24,12 @@
 				  <el-button type="warning" icon="delete">批量删除</el-button>
 			  </template>
 			  <template #tabColumns>
-				  <el-table-column fixed prop="date" label="Date" width="150" />
-				  <el-table-column prop="name" label="Name" width="120" />
-				  <el-table-column prop="state" label="State" width="120" />
-				  <el-table-column prop="city" label="City" width="320" />
-				  <el-table-column prop="address" label="Address" width="600" />
-				  <el-table-column prop="zip" label="Zip" width="160" fixed="right">
+				  <el-table-column fixed prop="date" label="参数名" width="150" />
+				  <el-table-column prop="name" label="参数编码" width="120" />
+				  <el-table-column prop="state" label="计量单位" width="120" />
+				  <el-table-column prop="city" label="创建时间" width="320" />
+				  <el-table-column prop="address" label="创建人" width="600" />
+				  <el-table-column prop="zip" label="操作" width="160" fixed="right">
 				  					<template #default="scope">
 				  						<div class="tool-column">
 				  							<el-button type="primary" icon="edit" size="small" @click="editHandle">编辑</el-button>
@@ -81,23 +81,6 @@
 </script>
 
 <style scoped>
+	@import url('../../assets/css/qpage.css');
 	
-	.qpage{
-		padding: 10px;
-		box-sizing: border-box;
-		height: 100%;
-		
-	}
-	.query-form-inline{
-		margin:0 0px;
-	}
-	
-	.qpage-body{
-		height: calc(100% - 50px);
-	}
-	
-	.tool-column{
-		display: flex;
-		justify-content: space-around;
-	}
 </style>

src/pages/sys/Role.vue

@@ -0,0 +1,129 @@
+<template>
+ <div class="qpage">
+	<el-form :inline="true" :model="queryForm" class="query-form-inline">
+	   <el-form-item label="">
+	     <el-input v-model="queryForm.role" placeholder="请输入角色名关键字" />
+	   </el-form-item>
+	   
+	   <el-form-item>
+	     <el-button type="primary" :loading="isQuerying" @click="queryHandle">检索</el-button>
+	   </el-form-item>
+	</el-form>
+	 
+	<div class="qpage-body">
+		<CrudTable
+		ref="crudTable"
+		page-info-opts="total, prev, pager, next,sizes"
+		url="./test/tableDatas.json"
+		:initWhere="{a:1,b:2}"
+		:pageSize="20"
+		
+		>
+		  <template #toolGroup>
+			  <el-button type="primary" icon="plus" @click="openEditHandle()">新增</el-button>
+			  
+		  </template>
+		  <template #tabColumns>
+			  <el-table-column fixed type="index" label="序号" width="60" align="center"/>
+			  <el-table-column fixed prop="date" label="角色名" width="150" />
+			  <el-table-column prop="name" label="说明" width="360" />
+			 
+			  <el-table-column prop="zip" label="操作" width="160" fixed="right">
+			  					<template #default="scope">
+			  						<div class="tool-column">
+			  							<el-button type="primary" icon="edit" size="small" @click="openEditHandle(scope.row)">编辑</el-button>
+			  							
+			  							<el-button type="warning" icon="delete" size="small" @click="delHandle">删除</el-button>
+			  						</div>
+			  					    
+			  					</template>
+			  </el-table-column>
+		  </template>
+			
+		</CrudTable> 
+		
+	</div>
+	 
+	<el-dialog v-model="editDialogShow" title="角色编辑" :close-on-click-modal="false" 
+	:destroy-on-close="true"
+	>
+		<UserEdit ref="userEdit" key="eidt1"></UserEdit>
+		<template #footer>
+		    <span class="dialog-footer">
+		        <el-button @click="beforeCloseHandle('cancel')">取消</el-button>
+		        <el-button type="primary" @click="beforeCloseHandle('sure')">
+		         确定
+		        </el-button>
+		    </span>
+		</template>
+	</el-dialog>
+ </div>
+  
+</template>
+
+<script  setup>
+	import {reactive,ref} from 'vue'
+	import {ElMessageBox} from 'element-plus'
+	import CrudTable from "../../components/crudtable/CrudTable.vue"
+	import UserEdit from "./UserEdit.vue"
+	
+	const crudTable=ref(null)
+	
+	const isQuerying=ref(false)
+	
+	const editDialogShow=ref(false)
+	
+	const queryForm = reactive({
+	  role: ''
+	})
+	
+	const queryHandle=()=>{
+		isQuerying.value=true
+		crudTable.value.query(queryForm).then(resp=>{
+			isQuerying.value=false
+		})
+		
+	}
+	
+	const delHandle=()=>{
+		ElMessageBox.confirm(
+			'确定要删除该用户吗?',
+			'操作确认',
+			{
+				confirmButtonText:'确定',
+				cancelButtonText:'取消',
+				type: 'warning'
+			}
+		).then(()=>{
+			alert('ok');
+		}).catch(()=>{
+			console.log('cancel del user')
+		})
+	}
+	
+	
+	const userEdit=ref(null)
+	
+	const openEditHandle=(record)=>{
+		console.log(record)
+		editDialogShow.value=true
+	}
+	
+	const beforeCloseHandle=(tag)=>{
+		if(tag==='cancel'){
+			editDialogShow.value=false
+		}
+		else{
+			userEdit.value.submitForm().then(()=>{
+				editDialogShow.value=false
+				queryHandle()
+			})
+		}
+	}
+	
+</script>
+
+<style scoped>
+	@import url('../../assets/css/qpage.css');
+	
+</style>

src/pages/sys/User.vue

@@ -1,220 +1,131 @@
 <template>
  <div class="qpage">
-	 <el-form :inline="true" :model="formInline" class="query-form-inline">
+	<el-form :inline="true" :model="queryForm" class="query-form-inline">
 	   <el-form-item label="">
-	     <el-input v-model="formInline.user" placeholder="请输入用户名关键字" />
+	     <el-input v-model="queryForm.user" placeholder="请输入用户名关键字" />
 	   </el-form-item>
 	   
 	   <el-form-item>
-	     <el-button type="primary" @click="onSubmit" loading>检索</el-button>
+	     <el-button type="primary" :loading="isQuerying" @click="queryHandle">检索</el-button>
 	   </el-form-item>
-	 </el-form>
+	</el-form>
 	 
-	 <div class="qpage-body">
-		 <div class="qpage-toolbar">
-				<div class="tool-group">
-					 <el-button-group>
-						 <el-button type="primary" icon="plus">新增</el-button>
-						 <el-button type="success" icon="document">导出</el-button>
-						 <el-button type="warning" icon="delete">批量删除</el-button>
-					 </el-button-group>
-					
-				</div>
-		 		 <el-pagination
-		 		       v-model:current-page="currentPage4"
-		 		       v-model:page-size="pageSize4"
-		 		       :page-sizes="[100, 200, 300, 400]"
-		 		       :small="false"
-		 		       :disabled="false"
-		 		       :background="false"
-		 		       layout="total, prev, pager, next,sizes"
-		 		       :total="400"
-		 		      
-		 		     />
-		</div>
-		<div class="qpage-table">
-			<el-table :data="tableData" style="width: 100%;height:100%;"  border stripe highlight-current-row>
-			     <el-table-column fixed prop="date" label="Date" width="150" />
-			     <el-table-column prop="name" label="Name" width="120" />
-			     <el-table-column prop="state" label="State" width="120" />
-			     <el-table-column prop="city" label="City" width="320" />
-			     <el-table-column prop="address" label="Address" width="600" />
-			     <el-table-column prop="zip" label="Zip" width="160" fixed="right">
-					<template #default="scope">
-						<div class="tool-column">
-							<el-button type="primary" icon="edit" size="small">编辑</el-button>
-							
-							<el-button type="warning" icon="delete" size="small">删除</el-button>
-						</div>
-					    
-					</template>
-				 </el-table-column>
-			</el-table>
-		</div>
+	<div class="qpage-body">
+		<CrudTable
+		ref="crudTable"
+		page-info-opts="total, prev, pager, next,sizes"
+		url="./test/tableDatas.json"
+		:initWhere="{a:1,b:2}"
+		:pageSize="20"
+		>
+		  <template #toolGroup>
+			  <el-button type="primary" icon="plus" @click="openEditHandle()">新增</el-button>
+			  
+		  </template>
+		  <template #tabColumns>
+			  <el-table-column fixed type="index" label="序号" width="60" align="center"/>
+			  <el-table-column fixed prop="date" label="姓名" width="150" />
+			  <el-table-column prop="name" label="账号" width="120" />
+			  <el-table-column prop="state" label="所属部门" width="120" />
+			  <el-table-column prop="state2" label="所辖部门" width="120" />
+			  <el-table-column prop="city" label="角色" width="320" />
+			  <el-table-column prop="address" label="创建时间" width="600" />
+			  <el-table-column prop="zip" label="操作" width="160" fixed="right">
+			  					<template #default="scope">
+			  						<div class="tool-column">
+			  							<el-button type="primary" icon="edit" size="small" @click="openEditHandle(scope.row)">编辑</el-button>
+			  							
+			  							<el-button type="warning" icon="delete" size="small" @click="delHandle">删除</el-button>
+			  						</div>
+			  					    
+			  					</template>
+			  </el-table-column>
+		  </template>
+			
+		</CrudTable> 
 		
-	 </div>
-	 
+	</div>
 	 
+	<el-dialog v-model="editDialogShow" title="用户编辑" :close-on-click-modal="false" 
+	:destroy-on-close="true"
+	>
+		<UserEdit ref="userEdit" key="eidt1"></UserEdit>
+		<template #footer>
+		    <span class="dialog-footer">
+		        <el-button @click="beforeCloseHandle('cancel')">取消</el-button>
+		        <el-button type="primary" @click="beforeCloseHandle('sure')">
+		         确定
+		        </el-button>
+		    </span>
+		</template>
+	</el-dialog>
  </div>
   
 </template>
 
 <script  setup>
-import { reactive,ref } from 'vue'
-
-const formInline = reactive({
-  user: '',
-  region: '',
-})
-
-const pageSize4 = ref(100)
-const currentPage4 = ref(4)
-
-const onSubmit = () => {
-  console.log('submit!')
-  alert();
-}
-
-const tableData = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-  },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-  },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-  },
-  {
-    date: '2016-05-08',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-  },
-  {
-    date: '2016-05-06',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-  },
-  {
-    date: '2016-05-07',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-  },
-  {
-    date: '2016-05-06',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-  },
-  {
-    date: '2016-05-07',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-  },
-  {
-    date: '2016-05-06',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-  },
-  {
-    date: '2016-05-07',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-  },
-  {
-    date: '2016-05-06',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-  },
-  {
-    date: '2016-05-07',
-    name: 'Tom',
-    state: 'California',
-    city: 'Los Angeles',
-    address: 'No. 189, Grove St, Los Angeles',
-    zip: 'CA 90036',
-  },
-]
-</script>
-
-<style scoped>
-	.qpage{
-		padding: 10px;
-		box-sizing: border-box;
-		height: 100%;
+	import {reactive,ref} from 'vue'
+	import {ElMessageBox} from 'element-plus'
+	import CrudTable from "../../components/crudtable/CrudTable.vue"
+	import UserEdit from "./UserEdit.vue"
+	
+	const crudTable=ref(null)
+	
+	const isQuerying=ref(false)
+	
+	const editDialogShow=ref(false)
+	
+	const queryForm = reactive({
+	  user: ''
+	})
+	
+	const queryHandle=()=>{
+		isQuerying.value=true
+		crudTable.value.query(queryForm).then(resp=>{
+			isQuerying.value=false
+		})
 		
 	}
-	.query-form-inline{
-		margin:0 0px;
-	}
 	
-	.qpage-body{
-		height: calc(100% - 50px);
+	const delHandle=()=>{
+		ElMessageBox.confirm(
+			'确定要删除该用户吗?',
+			'操作确认',
+			{
+				confirmButtonText:'确定',
+				cancelButtonText:'取消',
+				type: 'warning'
+			}
+		).then(()=>{
+			alert('ok');
+		}).catch(()=>{
+			console.log('cancel del user')
+		})
 	}
 	
-	.qpage-toolbar{
-		height: 50px;
-		padding:10px 10px;
-		box-sizing: border-box;
-		background-color: #f4f4f4;
-		display: flex;
-		justify-content:space-between;
-		border:1px solid #e9e9e9;
-	}
-	.qpage-table{
-		height: calc(100% - 50px);
+	
+	const userEdit=ref(null)
+	
+	const openEditHandle=(record)=>{
+		console.log(record)
+		editDialogShow.value=true
 	}
 	
-	.tool-column{
-		display: flex;
-		justify-content: space-around;
+	const beforeCloseHandle=(tag)=>{
+		if(tag==='cancel'){
+			editDialogShow.value=false
+		}
+		else{
+			userEdit.value.submitForm().then(()=>{
+				editDialogShow.value=false
+				queryHandle()
+			})
+		}
 	}
 	
+</script>
+
+<style scoped>
+	@import url('../../assets/css/qpage.css');
 	
 </style>

src/pages/sys/UserEdit.vue

@@ -0,0 +1,98 @@
+<template>
+	<div class="edit-page">
+		<el-form :model="formModel" label-position="top" label-width="auto" :inline="true" :rules="rules">
+		      <el-form-item label="账号" prop="loginId">
+		        <el-input v-model="formModel.loginId" autocomplete="off"  class="edit-form-item"/>
+		      </el-form-item>
+			  <el-form-item label="姓名">
+			    <el-input v-model="formModel.realName" autocomplete="off" placeholder="请输入姓名" class="edit-form-item" clearable/>
+			  </el-form-item>
+		      <el-form-item label="所属部门">
+				<el-tree-select v-model="formModel.orgId" :data="data" check-strictly :render-after-expand="false"  class="edit-form-item">
+					  
+				</el-tree-select>
+		       
+		      </el-form-item>
+			 
+			  <el-form-item label="所辖部门">
+			    <el-tree-select v-model="formModel.authOrgIds" :data="data" check-strictly :render-after-expand="false"  class="edit-form-item">
+			    	  
+			    </el-tree-select>
+			  </el-form-item>
+			  
+			  <el-form-item label="密码" prop="pwd">
+			    <el-input v-model="formModel.pwd" type="password" autocomplete="off" placeholder="请输入密码" class="edit-form-item" clearable/>
+			  </el-form-item>
+			  
+			  <el-form-item label="角色">
+			    <el-select v-model="formModel.roleName" placeholder="请选择角色" class="edit-form-item"
+				      multiple
+				      collapse-tags
+				      collapse-tags-tooltip
+					  clearable
+				>
+			      <el-option label="Zone No.1" value="shanghai" />
+			      <el-option label="Zone No.2" value="beijing" />
+			    </el-select>
+			  </el-form-item>
+			  
+			  <el-form-item label="密码确认">
+			    <el-input v-model="formModel.pwdagain" type="password"  autocomplete="off" placeholder="请再输入一次密码" class="edit-form-item" clearable/>
+			  </el-form-item>
+		</el-form>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref} from 'vue'
+	const props=defineProps({
+		recordId:String
+	})
+	
+	const formModel = reactive({
+	  loginId:'',
+	  realName: '',
+	  orgId:'',
+	  orgName:'',
+	  authOrgIds:'',
+	  authOrgNames:'',
+	  roleId:'',
+	  roleName:'',
+	  pwd:null,
+	  pwdagain:null
+	})
+	
+	const rules =reactive({
+		loginId:[
+			{required:true,message:'账号还未填写',trigger:'blur'},
+			{ min: 3, max: 20, message: '账号长度应该为3-20', trigger: 'blur' }
+			],
+		pwd:[
+			{required:true,message:'密码还未填写',trigger:'blur'},
+			{ min: 3, max: 32, message: '密码长度应该为3-32', trigger: 'blur' }
+			]
+	})
+	
+	const data =ref([{
+		 value: '1',
+		 label: 'Level one 1'
+	}])
+	
+	const submitForm=async ()=>{
+		console.log('start submit form')
+	}
+	
+	defineExpose({
+		submitForm
+	})
+</script>
+
+<style scoped>
+	.el-form--inline.el-form--label-top{
+		justify-content: space-between;
+	}
+	.edit-form-item{
+		width:260px;
+	}
+	
+</style>