From e3b49d33e9c2e8ba75ce3d6fdef0da27d529c72c Mon Sep 17 00:00:00 2001
From: zhouwenxuan <1175765986@qq.com>
Date: 星期四, 14 十二月 2023 10:43:00 +0800
Subject: [PATCH] 样式调整
---
src/views/safetyReview/userManage/superviseUsers/components/superviseDialog.vue | 288 +++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 186 insertions(+), 102 deletions(-)
diff --git a/src/views/safetyReview/userManage/superviseUsers/components/superviseDialog.vue b/src/views/safetyReview/userManage/superviseUsers/components/superviseDialog.vue
index 64e0161..00cc2cb 100644
--- a/src/views/safetyReview/userManage/superviseUsers/components/superviseDialog.vue
+++ b/src/views/safetyReview/userManage/superviseUsers/components/superviseDialog.vue
@@ -2,47 +2,39 @@
<div class="notice">
<el-dialog
v-model="dialogVisible"
- :title="title"
- width="500px"
+ :title="state.title"
+ width="550px"
:before-close="handleClose"
>
- <el-form :model="state.form" size="default" ref="superRef" :rules="title === '新增' ? state.formRules : {}" label-width="110px" >
- <el-form-item label="姓名:" prop="name" >
+ <el-form :model="state.form" size="default" ref="superRef" :rules="state.formRules" label-width="110px" >
+ <el-form-item label="姓名:" prop="name" v-if="state.title !== '修改密码'">
<el-input v-model.trim="state.form.name" ></el-input>
</el-form-item>
- <el-form-item label="用户名:" prop="username">
- <el-input v-model.trim="state.form.username" ></el-input>
+ <el-form-item label="用户名:" prop="username" v-if="state.title !== '修改密码'">
+ <el-input v-model.trim="state.form.username" :disabled="state.title =='编辑'" ></el-input>
</el-form-item>
- <el-form-item label="密码:" prop="password">
- <el-input v-model.trim="state.form.password" :type="passwordType" placeholder="请输入密码" autocomplete="new-password">
- <template #append>
- <el-button :icon="View" @click="showPwd" />
- </template>
- </el-input>
+ <el-form-item label="密码:" prop="password" v-if="state.title == '新增' || state.title == '修改密码'">
+ <el-input v-model.trim="state.form.password" type="password" show-password placeholder="请输入密码"></el-input>
</el-form-item>
- <el-form-item label="重复密码:" prop="confirmPassword">
- <el-input v-model.trim="state.form.confirmPassword" :type="confirmPasswordType" placeholder="请输入确认密码" autocomplete="new-password">
- <template #append>
- <el-button :icon="View" @click="showConfirmPwd" />
- </template>
- </el-input>
+ <el-form-item label="重复密码:" prop="confirmPassword" v-if="state.title == '新增' || state.title == '修改密码'">
+ <el-input v-model.trim="state.form.confirmPassword" type="password" show-password placeholder="请输入确认密码"></el-input>
</el-form-item>
- <el-form-item label="手机号:" prop="phone">
+ <el-form-item label="手机号:" prop="phone" v-if="state.title !== '修改密码'">
<el-input v-model.trim="state.form.phone" :maxlength="11" ></el-input>
</el-form-item>
- <el-form-item label="账号类型:" >
- <el-radio-group v-model="state.form.accountType" >
- <el-radio :label="1">工作人员</el-radio>
- <el-radio :label="2">领导</el-radio>
+ <el-form-item label="账号类型:" v-if="state.title !== '修改密码'">
+ <el-radio-group v-model="state.form.userType" >
+ <el-radio :label="0">工作人员</el-radio>
+ <el-radio :label="1">领导</el-radio>
</el-radio-group>
</el-form-item>
- <el-form-item label="管辖地区:" >
- <el-select v-model="state.form.area" class="m-2" placeholder="请选择" style="width:100%">
+ <el-form-item label="管辖地区:" prop="manageRegion" v-if="state.title !== '修改密码'">
+ <el-select v-model="state.form.manageRegion" class="m-2" placeholder="请选择" style="width:100%">
<el-option
v-for="item in state.areaList"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ :key="item.id"
+ :label="item.name"
+ :value="item.name"
/>
</el-select>
</el-form-item>
@@ -50,128 +42,220 @@
<template #footer >
<span class="dialog-footer">
<el-button @click="handleClose" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">确认</el-button>
+ <el-button type="primary" @click="onSubmit" size="default" v-preReClick>确认</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
-import {reactive, ref, toRefs} from 'vue'
+import {reactive, ref, toRefs, defineEmits, nextTick} from 'vue'
import { View } from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
+import {verifyPhone, verifyPwd, verifyUsername} from "../../../../../utils/validate";
+import { checkUserName, checkPhone } from "@/api/login"
+import { getRegionTree } from "@/api/area"
+import { addMonitor, editMonitor } from "@/api/sysUsers"
+import {Base64} from "js-base64"
+import {resetUserPwd} from "../../../../../api/sysUsers";
+
const emit = defineEmits(["getList"]);
-const dialogVisible = ref(false);
-const title = ref("");
-const superRef = ref();
-const passwordType = ref('password');
-const confirmPasswordType= ref('password');
-const validatePwd = (rule, value, callback)=>{
- if(title.value === '新增'){
- if(value === ''){
- callback(new Error('请再次输入密码'))
- }else if(value !== state.form.password){
- callback(new Error('两次输入密码不同'))
- }else{
- callback()
- }
+const dialogVisible = ref(false)
+const superRef = ref(null)
+
+const equalToPassword = (rule, value, callback) => {
+ if (state.form.password !== value) {
+ callback(new Error("两次输入的密码不一致"));
+ } else {
+ callback();
+ }
+};
+
+const validateUserPhone = (rule, value, callback)=>{
+ if(value === ''){
+ callback(new Error('请输入手机号'))
+ }else{
+ if(!verifyPhone(value)){
+ callback(new Error('手机号格式有误'))
}else{
- if(state.form.password!==''){
- if(value === ''){
- callback(new Error('请再次输入密码'))
- }else if(value !== state.form.password){
- callback(new Error('两次输入密码不同'))
- }else{
- callback()
+ let param = {}
+ if(state.title=='新增') {
+ param = {
+ phone:value
}
- }else{
- callback()
+ }else if(state.title=='编辑'){
+ param = {
+ phone:value,
+ id: state.form.id
+ }
}
+ checkPhone(param).then((res)=>{
+ if(res.data == false){
+ callback(new Error('该手机号已被绑定用户，请更换其他手机号'))
+ }else{
+ callback()
+ }
+ })
}
+ }
}
-const phoneRegex = /^1[3456789]\d{9}$/;
-const validatePhone = (rule, value, callback)=>{
- if(value === ''){
- callback(new Error('请输入手机号'))
+
+const validateUsername = (rule, value, callback)=>{
+ if(value === ''){
+ callback(new Error('请输入登录时用户名'))
+ }else{
+ if(!verifyUsername(value)){
+ callback(new Error('用户名须使用字母+数字，长度在5-16之间'))
}else{
- if(!phoneRegex.test(value)){
- callback(new Error('请按要求格式输入手机号'))
- }else{
- callback()
+ let param = {}
+ if(state.title=='新增') {
+ param = {
+ username:value
+ }
+ }else if(state.title=='编辑'){
+ param = {
+ username:value,
+ id: state.form.id
+ }
}
+ checkUserName(param).then((res)=>{
+ if(res.data == false){
+ callback(new Error('用户名已被占用，请更换其他用户名'))
+ }else{
+ callback()
+ }
+ })
}
+ }
}
+
+let validatePwd = (rule, value, callback)=>{
+ if(value === ''){
+ callback(new Error('请输入密码'))
+ }else{
+ if(!verifyPwd(value)){
+ callback(new Error('密码须包含字母、数字、特殊字符(不包括下划线)，长度在6-16之间'))
+ }else{
+ callback()
+ }
+ }
+}
+
const state = reactive({
+ title: '',
form: {
+ id: null,
name: '',
phone: '',
password: '',
confirmPassword: '',
username: '',
- accountType: 1,
- area: ''
+ userType: 0,
+ manageRegion: ''
},
formRules:{
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
- username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
- password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
- confirmPassword: [{ required: true, validator: validatePwd, trigger: 'blur' }],
- phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
+ username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
+ password: [{ required: true, validator: validatePwd, trigger: 'blur' }],
+ confirmPassword: [{ required: true, validator: equalToPassword, trigger: 'blur' }],
+ phone: [{ required: true, validator: validateUserPhone, trigger: 'blur' }],
+ manageRegion: [{ required: true, message: '请选择管辖区域', trigger: 'blur' }],
},
areaList: []
})
-const showPwd = () => {
- if (passwordType.value === 'password') {
- passwordType.value = ''
- } else {
- passwordType.value = 'password'
- }
-};
-const showConfirmPwd = () => {
- if (confirmPasswordType.value === 'password') {
- confirmPasswordType.value = ''
- } else {
- confirmPasswordType.value = 'password'
- }
-};
-
-
const openDialog = (type, value) => {
- title.value = type === 'add' ? '新增' : type ==='edit' ? '编辑' : '查看' ;
+ getArea()
+ state.title = type === 'add' ? '新增' : type ==='edit' ? '编辑' : type ==='pwd' ? '修改密码' : '查看' ;
if(type === 'edit') {
- state.form = value;
+ nextTick(() => {
+ for(let i in state.form){
+ if(validKey(i,value)){
+ state.form[i] = value[i]
+ }
+ }
+ })
+
}
- dialogVisible.value = true;
+ if(type == 'pwd'){
+ state.form.id = value.id
+ }
+ dialogVisible.value = true
+}
+
+const validKey=(key,obj)=>{
+ return key in obj
+}
+
+const getArea = async ()=>{
+ const res = await getRegionTree({name: '',parentId: null,regionType: 0})
+ if(res.code == 200){
+ state.areaList = res.data
+ state.areaList.unshift({
+ id: 0,
+ name: '新疆维吾尔自治区'
+ })
+ }else{
+ ElMessage.warning(res.message)
+ }
}
const onSubmit = async () => {
const valid = await superRef.value.validate();
if(valid){
- superRef.value.clearValidate();
- reset();
- dialogVisible.value = false;
-
+ if(state.title == '新增'){
+ const {confirmPassword,id,...data} = state.form
+ data.password = Base64.encode(data.password)
+ const res = await addMonitor(data)
+ if(res.code == 200){
+ ElMessage.success(res.message)
+ emit('getList')
+ state.form.userType = 0
+ superRef.value.clearValidate();
+ superRef.value.resetFields();
+ dialogVisible.value = false;
+ }else{
+ ElMessage.warning(res.message)
+ }
+ }else if(state.title == '编辑'){
+ const {confirmPassword,...data} = state.form
+ data.password = Base64.encode(data.password)
+ const res = await editMonitor(data)
+ if(res.code == 200){
+ ElMessage.success(res.message)
+ emit('getList')
+ state.form.userType = 0
+ superRef.value.clearValidate();
+ superRef.value.resetFields();
+ dialogVisible.value = false;
+ }else{
+ ElMessage.warning(res.message)
+ }
+ }else{
+ const {id,password} = state.form
+ const data = {id,password}
+ data.password = Base64.encode(data.password)
+ const res = await resetUserPwd(data)
+ if(res.code == 200){
+ ElMessage.success(res.message)
+ emit('getList')
+ superRef.value.clearValidate();
+ superRef.value.resetFields();
+ dialogVisible.value = false;
+ }else{
+ ElMessage.warning(res.message)
+ }
+ }
}
}
const handleClose = () => {
+ state.form.userType = 0
superRef.value.clearValidate();
- reset();
+ superRef.value.resetFields()
dialogVisible.value = false;
-}
-const reset = () => {
- state.form = {
- name: '',
- phone: '',
- password: '',
- confirmPassword: '',
- username: '',
- accountType: 1,
- area: ''
- }
}
--
Gitblit v1.9.2