Smart_platform_ui/src/components/warehousKH/main.vue

<template>
    <div>
        <div style="display: flex;">
            <el-select v-model="value" placeholder="请选择" filterable clearable allow-create default-first-option
                @input="$emit('balabala', value)" @change="getKeyId(value)" :disabled="disabled">
                <template v-if="zhKey">
                    <el-option v-for="item in corpList" :key="item.id" :label="item.cname" :value="item.cname">
                    </el-option>
                </template>
                <template v-else>
                    <el-option v-for="item in corpList" :key="item.cname" :label="item.cname" :value="item.id">
                    </el-option>
                </template>
            </el-select>
            <el-button icon="el-icon-search" size="mini" v-if="label != 'shortName'" :disabled="disabled"
                @click="openDialog()"></el-button>
            <el-tooltip class="item" effect="dark" content="获取最新客户资料" placement="top-start">
                <el-button icon="el-icon-refresh" size="mini" v-if="label != 'shortName'" @click="refreshData"
                    style="margin-left:0px;"></el-button>
            </el-tooltip>
        </div>
        <el-dialog :title="title" :visible.sync="corpVisible" width="80%" top="5vh" append-to-body @closed="closed"
            class="el-dialogDeep" :close-on-click-modal="false" v-dialog-drag>
            <span>
                <el-row>
                    <el-col :span="4">
                        <el-scrollbar>
                            <basic-container>
                                <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"
                                    :style="treeStyle" />
                            </basic-container>
                        </el-scrollbar>
                    </el-col>
                    <el-col :span="20">
                        <avue-crud :option="tableOption" :data="data" ref="crud" v-model="form" :page.sync="page"
                            :search.sync="search" @search-change="searchChange" @search-reset="searchReset"
                            @selection-change="selectionChange" @on-load="onLoad" @tree-load="treeLoad"
                            @saveColumn="saveColumn" @resetColumn="resetColumn" @refresh-change="refreshChange"
                            :table-loading="loading">
                        </avue-crud>
                    </el-col>
                </el-row>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="corpVisible = false">取 消</el-button>
                <el-button type="primary" @click="importCorp" :disabled="!multiple && selectionList.length != 1">确 定
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import option from "./configuration/mainList.json";
import { customerList, allCropList, getDeptLazyTree } from "@/api/basicData/customerInformation";
import { getCustomerCode, getCustomerName } from "@/enums/management-type";
import { kMaxLength } from "buffer";
export default {
    name: "main",
    data() {
        return {
            form: {},
            loading: false,
            corpList: [],
            data: [],
            tableOption: {},
            search: {},
            treeDeptId: "",
            treeDeptName: "",
            page: {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                pageSizes: [10, 50, 100, 200, 300, 400, 500, 1000]
            },
            treeOption: {
                nodeKey: "id",
                lazy: true,
                addBtn: false,
                menu: false,
                size: "small",
                props: {
                    labelText: "标题",
                    label: "title",
                    value: "value",
                    children: "children"
                }
            },
            corpVisible: false,
            selectionList: [],
            title: null,
            treeStyle: "height:" + (window.innerHeight - 315) + "px"
        };
    },
    props: {
        value: String,
        disabled: Boolean,
        zhKey: Boolean,
        slot: Boolean,
        cropIndex: Number,
        corpType: String,
        multiple: Boolean,
        collapseTags: Boolean,
        gysType: String,
        treeType: String,
        label: String,
        belongtocompany: Number,
    },
    model: {
        prop: "value",
        event: "balabala"
    },
    async created() {
        this.tableOption = await this.getColumnData(this.getColumnName(51), option);
            this.title = getCustomerName(this.corpType);
        this.getCorpList()
    },
    methods: {
        init() {
            this.openDialog();
        },
        getCorpList() {
            let userObj = JSON.parse(localStorage.getItem("saber-userInfo")).content;
            allCropList({ corpType: 'KH', adminProfiles: userObj.role_name != "admin" ? userObj.user_id : null }).then(res => {
                this.corpList = res.data.data;
            });
        },
        refreshData() {
            this.getCorpList()
        },
        openDialog() {
            let _this = this;
            this.treeOption.treeLoad = function (node, resolve) {
                const parentId = node.level === 0 ? 0 : node.data.id;
                getDeptLazyTree({
                    parentId: parentId,
                    corpType: getCustomerCode(_this.corpType),
                    cname: _this.treeType == "CK" ? "货代和物流" : null
                }).then(res => {
                    resolve(
                        res.data.data.map(item => {
                            return {
                                ...item,
                                leaf: !item.hasChildren
                            };
                        })
                    );
                });
            };
            this.corpVisible = true;
        },
        closed() {
            this.$refs.crud.toggleSelection();
        },
        importCorp() {
            if (this.multiple && this.selectionList.length == 0) return this.$message.error('请选择明细')
            if (this.zhKey) {
                this.$emit("balabala", this.selectionList[0].cname);
                this.corpVisible = false;
            } else {
                this.$emit("balabala", this.selectionList[0].id);
                this.corpVisible = false;
            }

        },
        refreshChange() {
            this.onLoad(this.page, this.search);
        },
        onLoad(page, params = { parentId: 0 }) {
            let userObj = JSON.parse(localStorage.getItem("saber-userInfo")).content;
            let queryParams = Object.assign({}, params, {
                size: page.pageSize,
                current: page.currentPage,
                corpsTypeId: this.treeDeptId,
                corpType: getCustomerCode(this.corpType),
                adminProfiles: userObj.role_name != "admin" ? userObj.user_id : null,
                corpsTypeName: this.treeType == "CK" ? "货代和物流" : null,
                belongtocompany: this.belongtocompany
            });
            this.loading = true;
            customerList(queryParams)
                .then(res => {
                    this.data = res.data.data.records;
                    this.page.total = res.data.data.total;
                    if (this.page.total) {
                        this.tableOption.height = window.innerHeight - 350;
                    }
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        selectionChange(list) {
            this.selectionList = list;
        },
        sizeChange(val) {
            this.page.pageSize = val;
            this.onLoad();
        },
        currentChange(val) {
            this.page.currentPage = val;
            this.onLoad();
        },
        //列表内展开树节点
        treeLoad(tree, treeNode, resolve) {
            const parentId = tree.id;
            customerList({ parentId: parentId }).then(res => {
                resolve(res.data.data.records);
            });
        },
        //点击搜索按钮触发
        searchChange(params, done) {
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        searchReset() {
            this.treeDeptId = null;
        },
        nodeClick(data) {
            this.treeDeptId = data.id;
            this.page.currentPage = 1;
            this.onLoad(this.page);
        },
        getKeyId(row) {
            if (this.zhKey) {
                if (row) {
                    let res = this.corpList.find(e => { return e.cname == row })
                    if (res) {
                        this.$emit('getCropId', res.id)
                    } else {
                        this.$emit('getCropId', null)
                    }
                } else {
                    this.$emit('getCropId', null)
                }
            }
        },
        //列保存触发
        async saveColumn() {
            const inSave = await this.saveColumnData(
                this.getColumnName(51),
                this.option
            );
            if (inSave) {
                this.$message.success("保存成功");
                //关闭窗口
                this.$refs.crud.$refs.dialogColumn.columnBox = false;
            }
        },
        async resetColumn() {
            this.option = option;
            const inSave = await this.delColumnData(this.getColumnName(51), option);
            if (inSave) {
                this.$message.success("重置成功");
                this.$refs.crud.$refs.dialogColumn.columnBox = false;
            }
        },
    },
    watch: {
    }
};
</script>

<style lang="scss" scoped>
</style>