关于目录树(HeyUI 里的Tree),查询出来绑定上,显示出来

图片描述
步骤是, 选择日期, 点击查询, 获取到后端信息, 绑定到左下 XXXX: 地方是个目录树, 现在是空的, 帮获取到的数值 显示出来。

一直没有成功, 刷新也不行, 一直log 出来 datas 的数组是空的。
下面附代码, 麻烦大佬们, 给点思路
UI 组件用的是 HeyUI

<template>
  <div v-padding="10">
    <div class="collapseContent" v-padding="10">
      <span>
        日期选择:
        <DatePicker v-model="querySearch.dateSelection" placeholder="选择日期"></DatePicker>
      </span>
      <Button color="primary" @click="startQuery">查询</Button>
    </div>
    <div style="margin-top:10px;">
      <div
        class="collapseContent"
        style="width:19.8%; height:350px; overflow:auto; margin-top:10px; display:inline-block;"
      >
        <div style="font-size:18px;">XXXX:</div>
        <Tree :option="param" ref="demo" v-model="transferDeptId"></Tree>
        <!-- <Tree
          v-model="transferDeptId"
          :option="treePickerConfig"
          ref="treepicker"
          style="width:200px; margin-top:5px;"
        /> -->
      </div>
      <div style="width:79%; margin-top:10px; float:right;">
        <pager-grid
          ref="pagergrid1"
          gridName="pagergrid1"
          :selectionMode="selectionMode"
          :headerInfos="headerInfos"
          :filter="filter"
          :className="className"
          :requireInitData="false"
        />
      </div>
    </div>
  </div>
</template>
<script>
// 引入模板
import PagerGrid from "../../common/pagergrid";
// import Wijmo
import { DataMap } from "wijmo/wijmo.grid";
// 引入数据模型
import Resume from "../../../js/model/recruit/Resume";
export default {
  data() {
    return {
      querySearch: {
        dateSelection: null // 日期选择
      },
      toggleOnSelect: true,
      transferDeptId: null,
      treePickerConfig: {
        keyName: "deptId",
        titleName: "deptName",
        parentName: "parentId",
        dataMode: "tree",
        datas: this.startQuery
      },
      resume: Resume.parse({}),
      selectionMode: "CellRange",
      filter: null,
      className: "Resume",
      headerInfos: [
        { binding: "applyerName", header: "姓名", width: 160 },
        { binding: "applyerId", header: "工号", width: 160 },
        { binding: "gender", header: "性别", width: 160 },
        { binding: "snCardId", header: "身份证号", width: 160 }
      ],
      // // 获取到的部门编号存放
      treeDatas: [],
      // 获取到的部门完整信息存放
      projectId: this.$route.query.projectId,
      param: {
        keyName: 'deptId',
        titleName: 'deptName',
        parentName: 'deptId',
        dataMode: 'tree',
        datas: this.treeDatas
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 点击查询
    startQuery: async function(item) {
      let qeryData = {};
      if (!this.querySearch.dateSelection) {
        this.$Message.error("请选择日期后再查询!");
        return;
      }
      if (this.querySearch.dateSelection) {
        qeryData.validDate = this.querySearch.dateSelection;
      }
      // 获取 日期时间内 班组及人员信息
      let resp = await R.JobNumberTeamCrew.finddirAll({
        where: qeryData,
        projectId: this.projectId
      });
      let deptIds = [];
      if (resp.ok) {
        log(resp.data)
        resp.data.map(r => {
          deptIds.push(r.deptId);
        });
      }
      log("-----------")
      // 通过deptId 获取部门名称
      this.treeDatas = [];
      R.Dept.findAll({
        where: { deptId: deptIds }
      }).then(resp2 => {
        if (resp2.ok) {
        this.treeDatas.push(...resp2.data);
        }
      })
      log(this.treeDatas);
      this.$refs.demo.refresh();
    },
    init: async function() {
      this.grid1 = this.$refs.pagergrid1.gridControl;
      let genderMap = new DataMap(HeyUI.getDict("gender"), "key", "title");
      if (this.grid1) {
        this.grid1.columns.getColumn("gender").dataMap = genderMap;
      }
    }
  },
  computed: {},
  components: {
    PagerGrid
  }
};
</script>
阅读 1.7k
1 个回答

我也是用了半天出不来。。试了下异步加载所有树才行
把datas改成getTotalDatas

getTotalDatas: (resolve) => {
          setTimeout(() => {
            // param中的dataMode同~~~~样对这里的数据有效
            resolve(this.treelist);
          }, 1000);
        }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题