前端最新版本同步
This commit is contained in:
Zhang.WH
@@ -355,10 +355,8 @@
|
||||
<el-input v-model="form.ybNo" placeholder="请输入医保码" maxlength="30" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="角色" style="width: 100%">
|
||||
<el-form-item label="角色" prop="practitionerRolesDtoListIds" style="width: 100%">
|
||||
<el-select
|
||||
v-model="form.practitionerRolesDtoListIds"
|
||||
multiple
|
||||
@@ -376,6 +374,51 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="职称编码" prop="drProfttlCode">
|
||||
<el-select v-model="form.drProfttlCode" placeholder="请选择职称编码">
|
||||
<el-option
|
||||
v-for="dict in drord_dr_profttl"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="签名图片" prop="signature">
|
||||
<!-- 上传区域 -->
|
||||
<div v-if="!form.signature" class="upload-area">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@change="handleFileSelect"
|
||||
ref="fileInput"
|
||||
class="file-input"
|
||||
/>
|
||||
<div class="upload-placeholder">
|
||||
<el-icon><Plus /></el-icon>
|
||||
<p>点击上传图片</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片预览区域 -->
|
||||
<div v-else class="preview-area">
|
||||
<img :src="form.signature" class="preview-image" />
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="Delete"
|
||||
circle
|
||||
size="small"
|
||||
@click="removeImage"
|
||||
class="remove-button"
|
||||
></el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="职业资格证编号" prop="pharPracCertNo">
|
||||
<el-input
|
||||
@@ -552,8 +595,11 @@ import { ref } from 'vue';
|
||||
|
||||
const router = useRouter();
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { sys_normal_disable, sys_user_sex } = proxy.useDict('sys_normal_disable', 'sys_user_sex');
|
||||
const { sys_normal_disable, sys_user_sex, drord_dr_profttl } = proxy.useDict('sys_normal_disable', 'sys_user_sex', 'drord_dr_profttl');
|
||||
|
||||
const fileList = ref([]);
|
||||
const limit = ref(1); // 添加limit变量定义
|
||||
const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
|
||||
const userList = ref([]);
|
||||
const open = ref(false);
|
||||
const loading = ref(true);
|
||||
@@ -617,8 +663,9 @@ const data = reactive({
|
||||
{ required: true, message: '用户名称不能为空', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' },
|
||||
],
|
||||
nickName: [{ required: true, message: '责任科室不能为空', trigger: 'blur' }],
|
||||
responsibilityOrgDtoList: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
|
||||
nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
|
||||
responsibilityOrgDtoList: [{ required: true, message: '责任科室不能为空', trigger: 'blur' }],
|
||||
practitionerRolesDtoListIds: [{ required: true, message: '角色不能为空', trigger: 'blur' }],
|
||||
password: [
|
||||
{ required: true, message: '用户密码不能为空', trigger: 'blur' },
|
||||
{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
|
||||
@@ -828,11 +875,22 @@ function reset() {
|
||||
manageWardLocationDtoList: [],
|
||||
};
|
||||
proxy.resetForm('userRef');
|
||||
// 清空图片相关数据
|
||||
fileList.value = [];
|
||||
form.value.signature = '';
|
||||
if (proxy.$refs.uploadRef) {
|
||||
proxy.$refs.uploadRef.clearFiles();
|
||||
}
|
||||
}
|
||||
/** 取消按钮 */
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
// 清空图片相关数据
|
||||
fileList.value = [];
|
||||
if (proxy.$refs.uploadRef) {
|
||||
proxy.$refs.uploadRef.clearFiles();
|
||||
}
|
||||
}
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
@@ -1047,8 +1105,26 @@ function validateUniqueRole(rule, value, callback) {
|
||||
}
|
||||
}
|
||||
|
||||
/** 覆盖默认上传行为 */
|
||||
function requestUpload() {}
|
||||
|
||||
/** 上传预处理 */
|
||||
function beforeUpload(file) {
|
||||
if (file.type.indexOf("image/") == -1) {
|
||||
proxy.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
|
||||
} else {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => {
|
||||
options.img = reader.result;
|
||||
options.filename = file.name;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
console.log(form.value)
|
||||
proxy.$refs['userRef'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (form.value.userId != undefined) {
|
||||
@@ -1068,6 +1144,120 @@ function submitForm() {
|
||||
});
|
||||
}
|
||||
|
||||
/** 处理base64图片上传 */
|
||||
function handleBase64Upload(option) {
|
||||
// 由于图片已经在handleBeforeUpload中转为base64并存储在form中，这里直接返回成功
|
||||
option.onSuccess();
|
||||
}
|
||||
|
||||
function handleUploadSuccess(res, file) {
|
||||
console.log(res,file)
|
||||
}
|
||||
|
||||
/** 上传预处理 */
|
||||
function handleBeforeUpload(file) {
|
||||
console.log(file)
|
||||
// 检查是否已有一张图片，如果有则不允许继续上传
|
||||
if (fileList.value.length >= limit.value) {
|
||||
proxy.$modal.msgWarning("只能上传一张图片，请先删除已上传的图片！");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (file.type.indexOf("image/") == -1) {
|
||||
proxy.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
|
||||
return false;
|
||||
} else {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => {
|
||||
// 将base64图片数据保存到表单中
|
||||
form.value.signature = reader.result;
|
||||
// 更新文件列表用于显示
|
||||
fileList.value = [{ name: file.name, url: reader.result }];
|
||||
};
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
/** 处理文件移除 */
|
||||
function handleRemoveFile() {
|
||||
fileList.value = [];
|
||||
form.value.signature = '';
|
||||
}
|
||||
|
||||
/** 移除图片 */
|
||||
function removeImage() {
|
||||
form.value.signature = '';
|
||||
// 重置文件输入框
|
||||
if (proxy.$refs.fileInput) {
|
||||
proxy.$refs.fileInput.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
/** 处理文件选择 */
|
||||
function handleFileSelect(event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
// 检查文件类型
|
||||
if (!file.type.startsWith('image/')) {
|
||||
proxy.$modal.msgError("请选择图片文件！");
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查文件大小（限制为2MB）
|
||||
if (file.size > 2 * 1024 * 1024) {
|
||||
proxy.$modal.msgError("图片大小不能超过2MB！");
|
||||
return;
|
||||
}
|
||||
|
||||
// 转换为base64
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
form.value.signature = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
/** 处理文件选择变化 */
|
||||
function handleFileChange(file, fileList) {
|
||||
console.log('File changed:', file, fileList);
|
||||
|
||||
// 如果已有一张图片，先清空之前的
|
||||
if (fileList.value.length >= 1) {
|
||||
fileList.value = [];
|
||||
form.value.signature = '';
|
||||
}
|
||||
|
||||
// 只处理第一个文件（最新选择的）
|
||||
const currentFile = file.raw;
|
||||
if (!currentFile) return;
|
||||
|
||||
// 检查文件类型
|
||||
if (!currentFile.type.startsWith('image/')) {
|
||||
proxy.$modal.msgError("请选择图片文件！");
|
||||
proxy.$refs.uploadRef.clearFiles();
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查文件大小（限制为2MB）
|
||||
if (currentFile.size > 2 * 1024 * 1024) {
|
||||
proxy.$modal.msgError("图片大小不能超过2MB！");
|
||||
proxy.$refs.uploadRef.clearFiles();
|
||||
return;
|
||||
}
|
||||
|
||||
// 转换为base64
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
form.value.signature = e.target.result;
|
||||
console.log('Image converted to base64');
|
||||
// 更新文件列表用于显示
|
||||
fileList.value = [{ name: currentFile.name, url: e.target.result }];
|
||||
};
|
||||
reader.readAsDataURL(currentFile);
|
||||
}
|
||||
|
||||
getDeptTree();
|
||||
getLocationTree();
|
||||
getList();
|
||||
@@ -1081,4 +1271,60 @@ getWardList();
|
||||
padding-left: 12px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-placeholder {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.upload-placeholder:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.upload-placeholder .el-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.preview-area {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.remove-button {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user