snt.butcher/src/views/basicInfo/firmInfo.vue

<template>
    <div class="firmInfo">
        <h2
            style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd"
        >
            企业信息
        </h2>
        <div class="left">
            <el-form ref="form" :model="form">
                <el-form-item label="企业名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="企业简介">
                    <el-input
                        type="textarea"
                        v-model="form.decription"
                        autosize
                    ></el-input>
                </el-form-item>
                <el-form-item label="国家地区">
                    <el-input v-model="form.province"></el-input>
                </el-form-item>
                <el-form-item label="所在省市">
                    <el-row type="flex" justify="space-between">
                        <el-col :span="11">
                            <el-input v-model="form.country"></el-input>
                        </el-col>
                        <el-col :span="11">
                            <el-input v-model="form.city"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-row type="flex" :gutter="19">
                        <el-input v-model="form.tel"></el-input>
                    </el-row>
                </el-form-item>
                <el-form-item>
                    <el-button
                        style="margin-left:60%"
                        type="primary"
                        @click="onSubmit"
                        >更新信息</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
// import { reqFirminfo, reqUpdateFirm } from "@/api/fileInfo.js";
export default {
    name: "firmInfo",
    data() {
        return {
            // 保留接口结构
            reqInfo: {},
            form: {
                name: "",
                email: "",
                decription: "",
                province: "",
                country: "",
                city: "",
                address: "",
                tel: ""
            }
        };
    },
    created() {
        // this.getFirminfo();
    },
    methods: {
        // 更新企业信息
        onSubmit() {
            let tempArr = [];
            for (const key in this.form) {
                tempArr.push({ key, val: this.form[key] });
            }
            this.reqInfo.conf = JSON.stringify({
                data: JSON.stringify(tempArr)
            });
            console.log(this.reqInfo);
            reqUpdateFirm(this.reqInfo)
                .then(res => {
                    // this.$message.success("更新企业信息成功！");
                    if (res.errCode) {
                        this.$message.error(res.errMsg);
                    } else {
                        this.$message.success("成功");
                    }
                })
                .catch(err => {
                    console.log(err);
                    this.$message.error("更新企业信息失败！");
                });
        },
        // 获取企业信息
        getFirminfo() {
            reqFirminfo()
                .then(res => {
                    // 保留接口结构
                    this.reqInfo = res;
                    if (res.conf.data) {
                        let obj = {};
                        JSON.parse(res.conf.data).forEach(item => {
                            obj[item.key] = item.val;
                        });
                        this.form = obj;
                    }
                })
                .catch(err => {
                    console.error(err);
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.firmInfo {
    .left {
        width: 400px;
        margin-left: 50px;
    }
}
</style>