
- 发布:2023-08-03 17:35
- 更新:2023-08-03 17:35
- 阅读:91
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 3.8.7
第三方开发者工具版本号: 1.06.2306020
基础库版本号: 2.30.4
项目创建方式: HBuilderX
示例代码:
<view v-if="item.fieldName === 'hospitalId'">
<uni-easyinput
ref="item.fieldName"
v-model="personInfo.hospitalNm"
placeholder="请输入"
type="item.htmlType"
disabled="!isAdd"
inputBorder="false"
@focus="goHospital"
@clear="clearable"
></uni-easyinput>
</view>
包裹在uni-forms-item 表单组件里面
placeholder="请输入" type="item.htmlType" disabled="!isAdd" inputBorder="false" @focus="goHospital"
@clear="clearable"
></uni-easyinput>
</view>
包裹在uni-forms-item 表单组件里面
操作步骤:
点击输入框跳转页面选择医院,确认回来,输入框显示选中的医院,文字就错位了
点击输入框跳转页面选择医院,确认回来,输入框显示选中的医院,文字就错位了
预期结果:
不要错位,没有其他样式,整个文件代码贴上去了
不要错位,没有其他样式,整个文件代码贴上去了
实际结果:
<template>
<view :style="{ height: ${windowHeight}px
}">
<view class="container">
<view style="display: flex; flex-wrap: wrap">
<!-- 导航区域 -->
<view :style="{ height: navBarHeight + 'px' }" class="w-100 navbars">
<view class="navbar w-100">
<view style="width: 30px" @click="goBack">
<image
src="leftImg"
class="navbarImg"
style="{ height: menuButtonHeight - 12 + 'px' }"
></image>
</view>
<view
style="{ height: menuButtonHeight + 'px' }"
class="navbarTitle"
>受检者信息</view
>
<view style="width: 14%"></view>
</view>
</view>
</view>
<!-- 内容区域 -->
<view
class="w-100 p-20 body"
style="{ height: ${windowHeight - navBarHeight - 60}px
}"
>
<view class="p-20 btns-bg1 borders-radius">
<view class="p-20">
<view class="page-info" style="margin-bottom: 20rpx">
<view style="width: 90px">录入模板</view>
<zqsSelect
list="templateList"
placeholder="请选择选择模板
"
title="'选择模板'"
v-model="personInfo.templateId"
disabled="!isAdd"
@change="getFormData"
style="flex: 1"
clearable="false"
labelKey="templateName"
valueKey="templateId"
>
</zqsSelect>
<!-- <hpy-form-select
class="flex-1 my-select"
dataList="templateList"
text="templateName"
name="templateId"
v-model="personInfo.templateId"
title="选择模板"
@change="getFormData"
disabled="!isAdd"
clearable="false"
>
</hpy-form-select> -->
</view>
<uni-forms ref="form" labelWidth="90px" style="margin-top: 20px">
<uni-forms-item
label="item.showAlias || item.showName"
key="item.fieldId"
required="item.requiredFlag === '1'"
v-for="item in formData"
>
<view slot="label">
<view
class="uni-forms-item__label"
style="width: 90px; justify-content: flex-start"
@click="itemLabelClickFn(item)"
>
<text v-if="item.requiredFlag === '1'" class="is-required"
>*</text
>
<text
style="item.requiredFlag === '1' ? 'color:red' : ''"
class="{
'label-remember':
rememberInputLists.indexOf(item.fieldName) !== -1,
}"
>{{ item.showAlias || item.showName }}</text
>
</view>
</view>
<view
v-if="
item.htmlType === 'input' || item.htmlType === 'textarea'
"
>
<uni-easyinput
ref="item.fieldName"
v-if="item.fieldName === 'barcode'"
v-model="personInfo[item.fieldName]"
placeholder="请输入"
type="item.htmlType"
class="uni-mt-5"
suffixIcon="scan"
@iconClick="scanCode"
@blur="getHospitalByBarcodeFn"
inputBorder="false"
disabled="!isAdd"
</uni-easyinput>
<uni-easyinput
ref="item.fieldName"
v-else-if="item.fieldName === 'courierNumber'"
v-model="personInfo[item.fieldName]"
placeholder="请输入"
type="item.htmlType"
class="uni-mt-5"
suffixIcon="scan"
@iconClick="scanCourierNumber"
inputBorder="false"
></uni-easyinput>
<uni-easyinput
v-else
ref="item.fieldName"
v-model="personInfo[item.fieldName]"
placeholder="请输入"
type="item.htmlType"
inputBorder="false"
></uni-easyinput>
</view>
<view v-if="item.htmlType === 'date'">
<uni-datetime-picker
v-if="item.fieldName === 'examineBirthday'"
ref="item.fieldName"
v-model="personInfo[item.fieldName]"
type="item.htmlType"
border="false"
@change="examineBirthdayChange"
/>
<uni-datetime-picker
v-else
ref="item.fieldName"
v-model="personInfo[item.fieldName]"
type="item.htmlType"
border="false"
/>
</view>
<view v-if="item.htmlType === 'datetime'">
<uni-datetime-picker
ref="item.fieldName"
v-model="personInfo[item.fieldName]"
type="item.htmlType"
border="false"
clear-icon="false"
return-type="yyyy-mm-dd HH:mm:ss"
/>
</view>
<view
v-if="item.htmlType === 'select'"
style="
margin: auto;
height: 100%;
display: flex;
align-items: center;
flex: 1;
"
>
<view v-if="item.fieldName === 'hospitalId'">
<uni-easyinput
ref="item.fieldName"
v-model="personInfo.hospitalNm"
placeholder="请输入"
type="item.htmlType"
disabled="!isAdd"
inputBorder="false"
@focus="goHospital"
@clear="clearable"
></uni-easyinput>
</view>
<div v-else-if="item.fieldName === 'organizationNm'">
<uni-easyinput
ref="item.fieldName"
v-model="personInfo.organizationNm"
placeholder="请输入"
type="item.htmlType"
inputBorder="false"
@focus.prevent="goOrganization"
></uni-easyinput>
</div>
<div v-else-if="item.fieldName === 'doctorNm'">
<uni-easyinput
ref="item.fieldName"
v-model="personInfo.doctorNm"
placeholder="请输入"
type="item.htmlType"
inputBorder="false"
@focus.prevent="goDoctor"
></uni-easyinput>
</div>
<zqsSelect
v-else
ref="item.fieldName"
list="item.options"
placeholder="请选择${item.showAlias || item.showName}
"
title="请选择${item.showAlias || item.showName}
"
v-model="personInfo[item.fieldName]"
disabled="!isAdd"
style="flex: 1"
>
</zqsSelect>
</view>
</uni-forms-item>
</uni-forms>
</view>
</view>
<view style="display: flex; align-items: center" v-if="isAdd">
<uni-data-checkbox
multiple
v-model="checkbox"
localdata="[
{
text: '请先阅读并同意',
value: false,
},
]"
></uni-data-checkbox>
<text @click="goPage" style="color: #00a6a8"> 用户协议</text>
</view>
</view>
<view class="btns btns-bg" v-if="isAdd">
<view class="btns-bg">
<button
style="border-width: 0"
class="btnBackground"
@click="getPersonInfo"
disabled="!checkbox.length"
确认
</button>
</view>
</view>
</view>
<!--顶部个人信息栏-->
</view>
</template>
<script>
import {
getTemplateList,
getConfigTemplateRelevanceList,
getSampleTypeList,
specimenCharacterList,
getDictData,
getDicBusinessRelationUserAgent,
// getHospitalList,
getHospitalByBarcode,
getHospitalBarcode,
getHospitalDept,
getHospitalDoctor,
getSell,
getAgent,
configKey,
} from "@/api/order.js";
import { toast } from "@/utils/common";
import zqsSelect from "@/components/zqs-select/zqs-select.vue";
import moment from "moment";
export default {
components: { zqsSelect },
data() {
return {
checkbox: [],
relationUserAgentStatus: "", //前端录入,根据字典值,获取销售和代理商选项
leftImg: require("@/static/images/left.png"),
navBarHeight: getApp().globalData.navBarHeight,
menuButtonHeight: getApp().globalData.menuButtonHeight,
hospitalList: [],
sampleTypeList: [],
specimenCharacterOpents: [],
user_sex: [],
certificate_type: [],
tumor_type: [],
acquisition_mode: [],
personInfo: {
barcode: "",
},
templateList: [],
doctorList: [],
deptList: [],
formData: [],
requiredArr: [],
rules: {},
isAdd: true,
allEadit: true,
hosChange: true,
rememberInputLists: [], //记忆功能
isBarcode: "",
user: {},
// 7模式用
salesId: "",
agentId: "",
sellList: [],
agentList: [],
};
},
computed: {
windowHeight() {
return uni.getSystemInfoSync().windowHeight;
},
},
created() {},
onLoad: function () {
this.user = this.$store.getters.user;
this.getconfigKey();
Promise.all([
this.getDictDataFn(),
this.initSelect(),
this.getTemplateListFn(),
getDicBusinessRelationUserAgent().then((res) => {
this.relationUserAgentStatus = res?.data?.[0]?.dictValue;
}),
]).then((res) => {
let pages = getCurrentPages();
// 上一页页面实例
let prevPage = pages[pages.length - 2];
// this.personInfo = prevPage?.$vm?.personInfo || {};
console.log(prevPage?.$vm?.personInfo);
// this.isAdd = prevPage?.$vm?.isAdd || false;
// this.allEadit = prevPage?.$vm?.allEadit || false;
// this.rememberInputLists = prevPage?.$vm?.rememberInputLists;
this.$set(this, "personInfo", prevPage?.$vm?.personInfo || {});
// this.getFormData();
if (this.isAdd && !this.personInfo.templateId) {
this.templateList.map((item) => {
if (item.defaultFlag === "0") {
// this.personInfo.templateId=item.templateId
this.$set(this.personInfo, "templateId", item.templateId);
}
});
}
this.getFormData();
});
},
onShow() {
this.user = this.$store.getters.user;
},
watch: {
hosChange() {
// 获取条码
if (this.isBarcode === "2") {
getHospitalBarcode({
hospitalId: this.personInfo.hospitalId,
}).then((res) => {
this.personInfo.barcode = res.msg;
});
}
},
"personInfo.hospitalId": function (hospitalId) {
if (hospitalId) {
this.getHospitalDoctorFn();
this.getHospitalDeptFn();
if (this.relationUserAgentStatus === "1") {
this.getSellFn({
hospitalId,
});
} else if (this.relationUserAgentStatus === "2") {
this.getAgentFn({
hospitalId,
});
} else if (this.relationUserAgentStatus === "3") {
this.getSellFn({
hospitalId,
});
this.getAgentFn({
hospitalId,
});
}
}
},
"personInfo.salesman": function (salesman) {
if (salesman) {
if (this.relationUserAgentStatus === "1") {
this.getAgentFn({
hospitalId: this.personInfo.hospitalId,
userName: salesman,
});
} else if (this.relationUserAgentStatus === "4") {
this.getAgentFn({
userName: salesman,
});
} else if (this.relationUserAgentStatus === "7") {
if (this.user.userType === "2") {
let obj = this.sellList.find((i) => i.nickName === salesman) || {};
this.salesId = obj.userId || this.user.userId;
this.getAgentFn({ userId: this.salesId });
}
}
} else {
if (this.relationUserAgentStatus === "1") {
this.personInfo.agentName = "";
} else if (this.relationUserAgentStatus === "4") {
this.personInfo.agentName = "";
} else if (this.relationUserAgentStatus === "7") {
this.salesId = "";
if (this.user.userType === "2") {
this.personInfo.agentName = "";
}
}
}
},
"personInfo.agentName": function (agentName) {
if (agentName) {
if (this.relationUserAgentStatus === "2") {
this.getSellFn({
hospitalId: this.personInfo.hospitalId,
agentLevelName: agentName,
});
} else if (this.relationUserAgentStatus === "5") {
this.getSellFn({
agentLevelName: agentName,
});
} else if (this.relationUserAgentStatus === "7") {
if (this.user.userType === "agent") {
let obj =
this.agentList.find((i) => i.agentLevelName === agentName) || {};
this.agentId = obj.agentId || this.user.userId;
this.getSellFn({
agentId: this.agentId,
});
}
}
} else {
if (this.relationUserAgentStatus === "2") {
this.personInfo.salesman = "";
} else if (this.relationUserAgentStatus === "5") {
this.personInfo.salesman = "";
} else if (this.relationUserAgentStatus === "7") {
this.agentId = "";
if (this.user.userType === "agent") {
this.personInfo.salesman = "";
}
}
}
},
},
methods: {
// 模板信息
getTemplateListFn() {
getTemplateList().then((res) => {
this.templateList = res.rows;
});
},
getconfigKey() {
configKey("enable_mini_deal").then((res) => {
this.checkbox = res.msg === "1" ? [false] : [];
});
configKey("sys.definition.barcode").then((res) => {
this.isBarcode = res.msg;
});
},
getFormData() {
if (!this.personInfo.templateId) {
return;
}
getConfigTemplateRelevanceList({
templateId: this.personInfo.templateId,
}).then((res) => {
this.formData = res.data || [];
this.initDom();
});
},
// 初始化表单和表单字段
initDom() {
this.requiredArr = [];
this.rules = {};
let personInfo = {};
this.formData.map((i) => {
if (i.requiredFlag === "1") {
this.requiredArr.push(i.fieldName);
this.rules[i.fieldName] = ${i.showAlias || i.showName}为必填字段
;
}
// 放入下拉选
// 送检医院
// if (i.fieldName === "hospitalId") {
// i.options = this.hospitalList;
// }
// 样本类型
if (i.fieldName === "specimenTypeId") {
i.options = this.sampleTypeList;
}
// 样本性状
if (i.fieldName === "specimenCharacterId") {
i.options = this.specimenCharacterOpents;
}
// 性别
if (i.fieldName === "examineGender") {
i.options = this.user_sex;
}
// 证件类型
if (i.fieldName === "certificateType") {
i.options = this.certificate_type;
}
// 肿瘤类型
if (i.fieldName === "tumorType") {
i.options = this.tumor_type;
}
// 采样模式
if (i.fieldName === "acquisitionMode") {
i.options = this.acquisition_mode;
}
//绑定字段初始化,新增时候才初始化
if (this.isAdd) {
personInfo[i.fieldName] =
this.personInfo[i.fieldName] || i.defaultValue;
}
if (i.htmlType === "datetime") {
personInfo[i.fieldName] = this.$moment(
i.defaultValue || new Date()
).format("YYYY-MM-DD HH:mm:ss");
}
});
if (this.relationUserAgentStatus === "7") {
if (this.user.userType === "2") {
// this.salesId = this.user.userId;
personInfo.salesman = this.user.userName;
} else if (this.user.userType === "agent") {
personInfo.agentName = this.user.username;
// this.agentId = this.user.userId;
}
}
// console.log(personInfo);
// 校验字段传上一页
// 获取所有页面栈实例列表
let pages = getCurrentPages();
// 上一页页面实例
let prevPage = pages[pages.length - 2];
// 修改上一页data里面的参数值
prevPage.$vm.requiredArr = this.requiredArr;
prevPage.$vm.rules = this.rules;
console.log(prevPage?.$vm?.personInfo);
this.isAdd = prevPage?.$vm?.isAdd || false;
this.allEadit = prevPage?.$vm?.allEadit || false;
this.rememberInputLists = prevPage?.$vm?.rememberInputLists;
this.personInfo = {
...personInfo,
...this.personInfo,
};
// if (templateId) {
// this.personInfo.templateId = templateId;
// }
this.$nextTick(() => {
if (this.relationUserAgentStatus === "4") {
this.getSellFn({});
} else if (this.relationUserAgentStatus === "5") {
this.getAgentFn({});
} else if (this.relationUserAgentStatus === "6") {
this.getSellFn({});
this.getAgentFn({});
} else if (this.relationUserAgentStatus === "7") {
// 销售和其他非代理商进来初始化要调销售接口
if (this.user.userType === "2") {
this.getSellFn({});
}
// 代理商和其他非销售进来初始化要调代理商接口
else if (this.user.userType === "agent") {
this.getAgentFn({});
} else {
this.getSellFn({});
this.getAgentFn({});
}
}
this.getHospitalDoctorFn();
this.getHospitalDeptFn();
});
},
// 初始化下拉选
async initSelect() {
await getSampleTypeList().then((res) => {
this.sampleTypeList = this.setOptions(
res.rows,
"sampleTypeName",
"sampleTypeId"
);
});
await specimenCharacterList({
t: {
enableFlag: "0",
},
}).then((res) => {
this.specimenCharacterOpents = this.setOptions(
res.rows,
"characterName",
"specimenCharacterId"
);
});
// getHospitalList().then((res) => {
// this.hospitalList = this.setOptions(
// res.rows,
// "hospitalName",
// "hospitalId"
// );
// });
},
// 获取所有字典项
getDictDataFn() {
getDictData("sys_user_sex").then((res) => {
this.user_sex = this.setOptions(res.data, "dictLabel", "dictValue");
});
getDictData("base_certificate_type").then((res) => {
this.certificate_type = this.setOptions(
res.data,
"dictLabel",
"dictValue"
);
});
getDictData("base_tumor_type").then((res) => {
this.tumor_type = this.setOptions(res.data, "dictLabel", "dictValue");
});
getDictData("base_acquisition_mode").then((res) => {
this.acquisition_mode = this.setOptions(
res.data,
"dictLabel",
"dictValue"
);
});
},
/** 获取销售数据 */
getSellFn(data) {
getSell(data).then((res) => {
let i = -1;
i = this.formData.findIndex((i) => i.fieldName === "salesman");
if (i !== -1) {
this.$set(
this.formData[i],
"options",
this.setOptions(res.data, "nickName", "nickName")
);
}
this.sellList = res.data;
if (!this.personInfo.recordId) {
const obj = res.data.find(
(item) =>
item.userName === this.$store.getters.user.userName &&
item.userId === this.$store.getters.user.userId
);
if (obj) this.$set(this.personInfo, "salesman", obj.nickName);
}
});
},
/** 获取代理商 */
getAgentFn(data) {
getAgent(data).then((res) => {
this.agentList = res.data;
const i = this.formData.findIndex((i) => i.fieldName === "agentName");
if (i !== -1) {
this.$set(
this.formData[i],
"options",
this.setOptions(res.data, "agentLevelName", "agentLevelName")
);
}
});
},
// 获取科室医生
getHospitalDoctorFn() {
// 医生
if (!this.personInfo.hospitalId) {
return;
}
getHospitalDoctor({
t: {
hospitalId: this.personInfo.hospitalId,
},
}).then((res) => {
this.doctorList = this.setOptions(res.rows, "doctorName", "doctorName");
// let obj = this.formData.find((i) => i.fieldName === "doctorNm") || {};
// obj.options = this.setOptions(res.rows, "doctorName", "doctorName");
});
},
getHospitalDeptFn() {
if (!this.personInfo.hospitalId) {
return;
}
// 科室
getHospitalDept({
t: {
hospitalId: this.personInfo.hospitalId,
},
}).then((res) => {
this.deptList = this.setOptions(res.rows, "name", "name");
// let obj =
// this.formData.find((i) => i.fieldName === "organizationNm") || {};
// obj.options = this.setOptions(res.rows, "name", "name");
});
},
// 下拉选格式化方法
setOptions(data, label, key) {
data.forEach((item) => {
item.optionName = item[label];
item.optionId = item[key];
});
return data || [];
},
goHospital() {
if (this.relationUserAgentStatus === "7") {
if (this.user.userType === "2") {
// 销售带id查询
this.$tab.navigateTo("/pages/order/hospital?userId=" + this.salesId);
} else if (this.user.userType === "agent") {
// 代理商带agentId查询
this.$tab.navigateTo("/pages/order/hospital?agentId=" + this.agentId);
} else {
this.$tab.navigateTo("/pages/order/hospital");
}
} else {
this.$tab.navigateTo("/pages/order/hospital");
}
},
goDoctor() {
this.$tab.navigateTo("/pages/order/doctor");
},
goOrganization() {
this.$tab.navigateTo("/pages/order/organization");
},
// 扫描二维码
scanCode() {
if (this.isAdd) {
uni.scanCode({
scanType: ["barcode", "qrCode"],
success: (res) => {
// this.personInfo.barcode = res.result;
this.$set(this.personInfo, "barcode", res.result);
this.getHospitalByBarcodeFn();
},
fail: (err) => {
this.$modal.msgError("扫码失败");
},
});
}
},
scanCourierNumber() {
if (this.isAdd) {
uni.scanCode({
scanType: ["barcode", "qrCode"],
success: (res) => {
this.$set(this.personInfo, "courierNumber", res.result);
},
fail: (err) => {
this.$modal.msgError("扫码失败");
},
});
}
},
getHospitalByBarcodeFn() {
if (this.isBarcode != 2) return;
if (this.isBarcode == 2 && this.personInfo.barcode.length !== 12) {
toast("条形码输入有误");
return;
}
this.$set(this.personInfo, "hospitalId", "");
this.$set(this.personInfo, "hospitalNm", "");
if (this.personInfo.barcode) {
getHospitalByBarcode({
bybarcode: this.personInfo.barcode,
})
.then((res) => {
this.$set(this.personInfo, "hospitalId", res.data.id || "");
this.$set(
this.personInfo,
"hospitalNm",
res.data.hospitalName || ""
);
})
.catch((err) => {
this.$set(this.personInfo, "barcode", "");
});
}
},
checked() {
let falg = false;
for (let i = 0; i < this.requiredArr.length; i++) {
const item = this.requiredArr[i];
if (!this.personInfo[item]) {
falg = true;
this.$modal.msgError(this.rules[item]);
break;
}
}
return falg;
},
getPersonInfo() {
if (!this.personInfo.templateId) {
this.$modal.msgError("请先选择录入模板");
return;
}
if (this.checked()) {
return;
}
// 获取所有页面栈实例列表
let pages = getCurrentPages();
// 上一页页面实例
let prevPage = pages[pages.length - 2];
// 修改上一页data里面的times参数值为100
prevPage.$vm.personInfo = this.personInfo;
prevPage.$vm.rememberInputLists = this.rememberInputLists;
this.goBack();
},
goBack() {
this.$tab.navigateBack();
},
goPage() {
this.$tab.navigateTo("/pages/order/agreement");
},
clearable() {
this.$set(this.personInfo, "hospitalId", "");
this.$set(this.personInfo, "hospitalNm", "");
this.$set(this.personInfo, "barcode", "");
},
// 受检人生日改变
examineBirthdayChange(val) {
if (!val) {
this.$set(this.personInfo, "age", "");
this.$set(this.personInfo, "examineBrithYear", "");
this.$set(this.personInfo, "examineBrithMonth", "");
this.$set(this.personInfo, "examineBrithDay", "");
} else {
const duration = moment.duration(moment().add(1, "days").diff(val));
const years = duration.years();
const months = duration.months();
const days = duration.days();
this.$set(this.personInfo, "age", `${years}`);
this.$set(this.personInfo, "examineBrithYear", `${years}`);
this.$set(this.personInfo, "examineBrithMonth", `${months}`);
this.$set(this.personInfo, "examineBrithDay", `${days}`);
}
},
/**
* 点击字段label 字段记忆功能
*/
itemLabelClickFn(item) {
// isRemenberPage 当前页面使用此组件 是否有记忆功能
// if (!this.isRemenberPage) return;
// 不存在记忆功能的字段 return
if (!(item.memoryFlag === "1") || item.fieldName === "specimenTypeId")
return;
// 如果记忆字段组成的数组中存在当前字段 则移除记忆字段
const currentIndex = this.rememberInputLists.findIndex((d) => {
return d === item.fieldName;
});
if (currentIndex !== -1) {
this.rememberInputLists.splice(currentIndex, 1);
} else {
this.rememberInputLists.push(item.fieldName);
}
},
},
};
</script>
<style lang="scss">
.page-info {
display: flex;
align-items: center;
}
.flex-1 {
flex: 1;
}
.my-select {
margin-left: 20rpx;
}
.color-gray {
color: #cdcdcd;
}
.uni-forms-item {
margin-bottom: 10rpx !important;
// .uni-easyinput {
// text-align: right !important;
// }
}
.label-remember {
color: red;
// font-size: 18px;
}
.uni-forms-item__label {
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
font-size: 14px;
color: #606266;
min-height: 36px;
padding: 0 12px 0 0;
vertical-align: middle;
flex-shrink: 0;
box-sizing: border-box;
}
.is-required {
// color: $uni-color-error;
color: #dd524d;
font-weight: bold;
}
.checklist-box {
margin-right: 5rpx !important;
}
</style>
${windowHeight}px
}">
<view class="container">
<view style="display: flex; flex-wrap: wrap">
<!-- 导航区域 -->
<view :style="{ height: navBarHeight + 'px' }" class="w-100 navbars">
<view class="navbar w-100">
<view style="width: 30px" @click="goBack">
<image
src="leftImg"
class="navbarImg"
style="{ height: menuButtonHeight - 12 + 'px' }"
></image></view>
<view style="{ height: menuButtonHeight + 'px' }" class="navbarTitle"
>受检者信息</view
>
<view style="width: 14%"></view>
</view>
</view>
</view>
<!-- 内容区域 -->
<view
class="w-100 p-20 body" style="{ height:
${windowHeight - navBarHeight - 60}px
}"
><view class="p-20 btns-bg1 borders-radius">
<view class="p-20">
<view class="page-info" style="margin-bottom: 20rpx">
<view style="width: 90px">录入模板</view>
<zqsSelect list="templateList" placeholder="
请选择选择模板
"
title="'选择模板'"
v-model="personInfo.templateId"
disabled="!isAdd"
@change="getFormData"style="flex: 1" clearable="false" labelKey="templateName"
valueKey="templateId"
>
</zqsSelect>
<!-- <hpy-form-select
class="flex-1 my-select" dataList="templateList" text="templateName"
name="templateId"
v-model="personInfo.templateId"
title="选择模板"
@change="getFormData" disabled="!isAdd" clearable="false" >
</hpy-form-select> -->
</view>
<uni-forms ref="form" labelWidth="90px" style="margin-top: 20px">
<uni-forms-item label="item.showAlias || item.showName" key="item.fieldId" required="item.requiredFlag === '1'" v-for="item in formData"
>
<view slot="label">
<view
class="uni-forms-item__label"
style="width: 90px; justify-content: flex-start"
@click="itemLabelClickFn(item)"
>
<text v-if="item.requiredFlag === '1'" class="is-required"
>*</text
>
<text style="item.requiredFlag === '1' ? 'color:red' : ''" class="{ 'label-remember':
rememberInputLists.indexOf(item.fieldName) !== -1,
}"
>{{ item.showAlias || item.showName }}</text
>
</view>
</view>
<view
v-if="
item.htmlType === 'input' || item.htmlType === 'textarea'
"
>
<uni-easyinput ref="item.fieldName" v-if="item.fieldName === 'barcode'"
v-model="personInfo[item.fieldName]"
placeholder="请输入" type="item.htmlType" class="uni-mt-5"
suffixIcon="scan"
@iconClick="scanCode"
@blur="getHospitalByBarcodeFn" inputBorder="false"
disabled="!isAdd"
</uni-easyinput>
<uni-easyinput
ref="item.fieldName"
v-else-if="item.fieldName === 'courierNumber'"v-model="personInfo[item.fieldName]"
placeholder="请输入" type="item.htmlType" class="uni-mt-5"
suffixIcon="scan"
@iconClick="scanCourierNumber" inputBorder="false" ></uni-easyinput>
<uni-easyinput
v-else ref="item.fieldName" v-model="personInfo[item.fieldName]"
placeholder="请输入" type="item.htmlType" inputBorder="false" ></uni-easyinput>
</view>
<view v-if="item.htmlType === 'date'">
<uni-datetime-picker
v-if="item.fieldName === 'examineBirthday'" ref="item.fieldName" v-model="personInfo[item.fieldName]" type="item.htmlType" border="false" @change="examineBirthdayChange"
/>
<uni-datetime-picker
v-else ref="item.fieldName" v-model="personInfo[item.fieldName]" type="item.htmlType" border="false" />
</view>
<view v-if="item.htmlType === 'datetime'">
<uni-datetime-picker ref="item.fieldName" v-model="personInfo[item.fieldName]" type="item.htmlType" border="false" clear-icon="false" return-type="yyyy-mm-dd HH:mm:ss"
/>
</view>
<view
v-if="item.htmlType === 'select'"
style="
margin: auto;
height: 100%;
display: flex;
align-items: center;
flex: 1;
"
>
<view v-if="item.fieldName === 'hospitalId'">
<uni-easyinput ref="item.fieldName" v-model="personInfo.hospitalNm"
placeholder="请输入" type="item.htmlType" disabled="!isAdd" inputBorder="false" @focus="goHospital"
@clear="clearable"
></uni-easyinput>
</view>
<div v-else-if="item.fieldName === 'organizationNm'">
<uni-easyinput ref="item.fieldName" v-model="personInfo.organizationNm"
placeholder="请输入" type="item.htmlType" inputBorder="false" @focus.prevent="goOrganization"
></uni-easyinput>
</div>
<div v-else-if="item.fieldName === 'doctorNm'">
<uni-easyinput ref="item.fieldName" v-model="personInfo.doctorNm"
placeholder="请输入" type="item.htmlType" inputBorder="false" @focus.prevent="goDoctor"
></uni-easyinput>
</div>
<zqsSelect
v-else ref="item.fieldName" list="item.options" placeholder="
请选择${item.showAlias || item.showName}
"
title="请选择${item.showAlias || item.showName}
"
v-model="personInfo[item.fieldName]"
disabled="!isAdd"
style="flex: 1">
</zqsSelect>
</view>
</uni-forms-item>
</uni-forms>
</view>
</view>
<view style="display: flex; align-items: center" v-if="isAdd">
<uni-data-checkbox
multiple
v-model="checkbox" localdata="[ {
text: '请先阅读并同意',
value: false,
},
]"
></uni-data-checkbox>
<text @click="goPage" style="color: #00a6a8"> 用户协议</text>
</view>
</view>
<view class="btns btns-bg" v-if="isAdd">
<view class="btns-bg">
<button
style="border-width: 0"
class="btnBackground"
@click="getPersonInfo"
disabled="!checkbox.length"
确认
</button>
</view>
</view>
</view>
<!--顶部个人信息栏-->
</view>
</template>
<script>
import {
getTemplateList,
getConfigTemplateRelevanceList,
getSampleTypeList,
specimenCharacterList,
getDictData,
getDicBusinessRelationUserAgent,
// getHospitalList,
getHospitalByBarcode,
getHospitalBarcode,
getHospitalDept,
getHospitalDoctor,
getSell,
getAgent,
configKey,
} from "@/api/order.js";
import { toast } from "@/utils/common";
import zqsSelect from "@/components/zqs-select/zqs-select.vue";
import moment from "moment";
export default {
components: { zqsSelect },
data() {
return {
checkbox: [],
relationUserAgentStatus: "", //前端录入,根据字典值,获取销售和代理商选项
leftImg: require("@/static/images/left.png"),
navBarHeight: getApp().globalData.navBarHeight,
menuButtonHeight: getApp().globalData.menuButtonHeight,
hospitalList: [],
sampleTypeList: [],
specimenCharacterOpents: [],
user_sex: [],
certificate_type: [],
tumor_type: [],
acquisition_mode: [],
personInfo: {
barcode: "",
},
templateList: [],
doctorList: [],
deptList: [],
formData: [],
requiredArr: [],
rules: {},
isAdd: true,
allEadit: true,
hosChange: true,
rememberInputLists: [], //记忆功能
isBarcode: "",
user: {},
// 7模式用
salesId: "",
agentId: "",
sellList: [],
agentList: [],
};
},
computed: {
windowHeight() {
return uni.getSystemInfoSync().windowHeight;
},
},
created() {},
onLoad: function () {
this.user = this.$store.getters.user;
this.getconfigKey();
Promise.all([
this.getDictDataFn(),
this.initSelect(),
this.getTemplateListFn(),
getDicBusinessRelationUserAgent().then((res) => {
this.relationUserAgentStatus = res?.data?.[0]?.dictValue;
}),
]).then((res) => {
let pages = getCurrentPages();
// 上一页页面实例
let prevPage = pages[pages.length - 2];
// this.personInfo = prevPage?.$vm?.personInfo || {};
console.log(prevPage?.$vm?.personInfo);
// this.isAdd = prevPage?.$vm?.isAdd || false;
// this.allEadit = prevPage?.$vm?.allEadit || false;
// this.rememberInputLists = prevPage?.$vm?.rememberInputLists;
this.$set(this, "personInfo", prevPage?.$vm?.personInfo || {});
// this.getFormData();
if (this.isAdd && !this.personInfo.templateId) {
this.templateList.map((item) => {
if (item.defaultFlag === "0") {
// this.personInfo.templateId=item.templateId
this.$set(this.personInfo, "templateId", item.templateId);
}
});
}
this.getFormData();
});
},
onShow() {
this.user = this.$store.getters.user;
},
watch: {
hosChange() {
// 获取条码
if (this.isBarcode === "2") {
getHospitalBarcode({
hospitalId: this.personInfo.hospitalId,
}).then((res) => {
this.personInfo.barcode = res.msg;
});
}
},
"personInfo.hospitalId": function (hospitalId) {
if (hospitalId) {
this.getHospitalDoctorFn();
this.getHospitalDeptFn();
if (this.relationUserAgentStatus === "1") {
this.getSellFn({
hospitalId,
});
} else if (this.relationUserAgentStatus === "2") {
this.getAgentFn({
hospitalId,
});
} else if (this.relationUserAgentStatus === "3") {
this.getSellFn({
hospitalId,
});
this.getAgentFn({
hospitalId,
});
}
}
},
"personInfo.salesman": function (salesman) {
if (salesman) {
if (this.relationUserAgentStatus === "1") {
this.getAgentFn({
hospitalId: this.personInfo.hospitalId,
userName: salesman,
});
} else if (this.relationUserAgentStatus === "4") {
this.getAgentFn({
userName: salesman,
});
} else if (this.relationUserAgentStatus === "7") {
if (this.user.userType === "2") {
let obj = this.sellList.find((i) => i.nickName === salesman) || {};
this.salesId = obj.userId || this.user.userId;
this.getAgentFn({ userId: this.salesId });
}
}
} else {
if (this.relationUserAgentStatus === "1") {
this.personInfo.agentName = "";
} else if (this.relationUserAgentStatus === "4") {
this.personInfo.agentName = "";
} else if (this.relationUserAgentStatus === "7") {
this.salesId = "";
if (this.user.userType === "2") {
this.personInfo.agentName = "";
}
}
}
},
"personInfo.agentName": function (agentName) {
if (agentName) {
if (this.relationUserAgentStatus === "2") {
this.getSellFn({
hospitalId: this.personInfo.hospitalId,
agentLevelName: agentName,
});
} else if (this.relationUserAgentStatus === "5") {
this.getSellFn({
agentLevelName: agentName,
});
} else if (this.relationUserAgentStatus === "7") {
if (this.user.userType === "agent") {
let obj =
this.agentList.find((i) => i.agentLevelName === agentName) || {};
this.agentId = obj.agentId || this.user.userId;
this.getSellFn({
agentId: this.agentId,
});
}
}
} else {
if (this.relationUserAgentStatus === "2") {
this.personInfo.salesman = "";
} else if (this.relationUserAgentStatus === "5") {
this.personInfo.salesman = "";
} else if (this.relationUserAgentStatus === "7") {
this.agentId = "";
if (this.user.userType === "agent") {
this.personInfo.salesman = "";
}
}
}
},
},
methods: {
// 模板信息
getTemplateListFn() {
getTemplateList().then((res) => {
this.templateList = res.rows;
});
},
getconfigKey() {
configKey("enable_mini_deal").then((res) => {
this.checkbox = res.msg === "1" ? [false] : [];
});
configKey("sys.definition.barcode").then((res) => {
this.isBarcode = res.msg;
});
},
getFormData() {
if (!this.personInfo.templateId) {
return;
}
getConfigTemplateRelevanceList({
templateId: this.personInfo.templateId,
}).then((res) => {
this.formData = res.data || [];
this.initDom();
});
},
// 初始化表单和表单字段
initDom() {
this.requiredArr = [];
this.rules = {};
let personInfo = {};
this.formData.map((i) => {
if (i.requiredFlag === "1") {
this.requiredArr.push(i.fieldName);
this.rules[i.fieldName] = ${i.showAlias || i.showName}为必填字段
;
}
// 放入下拉选
// 送检医院
// if (i.fieldName === "hospitalId") {
// i.options = this.hospitalList;
// }
// 样本类型
if (i.fieldName === "specimenTypeId") {
i.options = this.sampleTypeList;
}
// 样本性状
if (i.fieldName === "specimenCharacterId") {
i.options = this.specimenCharacterOpents;
}
// 性别
if (i.fieldName === "examineGender") {
i.options = this.user_sex;
}
// 证件类型
if (i.fieldName === "certificateType") {
i.options = this.certificate_type;
}
// 肿瘤类型
if (i.fieldName === "tumorType") {
i.options = this.tumor_type;
}
// 采样模式
if (i.fieldName === "acquisitionMode") {
i.options = this.acquisition_mode;
}
//绑定字段初始化,新增时候才初始化
if (this.isAdd) {
personInfo[i.fieldName] =
this.personInfo[i.fieldName] || i.defaultValue;
}
if (i.htmlType === "datetime") {
personInfo[i.fieldName] = this.$moment(
i.defaultValue || new Date()
).format("YYYY-MM-DD HH:mm:ss");
}
});
if (this.relationUserAgentStatus === "7") {
if (this.user.userType === "2") {
// this.salesId = this.user.userId;
personInfo.salesman = this.user.userName;
} else if (this.user.userType === "agent") {
personInfo.agentName = this.user.username;
// this.agentId = this.user.userId;
}
}
// console.log(personInfo);
// 校验字段传上一页
// 获取所有页面栈实例列表
let pages = getCurrentPages();
// 上一页页面实例
let prevPage = pages[pages.length - 2];
// 修改上一页data里面的参数值
prevPage.$vm.requiredArr = this.requiredArr;
prevPage.$vm.rules = this.rules;
console.log(prevPage?.$vm?.personInfo);
this.isAdd = prevPage?.$vm?.isAdd || false;
this.allEadit = prevPage?.$vm?.allEadit || false;
this.rememberInputLists = prevPage?.$vm?.rememberInputLists;
this.personInfo = {
...personInfo,
...this.personInfo,
};
// if (templateId) {
// this.personInfo.templateId = templateId;
// }
this.$nextTick(() => {
if (this.relationUserAgentStatus === "4") {
this.getSellFn({});
} else if (this.relationUserAgentStatus === "5") {
this.getAgentFn({});
} else if (this.relationUserAgentStatus === "6") {
this.getSellFn({});
this.getAgentFn({});
} else if (this.relationUserAgentStatus === "7") {
// 销售和其他非代理商进来初始化要调销售接口
if (this.user.userType === "2") {
this.getSellFn({});
}
// 代理商和其他非销售进来初始化要调代理商接口
else if (this.user.userType === "agent") {
this.getAgentFn({});
} else {
this.getSellFn({});
this.getAgentFn({});
}
}
this.getHospitalDoctorFn();
this.getHospitalDeptFn();
});
},
// 初始化下拉选
async initSelect() {
await getSampleTypeList().then((res) => {
this.sampleTypeList = this.setOptions(
res.rows,
"sampleTypeName",
"sampleTypeId"
);
});
await specimenCharacterList({
t: {
enableFlag: "0",
},
}).then((res) => {
this.specimenCharacterOpents = this.setOptions(
res.rows,
"characterName",
"specimenCharacterId"
);
});
// getHospitalList().then((res) => {
// this.hospitalList = this.setOptions(
// res.rows,
// "hospitalName",
// "hospitalId"
// );
// });
},
// 获取所有字典项
getDictDataFn() {
getDictData("sys_user_sex").then((res) => {
this.user_sex = this.setOptions(res.data, "dictLabel", "dictValue");
});
getDictData("base_certificate_type").then((res) => {
this.certificate_type = this.setOptions(
res.data,
"dictLabel",
"dictValue"
);
});
getDictData("base_tumor_type").then((res) => {
this.tumor_type = this.setOptions(res.data, "dictLabel", "dictValue");
});
getDictData("base_acquisition_mode").then((res) => {
this.acquisition_mode = this.setOptions(
res.data,
"dictLabel",
"dictValue"
);
});
},
/** 获取销售数据 */
getSellFn(data) {
getSell(data).then((res) => {
let i = -1;
i = this.formData.findIndex((i) => i.fieldName === "salesman");
if (i !== -1) {
this.$set(
this.formData[i],
"options",
this.setOptions(res.data, "nickName", "nickName")
);
}
this.sellList = res.data;
if (!this.personInfo.recordId) {
const obj = res.data.find(
(item) =>
item.userName === this.$store.getters.user.userName &&
item.userId === this.$store.getters.user.userId
);
if (obj) this.$set(this.personInfo, "salesman", obj.nickName);
}
});
},
/** 获取代理商 */
getAgentFn(data) {
getAgent(data).then((res) => {
this.agentList = res.data;
const i = this.formData.findIndex((i) => i.fieldName === "agentName");
if (i !== -1) {
this.$set(
this.formData[i],
"options",
this.setOptions(res.data, "agentLevelName", "agentLevelName")
);
}
});
},
// 获取科室医生
getHospitalDoctorFn() {
// 医生
if (!this.personInfo.hospitalId) {
return;
}
getHospitalDoctor({
t: {
hospitalId: this.personInfo.hospitalId,
},
}).then((res) => {
this.doctorList = this.setOptions(res.rows, "doctorName", "doctorName");
// let obj = this.formData.find((i) => i.fieldName === "doctorNm") || {};
// obj.options = this.setOptions(res.rows, "doctorName", "doctorName");
});
},
getHospitalDeptFn() {
if (!this.personInfo.hospitalId) {
return;
}
// 科室
getHospitalDept({
t: {
hospitalId: this.personInfo.hospitalId,
},
}).then((res) => {
this.deptList = this.setOptions(res.rows, "name", "name");
// let obj =
// this.formData.find((i) => i.fieldName === "organizationNm") || {};
// obj.options = this.setOptions(res.rows, "name", "name");
});
},
// 下拉选格式化方法
setOptions(data, label, key) {
data.forEach((item) => {
item.optionName = item[label];
item.optionId = item[key];
});
return data || [];
},
goHospital() {
if (this.relationUserAgentStatus === "7") {
if (this.user.userType === "2") {
// 销售带id查询
this.$tab.navigateTo("/pages/order/hospital?userId=" + this.salesId);
} else if (this.user.userType === "agent") {
// 代理商带agentId查询
this.$tab.navigateTo("/pages/order/hospital?agentId=" + this.agentId);
} else {
this.$tab.navigateTo("/pages/order/hospital");
}
} else {
this.$tab.navigateTo("/pages/order/hospital");
}
},
goDoctor() {
this.$tab.navigateTo("/pages/order/doctor");
},
goOrganization() {
this.$tab.navigateTo("/pages/order/organization");
},
// 扫描二维码
scanCode() {
if (this.isAdd) {
uni.scanCode({
scanType: ["barcode", "qrCode"],
success: (res) => {
// this.personInfo.barcode = res.result;
this.$set(this.personInfo, "barcode", res.result);
this.getHospitalByBarcodeFn();
},
fail: (err) => {
this.$modal.msgError("扫码失败");
},
});
}
},
scanCourierNumber() {
if (this.isAdd) {
uni.scanCode({
scanType: ["barcode", "qrCode"],
success: (res) => {
this.$set(this.personInfo, "courierNumber", res.result);
},
fail: (err) => {
this.$modal.msgError("扫码失败");
},
});
}
},
getHospitalByBarcodeFn() {
if (this.isBarcode != 2) return;
if (this.isBarcode == 2 && this.personInfo.barcode.length !== 12) {
toast("条形码输入有误");
return;
}
this.$set(this.personInfo, "hospitalId", "");
this.$set(this.personInfo, "hospitalNm", "");
if (this.personInfo.barcode) {
getHospitalByBarcode({
bybarcode: this.personInfo.barcode,
})
.then((res) => {
this.$set(this.personInfo, "hospitalId", res.data.id || "");
this.$set(
this.personInfo,
"hospitalNm",
res.data.hospitalName || ""
);
})
.catch((err) => {
this.$set(this.personInfo, "barcode", "");
});
}
},
checked() {
let falg = false;
for (let i = 0; i < this.requiredArr.length; i++) {
const item = this.requiredArr[i];
if (!this.personInfo[item]) {
falg = true;
this.$modal.msgError(this.rules[item]);
break;
}
}
return falg;
},
getPersonInfo() {
if (!this.personInfo.templateId) {
this.$modal.msgError("请先选择录入模板");
return;
}
if (this.checked()) {
return;
}
// 获取所有页面栈实例列表
let pages = getCurrentPages();
// 上一页页面实例
let prevPage = pages[pages.length - 2];
// 修改上一页data里面的times参数值为100
prevPage.$vm.personInfo = this.personInfo;
prevPage.$vm.rememberInputLists = this.rememberInputLists;
this.goBack();
},
goBack() {
this.$tab.navigateBack();
},
goPage() {
this.$tab.navigateTo("/pages/order/agreement");
},
clearable() {
this.$set(this.personInfo, "hospitalId", "");
this.$set(this.personInfo, "hospitalNm", "");
this.$set(this.personInfo, "barcode", "");
},
// 受检人生日改变
examineBirthdayChange(val) {
if (!val) {
this.$set(this.personInfo, "age", "");
this.$set(this.personInfo, "examineBrithYear", "");
this.$set(this.personInfo, "examineBrithMonth", "");
this.$set(this.personInfo, "examineBrithDay", "");
} else {
const duration = moment.duration(moment().add(1, "days").diff(val));
const years = duration.years();
const months = duration.months();
const days = duration.days();
this.$set(this.personInfo, "age", `${years}`);
this.$set(this.personInfo, "examineBrithYear", `${years}`);
this.$set(this.personInfo, "examineBrithMonth", `${months}`);
this.$set(this.personInfo, "examineBrithDay", `${days}`);
}
},
/**
* 点击字段label 字段记忆功能
*/
itemLabelClickFn(item) {
// isRemenberPage 当前页面使用此组件 是否有记忆功能
// if (!this.isRemenberPage) return;
// 不存在记忆功能的字段 return
if (!(item.memoryFlag === "1") || item.fieldName === "specimenTypeId")
return;
// 如果记忆字段组成的数组中存在当前字段 则移除记忆字段
const currentIndex = this.rememberInputLists.findIndex((d) => {
return d === item.fieldName;
});
if (currentIndex !== -1) {
this.rememberInputLists.splice(currentIndex, 1);
} else {
this.rememberInputLists.push(item.fieldName);
}
},
},
};
</script>
<style lang="scss">
.page-info {
display: flex;
align-items: center;
}
.flex-1 {
flex: 1;
}
.my-select {
margin-left: 20rpx;
}
.color-gray {
color: #cdcdcd;
}
.uni-forms-item {
margin-bottom: 10rpx !important;
// .uni-easyinput {
// text-align: right !important;
// }
}
.label-remember {
color: red;
// font-size: 18px;
}
.uni-forms-item__label {
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
font-size: 14px;
color: #606266;
min-height: 36px;
padding: 0 12px 0 0;
vertical-align: middle;
flex-shrink: 0;
box-sizing: border-box;
}
.is-required {
// color: $uni-color-error;
color: #dd524d;
font-weight: bold;
}
.checklist-box {
margin-right: 5rpx !important;
}
</style>
bug描述:
苹果手机偶先问题,输入框内文字有严重错位
