完成参数管理（单位制管理）模块

src/api/paramMgr.js

@@ -0,0 +1,27 @@
+import request from '../utils/request';
+
+const api={}
+
+//查询接口由表格组件自带
+
+api.save = (data) => {
+		let url='/base/parammgr/add'
+		if(data.id){
+			url='/base/parammgr/update'
+		}
+	    return request({
+	        url: url,
+	        method: 'post',
+			params:  data
+	    });
+}
+
+api.del = (data) => {
+	    return request({
+	        url: '/base/parammgr/delete',
+	        method: 'post',
+			params:  data
+	    });
+}
+
+export  default api

src/pages/base/ParamMgr.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="qpage">
-		<el-form :inline="true" :model="queryForm" class="query-form-inline">
-		  <el-form-item label="">
-		    <el-input v-model="queryForm.user" placeholder="请输入用户名关键字" />
+		<el-form :inline="true" :model="queryForm" class="query-form-inline"  label-width="auto">
+		  <el-form-item label=" ">
+		    <el-input v-model="queryForm.paramName" placeholder="请输入参数名关键字" clearable class="edit-form-item"/>
 		  </el-form-item>
 		  
 		  <el-form-item>
@@ -14,27 +14,26 @@
 			<CrudTable 
 			ref="crudTable"
 			page-info-opts="total, prev, pager, next,sizes"
-			url="./test/tableDatas.json"
-			:initWhere="{a:1,b:2}"
+			url="/base/parammgr/query"
 			:pageSize="20"
 			>
 			  <template #toolGroup>
-				  <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 type="primary" icon="plus" @click="openEditHandle()">新增</el-button>
+				 
 			  </template>
-			  <template #tabColumns>
-				  <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 #tabColumns={indexGenerate}>
+				  <el-table-column type="index" :index="indexGenerate" label="序号" width="60" align="center"/>
+				  <el-table-column prop="paramName" label="参数名" width="150" />
+				  <el-table-column prop="paramCode" label="参数编码" width="120" />
+				  <el-table-column prop="paramUnit" label="计量单位" width="120" />
+				  <el-table-column prop="modifyTime" label="更新时间" width="160" />
+				  <el-table-column prop="modifyByName" label="修改人" width="100" />
+				  <el-table-column prop="oper" label="操作" width="160" fixed="right">
 				  					<template #default="scope">
 				  						<div class="tool-column">
-				  							<el-button type="primary" icon="edit" size="small" @click="editHandle">编辑</el-button>
+				  							<el-button type="primary" icon="edit" size="small" @click="openEditHandle(scope.row)">编辑</el-button>
 				  							
-				  							<el-button type="warning" icon="delete" size="small">删除</el-button>
+				  							<el-button type="warning" icon="delete" size="small" @click="delHandle(scope.row)">删除</el-button>
 				  						</div>
 				  					    
 				  					</template>
@@ -44,34 +43,108 @@
 			</CrudTable>
 		</div>
 		
+		
+		<el-dialog v-model="editDialogShow" title="编辑" :close-on-click-modal="false"
+		:destroy-on-close="true"
+		>
+			<ParamMgrEdit ref="editWin" :record="crtEditRecord"></ParamMgrEdit>
+			<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 CrudTable from "../../components/crudtable/CrudTable.vue"
+	import ParamMgrEdit from "./ParamMgrEdit.vue"
+	import paramMgrAPI from "../../api/paramMgr.js"
+	import {ElMessageBox,ElMessage} from 'element-plus'
 	
 	const crudTable=ref(null)
 	
 	const isQuerying=ref(false)
 	
+	const editDialogShow=ref(false)
+	
+	const crtEditRecord=ref(null)
+	
 	const queryForm = reactive({
-	  user: ''
+	  paramName: ''
 	})
 	
 	const queryHandle=()=>{
 		isQuerying.value=true
 		crudTable.value.query(queryForm).then(resp=>{
-			console.log(resp)
 			isQuerying.value=false
 		})
 		
 	}
 	
-	const editHandle=()=>{
-		alert('table edit');
+	
+	
+	const delHandle=(record)=>{
+		ElMessageBox.confirm(
+			'确定要删除该记录吗?',
+			'操作确认',
+			{
+				confirmButtonText:'确定',
+				cancelButtonText:'取消',
+				type: 'warning'
+			}
+		).then(()=>{
+			console.log(paramMgrAPI.del)
+			paramMgrAPI.del({id:record.id}).then(resp=>{
+				if(resp.code!=0){
+					ElMessage.error(resp.msg)
+					return
+				}
+				ElMessage.success('操作成功')
+				queryHandle()
+				
+			}).catch(err=>{
+				ElMessage.error(err||'操作失败')
+			})
+		}).catch(()=>{
+			console.log('cancel del')
+		})
+	}
+	
+	const editWin=ref(null)
+	
+	const openEditHandle=(record)=>{
+		editDialogShow.value=true
+		crtEditRecord.value=record
 	}
 	
+	const beforeCloseHandle=async (tag)=>{
+		if(tag==='cancel'){
+			editDialogShow.value=false
+		}
+		else{
+			/* editWin.value.submitForm().then(()=>{
+				editDialogShow.value=false
+				queryHandle()
+			}) */
+			try{
+				await editWin.value.submitForm()
+				editDialogShow.value=false
+				queryHandle()
+			}
+			catch(err){
+				console.log(err)
+			}
+			
+		}
+	}
+	
+	
 	
 	
 	
@@ -83,4 +156,7 @@
 <style scoped>
 	@import url('../../assets/css/qpage.css');
 	
+	.edit-form-item{
+		width:260px;
+	}
 </style>

src/pages/base/ParamMgrEdit.vue

@@ -0,0 +1,111 @@
+<template>
+	<div class="edit-page">
+		<el-form :model="formModel" ref="formcomp"  label-position="right" label-width="auto" :inline="false" :rules="rules" :inline-message="true">
+		      
+			  <el-form-item label="参数名" prop="paramName">
+			    <el-input v-model="formModel.paramName" autocomplete="off" placeholder="请输入参数名" class="edit-form-item" clearable/>
+			  </el-form-item>
+		      
+			 <el-form-item label="参数编码" prop="paramCode">
+			   <el-input v-model="formModel.paramCode" autocomplete="off" placeholder="请输入参数编码" class="edit-form-item" clearable/>
+			 </el-form-item>
+			 
+			 <el-form-item label="计量单位" prop="paramUnit">
+			   <el-input v-model="formModel.paramUnit" autocomplete="off" placeholder="请输入计量单位" class="edit-form-item" clearable/>
+			 </el-form-item>
+			  
+			 
+			  
+			
+		</el-form>
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,toRaw,onMounted} from 'vue'
+	import paramMgrAPI from "../../api/paramMgr.js"
+	import {ElMessageBox,ElMessage} from 'element-plus'
+	
+	const formModel = reactive({
+	  id:'',
+	  paramName: '',
+	  paramCode:'',
+	  paramUnit:''
+	})
+	
+	const props=defineProps({
+		record:Object
+	})
+	
+	const formcomp = ref(null);
+	
+	const rules =reactive({
+		paramName:[
+			{required:true,message:'参数名还未填写',trigger:'blur'},
+			{ min: 1, max: 20, message: '参数名长度应该为1-20', trigger: 'blur' }
+			],
+		paramCode:[
+			{required:true,message:'参数编码还未填写',trigger:'blur'},
+			{ min: 1, max: 32, message: '参数编码长度应该为1-32', trigger: 'blur' }
+			],
+		paramUnit:[
+			{required:true,message:'计量单位还未填写',trigger:'blur'},
+			{ min: 1, max: 32, message: '计量单位长度应该为1-32', trigger: 'blur' }
+			]	
+	})
+	
+	onMounted(()=>{
+		//console.log(props.record)
+		if(props.record){
+			let {id,paramCode,paramName,paramUnit}=props.record
+			Object.assign(formModel,{id,paramCode,paramName,paramUnit})
+		}
+	})
+	
+	
+	
+	const submitForm=async ()=>{
+		let validateRst=false
+		try{
+			validateRst = await formcomp.value.validate()
+		}
+		catch(err){
+			ElMessage.error("请按要求填写数据");
+			console.log(err)
+			return Promise.reject('invalidate')
+		}
+		
+		if(validateRst){  //验证通过，准备提交数据
+		  try{
+			   let resp =await paramMgrAPI.save(toRaw(formModel))
+			   if(resp.code!=0){
+			   	ElMessage.error(resp.msg)
+			   	return Promise.reject(resp.msg)
+			   }
+			   ElMessage.success('操作成功')
+			   return Promise.resolve('ok')
+			}
+			catch (e) {
+				ElMessage.error(e||'操作失败')
+				return Promise.reject('操作失败')
+			}
+		}
+		
+		
+		
+	}
+	
+	defineExpose({
+		submitForm
+	})
+</script>
+
+<style scoped>
+	/* .el-form--inline.el-form--label-top{
+		justify-content: space-between;
+	} */
+	.edit-form-item{
+		width:260px;
+	}
+	
+</style>