vue3下拉树（单选） 输入框显示父级和子级 列表的用途联动西药名称

因为这功能比较复杂 为了页面更加美观 所以用弹窗的形式展现下拉树
列表输入框形式
html
代码如下

  <el-table-column prop="yt1" label="用途">
            <template #default="scope">
              <el-input v-model="scope.row.yt1" readonly autocomplete="off" @click="ytclick(scope.$index)"
                placeholder="请输入用途">
              </el-input>
            </template>
          </el-table-column>

ytclick打开弹窗方法

 <!-- 用途树弹窗 -->
    <el-dialog v-model="ytdialogVisible" title="选择用途" draggable width="30%" center>
      <el-tree :data="datayt" :props="sjcddefaultProps" @node-click="handleNodeClick" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="ytdialogVisible = false">取消</el-button>
          <el-button type="primary" @click="ytconfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>

配置树结构

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

 <el-table-column prop="yymc" label="用药名称" width="200">
            <template #default="scope">
              <el-form-item prop="yymc">
                <el-input @click="ypmcClick(scope.$index)" readonly v-model="scope.row.yymc" placeholder="请输入用药名称"></el-input>
              </el-form-item>
            </template>
          </el-table-column>

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);
  }
}

西药列表弹窗页面（单选药名）

  <!-- 选择药名 -->
    <el-dialog v-model="ymDialogVisible" title="请选择" draggable width="60%" destroy-on-close center>
      <div class="row">
        <div class="ymdiv" @click="ymClick(item, index)" v-for="(item, index) in ymList" :key="index">
          {{ item.ym }}
          <el-icon color="#FF0000" v-if="clickYmIndex == index"><Select /></el-icon>
        </div>
        <div class="ymdiv" @click="qtClick">其他
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="ymDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="ymconfirm">确 定</el-button>
        </span>
      </template>
    </el-dialog>

点击药名事件

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;//点其他项时打勾样式不显示
}

其他药名输入框弹窗代码

 <!-- 其他药名 -->
    <el-dialog v-model="qtdialogVisible" title="选择药名" draggable width="30%" center>
      <el-input v-model="qtvalue" @change="qtValueChange"></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="qtdialogVisible = false">取消</el-button>
          <el-button type="primary" @click="qtymconfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>

获取值

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
  };
  }