|
@@ -0,0 +1,121 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog :title="reciveForm.title" width="500px" :close-on-click-modal="false" :append-to-body="true" v-dialogDrag
|
|
|
+ class="userDialog" :visible.sync="visible">
|
|
|
+ <el-container style="height: 500px">
|
|
|
+ <el-container>
|
|
|
+ <el-main>
|
|
|
+ <el-row :gutter="24" class="content">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-input placeholder="输入关键字进行过滤" size="small" v-model="filterText" style="margin-bottom: 16px">
|
|
|
+ </el-input>
|
|
|
+
|
|
|
+ <el-tree class="filter-tree" :data="threedata" :props="defaultProps" accordion node-key="id"
|
|
|
+ highlight-current @node-click="clickTree" :filter-node-method="filterNode" ref="tree">
|
|
|
+ <span slot-scope="{ node, data }">
|
|
|
+ {{ data.code }}{{ data.name }}
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </el-container>
|
|
|
+ <span slot="footer">
|
|
|
+ <el-button size="small" @click="visible = false" icon="el-icon-circle-close">关闭</el-button>
|
|
|
+ <el-button size="small" type="primary" icon="el-icon-circle-check" @click="doSubmit()">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getRefer } from '@/api/purchase/basic'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ visible: false,
|
|
|
+ filterText: "",
|
|
|
+ threedata: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "name",
|
|
|
+ },
|
|
|
+ // 判断是否为最末级节点
|
|
|
+ // isLast: false,
|
|
|
+ // 选中的节点
|
|
|
+ choosePoint: {},
|
|
|
+ // 接收的参数
|
|
|
+ reciveForm: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {},
|
|
|
+ watch: {
|
|
|
+ filterText(val) {
|
|
|
+ this.$refs.tree.filter(val);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init(val) {
|
|
|
+ this.visible = true;
|
|
|
+ this.filterText = ''
|
|
|
+ this.reciveForm = val
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.refreshList();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取数据列表
|
|
|
+ refreshList(data) {
|
|
|
+ this.loading = true;
|
|
|
+ let params = this.reciveForm
|
|
|
+ getRefer(params).then((res) => {
|
|
|
+ console.log("res", res);
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.threedata = res.rows
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clickTree(data) {
|
|
|
+ console.log("树形节点信息:", data);
|
|
|
+ this.choosePoint = data;
|
|
|
+ // console.log('查看打勾的',this.$refs.tree.getCheckedNodes())
|
|
|
+ // this.choosePoint = this.$refs.tree.getCheckedNodes()
|
|
|
+ },
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true;
|
|
|
+ return data.name.indexOf(value) !== -1;
|
|
|
+ },
|
|
|
+ doSubmit() {
|
|
|
+ console.log("子组件选择的数据", this.choosePoint);
|
|
|
+ this.$emit("doSubmit", this.choosePoint);
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ loadNode(node, resolve) {
|
|
|
+ console.log("node, resolve", node, resolve);
|
|
|
+ // if (!node.data.length)
|
|
|
+ // resolve(node.data.childrens.sort((a, b) => a.code - b.code));
|
|
|
+ // else resolve(this.threedata);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.userDialog {
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 10px 0px 0px 10px;
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-main {
|
|
|
+ padding: 20px 20px 5px 20px;
|
|
|
+
|
|
|
+ .el-pagination {
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|