feat(医疗模块): 更新新增/修改弹窗表单,添加关联用户功能

- 在新增/修改弹窗中,添加关联用户的输入框,支持手机号/邮箱的自动补全
- 更新表单验证规则,确保关联用户为必填项
- 调整表单项的样式,统一标签宽度,提升用户体验
- 增加用户列表加载功能,优化用户选择流程
This commit is contained in:
2026-03-23 16:02:59 +08:00
parent 301b3a2582
commit 30237639c7
2 changed files with 73 additions and 14 deletions

View File

@@ -61,7 +61,7 @@
<!-- 弹窗, 新增 / 修改 -->
<el-dialog :visible.sync="addOrUpdateVisible" :close-on-click-modal="false" :append-to-body="true" :title="titlesub"
width="50%" @close="cancleClose">
<el-form :inline="true" :model="addForm" ref="addFormRef" :rules="addFormRule">
<el-form :inline="true" :model="addForm" ref="addFormRef" :rules="addFormRule" label-width="100px">
<el-row type="flex" justify="center">
<el-form-item label="姓名" prop="name">
<el-input style="width:500px" v-model="addForm.name"></el-input>
@@ -76,17 +76,39 @@
</el-form-item>
</el-row>
<el-row type="flex" justify="center">
<el-form-item label="url" prop="url" label-width="48px">
<el-form-item label="关联用户" prop="tel">
<el-autocomplete
size="small"
style="width: 500px;"
v-model="addForm.tel"
:debounce="500"
:fetch-suggestions="loadAll"
placeholder="请输入手机号/邮箱"
@select="handleSelect"
>
<template #default="{ item }">
<div class="custom-item">
<span>{{ item.tel ? item.tel : item.email }}</span>
<span style="color: gray; margin-left: 10px;" v-if="item.name"
>({{ item.name }})</span
>
</div>
</template>
</el-autocomplete>
</el-form-item>
</el-row>
<el-row type="flex" justify="center">
<el-form-item label="url" prop="url">
<el-input style="width:500px" v-model="addForm.url"></el-input>
</el-form-item>
</el-row>
<el-row type="flex" justify="center">
<el-form-item label="内容" prop="content" label-width="48px">
<el-form-item label="内容" prop="content">
<el-input style="width:500px" v-model="addForm.content" :rows="5" type="textarea"></el-input>
</el-form-item>
</el-row>
<el-row type="flex" justify="center">
<el-form-item label="地址" prop="cityId" label-width="48px">
<el-form-item label="地址" prop="cityId">
<el-select v-model="addForm.provId" placeholder="请选择省份" style="width:249px" @change="provinceChange">
<el-option v-for="item in provinceEntity" :key="item.provId" :label="item.provName" :value="item.provId">
</el-option>
@@ -98,17 +120,19 @@
</el-form-item>
</el-row>
<el-row type="flex" justify="center">
<el-form-item label="图片" prop="img" label-width="48px">
<el-upload class="el-uploadfeng " ref="files"
:class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
:action="baseUrl + '/oss/fileoss'" list-type="picture-card" :file-list="fileList"
:on-success="handlePicSuccess" accept=".jpeg,.jpg,.gif,.png" :on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-form-item label="图片" prop="img">
<div style="width: 500px;">
<el-upload class="el-uploadfeng " ref="files"
:class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
:action="baseUrl + '/oss/fileoss'" list-type="picture-card" :file-list="fileList"
:on-success="handlePicSuccess" accept=".jpeg,.jpg,.gif,.png" :on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
</div>
</el-form-item>
</el-row>
<el-row type="flex" justify="center">
<el-form-item label="排序" label-width="48px">
<el-form-item label="排序">
<el-input style="width:500px" v-model="addForm.sort"></el-input>
</el-form-item>
</el-row>
@@ -131,6 +155,7 @@
cityEntity: [],
provinceEntity: [], //省地址
typeList: [], //类型列表
userList: [], //用户列表
booknameList: [],
dataForm: {
dictType: '', //分类
@@ -145,6 +170,7 @@
content: '',
cityId: '',
provId: '',
tel: '',
sort: 0
},
editId: '',
@@ -153,6 +179,10 @@
required: true,
message: "请选择分类"
}],
tel: [{
required: true,
message: "请选择关联用户"
}],
name: [{
required: true,
message: "请输入姓名"
@@ -239,6 +269,32 @@
this.dataListLoading = false
})
},
loadAll(queryString, cb) {
if (queryString == "") {
return false;
}
this.$http({
url: this.$http.adornUrl("/book/user/getUserList"),
method: "post",
data: this.$http.adornData({
page: 1,
limit: 20,
key: queryString
})
}).then(({ data }) => {
if (data && data.code === 0) {
var arr = data.user.records;
cb(arr);
} else {
cb([]);
}
});
},
handleSelect(data) {
console.log("data at line 161:", data);
this.addForm.userId = data.id;
this.addForm.tel = data.tel;
},
provinceChange() {
this.addForm.cityId = ''
this.cityEntity = []
@@ -281,6 +337,7 @@
this.addForm.content = row.content
this.addForm.typeId = row.type.toString()
this.addForm.sort = row.sort
this.addForm.tel = row.tel
this.fileList = row.imgList
for (var i = 0; i < this.provinceEntity.length; i++) {
for (var j = 0; j < this.provinceEntity[i].cityList.length; j++) {
@@ -382,7 +439,9 @@
"content": this.addForm.content,
"type": this.addForm.typeId,
"cityId": this.addForm.cityId,
"sort": this.addForm.sort
"sort": this.addForm.sort,
"userId": this.addForm.userId,
"tel": this.addForm.tel
})
}).then(({
data

View File

@@ -27,7 +27,7 @@
size="small"
style="width: 100%;"
v-model="dataForm.userKey"
debounce="500"
:debounce="500"
:fetch-suggestions="loadAll"
placeholder="请输入手机号/邮箱"
@select="handleSelect"