HY.bigScreen.admin/src/views/aaaaaaaa.vue

<template>
    <div class="SheepDistribute">
        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">种羊等级分布</h2>
        <div class="left">
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="甲">
                    <el-input v-model="form.alpha"></el-input>
                </el-form-item>
                <el-form-item label="乙">
                    <el-input v-model="form.beta"></el-input>
                </el-form-item>
                <el-form-item label="丙">
                    <el-input v-model="form.gamma"></el-input>
                </el-form-item>
                <el-form-item label="丁">
                    <el-input v-model="form.delta"></el-input>
                </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 { reqSheepDistribute, reqSetSheepDistribute } from "@/api/breed.js";
export default {
    name: "SheepDistribute",
    data() {
        return {
            form: {
                alpha: "",
                beta: "",
                gamma: "",
                delta: ""
            }
        };
    },
    created() {
        this.getSheepDistribute();
    },
    methods: {
        onSubmit() {
            this.$confirm("确定更新信息？").then(() => {
                reqSetSheepDistribute(this.form)
                .then(res => {
                    console.log(res)
                    if(res.errcode) {
                        this.$message.error("更新失败！");
                    }
                    this.$message.success("更新成功！");
                })
                .catch(err => {
                    console.log(err);
                    this.$message.error("更新失败！");
                });
            });
            
        },
        getSheepDistribute() {
            reqSheepDistribute()
                .then(res => {
                    this.form = res.conf
                })
                .catch(err => {
                    console.error(err);
                });
        }
    }
};
</script>

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