关于switch开关组件编辑是得不到值,怎么解决?

Saber 未结 1 1636

一、该问题的重现步骤是什么?

1. 在表单中使用了一个开关组件,新增时往数据库存了一个true,在编辑的时候数据库的值没有赋给开关组件,还是显示false,请大神指导指导怎么解决?
下图时前端代码:

QQ截图20191223090203.png
下图时列表:

QQ截图20191223090825.png

下图时编辑时显示:

QQ截图20191223090422.png

二、你期待的结果是什么?实际看到的又是什么?

    希望看到开关组件按照数据库返回的值显示对应的效果


三、你正在使用的是什么产品,什么版本?在什么操作系统上?

saber  2.2.x            windows10


1条回答
  • 2019-12-23 09:59

    archer内是这么处理的


    image.png

    image.png

    作者追问:2019-12-23 10:40

    我的这个开关是放到分组里边了,去掉分组就可以显示,在分组里边不可以,该怎么处理?

    回答: 2019-12-24 16:01

    看到你群里强调问了很多遍,但我也没有看到帖子里你贴上了加载组件的代码。所以也无法帮你判断。

    直接推送了代码,去看下吧,改了个组件名就生效了:https://center.bladex.cn/blade/Saber/commit/f1703bc9688c80632d40d0a1c23908def9980bc0


    字典管理的“封存”字段

    作者追问:2019-12-24 16:12

    [removed]
        import {getList, getDetail, add, update, remove} from "@/api/course/course";
        import {mapGetters} from "vuex";
        export const switchDIC =[
            {
                label"",
                value'0'
            },{
                label"",
                value'1'
            }
        ];
        export default {
            data() {
                return {
                    sites: [],
                    form: {
                        courseFlag:true
                    },
                    trainIdes: {},
                    storePrice: {},
                    query: {},
                    loadingtrue,
                    page: {
                        pageSize10,
                        currentPage1,
                        total0
                    },
                    selectionList: [],
                    option: {
                        height'auto',
                        align'center',
                        calcHeight350,
                        sortabletrue,
                        tipfalse,
                        bordertrue,
                        indextrue,
                        viewBtntrue,
                        selectiontrue,
                        dialogType'drawer',
                        column: [
                            {
                                label"封面图片",
                                prop"coverPicture",
                                listType'picture-img',
                                type'upload',
                                width:120
                            },
                            {
                                label"课程名称",
                                prop"courseName",
                            },
                            {
                                label"课程价格",
                                prop"coursePrice",
                            },
                            {
                                label"状态",
                                prop"onlinePay",
                                slottrue
                            },
                        ],
                        group: [{
                            label"基本信息",
                            column: [
                                {
                                    label"课程名称",
                                    prop"courseName",
                                    span24,
                                    rules: [{
                                        requiredtrue,
                                        message"请输入课程名称",
                                        trigger"blur"
                                    }]
                                },
                                {
                                    label"年龄限制",
                                    prop"ageLimit",
                                    span24,
                                    rules: [{
                                        requiredtrue,
                                        message"请输入年龄限制",
                                        trigger"blur"
                                    }]
                                },
                                {
                                    label"课程分类",
                                    prop"courseType",
                                    type'select',
                                    dicUrl'/api/blade-course/courseType/select',
                                    span24,
                                    slot:true,
                                    props: {
                                        label"typeName",
                                        value"id"
                                    },
                                    rules: [{
                                        requiredtrue,
                                        message"请输入课程分类",
                                        trigger"blur"
                                    }]
                                },
                                {
                                    label"封面图片",
                                    prop"coverPicture",
                                    type'upload',
                                    listType'picture-img',
                                    rowtrue,
                                    propsHttp: {
                                        res'data',
                                        url'link',
                                    },
                                    tip'只能上传jpg/png文件,且不超过1M',
                                    action'/api/blade-resource/oss/endpoint/put-file'
                                },
                                {
                                    label"轮播图片",
                                    prop"carouselPicture",
                                    type'upload',
                                    listType'picture-card',
                                    dataType'array',
                                    propsHttp: {
                                        res'data',
                                        url'link',
                                    },
                                    span:24,
                                    rowtrue,
                                    tip'只能上传jpg/png文件,且不超过1M',
                                    action'/api/blade-resource/oss/endpoint/put-file'
                                },
                            ]
                        }, {
                            label"价格",
                            column: [
                                {
                                    label"收费方式",
                                    prop"priceMode",
                                    span24,
                                    rules: [{
                                        requiredtrue,
                                        message"请输入收费方式",
                                        trigger"blur"
                                    }]
                                },
                                {
                                    label"划线价格",
                                    prop"priceOrigin",
                                    span24,
                                    valueDefault:0,
                                    rules: [{
                                        requiredtrue,
                                        message"请输入划线价格",
                                        trigger"blur"
                                    }]
                                },
                                {
                                    label"课程价格",
                                    prop"coursePrice",
                                    formslottrue,
                                    valueDefault:0,
                                    span24,
                                    rules: [{
                                        requiredtrue,
                                        message"请输入统一价格",
                                        trigger"blur"
                                    }]
                                },
                                {
                                    label"开课校区",
                                    prop"trainId",
                                    formslottrue,
                                    span24,
                                },
                                {
                                    label"线上购买",
                                    prop"onlinePay",
                                    span24,
                                    type'switch',
                                    dicData: switchDIC,
                                    cell:true,
                                },
                                {
                                    label"分享海报",
                                    prop"posterPicture",
                                    type'upload',
                                    listType'picture-img',
                                    propsHttp: {
                                        res'data',
                                        url'link',
                                    },
                                    rowtrue,
                                    tip'只能上传jpg/png文件,且不超过500kb',
                                    action'/api/blade-resource/oss/endpoint/put-file'
                                },
                            ]
                        }]
                    },
                    data: []
                };
            },
            computed: {
                ...mapGetters(["permission"]),
                permissionList() {
                    return {
                        addBtnthis.vaildData(this.permission.course_add, false),
                        viewBtnthis.vaildData(this.permission.course_view, false),
                        delBtnthis.vaildData(this.permission.course_delete, false),
                        editBtnthis.vaildData(this.permission.course_edit, false)
                    };
                },
                ids() {
                    let ids = [];
                    this.selectionList.forEach(ele => {
                        ids.push(ele.id);
                    });
                    return ids.join(",");
                },
                /*
                *  获得课程分类下拉列表数据
                */
                getSitesList(){
                    let that = this;
                    let config = {
                        method'get',
                        url:'/api/blade-course/courseType/select',
                    };
                    this.axios(config).then(function (res{
                        that.sites = res.data.data;
                    }).catch(function (err{
                        this.$message.error("服务器连接错误");
                        console.log(err);
                    })
                },
            },
            methods: {
                /*
                *  添加数据
                */
                rowSave(row, loading, done) {
                    add(row).then(() => {
                        loading();
                        this.onLoad(this.page);
                        this.$message({
                            type"success",
                            message"操作成功!"
                        });
                    }, error => {
                        done();
                        console.log(error);
                    });
                },
                /*
                *  修改数据
                */
                rowUpdate(row, index, loading, done) {
                    row.trainIdes = this.trainIdes;
                    row.storePrice = this.storePrice;
                    update(row).then(() => {
                        loading();
                        this.onLoad(this.page);
                        this.$message({
                            type"success",
                            message"操作成功!"
                        });
                    }, error => {
                        done();
                        console.log(error);
                    });
                },
                /*
                *  删除数据
                */
                rowDel(row) {
                    this.$confirm("确定将选择数据删除?", {
                        confirmButtonText"确定",
                        cancelButtonText"取消",
                        type"warning"
                    })
                        .then(() => {
                            return remove(row.id);
                        })
                        .then(() => {
                            this.onLoad(this.page);
                            this.$message({
                                type"success",
                                message"操作成功!"
                            });
                        });
                },
                /*
                *  批量删除数据
                */
                handleDelete() {
                    if (this.selectionList.length === 0) {
                        this.$message.warning("请选择至少一条数据");
                        return;
                    }
                    this.$confirm("确定将选择数据删除?", {
                        confirmButtonText"确定",
                        cancelButtonText"取消",
                        type"warning"
                    })
                        .then(() => {
                            return remove(this.ids);
                        })
                        .then(() => {
                            this.onLoad(this.page);
                            this.$message({
                                type"success",
                                message"操作成功!"
                            });
                            this.$refs.crud.toggleSelection();
                        });
                },
                /*
                *  初始化编辑,查看数据
                */
                beforeOpen(done, type) {
                    if (["edit""view"].includes(type)) {
                        getDetail(this.form.id).then(res => {
                            this.form = res.data.data;
                        });
                    }
                    done();
                },
                searchReset() {
                    this.query = {};
                    this.onLoad(this.page);
                },
                searchChange(params) {
                    this.query = params;
                    this.page.currentPage = 1;
                    this.onLoad(this.page, params);
                },
                selectionChange(list) {
                    this.selectionList = list;
                },
                selectionClear() {
                    this.selectionList = [];
                    this.$refs.crud.toggleSelection();
                },
                currentChange(currentPage) {
                    this.page.currentPage = currentPage;
                },
                sizeChange(pageSize) {
                    this.page.pageSize = pageSize;
                },
                refreshChange() {
                    this.onLoad(this.page, this.query);
                },
                onLoad(page, params = {}) {
                    this.loading = true;
                    getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                        const data = res.data.data;
                        this.page.total = data.total;
                        this.data = data.records;
                        this.loading = false;
                        this.selectionClear();
                    });
                },
                uploadBefore(file, done, loading) {
                    //如果你想修改file文件,由于上传的file是只读文件,必须复制新的file才可以修改名字,完后赋值到done函数里,如果不修改的话直接写done()即可
                    const newFile = new File([file], '1234', {type: file.type});
                    const isLt500k = newFile.size/1024/1024<1 this.data = [] xss=removed> {
                        this.data = list;
                    })
                    console.log(oldindex, newindex, row, list)
                },
                checkClick(flag,coursePrice) {
                    var column = this.$refs.coursePrice;
                    console.log(coursePrice)
                    console.log(flag)
                    if (flag) {
                        column.disabled = false
                    } else {
                        column.value = 0;
                        column.disabled = true
                    }
                }
            }
        };
    [removed]

    我把代码提交上了  请您帮忙看一下

    回答: 2019-12-24 16:24

    给你的commit功能是没问题的,仔细对比。要把true、false改成1、0

    0 讨论(1)
代码语言
提交回复