导入导出

gaoshp

2024-05-09 79383f55b0ae100df4abdec46be73ca3a1bfe5a3

导入导出

 src/views/console/basic-data/material-warehousing-data/material-infoComp1.vue

@@ -1,21 +1,21 @@
<!--
 * @Date: 2024-05-08 21:29:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-09 20:41:57
 * @LastEditTime: 2024-05-09 21:12:56
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/basic-data/material-warehousing-data/material-infoComp1.vue
-->
<template>
    <el-containter>
        <el-header>
            <el-button @click="table_add" type="primary" icon="el-icon-plus"></el-button>
            <el-button type="primary">导入</el-button>
            <el-button type="primary">导出</el-button>
            <!-- <el-button type="primary">导入</el-button> -->
            <import-table style="margin:0 8px" :exportUrl="exportUrl" :uploadUrl="uploadUrl"></import-table>
            <el-button type="primary" @click="getExport">导出</el-button>
            <el-popconfirm width="220" cancel-button-text="停用" confirm-button-text="删除"
                title="删除数据会影响已关联的业务 ,若您想在已关联的业务中依然显示这些数据, 您可以选择 停用 操作。停用后此数据将不能再被新业务使用。"
                @confirm="table_del(selection, '0')" @cancel="table_del(selection, '1')">
                <template #reference>
                    <el-button :disabled="selection.length == 0" type="danger" plain icon="el-icon-delete"
                        @click="batchDel"></el-button>
                    <el-button :disabled="selection.length == 0" type="danger" plain icon="el-icon-delete"></el-button>
                </template>
            </el-popconfirm>

@@ -162,9 +162,15 @@
</template>

<script>
import importTable from '@/layout/components/importTable.vue'
export default {
    components: {
        importTable,
    },
    data() {
        return {
            uploadUrl: "/api/blade-cps/material/import-material",
            exportUrl: "/api/blade-cps/material/export-template",
            options: {
                status: [
                    {
@@ -247,8 +253,12 @@
                ...row
            }
        },
        batchDel() {

        getExport() {
            this.$HTTP.post(`/api/blade-cps/material/export-material`, { ...this.params }).then(res => {
                if (res.code == 200) {
                    window.open(res.data.link);
                }
            }).catch(() => { })
        },
        dataChange() {


 src/views/master/person/main/personPerson.vue

@@ -1,26 +1,28 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-04-10 15:37:41
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-09 21:01:06
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/master/person/main/personPerson.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="person-person">
        <div class="person-person-left">
            <div class="person-left-title">
                <div :class="{'person-left-active': leftActive}" @click="changeTab(1)">部门</div>
                <div :class="{'person-left-active': !leftActive}" @click="changeTab(2)">岗位</div>
                <div :class="{ 'person-left-active': leftActive }" @click="changeTab(1)">部门</div>
                <div :class="{ 'person-left-active': !leftActive }" @click="changeTab(2)">岗位</div>
            </div>
            <div class="person-left-search">
                <el-input v-model="input" placeholder="请输入内容" size="small"></el-input>
            </div>
            <div class="person-tree">
                <!-- 部门 -->
                <el-tree style="max-width: 600px" :data="titleList" :expand-on-click-node="false" default-expand-all :props="{label: 'name', children: 'children'}" class="treeActive" @node-click="titleListNode" />
                <el-tree style="max-width: 600px" :data="titleList" :expand-on-click-node="false" default-expand-all
                    :props="{ label: 'name', children: 'children' }" class="treeActive" @node-click="titleListNode" />
                <!-- 岗位 -->
                <div v-for="(item,index) in titleList" :data-id="item.id" v-if="!leftActive" :class="{treeActive: item.active}" @click="selectbtn(index)">{{item.postName}}</div>
                <div v-for="(item, index) in titleList" :data-id="item.id" v-if="!leftActive"
                    :class="{ treeActive: item.active }" @click="selectbtn(index)">{{ item.postName }}</div>
            </div>
        </div>
        <div class="person-person-right">
@@ -28,7 +30,8 @@
                <div class="right-title"><span v-if="leftActive">部门：千文科技</span></div>
                <div>
                    <el-select v-model="searchData.status" placeholder="状态" class="searchStatus">
                        <el-option v-for="item in statusList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" size="small"/>
                        <el-option v-for="item in statusList" :key="item.dictKey" :label="item.dictValue"
                            :value="item.dictKey" size="small" />
                    </el-select>
                    <el-input v-model="searchData.keywords" style="width: 200px" size="small" placeholder="请输入关键字进行过滤">
                        <template #append>
@@ -37,7 +40,7 @@
                    </el-input>
                </div>
            </div>
            <div class="right-bottom"> 
            <div class="right-bottom">
                <el-button type="primary" @click="addPerson">+ 添加员工</el-button>
                <el-button type="primary" @click="changeDepartment">部门调整</el-button>
                <!-- 导入 -->
@@ -47,69 +50,71 @@
                <el-button type="danger" plain @click="delPerson">删除</el-button>
            </div>
            <div class="right-table">
                <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef" @selection-change="handleSelectionChange">
                <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" class="multipleTableRef"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="name" label="姓名" width="150"></el-table-column>
                    <el-table-column prop="jobNumber" label="工号" width="150"></el-table-column>
                    <el-table-column label="关联账号" width="120">
                        <template #default="scope">
                            <span>{{scope.row.account?scope.row.account:'-'}}</span>
                            <span>{{ scope.row.account ? scope.row.account : '-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="部门" width="120">
                        <template #default="scope">
                            <span>{{scope.row.organizationName?scope.row.organizationName:'-'}}</span>
                            <span>{{ scope.row.organizationName ? scope.row.organizationName : '-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="岗位" width="120">
                        <template #default="scope">
                            <span>{{scope.row.postName?scope.row.postName:'-'}}</span>
                            <span>{{ scope.row.postName ? scope.row.postName : '-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="邮箱" width="120">
                        <template #default="scope">
                            <span>{{scope.row.email?scope.row.email:'-'}}</span>
                            <span>{{ scope.row.email ? scope.row.email : '-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="tel" label="手机号" width="120"></el-table-column>
                    <el-table-column prop="tel" label="状态" width="120">
                        <template #default="scope">
                            <span>{{scope.row.status == "1"?"在职":'离职'}}</span>
                            <span>{{ scope.row.status == "1" ? "在职" : '离职' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="140">
                        <template #default="scope">
                            <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                            <el-button text type="primary" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                            <el-button type="text" size="small"
                                @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                            <el-button text type="primary" size="small"
                                @click="table_del(scope.row, scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[15, 50, 100]"
                    :page-size="15"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[15, 50, 100]" :page-size="15"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>

    <el-dialog title="部门调整" v-model="departmentVisible" :width="400" destroy-on-close>
        <el-form :model="departmentFrom" :rules="departmentVisibleRules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="center">
        <el-form :model="departmentFrom" :rules="departmentVisibleRules" :disabled="mode == 'show'" ref="dialogForm"
            label-width="80px" label-position="center">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="部门" prop="parentId">
                        <el-tree-select @change= "parentIdChange" v-model="departmentFrom.parentId" clearable placeholder="部门" default-expand-all check-on-click-nod :data="titleList" check-strictly :props="{ label: 'name' }" node-key="id" ref="parentTree" />
                        <el-tree-select @change="parentIdChange" v-model="departmentFrom.parentId" clearable
                            placeholder="部门" default-expand-all check-on-click-nod :data="titleList" check-strictly
                            :props="{ label: 'name' }" node-key="id" ref="parentTree" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="departmentVisible=false" >取 消</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="departmentSubmit()">保 存</el-button>
            <el-button @click="departmentVisible = false">取 消</el-button>
            <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="departmentSubmit()">保
                存</el-button>
        </template>
    </el-dialog>
    <!-- 删除 -->
@@ -125,391 +130,414 @@
            </div>
        </template>
    </el-dialog>
	
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="personHandleSuccess" @closed="dialog.save=false"></save-dialog>

    <save-dialog v-if="dialog.save" ref="saveDialog" @success="personHandleSuccess"
        @closed="dialog.save = false"></save-dialog>
</template>
<script>
    import importTable from '@/layout/components/importTable.vue'
    import saveDialog from './save'
    export default {
        name: "personPerson",
        data(){
            return {
                uploadUrl: "/api/blade-cps/employee/import-employee",
                exportUrl: "/api/blade-cps/employee/export-template",
                titleList: [],
                delPersonModel: false,
                searchIcon: "el-icon-search",
                searchData: {
                    current: 1,
                    size: 15,
                    status: "1",
                    total: "1",
                    keywords: "",
                    postId: "",  //postId
                    organizationCode: ""  //组织code
                },
                total: 0,
                isSaveing: false,
                groups: [],
                departmentFrom: {
                    department: ""
                },
                departmentVisibleRules: {
                    parentId:[{required: true, message: '请选择部门'}]
                },
                departmentVisible: false,
                dialog: {
                    save: false
                },
                leftActive: true,
                input: '',
                statusList: [],
                input3: '',
                tableData: [],
                selection: [],
                departmentFrom: {
                    parentId: ""
                }
            }
        },
        created(){
			
        },
        mounted(){
            this.getStatus();
            this.getOrganizationList();  //部门
        },
        components: {
            saveDialog,importTable
        },
        methods: {
            getExport() {
                this.$HTTP.get(`/api/blade-cps/employee/export-employee?`+this.$TOOL.qsStringify(this.searchData)).then(res=> {
                    if(res.code == 200) {
                        window.open(res.data.link);
                    }
                })
import importTable from '@/layout/components/importTable.vue'
import saveDialog from './save'
export default {
    name: "personPerson",
    data() {
        return {
            uploadUrl: "/api/blade-cps/employee/import-employee",
            exportUrl: "/api/blade-cps/employee/export-template",
            titleList: [],
            delPersonModel: false,
            searchIcon: "el-icon-search",
            searchData: {
                current: 1,
                size: 15,
                status: "1",
                total: "1",
                keywords: "",
                postId: "",  //postId
                organizationCode: ""  //组织code
            },
            parentIdChange(val) {
                // var $parentId = this.$refs.parentTree.getCurrentNode().title;
                // this.depatmentForm.$parentId = $parentId;
            total: 0,
            isSaveing: false,
            groups: [],
            departmentFrom: {
                department: ""
            },
            titleListNode(data) {
                this.searchData.organizationCode = data.code;
                this.searchPerson();
            departmentVisibleRules: {
                parentId: [{ required: true, message: '请选择部门' }]
            },
            selectbtn(index) {
                this.titleList.forEach(item=> {
                    item.active = false;
                })
                this.titleList[index].active = true;
                if(this.leftActive) { //部门
                    this.searchData.organizationCode = this.titleList[index].code;
                    this.searchData.postId= "";
                }else {  //岗位
                    this.searchData.organizationCode = "";
                    this.searchData.postId= this.titleList[index].id;
                }
                this.searchPerson();
            departmentVisible: false,
            dialog: {
                save: false
            },
            getOrganizationList() {  //部门
                this.$HTTP.get(`/api/blade-cps/organization/tree?groupType=group_organization&groupCategory=1`).then(res=> {
                    if(res.code == 200) {
                        this.titleList = res.data;
                        this.titleList[0].active = true;
                        this.searchData.organizationCode = res.data[0].code;
                        this.searchPerson();
                    }
                })
            },
            getPost() {  //岗位
                var obj = {
                    current: 1,
                    size: -1,
                }
                this.$HTTP.get(`/api/blade-system/post/page?`+this.$TOOL.qsStringify(obj)).then(res=> {
                    if(res.code == 200) {
                        this.titleList = res.data.records;
                        this.titleList[0].active = true;
                        this.searchData.postId = res.data.records[0].id;
                        this.searchPerson();
                    }
                })
            },
            delData(type) {
                this.$HTTP.post(`/api/blade-cps/employee/remove?ids=${this.selectId}&type=${type}`).then(res=> {
                    if(res.code == 200) {
                        this.$message.success("操作成功");
                        this.delPersonModel = false;
                        this.selectId = "";
                        this.getOrganizationList();
                    }
                })
            },
            personHandleSuccess() {
                if(this.leftActive) {
                    this.changeTab(1);
                }else {
                    this.changeTab(2);
                }
                this.searchPerson();
            },
            searchPerson() {
                this.$HTTP.get(`/api/blade-cps/employee/list?`+this.$TOOL.qsStringify(this.searchData)).then(res=> {
                    if(res.code == 200) {
                        res.data.records.forEach(item=> {
                            if(item.dictValue == "在职") {
                                this.searchData.status = item.dictKey;
                            }
                        })
                        this.tableData = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            getStatus() {  //获取全部账号
                this.$HTTP.get(`/api/blade-system/dict/dictionary?code=employee_status`).then(res=> {
                    if(res.code == 200) {
                        this.statusList = res.data;
                    }
                })
            },
            departmentSubmit() {
                var employeeIds = [];
                this.selection.forEach(item=> {
                    employeeIds.push(item.id);
                })
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.$HTTP.put(`/api/blade-cps/employee/change-organization?organizationId=${this.departmentFrom.parentId}&employeeIds=${employeeIds.join(",")}`).then(res=> {
                            if(res.code == 200) {
                                this.searchPerson();
                                this.departmentVisible=false;  //部门调整
                                this.departmentFrom.parentId = "";
                                this.$message.success("操作成功");
                            }else {
                                this.$alert(res.message, "提示", {type: 'error'});
                            }
                        })
                    }else{
                        return false;
                    }
                })
            },
            //添加
            addPerson(){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open()
                })
            },
            table_edit(row){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('edit').setData(row)
                })
            },
            //删除
            table_del(row) {
                this.selectId = row.id;
                this.delPersonModel = true;
            },
            handleSelectionChange(selection) {
                this.selection = selection;
            },
            delPerson() {
                if(this.selection.length == 0) {
                    this.$message({
                      message: '请选择至少一条数据',
                      type: 'warning'
                    });
                    return;
                }
                var selStr = "";
                this.selection.map(item=> {
                    selStr += item.id + ","
                })
                this.selectId = selStr.replace(/,$/, '');
                this.delPersonModel = true;
            },
            changeDepartment() {
                if(this.selection.length == 0) {
                    this.$message({
                      message: '请选择至少一条数据',
                      type: 'warning'
                    });
                    return;
                }
                var selStr = "";
                this.selection.map(item=> {
                    selStr += item.id + ","
                })
                this.selectId = selStr.replace(/,$/, '');
                this.departmentVisible = true;
            },
            changeTab(name) {
                this.searchData.current = 1;
                this.searchData.size = 15;
                this.searchData.organizationCode = "";
                this.searchData.postId= "";
                if(name == 1) {
                    this.searchData.total = '0';
                    this.leftActive = true;
                    this.getOrganizationList();
                }else {  //岗位
                    this.searchData.total = '1';
                    this.leftActive = false;
                    this.getPost();
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            leftActive: true,
            input: '',
            statusList: [],
            input3: '',
            tableData: [],
            selection: [],
            departmentFrom: {
                parentId: ""
            }
        }
    },
    created() {

    },
    mounted() {
        this.getStatus();
        this.getOrganizationList();  //部门
    },
    components: {
        saveDialog, importTable
    },
    methods: {
        getExport() {
            this.$HTTP.get(`/api/blade-cps/employee/export-employee?` + this.$TOOL.qsStringify(this.searchData)).then(res => {
                if (res.code == 200) {
                    window.open(res.data.link);
                }
            })
        },
        parentIdChange(val) {
            // var $parentId = this.$refs.parentTree.getCurrentNode().title;
            // this.depatmentForm.$parentId = $parentId;
        },
        titleListNode(data) {
            this.searchData.organizationCode = data.code;
            this.searchPerson();
        },
        selectbtn(index) {
            this.titleList.forEach(item => {
                item.active = false;
            })
            this.titleList[index].active = true;
            if (this.leftActive) { //部门
                this.searchData.organizationCode = this.titleList[index].code;
                this.searchData.postId = "";
            } else {  //岗位
                this.searchData.organizationCode = "";
                this.searchData.postId = this.titleList[index].id;
            }
            this.searchPerson();
        },
        getOrganizationList() {  //部门
            this.$HTTP.get(`/api/blade-cps/organization/tree?groupType=group_organization&groupCategory=1`).then(res => {
                if (res.code == 200) {
                    this.titleList = res.data;
                    this.titleList[0].active = true;
                    this.searchData.organizationCode = res.data[0].code;
                    this.searchPerson();
                }
            })
        },
        getPost() {  //岗位
            var obj = {
                current: 1,
                size: -1,
            }
            this.$HTTP.get(`/api/blade-system/post/page?` + this.$TOOL.qsStringify(obj)).then(res => {
                if (res.code == 200) {
                    this.titleList = res.data.records;
                    this.titleList[0].active = true;
                    this.searchData.postId = res.data.records[0].id;
                    this.searchPerson();
                }
            })
        },
        delData(type) {
            this.$HTTP.post(`/api/blade-cps/employee/remove?ids=${this.selectId}&type=${type}`).then(res => {
                if (res.code == 200) {
                    this.$message.success("操作成功");
                    this.delPersonModel = false;
                    this.selectId = "";
                    this.getOrganizationList();
                }
            })
        },
        personHandleSuccess() {
            if (this.leftActive) {
                this.changeTab(1);
            } else {
                this.changeTab(2);
            }
            this.searchPerson();
        },
        searchPerson() {
            this.$HTTP.get(`/api/blade-cps/employee/list?` + this.$TOOL.qsStringify(this.searchData)).then(res => {
                if (res.code == 200) {
                    res.data.records.forEach(item => {
                        if (item.dictValue == "在职") {
                            this.searchData.status = item.dictKey;
                        }
                    })
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                }
            })
        },
        getStatus() {  //获取全部账号
            this.$HTTP.get(`/api/blade-system/dict/dictionary?code=employee_status`).then(res => {
                if (res.code == 200) {
                    this.statusList = res.data;
                }
            })
        },
        departmentSubmit() {
            var employeeIds = [];
            this.selection.forEach(item => {
                employeeIds.push(item.id);
            })
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.$HTTP.put(`/api/blade-cps/employee/change-organization?organizationId=${this.departmentFrom.parentId}&employeeIds=${employeeIds.join(",")}`).then(res => {
                        if (res.code == 200) {
                            this.searchPerson();
                            this.departmentVisible = false;  //部门调整
                            this.departmentFrom.parentId = "";
                            this.$message.success("操作成功");
                        } else {
                            this.$alert(res.message, "提示", { type: 'error' });
                        }
                    })
                } else {
                    return false;
                }
            })
        },
        //添加
        addPerson() {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open()
            })
        },
        table_edit(row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('edit').setData(row)
            })
        },
        //删除
        table_del(row) {
            this.selectId = row.id;
            this.delPersonModel = true;
        },
        handleSelectionChange(selection) {
            this.selection = selection;
        },
        delPerson() {
            if (this.selection.length == 0) {
                this.$message({
                    message: '请选择至少一条数据',
                    type: 'warning'
                });
                return;
            }
            var selStr = "";
            this.selection.map(item => {
                selStr += item.id + ","
            })
            this.selectId = selStr.replace(/,$/, '');
            this.delPersonModel = true;
        },
        changeDepartment() {
            if (this.selection.length == 0) {
                this.$message({
                    message: '请选择至少一条数据',
                    type: 'warning'
                });
                return;
            }
            var selStr = "";
            this.selection.map(item => {
                selStr += item.id + ","
            })
            this.selectId = selStr.replace(/,$/, '');
            this.departmentVisible = true;
        },
        changeTab(name) {
            this.searchData.current = 1;
            this.searchData.size = 15;
            this.searchData.organizationCode = "";
            this.searchData.postId = "";
            if (name == 1) {
                this.searchData.total = '0';
                this.leftActive = true;
                this.getOrganizationList();
            } else {  //岗位
                this.searchData.total = '1';
                this.leftActive = false;
                this.getPost();
            }
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style scoped>
    .person-person {
        width: 100%;
        background-color: #f9fafb;
        border: 1px solid #dcdfe6;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
        display: flex;
    }
    .person-person-left {
        background-color: #fff;
        width: 300px;
        min-width: 300px;
        margin: 8px;
        overflow: hidden;
        border-radius: 4px;
        padding: 8px;
    }
    .person-person-right {
        background-color: #fff;
        flex: 1;
        margin-top: 8px;
        margin-bottom: 8px;
        overflow: hidden;
        border-radius: 4px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .person-left-title {
        text-align: center;
        vertical-align: middle;
        padding-left: 8px;
    }
    .person-left-title div {
        display: inline-block;
        width: 55px;
        height: 28px;
        line-height: 28px;
        border: 1px solid #dcdfe6;
        cursor: pointer;
    }
    .person-left-title div:nth-child(1) {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-right: 0px;
    }
    .person-left-title div:nth-child(2) {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-left: 0px;
    }
    .person-left-active {
        background-color: #3b8e8e;
        color: #fff;
    }
    .person-left-search {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .person-tree {
        font-size: 14px;
        font-weight: 400;
    }
    .person-tree div {
        margin-bottom: 8px;
        padding: 4px 18px;
        cursor: pointer;
    }
    .right-top {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #dcdfe6;
        margin-bottom: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .right-title {
        font-size: 18px;
        font-weight: bold;
        padding-bottom: 12px;
        margin-bottom: 8px;
        height: 37px;
    }
    .searchStatus {
        margin-right: 6px;
        width: 200px;
    }
    .right-bottom {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 8px;
    }
    .right-table {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 8px;
		
    }
    .multipleTableRef {
        margin-bottom: 8px;
    }
    .footerDiv {
        text-align: center;
    }
    .delBtn {
        color: #fff;
        width: 112px;
        height: 32px;
        display: inline-block;
        color: #fa554c;
        background-color: #fff;
        border: 1px solid #fdbbb7;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
    }
    .delBtn:nth-child(1) {
        margin-right:4px;
    }
    .delBtn:hover {
        background-color: #f34d5b;
        border-color: #f34d5b;
        color: #fff;
    }
    .delIcon {
        color: #fff;
        background: red;
        border-radius: 50%; 
        display: inline-block;
        width: 20px;
        height: 20px;
        font-size: 14px;
        text-align: center;
        line-height: 20px;
        margin-right: 6px;
    }
    .exportBtn {
        margin-left:8px;
        margin-right:8px;
    }
.person-person {
    width: 100%;
    background-color: #f9fafb;
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    display: flex;
}

.person-person-left {
    background-color: #fff;
    width: 300px;
    min-width: 300px;
    margin: 8px;
    overflow: hidden;
    border-radius: 4px;
    padding: 8px;
}

.person-person-right {
    background-color: #fff;
    flex: 1;
    margin-top: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: 4px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.person-left-title {
    text-align: center;
    vertical-align: middle;
    padding-left: 8px;
}

.person-left-title div {
    display: inline-block;
    width: 55px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #dcdfe6;
    cursor: pointer;
}

.person-left-title div:nth-child(1) {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: 0px;
}

.person-left-title div:nth-child(2) {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: 0px;
}

.person-left-active {
    background-color: #3b8e8e;
    color: #fff;
}

.person-left-search {
    padding-top: 8px;
    padding-bottom: 8px;
}

.person-tree {
    font-size: 14px;
    font-weight: 400;
}

.person-tree div {
    margin-bottom: 8px;
    padding: 4px 18px;
    cursor: pointer;
}

.right-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dcdfe6;
    margin-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

.right-title {
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 12px;
    margin-bottom: 8px;
    height: 37px;
}

.searchStatus {
    margin-right: 6px;
    width: 200px;
}

.right-bottom {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 8px;
}

.right-table {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 8px;

}

.multipleTableRef {
    margin-bottom: 8px;
}

.footerDiv {
    text-align: center;
}

.delBtn {
    color: #fff;
    width: 112px;
    height: 32px;
    display: inline-block;
    color: #fa554c;
    background-color: #fff;
    border: 1px solid #fdbbb7;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
}

.delBtn:nth-child(1) {
    margin-right: 4px;
}

.delBtn:hover {
    background-color: #f34d5b;
    border-color: #f34d5b;
    color: #fff;
}

.delIcon {
    color: #fff;
    background: red;
    border-radius: 50%;
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    margin-right: 6px;
}

.exportBtn {
    margin-left: 8px;
    margin-right: 8px;
}
</style>