bonus-ui/src/views/company-manage/components/add-form.vue

<template>
    <div>
        <el-dialog
            width="50%"
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
        >
            <el-form
                label-width="120px"
                :model="addOrEditForm"
                :rules="addOrEditFormRef"
                ref="addOrEditFormRef"
            >
                <TitleTip :titleText="`公司信息`" />
                <el-form-item label="公司名称：" prop="deptName">
                    <el-input v-model="addOrEditForm.deptName" />
                </el-form-item>
                <el-form-item label="公司简称：" prop="deptAbbreviation">
                    <el-input v-model="addOrEditForm.deptAbbreviation" />
                </el-form-item>
                <el-form-item label="公司概述：" prop="remark">
                    <el-input v-model="addOrEditForm.remark" type="textarea" />
                </el-form-item>
                <TitleTip :titleText="`基础设置`" />
                <el-form-item label="默认密码：" prop="password">
                    <el-input disabled v-model="addOrEditForm.password" />
                </el-form-item>
                <el-form-item label="LOGO设置：" prop="logo">
                    <div class="upload-container">
                        <UploadModel
                            :uploadFileList.sync="addOrEditForm.fileList"
                        />
                        <div>
                            1、上传图片文件格式仅支持SVG； <br />
                            2、LOGO图片大小不超过3MB,尺寸100px * 100px； <br />
                            3、收集客户的logo请UI设计完成海购添加； <br />
                            4、默认智慧工地LOGO。<a> >> 恢复默认</a> <br />
                        </div>
                    </div>
                </el-form-item>
                <TitleTip :titleText="`默认管理员`" />
                <el-form-item label="姓名：" prop="nickName">
                    <el-input v-model="addOrEditForm.nickName" />
                </el-form-item>
                <el-form-item label="手机号码：" prop="phonenumber">
                    <el-input v-model="addOrEditForm.phonenumber" />
                </el-form-item>
                <el-form-item label="角色：" prop="roles">
                    <el-input disabled v-model="addOrEditForm.roles" />
                </el-form-item>
                <el-form-item class="handle">
                    <el-button
                        @click="
                            () => {
                                $emit('update:formDialogVisible', false)
                            }
                        "
                    >
                        取消
                    </el-button>
                    <el-button type="primary" @click="onSubmitForm">
                        保存
                    </el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import UploadModel from '@/components/UploadModel'
import { addCompanyAPI } from '@/api/company-manage/index.js'
export default {
    props: {
        formType: {
            type: Number,
            default: () => 3,
        },
        formDialogVisible: {
            type: Boolean,
            default: () => false,
        },
    },
    components: {
        UploadModel,
    },
    data() {
        return {
            // 新增或修改接口
            addOrEditForm: {
                deptName: '',
                deptAbbreviation: '',
                remark: '',
                password: '',
                logo: '',
                nickName: '',
                phonenumber: '',
                userName: '',
                orderNum: 200,
                fileList: [],
                roles: '系统管理员',
            },
            addOrEditFormRef: {
                deptName: [
                    {
                        required: true,
                        message: '请输入公司名称',
                        trigger: 'blur',
                    },
                ],
                deptAbbreviation: [
                    {
                        required: true,
                        message: '请输入公司简称',
                        trigger: 'blur',
                    },
                ],
                remark: [
                    {
                        required: true,
                        message: '请输入公司概述',
                        trigger: 'blur',
                    },
                ],
                password: [
                    {
                        required: true,
                        message: '请输入默认密码',
                        trigger: 'blur',
                    },
                ],
                logo: [
                    {
                        required: true,
                        message: '请上传logo',
                        trigger: 'blur',
                    },
                ],
                nickName: [
                    {
                        required: true,
                        message: '请输入管理员姓名',
                        trigger: 'blur',
                    },
                ],
                phonenumber: [
                    {
                        required: true,
                        message: '请输入手机号码',
                        trigger: 'blur',
                    },
                    {
                        pattern: /^1[3456789]\d{9}$/,
                        message: '请输入正确的手机号码',
                        trigger: 'blur',
                    },
                ],
                roles: [
                    {
                        required: true,
                        message: '请输入角色',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },

    computed: {
        dialogVisible: {
            get() {
                return this.formDialogVisible
            },
        },
        dialogTitle: {
            get() {
                if (this.formType === 1) return '公司详情'
                if (this.formType === 2) return '公司编辑'
                if (this.formType === 3) return '公司注册'
            },
        },
    },
    methods: {
        handleClose() {
            this.$emit('update:formDialogVisible', false)
        },
        async onSubmitForm() {
            this.addOrEditForm.userName = this.addOrEditForm.phonenumber
            const res = await addCompanyAPI(this.addOrEditForm)
            if (res.code === 200) {
                this.$modal.msgSuccess('新增成功')
            }
            this.$emit('update:formDialogVisible', false)
            this.$emit('updateTableList')
        },
    },
    mounted() {
        this.getConfigKey('sys.user.initPassword').then((res) => {
            this.addOrEditForm.password = res.msg
        })
    },
    watch: {
        formDialogVisible: {
            handler(newValue) {
                if (!newValue) {
                    this.$refs.addOrEditFormRef.resetFields()
                }
            },
            deep: true,
        },
    },
}
</script>

<style lang="scss" scoped>
::v-deep .handle .el-form-item__content {
    text-align: right;
}

::v-deep .el-dialog {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 100vh !important;
    .el-dialog__body {
        flex: 1;
        overflow-y: scroll !important;
        .el-table__header-wrapper .el-checkbox {
            display: none !important;
        }
    }
    .dialog-content {
        padding: 20px;
    }
}

.upload-container {
    display: flex;
    align-items: center;

    & div:last-child {
        font-size: 13px;
        padding-left: 20px;
        line-height: 2.2;

        a {
            color: #1890ff;
        }
    }
}
</style>