kd-aiot-frontend-wt/src/views/bpm/handleTask/components/contactQC/parentList.vue

<template>
    <el-dialog title="选择客户"  custom-class="ele-dialog-form long-dialog-form" :visible.sync="visible" :before-close="handleClose" :close-on-click-modal="false" top="5vh"
        :close-on-press-escape="false" append-to-body width="80%">
        <el-card shadow="never">

            <contact-search @search="reload"> </contact-search>

            <ele-split-layout width="244px" allow-collapse :right-style="{ overflow: 'hidden' }">
                <div class="ele-border-lighter split-layout-right-content">
                    <AssetTree @handleNodeClick="handleNodeClick" id="17" :isFirstRefreshTable="false" ref="treeList" />
                </div>
                <!-- 表格 -->
                <template v-slot:content>
                    <ele-pro-table ref="table" :columns="columns" :datasource="datasource" row-key="id"
                        height="calc(100vh - 350px)" class="dict-table" @cell-click="cellClick">
                        <!-- 表头工具栏 -->
                        <template v-slot:action="{ row }">
                            <el-radio class="radio" v-model="radio" :label="row.id"><i></i></el-radio>
                        </template>
                    </ele-pro-table>
                </template>
            </ele-split-layout>







        </el-card>

        <div class="btns" slot="footer">
            <el-button type="primary" size="small" @click="selected">选择</el-button>
            <el-button size="small" @click="handleClose">关闭</el-button>
        </div>

    </el-dialog>
</template>

<script>

import { contactPage } from '@/api/bpm/components/supplierManage/contact';
import ContactSearch from './contactSearch.vue';
import AssetTree from '@/components/AssetTree';
export default {
    components: {
        ContactSearch,
        AssetTree
    },
    props: {
        classType: {
            type: Number|String,
            default: 1
        }
    },
    data() {
        return {
            visible: false,



            columns: [

                {
                    action: 'action',
                    slot: 'action',
                    align: 'center',
                    label: '选择'
                },
                {
                    columnKey: 'index',
                    label: '序号',
                    type: 'index',
                    width: 55,
                    align: 'center',
                    showOverflowTooltip: true,
                    fixed: 'left'
                },
                {
                    prop: 'code',
                    label: '客户编码',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 140
                },
                {
                    prop: 'name',
                    label: '客户名称',
                    align: 'center',
                    slot: 'name',
                    showOverflowTooltip: true,
                    minWidth: 200
                },
                {
                    prop: 'version',
                    label: '版本号',
                    align: 'center',
                    width: 80,
                    formatter: (_row, _column, cellValue) => `V${cellValue || 1}.0`
                },
                {
                    prop: 'serialNo',
                    label: '客户代号',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 140
                },
                {
                    prop: 'phone',
                    label: '客户电话',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 120
                },
                {
                    prop: 'addressName',
                    label: '单位地址',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 120,
                    formatter: (_row, _column, cellValue) => {
                        let addr = '' + _row.addressName ? _row.addressName.replaceAll(',', '') : '';
                        addr += _row.address ? _row.address : '';
                        return addr;
                    }
                },
                {
                    prop: 'linkName',
                    label: '联系人',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 120
                },
                {
                    prop: 'linkPhone',
                    label: '联系人电话',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 120
                },
                {
                    prop: 'status',
                    label: '状态',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 100,
                    formatter: (_row, _column, cellValue) => {
                        return _row.status === 1 ? '启用' : '禁用';
                    }
                },


            ],

            radio: null,
        }
    },

    watch: {

    },
    methods: {
        open(item) {
            if (item) {

                this.radio = item.id
            }
            this.visible = true
        },


        /* 表格数据源 */
        datasource({ page, limit, where, order }) {
            return contactPage({
                pageNum: page,
                size: limit,
                type: this.classType,
                ...where
            });
        },


        /* 刷新表格 */
        reload(where) {
            this.$refs.table.reload({ page: 1, where });
        },

        handleNodeClick(data, node) {
            this.curNodeData = data;
            this.reload({ categoryId: data.id });
        },


        // 单击获取id
        cellClick(row) {
            this.current = row
            this.radio = row.id
        },
        handleClose() {
            this.visible = false
            this.current = null
            this.radio = ''
        },

        selected() {
            if (!this.current) {
                return this.$message.warning('请选择上级客户')
            }
            this.$emit('changeParent', this.current)
            this.handleClose()
        },





    }
}
</script>

<style lang="scss" scoped>
.tree_col {
    border: 1px solid #eee;
    padding: 10px 0;
    box-sizing: border-box;
    height: 500px;
    overflow: auto;
}

.table_col {
    padding-left: 10px;

    ::v-deep .el-table th.el-table__cell {
        background: #f2f2f2;
    }
}

.pagination {
    text-align: right;
    padding: 10px 0;
}

.btns {
    text-align: center;
    padding: 10px 0;
}

.topsearch {
    margin-bottom: 15px;
}
</style>