ioc-admin-ui/src/views/userManagement/groupManagement/messageDialog/corporationAdd.vue

<template>
    <div>
        <el-dialog v-dialog-drag style="overflow: hidden;" :title="popTitle" :visible.sync="dialogVisible" width="32%"
            append-to-body>
            <el-divider></el-divider>
            <div>
                <el-image :src="url"></el-image>
                <el-button class="alter">更换</el-button>
            </div>
            <div style="height: 400px;">
                <el-scrollbar style="height: 90%; width: 100%; top: -20px;">
                    <el-form :model="form" ref="form" label-position="left">
                        <el-form-item label="公司全称：" prop="fullName">
                            <el-input v-model="form.fullName" type="text"></el-input>
                        </el-form-item>
                        <el-form-item label="公司简称：" prop="abbreviateName">
                            <el-input v-model="form.abbreviateName" type="text"></el-input>
                        </el-form-item>
                        <el-form-item label="上级公司：" prop="parentCorporation">
                            <el-select v-model="form.parentCorporation">
                                <el-option v-for="item in superiorOptions" :value="item.value" :key="item.value"
                                    :label="item.label"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="统一社会信用代码：" prop="sccide">
                            <el-input v-model="form.sccide"></el-input>
                        </el-form-item>
                        <el-form-item v-model="form.registeredAddress" label="注册地址：" prop="registeredAddress">
                            <el-cascader :options="addressOptions" placeholder="选择城市/区级" filterable>
                            </el-cascader>
                            <el-input style="margin-left: 10px;"></el-input>
                        </el-form-item>
                        <el-form-item v-model="form.businessAddress" label="经营地址：" prop="businessAddress">
                            <el-cascader :options="addressOptions" placeholder="选择城市/区级" filterable>
                            </el-cascader>
                            <el-input style="margin-left: 10px;"></el-input>
                        </el-form-item>
                        <el-form-item label="法人姓名：" prop="legalName">
                            <el-input v-model="form.legalName" type="text"></el-input>
                        </el-form-item>
                        <el-form-item label="公司编码：" prop="orporationCode">
                            <el-input v-model="form.corporationCode" type="text"></el-input>
                        </el-form-item>
                        <el-form-item label="编制人数：" prop="complementCount">
                            <el-input v-model="form.complementCount" type="text"></el-input>
                        </el-form-item>
                        <el-form-item label="在岗人数：" prop="staffCount">
                            <el-input v-model="form.staffCount" type="text"></el-input>
                        </el-form-item>
                        <el-form-item>

                        </el-form-item>
                    </el-form>
                </el-scrollbar>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button style="background-color: #2EA8E6;color: #FFFFFF; margin-right: 30px;">下一个</el-button>
                <el-button style="background-color: #B3B3B3;color: #FFFFFF;margin-right: 30px;"
                    @click="resetForm('form')">重置</el-button>
                <el-button style="background-color: #2EA8E6;color: #FFFFFF;">更新</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {

    data() {
        return {
            popTitle: '添加公司',
            dialogVisible: false,
            url: '',
            form: {
                fullName: "",
                abbreviateName: "",
                parentCorporation: "",
                sccide: "",
                registeredAddress: "",
                businessAddress: "",
                legalName: "",
                corporationCode: "",
                complementCount: "",
                staffCount: ""
            },
            superiorOptions: [
                {
                    value: "0",
                    label: "中讯邮电咨询设计院"
                }
            ],
            addressOptions: [],
        }
    },
    methods: {
        close() {

        },
        resetForm() {
            this.$refs.form.resetFields();
        }
    }

}
</script>
<style lang="less" scoped>
/deep/.el-dialog__footer {
    text-align: center;
}
/deep/.el-dialog__body {
    padding: 0 20px;
}


/deep/.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 0 !important;
}

.el-image {
    width: 100%;
    height: 100px;
    margin-top: 10px;
}

.alter {
    background-color: #2EA8E6;
    color: #FFFFFF;
    float: right;
    position: relative;
    top: -40px;
    right: 10px;
    width: 80px !important;
}

.el-icon-close {
    margin-left: 480px;
}

/deep/.el-tabs__header {
    height: 0;
    margin-bottom: 0;
}


.el-select {
    width: 100%;
}

.el-form {
    padding: 0 5% 0 5%;

    .el-form-item {
        padding-top: 10px;
        margin-inline: 20px;
        margin-bottom: 0;
    }

    .el-cascader {
        /deep/.el-input__inner {
            width: 100px;
        }
    }

    /deep/.el-form-item__label {
        padding: 0;
        text-align: left;
        font-weight: 550;
    }

    /deep/.el-form-item__content {
        display: flex;
    }
}


.el-button {
    width: 100px;
    height: 30px;
    text-align: center;
    padding: 5px;
}
</style>