From b7143b51f3a50b6fac9c139d291c1fad017daee6 Mon Sep 17 00:00:00 2001
From: zhouwenxuan <1175765986@qq.com>
Date: 星期五, 08 十二月 2023 15:50:50 +0800
Subject: [PATCH] 使用tinymce富文本
---
src/layout/components/Register/index.vue | 307 +++++++++++++++++++++++++++++++++++++--------------
1 files changed, 222 insertions(+), 85 deletions(-)
diff --git a/src/layout/components/Register/index.vue b/src/layout/components/Register/index.vue
index a7eae8c..7f5adf9 100644
--- a/src/layout/components/Register/index.vue
+++ b/src/layout/components/Register/index.vue
@@ -2,7 +2,7 @@
<el-dialog v-model="dialogVisible" width="75%" top="50vh" align-center @close="closeDialog">
<template #header>
<div style="display:flex;font-size: 1.2rem;font-weight: bolder">
- 机构注册
+ {{state.title}}
<div style="font-size: 0.9rem;display:flex;align-items: center;font-weight: normal;margin-left: 6px"><Warning style="color:#EF4444;width: 0.9rem; height: 0.9rem;margin-right: 2px" />请认真填写注册信息，带 <span style="color:#EF4444;vertical-align: middle">*</span> 为必填项</div>
</div>
</template>
@@ -11,6 +11,7 @@
<el-col :span="8">
<el-form-item prop="agency.name" label="机构名称">
<el-input
+ :disabled="isAbleEdit"
v-model="registerForm.agency.name"
size="large"
placeholder="请输入机构名称"
@@ -21,6 +22,7 @@
<el-col :span="8">
<el-form-item prop="agency.creditCode" label="社会信用代码">
<el-input
+ :disabled="isAbleEdit"
v-model="registerForm.agency.creditCode"
size="large"
placeholder="请输入社会信用代码"
@@ -31,8 +33,8 @@
<el-col :span="8">
<el-form-item prop="agency.attribute" label="机构属性">
<el-radio-group v-model="registerForm.agency.attribute" style="width: 50%" @change="changeAttr()">
- <el-radio :label="0" size="large">疆内</el-radio>
- <el-radio :label="1" size="large">疆外</el-radio>
+ <el-radio :label="0" size="large" border>疆内</el-radio>
+ <el-radio :label="1" size="large" border>疆外</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
@@ -106,7 +108,7 @@
<el-input
v-model="registerForm.agency.certNumber"
size="large"
- placeholder="请输入机构负责人"
+ placeholder="请输入资质证书编号"
/>
</el-form-item>
</el-col>
@@ -179,12 +181,12 @@
</el-col>
<el-col :span="8">
<el-form-item prop="agency.business" label="申请的法定安全评价业务范围">
- <el-select v-model="registerForm.agency.business" placeholder="请选择业务范围" size="large" style="width: 100%">
+ <el-select :disabled="isAbleEdit" v-model="registerForm.agency.business" placeholder="请选择业务范围" multiple size="large" style="width: 100%">
<el-option
v-for="item in state.busList"
:key="item.id"
:label="item.label"
- :value="item.label"
+ :value="item.id"
/>
</el-select>
</el-form-item>
@@ -217,6 +219,7 @@
<div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传1张</div>
</template>
</el-upload>
+
</el-form-item>
</el-col>
</el-row>
@@ -224,7 +227,7 @@
<el-col :span="12">
<el-form-item prop="username" label="登录用户名(字母+数字，长度在5-16之间)">
<el-input
- v-model="registerForm.username"
+ v-model.trim="registerForm.username"
size="large"
placeholder="请输入登录用户名"
/>
@@ -233,18 +236,18 @@
<el-col :span="12">
<el-form-item prop="phone" label="用户电话">
<el-input
- v-model="registerForm.phone"
+ v-model.trim="registerForm.phone"
size="large"
placeholder="请输入用户电话"
/>
</el-form-item>
</el-col>
</el-row>
- <el-row :gutter="30">
+ <el-row :gutter="30" v-if="state.title == '新增/注册'">
<el-col :span="12">
<el-form-item prop="password" label="密码">
<el-input
- v-model="registerForm.password"
+ v-model.trim="registerForm.password"
type="password"
size="large"
placeholder="请输入密码"
@@ -255,7 +258,7 @@
<el-col :span="12">
<el-form-item prop="confirmPassword" label="确认密码">
<el-input
- v-model="registerForm.confirmPassword"
+ v-model.trim="registerForm.confirmPassword"
type="password"
size="large"
auto-complete="off"
@@ -273,9 +276,16 @@
type="primary"
style="width:40%;margin: 0 auto"
@click.prevent="handleRegister"
+ v-preReClick
>
- <span v-if="!loading">注 册</span>
- <span v-else>注 册 中...</span>
+ <div v-if="state.title == '新增/注册'">
+ <span v-if="!loading">注 册</span>
+ <span v-else>注 册 中...</span>
+ </div>
+ <div v-else>
+ <span v-if="!loading">确定</span>
+ <span v-else>编 辑 中...</span>
+ </div>
</el-button>
</el-form-item>
</el-form>
@@ -286,43 +296,17 @@
</template>
<script setup>
-import {ref, watch, defineExpose, onMounted, reactive} from "vue"
+import {ref, watch, defineExpose, onMounted, reactive, toRefs, watchEffect} from "vue"
import {ElMessage, ElMessageBox} from "element-plus"
-import { register,delPic,getDict } from "@/api/login"
+import {register, delPic, getDict, checkUserName, checkPhone, editAgency} from "@/api/login"
import { getRegionTree } from "@/api/area"
import { getToken } from "@/utils/auth";
import {verifyPhone, verifyUsername, verifyPwd} from "../../../utils/validate";
let { proxy } = getCurrentInstance()
import { Base64 } from 'js-base64'
-const registerForm = ref({
- agency:{
- name: "",
- creditCode: "",
- attribute: 0,
- area: [],
- province: '',
- city: '',
- district: '',
- address: '',
- legalPerson: '',
- legalPhone: '',
- manager: '',
- managerPhone: '',
- certNumber: '',
- issueDate: '',
- validDate: '',
- assetValue: '',
- workArea: '',
- archiveArea: '',
- regAddress: '',
- business: '',
- reportPath: '',
- },
- username: '',
- phone: '',
- password: '',
- confirmPassword: ''
-});
+import {getAgencyById} from "../../../api/sysUsers";
+import Cookies from "js-cookie";
+const emit = defineEmits(["getList"]);
const props = {
expandTrigger: 'hover',
@@ -331,6 +315,7 @@
}
const state = reactive({
+ title: '',
areaList: [],
busList: [],
fileList: [],
@@ -340,12 +325,45 @@
Authorization: 'Bearer ' + getToken()
},
dialogImageUrl: '',
- dialogImg: false
+ dialogImg: false,
+ isView: false,
+ registerForm:{
+ agency:{
+ name: "",
+ creditCode: "",
+ attribute: 0,
+ area: [],
+ province: '',
+ city: '',
+ district: '',
+ address: '',
+ legalPerson: '',
+ legalPhone: '',
+ manager: '',
+ managerPhone: '',
+ certNumber: '',
+ issueDate: '',
+ validDate: '',
+ assetValue: '',
+ workArea: '',
+ archiveArea: '',
+ regAddress: '',
+ business: '',
+ reportPath: '',
+ },
+ username: '',
+ phone: '',
+ password: '',
+ confirmPassword: ''
+ }
})
+const isSuper = ref(false);
-
+const {registerForm} = toRefs(state);
+const startUsername = ref('');
+const startPhone = ref('');
const equalToPassword = (rule, value, callback) => {
- if (registerForm.value.password !== value) {
+ if (state.registerForm.password !== value) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
@@ -364,14 +382,42 @@
}
}
+const validateUserPhone = (rule, value, callback)=>{
+ if(value === ''){
+ callback(new Error('请输入手机号'))
+ }else if(state.title == '编辑' && value == startPhone.value){
+ callback()
+ } else{
+ if(!verifyPhone(value)){
+ callback(new Error('手机号格式有误'))
+ }else{
+ checkPhone({phone:value}).then((res)=>{
+ if(res.data == false){
+ callback(new Error('该手机号已被绑定用户，请更换其他手机号'))
+ }else{
+ callback()
+ }
+ })
+ }
+ }
+}
+
const validateUsername = (rule, value, callback)=>{
if(value === ''){
callback(new Error('请输入登录时用户名'))
+ }else if(state.title == '编辑' && value == startUsername.value){
+ callback()
}else{
if(!verifyUsername(value)){
callback(new Error('用户名须使用字母+数字，长度在5-16之间'))
}else{
- callback()
+ checkUserName({username:value}).then((res)=>{
+ if(res.data == false){
+ callback(new Error('用户名已被占用，请更换其他用户名'))
+ }else{
+ callback()
+ }
+ })
}
}
}
@@ -408,7 +454,7 @@
"agency.business": [{required: true, trigger: "blur", message: "请选择申请的法定安全评价业务范围"}],
"agency.reportPath": [{required: true, trigger: "blur", message: "请上传加盖公章的《机构信息上报表》"}],
username: [{ required: true, trigger: "blur", validator: validateUsername }],
- phone: [{ required: true, trigger: "blur", validator: validatePhone }],
+ phone: [{ required: true, trigger: "blur", validator: validateUserPhone }],
password: [{ required: true, trigger: "blur", validator: validatePwd }],
confirmPassword: [
{ required: true, trigger: "blur", message: "请再次确认密码" },
@@ -421,19 +467,76 @@
const registerRef = ref(null)
onMounted(()=>{
+ if(getToken()){
+ const userInfo = JSON.parse(Cookies.get('userInfo'))
+ if(userInfo.identity == 0){isSuper.value = true}
+ }
+
getBusiness()
- getArea()
+ getArea()
+ // watchEffect(() => {
+ // // 在副作用中调用 getArea()
+ // getArea();
+ // });
})
+const isAbleEdit = ref(false);
+const openDialog=(type, value)=>{
+ state.title = type === 'add' ? '新增/注册' : type ==='edit' ? '编辑' : '查看' ;
+ if(type === 'edit' || type == 'view') {
+ state.registerForm.id = value.id
+ state.registerForm.username = value.username
+ state.registerForm.phone = value.phone
+ startUsername.value = value.username
+ startPhone.value = value.phone
+ state.registerForm.agency.id = value.agencyId
+ if( isSuper.value){
+ isAbleEdit.value = false
+ }else{
+ isAbleEdit.value = true
+ }
+ getAgencyById({agencyId: value.agencyId}).then((res)=>{
+ if(res.code == 200){
+ const info = JSON.parse(JSON.stringify(res.data))
+ for(let i in state.registerForm.agency){
+ if(validKey(i,info)){
+ state.registerForm.agency[i] = info[i]
+ }
+ }
+ state.registerForm.agency.business = info.business.split(',').map(Number)
+ if(state.registerForm.agency.attribute === 0){
+ state.registerForm.agency.area = [info.city,info.district].filter(item => { return item && item.trim() })
+ }else {
+ state.registerForm.agency.area = [info.province,info.city,info.district].filter(item => { return item && item.trim() })
+ }
+ if(res.data.reportPath) {
+ const imgUrl = import.meta.env.VITE_APP_BASE_API + "/" + res.data.reportPath
+ state.fileList = imgUrl ? imgUrl.split(',').map(url => {return {url} }) : []
+ }
+
+ }else{
+ ElMessage.warning(res.message)
+ }
+ })
+ if(type == 'view'){
+ state.isView = true
+ }
+ }
+ dialogVisible.value = true
+}
+
+const validKey=(key,obj)=>{
+ return key in obj
+}
const handleChange = (value) => {
- if(registerForm.value.agency.attribute == 0){
- registerForm.value.agency.province = '新疆维吾尔自治区'
- registerForm.value.agency.city = value[0]?value[0]:''
- registerForm.value.agency.district = value[1]?value[1]:''
+ if(state.registerForm.agency.attribute == 0){
+ state.registerForm.agency.province = '新疆维吾尔自治区'
+ state.registerForm.agency.city = value[0]?value[0]:''
+ state.registerForm.agency.district = value[1]?value[1]:''
}else{
- registerForm.value.agency.province = value[0]?value[0]:''
- registerForm.value.agency.city = value[1]?value[1]:''
- registerForm.value.agency.district = value[2]?value[2]:''
+ state.registerForm.agency.province = value[0]?value[0]:''
+ state.registerForm.agency.city = value[1]?value[1]:''
+ state.registerForm.agency.district = value[2]?value[2]:''
}
}
@@ -447,7 +550,7 @@
}
const getArea = async ()=>{
- const type = registerForm.value.agency.attribute
+ const type = state.registerForm.agency.attribute
const res = await getRegionTree({name: '',parentId: null,regionType: type})
if(res.code == 200){
state.areaList = res.data
@@ -486,7 +589,7 @@
const handleAvatarSuccess = (res, uploadFile) => {
if(res.code == 200){
- registerForm.value.agency.reportPath = res.data.path
+ state.registerForm.agency.reportPath = res.data.path
}else{
ElMessage({
type: 'warning',
@@ -496,7 +599,7 @@
}
const handleRemove = async (file, uploadFiles) => {
- const res = await delPic({path: registerForm.value.agency.reportPath})
+ const res = await delPic({path: state.registerForm.agency.reportPath})
if(res.code == 200){
ElMessage({
type: 'success',
@@ -514,31 +617,65 @@
proxy.$refs.registerRef.validate(valid => {
if (valid) {
loading.value = true;
- const {confirmPassword, ...data} = registerForm.value
- data.password = Base64.encode(data.password)
- delete data.agency.area
- register(data).then(res => {
- if(res.code == 200){
- const username = registerForm.value.username
- ElMessageBox.alert("<font color='red'>恭喜，您的账号 " + username + " 注册成功！</font>", "系统提示", {
- dangerouslyUseHTMLString: true,
- type: "success",
- }).then(() => {
- dialogVisible.value = false
- proxy.$refs.registerRef.resetFields()
- proxy.$refs.registerRef.clearValidate()
- state.fileList = []
- // router.push("/homePage")
- }).catch(() => {})
- }else{
- ElMessage({
- type: 'warning',
- message: res.message
+ if(state.title == '新增/注册'){
+ const {confirmPassword, ...data} = state.registerForm
+ data.password = Base64.encode(data.password)
+ data.agency.business = data.agency.business.join(',')
+ delete data.agency.area
+ register(data).then(res => {
+ if(res.code == 200){
+ const username = state.registerForm.username
+ ElMessageBox.alert("<font color='red'>恭喜，您的账号 " + username + " 注册成功！</font>", "系统提示", {
+ dangerouslyUseHTMLString: true,
+ type: "success",
+ }).then(() => {
+ emit("getList")
+ dialogVisible.value = false
+ proxy.$refs.registerRef.resetFields()
+ proxy.$refs.registerRef.clearValidate()
+ state.fileList = []
+ loading.value = false
+ // router.push("/homePage")
+ }).catch(() => {})
+ }else{
+ ElMessage({
+ type: 'warning',
+ message: res.message
+ })
+ }
+ }).catch(() => {
+ loading.value = false
+ })
+ }else {
+ const {confirmPassword, ...data} = state.registerForm
+ data.password = Base64.encode(data.password)
+ console.log('data',data)
+ data.agency.business = data.agency.business.join(',')
+ // delete data.agency.area
+ console.log('data',data)
+ editAgency(data).then(res => {
+ if(res.code == 200){
+ ElMessage({
+ type: 'success',
+ message: '编辑成功'
+ })
+ emit("getList")
+ dialogVisible.value = false
+ proxy.$refs.registerRef.resetFields()
+ proxy.$refs.registerRef.clearValidate()
+ state.fileList = []
+ loading.value = false
+
+ }else{
+ ElMessage({
+ type: 'warning',
+ message: res.message
+ })
+ }
+ }).catch(() => {
+ loading.value = false
})
- }
- }).catch(() => {
- loading.value = false
- })
+ }
}
});
}
@@ -550,7 +687,7 @@
}
defineExpose({
- dialogVisible,
+ openDialog
})
</script>
--
Gitblit v1.9.2