liyongjie
/
vue-gg-market
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加正则

master
李永杰 2023-11-19 16:10:06 +08:00
parent 8a9c27e8e5
commit efc9a981a1
1 changed files with 59 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/views/market/index.vue
View File

@ -16,7 +16,9 @@
<el-button type="primary" @click="dialogFormVisible1 = true">新增管理员</el-button> <el-button type="primary" @click="dialogFormVisible1 = true">新增管理员</el-button>
<el-table :data="empResponse.list" border stripe @selection-change="handleSelectionChange" tooltip-effect="dark" style="width: 100%"> <el-table :data="empResponse.list" border stripe @selection-change="handleSelectionChange"
tooltip-effect="dark" style="width: 100%"
>
<el-table-column type="selection" width="55"/> <el-table-column type="selection" width="55"/>
<el-table-column label="员工Id" prop="empId"/> <el-table-column label="员工Id" prop="empId"/>
<el-table-column label="员工姓名" prop="empName"/> <el-table-column label="员工姓名" prop="empName"/>
@ -24,7 +26,7 @@
<el-table-column label="员工手机号" prop="empTel"/> <el-table-column label="员工手机号" prop="empTel"/>
<el-table-column label="员工身份证号" prop="empIdCard"/> <el-table-column label="员工身份证号" prop="empIdCard"/>
<el-table-column label="员工年龄" prop="empAge"/> <el-table-column label="员工年龄" prop="empAge"/>
<el-table-column label="员工性别" > <el-table-column label="员工性别">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.empGender == 1">男</span> <span v-if="scope.row.empGender == 1">男</span>
<span v-if="scope.row.empGender == 2">女</span> <span v-if="scope.row.empGender == 2">女</span>
@ -47,44 +49,45 @@
:page-sizes="[1, 5, 10, 20]" :page-sizes="[1, 5, 10, 20]"
:page-size="empRequest.pageSize" :page-size="empRequest.pageSize"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="empResponse.total"> :total="empResponse.total"
>
</el-pagination> </el-pagination>
<el-button type="danger" @click="batchDelManager">删除管理员</el-button> <el-button type="danger" @click="batchDelManager">删除管理员</el-button>
<el-dialog title="新增管理员" :visible.sync="dialogFormVisible1"> <el-dialog title="新增管理员" :visible.sync="dialogFormVisible1">
<el-form :model="emp" :rules="rules" ref="emp"> <el-form :model="emp" :rules="rules" ref="emp">
<el-form-item label="员工姓名" :label-width="formLabelWidth"> <el-form-item label="员工姓名" :label-width="formLabelWidth" prop="empName">
<el-input v-model="emp.empName" autocomplete="off"></el-input> <el-input v-model="emp.empName" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="员工用户名" :label-width="formLabelWidth"> <el-form-item label="员工用户名" :label-width="formLabelWidth" prop="username">
<el-input v-model="emp.username" autocomplete="off"></el-input> <el-input v-model="emp.username" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="员工密码" :label-width="formLabelWidth"> <el-form-item label="员工密码" :label-width="formLabelWidth" prop="password">
<el-input v-model="emp.password" autocomplete="off" :key="passwordType" :type="passwordType" tabindex="2" auto-complete="on"></el-input> <el-input v-model="emp.password" autocomplete="off" :key="passwordType" :type="passwordType" tabindex="2" auto-complete="on"></el-input>
<span class="show-pwd" @click="showPwd"> <span class="show-pwd" @click="showPwd">
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
</span> </span>
</el-form-item> </el-form-item>
<el-form-item label="员工手机号" :label-width="formLabelWidth"> <el-form-item label="员工手机号" :label-width="formLabelWidth" prop="empTel">
<el-input v-model="emp.empTel" autocomplete="off"></el-input> <el-input v-model="emp.empTel" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="员工身份证号" :label-width="formLabelWidth"> <el-form-item label="员工身份证号" :label-width="formLabelWidth" prop="empIdCard">
<el-input v-model="emp.empIdCard" autocomplete="off"></el-input> <el-input v-model="emp.empIdCard" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="员工年龄" :label-width="formLabelWidth"> <el-form-item label="员工年龄" :label-width="formLabelWidth" prop="empAge">
<el-input v-model="emp.empAge" autocomplete="off"></el-input> <el-input v-model="emp.empAge" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="员工性别" :label-width="formLabelWidth"> <el-form-item label="员工性别" :label-width="formLabelWidth" prop="empGender">
<el-radio-group v-model="emp.empGender"> <el-radio-group v-model="emp.empGender">
<el-radio :label="1">男</el-radio> <el-radio :label="1">男</el-radio>
<el-radio :label="2">女</el-radio> <el-radio :label="2">女</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="员工住址" :label-width="formLabelWidth"> <el-form-item label="员工住址" :label-width="formLabelWidth" prop="empAddress">
<el-input v-model="emp.empAddress" autocomplete="off"></el-input> <el-input v-model="emp.empAddress" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="员工薪资" :label-width="formLabelWidth"> <el-form-item label="员工薪资" :label-width="formLabelWidth" prop="empSal">
<el-input v-model="emp.empSal" autocomplete="off"></el-input> <el-input v-model="emp.empSal" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -95,38 +98,38 @@
</el-dialog> </el-dialog>
<el-dialog title="编辑管理员" :visible.sync="dialogFormVisible2"> <el-dialog title="编辑管理员" :visible.sync="dialogFormVisible2">
<el-form :model="emp"> <el-form :model="emp" :rules="rules" ref="emp">
<el-form-item label="员工姓名" :label-width="formLabelWidth"> <el-form-item label="员工姓名" :label-width="formLabelWidth" prop="empName">
<el-input v-model="emp.empName" autocomplete="off"></el-input> <el-input v-model="emp.empName" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="员工用户名" :label-width="formLabelWidth"> <el-form-item label="员工用户名" :label-width="formLabelWidth" prop="username">
<el-input v-model="emp.username" autocomplete="off"></el-input> <el-input v-model="emp.username" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="员工密码" :label-width="formLabelWidth"> <el-form-item label="员工密码" :label-width="formLabelWidth" prop="password">
<el-input v-model="emp.password" autocomplete="off" :key="passwordType" :type="passwordType" tabindex="2" auto-complete="on"></el-input> <el-input v-model="emp.password" autocomplete="off" :key="passwordType" :type="passwordType" tabindex="2" auto-complete="on"></el-input>
<span class="show-pwd" @click="showPwd"> <span class="show-pwd" @click="showPwd">
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
</span> </span>
</el-form-item> </el-form-item>
<el-form-item label="员工手机号" :label-width="formLabelWidth"> <el-form-item label="员工手机号" :label-width="formLabelWidth" prop="empTel">
<el-input v-model="emp.empTel" autocomplete="off"></el-input> <el-input v-model="emp.empTel" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="员工身份证号" :label-width="formLabelWidth"> <el-form-item label="员工身份证号" :label-width="formLabelWidth" prop="empIdCard">
<el-input v-model="emp.empIdCard" autocomplete="off"></el-input> <el-input v-model="emp.empIdCard" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="员工年龄" :label-width="formLabelWidth"> <el-form-item label="员工年龄" :label-width="formLabelWidth" prop="empAge">
<el-input v-model="emp.empAge" autocomplete="off"></el-input> <el-input v-model="emp.empAge" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="员工性别" :label-width="formLabelWidth"> <el-form-item label="员工性别" :label-width="formLabelWidth" prop="empGender">
<el-radio-group v-model="emp.empGender"> <el-radio-group v-model="emp.empGender">
<el-radio :label="1">男</el-radio> <el-radio :label="1">男</el-radio>
<el-radio :label="2">女</el-radio> <el-radio :label="2">女</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="员工住址" :label-width="formLabelWidth"> <el-form-item label="员工住址" :label-width="formLabelWidth" prop="empAddress">
<el-input v-model="emp.empAddress" autocomplete="off"></el-input> <el-input v-model="emp.empAddress" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="员工薪资" :label-width="formLabelWidth"> <el-form-item label="员工薪资" :label-width="formLabelWidth" prop="empSal">
<el-input v-model="emp.empSal" autocomplete="off"></el-input> <el-input v-model="emp.empSal" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -153,6 +156,7 @@
//例如：import { 组件名称 } from '组件路径', //例如：import { 组件名称 } from '组件路径',
import { add, batchDel, del, fetchManager, findById, update } from '@/api/manager' import { add, batchDel, del, fetchManager, findById, update } from '@/api/manager'
import { fetchEmp } from '@/api/emp'
export default { export default {
//import引入的组件需要注入到对象中才能使用 //import引入的组件需要注入到对象中才能使用
@ -172,7 +176,7 @@ export default {
empAge: null, empAge: null,
empGender: null, empGender: null,
empAddress: '', empAddress: '',
empSal: null, empSal: null
}, },
empRequest: { empRequest: {
empId: null, empId: null,
@ -197,20 +201,32 @@ export default {
{ required: true, message: '请输入员工姓名', trigger: 'blur' }, { required: true, message: '请输入员工姓名', trigger: 'blur' },
{ pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '姓名只能包含中文、英文和数字', trigger: 'blur' } { pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '姓名只能包含中文、英文和数字', trigger: 'blur' }
], ],
username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [ { required: true, message: '请输入密码', trigger: 'blur' } ], password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
empTel: [ /* 类似地定义验证规则 */ ], empTel: [
empIdCard: [ /* 类似地定义验证规则 */ ], { required: true, message: '请输入联系方式', trigger: 'blur' },
empAge: [ /* 类似地定义验证规则 */ ], { pattern: /^(\d{11})$/, message: '手机号格式错误', trigger: 'blur' }
empGender: [ /* 类似地定义验证规则 */ ], ],
empAddress: [ /* 类似地定义验证规则 */ ], empIdCard: [
empSal: [ /* 类似地定义验证规则 */ ] { required: true, message: '请输入身份证号', trigger: 'blur' },
{ min: 18, max: 18, message: '身份证号长度应为18位', trigger: 'blur' },
{ pattern: /^[1-9][0-9]{16}[\dXx]$/, message: '身份证号格式不正确', trigger: 'blur' }],
empAge: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ pattern: /^(\d+|\d+\.\d+)$/, message: '只能输入数字', trigger: 'blur' }
],
empGender: [{ required: true, message: '请输入性别', trigger: 'blur' }],
empAddress: [{ required: true, message: '请输入住址', trigger: 'blur' }],
empSal: [
{ required: true, message: '请输入薪资', trigger: 'blur' },
{ pattern: /^(\d+|\d+\.\d+)$/, message: '只能输入数字', trigger: 'blur' }
]
} }
} }
}, },
methods: { methods: {
fetchManager(){ fetchManager() {
fetchManager(this.empRequest).then(res =>{ fetchManager(this.empRequest).then(res => {
this.empResponse = res.data this.empResponse = res.data
}) })
}, },
@ -233,7 +249,7 @@ export default {
}) })
}, },
handleSelectionChange(val) { handleSelectionChange(val) {
this.multipleSelection = val; this.multipleSelection = val
}, },
addManager() { addManager() {
add(this.emp).then(res => { add(this.emp).then(res => {
@ -243,9 +259,9 @@ export default {
this.fetchManager() this.fetchManager()
}) })
}, },
openManager(empId){ openManager(empId) {
this.dialogFormVisible2 = true this.dialogFormVisible2 = true
findById(empId).then(res =>{ findById(empId).then(res => {
this.emp = res.data this.emp = res.data
}) })
}, },
@ -257,8 +273,8 @@ export default {
this.fetchManager() this.fetchManager()
}) })
}, },
delManager(empId){ delManager(empId) {
del(empId).then(res =>{ del(empId).then(res => {
this.$message.success(res.msg) this.$message.success(res.msg)
this.fetchManager() this.fetchManager()
}) })
@ -268,7 +284,7 @@ export default {
this.$message.success(res.msg) this.$message.success(res.msg)
this.fetchManager() this.fetchManager()
}) })
}, }
}, },
//声明周期 - 创建完成（可以访问当前this实例）, //声明周期 - 创建完成（可以访问当前this实例）,
created() { created() {