Smart_platform_ui/src/components/dicSelect/main.vue

<template>
    <!-- 中文下拉 -->
    <div>
        <div style="display: flex;">
            <el-select ref="mySelect" style="width:100%" v-model="value" @input="$emit('selectedValue', value)"
                :placeholder="'请输入 ' + placeholder" @change="selectChange" @clear="clear" :clearable="clearable"
                :multiple="multiple" :filterable="filterable" :remote="remote" :remote-method="remoteMethod"
                :loading="loading" :size="size" :disabled="disabled" :collapse-tags="collapseTags">
                <el-option v-for="item in options" :key="item[key]" :label="item[label]"
                    :value="item[keyValue ? keyValue : label]">
                    <span v-if="slotRight" style="float: left">{{ item[label] }}</span>
                    <span v-if="slotRight"
                        style="float: right; color: #8492a6; font-size: 13px; max-width: 200px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">{{
                            item[rightLabel]
                        }}</span>
                    <span v-if="diySlot"
                        style="float: left;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"
                        :style="{ 'max-width': (selectWidth - 30) + 'px' }">{{
                            item[label]
                        }}</span>
                </el-option>
            </el-select>
            <el-button v-if="searchShow" icon="el-icon-search" size="small" :disabled="disabled" @click="open()" />
        </div>
        <el-dialog title="客户" :visible.sync="dialogVisible" width="70%" :before-close="false" @closed="closed"
            append-to-body>
            <span>
                <el-row v-if="treeShow">
                    <el-col :span="4">
                        <el-card class="box-card">
                            <avue-tree ref="tree" :option="treeOption" :data="treeData" @node-click="nodeClick">
                            </avue-tree>
                        </el-card>

                    </el-col>
                    <el-col :span="20">
                        <avue-crud :option="option" :table-loading="loading" :data="dataList" :page.sync="page"
                            :search.sync="query" v-model="form" id="out-table" ref="crud" @row-del="rowDel"
                            @search-change="searchChange" @search-reset="searchReset"
                            @selection-change="selectionChange" @current-change="currentChange"
                            @size-change="sizeChange" @on-load="onLoad">
                        </avue-crud>
                    </el-col>
                </el-row>
                <avue-crud v-else :option="option" :table-loading="loading" :data="dataList" :page.sync="page"
                    :search.sync="query" v-model="form" id="out-table" ref="crud" @row-del="rowDel"
                    @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
                    @current-change="currentChange" @size-change="sizeChange" @on-load="onLoad">
                </avue-crud>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" :disabled="this.selectionList.length != 1" @click="importData">确
                    定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getDicinit } from "@/api/dicSelect/index";
import { bcorpstypedefineList } from "@/api/iosBasicData/bcorpstypedefine"
export default {
    data() {
        return {
            dialogVisible: false,
            options: [],
            loading: false,
            data: {},
            form: {},
            query: {},
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            dataList: [],
            selectionList: [],
            option: {
                height: 400,
                calcHeight: 30,
                tip: false,
                searchIcon: true,
                searchIndex: 3,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                selection: true,
                header: false,
                menu: false,
                column: [
                    {
                        label: "编码",
                        prop: "code",
                        search: true,
                        rules: [{
                            required: true,
                            message: "请输入单位编码",
                            trigger: "blur"
                        }],
                        overHidden: true,
                    },
                    {
                        label: "中文名称",
                        prop: "cnName",
                        search: true,
                        rules: [{
                            required: true,
                            message: "请输入中文名称",
                            trigger: "blur"
                        }],
                        overHidden: true,
                    },
                    {
                        label: "英文名称",
                        prop: "enName",
                        search: true,
                        rules: [{
                            required: true,
                            message: "请输入英文名称",
                            trigger: "blur"
                        }],
                        overHidden: true,
                    },
                    {
                        label: "状态",
                        prop: "status",
                        type: 'select',
                        search: true,
                        dicData: [{
                            label: '启用',
                            value: 0
                        }, {
                            label: '停用',
                            value: 1
                        }],
                        rules: [{
                            required: true,
                            message: "请输入状态",
                            trigger: "blur"
                        }],
                        overHidden: true,
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        span: 24,
                        type: 'textarea',
                        width: "180",
                        slot: true,
                        minRows: 3,
                        overHidden: true,

                    },
                ],
                designer: null,
            },
            treeOption: {
                nodeKey: "id",
                lazy: true,
                treeLoad: function (node, resolve) {
                    const parentId = node.level === 0 ? 0 : node.data.id;
                },
                addBtn: false,
                menu: false,
                size: "small",
                props: {
                    labelText: "标题",
                    label: "cnName",
                    value: "id",
                    children: "children"
                }
            },
            treeData: [],
            selectWidth: 0
        }
    },
    props: {
        activateCreated: {
            type: Boolean,
            default: true
        },
        slotRight: {
            type: Boolean,
            default: false
        },
        diySlot: {
            type: Boolean,
            default: false
        },
        key: {
            type: [String, Number],
            default: null
        },
        label: {
            type: String,
            default: ''
        },
        rightLabel: {
            type: String,
            default: ''
        },
        keyValue: {
            type: [String, Number],
            default: null
        },
        res: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: '请输入'
        },
        clearable: {
            type: Boolean,
            default: true
        },
        value: {
            type: [String, Number],
            default: ''
        },
        method: {
            type: String,
            default: 'GET'
        },
        url: {
            type: String,
            default: ''
        },
        dataName: {
            type: String,
            default: ''
        },
        multiple: {
            type: Boolean,
            default: false
        },
        filterable: {
            type: Boolean,
            default: false
        },
        remote: {
            type: Boolean,
            default: false
        },
        size: {
            type: String,
            default: 'small'
        },
        disabled: {
            type: Boolean,
            default: false
        },
        searchShow: {
            type: Boolean,
            default: false
        },
        treeShow: {
            type: Boolean,
            default: false
        },
        mockData: {
            type: Array,
            default: function () {
                return [];
            }
        },
        collapseTags: {
            type: Boolean,
            default: false
        },
    },
    model: {
        prop: "value",
        event: "selectedValue"
    },
    created() {
        if (this.activateCreated) {
            this.getDicData()
        } else {
            this.options = this.mockData
        }
    },
    mounted() {
        if (this.diySlot) {
            this.$nextTick(() => {
                this.selectWidth = this.$refs.mySelect.$el.offsetWidth;
                this.$refs.mySelect.$el.querySelector('.el-select-dropdown').style.width = `${this.selectWidth}px`;
            });
        }
    },
    methods: {
        open() {
            this.dialogVisible = true
            this.getTree()
        },
        // 获取客户类别
        getTree() {
            bcorpstypedefineList(1, 50).then(res => {
                this.treeData = res.data.data.records
            })
        },
        nodeClick(data) {
            this.query.corpTypeName = data.cnName
            this.onLoad(this.page, this.query);
        },
        closed() {
            this.query = {}
            this.selectionList = []
        },
        remoteMethod(query) {
            console.log(query)
            if (query !== '') {
                setTimeout(() => {
                    this.data[this.dataName] = query
                    this.getDicData()
                }, 200);
            } else {
                setTimeout(() => {
                    this.data = this.$options.data().data
                    this.getDicData()
                }, 200);
            }
        },
        getDicData() {
            if (this.url) {
                this.loading = true
                getDicinit(this.method, this.url, this.data).then(res => {
                    if (this.res) {
                        this.options = res.data.data[this.res]
                    } else {
                        this.options = res.data.data
                    }
                }).finally(() => {
                    this.loading = false;
                })
            } else {
                console.log(this.mockData)
                this.options = this.mockData
            }

        },
        IdGetDicData(data) {
            this.loading = true
            getDicinit(this.method, this.url, data).then(res => {
                if (this.res) {
                    this.options = res.data.data[this.res]
                } else {
                    this.options = res.data.data
                }
            }).finally(() => {
                this.loading = false;
            })
        },
        selectChange(row) {
            this.options.forEach(e => {
                console.log(row, e)
                if (this.keyValue) {
                    if (row == e[this.keyValue]) {
                        this.$emit('selectChange', e)
                    }
                }
                if (this.label) {
                    if (row == e[this.label]) {
                        this.$emit('selectChange', e)
                    }
                }
            })
        },
        clear() {
            this.data = this.$options.data().data
            this.getDicData()
            this.$emit('selectChange', null)
        },
        importData() {
            this.dialogVisible = false
            this.$emit('selectChange', this.selectionList[0])
        },
        searchChange(params, done) {
            this.page.currentPage = 1;
            this.onLoad(this.page, this.query);
            done();
        },
        selectionChange(list) {
            this.selectionList = list;
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        onLoad(page, params = {}) {
            let obj = {}
            obj = {
                current: page.currentPage,
                size: page.pageSize,
                ...Object.assign(params, this.query),
            }
            this.loading = true
            getDicinit(this.method, this.url, obj).then(res => {
                this.dataList = res.data.data.records
                this.page.total = res.data.data.total;
            }).finally(() => {
                this.loading = false;
            })
        },
    }
}
</script>

<style lang="scss" scoped>
/deep/ .el-col-md-8 {
    width: 24.33333%;
}
</style>