saber/src/views/manager/projectinfo/qutediaolog/relation.vue

<template>

    <el-dialog
        title="关联清表"
        :visible.sync="GLExcel"
        append-to-body
        destroy-on-close

        @close="GLExcelMD"
          width="800px"
        >
        <div>
            <el-select
            style="width: 400px"
            v-model="GLExcelFrom.name"
            placeholder="请选择"
            @change="changetherr()"
            >
            <el-option
                v-for="(item, key) in GLExcelData"
                :key="key"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
            </el-select>
            <el-scrollbar style="margin-top: 20px; height: 50vh">
            <el-input
                style="width: 400px"
                v-model.trim="GLExcelFrom.search"
                placeholder="请输入需要选择的内容"
            ></el-input>
            <el-tree
                :filter-node-method="filterNode222"
                ref="tree"
                class="filter-tree"
                style="margin-top: 10px"
                :props="GLExcelProps"
                :data="exceldata"
                node-key="id"
                accordion
                show-checkbox
                @check="checkchange"
                v-loading="GLExcelLoading"
            >
            </el-tree>
            </el-scrollbar>
        </div>
        <span
            slot="footer"
            class="dialog-footer"
            style="display: flex; justify-content: center; align-items: center"
        >
            <el-button @click="GLExcelMD()">取 消</el-button>
            <el-button
            style="margin-left: 30px"
            type="primary"
            v-throttle="2000"
            @click="saveLinkTab()"
            >确 定</el-button
            >
        </span>
              <!-- 编辑元素 -->
        <el-dialog
        title="　"
        :visible.sync="editElementVisible"
        fullscreen
        append-to-body
        class="full-dialog"
        >
        <EditElement
            :pkeyId="editElementQuery.pkeyId"
            :excelId="editElementQuery.excelId"
            :id="editElementQuery.id"
            :initTableName="editElementQuery.initTableName"
            :initTableId="editElementQuery.initTableId"
            :pid="editElementQuery.pid"
            :wbsid="editElementQuery.wbsid"
            :nodeid="editElementQuery.nodeid"
            @hideDialog="editElementVisible = false"
            v-if="editElementVisible"
            :globaltype='1'
            :elementType="true"
        ></EditElement>
        </el-dialog>
        </el-dialog>

</template>

<script>
import {getList,tabLazytreeAll,saveLinkTab, getExcelHtml,} from "@/api/exctab/excelmodel";
import EditElement from "@/views/manager/projectinfo/editElement/editElement.vue";
import {findNodeTableByCondition as selectByNodeTable} from "@/api/manager/wbsprivate";
export default {
    props:{
        GLExcelFrom:Object,
        onLoad1:Function,
        refreshTree:Function
    },
    components:{EditElement},
    data(){
        return{
            GLExcel:false,
            // GLExcelFrom: {
            //     id: "",
            //     name: "",
            //     search: "", //搜素框舒服的值
            //     ids: "",
            //     excelId: "",
            //     initTableName: "",
            // },
            editElementQuery: {
                pkeyId: "",
                excelId: "",
                id: "",
                initTableName: "",
                pid: "",
                wbsid: "",
                nodeid: "",
            },
            exceldata: [], //清表模板
            GLExcelData: [], //
            GLExcelLoading: false,
            editElementVisible: false, //编辑元素弹框
            GLExcelProps: {
                label: "name",
                children: "children",
                disabled: "hasChildren",
                isLeaf: function (data) {
                let tag = false;
                if (!data.hasChildren) {
                    tag = true;
                }
                if (data.isExistForm == 1) {
                    tag = true;
                }
                return tag;
                },
            },
        }
    },
     watch: {
        "GLExcelFrom.search"(val) {
        console.log(val);
        if (this.exceldata) {
            this.$refs.tree.filter(val);
        }
        },
    },
    methods:{
            show(){
                this.GLExcel=true;
                console.log(this.GLExcel,'GLExcel');
                console.log(this.GLExcelFrom,'GLExcelFrom');
                this.getList({
                    current: 1,
                    size: 100000,
                    parentId: 0,
                });
                setTimeout(() => {
                    this.$refs.tree.setCheckedKeys([this.GLExcelFrom.excelId]);
                }, 2000);
            },
           GLExcelMD() {
                //弹框关闭事件
                this.GLExcelFrom.name = "";
                this.GLExcelFrom.search = "";
                this.GLExcelFrom.id = "";
                this.exceldata = [];
                this.$refs.tree.setCheckedKeys([]);
                this.GLExcel = false;
            },
            async tabLazytreeAll() {
                //清表树信息
                this.GLExcelLoading = true;
                const { data: res } = await tabLazytreeAll({
                    modeId: this.GLExcelFrom.name,
                    name: this.GLExcelFrom.search,
                });
                this.GLExcelLoading = false;
                console.log(res);
                if (res.code === 200 && res.msg === "操作成功") {
                    this.exceldata = res.data;
             }
            },
            changetherr() {
                //清表类型选择框change事件
                if (this.GLExcelFrom.name != "") {
                    this.GLExcelFrom.search = "";
                    this.tabLazytreeAll();
                }
            },
                   //#region 关联清表
            async getList(da) {
                //获取清表模板信息
                const { data: res } = await getList(da);
                console.log(res);
                if (res.code === 200 && res.msg === "操作成功") {
                    this.GLExcelData = res.data.records;
                }
            },
            filterNode222(value, data) {
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            checkchange(data) {
                //节点选中回调
                if (this.$refs.tree.getCheckedNodes().length === 0) {
                    this.$refs.tree.setCheckedKeys([]);
                } else if (this.$refs.tree.getCheckedNodes().length >= 1) {
                    this.$refs.tree.setCheckedKeys([data.id]);
                }
            },
            async getExcelHtml2(pkeyId) {
                    const { data: res } = await getExcelHtml({ pkeyId });
                    console.log(res);
                    if (res.code === 200) {
                        localStorage.setItem("editElement", res.data);
                    }
                },
                //#region 编辑元素
            async rightClick(pkeyId, excelId, id, initTableName,initTableId,nodeid) {
                await this.getExcelHtml2(pkeyId);
                this.editElementQuery.pkeyId = pkeyId;
                this.editElementQuery.excelId = excelId;
                this.editElementQuery.id = id;
                this.editElementQuery.initTableName = initTableName;
                this.editElementQuery.pid = this.$route.query.pid;
                this.editElementQuery.wbsid = this.$route.query.wbsid;
                this.editElementQuery.initTableId = initTableId;
                this.editElementQuery.nodeid =nodeid;

                this.editElementVisible = true;
            },
             updateNodeTable() {
                // selectByNodeTable(this.curTreeData.id, this.projectid, this.id).then(
                //     (res) => {
                //     if (res.data.data.length) {
                //         this.formData = res.data.data;
                //     } else {
                //         this.formData = [];
                //     }
                //     }
                // );
            },
            async saveLinkTab() {
                //保存按钮
                let checkNodes = this.$refs.tree.getCheckedNodes();
                if (checkNodes.length > 0) {
                    let node = checkNodes[checkNodes.length - 1];
                    if (node.fileType != 3) {
                    this.$message({
                        type: "warning",
                        message: "请先上传Excel表",
                    });
                    return;
                    }
                    console.log(node.id,'node.id');
                    console.log(this.GLExcelFrom.id,'this.GLExcelFrom.id');
                    const { data: res } = await saveLinkTab({
                    exceTabId: node.id,
                    tabId: this.GLExcelFrom.id
                    });
                    console.log(res);
                    if (res.code === 200) {
                    this.$message({
                        type: "success",
                        message: "关联清表成功",
                    });
                    // selectByNodeTable刷新表单列表
                    this.onLoad1();
                    this.refreshTree()
                    this.GLExcel = false;
                    this.rightClick(
                        this.GLExcelFrom.id,
                        this.GLExcelFrom.excelId,
                        this.GLExcelFrom.ids,
                        this.GLExcelFrom.initTableName,
                        this.GLExcelFrom.initTableId,
                        this.GLExcelFrom.nodeid 
                    );
                    }
                } else {
                    this.$message({
                    type: "warning",
                    message: "请先设置清表",
                    });
                }
            },

    }
}
</script>

<style scoped lang="scss">
.excelBox {
  /deep/.el-dialog__body {
    padding: 20px;
  }
}
</style>