vue3下拉树（单选） 输入框显示父级和子级 列表的用途联动西药名称
因为这功能比较复杂 为了页面更加美观 所以用弹窗的形式展现下拉树
列表输入框形式
html
代码如下
ytclick打开弹窗方法
配置树结构
const sjcddefaultProps = {
children: 'children',
label: "mc",
};
用途树的点击事件如下
const e = ref({})
function handleNodeClick(item, ee) {
ytId.value = item.id
e.value = ee;
//清空id 这样选择用途去查询西药时就不会出现显示原来的数据
xyList.value[ytIndex.value].yt2Id = ""
xyList.value[ytIndex.value].yt1Id = ""
}
//用途树弹窗内容确定按钮
function ytconfirm() {
if (e.value.parent.data.mc) {//如果是有父级则yt1就拼接显示，并且赋值给 xyList.value[ytIndex.value].yt1
xyList.value[ytIndex.value].yt1 = e.value.parent.data.mc + "/" + e.value.data.mc
} else {//yt1直接是 e.value.data.mc
xyList.value[ytIndex.value].yt1 = e.value.data.mc
}
ytdialogVisible.value = false
}
页面展示
接下来是列表的用药名称 也就是选择西药
html
ypmcClick 打开西药弹窗页面的事件
//列表的用药名称点击事件
function ypmcClick(index) {
//查询西药时用到的ytid 可能是下面三种情况
ytId.value = xyList.value[index].yt2Id || xyList.value[index].yt1Id || ytId.value
clickIndex.value = index;
ymDialogVisible.value = true;
ymList.value = [];
loadXyList()
}
获取西药列表接口
//获取西药列表
async function loadXyList() {
const { data: res } = await proxy.$postRequest("接口地址", { ytId: ytId.value });
if (res.status == 200) {
res.data.forEach((item) => {
ymList.value.push({ ym: item });
});
ymList2 = [...res.data,...ymList2]//ymList2为了不改变ymList的值所以重新定义一个新的变量
const i = res.data.indexOf(xyList.value[clickIndex.value].yymc);//回显打勾样式
clickYmIndex.value = i
} else {
proxy.$message.error(res.msg);
}
}
西药列表弹窗页面（单选药名）
{{ item.ym }}
点击药名事件
function ymClick(item, index) {
xyList.value[ytIndex.value].sfqty = "N"//是否是其他药名
clickYmIndex.value = index;//下标
}
展示药名页面截图
点击西药选择确定按钮
//选择西药的确定按钮
function ymconfirm() {
//如果打勾才赋值给外面的列表
if (clickYmIndex.value) {
xyList.value[clickIndex.value].yymc = ymList.value[clickYmIndex.value].ym;
}
ymDialogVisible.value = false;
}
页面有个其他项 弹窗输入 如下弹窗打开事件
//用药名称点击其他项的点击事件
function qtClick() {
qtdialogVisible.value = true;
xyList.value[ytIndex.value].sfqty = "Y"//是其他项sfqty为y
qtvalue.value = xyList.value[clickIndex.value].yymc//修改时渲染其他项的内容数据
clickYmIndex.value = -1;//点其他项时打勾样式不显示
}
其他药名输入框弹窗代码
获取值
function qtValueChange(val) {
qtvalue.value = val;
}
其他药名确定按钮
//用药名称的其他项确定按钮
function qtymconfirm() {
xyList.value[clickIndex.value].yymc = qtvalue.value//点击确定赋值给列表的用药名称
ymDialogVisible.value = false;
qtdialogVisible.value = false;
qtvalue.value = "";
}
页面截图如下
查询用途树 显示父级和子级
//根据ID获取要修改的信息
async function getUpdateXyjczljlById(row) {
const { data: res } = await proxy.$postRequest(
"接口地址",
{
id: row.id,
}
);
if (res.status == 200) {
xyjczlForm.value.zlsj = res.data.zlsj;
xyList.value = res.data.xyList;
//渲染时如果yt2有数据，则yt1渲染成item.yt1 + "/" + item.yt2
xyList.value.forEach(item => {
if (item.yt2)
item.yt1 = item.yt1 + "/" + item.yt2
})
} else {
proxy.$message.error(res.msg);
}
}
最终上传确定按钮
function confirm() {
//深拷贝，复制xyList.value，不改变原数组
let aar = JSON.parse(JSON.stringify(xyList.value))
let flag = false;
//点击确定才赋值到相应位置yt1，yt2
aar.forEach(i => {
//ymfilter 是有数据的话就是有西药，为[]则是其他药
let ymfilter = ymList2.filter((item) => item == i.yymc);
if (ymfilter.length > 0) {
i.sfqty = "N";
} else {
i.sfqty = "Y";
}
const yt = i.yt1.split("/");
//校验用途不能为空
if (yt.length == 0 || yt[0] == "") {
proxy.$message.error("用途不能为空！");
flag = true
return
} else if (yt.length == 1) {
//yt.length == 1 ，yt1就是取值第一项
i.yt1 = yt[0]
i.yt2 = ""
} else {
//yt1取值第一项 ，yt2取值第二项
i.yt1 = yt[0]
i.yt2 = yt[1]
}
if (i.yymc == "") {
proxy.$message.error("用药名称不能为空！");
flag = true
return
}
if (i.yljyf == "") {
proxy.$message.error("用量及用法不能为空！");
flag = true
return
}
})
if (flag) return
// arrData 要传的值
let arrData = {
id: xyjczlForm.value.id,
mzh: xyjczlForm.value.mzh,
zlsj: xyjczlForm.value.zlsj,
xyList: aar
};
}