feat(医疗模块): 更新新增/修改弹窗表单,添加关联用户功能
- 在新增/修改弹窗中,添加关联用户的输入框,支持手机号/邮箱的自动补全 - 更新表单验证规则,确保关联用户为必填项 - 调整表单项的样式,统一标签宽度,提升用户体验 - 增加用户列表加载功能,优化用户选择流程
This commit is contained in:
@@ -61,7 +61,7 @@
|
|||||||
<!-- 弹窗, 新增 / 修改 -->
|
<!-- 弹窗, 新增 / 修改 -->
|
||||||
<el-dialog :visible.sync="addOrUpdateVisible" :close-on-click-modal="false" :append-to-body="true" :title="titlesub"
|
<el-dialog :visible.sync="addOrUpdateVisible" :close-on-click-modal="false" :append-to-body="true" :title="titlesub"
|
||||||
width="50%" @close="cancleClose">
|
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-row type="flex" justify="center">
|
||||||
<el-form-item label="姓名" prop="name">
|
<el-form-item label="姓名" prop="name">
|
||||||
<el-input style="width:500px" v-model="addForm.name"></el-input>
|
<el-input style="width:500px" v-model="addForm.name"></el-input>
|
||||||
@@ -76,17 +76,39 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row type="flex" justify="center">
|
<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-input style="width:500px" v-model="addForm.url"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row type="flex" justify="center">
|
<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-input style="width:500px" v-model="addForm.content" :rows="5" type="textarea"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row type="flex" justify="center">
|
<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-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 v-for="item in provinceEntity" :key="item.provId" :label="item.provName" :value="item.provId">
|
||||||
</el-option>
|
</el-option>
|
||||||
@@ -98,17 +120,19 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row type="flex" justify="center">
|
<el-row type="flex" justify="center">
|
||||||
<el-form-item label="图片" prop="img" label-width="48px">
|
<el-form-item label="图片" prop="img">
|
||||||
<el-upload class="el-uploadfeng " ref="files"
|
<div style="width: 500px;">
|
||||||
:class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
|
<el-upload class="el-uploadfeng " ref="files"
|
||||||
:action="baseUrl + '/oss/fileoss'" list-type="picture-card" :file-list="fileList"
|
:class="{ uoloadSty: dataForm.showBtnDealImg, disUoloadSty: dataForm.noneBtnImg }"
|
||||||
:on-success="handlePicSuccess" accept=".jpeg,.jpg,.gif,.png" :on-remove="handleRemove">
|
:action="baseUrl + '/oss/fileoss'" list-type="picture-card" :file-list="fileList"
|
||||||
<i class="el-icon-plus"></i>
|
:on-success="handlePicSuccess" accept=".jpeg,.jpg,.gif,.png" :on-remove="handleRemove">
|
||||||
</el-upload>
|
<i class="el-icon-plus"></i>
|
||||||
|
</el-upload>
|
||||||
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row type="flex" justify="center">
|
<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-input style="width:500px" v-model="addForm.sort"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-row>
|
</el-row>
|
||||||
@@ -131,6 +155,7 @@
|
|||||||
cityEntity: [],
|
cityEntity: [],
|
||||||
provinceEntity: [], //省地址
|
provinceEntity: [], //省地址
|
||||||
typeList: [], //类型列表
|
typeList: [], //类型列表
|
||||||
|
userList: [], //用户列表
|
||||||
booknameList: [],
|
booknameList: [],
|
||||||
dataForm: {
|
dataForm: {
|
||||||
dictType: '', //分类
|
dictType: '', //分类
|
||||||
@@ -145,6 +170,7 @@
|
|||||||
content: '',
|
content: '',
|
||||||
cityId: '',
|
cityId: '',
|
||||||
provId: '',
|
provId: '',
|
||||||
|
tel: '',
|
||||||
sort: 0
|
sort: 0
|
||||||
},
|
},
|
||||||
editId: '',
|
editId: '',
|
||||||
@@ -153,6 +179,10 @@
|
|||||||
required: true,
|
required: true,
|
||||||
message: "请选择分类"
|
message: "请选择分类"
|
||||||
}],
|
}],
|
||||||
|
tel: [{
|
||||||
|
required: true,
|
||||||
|
message: "请选择关联用户"
|
||||||
|
}],
|
||||||
name: [{
|
name: [{
|
||||||
required: true,
|
required: true,
|
||||||
message: "请输入姓名"
|
message: "请输入姓名"
|
||||||
@@ -239,6 +269,32 @@
|
|||||||
this.dataListLoading = false
|
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() {
|
provinceChange() {
|
||||||
this.addForm.cityId = ''
|
this.addForm.cityId = ''
|
||||||
this.cityEntity = []
|
this.cityEntity = []
|
||||||
@@ -281,6 +337,7 @@
|
|||||||
this.addForm.content = row.content
|
this.addForm.content = row.content
|
||||||
this.addForm.typeId = row.type.toString()
|
this.addForm.typeId = row.type.toString()
|
||||||
this.addForm.sort = row.sort
|
this.addForm.sort = row.sort
|
||||||
|
this.addForm.tel = row.tel
|
||||||
this.fileList = row.imgList
|
this.fileList = row.imgList
|
||||||
for (var i = 0; i < this.provinceEntity.length; i++) {
|
for (var i = 0; i < this.provinceEntity.length; i++) {
|
||||||
for (var j = 0; j < this.provinceEntity[i].cityList.length; j++) {
|
for (var j = 0; j < this.provinceEntity[i].cityList.length; j++) {
|
||||||
@@ -382,7 +439,9 @@
|
|||||||
"content": this.addForm.content,
|
"content": this.addForm.content,
|
||||||
"type": this.addForm.typeId,
|
"type": this.addForm.typeId,
|
||||||
"cityId": this.addForm.cityId,
|
"cityId": this.addForm.cityId,
|
||||||
"sort": this.addForm.sort
|
"sort": this.addForm.sort,
|
||||||
|
"userId": this.addForm.userId,
|
||||||
|
"tel": this.addForm.tel
|
||||||
})
|
})
|
||||||
}).then(({
|
}).then(({
|
||||||
data
|
data
|
||||||
|
|||||||
@@ -27,7 +27,7 @@
|
|||||||
size="small"
|
size="small"
|
||||||
style="width: 100%;"
|
style="width: 100%;"
|
||||||
v-model="dataForm.userKey"
|
v-model="dataForm.userKey"
|
||||||
debounce="500"
|
:debounce="500"
|
||||||
:fetch-suggestions="loadAll"
|
:fetch-suggestions="loadAll"
|
||||||
placeholder="请输入手机号/邮箱"
|
placeholder="请输入手机号/邮箱"
|
||||||
@select="handleSelect"
|
@select="handleSelect"
|
||||||
|
|||||||
Reference in New Issue
Block a user