eduerpos_ui_manage/src/components/page/admin/UpdateUser.vue

<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i>用户管理</el-breadcrumb-item>
                <el-breadcrumb-item><template v-if="newfla">新建用户</template><template v-else>编辑用户</template></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="商品名称">
                        <el-input v-model="form.goodsName"></el-input>
                    </el-form-item>
                    <el-form-item label="静态下拉框">
                        <el-select v-model="form.goodsTypeId1" placeholder="请选择">
                            <el-option key="1" label="下拉框1" value="1"></el-option>
                            <el-option key="2" label="下拉框2" value="2"></el-option>
                            <el-option key="3" label="下拉框3" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品分类">
                        <el-select v-model="form.goodsTypeId" placeholder="请选择商品分类" :filterable="true" :clearable="true">
                            <el-option v-for="(item, index) in goodsTypeList" :key="index" :label="item.goodsTypeName" :value="item.goodsTypeId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="日期时间">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="是否开票">
                        <el-switch v-model="form.invoiceFlg"></el-switch>
                    </el-form-item>
                    <el-form-item label="多选框">
                       <el-checkbox-group v-model="form.type">
                            <el-checkbox label="1" name="type">复选1</el-checkbox>
                            <el-checkbox label="2" name="type">复选2</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>  
                    <el-form-item label="商品状态">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="1">上架</el-radio>
                            <el-radio :label="0">下架</el-radio>  
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" rows="5" v-model="form.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="save">保存</el-button>
                        <el-button @click="othder">这是一个出错的操作</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'baseform',
        data() {
            return {
                newfla: true,
                url: '/api/goodsManage/showGoodsList',
                getUserUrl: '/api/goodsManage/showGoods',
                getGoodsTypeListUrl: '/api/goodsTypeManage/showGoodsTypeList',
                updateGoodsUrl: '/api/goodsManage/updateGoods',
                form: {
                    goodsId: '',
                    goodsName: '',
                    goodsTypeId: '',
                    goodsTypeId: '',
                    goodsTypeName: '',
                    invoiceFlg: '',
                    date1: '',
                    date2: '',
                    delivery: true,
                    type: ['1','2'],
                    status: 1,
                    desc: ''
                },
                goodsTypeList:[] // 商品类别下拉框
            }
        },
        created() {
            // 页面初始化请求事件
            //const querystring = require('querystring');
            this.$axios.post(this.getGoodsTypeListUrl).then(res => {
                if (res.data.rtnBean.rtnCode == 0) {
                    // 商品分类获取成功
                    this.goodsTypeList = res.data.list;
                } else {
                    this.$message.error(res.data.rtnBean.rtnMsg);
                }
                console.log(res);
            }).catch((error) => {
                
                console.log(error)
                this.$message.error('获取商品分类错误！')
            })
        },
        mounted() {
            // 页面初始化操作
            var id = this.$route.query.id;
            console.log(id);
            if (id != undefined && id != '') {

                this.newfla = false;
                // 获取到需要更新的数据
                const querystring = require('querystring');
                this.$axios.post(this.getUserUrl, querystring.stringify({
                    goodsId: id
                })).then(res => {
                    if (res.data.rtnBean.rtnCode == 0) {
                        var obj = res.data.obj;
                        this.form.goodsId = obj.goodsId;
                        this.form.goodsName = obj.goodsName;
                        this.form.status = obj.status;
                        this.form.goodsTypeId = obj.goodsTypeId; 
                        this.form.invoiceFlg = obj.invoiceFlg;
                    } else {
                        // 此处只能用alert
                        this.$message.error('参数错误，数据没找到！');
                        this.$router.go(-1);
                    }
                    console.log(res);
                    
                }).catch((error) => {
                    console.log(error)
                    this.$message.error("数据获取异常，请与管理员联系！");
                })
            }
            //alert('页面创建之前' + this.$route.query.id);
        },
        methods: {
            save() {
                if (this.form.goodsName == '') {
                    this.$message.error('请输入商品名');
                    return;
                }
                if (this.form.type == '') {
                    this.$message.error('请至少选择一项');
                    return;
                }

                const querystring = require('querystring');
                this.$axios.post(this.updateGoodsUrl, querystring.stringify({
                    goodsId: this.form.goodsId,
                    goodsName: this.form.goodsName,
                    status: this.form.status,
                    goodsTypeId: this.form.goodsTypeId
                })).then(res => {
                    console.log(res);
                 //  if (res.data.rtnCode == 0) {
                        this.$message.success('保存成功！');
                        this.$router.replace('/admin/usermanage');
                  //  } //else {
                     //   this.$message.success(res.data.rtnMsg);
                //    }
                }).catch((error) => {
                    console.log(error)
                    this.$message.error('更新失败了！')
                })
                          
            },
            othder() {
                this.$message.error('其他的动作');
            }
        }
    }
</script>