From 7d2dfae8abef55688386e3b3f919e7f94a658182 Mon Sep 17 00:00:00 2001
From: Goldennfish <1981343953@qq.com>
Date: 星期四, 13 七月 2023 16:18:05 +0800
Subject: [PATCH] 提交实验室人员管理页面
---
src/views/laboratory/personnel/index.vue | 166 +++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 141 insertions(+), 25 deletions(-)
diff --git a/src/views/laboratory/personnel/index.vue b/src/views/laboratory/personnel/index.vue
index 6405a16..244d5a4 100644
--- a/src/views/laboratory/personnel/index.vue
+++ b/src/views/laboratory/personnel/index.vue
@@ -6,20 +6,48 @@
<el-form-item>
<el-input
placeholder="璇疯緭鍏ヤ汉鍛樺悕绉�"
- v-model="searchData.keyword"
+ v-model="keyword"
>
<i slot="prefix" class="el-input__icon el-icon-search" />
</el-input>
</el-form-item>
<el-form-item>
- <el-button type="primary">鏌ヨ</el-button>
- <el-button type="primary" plain>閲嶇疆</el-button>
+ <el-button @click="searchData()" type="primary">鏌ヨ</el-button>
+ <el-button @click="resetData()" type="primary" plain>閲嶇疆</el-button>
<!-- <el-button type="text">楂樼骇鎼滅储<i class="el-icon-arrow-down el-icon--right" /></el-button> -->
</el-form-item>
</el-form>
</div>
<div class="serve-btn">
- <el-button type="primary" icon="el-icon-plus">鏂板浜哄憳</el-button>
+ <el-button type="primary" @click="dialogFormVisible = true" icon="el-icon-plus">鏂板浜哄憳</el-button>
+
+ <el-dialog title="鏂板浜哄憳" :visible.sync="dialogFormVisible">
+ <el-form :model="form" :rules="rules" ref="form">
+ <el-form-item label="璐﹀彿" :label-width="formLabelWidth" prop="account">
+ <el-input v-model="form.account" autocomplete="off"></el-input>
+ </el-form-item>
+ <el-form-item label="骞撮緞" :label-width="formLabelWidth">
+ <el-input v-model="form.age" autocomplete="off"></el-input>
+ </el-form-item>
+ <el-form-item label="閭" :label-width="formLabelWidth" prop="email">
+ <el-input v-model="form.email" autocomplete="off"></el-input>
+ </el-form-item>
+ <el-form-item label="鍚嶅瓧" :label-width="formLabelWidth" prop="name">
+ <el-input v-model="form.name" autocomplete="off"></el-input>
+ </el-form-item>
+ <el-form-item label="鐢佃瘽" :label-width="formLabelWidth" prop="phone">
+ <el-input v-model="form.phone" autocomplete="off"></el-input>
+ </el-form-item>
+
+ <el-form-item label="鏉冮檺" :label-width="formLabelWidth" prop="role_id">
+ <el-input v-model="form.role_id" 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="submitForm()">纭� 瀹�</el-button>
+ </div>
+ </el-dialog>
</div>
</div>
<div class="content-main">
@@ -34,12 +62,12 @@
style="width: 100%"
>
<el-table-column
- prop="roleName"
+ prop="username"
label="瑙掕壊鍚嶇О"
min-width="120"
/>
<el-table-column
- prop="rolePermissions"
+ prop="roleName"
label="瑙掕壊鏉冮檺"
min-width="120"
/>
@@ -49,7 +77,7 @@
min-width="150"
/>
<el-table-column
- prop="creatTime"
+ prop="createTime"
label="鍒涘缓鏃堕棿"
min-width="180"
/>
@@ -59,12 +87,12 @@
min-width="200"
/>
<el-table-column
- prop="mailbox"
+ prop="email"
label="閭"
min-width="200"
/>
<el-table-column
- prop="incumbentStatus"
+ prop="jobState"
label="鍦ㄨ亴鐘舵��"
min-width="120"
:filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
@@ -89,14 +117,15 @@
</el-table-column>
</el-table>
<div>
+ <!-- 鍒嗛〉鍣� -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
- :page-size="100"
+ :page-size=pageSize
layout="total, sizes, prev, pager, next, jumper"
- :total="400">
+ :total=this.personnerlTable.length>
</el-pagination>
</div>
</div>
@@ -105,34 +134,121 @@
</template>
<script>
+import axios from 'axios'
+axios.defaults.baseURL = 'http://192.168.110.167:1234'
export default {
data() {
return {
currentPage: 1,
- searchData: {
- keyword: ''
- },
+ keyword: '',
personnerlTable: [
- {
- roleName: '寮犱笁',
- rolePermissions: '绠＄悊鍛�',
- age: '18',
- creatTime: '2023-07-07',
- phone: '138888888',
- mailbox: '138888888@qq.com',
- incumbentStatus: '1'
- }
- ]
+
+ ],
+ filteredpersonnerlTable:[],
+ currentindex:1,
+ currentPage: 1, // 褰撳墠椤电爜
+ total: 20, // 鎬绘潯鏁�
+ pageSize: 100, // 姣忛〉鐨勬暟鎹潯鏁�
+ personData:[], //鐢ㄦ潵瀛樻斁鎺ュ彛浼犺繃鏉ョ殑浜哄憳鍒楄〃鏁版嵁
+ dialogFormVisible:false,
+ form: {
+ account: "",
+ age: '',
+ email: "",
+ name: "",
+ phone: "",
+ role_id: ''
+ },
+ formLabelWidth: '120px',
+ rules: {
+ account:[
+ {
+ required: true, message: '璇疯緭鍏ヨ处鍙�', trigger: 'blur'
+ }
+ ],
+ name:[{
+ required: true, message: '璇疯緭鍏ュ悕瀛�', trigger: 'blur'
+ }],
+ phone: [
+ // { required: true, message: '璇疯緭鍏�11浣嶇數璇濆彿鐮�', trigger: 'blur' },
+ { pattern: /^1[34578]\d{9}$/, message: '闈炴硶鎵嬫満鍙风爜', trigger: 'blur' }
+ ],
+ email: [
+ // { required: true, message: '璇疯緭鍏ラ偖绠卞湴鍧�', trigger: 'blur' },
+ { type: 'email', message: '闈炴硶閭鍦板潃', trigger: ['blur', 'change'] }
+ ],
+ role_id:[
+ {required: true, message: '璇疯緭鍏ユ潈闄�(0鎴�1)', trigger: 'blur'}
+
+ ]
+ },
}
},
+ mounted(){
+ this.getData();
+ },
methods: {
+ //姣忛〉鏉℃暟鏀瑰彉鏃惰Е鍙� 閫夋嫨涓�椤垫樉绀哄灏戣
handleSizeChange(val) {
console.log(`姣忛〉 ${val} 鏉)
+ this.currentPage = 1;
+ this.pageSize = val;
},
+ //褰撳墠椤垫敼鍙樻椂瑙﹀彂 璺宠浆鍏朵粬椤�
handleCurrentChange(val) {
console.log(`褰撳墠椤�: ${val}`)
+ this.currentPage = val;
+ },
+ getData(){
+ axios.get("/user/list_new_personnel",{
+ params:{
+ pageNo:0,
+ pageSize:20
+ }
+ }).then(res=>{
+ // console.log(res)
+ this.personData=res.data.data.row
+ this.personnerlTable=this.personData
+ }).catch(res=>{
+ console.log("error")
+ })
+ },
+ searchData() {
+ this.filteredpersonnerlTable = this.personnerlTable.filter((item) =>{
+ return item.username==this.keyword
+ }
+ );
+ this.personnerlTable=this.filteredpersonnerlTable
+ },
+ resetData(){
+ // console.log("111111")
+ this.personnerlTable=this.personData
+ this.keyword=''
+ },
+ // 鎻愪氦鏂板浜哄憳琛ㄥ崟
+ submitForm() {
+ // Handle form submission here
+ // console.log(this.form);
+ // POST璇锋眰
+ this.$refs.form.validate((valid)=>{
+ if(valid){
+ this.dialogFormVisible = false;
+ axios.post('/user/add_new_personnel', this.form)
+ .then(response => {
+ console.log(response);
+ // this.dialogVisible = false;
+ })
+ .catch(error => {
+ console.error(error);
+ });
+ }else{
+ console.log('error submit!!');
+ return false;
+ }
+ })
}
- }
+ },
+
}
</script>
--
Gitblit v1.9.3